/* ================= PROFESSIONAL BREADCRUMB (CSS ONLY) ================= */
.inner-nav {
    padding: 16px 0 !important;
    background: #ffffff !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee9e0;
}

.inner-nav .container {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #8c8c8c !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Home icon (Font Awesome pehle se load hai project mein) */
.inner-nav .container::before {
    font-family: "FontAwesome";
    content: "\f015";  /* home icon */
    color: #b0a89c;
    font-size: 0.9rem;
    margin-right: 4px;
}

/* "Home" text ko hover jaisa look */
.inner-nav .container:hover {
    color: #c69963;
    cursor: default;
}

/* Active/current page (Checkout) — pill/badge style */
.inner-nav .container .active {
    background: #c69963;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 5px 14px;
    border-radius: 20px;
    margin-left: 4px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Active ke andar check icon */
.inner-nav .container .active::before {
    font-family: "FontAwesome";
    content: "\f00c";  /* check icon */
    font-size: 0.75rem;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .inner-nav {
        padding: 12px 0 !important;
    }
    .inner-nav .container {
        font-size: 1.5rem !important;
    }
    .inner-nav .container .active {
        padding: 4px 10px;
          font-size: 1.1rem;
    }
}
.user-panel { margin-bottom:30px; height:32px; overflow:hidden;}
.my-acc, .my-acc-login, .my-acc-register {float:right;  padding:17px 10px; color:#fff; border-radius:0 0 5px 5px;}
.my-acc-login { margin-left: 5px; }
.my-acc:hover, .my-acc-login:hover, .my-acc-register:hover  {color:#fff;}
.user-page .row{ margin-bottom:40px; }
.loginmodal-container {  padding: 30px;  max-width: 350px;  width: 100%;  background-color: #F7F7F7;  margin: 0 auto;  border-radius: 2px;  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);  overflow: hidden;  font-family: roboto;}
.loginmodal-container h1 {  text-align: center;  font-size: 1.8em;  font-family: roboto;}
.loginmodal-container input[type=submit] {  width: 100%;  display: block;  margin-bottom: 10px;  position: relative;}
.loginmodal-container input[type=text], input[type=password] {  height: 44px;  font-size: 16px;  width: 100%;  margin-bottom: 10px;  -webkit-appearance: none;  background: #fff;  border: 1px solid #d9d9d9;  border-top: 1px solid #c0c0c0;  /* border-radius: 2px; */  padding: 0 8px;  box-sizing: border-box;  -moz-box-sizing: border-box;}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {  border: 1px solid #b9b9b9;  border-top: 1px solid #a0a0a0;  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
.loginmodal-submit {display: block;line-height: 50px;background: #a0c03c;border: medium none;color: #ffffff;font-size: 17px;font-weight: 600;height: 50px;margin: 20px 0 0;padding: 0;text-transform: uppercase;transition: all 0.5s ease 0s;width: 100%;}
.user-page .loginmodal-container {margin: auto;}
.header {padding-top: 30px; margin-bottom: 30px;}


.header .phone, .header .dropdown-langs {float: left;}
.header .phone {margin-right: 15px;
    background: #fff;
   padding: 3px 5px;
    border-radius: 40px;} 
.header .dropdown-langs button {background-color: transparent; border:0;}
.header .search {position: relative; display: inline-block; float: right;}
.header .search .field {background: #ededed none repeat scroll 0 0; border:0; border-radius: 5px; padding: 5px; min-width: 230px;}
.header .search a {color:#000; position: absolute; right:8px; top:5px;}
.header .shop-dropdown {list-style: none; margin: 0; margin-top: 20px; padding: 0;}
.header .shop-dropdown i {font-size: 30px; color:#b3d236;}
.header .shop-dropdown .badge {position: absolute; right: 0; top: -5px;}
.mainmenu nav { margin-left: -15px;}
.mainmenu li {  display: inline-block;  position: relative;}
.mainmenu ul li a {  color:#333;  display: block;    font-size: 17px;    font-weight: bold;    line-height: 20px;    padding: 10px 20px 10px 0;    text-transform: uppercase;}
.mainmenu ul li.active a{color:#98ab3f}
.nav li a:focus, .nav li a:hover { background-color: #fff;}
.mainmenu ul li:hover a {color:#98ab3f; text-decoration: none;}
.mainmenu ul li a  i{font-size:12px;}
.mainmenu ul li ul li {display: block;}
.mainmenu ul li ul li a{font-weight:400;    text-transform:capitalize;}
.mainmenu ul li ul li a { font-size: 13px;    font-weight: 400;   padding: 5px 0;   text-transform: capitalize;}
.mainmenu ul li .megamenu { background: #fff none repeat scroll 0 0;    box-shadow: 0 0 5px #888;    left: -295px;    opacity: 0;    padding: 30px 30px 40px;    position: absolute;    transform: scaleY(0);    transform-origin: 0 0 0;    transition: all 0.5s ease 0s;    visibility: hidden;    width: 865px;    z-index: 2147483647;}
.mainmenu ul li:hover .megamenu{opacity:1;visibility:visible;	transform:scaleY(1);}
.mainmenu ul li .megamenu span{	width:33.333%;	float:left;padding:0px 10px;}
.mainmenu ul li .megamenu span a {  padding: 4px 0;  background: none;  font-weight: 400;  font-size:12px;}
.mainmenu ul li .megamenu span a.mega-title {  border-bottom: 1px solid #ddd;  color: #393939;  font-weight: 600;  margin-bottom: 5px;}
.mainmenu ul li .megamenu{}
.mainmenu ul li .megamenu.megamenu1 {left: -395px;}
.mainmenu ul li .megamenu.megamenu2{left: -485px;}
nav .navbar-header .menu-text-xs {text-transform: uppercase;float: left;margin-top: 15px;margin-left: 15px;}

#home-slider .item {background-size: 100%; background-repeat: no-repeat; height: 600px;}
#home-slider .item h3 { font-size:60px; font-family: 'Lobster Two', cursive; margin-top: 200px;}
#home-slider .item h3 a {color:#90815b; display: none;}
#home-slider .item h3 a:hover {text-decoration: none;}
#home-slider .item .description {color: #6d604c;font-size: 20px;line-height: 20px;margin-bottom: 20px;}
#home-slider .item .add-to-cart {display:none; color:#4c4c4c; border: 2px solid #6d604c;border-radius: 30px; font-size: 18px;padding: 5px 25px;text-transform: uppercase;}


.carousel-control span { color:#fff;}
.home-banners .single-banner {width: 50%;overflow: hidden;}
.home-banners .single-banner a {display: block;position: relative;}
.home-banners .single-banner img {transform: scale(1);transition: all .5s; max-width: 100%;height: auto;}
.new-products {background-color: #f6f7fb; padding-top: 70px; padding-bottom: 70px;}
.new-products h3 {text-align: center; font-family: 'Lobster Two', cursive; font-size:32px; color:#4c4c4c; font-weight: bold;text-transform: capitalize;}
.new-products .carousel-inner h1 {font-size:18px; text-align: center; font-weight: bold;}
.new-products .carousel-inner a { color:#4c4c4c; text-decoration: none;}
.new-products .carousel-inner .price {display: block; text-align: center; color:#98ab3f; font-weight: bold;}
.new-products .carousel-control i {color:#98ab3f;}
.new-products .add-to-cart { display: block; width: 150px; margin: 0 auto; background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 1px solid #e2dfdb;border-radius: 30px;color: #6d604c;font-size: 14px;font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
.new-products .add-to-cart:hover {background-color:#98ab3f; color:#fff;}
.blog-posts { padding-top: 70px; padding-bottom: 70px;}
.blog-posts h3 {text-align: center; font-family: 'Lobster Two', cursive; font-size:32px; color:#4c4c4c; font-weight: bold;text-transform: capitalize;}
.blog-posts .carousel-inner img {margin-bottom: 10px;}
.blog-posts .carousel-inner h1 {font-size:24px; text-align: center; font-family: 'Lobster Two', cursive; margin: 0; margin-bottom: 10px;}
.blog-posts .carousel-inner a { color:#4c4c4c; text-decoration: none;} 
.blog-posts .carousel-inner .description { color:#888888; text-decoration: none; text-align: center; font-size: 14px;} 
.blog-posts .carousel-inner .time {display: block; text-align: center;} 
.blog-posts .read-more {color: #6d604c;display: block; text-align: center; font-size: 14px;font-weight: 600;letter-spacing: 5px;padding-top: 20px;text-align: center;text-transform: uppercase;}
.shop-dropdown { list-style : none; margin : 0; padding : 0; }
.dropdown-cart { height : auto; max-height : 250px; overflow-x : hidden; width : 265px; padding: 10px; }
.shop-dropdown a.dropdown-toggle { color : #333; font-size : 13px; }
.shop-dropdown a.dropdown-toggle:hover { text-decoration : none; }
.dropdown-cart li .item { display : block; margin : 3px 0; }
.dropdown-cart li .item:hover { background-color : #f3f3f3; }
.dropdown-cart li .item:after { clear : both; content : " "; display : block; font-size : 0; height : 0; visibility : hidden; }
.dropdown-cart li .item-in { float : left; }
.dropdown-cart li .item-in img { height : 50px; width : 50px; }
.dropdown-cart li .item-in a.item-info span { font-size : 12px; }
.dropdown-cart li .item-in a.item-info .product-name { display: block; }
.dropdown-cart .go-checkout {background-color: #e3e3e3;border: 1px solid #e3e3e3;color: #333;font-size: 1.4rem;font-weight: 700;padding: 13px 15px;transition: all 0.5s ease-out 0s;width: 100%;text-transform: uppercase;border-radius: 25px;}
.dropdown-cart .go-checkout:hover { background-color: #98AB3F; color:#fff; }
.dropdown-cart .item-x-absolute { position : absolute; right : 10px; }
.dropdown-cart li .item-in .left-side { float : left; width : 50px; }
.dropdown-cart li .item-in .right-side { border-bottom : 1px solid #f1f1f1; float : left; margin-left : 2px; width : 170px; }
.dropdown-cart .item-info .prices span { color : #fe3a3a; display : inline !important; }
.dropdown-cart .item-info .prices, ul.dropdown-cart .item-info .currency { color: #666; display: inline !important; font-size: 16px; font-weight: bold; }
#view-product h1 { margin: 0; padding: 0; text-transform: capitalize; color:#444444; font-size: 24px; margin-bottom: 10px;}
#view-product .product-info {background-color: #f6f7fb; padding: 10px;}
#view-product .product-info .add-to-cart { display: inline-block;  margin-bottom: 5px; border: 1px solid #e2dfdb;    border-top-color: rgb(226, 223, 219);    border-right-color: rgb(226, 223, 219);    border-bottom-color: rgb(226, 223, 219);    border-left-color: rgb(226, 223, 219);border-radius: 30px;color: #6d604c;font-size: 14px;font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
#view-product .manage-buttons { padding-top: 10px; padding-bottom: 10px;}
#view-product #description {background-color: #f6f7fb; padding: 10px;}
#view-product #description .header {background-color: #f4f4f4; margin-top: -10px; margin-left: -10px; margin-right: -10px; padding: 20px;}
#view-product #description .header .title { color:#fff; background-color: #A0C03C; padding: 20px; margin-left: -20px;}
#view-product .top-part { margin-bottom: 20px; }
.inner-nav {background-color: #f1f1f1; padding: 20px; margin-bottom: 30px;}
.inner-nav .active {color:#A0C03C;}
#modalImagePreview { background-color : rgb(0,0,0); background-color : rgba(0,0,0,0.9); display : none; height : 100%; left : 0; overflow : auto; padding-top : 100px; position : fixed; top : 0; width : 100%; z-index : 100; }
#modalImagePreview .modal-content { text-align: center; display : block; margin : auto; max-width : 700px; width : 80%; }
#modalImagePreview #caption { color : #ccc; display : block; height : 150px; margin : auto; max-width : 700px; padding : 10px 0; text-align : center; width : 80%; }
#modalImagePreview .modal-content, #modalImagePreview #caption { animation-duration : 0.6s; animation-name : zoom; webkit-animation-duration : 0.6s; webkit-animation-name : zoom; }
#modalImagePreview .close { opacity: 1; color : #f1f1f1; font-size : 40px; font-weight : bold; position : absolute; right : -10px; top : -40px; transition : 0.3s; }
#modalImagePreview .close:hover,#modalImagePreview .close:focus { color : #bbb; cursor : pointer; text-decoration : none; }
#modalImagePreview img {max-width: 100%;}
.other-images-container .active img {border:3px solid #b1b1b1;}
.img-series {    bottom: -17px;    color: #fff;    font-size: 14px;    position: absolute;    right: 0;}
.img-sl { cursor: pointer;}
.orders-from-category {margin-bottom: 20px;}
.orders-from-category h2 {color: #4c4c4c;font-size: 28px;font-weight: bold;text-transform: capitalize; font-family: 'Lobster Two', cursive; text-align: center;}
.product-inner h3 {text-transform: uppercase; text-align: center;  font-weight: bold;  padding-top: 5px;margin: 5px 0;  margin-bottom: 5px;display: block;font-size: 16px;}
.product-inner .price {display: block; text-align: center; color:#98ab3f; font-weight: bold;}
.product-inner .add-to-cart { display: block; width: 150px; margin: 0 auto; background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 1px solid #e2dfdb;border-radius: 30px;color: #6d604c;font-size: 12px; text-align:center; font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
.product-inner .add-to-cart:hover {background-color:#98ab3f; color:#fff; text-decoration: none;}
#checkout-page { margin-bottom: 20px;}

#checkout-page #goOrder .form-control { border:1px solid #ebebeb; border-radius: 0; box-shadow: none;}
#checkout-page #goOrder label {font-size: 12px; color:#444444;}
#checkout-page .go-order { display: block; line-height: 50px; background: #a0c03c;border: medium none;color: #ffffff;font-size: 17px;font-weight: 600;height: 50px;margin: 20px 0 0;padding: 0;text-transform: uppercase;transition: all 0.5s ease 0s;width: 100%;}
#checkout-page h4 {font-family: 'Lobster Two', cursive;color: #4c4c4c;font-size: 28px;font-weight: bold;text-transform: capitalize;}
.table-products img.product-image { width : 80px; } 
.relative {position: relative;}
.payment-type-box { border : 1px solid #ccc; margin : 20px 0; padding : 12px; position : relative; }
.payment-type-box .top-header { background-color : #f6f7fb; font-size : 14px; left : 50%; margin-left : -75px; padding-left : 5px; padding-right : 5px; position : absolute; top : -12px; width : 149px; }
.remove-product { left : 0; position : absolute; top : 0; }
.btn-green {background-color: #a0c03c; color:#fff;}
#shopping-cart { margin-bottom: 20px;}
.btn-black {background-color: #2f2f2f; color:#fff;}
.btn-black:hover {color:#f1f1f1;}
#contacts {margin-bottom: 20px;}
#contacts #map {margin-bottom: 30px; height: 400px;  width: 100%;}
#contacts .contact-details {background-color: #f4f4f4; padding: 20px;}
#contacts .contact-form {background-color: #f4f4f4; padding: 20px; }
#contacts .contact-form .form-control {width: 100%; box-shadow: none;  border-radius: 0; height: 35px;border: 1px solid #ebebeb;margin-bottom: 30px;padding-left: 10px;}
#contacts .contact-form label { font-size:12px; font-weight: normal; color:#444;}
.blog-list .caption { color : #666; }
.blog-list small span { margin-right : 7px; }
.blog-list small, .blog-list small a, .blog-preview-time { color : silver; }
.blog-list .caption h5 { font-size : 16px; }
.blog-list img { width : 100%; }
#blog .thumbnail { border-radius : 0; }
.blog-preview-time { display : inline-block; margin-bottom : 10px; }
.blog-description { color : #666; font-size : 13px; }
.blog-artchive { list-style : none; margin-bottom : 20px; padding-left : 0; }
.blog-artchive .item { background : transparent none repeat scroll 0 0; border-color : -moz-use-text-color -moz-use-text-color #ccc; border-image : none; border-style : none none dotted; border-width : 0 0 1px; moz-border-bottom-colors : none; moz-border-left-colors : none; moz-border-right-colors : none; moz-border-top-colors : none; padding : 10px 0px; padding-left : 10px; }
.blog-artchive .item a { color : #666; }
.blog-home-left-categ { margin-bottom : 20px; }
.blog-list .description {height: 125px;overflow: hidden;}
.blog-list h5 {height: 40px; overflow: hidden;}
.blog-list .img-container {height: 400px; overflow: hidden;}
#shop-page { margin-bottom: 20px; }
#shop-page .categories {border:1px solid #98ab3f; border-radius: 5px;}
#shop-page .categories .body {padding: 10px;}
#shop-page .categories .title {background-color: #98AB3F; padding: 10px; color:#fff; text-transform: uppercase;}
#shop-page .categories ul { list-style : none; padding : 0; margin:0; }
#shop-page .categories ul li, div.filter-sidebar ul li a { margin-bottom : 4px; }
#shop-page .categories ul li a { color : #6d6d6d; display : inline-block; font-size : 13px; }
#shop-page .categories ul li a.selected, div.filter-sidebar ul li a:hover { color : #1e88e5; }
#shop-page .product-inner .img-responsive {margin: 0 auto;}
#show-xs-nav { border : 1px solid #666; color : #666; font-size : 15px; padding : 3px; text-align : center; text-decoration : none; }
#show-xs-nav span i { margin-left : 5px; }
#shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:active, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {color:#fff;}
#products-side h1 {font-family: 'Lobster Two', cursive; margin: 0; margin-bottom: 20px;}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover, .pagination > li > a, .pagination > li > span {color:#98ab3f;}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {background-color: #98ab3f; border:1px solid #98ab3f; color:#fff;}
footer .footer {background-color: #f4f4f4;}
.footer p { margin : 0; }
.footer img { max-width : 100%; }
.footer h3 { border-bottom : 1px solid #BAC1C8; color: #333; font-size : 18px; font-weight : 600; line-height : 27px; padding : 40px 0 10px; text-transform : uppercase; }
.footer ul { color : #7F8C8D; list-style-type : none; margin-left : 0; margin-top : 15px; padding-left : 0; }
.footer ul li a { display : block; padding : 0 0 5px 0; }
.footer a, .footer p { color : #78828D; }
.footer p , .footer ul { font-size : 13px; }
footer .footer-bottom { padding-top: 20px; padding-bottom: 20px; border-bottom: 2px solid #e5e5e5; }
#notificator { display : none; left : 50%; margin-left : -100px; padding : 15px 25px; position : fixed; text-align : center; top : 20px; width : 200px; z-index : 5000; }

@media (min-width: 992px) and (max-width: 1199px) { 
    #home-slider, #home-slider .item  {height: 500px;}
    #home-slider .item h3 {margin-top: 80px; font-size:38px;}
    #home-slider .item .description {font-size:18px;}
}

@media (min-width: 768px) and (max-width: 991px) { 
    #home-slider, #home-slider .item  {height: 400px;}
    #home-slider .item h3 {margin-top: 80px; font-size:32px;}
    #home-slider .item .description {font-size:16px;}
    #nav-categories, #show-xs-nav .hidde-sp { display : none; }
    .mainmenu ul li .megamenu { width: 600px; left:50%; margin-left: 0;}
}

@media (min-width: 991px) {
    #nav-categories { display : block !important; }
}

@media screen and (max-width: 767px) {
   
    #home-slider .item h3 {margin-top: 0; font-size:20px;}
    #home-slider .item .description {font-size:14px;}
    #home-slider .item .add-to-cart {display: none;}
    .header .search {float:none;}
    
    .header .dropdown-langs { margin-bottom: 10px;}
    .home-banners .single-banner { width:100%; margin-bottom: 10px;}
    .navbar-header {        background-color: transparent;
        color: #ffffff;
        margin-left: 21px;margin-right: -40px;margin-top: 2px;}
    .navbar-toggle span {background-color:#fff;}
    .mainmenu li { display: block; padding-left: 60px;}
    .multi-item-carousel .item .col-xs-12:nth-child(2), .multi-item-carousel .item .col-xs-12:nth-child(3) {display: none;}
    .multi-item-carousel .item a .img-responsive { margin: 0 auto;}
    #nav-categories, #show-xs-nav .hidde-sp { display : none; }
    .social-media-product-share {margin-bottom: 20px;}
}

@media (max-width: 480px) { 
}


/* =========================================================
   RIDAN - NEW HEADER DESIGN
   IMPORTANT:
   PHP / HTML / CART / SHOP / CATEGORIES ARE NOT CHANGED
   ========================================================= */


/* ---------------------------------------------------------
   MAIN HEADER
   --------------------------------------------------------- */

body {
    padding-top: 82px !important;
}

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 38px !important;

    background: #d4a064 !important;

    z-index: 9998 !important;

    display: flex !important;
    align-items: center !important;

    box-shadow: 0 2px 12px rgba(0,0,0,.08);

    border: 0 !important;
}


/* Remove Bootstrap container limitation */

.header:before,
.header:after {
    display: none !important;
}

body > .container {
    width: 90% !important;
    max-width: none !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   LOGO - CENTER
   --------------------------------------------------------- */

.header > .col-md-4 {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: auto !important;

    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    z-index: 20 !important;
}

.logo {
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}

.logo a {
    display: block !important;
}

.logo img {
    width: 145px !important;
    height: auto !important;

    max-height: 68px !important;

    object-fit: contain !important;

    display: block !important;
}


/* ---------------------------------------------------------
   LEFT AREA
   --------------------------------------------------------- */

.header > .col-md-7 {
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}

.top {
    position: static !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
}


/* ---------------------------------------------------------
   HIDE OLD SEARCH
   --------------------------------------------------------- */

.search {
    display: none !important;
}

.dropdown-langs {
    display: none !important;
}


/* ---------------------------------------------------------
   ACCOUNT BUTTON
   Existing PHP login/register stays untouched
   --------------------------------------------------------- */

.user-panel {
    position: fixed !important;

    right: 151px !important;
    top: 18px !important;

    height: 53px !important;

    min-width: 132px;

    padding: 0 20px !important;

    margin: 0 !important;

    

    border-radius: 32px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 10002 !important;

    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.user-panel a {

    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 25px;
    height: 51px;
}

.user-panel a:hover {
    color: #8b5c2f !important;
}


/* Hide register on desktop when both buttons exist */

.user-panel .my-acc-register {
    display: none !important;
}


/* ---------------------------------------------------------
   MENU AREA
   Existing hamburger remains
   --------------------------------------------------------- */

.bottom.mainmenu {
    position: fixed !important;

    top: 17px !important;
    right: 35px !important;

    width: 48px !important;
    height: 50px !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 10003 !important;
}


/* hamburger */

.navbar-header {
    width: 48px !important;
    height: 50px !important;

    display: block !important;
}

.navbar-toggle {
    width: 48px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 10px !important;

    border: 0 !important;

    background: transparent !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 5px !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background: transparent !important;
}

.navbar-toggle .icon-bar {
    width: 24px !important;
    height: 2px !important;

    margin: 0 !important;

    background: #151515 !important;

    border-radius: 2px !important;

    transition: .25s ease;
}


/* hide mobile MENU text */

.menu-text-xs {
    display: none !important;
}


/* ---------------------------------------------------------
   CART
   Existing cart PHP untouched
   --------------------------------------------------------- */

.header > .col-md-1 {
    position: fixed !important;

    right: 100px !important;
    top: 17px !important;

    width: 55px !important;
    height: 53px !important;

    padding: 0 !important;

    z-index: 10001 !important;
}

.shop-dropdown {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    height: 53px !important;
}

.shop-dropdown > li {
    height: 53px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}

.shop-dropdown > li > a {
    width: 50px !important;
    height: 50px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #171717 !important;

    text-decoration: none !important;

    font-size: 25px !important;

    position: relative !important;
}

.shop-dropdown > li > a:hover {
    color: #6f4a29 !important;
}

.shop-dropdown .badge {
    position: absolute !important;

    top: -2px !important;
    right: -1px !important;

    min-width: 21px !important;
    height: 21px !important;

    padding: 3px 5px !important;

    background: #fff !important;

    color: #222 !important;

    border-radius: 50% !important;

    font-size: 11px !important;

    line-height: 15px !important;

    border: 0 !important;
}


/* ---------------------------------------------------------
   REMOVE OLD HORIZONTAL NAVBAR POSITION
   --------------------------------------------------------- */

#navbar {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;

    width: 380px !important;

    max-width: 90vw !important;

    height: 100vh !important;

    padding: 95px 25px 30px !important;

    margin: 0 !important;

    background: #fff !important;

    box-shadow: -10px 0 35px rgba(0,0,0,.18) !important;

    overflow-y: auto !important;

    z-index: 10000 !important;

    transform: translateX(105%) !important;

    transition: transform .35s ease !important;

    display: block !important;
}


/* Bootstrap collapse OPEN */

#navbar.in,
#navbar.collapsing {
    transform: translateX(0) !important;
}


/* Bootstrap collapsing */

#navbar.collapsing {
    height: 100vh !important;
}


/* ---------------------------------------------------------
   SIDEBAR NAV
   Original links preserved
   --------------------------------------------------------- */

#navbar > ul.navbar-nav {
    float: none ;

    width: 100% ;

    margin: 0 ;

    padding: 0 ;
}

#navbar > ul.navbar-nav > li {
    float: none ;

    width: 100% ;

    margin: 0 ;

    border-bottom: 1px solid #eeeeee ;
}

#navbar > ul.navbar-nav > li > a {
    display: flex ;

    align-items: center ;

    justify-content: space-between ;

    width: 100% ;

    padding: 16px 8px ;

    color: #202020 ;

    background: transparent ;

    font-size: 15px ;

    font-weight: 600 ;

    text-decoration: none ;
}

#navbar > ul.navbar-nav > li > a:hover {
    color: #a36d34 ;

    background: #faf6f1 ;
}


/* ---------------------------------------------------------
   SHOP
   --------------------------------------------------------- */

#navbar > ul.navbar-nav > li > a .fa-chevron-down {
    margin-left: auto ;

    font-size: 11px ;
}


/* ---------------------------------------------------------
   MEGA MENU
   Existing Shop categories remain EXACTLY SAME PHP
   --------------------------------------------------------- */

#navbar .megamenu {
    position: static ;

    display: block ;

    width: 100% ;

    min-width: 0 ;

    padding: 5px 0 10px 10px ;

    margin: 0 ;

    background: transparent ;

    box-shadow: none ;

    border: 0 ;

    visibility: visible ;

    opacity: 1 ;
}


/* category links */

#navbar .megamenu a.go-category {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    padding: 10px 8px !important;

    color: #555 !important;

    background: transparent !important;

    font-size: 13px !important;

    line-height: 18px !important;

    text-decoration: none !important;

    border-bottom: 1px solid #f1f1f1 !important;

    cursor: pointer !important;
}

#navbar .megamenu a.go-category:hover {
    color: #a36d34 !important;

    background: #faf6f1 !important;

    padding-left: 13px !important;
}


/* category title */

#navbar .megamenu a.mega-title {
    color: #222 !important;

    font-weight: 700 !important;

    font-size: 14px !important;
}


/* ---------------------------------------------------------
   CART DROPDOWN
   --------------------------------------------------------- */

.dropdown-cart {
    position: fixed !important;

    top: 75px !important;

    right: 75px !important;

    width: 340px !important;

    max-width: calc(100vw - 30px) !important;

    z-index: 10004 !important;
}


/* ---------------------------------------------------------
   DESKTOP SIDEBAR TITLE
   --------------------------------------------------------- */

#navbar:before {
    content: "MENU";

    position: absolute;

    top: 28px;
    left: 25px;

    color: #222;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .header {
        height: 68px ;

        padding: 0 10px;
    }


    /* logo */

    .header > .col-md-4 {
        left: 50% ;
    }

   

    .user-panel a {
        font-size: 12px !important;
    }


    /* cart */

    .header > .col-md-1 {
        right: 55px !important;

        top: 10px !important;

        width: 45px !important;

        height: 48px !important;
    }

    .shop-dropdown > li > a {
        width: 42px !important;

        height: 45px !important;

        font-size: 22px !important;
    }


    /* hamburger */

    .bottom.mainmenu {
        right: 5px !important;

        top: 9px !important;
    }


    /* sidebar */

    #navbar {
        width: 320px !important;

        max-width: 88vw !important;

        padding: 85px 18px 25px !important;
    }


    /* cart dropdown */

    .dropdown-cart {
        right: 10px !important;

        top: 65px !important;

        width: 310px !important;
    }

}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 480px) {
    .user-panel {
        right: 100px !important;
       height: 44px !important;
        min-width: 50px !important;

        padding: 0 9px !important;
    }

    .user-panel a {
        font-size: 0 !important;
    }

    .user-panel .my-acc:before,
    .user-panel .my-acc-login:before {
        content: "\f007";

        font-family: FontAwesome;

        font-size: 18px;
    }


    .header > .col-md-1 {
        right: 49px !important;
    }

    .bottom.mainmenu {
        right: 0 !important;
    }


    #navbar {
        width: 290px !important;

        max-width: 85vw !important;
    }

}


/* ---------------------------------------------------------
   EXTRA POLISH
   --------------------------------------------------------- */

.header *,
#navbar * {
    box-sizing: border-box;
}

.navbar-nav {
    margin: 0 !important;
}

.clearfix {
    clear: both;
}


/* scrollbar */

#navbar::-webkit-scrollbar {
    width: 5px;
}

#navbar::-webkit-scrollbar-track {
    background: #f5f5f5;
}

#navbar::-webkit-scrollbar-thumb {
    background: #c99a62;
    border-radius: 10px;
}

/* Overall Page Background */
body {
  background-image: url(../assets/imgs/qq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

/* Mobile ke liye override */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}
/* Rounded Hero Slider */
#home-slider {
   
    margin: 5px 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

#home-slider .item {
    height: 515px;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

#home-slider .carousel-indicators li {
    border-radius: 10px;
    width: 25px;
    height: 6px;
    background-color: rgba(255,255,255,0.5);
    border: none;
}

#home-slider .carousel-indicators .active {
    width: 35px;
    height: 6px;
    background-color: #fff;
}

/* Circular Background & Base Styling */
#home-slider .carousel-control {
    width: 32px;
    height: 32px;
    background-color: #d4a373;
    color: #ffffff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    line-height: 32px;
    margin: 0 10px;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Hover Effect for Interactive Feel */
#home-slider .carousel-control:hover {
    background-color: #bc8a5f;
    opacity: 1;
    color: #ffffff;
}

/* Arrow Size & Centering Adjustment */
#home-slider .carousel-control .glyphicon {
    font-size: 17px;
    line-height: 23px;
}

/* Category Strip Section */
.category-strip-wrapper {
    background: #d4a373; /* Warm Brownish Accent */
    padding: 15px 0;
    margin-bottom: 25px;
}

.category-strip {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
}

.category-strip::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.category-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none !important;
    min-width: 90px;
    text-align: center;
}

.category-item i {
    font-size: 28px;
    margin-bottom: 8px;
}

.category-item span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Floating Rounded Search Bar */
.centered-search-wrapper {
    max-width: 600px;
    margin: -10px auto 30px auto;
    padding: 0 15px;
}

.custom-search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 40px;
    padding: 6px 10px 6px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.custom-search-form .search-icon-left {
    color: #888;
    font-size: 18px;
    margin-right: 10px;
}

.custom-search-form input.field {
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
    font-size: 15px;
    color: #333;
    background: transparent;
}

.custom-search-form .search-btn-round {
    background: #c59b6c;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.custom-search-form .search-btn-round:hover {
    background: #b08558;
    color: #fff;
}

/* Floating WhatsApp Widget */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 55px;
    height: 55px;
    line-height: 55px;
}

.whatsapp-float:hover {
    color: #FFF;
    background-color: #20ba5a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #home-slider .item {
        height: 190px;
        
    }
    .category-strip {
        gap: 12px;
    }
    .category-item span {
        font-size: 10px;
    }
}


.position-relative {
    position: relative;
}

/* Category Strip Container */
.category-strip-wrapper {
    background: #d4a373;
    padding: 15px 0;
    margin-bottom: 25px;
}

.category-strip {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    align-items: center;
    gap: 25px;
    padding: 10px 35px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
    display: none;
}

/* Category Arrow Navigation Buttons */
.category-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #333;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.category-nav-btn:hover {
    background: #f0f0f0;
    transform: translateY(-50%) scale(1.1);
}

.cat-prev {
    left: 5px;
}

.cat-next {
    right: 5px;
}


/* Layout Container */
.new-products-section {
    padding: 30px 0 60px 0;
}

.section-title h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid & Spacing Fixes */
.products-grid {
    margin-left: -10px;
    margin-right: -10px;
}

.product-card-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 25px;
}

/* Card Outer Wrapper */
.food-deal-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.food-deal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* Image Container Styling */
.card-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 85%; /* Aspect Ratio */
    overflow: hidden;
    
    /* Background Image Adjustments */
    background-image: url('../assets/imgs/bg.png') !important;
    background-size: 100% 100% !important; /* Forces full image (wall, floor, lighting) inside container */
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Inside Dish/Food Image Alignment */
.card-img-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    object-fit: contain;
    z-index: 2; /* Food dish background image ke upar sahi layer par rahegi */
}

/* Dark Badge Overlay on Image */
.badge-price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

/* Bottom Details Box */
.card-content {
    padding: 15px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.item-title {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-bottom: 12px;
    display: block;
    line-height: 1.3;
}

.item-title:hover {
    color: #c59b6c;
}

.food-deal-card .card-action-row {
    display: grid;
    align-items: center;
    justify-content: space-between;
}

.food-deal-card .price-text {
    font-size: 16px;
    font-weight: 800;
    color: #000000;
}

/* Golden ADD Button (As in Reference UI) */
.food-deal-card .add-to-cart-btn {
    background: #c59b6c;
    color: #ffffff ;
    font-size: 15px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 8px;
    text-decoration: none ;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

.food-deal-card .add-to-cart-btn:hover {
    background: #a87d4f;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
.food-deal-card    .product-card-col {
        width: 50% !important;
        float: left;
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 14px;
    }

.food-deal-card    .card-content {
        padding: 10px;
    }

.food-deal-card    .item-title {
        font-size: 12px;
        margin-bottom: 8px;
    }

 .food-deal-card   .price-text {
        font-size: 12px;
    }

.food-deal-card  .add-to-cart-btn {
        font-size: 17px;
        padding: 4px 32px;
        border-radius: 6px;
    }
}



/* Sticky Category Strip Wrapper */
.category-strip-wrapper {
    position: -webkit-sticky; /* Safari Browser Support */
    position: sticky;
    top: 82px; /* AGAR SEARCH BAR TOP PAR HAI: Search bar ki height ke hisab se offset set kiya hai */
               /* AGAR SEARCH BAR CHAHIYE HI NAHI YA TOPSIDE PE PEHLE YE HOGI: 'top: 0;' rakhein */
    z-index: 998; /* Sticky Search bar (z-index: 999) ke niche render hone ke liye */
   
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

/* Category Strip Container Settings */
.category-strip {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    padding: 0 40px; /* Nav buttons ke liye space */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.category-strip::-webkit-scrollbar {
    display: none;
}


.category-item:hover,
.category-item.active {
    background: #a87d4f;
    transform: translateY(-2px);
}

/* Navigation Arrows Styling */
.category-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #ffffff;
    border: none;
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.category-nav-btn:hover {
    background: #c59b6c;
    color: #fff;
}

.cat-prev {
    left: 10px;
}

.cat-next {
    right: 10px;
}

/* Mobile Screen Adjustment */
@media (max-width: 767px) {
    .category-strip-wrapper {
        top: 52px; /* Mobile search bar offset */
        padding: 8px 0;
    }

    .category-strip {
        padding: 0 30px;
    }

    .category-item {
        padding: 6px 14px;
        font-size: 11px;
    }

    .category-nav-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}
/***************Shop Page**************/


/* ==========================================
   FOOD MODAL / CARD UI (MATCHES REFERENCE IMAGE)
   ========================================== */

#food-item-modal-view {
    padding-top: 30px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
}

.food-card-popup {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    max-width: 950px;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    font-family: 'Poppins', sans-serif;
}

/* LEFT SIDE: HERO IMAGE & OVERLAY */
.food-hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    background: #2b2520;
    overflow: hidden;
}

.food-hero-image-wrapper .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px 20px 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    color: #ffffff;
}

.food-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
}

.food-short-desc {
    font-size: 13px;
    color: #dddddd;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* RIGHT SIDE: DETAILS & CONTENT */
.food-details-content {
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* Top Bar */
.food-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.main-price {
    font-size: 20px;
    font-weight: 900;
    color: #111111;
}

.old-price {
    font-size: 12px;
    color: #888888;
    text-decoration: line-through;
}

.action-icons {
    display: flex;
    gap: 10px;
}

.icon-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d8af7b; /* Gold Tint Button */
    color: #ffffff !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    text-decoration: none !important;
}

.icon-circle-btn:hover {
    background: #b58d5b;
}

/* Category Pill */
.cat-pill-wrapper {
    margin-bottom: 20px;
}

.cat-pill {
    background: #fdf5eb;
    color: #a9783f;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Section Labels */
.section-label {
    font-size: 12px;
    font-weight: 800;
    color: #333333;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0.5px;
}

/* Option / Variant Card */
.variant-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.variant-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.variant-card.active {
    border-color: #d3a064;
    background: #fdfaf6;
}

.radio-indicator {
    color: #d3a064;
    font-size: 16px;
}

.variant-info {
    display: flex;
    flex-direction: column;
}

.v-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

.v-price {
    font-size: 12px;
    font-weight: 800;
    color: #111;
}

.v-old-price {
    font-size: 10px;
    color: #999;
    text-decoration: line-through;
}

/* Special Instructions Box */
.textarea-box {
    position: relative;
    margin-bottom: 25px;
}

.instruction-input {
    width: 100%;
    height: 90px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    resize: none;
    box-shadow: none !important;
}

.instruction-input:focus {
    border-color: #d3a064;
}

.char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 10px;
    color: #aaa;
}

/* BOTTOM ACTION BAR */
.food-bottom-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

/* Stepper (+/-) */
.quantity-stepper {
    display: flex;
    align-items: center;
    background: #f7edd8;
    border-radius: 12px;
    padding: 4px;
}

.btn-step {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #d3a064;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-step:hover {
    background: #a9783f;
}

.quantity-stepper input {
    width: 35px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: #333;
}

/* Golden Button */
.food-add-cart-btn {
    flex: 1;
    background: #d3a064;
    color: #ffffff !important;
    padding: 12px 8px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(211, 160, 100, 0.4);
}

.food-add-cart-btn:hover {
    background: #a9783f;
    transform: translateY(-1px);
}

.food-add-cart-btn.disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    justify-content: center;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    .food-hero-image-wrapper {
        min-height: 260px;
    }
    
    .food-details-content {
        padding: 18px;
    }

    .main-price {
        font-size: 12px;
    }

    .food-title {
        font-size: 20px;
    }
    .food-add-cart-btn{
        padding: 12px 2px;
        font-size: 12px;
    }
}




/* ==========================================
   HORIZONTAL CATEGORIES & MODERN SHOP UI
   ========================================== */

#shop-page {
    padding-top: 20px;
    padding-bottom: 50px;
}

/* Horizontal Category Bar */
.horizontal-categories-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.categories-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cat-title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1715;
    margin: 0;
    text-transform: uppercase;
}

.cat-title i {
    color: #d3a064;
    margin-right: 6px;
}

.clear-btn {
    font-size: 12px;
    color: #e74c3c !important;
    font-weight: 600;
    text-decoration: none !important;
}

/* Scrollable Horizontal Pills */
.horizontal-categories-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.category-pill-btn {
    background: #f8f6f3;
    color: #444444 !important;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid #eae2d8;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.category-pill-btn:hover,
.category-pill-btn.selected {
    background: #d3a064;
    color: #ffffff !important;
    border-color: #d3a064;
    box-shadow: 0 4px 12px rgba(211, 160, 100, 0.3);
}

/* Modern Filter Bar & Dropdowns */
.shop-filter-bar {
    background: #ffffff;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.custom-select-box .form-control,
.bootstrap-select .btn {
    background-color: #fcfbfa !important;
    border: 1px solid #e2d8cd !important;
    border-radius: 10px !important;
    height: 42px !important;
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.bootstrap-select .btn:focus {
    border-color: #d3a064 !important;
    outline: none !important;
}

/* Stock Toggle Pills */
.stock-toggle-buttons {
    display: flex;
    gap: 6px;
}

.stock-pill {
    flex: 1;
    text-align: center;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    padding: 10px 4px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #666 !important;
    text-decoration: none !important;
}

.stock-pill.selected {
    background: #1a1715;
    color: #ffffff !important;
    border-color: #1a1715;
}

/* Free Shipping Banner */
.free-shipping-bar {
    background: #fdf5eb;
    border: 1px dashed #d3a064;
    color: #a9783f;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
}

/* Product Card Grid */
.food-product-col {
    margin-bottom: 20px;
}

.food-item-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0eae1;
    transition: all 0.25s ease;
}

.food-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.item-img-box {
    width: 100%;
    height: 160px;
    background: #faf8f5;
    overflow: hidden;
}

.item-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    padding: 12px 14px;
}

.item-title {
    font-size: 14px;
    font-weight: 700;
    color: #111111 !important;
    display: block;
    margin-bottom: 10px;
    height: 38px;
    overflow: hidden;
    line-height: 1.3;
    text-decoration: none !important;
}

.item-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-text {
    font-size: 15px;
    font-weight: 800;
    color: #d3a064;
}

.cart-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1715;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none !important;
    transition: background 0.2s;
}

.cart-btn:hover {
    background: #d3a064;
}

.no-results-box {
    background: #ffffff;
    padding: 40px;
    border-radius: 14px;
    text-center: center;
    color: #999;
}

.no-results-box i {
    font-size: 36px;
    margin-bottom: 10px;
    color: #d3a064;
}

/* ==========================================
   CATEGORY SLIDER & HERITAGE FEAST CARD DESIGN
   ========================================== */

/* Slider Container */
.category-slider-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cat-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cat-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin: 0;
    text-transform: uppercase;
}

.cat-slider-container {
    position: relative;
    display: flex;
    align-items: center;
}

.cat-slider-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    padding: 4px 0;
}

.cat-slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.cat-slide-pill {
    background: #f7f4ef;
    color: #444444 !important;
    padding: 9px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid #e2d7c7;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.cat-slide-pill:hover,
.cat-slide-pill.selected {
    background: #d3a064;
    color: #ffffff !important;
    border-color: #d3a064;
    box-shadow: 0 4px 10px rgba(211, 160, 100, 0.3);
}

/* Nav Buttons */
.slide-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #d3a064;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.prev-btn { margin-right: 8px; }
.next-btn { margin-left: 8px; }

/* Filter Toolbar */
.shop-filter-bar {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 25px;
}

/* HERITAGE CARD DESIGN (MATCHING REFERENCE IMAGE) */
.food-card-col {
    margin-bottom: 25px;
}

.heritage-product-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.heritage-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Image Section */
.card-image-box {
    position: relative;
    width: 100%;
    height: 220px;
    background: #2b2520;
    overflow: hidden;
}

.card-image-box .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ffcc00;
    color: #000000;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Card Body Section */
.card-body-box {
    padding: 16px 18px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.card-title {
    font-size: 16px;
    font-weight: 800;
    color: #111111 !important;
    margin-bottom: 6px;
    display: block;
    text-decoration: none !important;
    line-height: 1.3;
}

.card-short-desc {
    font-size: 12px;
    color: #888888;
    margin-bottom: 18px;
    line-height: 1.4;
    min-height: 34px;
}

/* Footer Action Bar */
.card-footer-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.price-val {
    font-size: 16px;
    font-weight: 900;
    color: #111111;
}

.add-golden-btn {
    background: #d3a064;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 22px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background 0.2s ease;
    letter-spacing: 0.5px;
}

.add-golden-btn:hover {
    background: #a9783f;
}


/* ==========================================
   USER-FRIENDLY CART STYLING
   ========================================== */

#shopping-cart {
    margin-top: 30px;
    margin-bottom: 50px;
}

.cart-card-wrapper {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    border: 1px solid #e8e2d9;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cart-heading {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 800;
    color: #1a1715;
    border-bottom: 2px solid #f5efe6;
    padding-bottom: 12px;
}

.cart-heading i {
    color: #d3a064;
    margin-right: 6px;
}

/* Modern Table Layout */
.modern-cart-table {
    margin-bottom: 0;
}

.modern-cart-table thead th {
    background: #fbf9f6;
    border-bottom: 2px solid #e0d7c8 !important;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

.modern-cart-table td {
    vertical-align: middle !important;
    padding: 14px 10px !important;
    border-top: 1px solid #f0eae1 !important;
}

/* Image Box */
.cart-img-box {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    background: #2b2520;
}

.cart-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #111111 !important;
    text-decoration: none !important;
}

.cart-item-title:hover {
    color: #d3a064 !important;
}

/* Quantity Control Pill */
.cart-qty-pill {
    display: inline-block;
    background: #f7f4ef;
    border: 1px solid #e2d7c7;
    border-radius: 20px;
    padding: 3px 8px;
}

.qty-btn-custom {
    background: #ffffff;
    color: #1a1715 !important;
    border: 1px solid #ccc;
    border-radius: 50% !important;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 22px;
    font-size: 10px;
}

.qty-btn-custom:hover {
    background: #d3a064;
    color: #fff !important;
    border-color: #d3a064;
}

.quantity-num {
    font-weight: 800;
    padding: 0 10px;
    font-size: 13px;
}

/* Prices */
.card-action-row  .price-text {
    font-size: 12px;
    color: #000;
}

.total-text {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.total-row td {
    border-top: 2px solid #e0d7c8 !important;
    font-size: 16px;
}

.grand-total-val {
    font-size: 20px;
    font-weight: 900;
    color: #d3a064;
}

/* End-of-row Delete Cross Button */
.remove-btn-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background: #fcebe9;
    color: #e74c3c !important;
    text-align: center;
    font-size: 11px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.remove-btn-circle:hover {
    background: #e74c3c;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Action Buttons */
.cart-actions-row {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #e2d7c7;
}

.btn-gold-custom {
    background-color: #d3a064 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 22px;
    border: none;
    transition: all 0.2s ease;
}

.btn-gold-custom:hover {
    background-color: #a9783f !important;
}

.btn-dark-custom {
    background-color: #1a1715 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 22px;
    border: none;
    transition: all 0.2s ease;
}

.btn-dark-custom:hover {
    background-color: #333333 !important;
}

/* Empty State */
.cart-empty-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.empty-cart-icon {
    font-size: 45px;
    color: #d3a064;
    margin-bottom: 15px;
}
/* Mobile Sidebar Close Button */
.sidebar-close {
    display: none;
}

@media (max-width: 767px) {

    #navbar {
        position: relative;
    }

    .sidebar-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 15px;
        z-index: 9999;
        width: 38px;
        height: 38px;
        border: 0;
        background: transparent;
        color: #333;
        font-size: 24px;
        line-height: 38px;
        text-align: center;
        padding: 0;
        cursor: pointer;
    }

    .sidebar-close:hover,
    .sidebar-close:focus {
        color: #d9534f;
        outline: none;
    }

    #navbar .nav {
        padding-top: 50px;
    }
}
    .sidebar-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 15px;
        z-index: 9999;
        width: 38px;
        height: 38px;
        border: 0;
        background: transparent;
        color: #333;
        font-size: 24px;
        line-height: 38px;
        text-align: center;
        padding: 0;
        cursor: pointer;
    }

    .sidebar-close:hover,
    .sidebar-close:focus {
        color: #d9534f;
        outline: none;
    }

    #navbar .nav {
        padding-top: 50px;
    }


    @media (max-width: 767px) {
    /* Header Row reset */
    .row.header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo Column container setup */
    .header .col-md-4.col-xs-12 {
        width: auto;
        float: left;
        padding-left: 10px;
        padding-right: 0;
        margin: 0;
    }

    /* Logo link and image alignment */
    .header .logo, 
    .header .logo a {
        display: block;
        text-align: left;
    }

    .header .logo img {
        margin: 0 !important;
    }
}
/* Phone icon via CSS pseudo-element */
.header .phone::before {
    content: "\f095"; /* FontAwesome Phone Icon Code */
    font-family: "FontAwesome";
    margin-right: 8px;
    color: #333;
    background-color: #f0f0f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}



/* Mobile View (Sirf Icon Show Hoga) */
@media (max-width: 767px) {
   /* Phone icon via CSS pseudo-element */
.header .phone::before {
 content: "\f095"; /* FontAwesome Phone Icon Code */
    font-family: "FontAwesome";
    margin-right: 8px;
    color: #333;
    background-color: #f0f0f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.header .phone {
    
    background: #fff;
    padding: 4px;
    border-radius: 45px;
    margin-left: -25px;
}
}


/* ==========================================================
   CATEGORY SECTION BACKGROUND IMAGES
   Path: ../assets/imgs/  |  Format: .webp
   Har category ke "data-cat-id" k hisab se background lagayi gayi hai
   ========================================================== */

/* Default / Fallback background — agar kisi category ka ID CSS mein na ho */
.category-block .section-title {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 35px 30px;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;              /* left align */
}

/* Dark overlay - taake text saaf nazar aaye */
.category-block .section-title::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
    z-index: 1;
}

.category-block .section-title h2 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #ff8c00;   /* underline accent - apni brand color se badal lein */
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ---------- ID = 3  ->  SALADS ---------- */
.category-block[data-cat-id="3"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 20  ->  Chinese Starters & Gravies ---------- */
.category-block[data-cat-id="20"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 8  ->  CURRIES ---------- */
.category-block[data-cat-id="8"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 5  ->  STARTERS - FISH, PRAWNS & VEG ---------- */
.category-block[data-cat-id="5"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 2  ->  SOUPS ---------- */
.category-block[data-cat-id="2"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 19  ->  BEVERAGES & EXTRAS ---------- */
.category-block[data-cat-id="19"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 7  ->  INDIAN RICE & BIRYANI ---------- */
.category-block[data-cat-id="7"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 4  ->  STARTERS - CHICKEN ---------- */
.category-block[data-cat-id="4"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

/* ---------- ID = 6  ->  THALIS ---------- */
.category-block[data-cat-id="6"] .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}
.category-block .section-title {
    background-image: url('../assets/imgs/cate.jpg');
}

#blog-detail-page {
    padding: 40px 0 50px;
}

/* ===== Sidebar / Archives ===== */
.left-col-archive {
    margin-bottom: 25px;
}

.archive-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}

.archive-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-box li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 10px 0;
}

.archive-box li:last-child {
    border-bottom: none;
}

.archive-box a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: block;
}

.archive-box a:hover {
    color: #d4af37;
    padding-left: 5px;
    text-decoration: none;
}

.btn-back-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    background: #d4af37;
    color: #1a1a1a;
    padding: 12px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    transition: background 0.3s ease;
}

.btn-back-blog:hover {
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
}

/* ===== Main Article Card ===== */
.blog-article-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 30px;
}

.blog-preview-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d4af37;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.blog-article-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 22px 0;
}

/* Image normal/slider-type size (contained height, not full stretch) */
.blog-article-thumb {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
    max-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.2);
}

.blog-article-thumb img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-article-thumb:hover img {
    transform: scale(1.03);
}

.blog-description {
    color: #d9d9d9;
    font-size: 16px;
    line-height: 1.9;
}

.blog-description p {
    margin-bottom: 18px;
}

.blog-description img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 0;
}

.blog-description h1,
.blog-description h2,
.blog-description h3,
.blog-description h4 {
    color: #fff;
    font-weight: 700;
    margin: 25px 0 15px;
}

.blog-description a {
    color: #d4af37;
    text-decoration: underline;
}

.blog-description strong,
.blog-description b {
    color: #fff;
}

.blog-description blockquote {
    border-left: 4px solid #d4af37;
    padding: 10px 20px;
    margin: 20px 0;
    background: rgba(255,255,255,0.05);
    color: #e0e0e0;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 991px) {
    .blog-article-title {
        font-size: 24px;
    }
    .blog-article-card {
        padding: 24px;
    }
    .blog-article-thumb,
    .blog-article-thumb img {
        max-height: 320px;
        height: 320px;
    }
}

@media (max-width: 767px) {
    #blog-detail-page {
        padding: 25px 0 35px;
    }
    .blog-article-card {
        padding: 18px;
        border-radius: 10px;
    }
    .blog-article-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .blog-description {
        font-size: 15px;
        line-height: 1.75;
    }
    .archive-box {
        padding: 16px;
    }
    .blog-article-thumb,
    .blog-article-thumb img {
        max-height: 240px;
        height: 240px;
    }
}

@media (max-width: 480px) {
    .blog-article-title {
        font-size: 18px;
    }
    .blog-article-thumb,
    .blog-article-thumb img {
        max-height: 200px;
        height: 200px;
    }
}
#blog {
    padding: 40px 0;
}

.blog-col {
    margin-bottom: 30px;
}

.blog-list {
    background: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-list:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.blog-list .img-container {
    position: relative;
    display: block;
    overflow: hidden;
    height: 220px;
}

.blog-list .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-list:hover .img-container img {
    transform: scale(1.08);
}

.blog-list .img-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-list:hover .img-overlay {
    opacity: 1;
}

.blog-list .caption {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    color: #d4af37;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.blog-date i {
    margin-right: 5px;
}

.blog-list h5 {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.blog-list h5 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-list h5 a:hover {
    color: #d4af37;
}

.blog-list .description {
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    flex: 1;
}

.blog-list .btn-blog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1a1a1a;
    color: #fff;
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.3s ease, gap 0.3s ease;
}

.blog-list .btn-blog:hover {
    background: #d4af37;
    color: #fff;
    gap: 10px;
    text-decoration: none;
}

.blog-pagination {
    margin-top: 20px;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 991px) {
    .blog-list .img-container {
        height: 200px;
    }
}

@media (max-width: 767px) {
    #blog {
        padding: 25px 0;
    }
    .blog-col {
        margin-bottom: 20px;
    }
    .blog-list .img-container {
        height: 220px;
    }
    .blog-list .caption {
        padding: 16px;
    }
    .blog-list h5 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .blog-list .img-container {
        height: 190px;
    }
}