/* ===================== HEADER ===================== */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:900;
  height:var(--nav-h);

  background:transparent !important;   /* force remove white */
  box-shadow:none !important;

  transition:all .35s ease;
}

/* 🔵 DEFAULT (HERO PE - DARK BG) */
header:not(.scrolled) .nav-link,
header:not(.scrolled) .logo-name{
  color:#fff !important;
}

header:not(.scrolled) .nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,0.12);
}

/* ⚪ SCROLL STATE */
header.scrolled{
  background:rgba(255,255,255,0.97) !important;
  box-shadow:0 1px 0 var(--border);
  backdrop-filter:blur(14px);
}

header.scrolled .nav-link,
header.scrolled .logo-name{
  color:#0D1B3E !important;
}

header.scrolled .nav-link:hover{
  background:var(--blue-xl);
  color:var(--blue);
}

/* FORCE DEFAULT HEADER TEXT VISIBLE */
header:not(.scrolled) .nav-link,
header:not(.scrolled) .logo-name,
header:not(.scrolled) .nav-cta{
  color:#fff !important;
  opacity:1 !important;
}

/* FIX BUTTON VISIBILITY */
header:not(.scrolled) .nav-cta{
  background:var(--accent) !important;
  color:#fff !important;
}

nav{
  max-width:var(--max);margin:auto;
  padding:0 24px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s} 
/* // background:var(--blue) */
.logo:hover .logo-mark{transform:rotate(-8deg)}
/* .logo-mark svg{width:22px;height:22px;fill:#fff} */
.logo-name{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--blue)}
header.scrolled .logo-name{color:var(--blue)}
/* header:not(.scrolled) .logo-name{color:#fff}
header:not(.scrolled) .logo-mark{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)} */
.logo-name span{color:var(--accent)}

/* Nav links */
.nav-center{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{
  font-size:14px;font-weight:600;
  color:var(--text);text-decoration:none;
  padding:8px 12px;border-radius:8px;
  display:flex;align-items:center;gap:4px;
  transition:all .18s;white-space:nowrap;cursor:pointer;
  border:none;background:none;font-family:'Plus Jakarta Sans',sans-serif;
}
header:not(.scrolled) .nav-link{color:rgba(255,255,255,.9)}
header:not(.scrolled) .nav-link:hover{color:#fff;background:rgba(255,255,255,.12)}
header.scrolled .nav-link:hover{background:var(--blue-xl);color:var(--blue)}
.nav-link svg.arr{width:12px;height:12px;transition:transform .2s}
.nav-item:hover .nav-link svg.arr{transform:rotate(180deg)}
.nav-cta{
  background:var(--accent);color:#fff!important;
  padding:10px 20px!important;border-radius:10px!important;
  font-weight:800!important;transition:all .2s!important;
  flex-shrink:0;
}
.nav-cta:hover{background:var(--accent-d)!important;transform:translateY(-1px)!important}
header:not(.scrolled) .nav-cta{background:var(--accent)!important}

/* Dropdown */
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top: 12px;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(20,85,192,.12);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .22s;transform-origin:top center;
  transform:translateX(-50%) translateY(-6px);
  min-width:220px;padding:8px;z-index:200;
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0)}
.dropdown-wide{min-width:680px}
.drop-link{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:10px;text-decoration:none;
  transition:background .15s;
}
.drop-link:hover{background:var(--blue-xl)}
.drop-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--blue-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.drop-icon svg{width:16px;height:16px;fill:var(--blue)}
.drop-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px;line-height:1.2}
.drop-sub{font-size:11px;color:var(--muted);line-height:1.4}
.dropdown-wide .drop-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:8px}
.drop-col-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:8px 12px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.drop-product{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  text-decoration:none;transition:all .18s;
}
.drop-product:hover{background:var(--blue-xl)}
.drop-product-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.drop-product-name{font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px}
.drop-product-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 10px;cursor:pointer;color:#fff}
header.scrolled .nav-toggle{border-color:var(--border);color:var(--text)}
.mobile-nav{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:#fff;border-bottom:1px solid var(--border);
  padding:12px 20px 20px;z-index:899;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
}
.mobile-nav.open{display:block}
.m-section{border-bottom:1px solid var(--border);padding:10px 0}
.m-section:last-child{border:none}
.m-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:8px 0 4px}
.m-link{display:block;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;padding:9px 10px;border-radius:8px}
.m-link:hover{background:var(--blue-xl);color:var(--blue)}
.m-cta{display:block;background:var(--accent);color:#fff;text-align:center;border-radius:10px;padding:12px;font-weight:800;text-decoration:none;margin-top:12px}
.ctr{max-width:var(--max);margin:auto;padding:0 24px}

/* DEFAULT STATE FIX */
header{
  background: transparent !important;
}

/* FORCE TEXT VISIBLE */
header:not(.scrolled) .nav-link,
header:not(.scrolled) .logo-name{
  color:#fff !important;
}

/* SCROLL STATE */
header.scrolled{
  background:#fff !important;
}

header.scrolled .nav-link,
header.scrolled .logo-name{
  color:#0D1B3E !important;
}

/* Logo container */
.logo{
  display:flex;
  align-items:center;
  gap:20px;
  text-decoration:none;
}

/* Logo image */
.logo-img{
    height: 70px;
    width: auto;
    object-fit: contain;
    transition: all .3s ease;
    margin-right: 120px;
}

.logo-img-footer{
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: all .3s ease;
    margin-right: 120px;
}


/* Default (hero / transparent header) */
header:not(.scrolled) .logo-img{
  filter: brightness(0) invert(1); /* white logo */
}

/* Scroll state (white header) */
header.scrolled .logo-img{
  filter: none; /* normal color logo */
}

/* Logo text (if using text) */
.logo-name{
  font-weight:700;
  font-size:18px;
  letter-spacing:.3px;
  transition:.3s;
}

/* Default text color */
header:not(.scrolled) .logo-name{
  color:#fff;
}

/* Scroll text color */
header.scrolled .logo-name{
  color:#0D1B3E;
}

/* Optional hover effect */
.logo:hover .logo-img{
  transform:scale(1.05);
}

/* Footer icon */

.f-soc {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #0f172a;
  transition: 0.3s ease;
}

.f-soc i {
  font-size: 16px;
  color: #fff;
}

/* Hover Effects */
.f-soc:hover {
  transform: translateY(-5px) scale(1.1);
}

/* Brand Colors */
.f-soc.insta:hover {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497, #fd5949, #d6249f, #285AEB);
}

.f-soc.yt:hover {
  background: #ff0000;
}

.f-soc.wa:hover {
  background: #25D366;
}

.f-soc.tg:hover {
  background: #0088cc;
}

.f-soc.li:hover {
  background: #0A66C2;
}

.f-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.f-ci {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

  transition: 0.3s ease;
}

.f-ci i {
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
}

/* Text */
.f-ct {
  color: #ccc;
  font-size: 14px;
}

.f-ct a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.f-ct a:hover {
  color: #fff;
}

/* Hover Effect */
.f-contact:hover .f-ci {
  transform: scale(1.1);
  background: #2563eb;
  box-shadow: 0 0 10px rgba(37,99,235,0.4);
}