/* =========================
   GLOBAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:#ffffff;
  color:#0F172A;
  overflow-x:hidden;
}

.container{
  max-width:1280px;
  margin:auto;
  padding:0 24px;
}

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

.header{
  position:sticky;
  top:0;
  z-index:1000;

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

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(226,232,240,0.8);

  box-shadow:
  0 4px 20px rgba(15,23,42,0.05);
}

.navbar{
  min-height:84px;

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

  gap:20px;

  position:relative;
}

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

.logo-wrap{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;

  z-index:1002;
}

.logo-img{
  width:56px;
  height:56px;

  border-radius:50%;
  object-fit:cover;

  border:3px solid #ef233c;

  background:#fff;

  box-shadow:
  0 10px 25px rgba(239,35,60,0.20);
}

.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.logo-text h2{
  font-size:1.8rem;
  font-weight:800;
  color:#111827;
}

.logo-text h2 span{
  color:#ef233c;
}

.logo-text p{
  font-size:0.68rem;
  letter-spacing:3px;
  color:#64748B;
  margin-top:5px;
}

/* =========================
   NAVIGATION
========================= */

.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-links a{
  text-decoration:none;
  color:#475569;

  font-size:0.95rem;
  font-weight:500;

  padding:12px 15px;
  border-radius:14px;

  transition:0.3s ease;
}

.nav-links a:hover{
  background:#F8FAFC;
  color:#ef233c;
}

.nav-links a.active{
  background:#fff1f2;
  color:#ef233c;
}

/* =========================
   DROPDOWN
========================= */

.dropdown{
  position:relative;
}

.dropdown-btn{
  border:none;
  background:none;

  font-family:'Inter',sans-serif;

  font-size:0.95rem;
  font-weight:500;

  color:#475569;

  display:flex;
  align-items:center;
  gap:6px;

  padding:12px 15px;

  border-radius:14px;

  cursor:pointer;
}

.dropdown-btn:hover{
  background:#F8FAFC;
  color:#ef233c;
}

.dropdown-content{
  position:absolute;

  top:58px;
  left:0;

  width:260px;

  background:#fff;

  border-radius:20px;

  padding:12px;

  box-shadow:
  0 18px 40px rgba(15,23,42,0.08);

  border:1px solid #E2E8F0;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:0.3s ease;
}
/* DESKTOP DROPDOWN */

@media(min-width:993px){

  .dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

}

.dropdown-content a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px;
}

.dropdown-content a i{
  color:#ef233c;
}

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

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}


.btn-primary{
  background:
  linear-gradient(
    135deg,
    #ef233c,
    #991b1b
  );

  color:#1d1a1a !important;

  padding:13px 24px !important;

  border-radius:999px;

  font-weight:600;

  text-decoration:none;

  box-shadow:
  0 10px 25px rgba(239,35,60,0.25);
}

.btn-outline{
  border:1px solid #CBD5E1;

  padding:12px 20px !important;

  border-radius:999px;

  display:flex;
  align-items:center;
  gap:8px;
}

/* =========================
   MOBILE TOGGLE
========================= */

.menu-toggle{ width:50px; height:50px; border-radius:16px; background:#f8fafc; border:1px solid rgba(0,0,0,0.06); display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; z-index:2000; position:relative; box-shadow: 0 8px 25px rgba(0,0,0,0.06); }

.menu-toggle span{ width:24px; height:2.5px; background:#111827; border-radius:20px; transition:.35s ease; display:block; }

/* TOGGLE ANIMATION */
@media(max-width:992px){ .menu-toggle{ display:flex; } }


/* =========================
   TOGGLE ANIMATION
========================= */

.menu-toggle.open span:nth-child(1){

  transform:
  translateY(7px)
  rotate(45deg);

}

.menu-toggle.open span:nth-child(2){

  opacity:0;

}

.menu-toggle.open span:nth-child(3){

  transform:
  translateY(-8px)
  rotate(-45deg);

}



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

/* =========================
   MOBILE MEGA MENU FIX
========================= */

@media(max-width:992px){

  .mega-dropdown{
    width:100%;
  }

  .mega-menu{

    position:static;

    width:100% !important;
    max-width:100%;

    left:0;
    top:0;

    transform:none !important;

    opacity:1;
    visibility:visible;

    display:none;

    grid-template-columns:1fr;

    gap:18px;

    padding:18px;

    margin-top:14px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #E2E8F0;

    box-shadow:none;

    overflow:hidden;
  }

  /* OPEN MENU */

  .mega-dropdown.active .mega-menu{
    display:grid;
  }

  /* COLUMN */

  .mega-column{

    width:100%;

    padding:18px;

    border-radius:18px;

    background:#F8FAFC;

    border:1px solid rgba(0,0,0,0.05);
  }

  .mega-column h3{

    font-size:18px;

    margin-bottom:15px;

    line-height:1.4;
  }

  .mega-column a{

    display:block;

    width:100%;

    padding:10px 0;

    font-size:15px;

    line-height:1.5;

    word-break:break-word;
  }

}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:576px){

  .container{
    padding:0 16px;
  }

  .navbar{
    min-height:76px;
  }

  .logo-img{
    width:48px;
    height:48px;
  }

  .logo-text h2{
    font-size:1.35rem;
  }

  .logo-text p{
    font-size:0.55rem;
    letter-spacing:2px;
  }

  .nav-links{
    top:76px;
    padding:20px;
  }

}

/* FIX MOBILE MENU */

@media(max-width:992px){

  .nav-links{
    position:fixed;

    top:84px;
    left:0;

    width:100%;

    height:calc(100vh - 84px);

    overflow-y:auto;

    background:#ffffff;

    flex-direction:column;
    align-items:flex-start;

    padding:24px;

    gap:6px;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:translateY(-20px);

    transition:0.35s ease;

    z-index:999;
  }

  .nav-links.active{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);
  }

}

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

.mega-dropdown{
  position:relative;
}

/* MEGA MENU BOX */

.mega-menu{

  position:absolute;

  top:70px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(20px);

  width:1000px;

  background:#ffffff;

  border-radius:30px;

  padding:40px;

  display:grid;

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

  gap:35px;

  border:1px solid #E2E8F0;

  box-shadow:
  0 30px 80px rgba(15,23,42,0.10);

  opacity:0;
  visibility:hidden;

  transition:.35s ease;

  z-index:999;
}

/* SHOW MENU */

.mega-dropdown:hover .mega-menu{

  opacity:1;
  visibility:visible;

  transform:
  translateX(-50%)
  translateY(0);

}

/* COLUMN */

.mega-column h3{

  font-size:18px;

  margin-bottom:18px;

  color:#111827;

  display:flex;
  align-items:center;
  gap:10px;
}

.mega-column h3 i{
  color:#ef233c;
  font-size:20px;
}

/* LINKS */

.mega-column a{

  display:block;

  text-decoration:none;

  color:#64748B;

  padding:10px 0;

  transition:.3s ease;

  font-size:15px;
}

.mega-column a:hover{
  color:#ef233c;
  transform:translateX(6px);
}

/* =========================
   MOBILE
========================= */

@media(max-width:992px){

  .mega-menu{

    position:static;

    width:100%;

    transform:none;

    opacity:1;
    visibility:visible;

    display:none;

    grid-template-columns:1fr;

    padding:20px;

    margin-top:10px;

    box-shadow:none;

    border:1px solid #E2E8F0;
  }

  .mega-dropdown.active .mega-menu{
    display:grid;
  }

}