:root {
   --primary: #0b6bcb;
   --primary-dark: #07539f;
   --dark: #102033;
   --text: #526174;
   --muted: #7d8a99;
   --light: #f5f8fb;
   --border: #e7edf3;
   --white: #ffffff;
   --radius: 16px;
   --transition: 0.3s ease;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--white);
   color: var(--text);
   font-family: "DM Sans", sans-serif;
   line-height: 1.7;
   font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--dark);
   font-family: "Manrope", sans-serif;
   font-weight: 700;
   line-height: 1.2;
}

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

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

.site-navbar {
   position: sticky;
   top: 0;
   z-index: 1000;
   min-height: 78px;
   background: rgba(255, 255, 255, 0.96);
   border-bottom: 1px solid transparent;
   transition: var(--transition);
   padding: 20px 0;

}

.site-navbar.navbar-scrolled {
   background: rgba(255, 255, 255, 0.98);
   border-bottom-color: var(--border);
   box-shadow: 0 8px 30px rgba(16, 32, 51, 0.07);
}

.navbar-brand,
.footer-logo {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: var(--dark);
   font-size: 20px;
   font-weight: 800;
   letter-spacing: -0.5px;
}

.navbar-brand:hover,
.footer-logo:hover {
   color: var(--dark);
}

.navbar-brand img,
.footer-logo img {
   width: auto;
   max-width: 145px;
   max-height: 42px;
   object-fit: contain;
}

.brand-mark {
   display: grid;
   width: 36px;
   height: 36px;
   place-items: center;
   background: var(--primary);
   border-radius: 10px;
   color: var(--white);
   font-size: 17px;
   font-weight: 800;
}


.navbar-close-icon {
   display: none;
}
.navbar-toggler.menu-open .navbar-menu-icon {
   display: none;
}
.navbar-toggler.menu-open .navbar-close-icon {
   display: inline-block;
}

.navbar-nav {
   gap: 5px;
}

.nav-link {
   position: relative;
   padding: 9px 14px !important;
   color: #536274 !important;
   font-size: 14px;
   font-weight: 600;
   transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
   color: var(--primary) !important;
}

.nav-link::after {
   position: absolute;
   right: 14px;
   bottom: 2px;
   left: 14px;
   height: 2px;
   background: var(--primary);
   border-radius: 10px;
   content: "";
   opacity: 0;
   transform: scaleX(0.4);
   transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
   opacity: 1;
   transform: scaleX(1);
}

.navbar-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 18px;
   background: var(--primary);
   border-radius: 10px;
   color: var(--white);
   font-size: 14px;
   font-weight: 700;
   transition: var(--transition);
}

.navbar-cta:hover {
   background: var(--primary-dark);
   color: var(--white);
   transform: translateY(-2px);
}

.navbar-toggler {
   padding: 7px 9px;
   border: 1px solid var(--border);
   border-radius: 9px;
   color: var(--dark);
   font-size: 22px;
}

.navbar-toggler:focus {
   box-shadow: none;
}

.mobile-navbar-contact {
   display: none;
}

@media(max-width:991.98px) {
   .mobile-navbar-contact {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 24px 0;
      padding: 18px;
      background: #f5f8fb;
      border: 1px solid #e7edf3;
      border-radius: 14px;
   }

   .mobile-navbar-contact h4 {
      margin: 0 0 6px;
      color: #102033;
      font-family: Manrope, sans-serif;
      font-size: 16px;
      font-weight: 700;
   }

   .mobile-navbar-contact h4::after {
      content: "";
      display: block;
      width: 28px;
      height: 3px;
      margin-top: 8px;
      background: #0b6bcb;
      border-radius: 3px;
   }

   .mobile-navbar-contact a,
   .mobile-navbar-contact span {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 42px;
      padding: 8px 10px;
      color: #526174;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      text-decoration: none;
      background: #fff;
      border: 1px solid #e7edf3;
      border-radius: 10px;
      transition: .3s ease;
   }

   .mobile-navbar-contact a:hover {
      color: #0b6bcb;
      border-color: #cddbea;
      transform: translateX(2px);
   }

   .mobile-navbar-contact i {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0b6bcb;
      background: #e8f2fc;
      border-radius: 9px;
      font-size: 16px;
   }

   .mobile-navbar-contact a:hover i {
      background: #0b6bcb;
      color: #fff;
   }
}


@media (max-width: 991px) {
   body.nav-open {
      overflow-y: hidden !important;
   }

   .site-navbar .navbar-collapse {
      position: fixed;
      top: 0;
      left: 0;
      width: 87%;
      height: 100vh;
      z-index: 1050;
      padding: 100px 30px 40px;
      background: var(--white);
      box-shadow: 12px 0 35px rgba(16, 32, 51, 0.12);
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 0.3s ease, visibility 0.3s ease;
      overflow-y: auto;
   }

   .site-navbar .navbar-collapse.show {
      transform: translateX(0);
      visibility: visible;
   }

   .site-navbar .navbar-nav {
      align-items: flex-start;
      flex-direction: column;
      width: 100%;
      margin: 0 !important;
   }

   .site-navbar .nav-item {
      width: 100%;
   }

   .site-navbar .nav-link {
      display: block;
      width: 100%;
      padding: 15px 5px !important;
      border-bottom: 1px solid var(--border);
      font-size: 16px;
   }

   .site-navbar .navbar-actions {
      margin-top: 25px;
   }

   .site-navbar .navbar-cta {
      display: inline-flex;
   }

   .site-navbar .navbar-toggler {
      position: relative;
      z-index: 1060;
      border: 0;
      padding: 8px;
      color: var(--dark);
      font-size: 26px;
      box-shadow: none !important;
   }
}


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

.site-footer {
   padding: 75px 0 0;
   background: #0c1b2b;
   color: #aab7c6;
}

.footer-main {
   display: grid;
   grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
   gap: 60px;
   padding-bottom: 60px;
   padding-left: 10px;
}

.footer-brand p {
   max-width: 340px;
   margin: 22px 0 25px;
   color: #91a0b1;
   font-size: 14px;
   line-height: 1.8;
}

.footer-logo {
   color: var(--white);
}

.footer-logo:hover {
   color: var(--white);
}

.footer-socials {
   display: flex;
   gap: 9px;
}

.footer-socials a {
   display: grid;
   width: 38px;
   height: 38px;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   color: #aab7c6;
   font-size: 14px;
   transition: var(--transition);
}

.footer-socials a:hover {
   background: var(--primary);
   border-color: var(--primary);
   color: var(--white);
   transform: translateY(-2px);
}

.footer-column {
   display: flex;
   flex-direction: column;
   gap: 13px;
}

.footer-column h4 {
   margin: 0 0 10px;
   color: var(--white);
   font-size: 14px;
   font-weight: 700;
}

.footer-column a,
.footer-column span {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #91a0b1;
   font-size: 14px;
   transition: var(--transition);
}

.footer-column a:hover {
   color: var(--white);
   transform: translateX(3px);
}

.footer-contact a i,
.footer-contact span i {
   width: 16px;
   color: var(--primary);
}

.footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 22px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   color: #718092;
   font-size: 14px;
}

.footer-bottom div {
   display: flex;
   gap: 22px;
}

.footer-bottom a {
   color: #718092;
   transition: var(--transition);
}

.footer-bottom a:hover {
   color: var(--white);
}


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

@media (max-width: 991px) {
   .site-navbar {
      min-height: 70px;
   }

   .navbar-collapse {
      padding: 18px 0 8px;
   }

   .navbar-nav {
      gap: 2px;
   }

   .nav-link {
      padding: 11px 0 !important;
   }

   .nav-link::after {
      display: none;
   }

   .navbar-actions {
      margin-top: 12px;
   }

   .navbar-cta {
      justify-content: center;
      width: 100%;
   }

   .footer-main {
      grid-template-columns: repeat(2, 1fr);
      gap: 45px 35px;
   }
}

@media (max-width: 575px) {
   .site-footer {
      padding-top: 55px;
   }

   .footer-main {
      grid-template-columns: 1fr;
      gap: 35px;
      padding-bottom: 40px;
   }

   .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
   }

   .footer-bottom div {
      flex-wrap: wrap;
      gap: 15px;
   }
}