:root {
      --c-primary:   #0b2d7a;
      --c-dark:      #071a52;
      --c-accent:    #e8304a;
      --c-gold:      #f5a623;
      --c-teal:      #00c9a7;
      --c-white:     #ffffff;
      --c-light:     #f4f7fe;
      --c-muted:     #6b7a99;
      --c-border:    #dde3f0;
      --f-display:    sans-serif;
      --f-body:      'Outfit', sans-serif;
      --nav-h:       68px;
    }



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

    #mainNav {
      top: 0;
      z-index: 1050; 
      background: transparent;
      box-shadow: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px); 
      transition: box-shadow .3s, background .3s;
      height: var(--nav-h);
      overflow: visible;
    }

    #mainNav.nav-scrolled {
      background: rgba(255,255,255,1);
      box-shadow: 0 2px 32px rgba(11,45,122,.10);
    }

    #mainNav.nav-scrolled .nav-lnk,
    #mainNav.nav-scrolled .brand-name,
    #mainNav.nav-scrolled .brand-tag,
    #mainNav.nav-scrolled .btn-phone-nav,
    #mainNav.nav-scrolled .btn-demo {
          color: #071a52;
    }

    #mainNav.nav-scrolled .btn-phone-nav :hover {
       color: white;
    }

    #mainNav .nav-lnk,
    #mainNav .brand-name,
    #mainNav .brand-tag,
    #mainNav .btn-phone-nav,
    #mainNav .btn-demo {
     color: #fff;
    } 

    #mainNav .container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between; 
      gap: 0;
      position: relative;
      right: 0;
      max-width: 100% !important;
      padding-left: 20px;
      padding-right: 20px;
    }

     .brand-wrap {
      display: flex;
      align-items: center;
      gap: 2px; 
      flex-shrink: 0;
      text-decoration: none;
      position: relative;
      right: 0;
    
    } 
    
    .brand-logo-box .dark-logo {
      width: 130px;
      height: 120px;
      object-fit: contain;
    }

    .white-logo {
     display: none;
    }

   .brand-logo-box .white-logo {
       width: 100px;
      height: 100px;
      object-fit: contain;  
    }

    #mainNav.nav-scrolled .dark-logo {
      display: none;
    }

    #mainNav.nav-scrolled .white-logo {
      display: block;
    }

     .brand-logo-box .brand-fallback {
      font-family: var(--f-display);
      font-weight: 900;
      font-size: 1.1rem;
      color: #fff;
      position: absolute;
    }  

    .brand-text-wrap {
      line-height: 1.2rem;
    }

    .navbar-collapse {
      flex-grow: 0;
    }
    .nav-list {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 8px;
      justify-content: center;
      flex: 1;
      min-width: 0; 
    }

    .nav-lnk {
      font-family: var(--f-body);
      font-weight: 600;
      font-size: 1rem;
      color: #2d3a5e;
      padding: 7px 12px;
      border-radius: 8px;
      transition: background .2s, color .2s;
      display: flex;
      align-items: center;
      gap: 5px;
      position: relative;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .nav-lnk:hover,
    .nav-lnk.active {
      background: rgba(11,45,122,.07);
      color: var(--c-primary);
    }

    .nav-lnk .dd-arrow {
      font-size: 0.6rem;
      opacity: .5;
      transition: transform .2s;
    }
    .nav-item.dropdown:hover .dd-arrow,
    .nav-item.dropdown.show .dd-arrow {
      transform: rotate(180deg);
    }

    .nav-lnk.active::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background: var(--c-accent);
      border-radius: 50%;
    }

    .dropdown-menu {
      border: 1px solid var(--c-border) !important;
      border-radius: 16px !important;
      box-shadow: 0 20px 60px rgba(11,45,122,.14) !important;
      padding: 8px !important;
      min-width: 240px;
      margin-top: 8px !important;
      animation: dropAnim .18s ease;
    }
    @keyframes dropAnim {
      from { opacity:0; transform:translateY(-8px) scale(.98); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }
    .dropdown-item {
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 0.84rem;
      font-weight: 500;
      color: #2d3a5e;
      transition: background .15s, color .15s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dropdown-item:hover {
      background: rgba(11,45,122,.07);
      color: var(--c-primary);
    }
    .dropdown-item .di-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: rgba(11,45,122,.07);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      flex-shrink: 0;
      transition: background .15s;
    }
    .dropdown-item:hover .di-icon {
      background: var(--c-primary);
      color: #fff;
    }
    .dropdown-item .di-text { display: flex; flex-direction: column; }
    .dropdown-item .di-label { font-weight: 600; font-size: 0.83rem; }
    .dropdown-item .di-sub { font-size: 0.7rem; color: var(--c-muted); font-weight: 400; margin-top: 1px; }
    .dropdown-divider { border-color: var(--c-border) !important; margin: 4px 6px !important; }

   
    .dd-viewall {
      background: rgba(11,45,122,.05) !important;
      color: var(--c-primary) !important;
      font-weight: 700 !important;
      margin-top: 2px;
    }
    .dd-viewall:hover {
      background: var(--c-primary) !important;
      color: #fff !important;
    }
    .dd-viewall .di-icon {
      background: var(--c-primary) !important;
      color: #fff !important;
    }

   
    .nav-ctas {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      margin-left: auto;
    }

    .btn-phone-nav {
      font-family: var(--f-body);
      font-weight: 700;
      font-size: 0.82rem;
      padding: 8px 16px;
      background: transparent;
      color: var(--c-primary);
      border: 1.5px solid rgba(11,45,122,.25);
      border-radius: 50px;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    
    .btn-phone-nav:hover {
      border-color: var(--c-primary); 
    }

    .btn-demo {
      font-family: var(--f-body);
      font-weight: 700;
      font-size: 0.85rem;
      padding: 9px 22px;
      background: var(--c-accent);
      color: #fff;
      border: none;
      border-radius: 50px;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
    }
    .btn-demo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    }
    .btn-demo:hover {
      background: #c7293f;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(232,48,74,.40);
    }

  
    .nav-toggler {
      border: none;
      background: transparent;
      padding: 8px;
      cursor: pointer;
      margin-left: auto;
      display: none;
    }


    .nav-toggler span {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all .3s;
    }

    #mainNav .nav-toggler span {
     background: #fff;
    }


   #mainNav.nav-scrolled .nav-toggler span {
     background: #071a52;  
   }


    .nav-toggler span:not(:last-child) { margin-bottom: 5px; }
    .nav-toggler.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggler.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-toggler.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



 
     @media (max-width: 1199.98px) {
      .btn-phone-nav { display: none; }
    }


    @media (max-width: 1200px) {
  .nav-lnk {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .btn-demo {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
}


    @media (max-width: 991.98px) {
      #mainNav {  min-height: var(--nav-h);
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              will-change: transform;
              transform: translateZ(0);
           }

      .brand-logo-box .dark-logo {
         max-height: 60px;   
      }

      #mainNav.nav-scrolled .brand-logo-box .white-logo {
        max-height: 50px;  
         
      }

      #mainNav .container {
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 12px; 
        height: auto; 
        align-items: center;
        right: 0;
      }
       .brand-wrap {
        right: 0;
      }
      .nav-toggler { display: block; }
      .navbar-collapse {
        width: 100%;
        order: 3;
        display: none;
        padding-bottom: 16px;
       background-color: #071a52; 
      }
      .navbar-collapse.open { display: block; }
      .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        justify-content: flex-start;
      }
      .nav-item { position: relative; }
      .nav-lnk {
        padding: 11px 14px;
        border-radius: 10px;
        justify-content: space-between;
      }


   .navbar-collapse.open .nav-lnk{color:#fff!important;font-size:.95rem;padding:13px 16px;border-radius:12px;} 
   .navbar-collapse.open .nav-lnk:hover,.navbar-collapse.open .nav-lnk.active{background:rgba(255,255,255,.12);}
  #mainNav.nav-scrolled .navbar-collapse.open .nav-lnk{color:#071a52!important;}
  #mainNav.nav-scrolled .navbar-collapse.open .nav-lnk:hover{background:rgba(11,45,122,.07);}
  .nav-list{flex-direction:column;align-items:stretch;gap:4px;}
  .dropdown-menu{position:static!important;transform:none!important;box-shadow:none!important;border:none!important;border-radius:12px!important;padding:4px 0 4px 12px!important;margin:4px 0!important;background:rgba(255,255,255,.08)!important;animation:none!important;}
  #mainNav.nav-scrolled .dropdown-menu{background:rgba(11,45,122,.04)!important;}
  .dropdown-item{padding:10px 14px;margin-bottom:2px;border-radius:10px;color:rgba(255,255,255,.85);}
  #mainNav.nav-scrolled .dropdown-item{color:#2d3a5e;}
  .nav-ctas{width:100%;order:4;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.15);margin-top:8px;display:none;}
  .nav-ctas.open{display:flex;}
  #mainNav.nav-scrolled .nav-ctas{border-top-color:var(--c-border);}
  .btn-phone-nav{display:inline-flex!important;flex:1;justify-content:center;color:#fff!important;border-color:rgba(255,255,255,.3)!important;}
  #mainNav.nav-scrolled .btn-phone-nav{color:var(--c-primary)!important;border-color:rgba(11,45,122,.25)!important;}
  .btn-demo{flex:1;justify-content:center;} 
  } 

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


  
  
    /* ============================================================
       FOOTER SECTION
    ============================================================ */
    #footer { 
          background: radial-gradient(ellipse 70% 60% at 10% 50%, rgba(0,90,160,0.22) 0%, transparent 70%),
                      radial-gradient(ellipse 50% 50% at 85% 20%, rgba(0,180,255,0.10) 0%, transparent 60%),
                      radial-gradient(ellipse 40% 40% at 60% 80%, rgba(0,60,120,0.18) 0%, transparent 60%),
                      linear-gradient(160deg, #010d1a 0%, #020e1e 40%, #031525 100%);
          padding: 70px 0 0;
      }

    .f-logo { height: 150px; filter: brightness(10); margin-bottom: 14px;  display: block; }
    .f-desc { font-size: 1rem; color: rgba(255,255,255,.77); line-height: 1.75; max-width: 300px; margin-bottom: 18px; }
    .f-soc { display: flex; gap: 9px; }
    .fsoc-btn {
      width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.07);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.82rem; color: rgba(255,255,255,.6); transition: all .2s;
    }
    /* .fsoc-btn:hover { background: var(--c-accent); color: #fff; } */
    .f-head { font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
    .f-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
    .f-links a { font-size: 0.9rem; color: rgba(255,255,255,.77); transition: all .2s; display: flex; align-items: center; gap: 6px; }
    .f-links a:hover { color: var(--c-gold); transform: translateX(4px); }
    .f-con { display: flex; flex-direction: column; gap: 13px; }
    .f-con-item { display: flex; gap: 11px; font-size: 0.84rem; color: rgba(255,255,255,.5); }
    .f-con-item i { color: var(--c-gold); flex-shrink: 0; margin-top: 2px; }
    .f-con-item strong { color: rgba(255, 255, 255, 0.9); display: block; margin-bottom: 1px; font-size: 1rem;}
    .f-bottom { border-top: 1px solid rgba(255,255,255,.07); margin-top: 50px; padding: 18px 0; font-size: 1rem; color: rgba(255,255,255,.77); text-align: center; }

/*     
    .fa-instagram {
  background: linear-gradient(45deg,#feda75,#d62976,#962fbf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

.fa-facebook-f {
  color: #1877F2;
}

.fa-youtube {
  color: #FF0000;
}

.fa-whatsapp {
  color: #25D366;
}

.fa-instagram {
  color: #E4405F;
}

.fa-linkedin-in {
  color: #0A66C2;
}
.fsoc-btn i {
  font-size: 20px;
  transition: 0.2s;
}

.fsoc-btn:hover i {
  transform: scale(1.1);
}