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

body{
  padding-top:120px;

  background:#f8fafc;
}

.navbar{
  position:fixed;

  top:24px;
  left:50%;

  transform:translateX(-50%);

  width:100%;
  max-width:1320px;

  z-index:1000;

  padding:0 24px;
}

/* CONTAINER */

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;

  padding:16px 26px;

  border-radius:20px;

  isolation:isolate;

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

  backdrop-filter:blur(14px);

  border:
    1px solid rgba(15,23,42,0.06);

  box-shadow:
    0 10px 40px rgba(15,23,42,0.05);

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

/* SCROLL EFFECT */

.navbar.scrolled .nav-container{
  transform:
    translateY(-4px);

  box-shadow:
    0 16px 50px rgba(15,23,42,0.08);
}

/* LOGO */

.logo{
  display:flex;
  align-items:center;

  text-decoration:none;
}

.logo-image{
  height:64px;
  width:auto;

  display:block;

  object-fit:contain;
}

/* NAV */

.nav-links{
  display:flex;
  align-items:center;

  gap:10px;

  list-style:none;
}

.nav-links li{
  position:relative;
}

/* LINKS */

.nav-links a{
  position:relative;

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

  padding:12px 18px;

  border-radius:14px;

  color:#0f172a;

  font-size:15px;
  font-weight:700;

  letter-spacing:-0.2px;

  transition:
    color 0.3s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

/* HOVER */

.nav-links a:hover{
  color:#003b8e;
}

/* ACTIVE PAGE */

.nav-links a.active{
  color:#003b8e;

  background:
    linear-gradient(
      180deg,
      rgba(241,245,255,0.95),
      rgba(232,240,255,0.95)
    );

  border:
    1px solid rgba(0,59,142,0.10);

  box-shadow:
    0 10px 30px rgba(37,99,235,0.10);

  transform:
    scale(1.05);
}

.nav-links a.active::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(37,99,235,0.10),
      transparent
    );

  pointer-events:none;
}

/* BUTTON */

.navbar .primary-btn{
  padding:14px 24px;

  font-size:14px;
  font-weight:600;

  border-radius:12px;

  flex-shrink:0;
}


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

@media(max-width:992px){

  body{
    padding-top:100px;
  }

  .nav-container{
    padding:16px 22px;
  }

  .nav-links{
    gap:4px;
  }

  .nav-links a{
    padding:10px 14px;

    font-size:14px;
  }

}

@media(max-width:768px){

  body{
    padding-top:90px;
  }

  .navbar{
    top:16px;

    padding:0 14px;
  }

  .nav-container{
    padding:14px 18px;
  }

  .nav-links{
    display:none;
  }
  .logo-image{
    height:46px;
  }
  .logo-text h2{
    font-size:22px;
  }

  .navbar .primary-btn{
    padding:12px 18px;

    font-size:13px;
  }

}

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

.section-heading{
  max-width:760px;

  margin-bottom:70px;
}

.section-heading span{
  display:inline-block;

  margin-bottom:26px;

  color:#003b8e;

  letter-spacing:4px;
  font-size:13px;
  font-weight:700;
}

.section-heading h2{
  font-size:78px;
  line-height:0.96;

  color:#08275c;

  margin-bottom:30px;

  letter-spacing:-3px;

  font-family:'Playfair Display', serif;
}

.section-heading p{
  font-size:19px;
  line-height:1.9;

  color:#64748b;

  max-width:620px;
}


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

.cta-section{
  position:relative;
  overflow:hidden;

  padding:120px 0;

  background:
    linear-gradient(
      135deg,
      #002868 0%,
      #003b8e 100%
    );
}

.cta-section::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:50px 50px;
}

.cta-container{
  position:relative;
  z-index:2;

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

  gap:80px;
}

.cta-section h2{
  font-family:'Playfair Display', serif;

  font-size:56px;
  line-height:1.08;

  color:white;
}

.cta-right{
  max-width:420px;
}

.cta-right p{
  margin-bottom:30px;

  line-height:1.9;

  color:#dbeafe;
}


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

.footer{
  position:relative;
  overflow:hidden;

  padding:70px 0 0;

  background:#06152f;

  color:white;
}

/* GRID OVERLAY */

.footer-grid-overlay{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:60px 60px;

  opacity:0.4;
}

/* CONTAINER */

.footer-container{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.2fr 1fr;

  gap:80px;

  padding-bottom:50px;
}

/* BRAND */

.footer-brand{
  max-width:520px;
}

.footer-logo{
  display:inline-flex;

  margin-bottom:30px;
}

.footer-logo-image{
  width:240px;
  height:auto;

  display:block;

  object-fit:contain;
}

.footer-brand p{
  color:#cbd5e1;

  font-size:17px;
  line-height:2;
}

/* LINKS */

.footer-links-wrapper{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:80px;
}

.footer-links-column{
  display:flex;
  flex-direction:column;
}

.footer-links-column span{
  margin-bottom:28px;

  color:white;

  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
}

.footer-links-column a{
  width:fit-content;

  margin-bottom:18px;

  color:#cbd5e1;

  transition:all 0.3s ease;
}

.footer-links-column a:hover{
  color:white;

  transform:translateX(4px);
}

.footer-address{
  margin-top:12px;

  max-width:260px;

  color:#94a3b8;

  line-height:1.8;

  font-size:15px;
}

/* DIVIDER */

.footer-divider{
  width:100%;
  max-width:1200px;

  height:1px;

  margin:50px auto 26px;

  background:rgba(255,255,255,0.08);
}

/* SOCIAL */

.footer-social{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:30px;

  margin-bottom:22px;
}

.footer-social a{
  color:#94a3b8;

  font-size:18px;

  transition:all 0.3s ease;
}

.footer-social a:hover{
  color:#38bdf8;

  transform:translateY(-3px);
}

/* BOTTOM */

.footer-bottom{
  position:relative;
  z-index:2;

  padding:0 20px 34px;

  text-align:center;
}

.footer-policy{
  margin-bottom:10px;

  font-size:13px;

  color:#94a3b8;
}

.footer-policy a{
  color:#94a3b8;

  transition:0.3s ease;
}

.footer-policy a:hover{
  color:white;
}

.footer-copy{
  font-size:13px;

  color:#64748b;
}


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

@media(max-width:1100px){

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

    gap:60px;
  }

  .cta-container{
    flex-direction:column;
    align-items:flex-start;
  }

}

@media(max-width:768px){

  /* NAV */

  .nav-links{
    display:none;
  }

  /* HEADING */

  .section-heading h2{
    font-size:52px;
  }

  /* CTA */

  .cta-section{
    padding:90px 0;
  }

  .cta-section h2{
    font-size:40px;
  }

  /* FOOTER */

  .footer{
    padding:60px 0 0;
  }

  .footer-links-wrapper{
    grid-template-columns:1fr;

    gap:40px;
  }

  .footer-logo-image{
  width:200px;
  }

  .footer-social{
    gap:24px;
  }

}