@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family:"PermanentMarker";
  src:url("../fonts/permanent-marker-v16-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"RalewayCustom";
  src:url("../fonts/raleway-v37-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"InterCuostom";
  src:url("../fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"InterCuostom600";
  src:url("../fonts/inter-v20-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"InterCuostom700";
  src:url("../fonts/inter-v20-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"InterCuostom800";
  src:url("../fonts/inter-v20-latin-800.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#2d2d2d;
  --bg-2:#303030;
  --bg-3:#363636;
  --text:#d8d8d8;
  --text-soft:#c9c9c9;
  --heading:#f2f2f2;

  --surface-topcards:#282928;
  --surface-why:#282928;
  --surface-services:#252626;
  --surface-footer:#262626;
  --surface-footer-bottom:#2f2f2f;
  --surface-card-top:#282928;
  --surface-card:#252626;

  --white:#ffffff;
  --white-soft:#efefef;
  --white-muted:#e6e0d8;
  --white-muted-2:#e6e1d8;
  --text-muted:#d8d2c9;
  --text-muted-2:#d0cac0;
  --text-muted-3:#c9c4bc;
  --text-dropdown:#d8d1c8;

  --red:#ef2b24;
  --red-dark:#a81410;
  --red-nav:#e33232;
  --red-hero:#eb5244;
  --red-accent:#E83431;
  --red-btn:#ba1312;
  --red-btn-hover:#c92d2a;
  --red-topbar-phone:#a11212;

  --blue:#47bfff;
  --blue-footer:#4fc3ff;
  --blue-footer-hover:#79d3ff;

  --overlay-hero:rgba(0,0,0,.16);
  --overlay-cta:rgba(255,255,255,.15);

  --dropdown-bg:rgba(28,28,28,0.97);
  --dropdown-border:rgba(255,255,255,0.06);
  --dropdown-item-border:rgba(255,255,255,0.05);
  --dropdown-hover-bg:rgba(255,255,255,0.02);

  --intro-box-bg:rgba(70,70,70,.72);
  --intro-box-bg-hover:rgba(90,90,90,.78);
  --intro-box-border:rgba(255,255,255,.22);

  --topbar-phone-border:rgba(255,255,255,0.08);
  --menu-arrow:rgba(208,202,192,0.95);

  --wave-1:rgba(180,194,184,0.55);
  --wave-2:rgba(152,163,155,0.55);
  --wave-3:rgba(136,148,140,0.55);
  --wave-4:#262626;
  --wave-5:rgba(233,245,237,0.45);

  --shadow:0 10px 24px rgba(0,0,0,.28);
  --max:1320px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:"Inter", sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  max-width:100%;
}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

/* LIGHT MODE */
body.light{
  --bg:#f3f3f3;
  --bg-2:#ffffff;
  --bg-3:#f7f7f7;
  --text:#282828;
  --text-soft:#444;
  --heading:#111111;

  --surface-topcards:#f7f7f7;
  --surface-why:#f7f7f7;
  --surface-services:#ffffff;
  --surface-footer:#efefef;
  --surface-footer-bottom:#e4e4e4;
  --surface-card-top:#ffffff;
  --surface-card:#ffffff;

  --white:#1f1f1f;
  --white-soft:#1f1f1f;
  --white-muted:#2a2a2a;
  --white-muted-2:#2a2a2a;
  --text-muted:#444444;
  --text-muted-2:#3e3e3e;
  --text-muted-3:#555555;
  --text-dropdown:#2f2f2f;

  --red:#ef2b24;
  --red-dark:#a81410;
  --red-nav:#e33232;
  --red-hero:#eb5244;
  --red-accent:#E83431;
  --red-btn:#ba1312;
  --red-btn-hover:#c92d2a;
  --red-topbar-phone:#a11212;

  --blue:#1e90ff;
  --blue-footer:#1e90ff;
  --blue-footer-hover:#4aa8ff;

  --overlay-hero:rgba(255,255,255,.10);
  --overlay-cta:rgba(255,255,255,.35);

  --dropdown-bg:rgba(255,255,255,0.97);
  --dropdown-border:rgba(0,0,0,0.08);
  --dropdown-item-border:rgba(0,0,0,0.06);
  --dropdown-hover-bg:rgba(0,0,0,0.03);

  --intro-box-bg:rgba(255,255,255,.88);
  --intro-box-bg-hover:rgba(245,245,245,.96);
  --intro-box-border:rgba(0,0,0,.12);

  --topbar-phone-border:rgba(255,255,255,0.08);
  --menu-arrow:rgba(62,62,62,0.95);

  --wave-1:rgba(180,194,184,0.42);
  --wave-2:rgba(152,163,155,0.42);
  --wave-3:rgba(136,148,140,0.42);
  --wave-4:#efefef;
  --wave-5:rgba(233,245,237,0.36);
}

a,
button,
.nav a,
.dropdown a,
h1, h2, h3, h4, h5, h6,
p,
span,
div {
  caret-color: transparent;
}

@keyframes subHeroFade{
  0%{
    opacity:0;
    transform:scale(1.05);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}