:root {

  --header-max: 1380px;

  --page-frame-gap: clamp(0.55rem, 1vw, 0.9rem);
  --page-frame-radius: clamp(1rem, 1.45vw, 1.4rem);
  --section-gap: clamp(0.8rem, 1.2vw, 1.2rem);
  --header-frame-pad: clamp(0.4rem, 0.55vw, 0.55rem);
  --header-inner-radius: clamp(0.65rem, 0.9vw, 0.9rem);

  --header-side: clamp(1.8rem, 3.5vw, 3.4rem);

  --topbar-h: clamp(2rem, 2.15vw, 2.55rem);
  --navbar-h: clamp(5.1rem, 5.7vw, 6rem);

  --logo-area: 11.5625rem;
  --logo-h: clamp(3.7rem, 4.3vw, 4.65rem);

  --nav-gap: clamp(0.65rem, 0.9vw, 0.9rem);
  --nav-font: clamp(0.82rem, 0.79vw, 0.92rem);

  --phone-icon-size: clamp(3.1rem, 3.35vw, 3.55rem);

  --topbar-font: clamp(0.68rem, 0.64vw, 0.76rem);

  --header-blue: #062d68;
  --header-orange: #D92D00;

  --header-text: #0c1930;
  --header-muted: #596274;

  --header-white: #ffffff;

  --whatsapp: #15803D;

  --page-bg: #ffffff;
  --page-text: #111827;

  /* HERO */
  --hero-max: 1380px;
  --hero-side: clamp(2.2rem, 4.4vw, 4.8rem);

  --hero-pad-y: clamp(3rem, 4.7vw, 5rem);
  --hero-gap: clamp(2rem, 4vw, 5rem);

  --hero-copy-max: 35rem;

  --hero-eyebrow-size: clamp(0.78rem, 0.78vw, 0.92rem);

  --hero-title-size: clamp(2.7rem, 4vw, 4.5rem);
  --hero-title-line: 1.08;

  --hero-text-size: clamp(0.93rem, 0.95vw, 1.08rem);
  --hero-text-max: 32rem;

  --hero-actions-gap: clamp(0.8rem, 1.25vw, 1.2rem);

  --hero-btn-h: clamp(3rem, 3.3vw, 3.5rem);
  --hero-btn-px: clamp(1.1rem, 1.5vw, 1.55rem);

  --hero-media-max: 43rem;
  --hero-main-size: clamp(24rem, 34vw, 36rem);
  --hero-thumb-size: clamp(10.4rem, 14.2vw, 14.4rem);

  --hero-badge-size: clamp(6.3rem, 7.4vw, 7.8rem);
  --hero-dot-size: clamp(13rem, 18vw, 19rem);
}


* {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;
}


body {
  margin: 0;
  padding: 0;

  background: var(--page-bg);
  color: var(--page-text);

  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}


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


button,
input,
textarea,
select {
  font: inherit;
}


img,
svg {
  display: block;
}


/* =========================================================
   HEADER FRAME
   ========================================================= */


.site-header {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--page-frame-gap)
    auto
    0;

  padding:
    var(--header-frame-pad)
    var(--header-frame-pad)
    var(--header-frame-pad);

  background: #f8f8ff;

  border: 1px solid #e1e5ed;

  border-radius: var(--page-frame-radius);

  box-shadow: none;

  overflow: hidden;
}


.header-container {

  width: min(
    calc(100% - (var(--header-side) * 2)),
    var(--header-max)
  );

  margin-inline: auto;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {

  height: var(--topbar-h);

  background: var(--header-blue);

  color: var(--header-white);

  border-radius:
    var(--header-inner-radius)
    var(--header-inner-radius)
    0
    0;

  overflow: hidden;
}


.topbar-inner {

  height: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: clamp(1rem, 2vw, 2rem);
}


.topbar-left {

  display: flex;

  align-items: center;

  gap: clamp(1.8rem, 3.4vw, 3.6rem);

  min-width: 0;
}


.topbar-right {

  display: flex;

  align-items: center;
  justify-content: flex-end;

  white-space: nowrap;
}


.topbar-item {

  display: inline-flex;

  align-items: center;

  gap: 0.52rem;

  white-space: nowrap;

  font-size: var(--topbar-font);
  font-weight: 600;

  line-height: 1;
}


.topbar-icon {

  width: 1.12rem;
  height: 1.12rem;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 0.18rem;

  background: var(--header-orange);
}


.topbar-icon svg {

  width: 0.72rem;
  height: 0.72rem;

  fill: var(--header-white);
}


.topbar-social {

  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 0.42rem;

  white-space: nowrap;
}


.topbar-social-label {

  margin-right: 0.2rem;

  font-size: var(--topbar-font);
  font-weight: 600;
}


.topbar-social a {

  width: 1.28rem;
  height: 1.28rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);
  color: var(--header-white);

  font-size: 0.68rem;
  font-weight: 800;

  line-height: 1;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  height: var(--navbar-h);

  background: var(--header-white);

  border-bottom: 1px solid #eef1f5;

  border-radius:
    0
    0
    var(--header-inner-radius)
    var(--header-inner-radius);

  overflow: hidden;
}


.navbar-inner {

  height: 100%;

  display: grid;

  grid-template-columns:
    var(--logo-area)
    max-content
    minmax(1rem, 1fr);

  align-items: center;

  column-gap: clamp(1.25rem, 1.6vw, 1.875rem);
}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {

  width: var(--logo-area);

  height: var(--logo-h);

  display: flex;
  align-items: center;
}


.site-logo img {

  width: 100%;
  max-width: var(--logo-area);
  height: auto;
  max-height: 100%;

  object-fit: contain;
}


/* =========================================================
   MENU
   ========================================================= */

.main-nav {

  display: flex;

  align-items: center;
  justify-content: flex-start;

  gap: var(--nav-gap);
}


.main-nav a {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  white-space: nowrap;

  color: var(--header-text);

  font-size: var(--nav-font);

  font-weight: 700;

  letter-spacing: -0.025em;

  line-height: 1;

  transition:
    color 160ms ease,
    opacity 160ms ease;
}


.main-nav a:hover,
.main-nav a.active {
  color: var(--header-orange);
}


.nav-with-arrow svg {

  width: 0.72rem;
  height: 0.72rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}



.mobile-quick-actions {
  display: none;
}

.mobile-quick-btn {
  width: 2.7rem;
  height: 2.7rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  box-shadow: 0 0.18rem 0.5rem rgba(12, 25, 48, 0.14);
}

.mobile-quick-btn svg {
  width: 52%;
  height: 52%;
  fill: currentColor;
}

.mobile-quick-call {
  background: var(--header-orange);
}

.mobile-quick-wa {
  background: var(--whatsapp);
}
/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.header-actions {

  justify-self: end;

  display: flex;

  align-items: center;

  gap: clamp(1rem, 1.45vw, 1.55rem);
}


.phone-block {

  display: flex;

  align-items: center;

  gap: clamp(0.7rem, 0.9vw, 0.9rem);

  white-space: nowrap;

  color: var(--header-text);
}


.phone-icon {

  width: var(--phone-icon-size);
  height: var(--phone-icon-size);

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--header-orange);

  color: var(--header-white);
}


.phone-icon svg {

  width: 51%;
  height: 51%;

  fill: currentColor;
}


.phone-copy {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.24rem;
}


.phone-label {

  color: var(--header-muted);

  font-size: clamp(0.66rem, 0.62vw, 0.75rem);

  font-weight: 600;

  line-height: 1;
}


.phone-copy strong {

  color: var(--header-text);

  font-size: clamp(0.9rem, 0.85vw, 1rem);

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-block {

  display: flex;

  align-items: center;

  gap: clamp(0.55rem, 0.75vw, 0.75rem);

  padding:
    clamp(0.5rem, 0.6vw, 0.62rem)
    clamp(0.7rem, 0.85vw, 0.9rem);

  border: 1px solid rgba(37, 211, 102, 0.28);

  border-radius: 0.8rem;

  background: rgba(37, 211, 102, 0.07);

  white-space: nowrap;

  transition:
    background 160ms ease,
    border-color 160ms ease;
}


.whatsapp-block:hover {

  background: rgba(37, 211, 102, 0.13);

  border-color: rgba(37, 211, 102, 0.45);
}


.whatsapp-icon {

  width: clamp(2.45rem, 2.6vw, 2.75rem);
  height: clamp(2.45rem, 2.6vw, 2.75rem);

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--whatsapp);
  color: #ffffff;
}


.whatsapp-icon svg {

  width: 58%;
  height: 58%;

  fill: currentColor;
}


.whatsapp-copy {

  display: flex;

  flex-direction: column;

  gap: 0.18rem;
}


.whatsapp-copy small {

  color: var(--header-muted);

  font-size: clamp(0.62rem, 0.56vw, 0.7rem);

  font-weight: 600;

  line-height: 1;
}


.whatsapp-copy strong {

  color: var(--header-text);

  font-size: clamp(0.75rem, 0.68vw, 0.84rem);

  font-weight: 700;

  line-height: 1;
}

/* ===== RESPONSIVE HEADER START ===== */


/* ---------------------------------------------------------
   BURGER
   Desktop'ta görünmez.
   --------------------------------------------------------- */

.menu-toggle {
  display: none;

  width: clamp(2.7rem, 3vw, 3rem);
  height: clamp(2.7rem, 3vw, 3rem);

  padding: 0;

  border: 0;

  background: transparent;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0.3rem;

  cursor: pointer;
}

.menu-toggle span {
  width: 1.55rem;
  height: 0.14rem;

  border-radius: 999px;

  background: var(--header-text);

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}


/* ---------------------------------------------------------
   1180 PX
   Kompakt desktop / tablet landscape
   --------------------------------------------------------- */

@media (max-width: 1180px) {

  :root {
    --header-side: clamp(1.4rem, 2.7vw, 2.3rem);

    --logo-area: 10.25rem;
    --logo-h: clamp(3.45rem, 5vw, 4rem);

    --nav-font: clamp(0.72rem, 0.85vw, 0.82rem);

    --phone-icon-size: clamp(2.75rem, 3.6vw, 3.1rem);
  }

  .topbar-address {
    display: none;
  }

  .navbar-inner {
    column-gap: clamp(0.8rem, 1.25vw, 1.25rem);
  }

  .header-actions {
    gap: clamp(0.65rem, 1vw, 1rem);
  }

  .whatsapp-block {
    padding: 0.45rem;
    border-radius: 50%;
  }

  .whatsapp-copy {
    display: none;
  }

  .whatsapp-icon {
    width: clamp(2.5rem, 3.5vw, 2.9rem);
    height: clamp(2.5rem, 3.5vw, 2.9rem);
  }

}


/* ---------------------------------------------------------
   1024 PX
   Tablet landscape
   --------------------------------------------------------- */

@media (max-width: 1040px) {

  :root {
    --header-side: clamp(1.15rem, 2.2vw, 1.7rem);



    --nav-font: clamp(0.68rem, 0.78vw, 0.76rem);
  }

  .topbar-left {
    gap: clamp(1rem, 2vw, 1.8rem);
  }

  .phone-copy strong {
    font-size: clamp(0.82rem, 1vw, 0.9rem);
  }

}


/* ---------------------------------------------------------
   900 PX
   Mobil / tablet portrait başlangıcı
   Referanstaki telefon headerı:
   LOGO solda, burger sağda.
   --------------------------------------------------------- */

@media (max-width: 900px) {

  :root {
    --page-frame-gap: clamp(0.4rem, 1.8vw, 0.7rem);
  --page-frame-radius: clamp(1rem, 1.45vw, 1.4rem);
  --section-gap: clamp(0.8rem, 1.2vw, 1.2rem);
    --header-frame-pad: clamp(0.32rem, 1vw, 0.45rem);

    --header-side: clamp(1rem, 4vw, 1.5rem);

    --navbar-h: auto;

    --logo-h: clamp(3.5rem, 8vw, 4.25rem);
  }


  .topbar {
    display: none;
  }


  .navbar {
    height: auto;

    border-radius: 0;
  }


  .navbar-inner {
    min-height: clamp(4.8rem, 10vw, 5.6rem);

    display: grid;

    grid-template-columns:
      max-content
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      max-content;

    column-gap: 0;

    row-gap: 0;

    align-items: center;
  }


  .site-logo {
    height: var(--logo-h);

    grid-column: 1;
    grid-row: 1;

    justify-self: start;
  }

  .mobile-quick-actions {
    display: flex;

    grid-column: 3;

    align-items: center;
    justify-content: center;

    gap: 0.68rem;

    justify-self: center;
  }

  .mobile-quick-btn {
    width: clamp(2.55rem, 6vw, 2.8rem);
    height: clamp(2.55rem, 6vw, 2.8rem);
  }


  .main-nav {
    display: none;

    grid-column: 1 / -1;

    width: 100%;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding:
      0.65rem
      0
      0.75rem;

    border-top: 1px solid #edf0f5;
  }


  .main-nav a {
    width: 100%;

    justify-content: space-between;

    padding:
      0.9rem
      0.25rem;

    border-bottom: 1px solid #f0f2f5;

    font-size: clamp(0.82rem, 2vw, 0.9rem);

    letter-spacing: -0.015em;
  }


  .main-nav a:last-child {
    border-bottom: 0;
  }


  .header-actions {
    display: none;

    grid-column: 1 / -1;

    justify-self: stretch;

    width: 100%;

    padding:
      0
      0
      1rem;

    gap: 0.8rem;
  }


  .phone-block,
  .whatsapp-block {
    flex: 1 1 0;
  }


  .whatsapp-block {
    border-radius: 0.8rem;

    padding:
      0.55rem
      0.75rem;
  }


  .whatsapp-copy {
    display: flex;
  }


  .menu-toggle {
    display: flex;

    grid-column: 5;

    justify-self: end;
  }


  .menu-open .main-nav {
    display: flex;
  }
  .menu-open .header-actions {
    display: flex;
  }
  .menu-open .mobile-quick-actions {
    display: none;
  }


  .menu-open .menu-toggle span:nth-child(1) {
    transform:
      translateY(0.44rem)
      rotate(45deg);
  }


  .menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }


  .menu-open .menu-toggle span:nth-child(3) {
    transform:
      translateY(-0.44rem)
      rotate(-45deg);
  }

}


/* ---------------------------------------------------------
   520 PX
   Telefon
   --------------------------------------------------------- */

@media (max-width: 520px) {

  :root {
    --header-side: clamp(0.85rem, 4vw, 1.15rem);

    --logo-h: clamp(3.35rem, 12vw, 3.9rem);
  }


  .navbar-inner {
    min-height: clamp(4.65rem, 18vw, 5.15rem);
  }


  .menu-toggle {
    width: 2.8rem;
    height: 2.8rem;
  }

  .mobile-quick-actions {
    gap: 0.56rem;
  }

  .mobile-quick-btn {
    width: 2.45rem;
    height: 2.45rem;
  }


  .header-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .phone-block,
  .whatsapp-block {
    width: 100%;
  }


  .phone-block {
    justify-content: flex-start;

    padding:
      0.4rem
      0.2rem;
  }


  .whatsapp-block {
    justify-content: flex-start;
  }

}


/* ---------------------------------------------------------
   390 PX
   Küçük telefon
   --------------------------------------------------------- */

@media (max-width: 390px) {

  :root {
    --page-frame-gap: 0.35rem;
  --page-frame-radius: clamp(1rem, 1.45vw, 1.4rem);
  --section-gap: clamp(0.8rem, 1.2vw, 1.2rem);
    --header-side: 0.8rem;

    --logo-h: clamp(3.15rem, 13vw, 3.55rem);
  }


  .menu-toggle {
    width: 2.55rem;
    height: 2.55rem;
  }


  .menu-toggle span {
    width: 1.4rem;
  }

  .mobile-quick-actions {
    gap: 0.48rem;
  }

  .mobile-quick-btn {
    width: 2.3rem;
    height: 2.3rem;
  }

}


/* ===== RESPONSIVE HEADER END ===== */


/* ===== HERO DESIGN START ===== */


/* =========================================================
   HERO FRAME
   ========================================================= */

.hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius: var(--page-frame-radius);

  box-shadow: none;

  overflow: hidden;
}


.hero-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  min-height: clamp(31rem, 42vw, 38rem);

  margin-inline: auto;

  padding-block: var(--hero-pad-y);

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: center;

  gap: var(--hero-gap);
}


/* =========================================================
   HERO COPY
   ========================================================= */

.hero-copy {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: var(--hero-copy-max);
}


.hero-eyebrow {
  margin:
    0
    0
    clamp(0.7rem, 1vw, 1rem);

  color: var(--header-orange);

  font-size: var(--hero-eyebrow-size);

  font-weight: 800;

  letter-spacing: 0.025em;

  line-height: 1.3;
}


.hero-title {
  margin: 0;

  color: var(--header-text);

  font-size: var(--hero-title-size);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: var(--hero-title-line);
}


.hero-title span {
  display: block;

  margin-block:
    clamp(0.1rem, 0.2vw, 0.2rem);

  color: var(--header-orange);
}


.hero-description {
  max-width: var(--hero-text-max);

  margin:
    clamp(1.35rem, 1.8vw, 1.8rem)
    0
    0;

  color: #566071;

  font-size: var(--hero-text-size);

  font-weight: 500;

  line-height: 1.75;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--hero-actions-gap);

  margin-top:
    clamp(1.6rem, 2.2vw, 2.2rem);
}


.hero-btn {
  min-height: var(--hero-btn-h);

  padding-inline: var(--hero-btn-px);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: clamp(0.7rem, 0.8vw, 0.85rem);

  border-radius: 999px;

  font-size: clamp(0.76rem, 0.75vw, 0.88rem);

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.hero-btn:hover {
  transform: translateY(-0.1rem);
}


.hero-btn-primary {
  background: var(--header-orange);

  color: #ffffff;

  border: 1px solid var(--header-orange);

  box-shadow:
    0 0.4rem 1rem rgba(253, 52, 0, 0.16);
}


.hero-btn-secondary {
  background: #ffffff;

  color: var(--header-text);

  border: 1px solid #aeb6c3;
}
.hero-btn-location {
  background: #f6f8fb;

  color: var(--header-text);

  border: 1px solid #d5dcea;
}

.hero-btn-location .hero-btn-icon {
  background: var(--header-orange);

  color: #ffffff;
}


.hero-btn-icon {
  width: clamp(1.65rem, 1.8vw, 1.9rem);
  height: clamp(1.65rem, 1.8vw, 1.9rem);

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #ffffff;

  color: var(--header-orange);
}


.hero-btn-secondary .hero-btn-icon {
  background: var(--header-blue);

  color: #ffffff;
}


.hero-btn-icon svg {
  width: 52%;
  height: 52%;

  fill: currentColor;
}


/* =========================================================
   HERO MEDIA
   ========================================================= */

.hero-media {
  position: relative;

  width: 100%;

  max-width: var(--hero-media-max);

  min-height: clamp(27rem, 35vw, 34rem);

  justify-self: end;
}


/* =========================================================
   MAIN CIRCLE
   ========================================================= */

.hero-main-image {
  position: absolute;

  top: 50%;
  right: 0;

  width: var(--hero-main-size);

  aspect-ratio: 1;

  border-radius: 50%;

  overflow: hidden;

  border:
    clamp(0.35rem, 0.5vw, 0.5rem)
    solid
    #ffffff;

  box-shadow:
    0 0.8rem 2.4rem rgba(14, 35, 67, 0.14);

  transform: translateY(-50%);

  z-index: 2;
}


.hero-main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   SMALL CIRCLE
   ========================================================= */

.hero-thumb {
  position: absolute;

  left: 6.5%;

  top: 49%;

  width: var(--hero-thumb-size);

  aspect-ratio: 1;

  border-radius: 50%;

  overflow: hidden;

  border:
    clamp(0.3rem, 0.4vw, 0.45rem)
    solid
    #ffffff;

  box-shadow:
    0 0.7rem 1.8rem rgba(14, 35, 67, 0.18);

  z-index: 4;
}


.hero-thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   DOTTED DECORATION
   ========================================================= */

.hero-dots {
  position: absolute;

  left: 13%;

  bottom: 4%;

  width: var(--hero-dot-size);

  aspect-ratio: 1;

  border-radius: 50%;

  background-image:
    radial-gradient(
      circle,
      rgba(6, 45, 104, 0.28) 0.11rem,
      transparent 0.12rem
    );

  background-size:
    clamp(0.6rem, 0.7vw, 0.75rem)
    clamp(0.6rem, 0.7vw, 0.75rem);

  opacity: 0.72;

  z-index: 1;
}


/* =========================================================
   ORANGE RING
   ========================================================= */

.hero-ring {
  position: absolute;

  top: 6%;

  right: 3%;

  width: clamp(2.1rem, 2.6vw, 2.7rem);

  aspect-ratio: 1;

  border:
    clamp(0.18rem, 0.22vw, 0.23rem)
    solid
    var(--header-orange);

  border-radius: 50%;

  background: #ffffff;

  z-index: 5;
}


/* =========================================================
   24/7 BADGE
   ========================================================= */

.hero-emergency {
  position: absolute;

  right: 0;

  bottom: 5%;

  width: var(--hero-badge-size);

  aspect-ratio: 0.92;

  padding:
    clamp(0.7rem, 0.8vw, 0.9rem);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: clamp(0.3rem, 0.4vw, 0.4rem);

  border-radius:
    clamp(0.8rem, 1vw, 1rem);

  background: var(--header-blue);

  color: #ffffff;

  text-align: center;

  box-shadow:
    0 0.75rem 1.8rem rgba(6, 45, 104, 0.2);

  z-index: 6;
}


.hero-emergency-icon {
  color: var(--header-orange);

  font-size: clamp(1.3rem, 1.6vw, 1.7rem);

  font-weight: 800;

  line-height: 1;
}


.hero-emergency strong {
  font-size: clamp(0.62rem, 0.65vw, 0.76rem);

  font-weight: 700;

  line-height: 1.25;
}


/* =========================================================
   RESPONSIVE HERO
   ========================================================= */


/* ---------------------------------------------------------
   1180 PX
   Kompakt masaüstü
   İki kolon korunur.
   --------------------------------------------------------- */

@media (max-width: 1180px) {

  :root {
    --hero-side: clamp(1.8rem, 3vw, 2.5rem);
    --hero-gap: clamp(1.5rem, 2.5vw, 2.5rem);

    --hero-title-size: clamp(2.35rem, 3.65vw, 3.4rem);

    --hero-main-size: clamp(20rem, 33vw, 27rem);
    --hero-thumb-size: clamp(7.5rem, 11vw, 9.5rem);

    --hero-badge-size: clamp(5.8rem, 7vw, 6.8rem);
    --hero-dot-size: clamp(11rem, 17vw, 15rem);
  }

  .hero-container {
    min-height: clamp(28rem, 41vw, 32rem);
  }

  .hero-media {
    min-height: clamp(24rem, 34vw, 29rem);
  }

}


/* ---------------------------------------------------------
   1024 PX
   Tablet landscape
   Hâlâ iki kolon.
   --------------------------------------------------------- */

@media (max-width: 1040px) {

  :root {
    --hero-side: clamp(1.5rem, 2.7vw, 2rem);
    --hero-gap: clamp(1.2rem, 2vw, 1.8rem);

    --hero-title-size: clamp(2.1rem, 3.55vw, 2.8rem);
    --hero-text-size: clamp(0.84rem, 1vw, 0.94rem);

    --hero-main-size: clamp(18rem, 32vw, 23rem);
    --hero-thumb-size: clamp(6.8rem, 10vw, 8.2rem);

    --hero-badge-size: clamp(5.2rem, 6.8vw, 6.1rem);
  }

  .hero-container {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(0, 1.08fr);
  }

  .hero-description {
    line-height: 1.65;
  }

  .hero-btn {
    padding-inline: clamp(0.9rem, 1.2vw, 1.15rem);
  }

}


/* ---------------------------------------------------------
   900 PX
   Tablet portrait + mobil başlangıcı
   Hero tek kolona geçer.
   --------------------------------------------------------- */

@media (max-width: 900px) {

  :root {
    --hero-side: clamp(1.35rem, 5vw, 2.4rem);

    --hero-pad-y: clamp(2.5rem, 6vw, 3.5rem);

    --hero-gap: clamp(2rem, 5vw, 3rem);

    --hero-copy-max: 42rem;

    --hero-title-size: clamp(2.5rem, 6.5vw, 3.5rem);

    --hero-text-size: clamp(0.9rem, 2vw, 1rem);

    --hero-main-size: clamp(22rem, 58vw, 30rem);
    --hero-thumb-size: clamp(7.5rem, 19vw, 10rem);

    --hero-badge-size: clamp(5.8rem, 14vw, 7rem);
    --hero-dot-size: clamp(12rem, 34vw, 17rem);
  }

  .hero-container {
    min-height: auto;

    grid-template-columns: 1fr;

    align-items: start;
  }

  .hero-copy {
    max-width: var(--hero-copy-max);
  }

  .hero-description {
    max-width: 38rem;
  }

  .hero-actions {
    margin-top: clamp(1.4rem, 3vw, 1.8rem);
  }

  .hero-media {
    width: 100%;

    max-width: 38rem;

    min-height: clamp(25rem, 67vw, 32rem);

    justify-self: center;
  }

  .hero-main-image {
    top: 50%;
    right: 50%;

    transform:
      translate(50%, -50%);
  }

  .hero-thumb {
  position: absolute;

  left: 6.5%;

  top: 49%;

  width: var(--hero-thumb-size);

  aspect-ratio: 1;

  border-radius: 50%;

  overflow: hidden;

  border:
    clamp(0.3rem, 0.4vw, 0.45rem)
    solid
    #ffffff;

  box-shadow:
    0 0.7rem 1.8rem rgba(14, 35, 67, 0.18);

  z-index: 4;
}

  .hero-dots {
    left: 12%;
    bottom: 2%;
  }

  .hero-ring {
    top: 5%;
    right: 8%;
  }

  .hero-emergency {
    right: 3%;
    bottom: 4%;
  }

}


/* ===== HERO SERVICE STRIP START ===== */

.hero-service-strip {
  width: 100%;

  background: #ffffff;

  border-top: 1px solid #e7ebf1;
}

.hero-service-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.hero-service-item {
  min-width: 0;

  min-height: clamp(7.4rem, 7.8vw, 8.3rem);

  display: flex;

  align-items: center;

  gap: clamp(1rem, 1.3vw, 1.4rem);

  padding:
    clamp(1rem, 1.3vw, 1.35rem)
    clamp(0.8rem, 1vw, 1.1rem);

  border-right: 1px solid #edf0f5;
}

.hero-service-item:last-child {
  border-right: 0;
}


/* =========================================================
   PNG ICON
   ========================================================= */

.hero-service-icon {
  width: clamp(5.2rem, 5.7vw, 6.2rem);

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;
}

.hero-service-icon img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* =========================================================
   TEXT
   ========================================================= */

.hero-service-text {
  min-width: 0;
}

.hero-service-text strong {
  display: block;

  color: var(--header-text);

  font-size: clamp(0.92rem, 0.9vw, 1rem);

  font-weight: 700;

  line-height: 1.4;
}


/* =========================================================
   1180 PX
   2 x 2
   ========================================================= */

@media (max-width: 1180px) {

  .hero-service-container {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .hero-service-item {
    min-height: 7rem;
  }

  .hero-service-item:nth-child(1),
  .hero-service-item:nth-child(2) {
    border-bottom: 1px solid #edf0f5;
  }

  .hero-service-item:nth-child(2),
  .hero-service-item:nth-child(4) {
    border-right: 0;
  }

  .hero-service-icon {
    width: clamp(5rem, 8vw, 5.8rem);
  }

}


/* =========================================================
   768 PX
   Tablet portrait
   ========================================================= */

@media (max-width: 768px) {

  .hero-service-container {
    width: min(
      calc(100% - (var(--hero-side) * 2)),
      var(--hero-max)
    );
  }

  .hero-service-item {
    min-height: 6.5rem;

    gap: clamp(0.75rem, 2vw, 1rem);

    padding:
      0.9rem
      clamp(0.5rem, 2vw, 0.8rem);
  }

  .hero-service-icon {
    width: clamp(4.5rem, 12vw, 5.2rem);
  }

  .hero-service-text strong {
    font-size: clamp(0.82rem, 2vw, 0.92rem);
  }

}


/* =========================================================
   520 PX
   Tek kolon
   ========================================================= */

@media (max-width: 520px) {

  .hero-service-container {
    grid-template-columns: 1fr;
  }

  .hero-service-item {
    min-height: 5.8rem;

    gap: 1rem;

    padding:
      0.8rem
      0.25rem;

    border-right: 0;

    border-bottom: 1px solid #edf0f5;
  }

  .hero-service-item:nth-child(1),
  .hero-service-item:nth-child(2) {
    border-bottom: 1px solid #edf0f5;
  }

  .hero-service-item:last-child {
    border-bottom: 0;
  }

  .hero-service-icon {
    width: clamp(4.6rem, 20vw, 5.25rem);
  }

  .hero-service-text strong {
    font-size: clamp(0.86rem, 3.6vw, 0.94rem);
  }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width: 390px) {

  .hero-service-item {
    min-height: 5.4rem;

    gap: 0.85rem;
  }

  .hero-service-icon {
    width: 4.5rem;
  }

  .hero-service-text strong {
    font-size: 0.86rem;
  }

}


/* =========================================================
   360 PX
   ========================================================= */

@media (max-width: 360px) {

  .hero-service-item {
    min-height: 5.2rem;

    gap: 0.75rem;
  }

  .hero-service-icon {
    width: 4.2rem;
  }

  .hero-service-text strong {
    font-size: 0.82rem;

    line-height: 1.35;
  }

}

/* ===== HERO SERVICE STRIP END ===== */


/* ===== ABOUT SECTION START ===== */

/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius: var(--page-frame-radius);

  overflow: hidden;
}

.about-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.2rem, 5vw, 5.6rem);

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}


/* =========================================================
   IMAGE
   ========================================================= */

.about-media {
  position: relative;

  width: 100%;

  max-width: 39rem;

  justify-self: start;
}

.about-media img {
  display: block;

  width: 100%;
  height: auto;

  border-radius:
    clamp(0.9rem, 1.25vw, 1.25rem);

  object-fit: cover;

  box-shadow:
    0 1rem 2.6rem rgba(9, 35, 73, 0.10);
}


/* =========================================================
   COPY
   ========================================================= */

.about-copy {
  width: 100%;

  max-width: 38rem;
}

.about-eyebrow {
  margin:
    0
    0
    clamp(0.6rem, 0.8vw, 0.8rem);

  color: var(--header-orange);

  font-size:
    clamp(0.72rem, 0.75vw, 0.86rem);

  font-weight: 800;

  letter-spacing: 0.045em;

  line-height: 1.3;
}

.about-title {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.2rem, 3.2vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.08;
}

.about-title span {
  display: block;
}

.about-description {
  max-width: 36rem;

  margin:
    clamp(1.2rem, 1.7vw, 1.7rem)
    0
    0;

  color: #596274;

  font-size:
    clamp(0.9rem, 0.92vw, 1.02rem);

  font-weight: 500;

  line-height: 1.75;
}


/* =========================================================
   FEATURES
   ========================================================= */

.about-features {
  margin-top:
    clamp(1.5rem, 2.2vw, 2.2rem);

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(1.2rem, 2vw, 2rem);

  row-gap:
    clamp(1rem, 1.5vw, 1.4rem);
}

.about-feature {
  min-width: 0;

  display: flex;

  align-items: center;

  gap:
    clamp(0.7rem, 0.9vw, 0.9rem);

  color: var(--header-text);

  font-size:
    clamp(0.76rem, 0.76vw, 0.88rem);

  font-weight: 700;

  line-height: 1.35;
}

.about-feature-icon {
  width:
    clamp(2.4rem, 2.5vw, 2.75rem);

  height:
    clamp(2.4rem, 2.5vw, 2.75rem);

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border: 1px solid #dde3ec;

  border-radius: 50%;

  background: #ffffff;

  color: var(--header-orange);
}

.about-feature-icon svg {
  width: 56%;
  height: 56%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   BUTTON
   ========================================================= */

.about-button {
  min-height:
    clamp(3rem, 3.2vw, 3.35rem);

  margin-top:
    clamp(1.7rem, 2.3vw, 2.4rem);

  padding-inline:
    clamp(1.15rem, 1.5vw, 1.55rem);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.8rem;

  border-radius: 999px;

  background: var(--header-blue);

  color: #ffffff;

  font-size:
    clamp(0.76rem, 0.75vw, 0.86rem);

  font-weight: 700;

  line-height: 1;

  box-shadow:
    0 0.5rem 1.2rem rgba(6, 45, 104, 0.14);

  transition:
    transform 160ms ease,
    background 160ms ease;
}

.about-button:hover {
  background: #09265a;

  transform: translateY(-0.1rem);
}

.about-button span {
  width: 1.7rem;
  height: 1.7rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #ffffff;

  color: var(--header-blue);

  font-size: 1rem;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .about-container {
    gap:
      clamp(2rem, 3.5vw, 3.5rem);
  }

  .about-title {
    font-size:
      clamp(2rem, 3.1vw, 2.8rem);
  }

}


/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {

  .about-container {
    grid-template-columns: 1fr;

    gap:
      clamp(2rem, 5vw, 3rem);

    padding-block:
      clamp(2.6rem, 6vw, 3.8rem);
  }

  .about-media {
    max-width: 38rem;

    justify-self: center;
  }

  .about-copy {
    max-width: 42rem;

    justify-self: center;
  }

  .about-title {
    font-size:
      clamp(2.3rem, 6vw, 3.2rem);
  }

}


/* =========================================================
   600 PX
   ========================================================= */

@media (max-width: 600px) {

  .about-container {
    padding-block:
      clamp(2rem, 7vw, 2.8rem);
  }

  .about-title {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .about-description {
    line-height: 1.65;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .about-feature {
    font-size: 0.88rem;
  }

  .about-feature-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width: 390px) {

  .about-title {
    font-size:
      clamp(1.8rem, 8.5vw, 2.1rem);
  }

  .about-description {
    font-size: 0.85rem;
  }

  .about-button {
    width: 100%;
  }

}

/* ===== ABOUT SECTION END ===== */


/* ===== ABOUT CTA START ===== */

.about-cta-band {
  margin-top: clamp(2rem, 3vw, 3rem);
}

.about-cta-inner {
  position: relative;

  width: 100%;

  padding:
    clamp(2rem, 2.8vw, 2.7rem)
    clamp(1.5rem, 2.6vw, 2.7rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    max-content;

  align-items: center;

  gap: clamp(2rem, 4vw, 4.5rem);

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d3475 60%,
      #123e85 100%
    );

  border-radius: clamp(1rem, 1.4vw, 1.35rem);

  box-shadow:
    0 1rem 2.4rem rgba(6, 45, 104, 0.16);

  overflow: hidden;
}

.about-cta-inner::after {
  content: "";

  position: absolute;

  width: clamp(10rem, 17vw, 16rem);
  aspect-ratio: 1;

  right: -5%;
  top: -80%;

  border: 2rem solid rgba(255, 255, 255, 0.035);

  border-radius: 50%;

  pointer-events: none;
}

.about-cta-copy {
  position: relative;

  z-index: 1;

  min-width: 0;
}

.about-cta-eyebrow {
  margin: 0 0 0.55rem;

  color: #ffffff;

  font-size: clamp(0.75rem, 0.75vw, 0.88rem);

  font-weight: 800;

  letter-spacing: 0.08em;

  line-height: 1.3;
}

.about-cta-title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(2rem, 3vw, 3.2rem);

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.08;
}

.about-cta-text {
  max-width: 44rem;

  margin: 0.9rem 0 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: clamp(0.9rem, 0.92vw, 1rem);

  font-weight: 500;

  line-height: 1.7;
}

.about-cta-trust {
  margin-top: 1.15rem;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.75rem 1.35rem;
}

.about-cta-trust span {
  position: relative;

  color: rgba(255, 255, 255, 0.82);

  font-size: clamp(0.7rem, 0.7vw, 0.8rem);

  font-weight: 600;
}

.about-cta-trust span:not(:last-child)::after {
  content: "";

  position: absolute;

  width: 0.25rem;
  height: 0.25rem;

  right: -0.8rem;
  top: 50%;

  border-radius: 50%;

  background: var(--header-orange);

  transform: translateY(-50%);
}


/* =========================================================
   CTA ACTIONS
   Desktop: 3 buton TEK SATIR
   ========================================================= */

.about-cta-actions {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    max-content
    max-content
    max-content;

  align-items: center;

  justify-content: end;

  gap: clamp(0.65rem, 0.8vw, 0.85rem);

  width: max-content;

  max-width: none;
}

.about-cta-btn {
  height: clamp(3.2rem, 3.4vw, 3.55rem);

  padding-inline: clamp(1rem, 1.25vw, 1.35rem);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  border-radius: 0.72rem;

  font-size: clamp(0.78rem, 0.78vw, 0.9rem);

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.about-cta-btn:hover {
  transform: translateY(-0.1rem);
}

.about-cta-btn-call {
  background: var(--header-orange);

  color: #ffffff;

  box-shadow:
    0 0.5rem 1rem rgba(253, 52, 0, 0.2);
}

.about-cta-btn-wa {
  background: #15803D;

  color: #ffffff;

  box-shadow:
    0 0.5rem 1rem rgba(34, 197, 94, 0.2);
}

.about-cta-btn-location {
  background: #ffffff;

  color: var(--header-blue);
}

.about-cta-button-icon {
  display: inline-grid;

  place-items: center;

  font-size: 0.95rem;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .about-cta-inner {
    grid-template-columns: 1fr;

    gap: 1.6rem;
  }

  .about-cta-actions {
    justify-content: start;
  }

}


/* =========================================================
   640 PX
   ========================================================= */

@media (max-width: 640px) {

  .about-cta-inner {
    padding:
      1.7rem
      1.2rem;
  }

  .about-cta-title {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .about-cta-actions {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 0.7rem;
  }

  .about-cta-btn {
    width: 100%;
  }

}

/* ===== ABOUT CTA END ===== */


/* ===== SERVICES SECTION START ===== */

.services-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius: var(--page-frame-radius);

  overflow: hidden;
}

.services-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.3rem, 5vw, 5.5rem);
}


/* =========================================================
   HEADING
   ========================================================= */

.services-heading {
  max-width: 47rem;

  margin-inline: auto;

  text-align: center;
}

.services-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--header-orange);

  font-size: clamp(0.72rem, 0.75vw, 0.86rem);

  font-weight: 800;

  letter-spacing: 0.08em;
}

.services-title {
  margin: 0;

  color: var(--header-text);

  font-size: clamp(2.2rem, 3.2vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.08;
}

.services-title span {
  color: var(--header-orange);
}

.services-intro {
  max-width: 43rem;

  margin:
    1.15rem
    auto
    0;

  color: #5b6576;

  font-size: clamp(0.9rem, 0.92vw, 1rem);

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.services-grid {
  margin-top:
    clamp(2.3rem, 3.2vw, 3.3rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.4vw, 1.4rem);
}


/* =========================================================
   CARD
   ========================================================= */

.service-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    clamp(0.8rem, 1vw, 1rem);

  overflow: hidden;

  box-shadow:
    0 0.45rem 1.4rem rgba(9, 35, 73, 0.055);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.service-card:hover {
  transform: translateY(-0.25rem);

  box-shadow:
    0 0.9rem 2rem rgba(9, 35, 73, 0.1);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.service-card-image {
  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #edf1f6;
}

.service-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 300ms ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.025);
}


/* =========================================================
   CARD BODY
   ========================================================= */

.service-card-body {
  flex: 1;

  display: flex;

  flex-direction: column;

  padding:
    clamp(1rem, 1.25vw, 1.25rem);
}

.service-card-head {
  display: flex;

  align-items: center;

  gap: 0.75rem;
}

.service-card-icon {
  width: clamp(2.8rem, 3vw, 3.3rem);
  height: clamp(2.8rem, 3vw, 3.3rem);

  object-fit: contain;

  flex: 0 0 auto;
}

.service-card h3 {
  margin: 0;

  color: var(--header-text);

  font-size: clamp(1rem, 1.05vw, 1.18rem);

  font-weight: 800;

  line-height: 1.25;
}

.service-card p {
  margin:
    1rem
    0
    0;

  color: #606979;

  font-size: clamp(0.78rem, 0.78vw, 0.88rem);

  font-weight: 500;

  line-height: 1.65;
}

.service-card-body > a {
  margin-top: auto;

  padding-top: 1.2rem;

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  color: var(--header-blue);

  font-size: clamp(0.75rem, 0.75vw, 0.84rem);

  font-weight: 700;
}

.service-card-body > a span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   FOOTER BUTTON
   ========================================================= */

.services-footer {
  margin-top:
    clamp(2rem, 2.7vw, 2.7rem);

  display: flex;

  justify-content: center;
}

.services-all-button {
  min-height: 3.2rem;

  padding-inline: 1.4rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  border: 1px solid #aeb6c3;

  border-radius: 999px;

  color: var(--header-text);

  font-size: 0.82rem;

  font-weight: 700;

  background: #ffffff;
}

.services-all-button span {
  width: 1.7rem;
  height: 1.7rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-blue);

  color: #ffffff;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .services-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   640 PX
   ========================================================= */

@media (max-width: 640px) {

  .services-container {
    padding-block:
      clamp(2.5rem, 8vw, 3.5rem);
  }

  .services-title {
    font-size:
      clamp(2rem, 8vw, 2.6rem);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card-image {
    aspect-ratio: 16 / 9;
  }

  .service-card-icon {
    width: 3.2rem;
    height: 3.2rem;
  }

}


/* ===== SERVICES SECTION END ===== */


/* ===== WHY CHOOSE SECTION START ===== */

/* =========================================================
   WHY CHOOSE SECTION
   ========================================================= */

.why-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #f8faff 0%,
      #ffffff 55%,
      #f7f9fd 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.why-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.4rem, 5.5vw, 6rem);

  display: grid;

  grid-template-columns:
    minmax(0, 0.84fr)
    minmax(0, 1.16fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}


/* =========================================================
   LEFT COPY
   ========================================================= */

.why-copy {
  max-width: 35rem;
}

.why-eyebrow {
  margin: 0 0 0.7rem;

  color: var(--header-orange);

  font-size:
    clamp(0.72rem, 0.75vw, 0.86rem);

  font-weight: 800;

  letter-spacing: 0.08em;

  line-height: 1.3;
}

.why-title {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.35rem, 3.25vw, 3.6rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.07;
}

.why-title span {
  display: block;

  color: var(--header-orange);
}

.why-lead {
  margin:
    clamp(1.4rem, 1.8vw, 1.8rem)
    0
    0;

  color: #4f5a6c;

  font-size:
    clamp(0.92rem, 0.94vw, 1.04rem);

  font-weight: 600;

  line-height: 1.72;
}

.why-description {
  margin:
    clamp(0.9rem, 1.2vw, 1.2rem)
    0
    0;

  color: #687181;

  font-size:
    clamp(0.86rem, 0.87vw, 0.96rem);

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.why-cta {
  margin-top:
    clamp(1.7rem, 2.2vw, 2.3rem);
}

.why-call-button {
  min-height:
    clamp(3.1rem, 3.3vw, 3.5rem);

  padding-inline:
    clamp(1.1rem, 1.45vw, 1.5rem);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.75rem;

  background: var(--header-orange);

  color: #ffffff;

  border-radius: 999px;

  font-size:
    clamp(0.8rem, 0.8vw, 0.9rem);

  font-weight: 700;

  line-height: 1;

  box-shadow:
    0 0.55rem 1.2rem rgba(253, 52, 0, 0.17);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.why-call-button:hover {
  transform: translateY(-0.1rem);

  box-shadow:
    0 0.75rem 1.5rem rgba(253, 52, 0, 0.22);
}

.why-call-button span {
  width: 1.7rem;
  height: 1.7rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #ffffff;

  color: var(--header-orange);
}

.why-cta p {
  margin:
    0.8rem
    0
    0;

  color: #727b8a;

  font-size:
    clamp(0.72rem, 0.72vw, 0.82rem);

  font-weight: 600;
}


/* =========================================================
   RIGHT GRID
   ========================================================= */

.why-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.5vw, 1.5rem);
}


/* =========================================================
   CARD
   ========================================================= */

.why-card {
  min-width: 0;

  min-height:
    clamp(16rem, 18vw, 18.5rem);

  padding:
    clamp(1.3rem, 1.7vw, 1.75rem);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  background: #ffffff;

  border: 1px solid #e3e7ef;

  border-radius:
    clamp(0.9rem, 1.1vw, 1.1rem);

  box-shadow:
    0 0.55rem 1.5rem rgba(11, 40, 83, 0.055);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.why-card:hover {
  transform: translateY(-0.22rem);

  border-color: #d3dbe8;

  box-shadow:
    0 1rem 2rem rgba(11, 40, 83, 0.09);
}

.why-card-icon {
  width:
    clamp(3.2rem, 3.5vw, 3.7rem);

  height:
    clamp(3.2rem, 3.5vw, 3.7rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eef3fb;

  color: var(--header-blue);
}

.why-card-icon-orange {
  background: #fff0ec;

  color: var(--header-orange);
}

.why-card-icon svg {
  width: 54%;
  height: 54%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.75;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-card-content {
  margin-top:
    clamp(1rem, 1.25vw, 1.25rem);
}

.why-card-kicker {
  margin: 0 0 0.45rem;

  color: var(--header-orange);

  font-size:
    clamp(0.64rem, 0.64vw, 0.72rem);

  font-weight: 800;

  letter-spacing: 0.08em;
}

.why-card h3 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(1.05rem, 1.15vw, 1.28rem);

  font-weight: 800;

  line-height: 1.3;
}

.why-card-content > p:last-child {
  margin:
    clamp(0.8rem, 1vw, 1rem)
    0
    0;

  color: #646e7e;

  font-size:
    clamp(0.78rem, 0.78vw, 0.88rem);

  font-weight: 500;

  line-height: 1.66;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .why-container {
    grid-template-columns:
      minmax(0, 0.76fr)
      minmax(0, 1.24fr);

    gap:
      clamp(2rem, 3vw, 3.2rem);
  }

  .why-title {
    font-size:
      clamp(2.1rem, 3.2vw, 2.8rem);
  }

}


/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {

  .why-container {
    grid-template-columns: 1fr;

    gap:
      clamp(2.2rem, 5vw, 3rem);
  }

  .why-copy {
    max-width: 43rem;
  }

  .why-title {
    font-size:
      clamp(2.3rem, 6vw, 3.2rem);
  }

}


/* =========================================================
   600 PX
   ========================================================= */

@media (max-width: 600px) {

  .why-container {
    padding-block:
      clamp(2.7rem, 8vw, 3.7rem);
  }

  .why-title {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    min-height: auto;
  }

  .why-call-button {
    width: 100%;
  }

}


/* ===== WHY CHOOSE SECTION END ===== */


/* ===== SERVICE AREAS START ===== */

.areas-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.areas-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.4rem, 5vw, 5.5rem);
}


/* =========================================================
   HEADING
   ========================================================= */

.areas-heading {
  max-width: 48rem;

  margin-inline: auto;

  text-align: center;
}

.areas-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--header-orange);

  font-size:
    clamp(0.72rem, 0.74vw, 0.85rem);

  font-weight: 800;

  letter-spacing: 0.08em;

  line-height: 1.3;
}

.areas-title {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.25rem, 3.2vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.areas-title span {
  color: var(--header-orange);
}

.areas-intro {
  max-width: 44rem;

  margin:
    1.1rem
    auto
    0;

  color: #5d6677;

  font-size:
    clamp(0.9rem, 0.92vw, 1rem);

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   FEATURED EFELER
   ========================================================= */

.area-featured {
  position: relative;

  margin-top:
    clamp(2.2rem, 3vw, 3rem);

  min-height:
    clamp(8.5rem, 9vw, 9.8rem);

  padding:
    clamp(1.4rem, 2vw, 2rem)
    clamp(1.4rem, 2.4vw, 2.5rem);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(1rem, 1.7vw, 1.7rem);

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0e3679 100%
    );

  border-radius:
    clamp(0.9rem, 1.2vw, 1.2rem);

  color: #ffffff;

  overflow: hidden;

  box-shadow:
    0 0.9rem 2rem rgba(6, 45, 104, 0.12);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.area-featured:hover {
  transform: translateY(-0.15rem);

  box-shadow:
    0 1.1rem 2.5rem rgba(6, 45, 104, 0.17);
}

.area-featured::after {
  content: "";

  position: absolute;

  width: 12rem;
  height: 12rem;

  right: -3rem;
  top: -6rem;

  border: 1.7rem solid rgba(255,255,255,0.035);

  border-radius: 50%;

  pointer-events: none;
}

.area-featured-icon {
  width:
    clamp(4rem, 4.4vw, 4.7rem);

  height:
    clamp(4rem, 4.4vw, 4.7rem);

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.area-featured-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-featured-copy {
  min-width: 0;
}

.area-featured-copy > p:first-child {
  margin: 0 0 0.35rem;

  color: #ffb19e;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.area-featured-copy h3 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.35rem, 1.65vw, 1.75rem);

  font-weight: 800;

  line-height: 1.2;
}

.area-featured-copy > span {
  display: block;

  margin-top: 0.25rem;

  color: rgba(255,255,255,0.72);

  font-size: 0.76rem;

  font-weight: 600;
}

.area-featured-description {
  max-width: 44rem;

  margin:
    0.7rem
    0
    0 !important;

  color: rgba(255,255,255,0.86) !important;

  font-size:
    clamp(0.8rem, 0.8vw, 0.9rem) !important;

  font-weight: 500 !important;

  letter-spacing: normal !important;

  line-height: 1.55;
}

.area-featured-link {
  position: relative;

  z-index: 1;

  min-height: 3rem;

  padding-inline:
    clamp(1rem, 1.3vw, 1.3rem);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.7rem;

  background: #ffffff;

  color: var(--header-blue);

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

  white-space: nowrap;
}

.area-featured-link > span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   DISTRICT GRID
   ========================================================= */

.areas-grid {
  margin-top:
    clamp(1.1rem, 1.5vw, 1.5rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(0.9rem, 1.2vw, 1.2rem);
}


/* =========================================================
   DISTRICT CARD
   ========================================================= */

.area-card {
  min-width: 0;

  min-height:
    clamp(14rem, 15vw, 15.5rem);

  padding:
    clamp(1.2rem, 1.45vw, 1.5rem);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  background: #ffffff;

  border: 1px solid #e2e6ee;

  border-radius:
    clamp(0.8rem, 1vw, 1rem);

  box-shadow:
    0 0.4rem 1.2rem rgba(10, 39, 80, 0.04);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.area-card:hover {
  transform: translateY(-0.2rem);

  border-color: rgba(253,52,0,0.35);

  box-shadow:
    0 0.8rem 1.7rem rgba(10, 39, 80, 0.08);
}

.area-card-icon {
  width: 2.9rem;
  height: 2.9rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eef3fb;

  color: var(--header-blue);

  transition:
    background 180ms ease,
    color 180ms ease;
}

.area-card:hover .area-card-icon {
  background: #fff0ec;

  color: var(--header-orange);
}

.area-card-icon svg {
  width: 52%;
  height: 52%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.75;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-card-copy {
  width: 100%;

  margin-top: 1rem;

  display: flex;

  flex: 1;

  flex-direction: column;
}

.area-card h3 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.05vw, 1.16rem);

  font-weight: 800;

  line-height: 1.25;
}

.area-card-location {
  display: block;

  margin-top: 0.35rem;

  color: var(--header-orange);

  font-size: 0.7rem;

  font-weight: 700;
}

.area-card p {
  margin:
    0.8rem
    0
    0;

  color: #646e7d;

  font-size:
    clamp(0.76rem, 0.76vw, 0.85rem);

  font-weight: 500;

  line-height: 1.6;
}

.area-card-link {
  margin-top: auto;

  padding-top: 1rem;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: var(--header-blue);

  font-size: 0.74rem;

  font-weight: 700;
}

.area-card-link > span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .areas-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   768 PX
   ========================================================= */

@media (max-width: 768px) {

  .area-featured {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    align-items: start;
  }

  .area-featured-link {
    grid-column: 1 / -1;

    justify-self: start;
  }

  .areas-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   520 PX
   ========================================================= */

@media (max-width: 520px) {

  .areas-container {
    padding-block:
      clamp(2.6rem, 8vw, 3.5rem);
  }

  .areas-title {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .area-featured {
    grid-template-columns: 1fr;

    text-align: left;
  }

  .area-featured-icon {
    width: 3.8rem;
    height: 3.8rem;
  }

  .area-featured-link {
    width: 100%;
  }

  .areas-grid {
    grid-template-columns: 1fr;
  }

  .area-card {
    min-height: auto;
  }

}

/* ===== SERVICE AREAS END ===== */


/* ===== SEO COPY SECTION START ===== */

.seo-copy-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.seo-copy-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.2rem, 5vw, 5.3rem);
}


/* =========================================================
   CARD
   ========================================================= */

.seo-copy-card {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(11rem, 0.28fr)
    minmax(0, 1fr);

  gap:
    clamp(2rem, 4vw, 4.5rem);

  align-items: start;

  padding:
    clamp(1.8rem, 3vw, 3.2rem);

  background:
    linear-gradient(
      135deg,
      #f6f9fe 0%,
      #ffffff 50%,
      #f9fbfe 100%
    );

  border: 1px solid #dfe5ee;

  border-radius:
    clamp(1rem, 1.35vw, 1.3rem);

  box-shadow:
    0 0.8rem 2.2rem rgba(8, 42, 88, 0.06);

  overflow: hidden;
}

.seo-copy-card::after {
  content: "";

  position: absolute;

  width: 16rem;
  height: 16rem;

  right: -7rem;
  bottom: -8rem;

  border: 2rem solid rgba(6, 45, 104, 0.025);

  border-radius: 50%;

  pointer-events: none;
}


/* =========================================================
   ICON AREA
   ========================================================= */

.seo-copy-visual {
  position: relative;
  min-height: 17rem;

  padding:
    clamp(1.4rem, 2vw, 2rem);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 1.5rem;

  background:
    linear-gradient(
      145deg,
      #062d68 0%,
      #0d3b81 100%
    );

  border-radius:
    clamp(0.9rem, 1.1vw, 1.1rem);

  overflow: hidden;
}

.seo-copy-visual::before {
  content: "";

  position: absolute;

  width: 9rem;
  height: 9rem;

  left: -4rem;
  top: -4rem;

  border: 1.2rem solid rgba(255, 255, 255, 0.04);

  border-radius: 50%;
}

.seo-copy-icon {
  position: relative;

  z-index: 1;

  width:
    clamp(6rem, 7vw, 7.5rem);

  height:
    clamp(6rem, 7vw, 7.5rem);

  display: grid;

  place-items: center;

  background: var(--header-orange);

  border-radius: 50%;

  box-shadow:
    0 0.9rem 1.8rem rgba(0, 0, 0, 0.13);
}

.seo-copy-icon svg {
  width: 58%;
  height: 58%;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.seo-copy-badge {
  position: relative;

  z-index: 1;

  text-align: center;
}

.seo-copy-badge strong {
  display: block;

  color: #ffffff;

  font-size:
    clamp(1.7rem, 2vw, 2.2rem);

  font-weight: 800;

  line-height: 1;
}

.seo-copy-badge span {
  display: block;

  margin-top: 0.4rem;

  color: rgba(255,255,255,0.7);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   COPY
   ========================================================= */

.seo-copy-content {
  position: relative;

  z-index: 1;

  min-width: 0;
}

.seo-copy-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--header-orange);

  font-size:
    clamp(0.7rem, 0.72vw, 0.82rem);

  font-weight: 800;

  letter-spacing: 0.08em;
}

.seo-copy-content h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.25rem, 3.15vw, 3.45rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.seo-copy-content > p {
  margin:
    clamp(1rem, 1.3vw, 1.3rem)
    0
    0;

  color: #5d6777;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 500;

  line-height: 1.82;
}

.seo-copy-content > p:first-of-type {
  color: #4b5668;

  font-weight: 600;
}


/* =========================================================
   BOTTOM NOTE
   ========================================================= */

.seo-copy-note {
  margin-top:
    clamp(1.5rem, 2vw, 2rem);

  padding:
    clamp(1rem, 1.3vw, 1.3rem)
    clamp(1rem, 1.5vw, 1.5rem);

  display: flex;

  align-items: flex-start;

  gap: 0.9rem;

  background: #eef4fc;

  border-left: 0.22rem solid var(--header-orange);

  border-radius: 0.65rem;
}

.seo-copy-note-icon {
  width: 1.8rem;
  height: 1.8rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-blue);

  color: #ffffff;

  font-size: 0.8rem;

  font-weight: 800;
}

.seo-copy-note p {
  margin: 0;

  color: #42516a;

  font-size:
    clamp(0.78rem, 0.8vw, 0.9rem);

  font-weight: 600;

  line-height: 1.6;
}


/* =========================================================
   SEO LEFT SIDEBAR
   ========================================================= */

.seo-copy-sidebar {
  position: sticky;

  top: 2rem;

  min-width: 0;

  align-self: start;

  display: flex;

  flex-direction: column;

  gap:
    clamp(1rem, 1.4vw, 1.4rem);
}


/* =========================================================
   ŞEHİRLER ARASI HİZMET KARTI
   ========================================================= */

.seo-intercity-card {
  position: relative;

  padding:
    clamp(1.15rem, 1.5vw, 1.5rem);

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5f8fd 100%
    );

  border: 1px solid #dce3ed;

  border-radius:
    clamp(0.9rem, 1.1vw, 1.1rem);

  box-shadow:
    0 0.7rem 1.8rem rgba(6, 45, 104, 0.07);
}

.seo-intercity-card::after {
  content: "";

  position: absolute;

  width: 7rem;
  height: 7rem;

  right: -3.5rem;
  bottom: -3.5rem;

  border: 0.9rem solid rgba(6, 45, 104, 0.035);

  border-radius: 50%;

  pointer-events: none;
}

.seo-intercity-icon {
  position: relative;

  z-index: 1;

  width: 3.2rem;
  height: 3.2rem;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.seo-intercity-icon svg {
  width: 1.65rem;
  height: 1.65rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.seo-intercity-copy {
  position: relative;

  z-index: 1;

  margin-top: 1rem;
}

.seo-intercity-copy > span {
  display: block;

  color: var(--header-orange);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.seo-intercity-copy > strong {
  display: block;

  margin-top: 0.4rem;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.05vw, 1.15rem);

  font-weight: 800;

  line-height: 1.3;
}

.seo-intercity-copy > p {
  margin:
    0.65rem
    0
    0;

  color: #647084;

  font-size:
    clamp(0.72rem, 0.74vw, 0.82rem);

  font-weight: 500;

  line-height: 1.6;
}

.seo-intercity-tags {
  margin-top: 0.85rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;
}

.seo-intercity-tags span {
  padding:
    0.35rem
    0.55rem;

  background: #edf3fb;

  border-radius: 999px;

  color: var(--header-blue);

  font-size: 0.62rem;

  font-weight: 700;
}

.seo-intercity-link {
  margin-top: 1rem;

  min-height: 2.6rem;

  padding:
    0
    0.85rem;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 0.7rem;

  background: var(--header-blue);

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.7rem;

  font-weight: 800;
}

.seo-intercity-link svg {
  width: 1rem;
  height: 1rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {
  .seo-copy-sidebar {
    position: relative;

    top: auto;
  }


  .seo-copy-card {
    grid-template-columns: 1fr;
  }

  .seo-copy-visual {
    position: relative;

    top: auto;

    min-height: auto;

    flex-direction: row;

    justify-content: flex-start;

    padding:
      clamp(1.3rem, 3vw, 1.8rem);
  }

  .seo-copy-icon {
    width: 5rem;
    height: 5rem;
  }

  .seo-copy-badge {
    text-align: left;
  }

}


/* =========================================================
   520 PX
   ========================================================= */

@media (max-width: 520px) {

  .seo-copy-container {
    padding-block:
      clamp(2.5rem, 8vw, 3.5rem);
  }

  .seo-copy-card {
    padding:
      1.2rem;

    gap: 1.6rem;
  }

  .seo-copy-content h2 {
    font-size:
      clamp(2rem, 8vw, 2.5rem);
  }

  .seo-copy-visual {
    align-items: center;
  }

  .seo-copy-icon {
    width: 4.3rem;
    height: 4.3rem;
  }

}

/* ===== SEO COPY SECTION END ===== */


/* ===== GOOGLE REVIEWS START ===== */

.reviews-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.reviews-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.5rem, 5.5vw, 5.8rem);
}


/* =========================================================
   HEADING
   ========================================================= */

.reviews-heading {
  max-width: 46rem;

  margin-inline: auto;

  text-align: center;
}

.reviews-google-label {
  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  margin-bottom: 0.7rem;

  color: var(--header-orange);

  font-size:
    clamp(0.7rem, 0.72vw, 0.82rem);

  font-weight: 800;

  letter-spacing: 0.08em;
}

.reviews-google-icon {
  width: 1.55rem;
  height: 1.55rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #fff0ec;

  color: var(--header-orange);
}

.reviews-google-icon svg {
  width: 58%;
  height: 58%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews-heading h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.3rem, 3.3vw, 3.6rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.reviews-heading h2 span {
  color: var(--header-orange);
}

.reviews-heading > p {
  max-width: 42rem;

  margin:
    1rem
    auto
    0;

  color: #606a7a;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.reviews-grid {
  margin-top:
    clamp(2.3rem, 3.3vw, 3.4rem);

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.5vw, 1.5rem);
}


/* =========================================================
   REVIEW CARD
   ========================================================= */

.review-card {
  position: relative;

  min-width: 0;

  min-height:
    clamp(19rem, 21vw, 21.5rem);

  padding:
    clamp(1.3rem, 1.7vw, 1.75rem);

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e1e6ee;

  border-radius:
    clamp(0.9rem, 1.1vw, 1.1rem);

  box-shadow:
    0 0.55rem 1.6rem rgba(10, 38, 80, 0.055);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-card:hover {
  border-color: rgba(253, 52, 0, 0.28);

  box-shadow:
    0 0.9rem 2rem rgba(10, 38, 80, 0.09);
}


/* =========================================================
   REVIEW HEADER
   ========================================================= */

.review-card-top {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 0.8rem;
}

.review-avatar {
  width:
    clamp(2.8rem, 3vw, 3.2rem);

  height:
    clamp(2.8rem, 3vw, 3.2rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--header-blue),
      #154a94
    );

  color: #ffffff;

  font-size: 1rem;

  font-weight: 800;
}

.review-user {
  min-width: 0;
}

.review-user h3 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(0.9rem, 0.95vw, 1.05rem);

  font-weight: 800;

  line-height: 1.3;
}

.review-user span {
  display: block;

  margin-top: 0.2rem;

  color: #66707D;

  font-size: 0.68rem;

  font-weight: 600;
}

.review-google-mark {
  width: 2rem;
  height: 2rem;

  display: grid;

  place-items: center;

  border: 1px solid #e3e7ee;

  border-radius: 50%;

  color: var(--header-blue);

  background: #ffffff;

  font-size: 0.82rem;

  font-weight: 900;
}


/* =========================================================
   STARS
   ========================================================= */

.review-stars {
  margin-top: 1.25rem;

  display: flex;

  align-items: center;

  gap: 0.18rem;

  color: #f6ad16;

  font-size: 1rem;

  line-height: 1;
}


/* =========================================================
   QUOTE
   ========================================================= */

.review-quote-icon {
  margin-top: 1.1rem;

  width: 2.2rem;
  height: 2.2rem;

  color: var(--header-orange);
}

.review-quote-icon svg {
  width: 100%;
  height: 100%;

  fill: currentColor;
}

.review-text {
  margin:
    0.5rem
    0
    0;

  color: #596475;

  font-size:
    clamp(0.8rem, 0.82vw, 0.92rem);

  font-weight: 500;

  line-height: 1.72;
}


/* =========================================================
   REVIEW FOOTER
   ========================================================= */

.review-card-footer {
  margin-top: auto;

  padding-top: 1.25rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  color: #66707D;

  font-size: 0.68rem;

  font-weight: 600;
}

.review-verified-icon {
  width: 1.25rem;
  height: 1.25rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eaf7ef;

  color: #25a55f;

  font-size: 0.65rem;

  font-weight: 900;
}


/* =========================================================
   BOTTOM GOOGLE BAR
   ========================================================= */

.reviews-bottom {
  margin-top:
    clamp(1.2rem, 1.7vw, 1.7rem);

  padding:
    clamp(1.1rem, 1.5vw, 1.5rem)
    clamp(1.2rem, 1.8vw, 1.8rem);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d387d 100%
    );

  border-radius:
    clamp(0.85rem, 1vw, 1rem);
}

.reviews-bottom-copy {
  display: flex;

  align-items: center;

  gap: 0.85rem;

  min-width: 0;
}

.reviews-bottom-icon {
  width: 2.7rem;
  height: 2.7rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.reviews-bottom-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews-bottom-copy > div {
  min-width: 0;
}

.reviews-bottom-copy strong {
  display: block;

  color: #ffffff;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 800;
}

.reviews-bottom-copy > div > span {
  display: block;

  margin-top: 0.2rem;

  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.68rem, 0.7vw, 0.78rem);

  font-weight: 500;
}

.reviews-google-button {
  min-height: 3rem;

  padding-inline: 1.15rem;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.65rem;

  background: #ffffff;

  border-radius: 999px;

  color: var(--header-blue);

  font-size: 0.76rem;

  font-weight: 700;

  white-space: nowrap;
}

.reviews-google-button > span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {

  .reviews-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .review-card:last-child {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   640 PX
   ========================================================= */

@media (max-width: 640px) {

  .reviews-container {
    padding-block:
      clamp(2.7rem, 8vw, 3.7rem);
  }

  .reviews-heading h2 {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card:last-child {
    grid-column: auto;
  }

  .review-card {
    min-height: auto;
  }

  .reviews-bottom {
    align-items: stretch;

    flex-direction: column;
  }

  .reviews-google-button {
    width: 100%;
  }

}

/* ===== GOOGLE REVIEWS END ===== */


/* ===== FAQ SECTION START ===== */

.faq-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.faq-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.5rem, 5.5vw, 6rem);

  display: grid;

  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(0, 1.28fr);

  align-items: start;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.faq-intro {
  position: sticky;

  top: 2rem;
}

.faq-eyebrow {
  margin: 0 0 0.7rem;

  color: var(--header-orange);

  font-size:
    clamp(0.7rem, 0.72vw, 0.82rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.faq-title {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.35rem, 3.3vw, 3.65rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.07;
}

.faq-title span {
  display: block;

  color: var(--header-orange);
}

.faq-description {
  max-width: 34rem;

  margin:
    1.2rem
    0
    0;

  color: #606a7a;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 500;

  line-height: 1.72;
}


/* =========================================================
   HELP CARD
   ========================================================= */

.faq-help-card {
  margin-top:
    clamp(1.8rem, 2.5vw, 2.5rem);

  padding:
    clamp(1.3rem, 1.8vw, 1.8rem);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: start;

  gap: 1rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d377b 100%
    );

  border-radius:
    clamp(0.85rem, 1vw, 1rem);

  box-shadow:
    0 0.8rem 1.8rem rgba(6, 45, 104, 0.12);
}

.faq-help-icon {
  width: 3.2rem;
  height: 3.2rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.faq-help-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-help-copy > span {
  display: block;

  color: #ffae9a;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  line-height: 1.4;
}

.faq-help-copy strong {
  display: block;

  margin-top: 0.35rem;

  color: #ffffff;

  font-size:
    clamp(1.05rem, 1.15vw, 1.25rem);

  font-weight: 800;
}

.faq-help-copy p {
  margin:
    0.55rem
    0
    0;

  color: rgba(255,255,255,0.72);

  font-size: 0.76rem;

  font-weight: 500;

  line-height: 1.55;
}

.faq-help-copy a {
  margin-top: 1rem;

  min-height: 2.7rem;

  padding-inline: 1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.6rem;

  background: #ffffff;

  color: var(--header-blue);

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 800;
}

.faq-help-copy a > span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.faq-list {
  display: flex;

  flex-direction: column;

  gap: 0.75rem;
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.faq-item {
  background: #f8fafd;

  border: 1px solid #e1e6ee;

  border-radius:
    clamp(0.75rem, 0.9vw, 0.9rem);

  overflow: hidden;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.faq-item[open] {
  background: #ffffff;

  border-color: rgba(6, 45, 104, 0.19);

  box-shadow:
    0 0.55rem 1.4rem rgba(9, 39, 82, 0.06);
}

.faq-item summary {
  min-height:
    clamp(4.6rem, 5vw, 5.2rem);

  padding:
    clamp(1rem, 1.3vw, 1.3rem)
    clamp(1rem, 1.5vw, 1.5rem);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(0.8rem, 1.1vw, 1.1rem);

  cursor: pointer;

  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-number {
  width: 2.25rem;
  height: 2.25rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #edf2f9;

  color: var(--header-blue);

  font-size: 0.67rem;

  font-weight: 800;

  transition:
    background 180ms ease,
    color 180ms ease;
}

.faq-item[open] .faq-number {
  background: var(--header-orange);

  color: #ffffff;
}

.faq-question {
  color: var(--header-text);

  font-size:
    clamp(0.9rem, 0.96vw, 1.08rem);

  font-weight: 750;

  line-height: 1.4;
}

.faq-toggle {
  width: 2rem;
  height: 2rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #ffffff;

  border: 1px solid #dce2eb;

  color: var(--header-blue);

  transition:
    background 180ms ease,
    color 180ms ease;
}

.faq-toggle svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 180ms ease;
}

.faq-item[open] .faq-toggle {
  background: var(--header-blue);

  border-color: var(--header-blue);

  color: #ffffff;
}

.faq-item[open] .faq-toggle svg {
  transform: rotate(180deg);
}


/* =========================================================
   ANSWER
   ========================================================= */

.faq-answer {
  padding:
    0
    clamp(1rem, 1.5vw, 1.5rem)
    clamp(1.2rem, 1.5vw, 1.5rem)
    calc(
      clamp(1rem, 1.5vw, 1.5rem)
      + 2.25rem
      + clamp(0.8rem, 1.1vw, 1.1rem)
    );
}

.faq-answer p {
  margin: 0;

  color: #626d7d;

  font-size:
    clamp(0.8rem, 0.82vw, 0.92rem);

  font-weight: 500;

  line-height: 1.72;
}


/* =========================================================
   3 ADIMDA YARDIM
   ========================================================= */

.faq-steps-card {
  margin-top:
    clamp(1rem, 1.4vw, 1.4rem);

  padding:
    clamp(1.25rem, 1.7vw, 1.65rem);

  background:
    linear-gradient(
      180deg,
      #fbfcff 0%,
      #f5f8fd 100%
    );

  border: 1px solid #dfe5ee;

  border-radius:
    clamp(0.85rem, 1vw, 1rem);

  box-shadow:
    0 0.7rem 1.8rem rgba(6, 45, 104, 0.06);
}

.faq-steps-heading > span {
  display: block;

  color: var(--header-orange);

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.faq-steps-heading > strong {
  display: block;

  margin-top: 0.35rem;

  color: var(--header-text);

  font-size:
    clamp(1.05rem, 1.15vw, 1.25rem);

  font-weight: 800;

  line-height: 1.3;
}

.faq-step {
  padding:
    clamp(1rem, 1.25vw, 1.2rem)
    0;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: start;

  gap:
    clamp(0.85rem, 1vw, 1rem);

  border-top: 1px solid #e1e6ee;
}

.faq-step:first-of-type {
  margin-top: 1rem;
}

.faq-step:last-child {
  padding-bottom: 0;
}

.faq-step-icon {
  width: 2.8rem;
  height: 2.8rem;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: 1px solid rgba(253, 52, 0, 0.18);

  border-radius: 50%;

  background: rgba(253, 52, 0, 0.07);

  color: var(--header-orange);
}

.faq-step-icon svg {
  width: 1.35rem;
  height: 1.35rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-step-copy strong {
  display: block;

  color: var(--header-text);

  font-size:
    clamp(0.86rem, 0.9vw, 0.98rem);

  font-weight: 800;

  line-height: 1.35;
}

.faq-step-copy p {
  margin:
    0.35rem
    0
    0;

  color: #667181;

  font-size:
    clamp(0.74rem, 0.76vw, 0.84rem);

  font-weight: 500;

  line-height: 1.6;
}

/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {

  .faq-container {
    grid-template-columns: 1fr;

    gap:
      clamp(2.3rem, 5vw, 3.2rem);
  }

  .faq-intro {
    position: relative;

    top: auto;
  }

  .faq-description {
    max-width: 44rem;
  }

  .faq-help-card {
    max-width: 34rem;
  }

}


/* =========================================================
   560 PX
   ========================================================= */

@media (max-width: 560px) {

  .faq-container {
    padding-block:
      clamp(2.7rem, 8vw, 3.7rem);
  }

  .faq-title {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .faq-item summary {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 0.8rem;
  }

  .faq-number {
    display: none;
  }

  .faq-answer {
    padding:
      0
      1rem
      1.2rem;
  }

  .faq-help-card {
    grid-template-columns: 1fr;
  }

}

/* ===== FAQ SECTION END ===== */


/* ===== CONTACT SECTION START ===== */

.contact-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.contact-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding-block:
    clamp(3.5rem, 5.5vw, 5.8rem);
}


/* =========================================================
   HEADING
   ========================================================= */

.contact-heading {
  max-width: 47rem;

  margin-inline: auto;

  text-align: center;
}

.contact-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--header-orange);

  font-size:
    clamp(0.7rem, 0.72vw, 0.82rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-title {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.35rem, 3.3vw, 3.65rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.contact-title span {
  color: var(--header-orange);
}

.contact-intro {
  max-width: 43rem;

  margin:
    1rem
    auto
    0;

  color: #606a7a;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 500;

  line-height: 1.72;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.contact-main {
  margin-top:
    clamp(2.4rem, 3.5vw, 3.6rem);

  display: grid;

  grid-template-columns:
    minmax(20rem, 0.78fr)
    minmax(0, 1.22fr);

  gap:
    clamp(1rem, 1.5vw, 1.5rem);

  align-items: stretch;
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

.contact-panel {
  padding:
    clamp(1.5rem, 2.2vw, 2.2rem);

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      145deg,
      #08295f 0%,
      #0c377a 100%
    );

  border-radius:
    clamp(1rem, 1.3vw, 1.3rem);

  box-shadow:
    0 0.9rem 2rem rgba(6, 45, 104, 0.13);

  overflow: hidden;
}

.contact-status {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: #ffb29f;

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-status > span {
  width: 0.5rem;
  height: 0.5rem;

  border-radius: 50%;

  background: #2ddd75;

  box-shadow:
    0 0 0 0.25rem rgba(45, 221, 117, 0.12);
}

.contact-panel-top h3 {
  margin:
    0.7rem
    0
    0;

  color: #ffffff;

  font-size:
    clamp(1.8rem, 2.4vw, 2.6rem);

  font-weight: 800;

  letter-spacing: -0.035em;

  line-height: 1.08;
}

.contact-panel-top > p {
  margin:
    0.85rem
    0
    0;

  color: rgba(255,255,255,0.72);

  font-size:
    clamp(0.8rem, 0.82vw, 0.92rem);

  font-weight: 500;

  line-height: 1.65;
}


/* =========================================================
   CONTACT INFO
   ========================================================= */

.contact-info-list {
  margin-top: 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.65rem;
}

.contact-info-item {
  width: 100%;

  padding:
    0.9rem
    1rem;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 0.8rem;

  background: rgba(255,255,255,0.07);

  border: 1px solid rgba(255,255,255,0.09);

  border-radius: 0.8rem;

  transition:
    background 180ms ease,
    border-color 180ms ease;
}

a.contact-info-item:hover {
  background: rgba(255,255,255,0.11);

  border-color: rgba(255,255,255,0.15);
}

.contact-info-icon {
  width: 2.7rem;
  height: 2.7rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.contact-info-icon-wa {
  background: #15803D;
}

.contact-info-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-info-copy {
  min-width: 0;
}

.contact-info-copy small {
  display: block;

  color: rgba(255,255,255,0.5);

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.contact-info-copy strong {
  display: block;

  margin-top: 0.2rem;

  color: #ffffff;

  font-size:
    clamp(0.83rem, 0.86vw, 0.96rem);

  font-weight: 750;
}

.contact-info-copy > span {
  display: block;

  margin-top: 0.2rem;

  color: rgba(255,255,255,0.62);

  font-size: 0.67rem;

  font-weight: 500;
}

.contact-info-arrow {
  color: rgba(255,255,255,0.65);

  font-size: 1rem;
}


/* =========================================================
   CONTACT ACTIONS
   ========================================================= */

.contact-actions {
  margin-top: auto;

  padding-top: 1.4rem;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.7rem;
}

.contact-action {
  min-height: 3.2rem;

  padding-inline: 1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.6rem;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.76rem;

  font-weight: 800;
}

.contact-action-call {
  background: var(--header-orange);
}

.contact-action-wa {
  background: #15803D;
}


/* =========================================================
   MAP CARD
   ========================================================= */

.contact-map-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #dfe4ec;

  border-radius:
    clamp(1rem, 1.3vw, 1.3rem);

  overflow: hidden;

  box-shadow:
    0 0.8rem 2rem rgba(9, 37, 78, 0.065);
}

.contact-map {
  position: relative;

  width: 100%;

  min-height:
    clamp(26rem, 35vw, 36rem);

  flex: 1;

  background: #eef1f5;
}

.contact-map iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   MAP OVERLAY
   ========================================================= */

.contact-map-overlay {
  position: absolute;

  margin:
    clamp(1rem, 1.4vw, 1.4rem);

  max-width: 20rem;

  padding:
    0.9rem
    1rem;

  display: flex;

  align-items: center;

  gap: 0.8rem;

  background: rgba(255,255,255,0.95);

  border: 1px solid rgba(6,45,104,0.1);

  border-radius: 0.85rem;

  box-shadow:
    0 0.6rem 1.5rem rgba(9, 34, 70, 0.12);

  backdrop-filter: blur(0.5rem);
}

.contact-map-card {
  position: relative;
}

.contact-map-pin {
  width: 2.8rem;
  height: 2.8rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.contact-map-pin svg {
  width: 50%;
  height: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-map-overlay > div > span {
  display: block;

  color: var(--header-orange);

  font-size: 0.56rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.contact-map-overlay strong {
  display: block;

  margin-top: 0.2rem;

  color: var(--header-text);

  font-size: 0.9rem;

  font-weight: 800;
}

.contact-map-overlay p {
  margin:
    0.2rem
    0
    0;

  color: #7a8493;

  font-size: 0.64rem;

  font-weight: 500;
}


/* =========================================================
   MAP FOOTER
   ========================================================= */

.contact-map-footer {
  padding:
    1rem
    1.2rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.2rem;

  border-top: 1px solid #e4e8ef;
}

.contact-map-footer > div {
  display: flex;

  align-items: center;

  gap: 0.7rem;

  min-width: 0;
}

.contact-map-footer-icon {
  width: 1.7rem;
  height: 1.7rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eaf4ee;

  color: #22a55b;

  font-size: 0.72rem;

  font-weight: 900;
}

.contact-map-footer p {
  max-width: 32rem;

  margin: 0;

  color: #687282;

  font-size: 0.7rem;

  font-weight: 500;

  line-height: 1.5;
}

.contact-map-footer > a {
  flex: 0 0 auto;

  min-height: 2.7rem;

  padding-inline: 1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  border-radius: 999px;

  background: #edf3fb;

  color: var(--header-blue);

  font-size: 0.7rem;

  font-weight: 800;
}

.contact-map-footer > a > span {
  color: var(--header-orange);

  font-size: 1rem;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.contact-bottom {
  margin-top:
    clamp(1rem, 1.5vw, 1.5rem);

  padding:
    clamp(1.1rem, 1.5vw, 1.5rem)
    clamp(1.2rem, 1.9vw, 1.9rem);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  background:
    linear-gradient(
      135deg,
      #fff1ed 0%,
      #fff8f6 100%
    );

  border: 1px solid rgba(253,52,0,0.14);

  border-radius:
    clamp(0.85rem, 1vw, 1rem);
}

.contact-bottom > div {
  display: flex;

  align-items: center;

  gap: 0.9rem;
}

.contact-bottom-icon {
  width: 3rem;
  height: 3rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.contact-bottom-icon svg {
  width: 54%;
  height: 54%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-bottom strong {
  display: block;

  color: var(--header-text);

  font-size:
    clamp(0.9rem, 0.95vw, 1.05rem);

  font-weight: 800;
}

.contact-bottom p {
  margin:
    0.2rem
    0
    0;

  color: #727c8b;

  font-size: 0.72rem;

  font-weight: 500;
}

.contact-bottom > a {
  min-height: 3rem;

  padding-inline: 1.2rem;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.6rem;

  border-radius: 999px;

  background: var(--header-orange);

  color: #ffffff;

  font-size: 0.76rem;

  font-weight: 800;

  box-shadow:
    0 0.5rem 1rem rgba(253,52,0,0.15);
}


/* =========================================================
   1000 PX
   ========================================================= */

@media (max-width: 1000px) {

  .contact-main {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 30rem;
  }

}


/* =========================================================
   640 PX
   ========================================================= */

@media (max-width: 640px) {

  .contact-container {
    padding-block:
      clamp(2.7rem, 8vw, 3.7rem);
  }

  .contact-title {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .contact-panel {
    padding: 1.2rem;
  }

  .contact-info-item {
    padding:
      0.8rem
      0.85rem;
  }

  .contact-actions {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 25rem;
  }

  .contact-map-overlay {
    max-width:
      calc(100% - 2rem);

    margin: 1rem;
  }

  .contact-map-footer {
    align-items: stretch;

    flex-direction: column;
  }

  .contact-map-footer > a {
    width: 100%;
  }

  .contact-bottom {
    align-items: stretch;

    flex-direction: column;
  }

  .contact-bottom > a {
    width: 100%;
  }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width: 390px) {

  .contact-info-item {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .contact-info-arrow {
    display: none;
  }

  .contact-map {
    min-height: 23rem;
  }

}

/* ===== CONTACT SECTION END ===== */


/* ===== FOOTER START ===== */

.site-footer {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    var(--page-frame-gap);

  background:
    linear-gradient(
      145deg,
      #061f49 0%,
      #082d68 48%,
      #0b3475 100%
    );

  border-radius:
    var(--page-frame-radius);

  color: #ffffff;

  overflow: hidden;
}

.site-footer::before {
  content: "";

  display: block;

  width: 100%;
  height: 0.25rem;

  background:
    linear-gradient(
      90deg,
      var(--header-orange) 0%,
      #ff7651 48%,
      var(--header-orange) 100%
    );
}

.footer-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(3rem, 4.8vw, 5rem)
    0
    clamp(1.4rem, 2vw, 2rem);
}


/* =========================================================
   TOP GRID
   ========================================================= */

.footer-top {
  display: grid;

  grid-template-columns:
    minmax(15rem, 1.45fr)
    repeat(3, minmax(8rem, 0.8fr))
    minmax(14rem, 1.2fr);

  align-items: start;

  gap:
    clamp(1.7rem, 3vw, 3.5rem);
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {
  min-width: 0;
}

.footer-logo {
  width:
    clamp(8rem, 9.5vw, 10.5rem);

  display: block;
}

.footer-logo img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

.footer-brand-text {
  max-width: 22rem;

  margin:
    1.2rem
    0
    0;

  color: rgba(255,255,255,0.68);

  font-size:
    clamp(0.78rem, 0.8vw, 0.9rem);

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   EMERGENCY
   ========================================================= */

.footer-emergency {
  margin-top: 1.4rem;

  display: flex;

  align-items: center;

  gap: 0.8rem;
}

.footer-emergency-icon {
  width: 2.8rem;
  height: 2.8rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;

  box-shadow:
    0 0.45rem 1rem rgba(253,52,0,0.18);
}

.footer-emergency-icon svg {
  width: 46%;
  height: 46%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-emergency small {
  display: block;

  color: rgba(255,255,255,0.5);

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.footer-emergency a {
  display: block;

  margin-top: 0.2rem;

  color: #ffffff;

  font-size:
    clamp(0.95rem, 1vw, 1.1rem);

  font-weight: 800;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.footer-column h2 {
  position: relative;

  margin:
    0
    0
    1.25rem;

  padding-bottom: 0.7rem;

  color: #ffffff;

  font-size:
    clamp(0.83rem, 0.86vw, 0.96rem);

  font-weight: 800;
}

.footer-column h2::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 2.2rem;
  height: 0.15rem;

  border-radius: 999px;

  background: var(--header-orange);
}

.footer-column nav {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.72rem;
}

.footer-column nav a {
  position: relative;

  padding-left: 0.8rem;

  color: rgba(255,255,255,0.64);

  font-size:
    clamp(0.72rem, 0.74vw, 0.82rem);

  font-weight: 500;

  line-height: 1.45;

  transition:
    color 160ms ease,
    padding-left 160ms ease;
}

.footer-column nav a::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.55em;

  width: 0.25rem;
  height: 0.25rem;

  border-radius: 50%;

  background: var(--header-orange);
}

.footer-column nav a:hover {
  padding-left: 1rem;

  color: #ffffff;
}


/* =========================================================
   CONTACT
   ========================================================= */

.footer-contact-list {
  display: flex;

  flex-direction: column;

  gap: 0.72rem;
}

.footer-contact-list > a,
.footer-contact-list > div {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 0.7rem;
}

.footer-contact-icon {
  width: 2.3rem;
  height: 2.3rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.08);

  color: #ffffff;
}

.footer-contact-icon-wa {
  background: rgba(34,197,94,0.18);

  color: #57dc89;
}

.footer-contact-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact-list small {
  display: block;

  color: rgba(255,255,255,0.43);

  font-size: 0.57rem;

  font-weight: 700;

  letter-spacing: 0.06em;
}

.footer-contact-list strong {
  display: block;

  margin-top: 0.15rem;

  color: rgba(255,255,255,0.83);

  font-size:
    clamp(0.72rem, 0.75vw, 0.84rem);

  font-weight: 650;

  line-height: 1.35;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.footer-divider {
  margin-top:
    clamp(2.5rem, 3.5vw, 3.8rem);

  width: 100%;
  height: 1px;

  background: rgba(255,255,255,0.1);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.footer-bottom {
  padding-top:
    clamp(1.2rem, 1.6vw, 1.6rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;
}

.footer-bottom p {
  margin: 0;

  color: rgba(255,255,255,0.48);

  font-size:
    clamp(0.65rem, 0.68vw, 0.76rem);

  font-weight: 500;
}


.footer-credit {
  text-align: center;
}


.footer-credit a {
  color: rgba(255,255,255,0.7);

  transition: color 160ms ease;
}


.footer-credit a:hover {
  color: #ffffff;
}

.footer-bottom-links {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.7rem 1.3rem;

  justify-self: end;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.55);

  font-size:
    clamp(0.64rem, 0.66vw, 0.74rem);

  font-weight: 500;

  transition: color 160ms ease;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .footer-top {
    grid-template-columns:
      minmax(15rem, 1.4fr)
      repeat(2, minmax(10rem, 1fr));
  }

  .footer-contact {
    grid-column: span 2;
  }

}


/* =========================================================
   800 PX
   ========================================================= */

@media (max-width: 800px) {

  .footer-top {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand-text {
    max-width: 32rem;
  }

  .footer-contact {
    grid-column: auto;
  }

}


/* =========================================================
   560 PX
   ========================================================= */

@media (max-width: 560px) {

  .footer-container {
    padding-top: 2.5rem;
  }

  .footer-top {
    grid-template-columns: 1fr;

    gap: 2.2rem;
  }

  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }

  .footer-logo {
    width: 8.5rem;
  }

  .footer-bottom {
    grid-template-columns: 1fr;

    justify-items: start;

    gap: 0.85rem;
  }

  .footer-bottom-links {
    justify-self: start;
  }

}


/* ===== FOOTER END ===== */





/* ===== ABOUT PAGE START ===== */


/* =========================================================
   GENERAL
   ========================================================= */

.about-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.about-page-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;
}


/* =========================================================
   GRID OVERFLOW SAFETY
   ========================================================= */

.about-page-hero-grid,
.about-page-story,
.about-page-services-grid,
.about-page-area-card,
.about-page-cta-inner {
  min-width: 0;
  max-width: 100%;
}

.about-page-hero-grid > *,
.about-page-story > *,
.about-page-services-grid > *,
.about-page-area-card > *,
.about-page-cta-inner > * {
  min-width: 0;
  max-width: 100%;
}

.about-page-hero-copy {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   HERO
   ========================================================= */

.about-page-hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #061f49 0%,
      #082e6b 56%,
      #0d3b82 100%
    );

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.about-page-hero-inner {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(1.2rem, 2vw, 2rem)
    0
    clamp(3rem, 5vw, 5rem);
}

.about-page-breadcrumb {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  color: rgba(255,255,255,0.48);

  font-size: 0.7rem;

  font-weight: 600;
}

.about-page-breadcrumb a {
  color: rgba(255,255,255,0.78);
}

.about-page-breadcrumb > span:last-child {
  color: #ff9c83;
}

.about-page-hero-grid {
  margin-top:
    clamp(2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(14rem, 0.5fr);

  align-items: center;

  gap:
    clamp(2rem, 5vw, 6rem);
}

.about-page-eyebrow {
  margin: 0 0 0.7rem;

  color: #ff9c83;

  font-size:
    clamp(0.7rem, 0.73vw, 0.83rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.about-page-hero h1 {
  max-width: 55rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2.8rem, 4.7vw, 5.1rem);

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.99;
}

.about-page-hero h1 span {
  display: block;

  color: var(--header-orange);

  margin-top: 0.25rem;
}

.about-page-hero-copy > p:not(.about-page-eyebrow) {
  max-width: 44rem;

  margin:
    clamp(1.2rem, 1.7vw, 1.7rem)
    0
    0;

  color: rgba(255,255,255,0.72);

  font-size:
    clamp(0.9rem, 0.95vw, 1.05rem);

  font-weight: 500;

  line-height: 1.72;
}

.about-page-hero-points {
  margin-top: 1.5rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem 1.5rem;
}

.about-page-hero-points span {
  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.67rem, 0.7vw, 0.78rem);

  font-weight: 650;
}

.about-page-hero-points b {
  color: var(--header-orange);

  margin-right: 0.25rem;
}


/* =========================================================
   HERO MARK
   ========================================================= */

.about-page-hero-mark {
  min-height:
    clamp(17rem, 20vw, 21rem);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 50%;

  background: rgba(255,255,255,0.045);
}

.about-page-hero-icon {
  width:
    clamp(7rem, 8vw, 8.5rem);

  height:
    clamp(7rem, 8vw, 8.5rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  box-shadow:
    0 1rem 2rem rgba(0,0,0,0.16);
}

.about-page-hero-icon svg {
  width: 59%;
  height: 59%;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-page-hero-mark strong {
  margin-top: 1rem;

  color: #ffffff;

  font-size:
    clamp(1.8rem, 2vw, 2.2rem);

  font-weight: 800;
}

.about-page-hero-mark > span {
  margin-top: 0.25rem;

  color: #ffad99;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}


/* =========================================================
   MAIN STORY
   ========================================================= */

.about-page-main {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.4rem, 5vw, 5.5rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.about-page-story {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}

.about-page-image {
  overflow: hidden;

  border-radius:
    clamp(1rem, 1.4vw, 1.35rem);

  box-shadow:
    0 1rem 2.5rem rgba(8, 39, 81, 0.09);
}

.about-page-image img {
  display: block;

  width: 100%;
  height: auto;
}

.about-page-section-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--header-orange);

  font-size:
    clamp(0.7rem, 0.72vw, 0.82rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.about-page-story-copy h2,
.about-page-heading h2,
.about-page-services-copy h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.15rem, 3vw, 3.3rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.about-page-story-copy h2 span,
.about-page-heading h2 span,
.about-page-services-copy h2 span {
  color: var(--header-orange);
}

.about-page-story-copy > p:not(.about-page-section-eyebrow) {
  margin:
    1.1rem
    0
    0;

  color: #5c6676;

  font-size:
    clamp(0.88rem, 0.9vw, 1rem);

  font-weight: 500;

  line-height: 1.82;
}

.about-page-story-copy strong {
  color: #35465f;

  font-weight: 700;
}

.about-page-story-note {
  margin-top: 1.5rem;

  padding:
    1rem
    1.15rem;

  display: flex;

  align-items: flex-start;

  gap: 0.8rem;

  background: #eef4fc;

  border-left: 0.2rem solid var(--header-orange);

  border-radius: 0.65rem;
}

.about-page-story-note > span {
  width: 1.8rem;
  height: 1.8rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-blue);

  color: #ffffff;

  font-size: 0.7rem;

  font-weight: 900;
}

.about-page-story-note p {
  margin: 0;

  color: #43536b;

  font-size: 0.8rem;

  font-weight: 600;

  line-height: 1.6;
}


/* =========================================================
   VALUES
   ========================================================= */

.about-page-values {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5vw, 5.5rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.about-page-heading {
  max-width: 47rem;

  margin-inline: auto;

  text-align: center;
}

.about-page-heading > p:last-child {
  max-width: 40rem;

  margin:
    1rem
    auto
    0;

  color: #667080;

  font-size:
    clamp(0.86rem, 0.88vw, 0.97rem);

  line-height: 1.7;
}

.about-values-grid {
  margin-top:
    clamp(2.2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.3vw, 1.3rem);
}

.about-value-card {
  padding:
    clamp(1.3rem, 1.7vw, 1.7rem);

  background: #ffffff;

  border: 1px solid #e1e6ee;

  border-radius: 1rem;

  box-shadow:
    0 0.5rem 1.5rem rgba(8, 38, 79, 0.05);
}

.about-value-icon {
  width: 3.5rem;
  height: 3.5rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #edf3fb;

  color: var(--header-blue);
}

.about-value-icon-orange {
  background: #fff0ec;

  color: var(--header-orange);
}

.about-value-icon svg {
  width: 52%;
  height: 52%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-value-card h3 {
  margin:
    0.4rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.07vw, 1.18rem);

  font-weight: 800;
}

.about-value-card > span:last-child {
  display: block;

  margin-top: 0.75rem;

  color: #687282;

  font-size:
    clamp(0.76rem, 0.78vw, 0.86rem);

  line-height: 1.65;
}


/* =========================================================
   SERVICES
   ========================================================= */

.about-page-services {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5vw, 5.5rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.about-page-services-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}

.about-page-services-copy > p:not(.about-page-section-eyebrow) {
  margin:
    1rem
    0
    0;

  color: #657080;

  font-size:
    clamp(0.86rem, 0.88vw, 0.97rem);

  line-height: 1.72;
}

.about-page-service-links {
  margin-top: 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;
}

.about-page-service-links a {
  min-height: 3rem;

  padding:
    0
    1rem;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  border: 1px solid #e1e5ed;

  border-radius: 0.7rem;

  background: #f8fafd;

  color: #44546b;

  font-size: 0.78rem;

  font-weight: 700;
}

.about-page-service-links b {
  color: var(--header-orange);
}

.about-page-service-panel {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1rem;
}

.about-page-service-panel > div {
  padding:
    clamp(1.3rem, 1.7vw, 1.7rem);

  background:
    linear-gradient(
      145deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;

  color: #ffffff;
}

.about-page-service-panel > div:nth-child(2),
.about-page-service-panel > div:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #fff0ec 0%,
      #fff9f7 100%
    );

  color: var(--header-blue);

  border: 1px solid rgba(253,52,0,0.12);
}

.about-page-service-panel span {
  width: 3rem;
  height: 3rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.about-page-service-panel svg {
  width: 52%;
  height: 52%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-page-service-panel h3 {
  margin:
    1rem
    0
    0;

  font-size: 1rem;

  font-weight: 800;
}

.about-page-service-panel p {
  margin:
    0.55rem
    0
    0;

  color: rgba(255,255,255,0.68);

  font-size: 0.75rem;

  line-height: 1.6;
}

.about-page-service-panel > div:nth-child(2) p,
.about-page-service-panel > div:nth-child(3) p {
  color: #6c7583;
}


/* =========================================================
   AREA
   ========================================================= */

.about-page-area {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3rem, 4vw, 4.2rem);

  background: #f8fafd;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.about-page-area-card {
  padding:
    clamp(1.8rem, 2.8vw, 2.8rem);

  display: grid;

  grid-template-columns:
    minmax(0, 0.7fr)
    minmax(0, 1.3fr);

  align-items: center;

  gap:
    clamp(2rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e6ee;

  border-radius: 1rem;

  box-shadow:
    0 0.7rem 2rem rgba(8, 39, 81, 0.055);
}

.about-page-area-copy > p {
  margin: 0 0 0.5rem;

  color: var(--header-orange);

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.about-page-area-copy h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(1.7rem, 2.3vw, 2.5rem);

  font-weight: 800;

  line-height: 1.15;
}

.about-page-area-copy > span {
  display: block;

  margin-top: 0.8rem;

  color: #687282;

  font-size: 0.8rem;

  line-height: 1.65;
}

.about-page-districts {
  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;
}

.about-page-districts span {
  padding:
    0.58rem
    0.8rem;

  border-radius: 999px;

  border: 1px solid #dfe4ec;

  background: #f8fafd;

  color: #536176;

  font-size: 0.68rem;

  font-weight: 650;
}


/* =========================================================
   CTA
   ========================================================= */

.about-page-cta {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.about-page-cta-inner {
  padding:
    clamp(1.7rem, 2.5vw, 2.5rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 2rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.about-page-cta-inner > div:first-child > p {
  margin: 0 0 0.4rem;

  color: #ffad99;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.about-page-cta-inner h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.6rem, 2.2vw, 2.3rem);

  font-weight: 800;
}

.about-page-cta-inner > div:first-child > span {
  display: block;

  margin-top: 0.5rem;

  color: rgba(255,255,255,0.68);

  font-size: 0.78rem;
}

.about-page-cta-actions {
  display: flex;

  align-items: center;

  gap: 0.7rem;
}

.about-page-cta-actions a {
  min-height: 3rem;

  padding-inline: 1.1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.73rem;

  font-weight: 800;

  white-space: nowrap;
}

.about-page-call {
  background: var(--header-orange);
}

.about-page-whatsapp {
  background: #15803D;
}


/* =========================================================
   1000 PX
   ========================================================= */

@media (max-width: 1000px) {

  .about-page-story,
  .about-page-services-grid {
    grid-template-columns: 1fr;
  }

  .about-values-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .about-page-area-card {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   760 PX
   ========================================================= */

@media (max-width: 760px) {

  .about-page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-page-hero-mark {
    max-width: 19rem;

    width: 100%;

    margin-inline: auto;
  }

  .about-page-cta-inner {
    grid-template-columns: 1fr;
  }

  .about-page-cta-actions {
    justify-content: flex-start;
  }

}


/* =========================================================
   560 PX
   ========================================================= */

@media (max-width: 560px) {

  .about-page-container,
  .about-page-hero-inner {
    width: calc(100% - 1.5rem);
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
  }

  .about-page-hero-grid,
  .about-page-hero-copy,
  .about-page-story,
  .about-page-story-copy,
  .about-page-image,
  .about-page-services-grid,
  .about-page-services-copy,
  .about-page-service-panel,
  .about-page-area-card,
  .about-page-area-copy,
  .about-page-districts,
  .about-page-cta-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .about-page-hero h1 {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(1.9rem, 10vw, 2.7rem);

    letter-spacing: -0.04em;
  }

  .about-page-main,
  .about-page-values,
  .about-page-services,
  .about-page-area,
  .about-page-cta {
    padding-block:
      clamp(2.5rem, 8vw, 3.5rem);
  }

  .about-values-grid,
  .about-page-service-panel {
    grid-template-columns: 1fr;
  }

  .about-page-story-copy h2,
  .about-page-heading h2,
  .about-page-services-copy h2 {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(1.6rem, 8vw, 2.3rem);

    letter-spacing: -0.035em;
  }

  .about-page-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .about-page-cta-actions a {
    width: 100%;
  }

}


/* ===== ABOUT PAGE END ===== */


/* ===== SERVICES BLOG PAGE START ===== */


/* =========================================================
   PAGE
   ========================================================= */

.services-blog-page {
  width: 100%;
}

.services-blog-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.services-blog-hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #061f49 0%,
      #082e6b 55%,
      #0d3b82 100%
    );

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.services-blog-hero-inner {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(1.2rem, 2vw, 2rem)
    0
    clamp(3rem, 5vw, 5rem);
}

.services-blog-breadcrumb {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  color: rgba(255,255,255,0.48);

  font-size: 0.7rem;

  font-weight: 600;
}

.services-blog-breadcrumb a {
  color: rgba(255,255,255,0.78);
}

.services-blog-breadcrumb > span:last-child {
  color: #ff9d85;
}

.services-blog-hero-content {
  margin-top:
    clamp(2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(2rem, 5vw, 6rem);
}

.services-blog-eyebrow {
  margin: 0 0 0.7rem;

  color: #ff9d85;

  font-size:
    clamp(0.7rem, 0.73vw, 0.83rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.services-blog-hero h1 {
  max-width: 58rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2.8rem, 4.7vw, 5rem);

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.99;
}

.services-blog-hero h1 span {
  display: block;

  margin-top: 0.3rem;

  color: var(--header-orange);

  font-size: 0.68em;
}

.services-blog-hero-content > div:first-child > p:last-child {
  max-width: 44rem;

  margin:
    1.3rem
    0
    0;

  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.88rem, 0.92vw, 1rem);

  line-height: 1.72;
}


/* =========================================================
   HERO ICON
   ========================================================= */

.services-blog-hero-icon {
  width:
    clamp(15rem, 18vw, 19rem);

  aspect-ratio: 1;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.1);

  background: rgba(255,255,255,0.045);
}

.services-blog-hero-icon > div {
  width:
    clamp(6.5rem, 7vw, 7.6rem);

  height:
    clamp(6.5rem, 7vw, 7.6rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);
}

.services-blog-hero-icon svg {
  width: 58%;
  height: 58%;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-blog-hero-icon strong {
  margin-top: 0.9rem;

  color: #ffffff;

  font-size:
    clamp(1.7rem, 2vw, 2.2rem);

  font-weight: 800;

  line-height: 1;
}

.services-blog-hero-icon > span {
  margin-top: 0.3rem;

  color: #ffad99;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}


/* =========================================================
   LIST SECTION
   ========================================================= */

.services-blog-list-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5.5vw, 6rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.services-blog-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(20rem, 0.55fr);

  align-items: end;

  gap:
    clamp(2rem, 4vw, 5rem);

  margin-bottom:
    clamp(2.2rem, 3.2vw, 3.4rem);
}

.services-blog-heading > div > p {
  margin: 0 0 0.6rem;

  color: var(--header-orange);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.services-blog-heading h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.2rem, 3.2vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.services-blog-heading h2 span {
  color: var(--header-orange);
}

.services-blog-heading > p {
  margin: 0;

  color: #657080;

  font-size:
    clamp(0.84rem, 0.88vw, 0.96rem);

  line-height: 1.7;
}


/* =========================================================
   2 COLUMN BLOG GRID
   ========================================================= */

.services-blog-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.35vw, 1.35rem);
}


/* =========================================================
   BLOG CARD
   ========================================================= */

.services-blog-card {
  min-width: 0;

  min-height:
    clamp(12rem, 14vw, 14.2rem);

  display: grid;

  grid-template-columns:
    minmax(10rem, 0.43fr)
    minmax(0, 0.57fr);

  background: #ffffff;

  border: 1px solid #e0e5ed;

  border-radius:
    clamp(0.85rem, 1vw, 1rem);

  overflow: hidden;

  box-shadow:
    0 0.5rem 1.5rem rgba(8, 38, 79, 0.045);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.services-blog-card:hover {
  border-color: rgba(253,52,0,0.25);

  box-shadow:
    0 0.9rem 2rem rgba(8, 38, 79, 0.085);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.services-blog-card-image {
  min-width: 0;

  overflow: hidden;

  background: #e9edf3;
}

.services-blog-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 300ms ease;
}

.services-blog-card:hover .services-blog-card-image img {
  transform: scale(1.035);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.services-blog-card-content {
  min-width: 0;

  padding:
    clamp(1rem, 1.35vw, 1.4rem);

  display: flex;

  flex-direction: column;
}

.services-blog-card-label {
  margin: 0;

  color: var(--header-orange);

  font-size: 0.56rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.services-blog-card h3 {
  margin:
    0.45rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.15vw, 1.25rem);

  font-weight: 800;

  line-height: 1.25;
}

.services-blog-card-content > p:not(.services-blog-card-label) {
  margin:
    0.7rem
    0
    0;

  color: #667181;

  font-size:
    clamp(0.72rem, 0.75vw, 0.83rem);

  font-weight: 500;

  line-height: 1.6;
}

.services-blog-card-bottom {
  margin-top: auto;

  padding-top: 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  color: var(--header-blue);

  font-size: 0.68rem;

  font-weight: 750;
}

.services-blog-card-arrow {
  width: 1.8rem;
  height: 1.8rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eef3fb;

  color: var(--header-orange);

  font-size: 0.9rem;
}


/* =========================================================
   CTA
   ========================================================= */

.services-blog-cta-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.services-blog-cta {
  padding:
    clamp(1.6rem, 2.5vw, 2.5rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 2rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.services-blog-cta > div:first-child > p {
  margin: 0 0 0.4rem;

  color: #ffad99;

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.services-blog-cta h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.6rem, 2.2vw, 2.3rem);

  font-weight: 800;
}

.services-blog-cta > div:first-child > span {
  display: block;

  margin-top: 0.5rem;

  color: rgba(255,255,255,0.68);

  font-size: 0.78rem;
}

.services-blog-cta-actions {
  display: flex;

  align-items: center;

  gap: 0.7rem;
}

.services-blog-cta-actions a {
  min-height: 3rem;

  padding-inline: 1.1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.73rem;

  font-weight: 800;

  white-space: nowrap;
}

.services-blog-call {
  background: var(--header-orange);
}

.services-blog-wa {
  background: #15803D;
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width: 1100px) {

  .services-blog-grid {
    grid-template-columns: 1fr;
  }

  .services-blog-card {
    grid-template-columns:
      minmax(13rem, 0.34fr)
      minmax(0, 0.66fr);

    min-height: 13rem;
  }

}


/* =========================================================
   800 PX
   ========================================================= */

@media (max-width: 800px) {

  .services-blog-hero-content {
    grid-template-columns: 1fr;
  }

  .services-blog-hero-icon {
    width: 17rem;

    margin-inline: auto;
  }

  .services-blog-heading {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1rem;
  }

  .services-blog-heading > p {
    max-width: 40rem;
  }

  .services-blog-cta {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   620 PX
   ========================================================= */

@media (max-width: 620px) {

  .services-blog-list-section {
    padding-block:
      clamp(2.7rem, 8vw, 3.8rem);
  }

  .services-blog-hero h1 {
    font-size:
      clamp(2.4rem, 11vw, 3.25rem);
  }

  .services-blog-heading h2 {
    font-size:
      clamp(2rem, 8vw, 2.6rem);
  }

  .services-blog-card {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  .services-blog-card-image {
    aspect-ratio: 16 / 9;
  }

  .services-blog-card-content {
    min-height: 11rem;
  }

  .services-blog-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .services-blog-cta-actions a {
    width: 100%;
  }

}

/* ===== SERVICES BLOG PAGE END ===== */


/* ===== REGIONS PAGE START ===== */


/* =========================================================
   GENERAL
   ========================================================= */

.regions-page {
  width: 100%;
}

.regions-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.regions-hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #061f49 0%,
      #082e6b 56%,
      #0d3b82 100%
    );

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.regions-hero-inner {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(1.2rem, 2vw, 2rem)
    0
    clamp(3.2rem, 5vw, 5rem);
}

.regions-breadcrumb {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  color: rgba(255,255,255,0.48);

  font-size: 0.7rem;

  font-weight: 600;
}

.regions-breadcrumb a {
  color: rgba(255,255,255,0.78);
}

.regions-breadcrumb > span:last-child {
  color: #ff9d85;
}

.regions-hero-grid {
  margin-top:
    clamp(2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(18rem, 0.7fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}

.regions-eyebrow {
  margin: 0 0 0.7rem;

  color: #ff9c83;

  font-size:
    clamp(0.7rem, 0.73vw, 0.83rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.regions-hero h1 {
  max-width: 55rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2.8rem, 4.7vw, 5rem);

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.99;
}

.regions-hero h1 span {
  display: block;

  margin-top: 0.25rem;

  color: var(--header-orange);
}

.regions-hero-copy > p:not(.regions-eyebrow) {
  max-width: 44rem;

  margin:
    1.3rem
    0
    0;

  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.9rem, 0.93vw, 1.03rem);

  line-height: 1.72;
}

.regions-hero-actions {
  margin-top: 1.6rem;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.7rem;
}

.regions-hero-actions a {
  min-height: 3.1rem;

  padding-inline: 1.2rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.76rem;

  font-weight: 800;
}

.regions-call {
  background: var(--header-orange);
}

.regions-wa {
  background: #15803D;
}


/* =========================================================
   HERO STATS
   ========================================================= */

.regions-hero-stats {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.8rem;
}

.regions-stat-main {
  grid-column: 1 / -1;

  min-height: 12rem;

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  background: rgba(255,255,255,0.07);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 1rem;
}

.regions-stat-icon {
  width: 3.5rem;
  height: 3.5rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.regions-stat-icon svg {
  width: 50%;
  height: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.regions-stat-main strong {
  margin-top: 0.8rem;

  color: #ffffff;

  font-size: 2rem;

  font-weight: 800;

  line-height: 1;
}

.regions-stat-main > span:last-child {
  margin-top: 0.3rem;

  color: #ffad99;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.regions-stat-small {
  min-height: 7rem;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  background: rgba(255,255,255,0.055);

  border: 1px solid rgba(255,255,255,0.09);

  border-radius: 0.9rem;
}

.regions-stat-small strong {
  color: #ffffff;

  font-size:
    clamp(1.15rem, 1.5vw, 1.5rem);

  font-weight: 800;
}

.regions-stat-small span {
  margin-top: 0.25rem;

  color: rgba(255,255,255,0.55);

  font-size: 0.64rem;

  font-weight: 600;
}


/* =========================================================
   INTRO
   ========================================================= */

.regions-intro-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3rem, 4.5vw, 4.8rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.regions-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: end;

  gap:
    clamp(2rem, 5vw, 6rem);
}

.regions-section-eyebrow {
  margin: 0 0 0.6rem;

  color: var(--header-orange);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.regions-intro h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.2rem, 3.1vw, 3.4rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.regions-intro h2 span {
  color: var(--header-orange);
}

.regions-intro-copy p {
  margin: 0;

  color: #626d7d;

  font-size:
    clamp(0.85rem, 0.88vw, 0.97rem);

  line-height: 1.75;
}

.regions-intro-copy p + p {
  margin-top: 0.9rem;
}


/* =========================================================
   REGION LIST
   ========================================================= */

.regions-list-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3rem, 5vw, 5.5rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}


/* =========================================================
   EFELER FEATURED
   ========================================================= */

.regions-featured-card {
  padding:
    clamp(1.5rem, 2.3vw, 2.3rem);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(1.2rem, 2vw, 2rem);

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;

  box-shadow:
    0 0.9rem 2rem rgba(6,45,104,0.12);
}

.regions-featured-icon {
  width:
    clamp(4.2rem, 4.8vw, 5rem);

  height:
    clamp(4.2rem, 4.8vw, 5rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.regions-featured-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.regions-featured-copy > p:first-child {
  margin: 0 0 0.3rem;

  color: #ffad99;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.regions-featured-copy h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.4rem, 1.8vw, 1.9rem);

  font-weight: 800;
}

.regions-featured-copy > span {
  display: block;

  margin-top: 0.2rem;

  color: rgba(255,255,255,0.53);

  font-size: 0.68rem;

  font-weight: 600;
}

.regions-featured-text {
  max-width: 42rem;

  margin:
    0.65rem
    0
    0 !important;

  color: rgba(255,255,255,0.72) !important;

  font-size: 0.78rem !important;

  font-weight: 500 !important;

  letter-spacing: normal !important;

  line-height: 1.6;
}

.regions-featured-services {
  display: grid;

  grid-template-columns:
    repeat(2, max-content);

  gap: 0.55rem 1rem;
}

.regions-featured-services span {
  color: rgba(255,255,255,0.74);

  font-size: 0.7rem;

  font-weight: 650;

  white-space: nowrap;
}

.regions-featured-services b {
  color: var(--header-orange);

  margin-right: 0.25rem;
}


/* =========================================================
   REGION GRID
   ========================================================= */

.regions-grid {
  margin-top:
    clamp(1.2rem, 1.8vw, 1.8rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(0.9rem, 1.2vw, 1.2rem);
}

.region-card {
  min-width: 0;

  min-height: 15rem;

  padding:
    clamp(1.2rem, 1.5vw, 1.5rem);

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e0e5ed;

  border-radius: 0.95rem;

  box-shadow:
    0 0.45rem 1.35rem rgba(8,38,79,0.04);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.region-card:hover {
  border-color: rgba(253,52,0,0.26);

  box-shadow:
    0 0.8rem 1.8rem rgba(8,38,79,0.075);
}

.region-card-top {
  display: flex;

  align-items: center;

  gap: 0.65rem;
}

.region-card-icon {
  width: 2.6rem;
  height: 2.6rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #edf3fb;

  color: var(--header-blue);
}

.region-card-icon svg {
  width: 52%;
  height: 52%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.region-card-city {
  color: var(--header-orange);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.04em;
}

.region-card h3 {
  margin:
    1rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.05vw, 1.16rem);

  font-weight: 800;

  line-height: 1.25;
}

.region-card > p {
  margin:
    0.7rem
    0
    0;

  color: #657080;

  font-size:
    clamp(0.75rem, 0.77vw, 0.85rem);

  line-height: 1.62;
}

.region-card-tags {
  margin-top: auto;

  padding-top: 1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem;
}

.region-card-tags span {
  padding:
    0.35rem
    0.5rem;

  border-radius: 999px;

  background: #f3f6fa;

  color: #647186;

  font-size: 0.56rem;

  font-weight: 700;
}


/* =========================================================
   INFO CARD
   ========================================================= */

.regions-info-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.regions-info-card {
  padding:
    clamp(1.5rem, 2.2vw, 2.2rem);

  display: flex;

  align-items: center;

  gap:
    clamp(1rem, 1.7vw, 1.7rem);

  background:
    linear-gradient(
      135deg,
      #fff0ec 0%,
      #fff9f7 100%
    );

  border: 1px solid rgba(253,52,0,0.13);

  border-radius: 1rem;
}

.regions-info-icon {
  width: 4rem;
  height: 4rem;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.regions-info-icon svg {
  width: 54%;
  height: 54%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.regions-info-card > div > p {
  margin: 0 0 0.35rem;

  color: var(--header-orange);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.regions-info-card h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(1.35rem, 1.8vw, 1.9rem);

  font-weight: 800;
}

.regions-info-card > div > span {
  display: block;

  margin-top: 0.5rem;

  color: #697484;

  font-size: 0.76rem;

  line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.regions-cta-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.regions-cta {
  padding:
    clamp(1.7rem, 2.5vw, 2.5rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 2rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.regions-cta > div:first-child > p {
  margin: 0 0 0.4rem;

  color: #ffad99;

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.regions-cta h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.55rem, 2.15vw, 2.3rem);

  font-weight: 800;
}

.regions-cta > div:first-child > span {
  display: block;

  margin-top: 0.55rem;

  color: rgba(255,255,255,0.68);

  font-size: 0.78rem;
}

.regions-cta-actions {
  display: flex;

  align-items: center;

  gap: 0.7rem;
}

.regions-cta-actions a {
  min-height: 3rem;

  padding-inline: 1.1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.73rem;

  font-weight: 800;

  white-space: nowrap;
}

.regions-cta-call {
  background: var(--header-orange);
}

.regions-cta-wa {
  background: #15803D;
}


/* =========================================================
   1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .regions-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .regions-featured-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .regions-featured-services {
    grid-column: 1 / -1;

    padding-left:
      calc(
        clamp(4.2rem, 4.8vw, 5rem)
        +
        clamp(1.2rem, 2vw, 2rem)
      );
  }

}


/* =========================================================
   900 PX
   ========================================================= */

@media (max-width: 900px) {

  .regions-hero-grid,
  .regions-intro {
    grid-template-columns: 1fr;
  }

  .regions-hero-stats {
    max-width: 32rem;
  }

}


/* =========================================================
   760 PX
   ========================================================= */

@media (max-width: 760px) {

  .regions-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .regions-featured-services {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding-left: 0;
  }

  .regions-cta {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   520 PX
   ========================================================= */

@media (max-width: 520px) {

  .regions-hero h1 {
    font-size:
      clamp(2.4rem, 11vw, 3.2rem);
  }

  .regions-hero-actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .regions-hero-actions a {
    width: 100%;
  }

  .regions-hero-stats {
    grid-template-columns: 1fr;
  }

  .regions-stat-main {
    grid-column: auto;
  }

  .regions-grid {
    grid-template-columns: 1fr;
  }

  .region-card {
    min-height: auto;
  }

  .regions-featured-card {
    grid-template-columns: 1fr;
  }

  .regions-featured-services {
    grid-template-columns: 1fr;
  }

  .regions-info-card {
    align-items: flex-start;

    flex-direction: column;
  }

  .regions-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .regions-cta-actions a {
    width: 100%;
  }

}

/* ===== REGIONS PAGE END ===== */


/* ===== BLOG PAGE START ===== */

.blog-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.blog-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.blog-hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #061f49 0%,
      #082e6b 56%,
      #0d3b82 100%
    );

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.blog-hero-inner {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(1.2rem, 2vw, 2rem)
    0
    clamp(3rem, 5vw, 5rem);
}

.blog-breadcrumb {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  color: rgba(255,255,255,0.48);

  font-size: 0.7rem;

  font-weight: 600;
}

.blog-breadcrumb a {
  color: rgba(255,255,255,0.78);
}

.blog-breadcrumb > span:last-child {
  color: #ff9d85;
}

.blog-hero-content {
  margin-top:
    clamp(2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}

.blog-hero-eyebrow {
  margin: 0 0 0.7rem;

  color: #ff9c83;

  font-size:
    clamp(0.7rem, 0.73vw, 0.83rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.blog-hero h1 {
  max-width: 56rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2.8rem, 4.7vw, 5rem);

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.99;
}

.blog-hero h1 span {
  display: block;

  margin-top: 0.25rem;

  color: var(--header-orange);
}

.blog-hero-content > div:first-child > p:last-child {
  max-width: 43rem;

  margin:
    1.3rem
    0
    0;

  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.88rem, 0.92vw, 1rem);

  line-height: 1.72;
}


/* =========================================================
   HERO MARK
   ========================================================= */

.blog-hero-mark {
  width:
    clamp(15rem, 18vw, 19rem);

  aspect-ratio: 1;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 50%;

  background: rgba(255,255,255,0.045);
}

.blog-hero-mark-icon {
  width:
    clamp(6rem, 7vw, 7rem);

  height:
    clamp(6rem, 7vw, 7rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.blog-hero-mark-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-hero-mark strong {
  margin-top: 0.9rem;

  color: #ffffff;

  font-size:
    clamp(1.5rem, 1.8vw, 2rem);

  font-weight: 800;
}

.blog-hero-mark > span:last-child {
  margin-top: 0.25rem;

  color: #ffad99;

  font-size: 0.6rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


/* =========================================================
   CONTENT
   ========================================================= */

.blog-content-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5.5vw, 6rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}


/* =========================================================
   HEADING
   ========================================================= */

.blog-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(18rem, 0.55fr);

  align-items: end;

  gap:
    clamp(2rem, 4vw, 5rem);

  margin-bottom:
    clamp(2.3rem, 3.2vw, 3.3rem);
}

.blog-heading > div > p {
  margin: 0 0 0.6rem;

  color: var(--header-orange);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.blog-heading h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.2rem, 3.2vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.blog-heading h2 span {
  color: var(--header-orange);
}

.blog-heading > p {
  margin: 0;

  color: #657080;

  font-size:
    clamp(0.84rem, 0.88vw, 0.96rem);

  line-height: 1.7;
}


/* =========================================================
   FEATURED
   ========================================================= */

.blog-featured {
  min-height:
    clamp(23rem, 30vw, 32rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  background: #ffffff;

  border: 1px solid #dfe5ed;

  border-radius:
    clamp(1rem, 1.25vw, 1.2rem);

  overflow: hidden;

  box-shadow:
    0 0.8rem 2rem rgba(8,38,79,0.065);
}

.blog-featured-image {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: #e9edf3;
}

.blog-featured-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.blog-featured-image > span {
  position: absolute;

  left: 1.2rem;
  top: 1.2rem;

  padding:
    0.5rem
    0.75rem;

  border-radius: 999px;

  background: var(--header-orange);

  color: #ffffff;

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.blog-featured-content {
  padding:
    clamp(1.7rem, 3vw, 3.2rem);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.blog-post-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.6rem 1.2rem;
}

.blog-post-meta span:first-child {
  color: var(--header-orange);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.blog-post-meta span:last-child {
  color: #8a94a2;

  font-size: 0.64rem;

  font-weight: 600;
}

.blog-featured h2 {
  margin:
    0.75rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1.8rem, 2.7vw, 3rem);

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.12;
}

.blog-featured-content > p {
  margin:
    1rem
    0
    0;

  color: #647080;

  font-size:
    clamp(0.84rem, 0.88vw, 0.97rem);

  line-height: 1.72;
}

.blog-featured-footer {
  margin-top: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  color: var(--header-blue);

  font-size: 0.73rem;

  font-weight: 800;
}

.blog-featured-arrow {
  width: 2.2rem;
  height: 2.2rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-blue);

  color: #ffffff;

  font-size: 1rem;
}


/* =========================================================
   POST GRID
   ========================================================= */

.blog-post-grid {
  margin-top:
    clamp(1.2rem, 1.7vw, 1.7rem);

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.3vw, 1.3rem);
}


/* =========================================================
   POST CARD
   ========================================================= */

.blog-post-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e0e5ed;

  border-radius: 0.95rem;

  overflow: hidden;

  box-shadow:
    0 0.45rem 1.35rem rgba(8,38,79,0.045);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.blog-post-card:hover {
  border-color: rgba(253,52,0,0.25);

  box-shadow:
    0 0.9rem 1.9rem rgba(8,38,79,0.08);
}

.blog-post-card-image {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #e9edf3;
}

.blog-post-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 280ms ease;
}

.blog-post-card:hover .blog-post-card-image img {
  transform: scale(1.035);
}

.blog-post-card-image > span {
  position: absolute;

  left: 0.8rem;
  bottom: 0.8rem;

  padding:
    0.42rem
    0.62rem;

  border-radius: 999px;

  background: rgba(6,45,104,0.93);

  color: #ffffff;

  font-size: 0.54rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}

.blog-post-card-content {
  flex: 1;

  padding:
    clamp(1rem, 1.35vw, 1.35rem);

  display: flex;

  flex-direction: column;
}

.blog-post-card-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  color: #929aa6;

  font-size: 0.58rem;

  font-weight: 600;
}

.blog-post-card h3 {
  margin:
    0.65rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.12vw, 1.22rem);

  font-weight: 800;

  line-height: 1.3;
}

.blog-post-card-content > p {
  margin:
    0.75rem
    0
    0;

  color: #657080;

  font-size:
    clamp(0.74rem, 0.76vw, 0.84rem);

  line-height: 1.62;
}

.blog-post-card-footer {
  margin-top: auto;

  padding-top: 1.1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  color: var(--header-blue);

  font-size: 0.68rem;

  font-weight: 750;
}

.blog-post-card-arrow {
  width: 1.85rem;
  height: 1.85rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #eef3fb;

  color: var(--header-orange);

  font-size: 0.9rem;
}


/* =========================================================
   LAST CARD
   ========================================================= */

.blog-post-card:last-child {
  grid-column: span 1;
}


/* =========================================================
   CTA
   ========================================================= */

.blog-cta-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.blog-cta {
  padding:
    clamp(1.5rem, 2.3vw, 2.3rem);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    clamp(1rem, 1.7vw, 1.7rem);

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.blog-cta-icon {
  width: 4rem;
  height: 4rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.blog-cta-icon svg {
  width: 48%;
  height: 48%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-cta > div:nth-child(2) > p {
  margin: 0 0 0.35rem;

  color: #ffad99;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.blog-cta h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.45rem, 2vw, 2.1rem);

  font-weight: 800;
}

.blog-cta > div:nth-child(2) > span {
  display: block;

  margin-top: 0.45rem;

  color: rgba(255,255,255,0.66);

  font-size: 0.76rem;
}

.blog-cta-actions {
  display: flex;

  align-items: center;

  gap: 0.65rem;
}

.blog-cta-actions a {
  min-height: 3rem;

  padding-inline: 1.05rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.72rem;

  font-weight: 800;

  white-space: nowrap;
}

.blog-call {
  background: var(--header-orange);
}

.blog-wa {
  background: #15803D;
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width: 1100px) {

  .blog-post-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   820 PX
   ========================================================= */

@media (max-width: 820px) {

  .blog-hero-content {
    grid-template-columns: 1fr;
  }

  .blog-hero-mark {
    width: min(17rem, 100%);
    max-width: 100%;

    margin-inline: auto;
  }

  .blog-heading {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1rem;
  }

  .blog-featured {
    grid-template-columns: 1fr;
  }

  .blog-featured-image {
    aspect-ratio: 16 / 9;
  }

  .blog-cta {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .blog-cta-actions {
    grid-column: 1 / -1;

    padding-left: 0;
  }

}


/* =========================================================
   600 PX
   ========================================================= */

@media (max-width: 600px) {

  .blog-hero-inner,
  .blog-container {
    width: calc(100% - 2rem);
    max-width: 100%;
  }

  .blog-hero-content,
  .blog-hero-content > div,
  .blog-heading,
  .blog-heading > *,
  .blog-featured,
  .blog-featured > *,
  .blog-post-grid,
  .blog-post-card,
  .blog-post-card-content,
  .blog-cta,
  .blog-cta > * {
    min-width: 0;
    max-width: 100%;
  }

  .blog-hero-mark {
    width: min(14.5rem, 76vw);
    max-width: 100%;
  }

  .blog-hero-content > div:first-child > p:last-child {
    max-width: 100%;
  }

  .blog-content-section {
    padding-block:
      clamp(2.7rem, 8vw, 3.8rem);
  }

  .blog-hero h1 {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(2.25rem, 10vw, 3.05rem);

    letter-spacing: -0.045em;
  }

  .blog-heading h2 {
    font-size:
      clamp(2rem, 8vw, 2.55rem);
  }

  .blog-post-grid {
    grid-template-columns: 1fr;
  }

  .blog-cta {
    grid-template-columns: 1fr;
  }

  .blog-cta-actions {
    grid-column: auto;

    flex-direction: column;

    align-items: stretch;
  }

  .blog-cta-actions a {
    width: 100%;
  }

}

/* ===== BLOG PAGE END ===== */


/* ===== MOBILE FLOATING ACTIONS START ===== */


/* =========================================================
   ALL SCREENS
   Scroll-to-top her ekran boyutunda kullanılabilir.
   ========================================================= */

.mobile-float-actions {
  position: fixed;

  right:
    max(
      1rem,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      1rem,
      env(safe-area-inset-bottom)
    );

  left: auto;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.5rem;

  z-index: 9999;

  pointer-events: none;
}


/* Telefon ve WhatsApp masaüstü/tablette görünmez */

.mobile-float-link {
  display: none;
}


/* =========================================================
   SCROLL TOP
   ========================================================= */

.mobile-float-top {
  width: 3rem;
  height: 3rem;

  padding: 0;

  display: grid;

  place-items: center;

  box-sizing: border-box;

  border: 0;

  border-radius: 50%;

  background: var(--header-blue);

  color: #ffffff;

  box-shadow:
    0 0.45rem 1.2rem rgba(0,0,0,0.18);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    background 160ms ease;
}

.mobile-float-top.is-visible {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}

.mobile-float-top:hover {
  background: var(--header-orange);
}

.mobile-float-top svg {
  width: 1.3rem;
  height: 1.3rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .mobile-float-actions {
    right:
      max(
        0.75rem,
        env(safe-area-inset-right)
      );

    bottom:
      max(
        0.8rem,
        env(safe-area-inset-bottom)
      );

    width:
      min(
        9.5rem,
        calc(100vw - 1.5rem)
      );

    max-width:
      calc(100vw - 1.5rem);

    align-items: stretch;
  }


  .mobile-float-link {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 2.8rem;

    padding:
      0.55rem
      0.8rem;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 0.55rem;

    box-sizing: border-box;

    border-radius: 999px;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.7rem;

    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    box-shadow:
      0 0.45rem 1.2rem rgba(0,0,0,0.17);

    pointer-events: auto;
  }


  .mobile-float-link-icon {
    width: 1.65rem;
    height: 1.65rem;

    flex: 0 0 1.65rem;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.16);
  }

  .mobile-float-link-icon svg {
    width: 1rem;
    height: 1rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .mobile-float-call {
    background: var(--header-orange);
  }

  .mobile-float-whatsapp {
    background: #15803D;
  }


  .mobile-float-top {
    width: 2.8rem;
    height: 2.8rem;

    margin-top: 0.35rem;

    align-self: flex-end;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .mobile-float-actions {
    right: 0.65rem;

    width:
      min(
        9rem,
        calc(100vw - 1.3rem)
      );

    max-width:
      calc(100vw - 1.3rem);
  }

  .mobile-float-link {
    min-height: 2.7rem;

    font-size: 0.66rem;
  }

}


/* ===== MOBILE FLOATING ACTIONS END ===== */


/* ===== CONTACT PAGE START ===== */

.contact-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.contact-page-container {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.contact-page-hero {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  background:
    linear-gradient(
      135deg,
      #061f49 0%,
      #082e6b 56%,
      #0d3b82 100%
    );

  border-radius:
    var(--page-frame-radius);

  overflow: hidden;
}

.contact-page-hero-inner {
  width: min(
    calc(100% - (var(--hero-side) * 2)),
    var(--hero-max)
  );

  margin-inline: auto;

  padding:
    clamp(1.2rem, 2vw, 2rem)
    0
    clamp(3.2rem, 5vw, 5rem);
}

.contact-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  color: rgba(255,255,255,0.48);

  font-size: 0.7rem;
  font-weight: 600;
}

.contact-page-breadcrumb a {
  color: rgba(255,255,255,0.78);
}

.contact-page-breadcrumb > span:last-child {
  color: #ff9c83;
}

.contact-page-hero-grid {
  margin-top:
    clamp(2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(15rem, 0.65fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6rem);
}

.contact-page-hero-grid > * {
  min-width: 0;
}

.contact-page-eyebrow {
  margin: 0 0 0.7rem;

  color: #ff9c83;

  font-size:
    clamp(0.7rem, 0.73vw, 0.83rem);

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-page-hero h1 {
  max-width: 55rem;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2.8rem, 4.7vw, 5rem);

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.99;
}

.contact-page-hero h1 span {
  display: block;

  margin-top: 0.25rem;

  color: var(--header-orange);
}

.contact-page-hero-copy > p:not(.contact-page-eyebrow) {
  max-width: 43rem;

  margin:
    1.3rem
    0
    0;

  color: rgba(255,255,255,0.7);

  font-size:
    clamp(0.88rem, 0.92vw, 1rem);

  line-height: 1.72;
}

.contact-page-hero-actions {
  margin-top: 1.6rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;
}

.contact-page-btn {
  min-height: 3.1rem;

  padding-inline: 1.15rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.74rem;

  font-weight: 800;
}

.contact-page-btn > span {
  width: 1.65rem;
  height: 1.65rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.15);
}

.contact-page-btn svg {
  width: 1rem;
  height: 1rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page-btn-call {
  background: var(--header-orange);
}

.contact-page-btn-wa {
  background: #15803D;
}


/* =========================================================
   HERO PANEL
   ========================================================= */

.contact-page-hero-panel {
  min-height:
    clamp(17rem, 20vw, 21rem);

  padding:
    clamp(1.3rem, 2vw, 2rem);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 1.2rem;

  background: rgba(255,255,255,0.05);
}

.contact-page-hero-icon {
  width:
    clamp(5rem, 6vw, 6.5rem);

  height:
    clamp(5rem, 6vw, 6.5rem);

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--header-orange);

  color: #ffffff;
}

.contact-page-hero-icon svg {
  width: 50%;
  height: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page-hero-panel strong {
  margin-top: 1rem;

  color: #ffffff;

  font-size:
    clamp(1rem, 1.15vw, 1.25rem);

  font-weight: 800;
}

.contact-page-hero-panel p {
  max-width: 18rem;

  margin:
    0.6rem
    0
    0;

  color: rgba(255,255,255,0.6);

  font-size: 0.75rem;

  line-height: 1.6;
}

.contact-page-status {
  margin-top: 1rem;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  color: #ffb5a3;

  font-size: 0.65rem;

  font-weight: 800;
}

.contact-page-status b {
  width: 0.5rem;
  height: 0.5rem;

  border-radius: 50%;

  background: #15803D;

  box-shadow:
    0 0 0 0.2rem rgba(34,197,94,0.15);
}


/* =========================================================
   INFO
   ========================================================= */

.contact-page-info-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5vw, 5.5rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.contact-page-heading {
  max-width: 48rem;

  margin-inline: auto;

  text-align: center;
}

.contact-page-heading > p {
  margin: 0 0 0.6rem;

  color: var(--header-orange);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-page-heading h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2.2rem, 3vw, 3.3rem);

  font-weight: 800;

  letter-spacing: -0.045em;
}

.contact-page-heading h2 span {
  color: var(--header-orange);
}

.contact-page-heading > span {
  display: block;

  max-width: 38rem;

  margin:
    0.9rem
    auto
    0;

  color: #657080;

  font-size:
    clamp(0.84rem, 0.88vw, 0.96rem);

  line-height: 1.7;
}

.contact-page-info-grid {
  margin-top:
    clamp(2.2rem, 3vw, 3.2rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(0.9rem, 1.2vw, 1.2rem);
}

.contact-page-info-card {
  min-width: 0;

  padding:
    clamp(1.3rem, 1.7vw, 1.7rem);

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e1e6ee;

  border-radius: 1rem;

  box-shadow:
    0 0.5rem 1.5rem rgba(8,38,79,0.045);
}

.contact-page-info-icon {
  width: 3.5rem;
  height: 3.5rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #edf3fb;

  color: var(--header-blue);
}

.contact-page-info-icon-green {
  background: #eafbf0;

  color: #15803D;
}

.contact-page-info-icon svg {
  width: 50%;
  height: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page-info-card > p {
  margin:
    1rem
    0
    0;

  color: var(--header-orange);

  font-size: 0.6rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.contact-page-info-card h3 {
  margin:
    0.35rem
    0
    0;

  color: var(--header-text);

  font-size:
    clamp(1rem, 1.07vw, 1.18rem);

  font-weight: 800;
}

.contact-page-info-card > span:not(.contact-page-info-icon) {
  display: block;

  margin-top: 0.7rem;

  color: #697484;

  font-size:
    clamp(0.74rem, 0.76vw, 0.84rem);

  line-height: 1.65;
}

.contact-page-info-card > a,
.contact-page-info-card > strong {
  margin-top: auto;

  padding-top: 1rem;

  color: var(--header-blue);

  font-size: 0.7rem;

  font-weight: 800;
}


/* =========================================================
   MAP
   ========================================================= */

.contact-page-map-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5vw, 5.5rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.contact-page-map-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);

  align-items: stretch;

  gap:
    clamp(1.2rem, 2vw, 2rem);
}

.contact-page-map-grid > * {
  min-width: 0;
}

.contact-page-map {
  min-height:
    clamp(29rem, 34vw, 36rem);

  overflow: hidden;

  border-radius: 1rem;

  border: 1px solid #dce2eb;

  background: #eef2f6;
}

.contact-page-map iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height:
    clamp(29rem, 34vw, 36rem);

  border: 0;
}

.contact-page-map-copy {
  padding:
    clamp(1.5rem, 2.5vw, 2.5rem);

  display: flex;

  flex-direction: column;

  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.contact-page-section-eyebrow {
  margin: 0 0 0.6rem;

  color: #ffad99;

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-page-map-copy h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.8rem, 2.5vw, 2.8rem);

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.1;
}

.contact-page-map-copy h2 span {
  color: var(--header-orange);
}

.contact-page-map-copy > p:not(.contact-page-section-eyebrow) {
  margin:
    1rem
    0
    0;

  color: rgba(255,255,255,0.67);

  font-size:
    clamp(0.8rem, 0.82vw, 0.9rem);

  line-height: 1.7;
}

.contact-page-map-list {
  margin-top: 1.3rem;

  display: flex;

  flex-direction: column;

  gap: 0.65rem;
}

.contact-page-map-list > div {
  display: flex;

  align-items: flex-start;

  gap: 0.65rem;
}

.contact-page-map-list span {
  width: 1.6rem;
  height: 1.6rem;

  flex: 0 0 1.6rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(253,52,0,0.16);

  color: var(--header-orange);

  font-size: 0.62rem;

  font-weight: 900;
}

.contact-page-map-list p {
  margin: 0;

  color: rgba(255,255,255,0.75);

  font-size: 0.75rem;

  line-height: 1.6;
}

.contact-page-location-btn {
  width: max-content;

  max-width: 100%;

  min-height: 3rem;

  margin-top: 1.5rem;

  padding-inline: 1.1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  border-radius: 999px;

  background: var(--header-orange);

  color: #ffffff;

  font-size: 0.72rem;

  font-weight: 800;
}


/* =========================================================
   HELP
   ========================================================= */

.contact-page-help-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(3.5rem, 5vw, 5.5rem);

  background:
    linear-gradient(
      180deg,
      #f7f9fd 0%,
      #ffffff 100%
    );

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.contact-page-help-heading {
  text-align: center;
}

.contact-page-help-heading > p {
  margin: 0 0 0.6rem;

  color: var(--header-orange);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-page-help-heading h2 {
  margin: 0;

  color: var(--header-text);

  font-size:
    clamp(2rem, 3vw, 3.2rem);

  font-weight: 800;

  letter-spacing: -0.045em;
}

.contact-page-help-heading h2 span {
  color: var(--header-orange);
}

.contact-page-help-grid {
  margin-top:
    clamp(2rem, 3vw, 3rem);

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(0.9rem, 1.2vw, 1.2rem);
}

.contact-page-help-grid article {
  min-width: 0;

  padding:
    clamp(1.2rem, 1.6vw, 1.6rem);

  background: #ffffff;

  border: 1px solid #e1e6ee;

  border-radius: 0.95rem;
}

.contact-page-help-grid article > span {
  width: 3rem;
  height: 3rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #fff0ec;

  color: var(--header-orange);
}

.contact-page-help-grid svg {
  width: 50%;
  height: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page-help-grid h3 {
  margin:
    0.9rem
    0
    0;

  color: var(--header-text);

  font-size: 1rem;

  font-weight: 800;
}

.contact-page-help-grid p {
  margin:
    0.55rem
    0
    0;

  color: #697484;

  font-size: 0.76rem;

  line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.contact-page-cta-section {
  width: calc(100% - (var(--page-frame-gap) * 2));

  margin:
    var(--section-gap)
    auto
    0;

  padding-block:
    clamp(2.5rem, 4vw, 4rem);

  background: #ffffff;

  border: 1px solid #e1e5ed;

  border-radius:
    var(--page-frame-radius);
}

.contact-page-cta {
  padding:
    clamp(1.6rem, 2.4vw, 2.4rem);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 2rem;

  background:
    linear-gradient(
      135deg,
      #08295f 0%,
      #0d397e 100%
    );

  border-radius: 1rem;
}

.contact-page-cta > * {
  min-width: 0;
}

.contact-page-cta > div:first-child > p {
  margin: 0 0 0.4rem;

  color: #ffad99;

  font-size: 0.63rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}

.contact-page-cta h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(1.5rem, 2.1vw, 2.25rem);

  font-weight: 800;
}

.contact-page-cta > div:first-child > span {
  display: block;

  margin-top: 0.5rem;

  color: rgba(255,255,255,0.68);

  font-size: 0.77rem;
}

.contact-page-cta-actions {
  display: flex;

  gap: 0.7rem;
}

.contact-page-cta-actions a {
  min-height: 3rem;

  padding-inline: 1.05rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #ffffff;

  font-size: 0.72rem;

  font-weight: 800;

  white-space: nowrap;
}

.contact-page-cta-call {
  background: var(--header-orange);
}

.contact-page-cta-wa {
  background: #15803D;
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width: 1100px) {

  .contact-page-info-grid,
  .contact-page-help-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   820 PX
   ========================================================= */

@media (max-width: 820px) {

  .contact-page-hero-grid,
  .contact-page-map-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .contact-page-hero-panel {
    max-width: 28rem;

    width: 100%;

    margin-inline: auto;
  }

  .contact-page-cta {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   560 PX
   ========================================================= */

@media (max-width: 560px) {

  .contact-page-container,
  .contact-page-hero-inner {
    width: calc(100% - 1.5rem);

    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
  }

  .contact-page-hero-grid,
  .contact-page-hero-copy,
  .contact-page-hero-panel,
  .contact-page-map-grid,
  .contact-page-map,
  .contact-page-map-copy,
  .contact-page-cta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .contact-page-hero h1 {
    width: 100%;

    font-size:
      clamp(1.9rem, 10vw, 2.75rem);

    letter-spacing: -0.04em;
  }

  .contact-page-hero-actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .contact-page-btn {
    width: 100%;
  }

  .contact-page-info-grid,
  .contact-page-help-grid {
    grid-template-columns: 1fr;
  }

  .contact-page-heading h2,
  .contact-page-help-heading h2 {
    font-size:
      clamp(1.8rem, 8vw, 2.4rem);
  }

  .contact-page-map,
  .contact-page-map iframe {
    min-height: 24rem;
  }

  .contact-page-map-copy {
    padding: 1.3rem;
  }

  .contact-page-location-btn {
    width: 100%;
  }

  .contact-page-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .contact-page-cta-actions a {
    width: 100%;
  }

}

/* ===== CONTACT PAGE END ===== */

/* ==========================================================
   SERVICE LONG SEO CONTENT
   ========================================================== */

.service-seo-content {
  padding: 84px 0;
}

.service-seo-inner {
  max-width: 980px;
  margin: 0 auto;
}

.service-seo-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.service-seo-block:first-child {
  padding-top: 0;
}

.service-seo-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.service-seo-number {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.45;
  padding-top: 8px;
}

.service-seo-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}

.service-seo-copy p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.85;
}

.service-seo-copy p:last-child {
  margin-bottom: 0;
}

.service-seo-copy ul {
  margin: 26px 0 0;
  padding-left: 22px;
}

.service-seo-copy li {
  margin: 10px 0;
  line-height: 1.65;
}

@media (max-width: 700px) {

  .service-seo-content {
    padding: 56px 0;
  }

  .service-seo-block {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 34px 0;
  }

  .service-seo-number {
    padding-top: 0;
  }

  .service-seo-copy p {
    font-size: 16px;
    line-height: 1.78;
  }

}


/* SERVICE SEO NUMBER REMOVED */
.service-seo-block {
  grid-template-columns: minmax(0, 1fr) !important;
}

.service-seo-number {
  display: none !important;
}

/* AREA SEO FAQ START */

.area-seo-faq {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: #f5f7fa;
}

.area-seo-faq h2 {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.area-seo-faq-list {
  display: grid;
  gap: 0.85rem;
  max-width: 920px;
}

.area-seo-faq-item {
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  background: #ffffff;
}

.area-seo-faq-item summary {
  cursor: pointer;
  padding: 1.15rem 1.25rem;
  font-weight: 700;
  line-height: 1.45;
}

.area-seo-faq-item p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  line-height: 1.75;
}

.area-seo-faq-item[open] summary {
  margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
  .area-seo-faq {
    padding: 3rem 0;
  }

  .area-seo-faq-item summary {
    padding: 1rem;
  }

  .area-seo-faq-item p {
    padding: 0 1rem 1rem;
  }
}

/* AREA SEO FAQ END */

/* BLOG FEATURED SIZE FIX START */

.blog-featured {
  align-items: stretch;
}

.blog-featured-image {
  overflow: hidden;
  border-radius: 28px;
}

.blog-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .blog-featured-image img {
    min-height: 280px;
    max-height: 360px;
  }
}

/* BLOG FEATURED SIZE FIX END */


/* TRUSTINDEX WORDPRESS SLOT */
.trustindex-widget-slot{width:100%;max-width:1180px;margin:2rem auto 0;overflow:hidden}.trustindex-widget-slot iframe,.trustindex-widget-slot>div{max-width:100%}@media(max-width:640px){.trustindex-widget-slot{margin-top:1.5rem}}