/*==================================================
XGM WELLNESS
Global Stylesheet
==================================================*/

/*================ GOOGLE FONT ================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*================ VARIABLES ================*/

:root{

    --primary:#2E8B57;
    --primary-dark:#236B43;
    --secondary:#F8F8F8;
    --accent:#D4AF37;

    --white:#ffffff;
    --black:#111111;

    --text:#555555;
    --heading:#1C1C1C;

    --border:#E8E8E8;
    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:12px;

    --transition:.35s ease;

    --max-width:1280px;

}

/*================ RESET ================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--white);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

}

/*================ SCROLLBAR ================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

/*================ GLOBAL ================*/

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea,
select{

    font-family:inherit;

    outline:none;

}

section{

    padding:90px 8%;

}

.container{

    max-width:var(--max-width);

    margin:auto;

}

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

.header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: var(--shadow);
}

.navbar{
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 5%;
}

.logo img{
    height: 120px;
    width: auto;
    display: block;
}

.nav-links{
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-links li a{
    font-weight: 500;
    color: var(--heading);
    position: relative;
    transition: var(--transition);
}

.nav-links li a:hover{
    color: var(--primary);
}

.nav-icons{
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 1.15rem;
    color: var(--heading);
}

.nav-icons a{
    position: relative;
    display: flex;
    align-items: center;
}

.cart-icon .cart-count{
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--primary);
    color: var(--white);
    font-size: .65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle{
    display: none;
    background: none;
    font-size: 1.4rem;
    color: var(--heading);
}

/*================ HEADINGS ================*/

h1,
h2,
h3,
h4,
h5{

    color:var(--heading);

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:3.6rem;

}

h2{

    font-size:2.6rem;

}

h3{

    font-size:1.35rem;

}

p{

    color:var(--text);

    margin-top:12px;

}

/*================ SECTION TITLE ================*/

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.9rem;

}

.section-heading h2{

    margin-top:12px;

}

.section-heading p{

    max-width:700px;

    margin:18px auto 0;

}

/*================ BUTTONS ================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    background:var(--primary);

    color:var(--white);

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

    box-shadow:var(--shadow);

}

.primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

}

.secondary-btn:hover{

    background:var(--primary);

    color:var(--white);

}

.product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:12px;

    background:var(--primary);

    color:var(--white);

    border-radius:8px;

    transition:var(--transition);

    font-weight:600;

}

.product-btn:hover{

    background:var(--primary-dark);

}

/*================ BADGES ================*/

.product-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:var(--accent);

    color:var(--white);

    padding:6px 14px;

    border-radius:50px;

    font-size:.75rem;

    font-weight:600;

    z-index:2;

}

/*================ CARDS ================*/

.card{

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

}

/*================ SPACING ================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
/*==================================================
SECTION TITLES
==================================================*/

.section-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 70px;

}

.section-header span{

    display:inline-block;

    padding:8px 18px;

    background:rgba(46,139,87,.1);

    color:var(--primary);

    border-radius:50px;

    font-weight:600;

    margin-bottom:18px;

}

.section-header h2{

    font-size:2.6rem;

    color:var(--heading);

    margin-bottom:20px;

}

.section-header p{

    color:var(--text);

    font-size:1rem;

}

/*==================================================
BUTTONS
==================================================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.primary-btn:hover{

    transform:translateY(-3px);

    background:#26744b;

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:10px;

    border:2px solid var(--primary);

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.secondary-btn:hover{

    background:var(--primary);

    color:#fff;

}

/*==================================================
FEATURED PRODUCTS
==================================================*/

.featured-products{

    background:#fafafa;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.4s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

.product-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:#d4af37;

    color:#000;

    padding:8px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

}

.product-content{

    padding:25px;

}

.product-content h3{

    margin-bottom:12px;

}

.product-content p{

    margin-bottom:18px;

    color:var(--text);

}

.product-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}

.product-price span{

    font-size:1.3rem;

    font-weight:700;

    color:var(--primary);

}

/*==================================================
CATEGORY GRID
==================================================*/

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.category-card{

    background:#fff;

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.category-card:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-8px);

}

.category-card img{

    width:70px;

    margin:0 auto 20px;

}

.category-card h3{

    margin-bottom:10px;

}
/*==================================================
ABOUT PREVIEW
==================================================*/

.about-preview{

    padding:100px 8%;

}

.about-container{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-content h2{

    font-size:2.6rem;

    margin-bottom:20px;

    color:var(--heading);

}

.about-content p{

    margin-bottom:20px;

    color:var(--text);

}

.about-list{

    list-style:none;

    margin:30px 0;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:var(--heading);

    font-weight:500;

}

.about-list i{

    color:var(--primary);

    font-size:1.1rem;

}

/*==================================================
WHY CHOOSE US
==================================================*/

.why-us{

    background:#f8f9fa;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card i{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:2rem;

    background:rgba(46,139,87,.12);

    color:var(--primary);

}

.why-card h3{

    margin-bottom:15px;

}

.why-card p{

    color:var(--text);

}

/*==================================================
RESELLER
==================================================*/

.reseller{

    background:linear-gradient(135deg,#1d1d1d,#2c2c2c);

    color:#fff;

    text-align:center;

}

.reseller h2{

    color:#fff;

    margin-bottom:20px;

}

.reseller p{

    color:#ddd;

    max-width:700px;

    margin:0 auto 30px;

}

.reseller-benefits{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    list-style:none;

    max-width:900px;

    margin:40px auto;

}

.reseller-benefits li{

    background:rgba(255,255,255,.08);

    padding:20px;

    border-radius:12px;

}

/*==================================================
TESTIMONIALS
==================================================*/

.testimonials{

    background:#fff;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.testimonial-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.testimonial-card p{

    font-style:italic;

    margin-bottom:20px;

}

.testimonial-card strong{

    color:var(--primary);

}
/*==================================================
CONTACT SECTION
==================================================*/

.contact{

    background:#f8f9fa;

}

.contact-container{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.contact-info h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:18px;

    color:var(--text);

}

.contact-details{

    margin-top:35px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.contact-item i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(46,139,87,.12);

    color:var(--primary);

    font-size:1.3rem;

}

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    font-size:1rem;

    transition:var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--primary);

}

.contact-form textarea{

    resize:vertical;

    min-height:150px;

}

/*==================================================
NEWSLETTER
==================================================*/

.newsletter{

    background:linear-gradient(135deg,var(--primary),#26744b);

    color:#fff;

    text-align:center;

    padding:80px 8%;

}

.newsletter h2{

    color:#fff;

    margin-bottom:20px;

    font-size:2.4rem;

}

.newsletter p{

    color:#f5f5f5;

    margin-bottom:35px;

}

.newsletter-form{

    max-width:650px;

    margin:auto;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}

.newsletter-form input{

    flex:1;

    min-width:260px;

    padding:16px 20px;

    border:none;

    border-radius:10px;

    outline:none;

    font-size:1rem;

}

.newsletter-form button{

    padding:16px 35px;

    border:none;

    border-radius:10px;

    background:#111;

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.newsletter-form button:hover{

    background:#000;

}

/*==================================================
FOOTER
==================================================*/

.footer{

    background:#111;

    color:#fff;

    padding:70px 8% 25px;

}

.footer-container{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

.footer-logo{

    width:170px;

    margin-bottom:20px;

}

.footer h3{

    color:#fff;

    margin-bottom:20px;

}

.footer p{

    color:#cfcfcf;

    margin-bottom:12px;

}

.footer ul{

    list-style:none;

}

.footer ul li{

    margin-bottom:12px;

}

.footer ul li a{

    color:#cfcfcf;

    transition:var(--transition);

}

.footer ul li a:hover{

    color:var(--primary);

    padding-left:6px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    margin-top:50px;

    padding-top:25px;

    text-align:center;

}

/*==================================================
FLOATING BUTTONS
==================================================*/

.whatsapp-button{

    position:fixed;

    bottom:25px;

    left:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.7rem;

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

    z-index:999;

    transition:var(--transition);

}

.whatsapp-button:hover{

    transform:scale(1.08);

}

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

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

@media(max-width:992px){

.hero-container,
.about-container,
.contact-container{

    grid-template-columns:1fr;

}

.hero{

    padding-top:100px;

}

.hero-content{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

}

@media(max-width:768px){

.navbar{

    flex-wrap:wrap;

    padding:18px 20px;

}

.nav-links{
    width:100%;
    display:none;
    flex-direction:column;
    margin-top:20px;
    gap:18px;
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.nav-links.show-menu{

    display:flex;

}

.menu-toggle{

    display:block;

}

.hero-content h1{

    font-size:2.5rem;

}

.section-header h2{

    font-size:2rem;

}

.newsletter-form{

    flex-direction:column;

}

.newsletter-form input,

.newsletter-form button{

    width:100%;

}

}

@media(max-width:576px){

section{

    padding:70px 20px;

}

.hero-content h1{

    font-size:2rem;

}

.primary-btn,
.secondary-btn{

    width:100%;

}

.hero-buttons{

    flex-direction:column;

}

}
.why-choose {
    padding: 80px 5%;
    background: #f7f4ee; /* adjust to match your cream background */
}

.why-choose-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.why-choose-intro .section-tag {
    color: #c9971e; /* gold accent */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.why-choose-intro h2 {
    font-size: 2.2rem;
    margin: 10px 0 20px;
    color: #14351f; /* dark green */
}

.why-choose-intro p {
    margin-bottom: 15px;
    color: #444;
    line-height: 1.6;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
}

.why-choose-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.why-choose-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #14351f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.why-choose-item h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
    color: #14351f;
}

.why-choose-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .why-choose-container {
        grid-template-columns: 1fr;
    }
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
}