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

body{
  font-family:'Inter',sans-serif;
  background:#f5f7fb;
  padding-bottom:80px;

}

a{
  text-decoration:none;
}

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

    .top-header{
      background:rgba(255,255,255,0.85);

      backdrop-filter:blur(14px);
      border-bottom:1px solid #e9ecef;
/*      position:sticky;
      top:0;
      z-index:999;
*/  }

      .logo{
        font-size:26px;
        font-weight:700;
        color:#111827;
      }

      .search-box{
        position:relative;
        width:100%;
        max-width:550px;
      }

      .search-box input{
        width:100%;
        border:none;
        padding:14px 20px 14px 48px;
        border-radius:50px;
        outline:none;
        font-size:14px;
      }

      .search-box i{
        position:absolute;
        left:18px;
        top:50%;
        transform:translateY(-50%);
        color:#64748b;
      }

      .header-icons{
        display:flex;
        align-items:center;
        gap:18px;
      }

      .header-icons i{
        font-size:20px;
        cursor:pointer;
        color:#334155;
        transition:0.3s;
      }

      .header-icons i:hover{
        color:#6366f1;
        transform:translateY(-2px);
      }

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

    .main-navbar{
      background:#fff;
      border-bottom:1px solid #edf2f7;
      position:relative;


/*
      max-height:80px;
      opacity:1;*/

      transition:
      max-height .4s cubic-bezier(.22,1,.36,1),
      opacity .3s ease,
      padding .3s ease;
    }
    .main-navbar.nav-hidden .navbar-inner{

      max-height:0;

      opacity:0;

    }
    .navbar-inner{

      overflow:visible;

      max-height:80px;

      opacity:1;

      transition:
      max-height .4s cubic-bezier(.22,1,.36,1),
      opacity .3s ease;

    }
    .desktop-header{
      position:sticky;

      top:0;

      z-index:9999;

      background:#fff;

    }
    .nav-link-custom{
      padding:20px 18px;
      color:#334155;
      font-weight:500;
      display:block;
      transition:0.3s;
    }

    .nav-link-custom:hover{
      color:#6366f1;
    }

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

    .mega-menu{

      position:absolute;

      top:100%;

      left:0;

      width:100%;

      background:#fff;

      border-top:1px solid #eee;

      padding:35px;

      opacity:0;
      visibility:hidden;
      transform:translateY(10px);

      transition:
      all .35s cubic-bezier(.22,1,.36,1);


      z-index:999;

      box-shadow:0 20px 40px rgba(0,0,0,0.08);

    }
    .mega-menu .row{
      row-gap:24px;
    }
    .mega-wrapper{
      position:relative;
    }
    .mega-wrapper:hover .mega-menu{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .mega-menu h6{
      font-weight:700;
      margin-bottom:18px;
    }

    .mega-menu a{
      display:block;
      padding:8px 0;
      color:#64748b;
    }

    .mega-menu a:hover{
      color:#6366f1;
    }

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

    .mobile-header{
      display:none;
      position:sticky;
      top:0;
      z-index:999;
      background:#fff;
      border-bottom:1px solid #eee;
      padding:14px 16px;
    }

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

    .mobile-menu-btn{
      width:42px;
      height:42px;
      border-radius:12px;
      background:#f1f5f9;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      cursor:pointer;
    }

    /* =========================
        SIDEBAR
    ========================== */

    .mobile-sidebar{
      position:fixed;
      top:0;
      left:-300px;
      width:280px;
      height:100%;
      background:#fff;
      z-index:2000;
      transition:left .4s cubic-bezier(.22,1,.36,1);
      padding:24px;
      overflow-y:auto;
    }

    .mobile-sidebar.active{
      left:0;
    }

    .sidebar-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.4);
      z-index:1500;
      display:none;
    }

    .sidebar-overlay.active{
      display:block;
    }

    .sidebar-link{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 0;
      color:#334155;
      border-bottom:1px solid #f1f5f9;
    }

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

    .bottom-navbar{
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      background:#fff;
      border-top:1px solid #e2e8f0;
      display:none;
      justify-content:space-around;
      align-items:center;
      padding:12px 0;
      z-index:999;
    }

    .bottom-navbar a{
      color:#334155;
      font-size:22px;
    }

    .bottom-navbar a.active{
      color:#6366f1;
    }

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

    @media(max-width:991px){

      .desktop-header{
        display:none;
      }

      .mobile-header{
        display:block;
      }

      .bottom-navbar{
        display:flex;
      }

    }

/* =========================
    MOBILE CATEGORY DROPDOWN
========================== */

.category-toggle{
  justify-content:space-between;
  cursor:pointer;
}

.category-dropdown{
  display:none;
  padding-left:38px;
  padding-bottom:10px;
}

.category-dropdown a{
  display:block;
  padding:10px 0;
  color:#64748b;
  font-size:14px;
  transition:0.3s;
}

.category-dropdown a:hover{
  color:#6366f1;
}

.toggle-icon{
  transition:0.3s;
}

.toggle-icon.rotate{
  transform:rotate(180deg);
}

/* =========================
    MOBILE SEARCH OVERLAY
========================== */

.mobile-search-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(14px);

  z-index:3000;

  opacity:0;
  visibility:hidden;

  transition:
  opacity .35s cubic-bezier(.22,1,.36,1),
  visibility .35s cubic-bezier(.22,1,.36,1);
}

.mobile-search-overlay.active{
  opacity:1;
  visibility:visible;
}

.mobile-search-box{
  transform:translateY(40px);
  transition:0.4s cubic-bezier(.22,1,.36,1);
}

.mobile-search-overlay.active .mobile-search-box{
  transform:translateY(0);
}

.search-header{
  display:flex;
  align-items:center;
  gap:12px;

  padding:20px;
}

.search-input-wrapper{
  flex:1;
  position:relative;
}

.search-input-wrapper i{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
}

.search-input-wrapper input{
  width:100%;
  height:58px;

  border:none;
  outline:none;

  padding:0 20px 0 48px;

  border-radius:18px;

  background:#f1f5f9;

  font-size:15px;
}

.close-search{
  width:50px;
  height:50px;

  border:none;

  border-radius:16px;

  background:#f1f5f9;

  font-size:18px;
}

.search-content{
  padding:0 20px 40px;
}

.search-section h6{
  margin-bottom:16px;
  font-weight:700;
}

.search-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.search-tags span{
  padding:10px 16px;
  background:#f1f5f9;
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
  transition:0.3s;
}

.search-tags span:hover{
  background:#6366f1;
  color:#fff;
}

.trending-list{
  display:flex;
  flex-direction:column;
}

.trending-list a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px 0;

  color:#334155;

  border-bottom:1px solid #f1f5f9;
}

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

.dropdown-wrapper{
  position:relative;
}

.small-dropdown{

  position:absolute;

  top:100%;

  left:0;

  min-width:240px;

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

  backdrop-filter:blur(20px);

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

  border:1px solid rgba(255,255,255,0.4);

  border-radius:20px;

  padding:12px;

  opacity:0;

  visibility:hidden;

  transform:translateY(10px);

  transition:
  all .35s cubic-bezier(.22,1,.36,1);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.08);

  z-index:999;

}

.dropdown-wrapper:hover .small-dropdown{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

}

.small-dropdown a{

  display:block;

  padding:12px 16px;

  border-radius:12px;

  color:#334155;

  transition:
  all .25s ease;

}

.small-dropdown a:hover{

  background:#f1f5f9;

  color:#6366f1;

  transform:translateX(4px);

}

/* ========================================
   MOBILE MEGA MENU GROUPS
======================================== */

.mobile-menu-group{

  padding:18px 0;

  border-bottom:1px solid #f1f5f9;

}

.mobile-menu-group:last-child{
  border-bottom:none;
}

.mobile-menu-group h6{

  font-size:13px;

  text-transform:uppercase;

  letter-spacing:0.5px;

  color:#94a3b8;

  margin-bottom:12px;

  font-weight:700;

}

.mobile-menu-group a{

  display:block;

  padding:10px 0;

  color:#334155;

  font-size:15px;

  transition:
  all .25s ease;

}

.mobile-menu-group a:hover{

  color:#6366f1;

  transform:translateX(4px);

}
/* ========================================
   SIMPLE MOBILE DROPDOWN
======================================== */

.simple-dropdown{

  padding-top:10px;

}

.simple-dropdown a{

  display:block;

  padding:12px 0 12px 38px;

  color:#334155;

  font-size:15px;

  border-bottom:1px solid #f8fafc;

  transition:
  all .25s ease;

}

.simple-dropdown a:hover{

  color:#6366f1;

  transform:translateX(4px);

}
/* =========================
    Other Effects
========================== */

.nav-link-custom{
  position:relative;
}

.nav-link-custom::after{
  content:'';
  position:absolute;
  bottom:10px;
  left:18px;
  width:0;
  height:2px;
  background:#6366f1;
  transition:0.3s;
}

.nav-link-custom:hover::after{
  width:60%;
}
.search-box input:focus{
  background:#fff;
  box-shadow:0 0 0 4px rgba(99,102,241,0.1);
}
.mobile-sidebar{
  box-shadow:20px 0 60px rgba(0,0,0,0.15);
}
.bottom-navbar a.active{
  position:relative;
}

.bottom-navbar a.active::before{
  content:'';
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  background:#6366f1;
  border-radius:50%;
}
.top-header{
  transition:
  padding .35s cubic-bezier(.22,1,.36,1),
  background .35s ease,
  box-shadow .35s ease;
}

.top-header.header-scrolled{

  padding-top:10px !important;
  padding-bottom:10px !important;

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

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);

}
.bottom-navbar a:active{
  transform:scale(0.92);
}
body.search-open{
  overflow:hidden;
}
.search-box{

  position:relative;

  width:100%;

  max-width:550px;

  transition:
  max-width .4s cubic-bezier(.22,1,.36,1),
  transform .35s cubic-bezier(.22,1,.36,1);

}

.top-header.header-scrolled .search-box{

  max-width:720px;

}


/* ========================================
   TRUST CONTACT CTA
======================================== */

/* DESKTOP */
.desktop-trust-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;

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

  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:16px 18px;

  box-shadow:0 18px 50px rgba(0,0,0,0.12);

  transition:all .3s ease;
}

.desktop-trust-cta:hover{
  transform:translateY(-4px);
}

.desktop-trust-content{
  display:flex;
  flex-direction:column;
}

.desktop-trust-content small{
  color:#64748b;
  font-size:12px;
  margin-bottom:4px;
}

.desktop-trust-content strong{
  font-size:15px;
  font-weight:700;
  color:#111827;
}

.desktop-whatsapp-btn{
  width:54px;
  height:54px;

  border-radius:18px;

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

  background:#25D366;
  color:#fff;
  font-size:24px;

  transition:all .3s ease;
}

.desktop-whatsapp-btn:hover{
  color:#fff;
  transform:scale(1.06);
}

/* MOBILE WHATSAPP FLOAT */
.mobile-whatsapp-float{
  display:none;
}

@media(max-width:991px){

  .desktop-trust-cta{
    display:none;
  }

  .mobile-whatsapp-float{
    position:fixed;
    right:18px;
    bottom:88px;
    z-index:9999;

    width:58px;
    height:58px;

    border-radius:50%;

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

    background:#25D366;
    color:#fff;

    font-size:28px;

    box-shadow:0 16px 40px rgba(0,0,0,0.18);

    transition:all .3s ease;
  }

  .mobile-whatsapp-float:hover{
    color:#fff;
    transform:scale(1.08);
  }

}

/*Search*/
/* ==========================
   Search Form
========================== */

.search-form{
    width: 100%;
    max-width: 620px;
}

.search-form-inner{
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d8dce5;
    border-radius: 14px;
    overflow: hidden;
    height: 56px;
    position: relative;
}

/* ==========================
   Search Icon
========================== */

.search-form-icon{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9aa3b2;
    z-index: 2;
}

/* ==========================
   Search Input
========================== */

.search-form-input{
    flex: 1;
    border: none;
    outline: none;
    padding-left: 50px;
    padding-right: 15px;
    font-size: 16px;
    color: #333;
    background: transparent;
}

.search-form-input::placeholder{
    color: #9aa3b2;
}

/* ==========================
   Search Button
========================== */

.search-form-btn{
    height: 44px;
    min-width: 120px;
    margin-right: 6px;
    border: none;
    border-radius: 10px;
    background: #1a3467;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease;
}

.search-form-btn:hover{
    background: #132a54;
}