body{
  padding-top: 0px !important;
  background:#f4f8ff;
}
.dropdown-menu {
  background-color: #fff;
  border-radius: 0;
  padding: 0;
}
.dropdown-menu .dropdown-item {
  color: #111;
  padding: 8px 15px;
  font-size: 18px;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #0d6efd;
  color: #fff;
}
 /* ===== FOOTER ===== */
 .custom-footer {
  width: 100%; 
  margin: 0;
  padding: 60px 0; 
  background-color: #00004d;
  color: #fff;
  position: relative;
  left: 0; 
  right: 0;
   text-align: left !important; 
  margin-top: 30px;
  border-radius: 30px 30px 0 0; 
  transform: none; 
  overflow: hidden;
}
.custom-footer .row {
  margin: 0; 
  padding: 0; 
  text-align: left !important;
}
.custom-footer h3 {
  color: #fff;
  font-size: 22px; 
  margin-bottom: 15px; 
}
.custom-footer .col-md-3{
  text-align: left !important;
  align-items: flex-start !important;
}
.custom-footer a {
  color: #ddd;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.custom-footer a:hover {
  color: #fff;
}
.footer-content {
  padding: 0 20px; 
}
@media (max-width: 767px){
  .custom-footer{
    padding: 20px 15px;
text-align: left !important;  
}
  .custom-footer .col-md-3{
    margin-bottom: 18px;
 text-align: left !important;  
}
  .custom-footer .col-md-3 h3{
    font-size: 22px;
    margin-bottom: 8px;
    width: 100%;
 text-align: left !important;  
}
  .custom-footer .col-md-3 a{
    display: inline; 
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    margin-right: 16px; 
    line-height: 26px; 
    white-space: nowrap; 
  }
}
/*-------------css for header----------------*/
.account-img{
width:35px;
height:35px;
border-radius:50%;
cursor:pointer;
border:3px solid white;
object-fit:cover;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}
.cart-btn{
position:relative;
color:000;
font-size:28px;
}
#cart-count{
position:absolute;
top:-8px;
right:-12px;
width:22px;
height:22px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:12px;
}
.header{
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    z-index: 1000;
    transition: all .35s ease;
}
/* Navbar default */
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:65px;
    padding:0 25px;
    background:#e0edfe;
    transition:all .35s ease;
}
.navbar .container{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.navbar h3{
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important; /* bich ka space lega */
  white-space: nowrap !important;
  line-height: 1 !important;
}

.navbar-toggler{
  flex-shrink: 0 !important;
  margin-left: 10px !important;
  border: none !important;
  padding: 4px 6px !important;
  font-size: 22px !important;
}

.navbar-brand{
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  padding: 0 !important;
}
.navbar-brand .logo{
  height: 36px !important;
  width: auto !important;
}
.logo,
.nav-link,
.cart-btn{
    color:111 !important;
}
/* After scroll */
.header.scrolled .logo,
.header.scrolled .nav-link,
.header.scrolled .cart-btn{
    color:#222 !important;
}
.hero .container1{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-size:24px;
font-weight:700;
 flex: 0 0 auto;
}
.logo img{
height:60px;
}
.nav-links{
display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0 auto;      /* This centers the nav */
    padding: 0;
}
.nav-links a{
text-decoration:none;
color:#222;
font-weight:500;
transition:.3s;
}
.nav-links a:hover{
color:#0d6efd;
}
.login-btn{
padding:12px 22px;
border-radius:40px;
border:2px solid #0d6efd;
text-decoration:none;
color:#0d6efd;
font-weight:600;
}
.mobile-link{
display:flex;
align-items:center;
padding:12px 5px;
text-decoration:none;
color:#222;
font-size:17px;
}
.mobile-link:hover{
background:#e0edfe;
border-radius:8px;
}
.service-link{
display:block;
padding:7px;
text-decoration:none;
color:#333;
}.service-link:hover{
background:#e0edfe;
}
.mobile-menu{
    width:280px !important;
    height:100vh !important;
    max-height:100vh;
    top:0px;
    border-radius:0;
    margin-top:0;
}
.mobile-menu .offcanvas-body {
    overflow-y: auto;
     padding-top: 15px;
}
.mobile-menu .offcanvas-header{
    min-height: 70px;
    border-bottom: 1px solid #eee;
}
.navbar-toggler:focus {
    box-shadow: none;
}
body:has(.offcanvas.show){
    overflow: hidden;
}
.navbar-brand,
.navbar-brand:hover {
    color: 000 !important;
}
.navbar .btn-outline-primary {
    color: 000 !important;
    border-color: 000 !important;
}
.navbar .btn-outline-primary:hover {
    background-color: 000 !important;
    color: #5cabf5 !important;
}
.nav-link {
    color: 000 !important;
}
.carousel-inner{
        height: 550px;
}
.banner-overlay {
    z-index: 1;
}
.offcanvas a {
    text-decoration: none;
    font-size: 16px;
}
.offcanvas {
    z-index: 1050;
}
.offcanvas-backdrop {
    z-index: 1040;
}
/* .modal {
    z-index: 1055 !important;
} */
#cartModal {
    z-index: 2000 !important;
}
/* .modal-backdrop {
    z-index: 1990 !important;
} */
@media (max-width:991px){
.nav-links{
    display:none !important;
}
.nav-btns{
    display:none !important;
}
.navbar-toggler{
    display:block !important;
}
.navbar .container{
    gap: 0 !important;
  }
  .navbar h3{
    font-size: 22px !important;
  }
.logo img{
height:52px;
}
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    padding:0 25px;
    background:#e0edfe;
    transition:all .35s ease;
}
}
/*------------css for drawerOverlay(base.html)--------*/
#drawerOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:99998;
}
#drawerOverlay.show{
opacity:1;
visibility:visible;
}
#detailDrawer{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.9);
width:90%;
max-width:1100px;
height:90vh;
background:#fff;
border-radius:18px;
overflow:auto;
z-index:99999;
opacity:0;
visibility:hidden;
transition:.3s;
box-shadow:0 20px 60px rgba(0,0,0,.3);
}
#detailDrawer.show{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%) scale(1);
}
#drawerClose{
position:sticky;
top:10px;
float:right;
margin:15px;
width:42px;
height:42px;
border:none;
border-radius:50%;
font-size:26px;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.2);
cursor:pointer;
z-index:100;
}
#drawerContent{
    padding:60px 25px 30px;
}
@media(max-width:768px){
#detailDrawer{
    width:100%;
    right:-100%;
}
}
/* ================= MOBILE BOTTOM NAVIGATION ================= */

.mobile-bottom-nav{
    display:none;
}
.bottom-account-offcanvas {
    display: none;
}

.bottom-account-overlay {
    display: none;
}
@media(max-width:768px){
    .mobile-bottom-nav{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:58px;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:space-around;
        z-index:9999;
        box-shadow:0 -2px 10px rgba(0,0,0,.15);
        border-top:1px solid #ddd;
    }

    .bottom-nav-item{
        position:relative;
        flex:1;
        height:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        text-decoration:none;
        color:#555;
    }

    .bottom-nav-item i{
        font-size:20px;
        line-height:20px;
    }

    .bottom-nav-item span:last-child{
        font-size:10px;
    }

    .bottom-nav-item:hover{
        color:#0d6efd;
    }

    /* CART BADGE */
    .bottom-cart-badge{
        position:absolute;
        top:4px;
        right:calc(50% - 18px);
        min-width:16px;
        height:16px;
        padding:0 4px;
        display:flex;
        align-items:center;
        justify-content:center;

        background:#000;
        color:#fff;
        border-radius:50%;
        font-size:9px !important;
        font-weight:700;
        line-height:16px;
    }

    /* Page content ko bottom bar ke neeche jane se rokna */
    body{
        padding-bottom:58px;
    }
.bottom-services{
        position:relative;
    }

    .bottom-services-btn{
        border:0;
        background:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:58px;
        color:#555;
        font-size:10px;
    }

    .bottom-services-btn i{
        font-size:20px;
        line-height:20px;
    }

    .bottom-services-dropdown{
        display:none;
        position:absolute;
        bottom:58px;
        left:50%;
        transform:translateX(-50%);
        width:180px;
        max-height:250px;
        overflow-y:auto;
        background:#fff;
        padding:5px 0;
        margin:0;
        list-style:none;
        border-radius:8px;
        box-shadow:0 0 10px rgba(0,0,0,.2);
        z-index:10000;
    }

    .bottom-services-dropdown.show{
       display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100000 !important;
    }

    .bottom-services-dropdown li a{
        display:block;
        padding:9px 12px;
        text-decoration:none;
        color:#333;
        font-size:12px;
    }

    .bottom-services-dropdown li a:hover{
        background:#f1f1f1;
    }
/* =========================
   ACCOUNT BUTTON
   ========================= */

.bottom-account {
    position: relative;
}

.bottom-account-btn,
.bottom-account-login {
    border: 0;
    background: none;
    width: 100%;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #555;
    text-decoration: none;
    padding: 0;
}

.bottom-account-btn i,
.bottom-account-login i {
    font-size: 20px;
    line-height: 20px;
}

.bottom-account-btn span,
.bottom-account-login span {
    font-size: 10px;
}
/* ==== ACCOUNT OFFCANVAS============== */
 .bottom-account-offcanvas {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
        height: 100vh;
        background: #f8f9fc;
        z-index: 10002;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 3px 0 15px rgba(0,0,0,.18);
        overflow-y: auto;
    }
    .bottom-account-offcanvas.show {
        transform: translateX(0);
    }
/* =======ACCOUNT OVERLAY============== */
 .bottom-account-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,.35);
        z-index: 10001;
    }
    .bottom-account-overlay.show {
        display: block;
    }
/* =========================
   ACCOUNT HEADER
   ========================= */
.bottom-account-header {
    display: flex;
    align-items: center;
    padding: 18px 15px;
    background: #e0edfe;
    border-bottom: 1px solid #dfe5ef;
}
.account-big-icon {
    font-size: 38px;
    color: #0d6efd;
    margin-right: 10px;
}
.bottom-account-header h5 {
    margin: 0;
    font-size: 15px;
    color: #222;
}
.bottom-account-header span {
    font-size: 11px;
    color: #777;
}
.bottom-account-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 16px;
}
/* =========ACCOUNT BODY============= */
.bottom-account-body {
    padding: 12px;
}
/* ===========ACCOUNT INFORMATION========= */
.account-info-item {
    display: flex;
    align-items: flex-start;
    padding: 11px 5px;
    border-bottom: 1px solid #e5e5e5;
}
.account-info-item > i {
    width: 28px;
    font-size: 17px;
    color: #0d6efd;
    margin-top: 2px;
}
.account-info-item small {
    display: block;
    font-size: 10px;
    color: #777;
    margin-bottom: 2px;
}
.account-info-item p {
    margin: 0;
    font-size: 11px;
    color: #333;
    word-break: break-word;
}
/* ==========DIVIDER============== */
.account-divider {
    height: 8px;
}
/* ==========ACCOUNT ACTIONS============== */
.account-action {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 13px 5px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}
.account-action > i:first-child {
    width: 28px;
    font-size: 17px;
    color: #555;
}
.account-action span {
    flex: 1;
    font-size: 12px;
}
.account-action > i:last-child {
    font-size: 10px;
    color: #999;
}
.account-action:hover {
    background: #eef4ff;
}
.account-logout {
    color: #dc3545;
}
.account-logout > i:first-child {
    color: #dc3545;
}
/* SEARCH HALF SCREEN */
.bottom-search-box {
    display: none;
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    height: 60vh; 
    min-width: 180px;
    max-width: none;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 10000;
}
.bottom-search-box.show {
     display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100000 !important;
}
.bottom-search-box form {
    display: flex;
    gap: 5px;
}
.bottom-search-box input {
    width: 100%;
    height: 35px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 0;
}
.bottom-search-box button {
    height: 35px;
    padding: 0 8px;
    border: 0;
    background: #0d6efd;
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
    flex-shrink: 0;
} 
     .bottom-search{
        position:relative;
    }
    .bottom-search-btn{
        border:0;
        background:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:58px;
        color:#555;
        font-size:10px;
    }
    .bottom-search-btn i{
        font-size:20px;
        line-height:20px;
    }
}
/* ==============MOBILE VIEW====================== */
@media (max-width: 768px) {
    .bottom-nav,
    .bottom-navbar,
    .mobile-bottom-nav,
    #bottomNav {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }
}