@charset "utf-8";
/* CSS Document */

/* CSS Document © 2025 ENVINTO */
/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

@font-face {
    font-family: 'Brittany Signature';
    src: url('../fonts/BrittanySignatureRegular.eot');
    src: url('../fonts/BrittanySignatureRegular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BrittanySignatureRegular.woff2') format('woff2'),
        url('../fonts/BrittanySignatureRegular.woff') format('woff'),
        url('../fonts/BrittanySignatureRegular.ttf') format('truetype'),
        url('../fonts/BrittanySignatureRegular.svg#BrittanySignatureRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */

::-moz-selection{ background:#7b7d7f; color:var(--global); text-shadow:none;}
::selection { background:#7b7d7f; color:var(--global); text-shadow:none;}
*,
*:before, *:after{-webkit-box-sizing:  border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, textarea, input { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none;font-family: "Poppins", sans-serif;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {color:#000000; background:#ffffff; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow:hidden; overflow-y: scroll; scroll-behavior: smooth;}
:root { --primary: #834336; --secondary:#dac2bd; --global: #000000;}
a { text-decoration:none; transition:all 0.25s ease-out 0s; outline: none; box-shadow: none;}
a:hover{text-decoration: none;}
h1, h2, h3 , h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-family: "Roboto Condensed", sans-serif;}
p, p span {font-family: "Poppins", sans-serif;}
img { border:0px;}
ol, ul, li{ list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
* {-webkit-appearance: none;}
::-webkit-input-placeholder {color:var(--primary);}
::-moz-placeholder {color:var(--primary);}
:-ms-input-placeholder {color:var(--primary);}
:-moz-placeholder {color:var(--primary);}

section, header, footer {width: 100%; float: left;}

img{max-width: 100%; display: block;}

strong{font-weight: bold;}

.container{max-width: 1400px; margin: 0 auto;padding: 0px 15px;}

strong{font-weight: bold;}


.error-page-section {background:#834336;}
.error-page-row {max-width: 800px; margin: 50px auto;}
.error-page-col1 h1 {font-size: 40px;color: #ffffff;}
.error-page-col1 h2 {font-size: 40px;font-weight: 700;margin: 0 0 20px;color: #ffffff;}
.error-page-col1 p {font-size: 16px;font-weight: 600;line-height: 1.67;margin: 0 0 22px;color: #ffffff;}
.search-form { width: 100%; display: flex; align-items: center;}
.search-form input {width: 197px;height: 45px;border: 1px solid #000;margin: 0 7px 0 0;padding: 0 10px;color: #000;outline: none;box-shadow: none;display: inline-block;border-radius: 80px;}
.search-form .search-submit {width: auto;height: 45px;display: inline-block;padding: 0 25px;color: #ffff;border: 1px solid #000;background: #000;transition: all 0.25s ease-in-out;border-radius: 80px;}
.search-form .search-submit .screen-reader-text { position: relative !important;  display: block;  height: auto;  width: auto;  color: #ffff;  clip-path: none;  transition: all 0.25s ease-in-out;}
.search-form .search-submit:hover { color: #000; background: none;}
.search-form .search-submit:hover .screen-reader-text { color: #000;}
.search-form input::placeholder { color: #000;}
.search-page-section {padding: 80px 0px;background: #ffff;}
.search-page-row {  max-width: 1320px;  margin: 0 auto;}
.search-page-row .page-header .page-title {font-size: 40px;margin: 0 0 35px;display: flex;color: #000;font-weight: 500;}
.search-page-card {  margin: 0 0 50px;}
.search-page-content { padding: 0; max-width: inherit;  width: 100%;  text-align: left;  flex: 1 0 0;}
.search-page-content h3 {font-size: 32px;color:var(--primary);font-weight: 500;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid var(--primary);}
.search-page-content p {font-size: 16px;font-weight: 500;line-height: 1.67;margin: 0 0 22px;color: #000;}
.search-btn1 {padding: 12px 24px;background-color: var(--primary);border-radius: 80px;color: #ffffff;border: 1px solid #000;transition: 0.3s all ease-in-out;font-size: 16px;font-weight: 400;display: inline-block;margin: 10px auto 0;}
.search-btn1:hover {background-color: #ffffff;color: #834336;}





.everest-forms input{width: 100% !important;padding: 12px !important;border: 1px solid #ccc !important;border-radius: 12px !important;font-size: 15px !important;font-family: inherit !important;margin-bottom: 0;}
.everest-forms textarea{width: 100% !important;padding: 12px !important;border: 1px solid #ccc !important;border-radius: 12px !important;font-size: 15px !important;font-family: inherit !important;margin-bottom: 0;}
.everest-forms button.button:not(.button-large), .everest-forms button[type=submit]{background: #834336 !important;color: white !important;padding: 14px 30px !important;font-size: 16px !important;border: none !important;border-radius: 25px !important;cursor: pointer !important;transition: 0.3s ease !important;}
.everest-forms button.button:not(.button-large):hover,.everest-forms button[type=submit]:hover {background: #000c57 !important;}



.inner-banner {position: relative;}
.inner-banner .bg-img { width: 100%;position: relative;}
.inner-banner .bg-img::after{position: absolute;background-color: #000;opacity: 0.4;content: "";width: 100%; height: 100%; top: 0;left: 0;}
.inner-banner img { width: 100%; max-height: 350px; object-fit: cover;}
.inner-banner .inner-content { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; z-index: 1;}
.inner-banner h2 {font-size: 4rem; color: #fff; font-weight: 500;}




.defualt-page-section {padding: 60px 0; background: #fff;}
.content-wrapp h2 { font-size: 46px; font-weight: 500; color: var(--primary); margin: 0 0 20px;}
.content-wrapp p { font-size: 16px; color:#000; line-height: 1.8; margin: 0 0 20px;}
.content-wrapp ul {width: 100%; margin: 0 0 20px;}
.content-wrapp ul li { font-size: 16px; line-height: 1.8; color: var(--primary); padding-left: 10px; position: relative;}
.content-wrapp ul li:before { content: "\2022"; position: absolute; left: 0; top: 0;}
.content-wrapp ol { width: 100%;float: none; counter-reset: my-awesome-counter; margin: 0 auto 28px;position: relative;}
.content-wrapp ol li {font-size: 16px; line-height: 1.8; color: var(--primary); padding-left: 20px;position: relative;counter-increment: step-counter;}
.content-wrapp ol li:before { content: counter(step-counter) '.'; margin-right: 0px; position: absolute; left: -4px; top: 0;}
.content-wrapp p a, .content-wrapp ul li a, .content-wrapp ol li a{color:var(--primary);}
.content-wrapp p a:hover, .content-wrapp ul li a:hover, .content-wrapp ol li a:hover{color: #000000;}




.whatsapp-iconbtn{ position: fixed; bottom: 70px; right: 10px; z-index: 9999;background:var(--primary);padding: 15px;border-radius: 11px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.whatsapp-iconbtn img { width: 50px; height: 50px; }
.whatsapp-iconbtn h3{font-size: 12px;text-align: center;color: var(--primary);margin: 0 0 10px;}




.html5-title{display: none !important;}
#html5lightbox-watermark{display: none !important;}
.html5-elem-data-box{display: none !important;}
.html5-image{padding: 0px !important;}
.mh-icon-right {background: #000000 url(../images/chevron-right-solid.svg) no-repeat center / 12px;}
.mh-icon-left {background: #000000 url(../images/chevron-left-solid.svg) no-repeat center / 12px;}
.html5-timer{height: 0 !important;}
.html5-image-img{height: 100% !important;}




.slick-prev, .slick-next{display: none !important;}
.overlay{display: none;}
.burger-btn{display: none;}





.header-wrap.sticky{position: fixed;top: 0;left: 0;z-index: 999;background:#fff;animation: .7s slide-down;box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;}
.header-wrap.sticky .menu-list ul li a{color:var(--primary);}
.header-wrap.sticky .header-sec{padding: 0;margin: 10px 0px;}
.header-wrap.sticky .header-sec .header-col .logo img{height: 50px;}

@keyframes slide-down {0% {transform: translateY(-100%);} 100% {transform: translateY(0);}}

.cssbuttons-io-button {background: var(--primary);color: white;font-family: inherit;padding: 0.35em;padding-left: 1.2em;font-size: 17px;font-weight: 500;border-radius: 0.9em;border: none;letter-spacing: 0.05em;display: flex;align-items: center;box-shadow: inset 0 0 1.6em -0.6em var(--primary);overflow: hidden;position: relative;height: 2.8em;padding-right: 3.3em;cursor: pointer;}
.cssbuttons-io-button .icon {background: white;margin-left: 1em;position: absolute;display: flex;align-items: center;justify-content: center;height: 2.2em;width: 2.2em;border-radius: 0.7em;box-shadow: 0.1em 0.1em 0.6em 0.2em var(--primary);right: 0.3em;transition: all 0.3s;}
.cssbuttons-io-button:hover .icon {width: calc(100% - 0.6em);}
.cssbuttons-io-button .icon svg { width: 1.1em; transition: transform 0.3s; color:var(--primary);}
.cssbuttons-io-button:hover .icon svg {transform: translateX(0.1em);}
.cssbuttons-io-button:active .icon { transform: scale(0.95);}







.header-wrap{width: 100%; background: #fff;position: relative; z-index: 10;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;}
.header-row{display: flex; align-items: center; justify-content: space-between;padding: 20px 0px;}
.header-logo img{height: 60px; width: auto;}
.header-menu ul{display: flex; align-items: center; justify-content: center; list-style: none;}
.header-menu ul li{margin: 0 25px; position: relative;}
.header-menu ul li a{color: var(--primary); font-size: 16px;font-weight: 500; text-decoration: none; transition: color 0.3s;}








.banner-sec{padding: 60px 0px;position: relative;z-index: 5;overflow: hidden;}
.banner-bg img{width: 100%; height: 90vh; object-fit: cover; position: absolute; top: 0; left: 0;object-position: center;}
.banner-bg::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 90vh; background-color: rgba(0, 0, 0, 0.5);}
.banner-image{width: 500px;height: 500px;object-fit: cover;border-radius: 50%;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;display:flex;margin: 0 auto;background-color: #fff;align-items: center;justify-content: center;position: relative;}
.banner-head h1{font-size: 4rem; font-weight: 700; color:#fff; text-align: center; margin: 20px 0;opacity: 0; transform: translateY(30px);}
.banner-row{display: flex !important; align-items: center;position: relative; z-index: 10;max-width: 1100px;justify-content:space-between;margin: 0 auto;}
.banner-image img{opacity: 0; transform: scale(0.8);}
.banner-image img:hover {transform: scale(1.05); transition: transform 0.3s ease;}
.floating-particles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 2;}
.particle {position: absolute;background: rgba(255, 255, 255, 0.15);border-radius: 50%;animation: float 6s ease-in-out infinite;border: 1px solid rgba(131, 67, 54, 0.2);}
.particle-1 {width: 20px;height: 20px;top: 20%;left: 10%;animation-delay: 0s;background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(131, 67, 54, 0.1));}
.particle-2 {width: 15px;height: 15px;top: 60%;left: 80%;animation-delay: 1s;background: rgba(131, 67, 54, 0.15);}
.particle-3 {width: 25px;height: 25px;top: 80%;left: 20%;animation-delay: 2s;background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(131, 67, 54, 0.2));}
.particle-4 {width: 12px;height: 12px;top: 30%;left: 70%;animation-delay: 3s;background: rgba(255, 255, 255, 0.2);}
.particle-5 { width: 18px; height: 18px; top: 70%;left: 60%;animation-delay: 4s;background: rgba(131, 67, 54, 0.1);}



/* Decorative Elements */
.decorative-elements {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}
.decor-circle {position: absolute;border: 2px solid rgba(255, 255, 255, 0.1);border-radius: 50%;animation: rotate 20s linear infinite;background: linear-gradient(45deg, rgba(131, 67, 54, 0.05), rgba(255, 255, 255, 0.05));}
.decor-1 {width: 200px;height: 200px;top: 10%;right: 10%;}
.decor-2 {width: 150px;height: 150px;bottom: 20%;left: 5%;animation-direction: reverse;border-color: rgba(131, 67, 54, 0.15);}
.decor-line {position: absolute;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), rgba(131, 67, 54, 0.1), transparent);height: 1px;animation: slide 8s ease-in-out infinite;}
.decor-line-1 {width: 300px;top: 30%;left: -300px;}
.decor-line-2 {width: 200px;bottom: 40%;right: -200px;animation-delay: 4s;background: linear-gradient(90deg, transparent, rgba(131, 67, 54, 0.1), rgba(255, 255, 255, 0.1), transparent);}
.badge {background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;padding: 10px 20px;border-radius: 25px;font-size: 14px;font-weight: 600;margin-bottom: 10px;opacity: 0;transform: translateY(-20px);
animation: slideInBadge 0.6s ease-out forwards;display: flex;justify-content: center;align-items: center;width: fit-content;margin: 0 auto;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 15px rgba(131, 67, 54, 0.4);}
.animate-badge {animation: slideInBadge 0.6s ease-out forwards;}
.banner-subtitle {color: rgba(255, 255, 255, 0.95);font-size: 18px;line-height: 1.6;margin: 20px 0;text-align: center;opacity: 0;transform: translateY(20px);text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.animate-subtitle {animation: slideInSubtitle 0.8s ease-out 0.3s forwards;}
.feature-highlights {display: flex;justify-content: center;gap: 30px;margin: 30px 0;flex-wrap: wrap;}
.feature-item {display: flex;align-items: center;gap: 10px;color: white;font-size: 14px;font-weight: 600;opacity: 0;transform: translateY(20px);background: rgba(255, 255, 255, 0.1);padding: 8px 16px;border-radius: 20px;border: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.feature-item i {color: var(--primary); font-size: 18px; background: white; padding: 6px; border-radius: 50%;box-shadow: 0 2px 8px rgba(131, 67, 54, 0.3);}
.animate-feature {animation: slideInFeature 0.6s ease-out forwards;}
.animate-feature:nth-child(1) { animation-delay: 0.5s; }
.animate-feature:nth-child(2) { animation-delay: 0.7s; }
.animate-feature:nth-child(3) { animation-delay: 0.9s; }





.banner-actions {display: flex;justify-content: center;gap: 20px;margin: 30px 0;flex-wrap: wrap;}
.btn-primary, .btn-secondary {display: flex;align-items: center;gap: 10px;padding: 15px 30px;border: none;border-radius: 50px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;opacity: 0;transform: translateY(30px);}
.btn-primary {background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;box-shadow: 0 4px 15px rgba(131, 67, 54, 0.4);border: 2px solid rgba(255, 255, 255, 0.2);}
.btn-secondary {background: rgba(255, 255, 255, 0.95);color: var(--primary);border: 2px solid rgba(255, 255, 255, 0.8);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
.btn-primary:hover {transform: translateY(-3px);box-shadow: 0 8px 25px rgba(131, 67, 54, 0.5);
background: linear-gradient(45deg, #5a2d1f, var(--primary));}
.btn-secondary:hover {background: white;transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}
.animate-btn {animation: slideInButton 0.8s ease-out forwards;}
.animate-btn:nth-child(1) { animation-delay: 1.1s; }
.animate-btn:nth-child(2) { animation-delay: 1.3s; }
.image-badge {position: absolute;top: 20px;right: 20px;background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;padding: 8px 16px;border-radius: 20px;font-size: 12px;font-weight: 600;opacity: 0;
transform: scale(0.8);animation: slideInImageBadge 0.8s ease-out 0.5s forwards;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 15px rgba(131, 67, 54, 0.4);}




.scroll-indicator {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);text-align: center;color: white;z-index: 10;}
.scroll-text {font-size: 14px;margin-bottom: 10px;opacity: 0;animation: fadeInScroll 1s ease-out 2s forwards;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.scroll-arrow {animation: bounce 2s infinite; opacity: 0;animation-delay: 2.5s;animation-fill-mode: forwards;}
.scroll-arrow i {font-size: 20px;color: white;background: var(--primary);padding: 8px;border-radius: 50%;box-shadow: 0 4px 15px rgba(131, 67, 54, 0.4);}
.animate-text {animation: slideInText 0.8s ease-out forwards;}
.animate-image {animation: slideInImage 1s ease-out forwards;}
.banner-head h1:hover {transform: scale(1.02);transition: transform 0.3s ease;}
.banner-image img:hover {transform: scale(1.05); transition: transform 0.3s ease;}
.banner-head h1,.banner-image img {transition: all 0.3s ease;}




@keyframes float {0% {transform: translateY(0px) rotate(0deg); opacity: 0.3;} 50% {transform: translateY(-20px) rotate(180deg); opacity: 0.8;} 100% {transform: translateY(0px) rotate(360deg); opacity: 0.3;}}


@keyframes rotate {from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

@keyframes slide {0% { transform: translateX(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(600px); opacity: 0; }}

@keyframes slideInBadge {0% {opacity: 0; transform: translateY(-20px);} 100% {opacity: 1; transform: translateY(0);}}

@keyframes slideInSubtitle {0% {opacity: 0; transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);}}

@keyframes slideInFeature {0% {opacity: 0; transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);}}

@keyframes slideInButton {0% {opacity: 0; transform: translateY(30px);} 100% {opacity: 1; transform: translateY(0);}}

@keyframes slideInImageBadge {0% {opacity: 0; transform: scale(0.8);} 100% {opacity: 1; transform: scale(1);}}

@keyframes slideInText {0% {opacity: 0; transform: translateY(30px);} 100% {opacity: 1; transform: translateY(0);}}

@keyframes fadeInScroll {0% { opacity: 0; } 100% { opacity: 1; }}

@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0); opacity: 1;} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}}

@keyframes slideInImage {0% {opacity: 0; transform: scale(0.8);} 50% {opacity: 0.5; transform: scale(0.9);} 100% {opacity: 1; transform: scale(1);}}

/* Enhanced bounce animation for images */
@keyframes bounce-top {0% {transform: translateY(-45px); animation-timing-function: ease-in; opacity: 1;} 24% {opacity: 1;} 40% {transform: translateY(-24px); animation-timing-function: ease-in;} 65% {transform: translateY(-20px); animation-timing-function: ease-in;} 82% {transform: translateY(-5px); animation-timing-function: ease-in;} 93% {transform: translateY(-4px); animation-timing-function: ease-in;} 25%, 55%, 75%, 87% {transform: translateY(0px); animation-timing-function: ease-out;} 100% {transform: translateY(0px); animation-timing-function: ease-out; opacity: 1;}}





.special-sec {padding: 50px 0;background: #ffffff;position: relative;}
.section-header {text-align: center;margin-bottom: 30px;}
.section-header h2 {font-size: 3rem;font-weight: 700;color: var(--primary);margin-bottom: 15px;}
.section-header p {font-size: 18px;color:#000;max-width: 600px;margin: 0 auto;line-height: 1.6}
.products-row {display: flex;justify-content: center;align-items: center;gap: 50px;flex-wrap: wrap;margin: 0 auto;}
.product-item {display: flex;flex-direction: column;align-items: center;gap: 15px;cursor: pointer;transition: all 0.3s ease;}
.product-circle {width: 200px;height: 200px;border-radius: 50%;background: #ffffff;display: flex;align-items: center;justify-content: center;border: 2px solid #dac2bd;transition: all 0.3s ease;overflow: hidden;position: relative;}
.product-item:hover .product-circle {border-color: var(--primary);transform: scale(1.05);}
.product-item.active .product-circle {background: #f5e6e3;border: 2px dashed #dac2bd;}
.product-circle img {width: 150px;height: 150px;object-fit: cover;border-radius: 50%;transition: all 0.3s ease;}
.product-item:hover .product-circle img {transform: scale(1.1);}
.product-item h3 {font-size: 16px;font-weight: 600;color: var(--primary);text-align: center;margin: 0;transition: all 0.3s ease;}
.product-item:hover h3 {color: var(--primary);transform: translateY(-2px);}
.product-item.active h3 {color: #dac2bd;}
.product-item:hover {transform: translateY(-5px);}
.product-item.active:hover {transform: translateY(-5px) scale(1.02);}






.products-section {padding: 50px 0;background:#fff;position: relative;overflow: hidden;}
.products-section .section-header {text-align: center;margin-bottom: 50px;position: relative;z-index: 2;}
.products-section .header-badge {display: inline-block;background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;padding: 12px 28px;border-radius: 30px;font-size: 14px;font-weight: 600;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 6px 20px rgba(131, 67, 54, 0.3);animation: slideInBadge 0.8s ease-out forwards;position: relative;overflow: hidden;}
.products-section .header-badge::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease;}
.products-section .header-badge:hover::before {left: 100%;}
.products-section .section-header h2 {font-size: 3rem;font-weight: 700;color: var(--primary);margin-bottom: 10px;animation: slideInText 0.8s ease-out 0.3s forwards;opacity: 0;transform: translateY(30px);text-shadow: 0 2px 10px rgba(131, 67, 54, 0.1);}
.products-section .section-header p {font-size: 20px;color: #000;max-width: 700px;margin: 0 auto;line-height: 1.7;animation: slideInSubtitle 0.8s ease-out 0.6s forwards;opacity: 0;transform: translateY(20px);}
.products-grid {display: flex;align-items: center;justify-content:flex-start;position: relative;z-index: 2;flex-wrap: wrap;}
.product-card {margin: 1%; background:#f8f5f3; border-radius: 20px; padding: 15px; box-shadow: 0 15px 35px rgba(131, 67, 54, 0.08),0 5px 15px rgba(0, 0, 0, 0.05),inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; animation: slideInImage 0.8s ease-out forwards; opacity: 0; transform: scale(0.8); border: 1px solid rgba(131, 67, 54, 0.8);}
.product-card:hover {transform: translateY(-15px) scale(1.03);box-shadow: 0 25px 60px rgba(131, 67, 54, 0.15),0 10px 30px rgba(0, 0, 0, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.9);border-radius: 20px;}
.product-card:hover::before {opacity: 1;}
.product-card:hover::after { opacity: 1;}
.product-image {position: relative;width: 100%;height: 250px;border-radius: 20px;overflow: hidden;margin-bottom: 15px;background: linear-gradient(135deg, #f8f5f3, #f0ebe8);box-shadow: 0 8px 25px rgba(131, 67, 54, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.8);border: 1px solid rgba(131, 67, 54, 0.1);}
.product-image img {width: 100%;height: 100%;object-fit: cover;transition: all 0.5s ease;filter: brightness(1.05) contrast(1.1);}
.product-card:hover .product-image img {transform: scale(1.15); filter: brightness(1.1) contrast(1.15);}
.product-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(131, 67, 54, 0.95), rgba(90, 45, 31, 0.95));display: flex;align-items: center;justify-content: center;opacity: 0;transition: all 0.4s ease;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border-radius: 20px;}
.product-card:hover .product-overlay {opacity: 1;}
/* Old Order Button Styles - REMOVED */
.product-info {position: relative;z-index: 2;}
.product-info h3 {font-size: 24px;font-weight: 700;color: var(--primary);margin-bottom: 15px;text-align: center;transition: color 0.3s ease;text-shadow: 0 1px 3px rgba(131, 67, 54, 0.1);letter-spacing: 0.5px;}
.product-card:hover .product-info h3 {color: var(--primary);transform: translateY(-2px);}
.price-info {display: flex;align-items: center;justify-content: center;gap: 8px;margin-top: 0px;
padding: 10px;background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.05));border-radius: 15px;border: 1px solid rgba(131, 67, 54, 0.1);}
.price {font-size:1.5rem;font-weight: 700;color: var(--primary);text-shadow: 0 1px 3px rgba(131, 67, 54, 0.1);}
.unit {font-size: 14px;color:#7b7d7f;font-weight: 500;letter-spacing: 0.5px;}








.about-section {padding: 50px 0;background: #834336;position: relative;overflow: hidden;}
.about-content {display:flex;gap: 50px;align-items: center;position: relative;z-index: 2;}
.about-left {position: relative;width: 48%;}
.welcome-badge {display: inline-block;background: linear-gradient(135deg, var(--primary), #5a2d1f, var(--primary));
color: white;padding: 12px 28px;border-radius: 30px;font-size: 15px;font-weight: 600;margin-bottom: 10px;
border: 2px solid rgba(255, 255, 255, 0.4);box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3),0 4px 15px rgba(0, 0, 0, 0.1);animation: slideInBadge 0.8s ease-out forwards;opacity: 0;transform: translateY(-20px);position: relative;overflow: hidden;}
.welcome-badge::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.8s ease;}
.welcome-badge:hover::before {left: 100%;}
.about-head {font-size: 3rem;font-weight: 700;color:#fff;margin-bottom: 20px;line-height: 1.1;position: relative;letter-spacing: -0.5px;}
.about-left .about-description {font-size: 18px;color: var(--secondary);line-height: 1.8;margin-bottom: 20px;animation: slideInSubtitle 0.8s ease-out 0.6s forwards;opacity: 0;transform: translateY(20px);text-shadow: 0 1px 3px rgba(131, 67, 54, 0.05);padding: 0px 0px 0px;}
.about-features {display: flex;flex-direction: column;gap: 20px;margin-bottom: 30px;}
.about-section .feature-item {display: flex;align-items: center;gap: 20px;padding: 10px;background: #fff;border-radius: 20px;border: 1px solid rgba(131, 67, 54, 0.12);box-shadow: 0 8px 25px rgba(131, 67, 54, 0.1),0 4px 15px rgba(0, 0, 0, 0.05);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);animation: slideInFeature 0.6s ease-out forwards;opacity: 0;transform: translateY(20px);position: relative;overflow: hidden;}
.about-section .feature-item::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;
background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.05));opacity: 0;transition: opacity 0.3s ease;}
.about-section .feature-item:nth-child(1) { animation-delay: 0.9s; }
.about-section .feature-item:nth-child(2) { animation-delay: 1.1s; }
.about-section .feature-item:nth-child(3) { animation-delay: 1.3s; }
.about-section .feature-item:hover {transform: translateX(15px) translateY(-2px);box-shadow: 0 15px 40px rgba(131, 67, 54, 0.2),0 8px 25px rgba(0, 0, 0, 0.1);background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 245, 243, 0.95));border-color: rgba(131, 67, 54, 0.2);}
.about-section .feature-item:hover::before {opacity: 1;}
.about-section .feature-icon {font-size: 28px;background: linear-gradient(45deg, var(--primary), var(--secondary));
-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;filter: drop-shadow(0 2px 4px rgba(131, 67, 54, 0.2));}
.about-section .feature-item span {font-size: 18px;font-weight: 700;color: var(--primary);letter-spacing: 0.5px;}
.about-btn {background: linear-gradient(135deg, var(--primary), #5a2d1f, var(--primary));color: white;border: none;padding: 10px 30px;border-radius: 50px;font-size: 17px;font-weight: 700;cursor: pointer;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3),0 4px 15px rgba(0, 0, 0, 0.1);position: relative;overflow: hidden;animation: slideInButton 0.8s ease-out 1.5s forwards;opacity: 0;transform: translateY(30px);display: flex;align-items: center;gap: 12px;letter-spacing: 0.5px;border: 2px solid rgba(255, 255, 255, 0.2);max-width: fit-content;}
.about-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: left 0.8s ease;}
.about-btn:hover::before {left: 100%;}
.about-btn:hover {transform: translateY(-5px) scale(1.02);box-shadow:  0 15px 45px rgba(131, 67, 54, 0.4), 0 8px 25px rgba(0, 0, 0, 0.15);background: linear-gradient(135deg, #5a2d1f, var(--primary), #5a2d1f);}
.btn-dot {font-size: 14px;color: white;animation: bounce 2s infinite;}
.about-right {position: relative;width: 48%;}
.about-images {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;margin-bottom: 40px;}
.about-images .image-container {position: relative;border-radius: 20px;overflow: hidden;box-shadow: 0 12px 35px rgba(131, 67, 54, 0.2),0 6px 20px rgba(0, 0, 0, 0.1);transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);animation: slideInImage 0.8s ease-out forwards;opacity: 0;transform: scale(0.8);border: 2px solid rgba(131, 67, 54, 0.1);}
.about-images .image-container .img-1 { animation-delay: 0.7s; }
.about-images .image-container .img-2 { animation-delay: 0.9s; }
.about-images .image-container .img-3 { animation-delay: 1.1s; }
.image-container:hover {transform: translateY(-8px) scale(1.03);box-shadow: 0 20px 50px rgba(131, 67, 54, 0.3),0 10px 30px rgba(0, 0, 0, 0.15);border-color: rgba(131, 67, 54, 0.2);}
.image-container img {width: 100%;height: 180px;object-fit: cover;transition: all 0.5s ease;filter: brightness(1.05) contrast(1.1);}
.image-container:hover img {transform: scale(1.15); filter: brightness(1.1) contrast(1.15);}
.image-container:hover .image-overlay {opacity: 1;}
.img-1 {grid-column: 1 / 2;grid-row: 1 / 2;}
.img-2 {grid-column: 2 / 3;grid-row: 1 / 3;height: 380px;}
.img-2 img {height: 100%;}
.img-3 {grid-column: 1 / 2;grid-row: 2 / 3;}
.about-story {background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 245, 243, 0.95));padding: 35px;border-radius: 25px;border: 2px solid rgba(131, 67, 54, 0.12);box-shadow: 0 12px 35px rgba(131, 67, 54, 0.15), 0 6px 20px rgba(0, 0, 0, 0.08);animation: slideInSubtitle 0.8s ease-out 1.3s forwards;opacity: 0;transform: translateY(20px);position: relative;overflow: hidden;}
.about-story p {font-size: 18px;color:var(--primary);line-height: 1.8;margin: 0;text-align: justify;position: relative;z-index: 1;letter-spacing: 0.3px;}





.video-banner-section {padding: 50px 0;background:var(--primary); position: relative;overflow: hidden;}
.video-content {position: relative;z-index: 2}
.video-banner-section .section-header {text-align: center;margin-bottom: 40px;animation: slideInText 0.8s ease-out 0.3s forwards;
opacity: 0;transform: translateY(30px);}
.video-banner-section .header-badge {display: inline-block;background: linear-gradient(135deg, var(--secondary), #f0e6e3);color: var(--primary);padding: 8px 20px;border-radius: 25px;font-size: 14px;font-weight: 600;margin-bottom: 15px;box-shadow: 0 4px 15px rgba(131, 67, 54, 0.2);border: 2px solid rgba(131, 67, 54, 0.1);animation: slideInBadge 0.6s ease-out 0.4s forwards;opacity: 0;transform: scale(0.8);}
.video-banner-section h2 {color: white !important;font-size: 3rem;font-weight: 700;margin-bottom: 15px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.video-banner-section p {color: rgba(255, 255, 255, 0.9);font-size: 1.1rem;max-width: 600px;margin: 0 auto;line-height: 1.6;margin: 0 auto !important;}
.video-container {position: relative;max-width: 1300px;margin: 0 auto;animation: slideInImage 0.8s ease-out 0.6s forwards;opacity: 0;transform: scale(0.9) translateY(30px);}
.video-thumbnail {position: relative;width: 100%;height: 500px;border-radius: 20px;overflow: hidden;box-shadow: 
0 20px 60px rgba(131, 67, 54, 0.2),0 10px 30px rgba(0, 0, 0, 0.1);border: 3px solid rgba(131, 67, 54, 0.1);background: linear-gradient(135deg, #ffffff, #f8f5f3);animation: slideInImage 0.8s ease-out 0.9s forwards;opacity: 0;transform: scale(0.9) translateY(30px);}
.video-thumbnail video {width: 100%;height: 100%;object-fit: cover;transition: all 0.4s ease;border-radius: 20px;}
.video-thumbnail:hover video {transform: scale(1.05);}
.video-thumbnail.playing {box-shadow: 0 25px 70px rgba(131, 67, 54, 0.3),0 15px 40px rgba(0, 0, 0, 0.15);}
.video-thumbnail.playing video {filter: brightness(1.05) contrast(1.1);}





.moving-reel {position: relative;background:#fff;padding: 20px 0;overflow: hidden;box-shadow: 0 4px 20px rgba(131, 67, 54, 0.15);}
.reel-container {position: relative;width: 100%;overflow: hidden;}  
.reel-track {display: flex;align-items: center;animation: moveReel 30s linear infinite;white-space: nowrap;}
.reel-item {display: flex;align-items: center;gap: 15px;margin-right: 60px;flex-shrink: 0;}
.reel-text {font-size: 1.8rem;font-weight: 700;color: var(--primary);text-transform: uppercase;letter-spacing: 1px;
white-space: nowrap;}
.reel-icon {display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;color: var(--primary);}
.reel-icon svg {width: 50px;height: 50px;filter: drop-shadow(0 2px 4px rgba(131, 67, 54, 0.2));}
.reel-item:hover .reel-text {color: #5a2d1f;transform: scale(1.05);transition: all 0.3s ease;}
.reel-item:hover .reel-icon {color: #5a2d1f;transform: scale(1.1);transition: all 0.3s ease;}





@keyframes moveReel {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}




.testimonial-section{padding: 50px 0;position: relative;overflow: hidden;background-image: url("../images/testi-bg-1.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);}
.testimonial-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 1;}
.testi-header h3{font-size: 3rem;font-weight: 700;color:#fff;margin-bottom: 30px;text-align: center;animation: slideInText 0.8s ease-out 0.3s forwards;opacity: 0;transform: translateY(30px);position: relative;z-index: 2;}
.testi-slide{max-width: 800px;margin: 0 auto;position: relative;text-align: center;position: relative;}
.testi-content p{font-size: 18px;color: #ffffff;line-height: 1.6;margin-bottom: 20px;animation: slideInSubtitle 0.8s ease-out 0.6s forwards;opacity: 0;transform: translateY(20px);position: relative;z-index: 2;}
.testi-header .header-badge {display:flex;background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;padding: 12px 28px;border-radius: 30px;font-size: 14px;font-weight: 600;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 6px 20px rgba(131, 67, 54, 0.3);animation: slideInBadge 0.8s ease-out forwards;max-width: fit-content;margin: 0 auto;margin-bottom: 30px;position: relative;overflow: hidden;z-index: 2;}
.testi-header .header-badge::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease;}
.testi-header .header-badge:hover::before {left: 100%;}
.testi-content-author h4{font-size: 24px;font-weight: 700;color:#ffffff;margin-bottom: 5px;animation: slideInText 0.8s ease-out 0.9s forwards;opacity: 0;transform: translateY(30px);position: relative;z-index: 2;}
.testi-content-author p{font-size: 16px;color: #ffffff;animation: slideInSubtitle 0.8s ease-out 1.2s forwards;opacity: 0;transform: translateY(20px);position: relative;z-index: 2;}
.testi-slider{position: relative;z-index: 555;}




.contact-form .header-badge {display:flex;background: linear-gradient(45deg, var(--primary), #5a2d1f);color: white;padding: 12px 28px;border-radius: 30px;font-size: 14px;font-weight: 600;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 6px 20px rgba(131, 67, 54, 0.3);animation: slideInBadge 0.8s ease-out forwards;max-width: fit-content;margin-bottom: 20px;position: relative;overflow: hidden;z-index: 2;}
.contact-form .header-badge::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease;}
.contact-form .header-badge:hover::before {left: 100%;}
.contact-section {padding: 50px 0px;background: #fff;}
.contact-row{display: flex;align-items: center;justify-content:space-between;gap: 30px;flex-wrap: wrap;max-width: 1200px;margin: 0 auto;position: relative;z-index: 2;}
.contact-left{width: 48%;}
.contact-right{width: 45%;}
.contact-image img {max-width: 100%;border-radius: 12px;height: auto;object-fit: cover;box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.contact-form h2{font-size: 3rem;font-weight: 600;color: var(--primary);margin-bottom: 10px;animation: slideInText 0.8s ease-out forwards;opacity: 0;transform: translateY(30px);}
.contact-form form {display: flex;flex-direction: column;}
.contact-form .about-btn{margin-top: 30px;}
.contact-form label {font-size: 0.95rem;color: #333;margin: 0;}
.contact-form input,.contact-form textarea { border: none;border-bottom: 1px solid var(--secondary);padding:7px;font-size: 1em;background: transparent;outline: none;resize: none;}





.contact-info {display: flex;justify-content: space-between;text-align: center;padding: 40px 20px;background-color: #fff;border-top: 1px solid var(--secondary);border-bottom: 1px solid var(--secondary);border-bottom: 1px solid var(--secondary);}
.info-box {flex: 1;padding: 0 30px;border-right: 1px solid var(--secondary);}
.info-box:last-child {border-right: none;}
.info-box h3 {font-size: 1.5rem;font-weight: bold;color:var(--primary);letter-spacing: 0.5px;margin-bottom: 10px;}
.info-box p {font-size:1rem;color: #000000;line-height: 1.5;margin: 6px 0;}
.info-box a {color:var(--secondary);text-decoration: none;transition: color 0.3s ease;font-weight: 600;}
.info-box a:hover {color: var(--primary);}






.footer {background-color:var(--primary);color: #ffffffcc;padding: 60px 40px 30px;}
.footer-content {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 40px;border-bottom: 1px solid #ffffff22;padding-bottom: 40px;}
.footer-col {flex: 1 1 200px;}
.footer-col h4 {color: #ffffff;font-size: 25px;margin-bottom: 20px;font-weight: 700;}
.footer-col ul {list-style: none;padding: 0;}
.footer-col ul li a {color: var(--secondary);text-decoration: none;display: block;margin-bottom: 16px;transition: 0.3s ease;}
.footer-col ul li a:hover {color: #ffffff;}
.company .logo {width: 200px;margin-bottom: 20px;}
.company p {font-size: 15px;line-height: 1.6}
.contact-item {display: flex;align-items: flex-start;gap: 10px;margin-bottom: 30px;color: #ffffffcc;}
.contact-item a{color:var(--secondary);}
.contact-item a:hover {color: #fff;}
.contact-item i {color: #ffffff;margin-top: 3px;font-size: 25px;}
.footer-bottom {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 20px;padding-top: 20px;font-size: 16px;color: #ffffff;}
.footer-bottom p a{color: #fff;}
.footer-bottom p a:hover {color: var(--secondary);}
.social-links a {margin-right: 15px;color: #ffffff;text-decoration: none;}
.social-links a:hover {color: var(--secondary);}





.about-banner {background-color:#000;color: white;position: relative;overflow: hidden;text-align: center;padding: 100px 20px;display: flex;align-items: center;justify-content: center;}
.about-banner::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('../images/slider-bg.png');background-size: cover;background-position: center;opacity: 0.5;z-index: 1;}
.banner-content {max-width: 800px;z-index: 2;}
.banner-content h1 {font-size: 3rem;font-weight: bold;margin-bottom: 15px;line-height: 1.2;}
.banner-content p {font-size: 1rem;line-height: 1.5;color: #fff;}
.chips {position: absolute;top: 50%;transform: translateY(-50%);z-index: 1;}
.chips-left {left: -20px;}
.chips-right {right: -20px;}
.chips img {width: 350px;height: auto;}




.about-description{padding: 50px 0px 0px;}
.about-row{display: flex;align-items: center;justify-content: space-between;gap: 30px;flex-wrap: wrap;margin: 0 auto;}
.about-col1{width: 55%;}
.about-col2{width: 38%;}
.about-col1 h2{font-size: 3rem;font-weight: 700;color: var(--primary);margin-bottom: 10px;animation: slideInText 0.8s ease-out forwards;opacity: 0;transform: translateY(30px);line-height: 1.2;}
.about-col1 p{font-size: 16px;color: #000;line-height: 2;margin-bottom: 20px;animation: slideInSubtitle 0.8s ease-out 0.3s forwards;opacity: 0;transform: translateY(20px);}
.about-col2 img{width: 100%;border-radius: 20px;box-shadow: 0 15px 35px rgba(131, 67, 54, 0.1),0 5px 15px rgba(0, 0, 0, 0.05);animation: slideInImage 0.8s ease-out forwards;opacity: 0;transform: scale(0.8);border: 2px solid rgba(131, 67, 54, 0.1);}
.about-col2 img:hover {transform: scale(1.05); transition: all 0.5s ease;}
.about-description .about-col2 img{box-shadow: none;}






.offers-section {display: grid;grid-template-columns: repeat(2, 1fr);grid-auto-rows: 300px;gap: 20px;padding: 50px 0px;}
.offer-card {position: relative;border-radius: 8px;overflow: hidden;display: flex;align-items: center;justify-content: space-between;padding: 40px;color: white;}
.offer-card.orange {background-color: var(--primary);}
.offer-card.blue {background-color:var(--secondary);color: var(--primary);}
.offer-card.yellow {background-color:var(--secondary);color: var(--primary);}
.offer-card.dark {background-color: var(--primary);}
.offer-text h2 {font-size: 2.2rem;margin: 0;font-weight: bold;margin-bottom: 20px;max-width:380px;}
.offer-text p {font-size: 1.2rem;margin: 8px 0;max-width: 70%;}
.offer-text .highlight {font-size: 1rem;font-weight: bold;text-transform: uppercase;margin-bottom: 30px;}
.offer-text .spicy {font-size: 1.2rem;font-weight: bold;color:var(--secondary);text-transform: uppercase;}
.offer-img {position: absolute;bottom: 60px;right: 20px;height: 60%;object-fit: contain;}

.mvg-wrapp{padding:0px 0px 50px;}
.mvg-section {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
.mvg-card {display: flex;flex-direction: column;padding: 20px;}
.mvg-card:last-child {border-right: none;}
.mvg-content {text-align: left;color: rgb(0, 0, 0);flex-grow: 1;}
.number-circle {background-color:var(--primary);color: #ffffff;font-weight: bold;font-size: 1.2rem;border-radius: 50%;display: inline-block;padding: 10px 15px;margin-bottom: 20px;}
.mvg-content h3 {font-size: 2rem;font-weight: bold;color: var(--primary);}
.mvg-content p {font-size: 1rem;color: #000000;line-height: 1.6;}
.mvg-image {width: 100%;height: 300px;object-fit: cover;margin: 20px 0px 0px;}





.product-layout {display: grid; grid-template-columns: 1fr 280px; gap: 30px; margin: 40px 0; align-items: start;}
.products-main {background: #ffffff; border-radius: 15px; padding: 20px; box-shadow: 0 20px 40px rgba(131, 67, 54, 0.08); border: 1px solid rgba(131, 67, 54, 0.1);}
.products-header {text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid rgba(131, 67, 54, 0.1);}
.products-header h2 {font-size: 2.8rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0; }
.products-header p {font-size: 1.2rem; color: var(--secondary); margin: 0; font-weight: 400;}
.products {display: none; opacity: 0; transform: translateY(20px); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.products.active {display: block; opacity: 1; transform: translateY(0); animation: productsFadeIn 0.6s ease-out forwards;}

@keyframes productsFadeIn {from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);}}

.products-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; padding: 20px 0;}

/* Enhanced Product Cards */
.product-card {background: #ffffff; border-radius: 20px; padding: 0; box-shadow: 0 15px 35px rgba(131, 67, 54, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; border: 1px solid rgba(131, 67, 54, 0.1); animation: slideInUp 0.6s ease-out forwards; opacity: 0; transform: translateY(30px);}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInUp {from {opacity: 0; transform: translateY(30px);} to {opacity: 1; transform: translateY(0);}}
.product-card:hover {transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 50px rgba(131, 67, 54, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1);}
.product-image {position: relative; width: 100%; height: 220px; border-radius: 20px 20px 0 0; overflow: hidden;}
.product-image img {width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease;}
.product-card:hover .product-image img {transform: scale(1.1);}
.product-badge {position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.3); z-index: 2;}
.product-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(131, 67, 54, 0.95), rgba(90, 45, 31, 0.95)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px 20px 0 0;}
.product-card:hover .product-overlay {opacity: 1;}
.product-info {padding: 20px;}
.product-info h3 {font-size: 1.4rem; font-weight: 700; color: var(--primary); margin: 0 0 10px 0; }
.product-description {font-size: 0.95rem; color: var(--secondary); margin: 0 0 10px 0; line-height: 1.5;}
.product-features {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;}
.product-features span {background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(218, 194, 189, 0.2)); color: var(--primary); padding: 6px 12px; border-radius: 15px; font-size: 11px; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.2);}




.categories-sidebar {background: #ffffff; border-radius: 25px; padding: 25px; box-shadow: 0 20px 40px rgba(131, 67, 54, 0.08); border: 1px solid rgba(131, 67, 54, 0.1); position: sticky; top: 20px;}
.categories-header {text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid rgba(131, 67, 54, 0.1);}
.categories-header h3 {font-size: 1.8rem; font-weight: 700; color: var(--primary); margin: 0; }
.categories-header p {font-size: 1rem; color: var(--secondary); margin: 10px 0 0 0;}
.categories-list {display: flex; flex-direction: column; gap: 15px;}
.category-item {display: flex; align-items: center; gap: 15px; padding: 15px; background: linear-gradient(135deg, rgba(131, 67, 54, 0.02), rgba(218, 194, 189, 0.05)); border-radius: 20px; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(131, 67, 54, 0.1); position: relative; overflow: hidden;}
.category-item::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(131, 67, 54, 0.1), transparent); transition: left 0.6s ease;}
.category-item:hover::before {left: 100%;}
.category-item:hover {transform: translateX(5px); background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.1)); box-shadow: 0 8px 25px rgba(131, 67, 54, 0.15);}
.category-item.active {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3);}
.category-item.active .category-content h4 {color: #ffffff;}
.category-item.active .product-count {background: rgba(255, 255, 255, 0.2); color: #ffffff; border-color: rgba(255, 255, 255, 0.3);}
.category-icon {width: 45px; height: 45px; background: linear-gradient(135deg, var(--primary), #5a2d1f); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.2);}
.category-item.active .category-icon {background: rgba(255, 255, 255, 0.2);}
.category-icon i {font-size: 18px; color: #ffffff;}
.category-item.active .category-icon i {color: #ffffff;}
.category-content {flex: 1;}
.category-content h4 {font-size: 1.1rem; font-weight: 600; color: var(--primary); margin: 0 0 5px 0; }
.product-count {background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(218, 194, 189, 0.2)); color: var(--primary); padding: 4px 10px; border-radius: 15px; font-size: 11px; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.2); display: inline-block;}
.category-badge {position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, var(--secondary), #f8f5f3); color: var(--primary); padding: 4px 8px; border-radius: 12px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid var(--secondary);}
.category-arrow {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--secondary); transition: all 0.3s ease;}
.category-item:hover .category-arrow {transform: translateY(-50%) translateX(3px); color: var(--primary);}
.category-item.active .category-arrow {color: rgba(255, 255, 255, 0.7);}
.categories-footer {margin-top: 30px; padding-top: 20px; border-top: 2px solid rgba(131, 67, 54, 0.1); text-align: center;}
.total-products {background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.1)); padding: 20px; border-radius: 20px; border: 1px solid rgba(131, 67, 54, 0.1);}
.total-number {font-size: 2rem; font-weight: 700; color: var(--primary); margin: 0; }
.total-text {font-size: 0.9rem; color: var(--secondary); margin: 5px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px;}
.explore-btn {display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; padding: 15px 25px; border-radius: 25px; font-size: 16px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(131, 67, 54, 0.3); transform: translateY(0);}
.category-card:hover .explore-btn {transform: translateY(-3px); box-shadow: 0 12px 30px rgba(131, 67, 54, 0.4);}
.explore-btn i {transition: transform 0.3s ease;}
.category-card:hover .explore-btn i {transform: translateX(5px);}
.category-card {cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.category-card:hover {transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 50px rgba(131, 67, 54, 0.15);}
.category-card:hover .category-icon {transform: scale(1.1); box-shadow: 0 15px 35px rgba(131, 67, 54, 0.4);}





.product-card {transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden;}
.product-card:hover {transform: translateY(-10px); box-shadow: 0 20px 40px rgba(131, 67, 54, 0.2);}
.product-card:hover .product-image img {transform: scale(1.1);}
.product-image {position: relative; overflow: hidden; border-radius: 15px 15px 0 0;}
.product-image img {transition: transform 0.6s ease; width: 100%; height: 100%; object-fit: cover;}
.product-badge {position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #f39c12, #e67e22); color: #ffffff; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4); z-index: 5;}




/* Product Info Enhancement */
.product-info {padding: 25px; background: #ffffff; border-radius: 0 0 15px 15px;}
.product-info h3 {color: var(--primary); font-size: 20px; font-weight: 700; margin-bottom: 10px;}
.product-description {color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 10px;}
.product-features {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;}
.product-features span {background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(218, 194, 189, 0.2)); color: var(--primary); padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.2);}
.price-info {display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;}
.price {font-size: 24px; font-weight: 700; color: var(--primary);}
.unit {font-size: 14px; color: #888; font-weight: 500;}
.order-btn {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; border: none; padding: 14px 28px; border-radius: 25px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(131, 67, 54, 0.2); width: 100%; letter-spacing: 0.5px; text-transform: uppercase; position: relative; overflow: hidden; z-index: 10; margin-top: 15px; min-height: 48px; font-family: 'Poppins', sans-serif;}
.order-btn:hover {transform: translateY(-2px); box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3); background: linear-gradient(135deg, #5a2d1f, var(--primary));}
.order-btn:active {transform: translateY(0);}
.order-btn:focus {outline: 2px solid rgba(131, 67, 54, 0.5); outline-offset: 2px;}
/* Product Overlay - Remove Button, Keep Simple Hover Effect */
.product-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(90, 45, 31, 0.1)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 20px 20px 0 0;}
.product-card:hover .product-overlay {opacity: 1;}
.product-info {padding: 20px; background: #ffffff; border-radius: 0 0 20px 20px; display: flex; flex-direction: column; height: 100%;}
.product-info h3 {font-size: 1.4rem; font-weight: 700; color: var(--primary); margin: 0 0 10px 0; }
.product-description {font-size: 0.95rem; color: var(--secondary); margin: 0 0 10px 0; line-height: 1.5; flex-grow: 1;}
.product-features {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;}
.product-features span {background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(218, 194, 189, 0.2)); color: var(--primary); padding: 6px 12px; border-radius: 15px; font-size: 11px; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.2);}
.product-card {display: flex; flex-direction: column; height: 100%;}
.product-image {flex-shrink: 0;}
.product-info {flex: 1; display: flex; flex-direction: column;}
.order-btn {margin-top: auto; align-self: stretch;}
.product-overlay .order-btn {display: none;}
.product-card:hover {transform: translateY(-8px); box-shadow: 0 20px 40px rgba(131, 67, 54, 0.15);}
.product-card:hover .product-image img {transform: scale(1.05);}
.product-category {padding: 60px 0; background: linear-gradient(135deg, #f8f5f3, #ffffff); position: relative; overflow: hidden;}
.product-category::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23834336" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity: 0.5; z-index: 1;}
.category-header {text-align: center; margin-bottom: 60px; position: relative; z-index: 2;}
.category-header h2 {font-size: 3rem; font-weight: 700; color: var(--primary); margin: 0 0 20px 0;  text-shadow: 0 2px 10px rgba(131, 67, 54, 0.1); animation: slideInText 0.8s ease-out forwards; opacity: 0; transform: translateY(30px);}
.category-header p {font-size: 1rem; color: var(--secondary); margin: 0; font-weight: 400; max-width: 700px; margin: 0 auto; line-height: 1.6; animation: slideInSubtitle 0.8s ease-out 0.3s forwards; opacity: 0; transform: translateY(20px);}
.categories-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; position: relative; z-index: 2;}
.category-card {background: #ffffff; border-radius: 25px; overflow: hidden; box-shadow: 0 20px 50px rgba(131, 67, 54, 0.1), 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; animation: slideInUp 0.6s ease-out forwards; opacity: 0; transform: translateY(30px); border: 1px solid rgba(131, 67, 54, 0.1);}
.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }
.category-card:nth-child(7) { animation-delay: 0.7s; }
.category-card:nth-child(8) { animation-delay: 0.8s; }
.category-card:hover {transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 70px rgba(131, 67, 54, 0.2), 0 15px 40px rgba(0, 0, 0, 0.1);}
.category-bg {position: relative; height: 200px; overflow: hidden;}
.category-bg img {width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease;}
.category-card:hover .category-bg img {transform: scale(1.1);}
.category-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(131, 67, 54, 0.2), rgba(90, 45, 31, 0.1)); transition: all 0.4s ease;}
.category-card:hover .category-overlay {background: linear-gradient(135deg, rgba(131, 67, 54, 0.3), rgba(90, 45, 31, 0.2));}
.category-content {padding: 30px; text-align: center; position: relative;}
.category-content h3 {font-size: 1.8rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0;  transition: color 0.3s ease;}
.category-content p {font-size: 1.1rem; color: var(--secondary); margin: 0 0 25px 0; line-height: 1.5; font-weight: 500;}
.category-stats {display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap;}
.product-count {background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(218, 194, 189, 0.2)); color: var(--primary); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.2); transition: all 0.3s ease;}
.category-badge {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.3); transition: all 0.3s ease;}
.category-card:hover .product-count {background: linear-gradient(135deg, rgba(131, 67, 54, 0.15), rgba(218, 194, 189, 0.25)); transform: translateY(-2px);}
.category-card:hover .category-badge {transform: translateY(-2px); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.4);}
.explore-btn {display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; padding: 16px 28px; border-radius: 30px; font-size: 1rem; font-weight: 600; transition: all 0.4s ease; box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3); transform: translateY(0); cursor: pointer; border: none; width: 100%; position: relative; overflow: hidden;}
.explore-btn::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease;}
.explore-btn:hover::before {left: 100%;}
.explore-btn:hover {transform: translateY(-3px); box-shadow: 0 12px 35px rgba(131, 67, 54, 0.4); background: linear-gradient(135deg, #5a2d1f, var(--primary));}
.explore-btn i {transition: transform 0.3s ease;}
.category-card:hover .explore-btn i {transform: translateX(5px);}



















/* Enhanced Category Card Effects - Product Category Page Only */
.product-category .category-card {position: relative;}
.product-category .category-card::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(131, 67, 54, 0.02), rgba(218, 194, 189, 0.02)); border-radius: 25px; opacity: 0; transition: opacity 0.4s ease; z-index: -1;}
.product-category .category-card:hover::before {opacity: 1;}
.product-category .category-card::after {content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(135deg, var(--primary), #5a2d1f); border-radius: 2px; transition: width 0.4s ease;}
.product-category .category-card:hover::after {width: 80%;}
.product-category .category-bg::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(131, 67, 54, 0.1), rgba(90, 45, 31, 0.05)); opacity: 0; transition: opacity 0.4s ease;}
.product-category .category-card:hover .category-bg::after {opacity: 1;}
.product-category .category-stats {position: relative;}
.product-category .category-stats::before {content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.1)); border-radius: 25px; opacity: 0; transition: opacity 0.3s ease; z-index: -1;}
.product-category .category-card:hover .category-stats::before {opacity: 1;}
.product-category .category-content h3 {position: relative;}
.product-category .category-badge {position: relative; overflow: hidden;}
.product-category .category-badge::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease;}
.product-category .category-card:hover .category-badge::before {left: 100%;}
.product-category .product-count {position: relative; overflow: hidden;}
.product-category .product-count::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(131, 67, 54, 0.1), transparent); transition: left 0.6s ease;}
.product-category .category-card:hover .product-count::before {left: 100%;}
.product-category .categories-grid {perspective: 1000px;}
.product-category .category-card {transform-style: preserve-3d;}
.product-category .category-card:focus-within {outline: 3px solid var(--primary); outline-offset: 5px;}
.product-category .category-card:focus-within .explore-btn {background: linear-gradient(135deg, #5a2d1f, var(--primary));}
.product-category .category-card:focus-visible {outline: 3px solid var(--primary); outline-offset: 5px;}
.product-category .explore-btn:focus-visible {outline: 3px solid #ffffff; outline-offset: 2px;}
.product-category .category-card:hover .category-content {transform: translateY(-2px);}
.product-category .category-content {transition: transform 0.3s ease;}
.product-category .category-card {box-shadow: 0 20px 50px rgba(131, 67, 54, 0.1), 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.product-category .category-card:hover {box-shadow: 0 30px 70px rgba(131, 67, 54, 0.2), 0 15px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);}
.product-category {padding: 60px 0; background: #ffffff;}
.category-header {text-align: center; margin-bottom: 60px;}
.category-header h2 {font-size: 3rem; font-weight: 700; color: var(--primary); margin: 0 0 20px 0; }
.category-header p {font-size: 1rem; color: var(--secondary); margin: 0; font-weight: 400; max-width: 700px; margin: 0 auto; line-height: 1.6;}
.categories-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;}
.category-card {background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: 1px solid #f0f0f0;}
.category-card:hover {transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}
.category-bg {position: relative; height: 180px; overflow: hidden;}
.category-bg img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.category-card:hover .category-bg img {transform: scale(1.05);}
.category-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); transition: opacity 0.3s ease;}
.category-card:hover .category-overlay {opacity: 0;}
.category-content {padding: 25px; text-align: center;}
.category-content h3 {font-size: 1.6rem; font-weight: 600; color: var(--primary); margin: 0 0 10px 0; }
.category-content p {font-size: 1rem; color: var(--secondary); margin: 0 0 20px 0; line-height: 1.5;}
.category-stats {display: flex; justify-content: center; gap: 12px; margin-bottom: 20px;}
.product-count {background: #f8f9fa; color: var(--primary); padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 500; border: 1px solid #e9ecef;}
.category-badge {background: var(--primary); color: #ffffff; padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 500;}
.explore-btn {background: var(--primary); color: #ffffff; padding: 12px 24px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; border: none; width: 100%; cursor: pointer;}
.explore-btn:hover {background: #5a2d1f;}
.explore-btn i {margin-left: 8px;}
.sidebar-header {text-align: center; margin-bottom: 20px; padding-bottom: 25px; border-bottom: 2px solid rgba(131, 67, 54, 0.1);}

.sidebar-header h3 {font-size: 2rem; font-weight: 700; color: var(--primary); margin: 0; font-family: "Poppins", sans-serif;}

.sidebar-header p {font-size: 1rem; color: var(--secondary); margin: 10px 0 0 0; line-height: 1.5; font-weight: 500;}

.sidebar-list {display: flex; flex-direction: column; gap: 20px;}

/* NEW SIDEBAR ITEM DESIGN */
.sidebar-item {background: #f8f5f3; border-radius: 15px; padding: 10px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;}

.sidebar-item:hover {background: #ffffff; border-color: var(--primary); box-shadow: 0 8px 25px rgba(131, 67, 54, 0.15); transform: translateY(-3px);}

.sidebar-item.active {background: linear-gradient(135deg, var(--primary), #5a2d1f); border-color: var(--primary); color: #ffffff; box-shadow: 0 8px 25px rgba(131, 67, 54, 0.25);}

.sidebar-item.active .sidebar-content h4 {color: #ffffff;}

.sidebar-item.active .sidebar-count {background: rgba(255, 255, 255, 0.2); color: #ffffff; border-color: rgba(255, 255, 255, 0.3);}

.sidebar-item.active .sidebar-icon {background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3);}

.sidebar-item.active .sidebar-icon i {color: #ffffff;}

/* NEW ICON DESIGN */
.sidebar-icon {width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary), #5a2d1f); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.2); transition: all 0.3s ease; border: 2px solid rgba(131, 67, 54, 0.1);}

.sidebar-item:hover .sidebar-icon {transform: scale(1.05); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.3);}

.sidebar-icon i {font-size: 20px; color: #ffffff; transition: all 0.3s ease;}

/* NEW CONTENT DESIGN */
.sidebar-content {flex: 1;}

.sidebar-content h4 {font-size: 1.1rem; font-weight: 600; color: var(--primary); margin: 0 0 8px 0; font-family: "Poppins", sans-serif; transition: color 0.3s ease;}

.sidebar-count {background: linear-gradient(135deg, rgba(131, 67, 54, 0.08), rgba(218, 194, 189, 0.15)); color: var(--primary); padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(131, 67, 54, 0.15); display: inline-block; transition: all 0.3s ease;}

.sidebar-item:hover .sidebar-count {background: linear-gradient(135deg, rgba(131, 67, 54, 0.12), rgba(218, 194, 189, 0.2)); border-color: rgba(131, 67, 54, 0.2);}

/* NEW ARROW DESIGN */
.sidebar-arrow {position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--secondary); transition: all 0.3s ease; font-size: 16px;}

.sidebar-item:hover .sidebar-arrow {transform: translateY(-50%) translateX(5px); color: var(--primary);}

.sidebar-item.active .sidebar-arrow {color: rgba(255, 255, 255, 0.8);}

/* NEW FOOTER DESIGN */
.sidebar-footer {margin-top: 35px; padding-top: 25px; border-top: 2px solid rgba(131, 67, 54, 0.1); text-align: center;}

.sidebar-total {background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.1)); padding: 10px; border-radius: 15px; border: 2px solid rgba(131, 67, 54, 0.08);}

.sidebar-number {font-size: 2.2rem; font-weight: 700; color: var(--primary); margin: 0; font-family: "Poppins", sans-serif;}

.sidebar-text {font-size: 0.9rem; color: var(--secondary); margin: 8px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;}

/* NEW HOVER EFFECTS */
.sidebar-item:active {transform: translateY(-2px);}

.sidebar-item:focus-within {outline: 3px solid rgba(131, 67, 54, 0.3); outline-offset: 2px;}

/* NEW FOCUS STATES */
.sidebar-item:focus-visible {outline: 3px solid var(--primary); outline-offset: 2px;}

/* Product Detail Page Styling */
.product-detail-section {padding: 40px 0; background: #ffffff;}

.product-detail-wrapper {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-bottom: 20px;}

/* Product Images Styling */
.product-images {display: flex; flex-direction: column; gap: 20px;}

.main-image {width: 100%; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(131, 67, 54, 0.1); border: 2px solid rgba(131, 67, 54, 0.1);}

.main-image img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;}

.main-image:hover img {transform: scale(1.05);}

.thumbnail-images {display: flex; gap: 15px;}

.thumbnail {width: 80px; height: 80px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.1);}

.thumbnail.active {border-color: var(--primary); box-shadow: 0 8px 25px rgba(131, 67, 54, 0.2);}

.thumbnail:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.15);}

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

/* Product Information Styling */
.product-info-detail {padding: 20px 0;}

.product-badge {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(131, 67, 54, 0.3);}

.product-title {font-size: 3rem; font-weight: 700; color: var(--primary); margin: 0 0 10px 0;  line-height: 1.2;}

.product-rating {display: flex; align-items: center; gap: 15px; margin-bottom: 10px;}

.stars {display: flex; gap: 5px;}

.stars i {color: #ffc107; font-size: 18px;}

.rating-text {font-size: 1rem; color: var(--secondary); font-weight: 500;}

.product-price {display: flex; align-items: center; gap: 20px; margin-bottom: 10px;}

.current-price {font-size: 2rem; font-weight: 700; color: var(--primary);}

.original-price {font-size: 1rem; color: #999; text-decoration: line-through;}

.discount {background: #ff4757; color: #ffffff; padding: 6px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; text-transform: uppercase;}

.product-description {margin-bottom: 10px;}

.product-description p {font-size: 1.1rem; color: var(--secondary); line-height: 1.7; margin: 0;}

.product-features-list {margin-bottom: 35px;}

.product-features-list h3 {font-size: 1.3rem; font-weight: 600; color: var(--primary); margin: 0 0 15px 0; }

.product-features-list ul {list-style: none; padding: 0;}

.product-features-list li {display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1rem; color: var(--secondary);}

.product-features-list i {color: #27ae60; font-size: 16px;}

/* Product Options Styling */
.product-options {margin-bottom: 35px;}

.size-option, .quantity-selector {margin-bottom: 25px;}

.size-option h4, .quantity-selector h4 {font-size: 1.1rem; font-weight: 600; color: var(--primary); margin: 0 0 15px 0; }

.size-buttons {display: flex; gap: 15px;}

.size-btn {padding: 12px 20px; border: 2px solid rgba(131, 67, 54, 0.2); background: #ffffff; color: var(--primary); border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;}

.size-btn:hover, .size-btn.active {background: var(--primary); color: #ffffff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.2);}

.quantity-controls {display: flex; align-items: center; gap: 15px;}

.qty-btn {width: 40px; height: 40px; border: 2px solid rgba(131, 67, 54, 0.2); background: #ffffff; color: var(--primary); border-radius: 50%; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;}

.qty-btn:hover {background: var(--primary); color: #ffffff; border-color: var(--primary); transform: scale(1.1);}

#quantityInput {width: 60px; height: 40px; text-align: center; border: 2px solid rgba(131, 67, 54, 0.2); border-radius: 20px; font-size: 16px; font-weight: 600; color: var(--primary);}

/* Product Actions Styling */
.product-actions {display: flex; gap: 20px; margin-bottom: 25px; flex-wrap: wrap;}

.add-to-cart-btn, .buy-now-btn {display: flex; align-items: center; gap: 10px; padding: 15px 30px; border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: "Poppins", sans-serif;}

.add-to-cart-btn {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; box-shadow: 0 8px 25px rgba(131, 67, 54, 0.3);}

.add-to-cart-btn:hover {transform: translateY(-3px); box-shadow: 0 12px 30px rgba(131, 67, 54, 0.4);}

.buy-now-btn {background: #27ae60; color: #ffffff; box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);}

.buy-now-btn:hover {transform: translateY(-3px); box-shadow: 0 12px 30px rgba(39, 174, 96, 0.4);}

.wishlist-btn {width: 50px; height: 50px; border: 2px solid rgba(131, 67, 54, 0.2); background: #ffffff; color: var(--primary); border-radius: 50%; font-size: 18px; cursor: pointer; transition: all 0.3s ease;}

.wishlist-btn:hover {background: #e74c3c; color: #ffffff; border-color: #e74c3c; transform: scale(1.1);}

/* Product Meta Styling */
.product-meta {background: linear-gradient(135deg, rgba(131, 67, 54, 0.05), rgba(218, 194, 189, 0.1)); padding: 20px; border-radius: 20px; border: 1px solid rgba(131, 67, 54, 0.1);}

.meta-item {display: flex; align-items: center; gap: 15px; margin-bottom: 15px;}

.meta-item:last-child {margin-bottom: 0;}

.meta-item i {color: var(--primary); font-size: 20px;}

.meta-item span {font-size: 1rem; color: var(--secondary); font-weight: 500;}

/* Product Tabs Section */
.product-tabs-section {background: #f8f5f3; padding: 30px; border-radius: 30px;}

.tabs-wrapper {max-width: 1000px; margin: 0 auto;}

.tab-buttons {display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}

.tab-btn {padding: 15px 30px; border: 2px solid rgba(131, 67, 54, 0.2); background: #ffffff; color: var(--primary); border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: "Poppins", sans-serif;}

.tab-btn:hover, .tab-btn.active {background: var(--primary); color: #ffffff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.2);}

.tab-content {background: #ffffff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(131, 67, 54, 0.1);}

.tab-pane {display: none;}

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

.tab-pane h3 {font-size: 1.8rem; font-weight: 700; color: var(--primary); margin: 0 0 20px 0; }

.tab-pane p {font-size: 1.1rem; color: var(--secondary); line-height: 1.7; margin: 0 0 20px 0;}

.tab-pane ul {list-style: none; padding: 0;}

.tab-pane li {font-size: 1.1rem; color: var(--secondary); margin-bottom: 10px; padding-left: 20px; position: relative;}

.tab-pane li:before {content: "•"; color: var(--primary); position: absolute; left: 0; font-weight: bold;}

/* Nutrition Table */
.nutrition-table {display: flex; flex-direction: column; gap: 15px;}

.nutrition-row {display: flex; justify-content: space-between; padding: 15px; background: rgba(131, 67, 54, 0.05); border-radius: 10px; border: 1px solid rgba(131, 67, 54, 0.1);}

.nutrient {font-weight: 600; color: var(--primary);}

.value {font-weight: 500; color: var(--secondary);}

/* Reviews */
.review-item {background: rgba(131, 67, 54, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 20px; border: 1px solid rgba(131, 67, 54, 0.1);}

.review-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}

.reviewer-info h4 {font-size: 1.2rem; font-weight: 600; color: var(--primary); margin: 0 0 8px 0;}

.review-date {font-size: 0.9rem; color: var(--secondary);}

.review-item p {font-size: 1rem; color: var(--secondary); line-height: 1.6; margin: 0;}

/* Related Products Section */
.related-products-section {padding: 40px 0; background: #f8f5f3;}

.section-header {text-align: center; margin-bottom: 50px;}

.section-header h2 {font-size: 3rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0; }

.section-header p {font-size: 1.2rem; color: var(--secondary); margin: 0;margin: 0 auto;}

.related-products-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px;justify-content: center;}
.related-product-card{max-width: 400px;width: 100%;margin: 0 auto;}

.related-product-card {background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(131, 67, 54, 0.08); transition: all 0.4s ease; border: 1px solid rgba(131, 67, 54, 0.1);}

.related-product-card:hover {transform: translateY(-10px); box-shadow: 0 25px 50px rgba(131, 67, 54, 0.15);}

.related-product-card .product-image {position: relative; width: 100%; height: 220px; border-radius: 20px 20px 0 0; overflow: hidden;}

.related-product-card .product-image img {width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease;}

.related-product-card:hover .product-image img {transform: scale(1.1);}

.related-product-card .product-info {padding: 20px;}

.related-product-card .product-info h3 {font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0; }

.related-product-card .price-info {display: flex; align-items: center; gap: 8px; margin-bottom: 20px;}

.related-product-card .price {font-size: 1.4rem; font-weight: 700; color: var(--primary);}

.related-product-card .unit {font-size: 14px; color: var(--secondary);}

.related-product-card .order-btn {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; border: none; padding: 12px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%;}

.related-product-card .order-btn:hover {transform: translateY(-2px); box-shadow: 0 8px 20px rgba(131, 67, 54, 0.3);}

/* Contact Section Styling */
.contact-section {padding: 80px 0; background: #ffffff;}

.contact-row {display: flex; align-items: center; justify-content: space-between; gap: 50px; flex-wrap: wrap;}

.contact-left {width: 45%;}

.contact-image img {max-width: 100%; border-radius: 20px; box-shadow: 0 15px 35px rgba(131, 67, 54, 0.1);}

.contact-right {width: 50%;}

.contact-form h2 {font-size: 3rem; font-weight: 600; color: var(--primary); margin-bottom: 30px;}

.contact-form form {display: flex; flex-direction: column;}

.form-group {margin-bottom: 25px;}

.contact-form label {display: block;font-size: 1rem; font-weight: 600; color: var(--primary);}

.contact-form input, .contact-form textarea {width: 100%; padding: 15px; border: 2px solid rgba(131, 67, 54, 0.2); border-radius: 15px; font-size: 1rem; background: #ffffff; transition: all 0.3s ease; font-family: "Poppins", sans-serif;}

.contact-form input:focus, .contact-form textarea:focus {outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(131, 67, 54, 0.1);}

.contact-form .about-btn {margin-top: 20px;}

/* Contact Info Section */
.contact-info {padding: 30px 0; background: #f8f5f3;}

.info-boxes {display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px;}

.info-box {text-align: center; flex: 1; min-width: 250px;}

.info-box i {font-size: 3rem; color: var(--primary); margin-bottom: 20px;}

.info-box h3 {font-size: 1.5rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0; }

.info-box p {font-size: 1rem; color: var(--secondary); margin: 0; line-height: 1.6;}


/* Product Cards - Clickable Styling */
.product-card {cursor: pointer; transition: all 0.4s ease;}

.product-card:hover {transform: translateY(-8px); box-shadow: 0 20px 40px rgba(131, 67, 54, 0.15);}

.related-product-card {cursor: pointer; transition: all 0.4s ease;}

.related-product-card:hover {transform: translateY(-8px); box-shadow: 0 20px 40px rgba(131, 67, 54, 0.15);}

.related-product-card .product-info {padding: 20px;}

.related-product-card .product-info h3 {font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 0 0 15px 0; font-family: "Roboto Condensed", sans-serif;}

.related-product-card .price-info {display: flex; align-items: center; gap: 8px; margin-bottom: 20px;}

.related-product-card .price {font-size: 1.4rem; font-weight: 700; color: var(--primary);}

.related-product-card .unit {font-size: 14px; color: var(--secondary);}

/* Related Product Action Buttons */
.product-actions-related {display: flex; gap: 10px;}

.view-details-btn, .add-to-cart-related-btn {padding: 10px 20px; border: none; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: "Poppins", sans-serif; width: 100%;}

.view-details-btn {background: linear-gradient(135deg, var(--primary), #5a2d1f); color: #ffffff; box-shadow: 0 4px 15px rgba(131, 67, 54, 0.2);}

.view-details-btn:hover {transform: translateY(-2px); box-shadow: 0 6px 20px rgba(131, 67, 54, 0.3); background: linear-gradient(135deg, #5a2d1f, var(--primary));}

.add-to-cart-related-btn {background: #ffffff; color: var(--primary); border: 2px solid var(--primary); box-shadow: 0 4px 15px rgba(131, 67, 54, 0.1);}

.add-to-cart-related-btn:hover {background: var(--primary); color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(131, 67, 54, 0.2);}

.view-more-section{margin: 30px auto;text-align: center;}
.view-more-section a{color:#fff;}





@media(min-width:1400px){
    .banner-bg img{height: 700px;}
    .banner-bg::after{height: 700px;}
}

@media(max-width:1300px){
    .products-row{gap: 30px;}
    .products-grid{gap: 20px;}
    .contact-section{padding: 40px 0px;}
    .footer-content{gap: 20px;}
    .products-section .section-header{margin-bottom: 20px;}
    .products-row{gap: 10px;}
    .banner-head h1{font-size: 3rem;}
    .feature-highlights{gap: 20px;}
    .chips img{width:200px}
    .about-col1 h2 br{display: none;}
}

@media(max-width:1200px){
    .offer-text h2{font-size: 2rem;}
    .offer-text{max-width: 300px;}
    .offer-text h2{max-width: 300px;}
}

@media(max-width:1024px){
    .banner-content{max-width: 600px;}
    .contact-right{width: 100%;}
    .contact-left{width: 100%; margin-bottom: 30px;}
    .contact-row{gap: 30px;}
    .contact-image img{height: 500px;width: 100%;object-fit: cover;}
    .offer-text h2{font-size: 1.5rem;}
    .offer-text{max-width: 200px;}
    .offer-text h2{max-width: 300px;}
    .offer-card{padding: 20px;}
    .offer-img{height: 60%;}
    .offers-section{grid-auto-rows:250px}
}

@media(max-width:991px){

    .header-menu{display: none;}
    .header-col:last-child{display: none;}
    .header-col{display: flex;align-items: center;justify-content: space-between;width: 100%;}
    .overlay {display: block;position: fixed; right: 0; top: 0; width: 350px; height: 100%; background:var(--primary); background-size: 300% 100%; z-index: 9999; padding: 110px 5% 50px; transform:translateX(100%); opacity: 0; visibility: hidden; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);}
    .overlay.show{ transform:translateX(0); opacity: 1; visibility: visible;}
    .overlay ul {width: 100%;}
    .overlay ul { width: 100%;}
    .overlay ul li a { color: #fff; display: block; padding: 20px 0;}
    .overlay ul li { font-size: 18px; border-bottom: 1px solid #fff; text-transform: uppercase;}
    .overlay ul li a:hover { color: var(--primary) !important;}
    .burger-btn { display: block; position: relative; width: 50px; height: 30px; z-index: 99999;  overflow: hidden; cursor: pointer;}
    .burger-btn span { display: block; width: 100%; height: 3px; background:var(--primary); background-size: 300% 100%; border-radius: 5px; transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);}
    .burger-btn:hover span{background-position: 50% 0;}
    .burger-btn .active span { background:#fff;}
    .burger-btn span:first-child { width: 70%;}
    .burger-btn span:nth-child(2n) { margin: 9px 0; transition: all 0.5s cubic-bezier(.22,.68,0,1.71);}
    .burger-btn .burger-toggle { display: flex; flex-wrap: wrap; justify-content: right;}
    .burger-btn span:last-child { width: 70%;}
    .burger-btn .active span:nth-child(2n) { transform: translateX(-100%);}
    .burger-btn .active span:first-child { transform: translateY(13px) rotate(-45deg);}
    .burger-btn .active span:last-child { transform: translateY(-11px) rotate(45deg);}
    body:after { content: ""; display: block; position: fixed; right: 0; top: 0; width: 100%; height: 100%; background: rgb(255 255 255 / 40%); z-index: 9; transform: translateX(100%); opacity: 0; visibility: hidden;  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);}
    body.menu-open:after{ transform:translateX(0); opacity: 1; visibility: visible;}
    body.menu-open{  overflow-y: hidden;}
    .overlay ul ul.sub-menu li {border: none; padding-left: 20px; position: relative;  color: var(--primary);}
    .overlay ul ul.sub-menu li:before {  content: "-"; position: absolute; left: 0; top: 50%;  transform: translateY(-50%);}
    .overlay ul li.has-sub > a {background: url(../images/chevron-down-white.svg) no-repeat center / 14px; background-position-x: 95%;}
    .global-btn.contact-btn{display: none;}
    .overlay ul li.has-sub > a:hover {background: url(../images/chevron-down-grey.svg) no-repeat center / 14px; background-position-x: 95%;}
    .banner-row{flex-wrap: wrap;}
    .header-menu{display: none;}
    .header-call{display: none;}
    .banner-bg img{height: 500px;}
    .banner-bg::after{height: 500px;}
    .banner-image{height: 300px;width: 300px;}
    .banner-image img{height: 200px;width: 200px;object-fit: contain;}
    .banner-head h1{font-size: 3rem;}
    .banner-head h1 br{display: none;}
    .banner-right-col{display: none;}
    .floating-particles{display: none;}
    .special-sec{padding: 30px 0px;}
    .section-header{margin-bottom: 30px;}
    .about-content{gap: 30px;flex-wrap: wrap;}
    .about-left{width: 100%;}
    .about-right{width: 100%;}
    .image-container img{object-fit: contain;}
    .about-images{gap: 15px;margin-bottom: 20px;}
    .product-image img{object-fit: cover}   /* Add this to ensure product cards have a fixed min-width in grid layouts */
    .product-info{padding: 10px;}
    .product-card:hover .product-info h3{margin-bottom: 0px;}
    .price-info{margin-bottom: 0;padding: 5px;}
    .price-info .price{font-size: 1.2rem;}
    .order-btn{padding: 10px 15px;font-size: 12px;}
    .video-thumbnail{height: 300px;}
    .video-banner-section .section-header{margin-bottom: 20px;}
    .footer-col.company{width: 100%;flex:auto;margin: 0 auto;text-align: center;}
    .footer-col.company img{margin: 20px auto;}
    .info-box p{font-size: 0.8rem;}
    .footer-bottom{justify-content: center;}
    .about-row{flex-wrap: wrap; gap: 30px;}
    .about-col1, .about-col2{width: 100%;}
    .about-col2 img{height: 300px;width: 100%;object-fit: contain;}
    .about-col1 h2{font-size: 2rem; margin-bottom: 10px;}
    .product-description{text-align: center;}

}

@media(max-width:768px){
    .contact-info{padding: 30px 0px;flex-wrap: wrap;}
    .footer-content{justify-content: center;}
    .banner-bg img{height: 600px;}
    .banner-bg::after{height: 600px;}
    .banner-head h1{font-size: 2rem;}
    .banner-subtitle{font-size: 1rem;}
    .header-logo img{height: 40px;}
    .feature-item{font-size: 12px;}
    .section-header h2{font-size: 2rem;}
    .section-header p{font-size: 1rem;}
    .product-circle{width: 150px; height: 150px;}
    .product-circle img{width: 120px; height: 120px;}
    .products-row{gap: 20px;}
    .about-head{font-size: 2rem;}
    .about-description{font-size: 1rem;}
    .about-section .feature-item{padding: 10px;}
    .about-images{display: flex;}
    .image-container.img-1{display: none;}
    .image-container.img-2{width: 100%;}
    .image-container.img-3{display: none;}
    .about-story{padding: 20px;}
    .about-story p{font-size: 1rem;}
    .products-section .section-header h2{font-size: 2rem;}
    .products-section .section-header p{font-size: 1rem;}
    .product-image img{border-radius: 25px 25px 0px 0px;}
    .reel-text{font-size: 1.5rem;}
    .testi-header h3{font-size: 2rem;}
    .testi-content p{font-size: 1rem;}
    .contact-image img{height: 400px;}
    .contact-form h2{font-size: 2rem;margin-bottom: 20px;}
    .contact-form h2 br{display: none;}
    .contact-form input, .contact-form textarea{padding: 10px;}
    .footer{padding: 20px;}
    .contact-item span br{display: none;}
    .footer-bottom{gap: 10px;}
    .social-links a{font-size: 0.9rem;}
    .footer-bottom p{font-size: 0.9rem;gap: 5px;}
    .footer-col h4{margin-bottom: 10px;}
    .contact-left{margin-bottom: 10px;}
    .banner-content h1{font-size: 2rem;}
    .chips{display: none;}
    .about-banner{padding: 60px 0px;}
    .mvg-card{padding: 0;}
    .grid-auto-rows{grid-auto-rows: 200px;}
    .offers-section{grid-auto-rows: 200px;}
    .offers-section{grid-template-columns: repeat(1, 1fr);}
    .category-header h2{font-size: 2rem;margin-bottom: 10px;}
    .product-description{text-align: center;}
    .product-title{font-size: 2rem;}
    .product-description p{font-size: 1rem;text-align: left;}
}
@media(max-width:767px){
    .product-category .categories-grid{display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;}
    .product-category .category-card{width: 48%;}
    .category-bg img{object-fit: cover;}
    .category-content{padding: 20px;}
    .category-content p{margin-bottom: 10px;}
    .category-content h3{margin-bottom: 0;}
    .category-header{margin-bottom: 40px;}
    .product-layout{flex-direction: column-reverse;gap: 30px;display: flex;}
    .sidebar-categories{width: 100%;}
    .products-main{width: 100%;}
    .products-main{padding: 10px;}
    .product-image{height: 200px;padding: 10px;}
    .products-header p{font-size: 0.9rem;}
    .sidebar-header p{font-size: 0.9rem;margin-top: 0;}
    .sidebar-header{padding-bottom: 10px;}
    .products-header h2{font-size: 2rem;}
    .rating-text{font-size: 0.9rem;}
    .tab-pane p{font-size: 1rem;}
    .product-detail-wrapper{grid-template-columns:auto}
    .main-image{height: 400px;}
    .product-detail-wrapper{gap: 10px;}
}
@media(max-width:600px){
    .footer-col h4{text-align: center;}
    .footer-col ul li a{text-align: center;margin-bottom: 10px;}
    .mvg-section{flex-wrap: wrap;}
    .mvg-section{grid-template-columns: repeat(1,1fr);}
    .info-box{margin-bottom: 40px;}
    .offer-img{height: 70%;bottom: 20px;}
    .offer-text h2{max-width: 200px;}
    .offer-text{max-width: 200px;}
    .product-category .category-card{width: 100%;}
    .product-category{padding: 40px 0px;}
    .inner-banner h2{font-size: 3rem;}
    .product-badge{padding: 5px 20px;}
    .product-tabs-section{padding: 20px;}
    .tab-content{padding: 20px;}
    .tab-btn{padding: 10px 20px;font-size: 14px;}
    .related-product-card .product-image{height: 200px;}
    .related-product-card .product-info{padding: 10px;}
    .about-section .feature-icon{font-size:20px;}
    .about-section .feature-item span{font-size: 1rem;}
}
@media(max-width:400px){
    .offer-img{display: none;}
    .offer-text h2{max-width:none;}
    .offer-text{max-width:none;}
    .offer-text p{max-width: none;}
    .offers-section{grid-auto-rows:200px}
}