/* ================= GLOBAL FIX ================= */
body{
    overflow-x:hidden;
    font-family:'Poppins', sans-serif;
}

html{
    width: 100%;
}
/* ================= TOP BAR ================= */
.top-bar{
    background:#0b1220;
    color:#fff;
    font-size:14px;
    padding:8px 0;
    transition:0.3s;
}

.top-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-left span{
    margin-right:10px;
    opacity:0.9;
}

.top-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.top-btn{
    background:#1ca244;
    padding:5px 12px;
    border-radius:4px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
}

.social a{
    color:#fff;
    margin:0 5px;
    font-size:13px;
    text-decoration:none;
}

/* hide topbar on scroll */
.hide-topbar{
    transform:translateY(-100%);
    height:0;
    overflow:hidden;
}

@media (max-width: 768px) {

  .top-wrap{
    flex-direction: column;
    gap:6px;
    text-align:center;
  }

  .top-left,
  .top-right{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  .top-left span{
    font-size:12px;
    margin:0;
  }

  .top-right{
    gap:10px;
  }

  .top-btn{
    font-size:12px;
    padding:4px 10px;
  }

  .social a{
    font-size:12px;
  }
}

/* ================= HEADER ================= */
.main-header{
    background:#fff;
    border-bottom:1px solid #eee;
    position:sticky;
    top:0;
    z-index:9999;
}

.header-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 25px; /* FIX spacing */
}

/* LOGO FIX */
.logo img{
    height:50px;
    display:block;
}

/* ================= NAV ================= */
.nav-menu ul{
    display:flex;
    gap:28px;
    list-style:none;
    align-items:center;
    margin:0;
    padding:0;
}

.nav-menu a{
    text-decoration:none;
    color:#000;
    font-weight:500;
    position:relative;
    font-size:14px;
}

.nav-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:#1c836b;
    transition:.3s;
}

.nav-menu a:hover::after{
    width:100%;
}

/* ================= BUTTON FIX ================= */
.header-btn{
    margin-left:15px;
}

.btn-primary{
    padding:10px 16px;
    background:#1c836b;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
}

/* ================= MEGA MENU ================= */
.mega-parent{
    position:static;
}

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(15px);

    width:1100px;
    max-width:95vw;

    background:#fff;
    display:flex;

    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;
    overflow:hidden;
    z-index:999;
}

.mega-parent:hover .mega-menu,
.mega-parent.active .mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

/* LEFT */
.mega-left{
    width:260px;
    background:#f5f7fb;
    padding:20px;
    border-right:1px solid #eee;
}

.mega-left ul{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0;
    margin:0;
}

.mega-left li{
    padding:10px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.mega-left li.active,
.mega-left li:hover{
    background:#1c836b;
    color:#fff;
}

/* RIGHT */
.mega-right{
    flex:1;
    padding:25px 30px;
}

.mega-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.mega-card{
    border:1px solid #eee;
    padding:15px;
    border-radius:10px;
    transition:.3s;
    cursor:pointer;
}

.mega-card:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    transform:translateY(-3px);
}

/* TAB */
.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

/* ================= MOBILE ================= */
.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
}

/* HIDE DESKTOP NAV */
@media(max-width:991px){
    .nav-menu{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .header-btn{
        display:none;
    }
}

/* ================= MOBILE DRAWER ================= */
.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:100%;
    height:100vh;
    background:#fff;
    transition:0.3s ease;
    z-index:9999;
    overflow-y:auto;
}

.mobile-menu.active{
    right:0;
}

.mobile-title,
.sub-title{
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    padding:15px;
    background:#f5f5f5;
    margin-bottom:5px;
}

.sub-content{
    display:none;
    padding:10px 15px;
}

.mobile-sub-item.open .sub-content{
    display:block;
}


.mega-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    background:#f9fafb;
    border-radius:10px;
    border:1px solid #eee;
    transition:0.3s;
    cursor:pointer;
}

.mega-card img{
    width:28px;
    height:28px;
    object-fit:contain;
}

.mega-card span{
    font-size:14px;
    font-weight:500;
}

.mega-card:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-2px);
}

.mega-card:hover span{
    color:#fff;
}

.mega-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}


.mobile-sub {
  display: none;
  flex-direction: column;
  padding-left: 15px;
}

.mobile-item.open .mobile-sub {
  display: flex;
}

.mobile-link {
  padding: 10px 0;
  text-decoration: none;
  color: #222;
  font-size: 15px;
  border-bottom: 1px solid #eee;
}

.mobile-link:hover {
  color: #1ca244;
}

.iti {
    margin-bottom: 12px!important;
}

/* ===== SUB MENU CLEAN BLACK STYLE ===== */

.mobile-sub,
.sub-content {
  display: none;
  padding: 10px 0;
  margin-top: 5px;
  border-radius: 6px;
}

/* open state */
.mobile-item.open .mobile-sub {
  display: block;
}

.mobile-sub-item.open .sub-content {
  display: block;
}

/* links styling */
.sub-content a {
  display: block;          /* IMPORTANT: vertical line */
  padding: 10px 15px;
  color: #000;             /* white text */
  text-decoration: none;   /* remove underline */
  font-size: 14px;
  transition: 0.3s;
}

/* hover effect */
.sub-content a:hover {
  background: #1ca244;     /* green highlight */
  color: #fff;
}

/* spacing fix */
.mobile-sub-item {
  margin-bottom: 5px;
}

a.mobile-title{
    color: #000;
    text-decoration: none;
}

.mega-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:20px;
  cursor:pointer;
  color:#fff;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,0.4);
  transition:0.3s;
}

.mega-close:hover{
  background:#1ca244;
  transform:rotate(90deg);
}