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

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

body{
font-family:'Poppins',sans-serif;
color:#222;
}

/* HEADER */
header{
background:#111;
color:white;
position:sticky;
top:0;
z-index:1000;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo{
font-size:24px;
font-weight:700;
color:#ff7a00;
}

nav ul{
list-style:none;
display:flex;
}

nav ul li{
margin-left:25px;
}

nav ul li a{
color:white;
text-decoration:none;
}

nav ul li a:hover{
color:#ff7a00;
}

/* HERO */
.hero{
background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.5)),
url('../images/hero.jpg') center/cover no-repeat;
color:white;
padding:160px 0;
}

.hero-content{
max-width:900px;
}

.hero h1{
font-size:50px;
line-height:1.2;
}

.highlight{
color:#ff7a00;
}

.hero p{
margin-top:20px;
max-width:650px;
}

.btn{
display:inline-block;
margin-top:30px;
background:#ff7a00;
color:white;
padding:14px 30px;
text-decoration:none;
border-radius:6px;
transition:.3s;
}

.btn:hover{
background:#d96300;
}

/* SLIDER */
.hero-slider{
position:relative;
min-height:120px;
}

.slide{
position:absolute;
opacity:0;
transition:opacity 1s ease;
}

.slide.active{
opacity:1;
}

/* SECTIONS */
.section{
padding:80px 0;
}

.section-title{
text-align:center;
margin-bottom:40px;
font-size:32px;
}

.light{
color:white;
}

/* SERVICES */
.services{
background:#f5f7f9;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

.card h3{
color:#ff7a00;
margin-bottom:10px;
}

/* PROCESS */
.process{
background:#111;
color:white;
}

.steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

.step{
background:#1d1d1d;
padding:25px;
border-radius:10px;
border-top:4px solid #ff7a00;
transition:.3s;
}

.step:hover{
transform:translateY(-8px);
}

.step h3{
color:#ff7a00;
margin-bottom:8px;
}

/* FOOTER */
footer{
background:black;
color:#aaa;
text-align:center;
padding:40px 0;
}

/* MOBILE */
@media(max-width:768px){

.hero h1{
font-size:30px;
}

nav ul{
display:none;
}

}
/* ===== ABOUT HERO UPGRADE ===== */
.about-hero{
    background:
    linear-gradient(120deg, rgba(0,0,0,.8), rgba(0,0,0,.5)),
    url('../images/hero.jpg') center/cover no-repeat;
    position:relative;
    }
    
    /* ===== ABOUT TEXT ===== */
    .about-text{
    max-width:900px;
    margin:auto;
    text-align:center;
    line-height:1.9;
    font-size:17px;
    color:#444;
    }
    
    /* ===== GLASS FEATURE SECTION ===== */
    .about-features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:50px;
    }
    
    .feature-box{
    background:rgba(255,255,255,0.9);
    padding:30px;
    border-radius:14px;
    backdrop-filter:blur(6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    transition:0.4s;
    position:relative;
    overflow:hidden;
    }
    
    .feature-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#ff7a00;
    }
    
    .feature-box:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,0.2);
    }
    
    .feature-box h3{
    color:#ff7a00;
    margin-bottom:10px;
    font-size:20px;
    }
    
    .feature-box p{
    color:#555;
    line-height:1.7;
    }
    

/* ===== UNIQUE SPLIT ABOUT SECTION ===== */
.about-split{
    background:linear-gradient(120deg,#f6f8fb,#eef2f6);
    }
    
    .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    }
    
    .about-left h2{
    font-size:36px;
    margin-bottom:20px;
    }
    
    .about-left p{
    line-height:1.9;
    color:#444;
    margin-bottom:20px;
    }
    
    /* Highlight feature boxes */
    .about-right{
    display:flex;
    flex-direction:column;
    gap:25px;
    }
    
    .highlight-box{
    background:white;
    padding:28px;
    border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    position:relative;
    overflow:hidden;
    transition:0.4s;
    }
    
    .highlight-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:#ff7a00;
    }
    
    .highlight-box:hover{
    transform:translateX(10px);
    box-shadow:0 25px 55px rgba(0,0,0,0.18);
    }
    
    .highlight-box h3{
    margin-bottom:8px;
    color:#ff7a00;
    }
    
    /* Responsive */
    @media(max-width:900px){
    .about-grid{
    grid-template-columns:1fr;
    }
    }
/* ===== UNIQUE WHY CHOOSE SECTION ===== */
.why-choose{
    background:#f7f9fc;
    }
    
    .why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:40px;
    }
    
    .why-card{
    background:white;
    padding:35px 30px;
    border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    position:relative;
    transition:0.4s;
    overflow:hidden;
    }
    
    .why-card span{
    position:absolute;
    top:20px;
    right:25px;
    font-size:42px;
    font-weight:700;
    color:rgba(255,122,0,0.15);
    }
    
    .why-card::before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#ff7a00,#ffa64d);
    }
    
    .why-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 55px rgba(0,0,0,0.18);
    }
    
    .why-card h3{
    margin-bottom:10px;
    color:#ff7a00;
    }
    
    .why-card p{
    color:#555;
    line-height:1.7;
    }
/* PRODUCTS HERO */
.products-hero{
    background:
    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.5)),
    url('../images/hero.jpg') center/cover no-repeat;
    }
    
    /* PRODUCT SECTIONS */
    .product-section{
    padding:90px 0;
    }
    
    .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:40px;
    }
    
    .product-card{
    background:white;
    padding:30px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.1);
    transition:0.3s;
    border-top:4px solid #ff7a00;
    }
    
    .product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,0.18);
    }
    
    .product-card h3{
    color:#ff7a00;
    margin-bottom:10px;
    }
    .products-hero{
        background:
        linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.5)),
        url('../images/hero.jpg') center/cover no-repeat;
        }
        
        .product-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:30px;
        margin-top:40px;
        }
        
        .product-card{
        background:white;
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 15px 35px rgba(0,0,0,0.1);
        transition:0.3s;
        text-align:center;
        }
        
        .product-card img{
        width:100%;
        height:200px;
        object-fit:cover;
        transition:0.4s;
        }
        
        .product-card:hover img{
        transform:scale(1.1);
        }
        
        .product-card:hover{
        transform:translateY(-10px);
        box-shadow:0 25px 55px rgba(0,0,0,0.2);
        }
        
        .product-card h3{
        color:#ff7a00;
        margin:12px 0 5px;
        }
        
        .product-card p{
        padding:0 15px 20px;
        color:#555;
        }
        .section{
            padding:100px 0;
            background:linear-gradient(180deg,#fafafa,#f1f3f6);
            }
            
/* ===== COMPACT PRODUCT GRID ===== */
.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:25px;
    margin-top:40px;
    }
    
   /* ===============================
   PREMIUM PRODUCT CARD ANIMATION
================================ */

/* Smooth fade entry animation */
.product-detail{
opacity:0;
transform:translateY(40px);
animation:fadeUp .8s ease forwards;
}

/* Delay animation for grid effect */
.product-detail:nth-child(2){animation-delay:.1s;}
.product-detail:nth-child(3){animation-delay:.2s;}
.product-detail:nth-child(4){animation-delay:.3s;}
.product-detail:nth-child(5){animation-delay:.4s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* Premium Glass Hover Effect */
.product-detail{
position:relative;
overflow:hidden;
}

/* Shine sweep animation */
.product-detail::before{
content:'';
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}

.product-detail:hover::before{
left:130%;
}

/* Image zoom effect */
.product-detail:hover img{
transform:scale(1.12);
}

/* Floating card hover */
.product-detail:hover{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(0,0,0,0.2);
}

/* Title glow */
.product-detail h3{
transition:.3s;
}

.product-detail:hover h3{
color:#ff7a00;
text-shadow:0 0 8px rgba(255,122,0,.4);
}

/* Premium section entrance */
.section{
animation:sectionFade 1s ease;
}

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

/* Button premium hover */
.btn{
position:relative;
overflow:hidden;
}

.btn::after{
content:'';
position:absolute;
width:0;
height:100%;
top:0;
left:0;
background:rgba(255,255,255,0.2);
transition:.4s;
}

.btn:hover::after{
width:100%;
}
/* PRODUCT GRID */
.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:40px;
    }
    
    /* CARD */
    .product-card{
    background:white;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    transition:.4s;
    text-align:center;
    padding-bottom:20px;
    }
    
    /* IMAGE */
    .product-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    transition:.5s;
    }
    
    /* TEXT */
    .product-card h3{
    color:#ff7a00;
    margin:15px 0 5px;
    }
    
    .product-card p{
    padding:0 15px;
    font-size:14px;
    color:#555;
    }
    
    /* HOVER */
    .product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
    }
    
    .product-card:hover img{
    transform:scale(1.1);
    }
    /* INTRO TEXT */
.intro-text{
    max-width:900px;
    margin:auto;
    text-align:center;
    color:#555;
    line-height:1.7;
    }
    
    /* VERTICAL PRODUCT FRAME */
    .vertical-products{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:20px;
    }
    
    .vertical-card{
    display:flex;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    transition:.4s;
    opacity:0;
    animation:fadeUp .8s forwards;
    }
    
    /* IMAGE */
    .vertical-card img{
    width:240px;
    height:160px;
    object-fit:cover;
    transition:.5s;
    }
    
    /* CONTENT */
    .vertical-card div{
    padding:20px;
    }
    
    .vertical-card h3{
    color:#ff7a00;
    margin-bottom:8px;
    }
    
    .vertical-card p{
    color:#555;
    }
    
    /* HOVER */
    .vertical-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 50px rgba(0,0,0,0.2);
    }
    
    .vertical-card:hover img{
    transform:scale(1.08);
    }
    
    /* ANIMATION */
    @keyframes fadeUp{
    to{opacity:1; transform:translateY(0);}
    from{opacity:0; transform:translateY(40px);}
    }
    
    /* MOBILE */
    @media(max-width:768px){
    .vertical-card{
    flex-direction:column;
    }
    
    .vertical-card img{
    width:100%;
    height:200px;
    }
    }
/* ===== SPICE GRID ===== */
.spice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
    margin-top:40px;
    }
    
    /* ===== CARD ===== */
    .spice-card{
    background:#f3f3f3;
    border-radius:14px;
    overflow:hidden;
    text-align:center;
    transition:.4s;
    position:relative;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    opacity:0;
    animation:fadeCard .8s forwards;
    }
    
    /* Animation entry */
    @keyframes fadeCard{
    from{
    opacity:0;
    transform:translateY(30px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
    }
    
    /* IMAGE AREA */
    .spice-img{
    padding:15px;
    background:#eaeaea;
    }
    
    .spice-img img{
    width:100%;
    height:220px;
    object-fit:contain;
    transition:.5s;
    }
    
    /* TITLE */
    .spice-title{
    background:white;
    padding:14px;
    font-weight:600;
    color:#003049;
    border-top:1px solid #ddd;
    transition:.3s;
    }
    
    /* HOVER EFFECT */
    .spice-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
    }
    
    .spice-card:hover img{
    transform:scale(1.1);
    }
    
    .spice-card:hover .spice-title{
    background:#ff7a00;
    color:white;
    }
    
    /* Shine animation */
    .spice-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
    );
    transition:.7s;
    }
    
    .spice-card:hover::before{
    left:120%;
    }
/* CONTACT HERO */
.contact-hero{
    background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
    url('../images/contact-bg.jpg') center/cover;
    color:white;
    padding:120px 20px;
    text-align:center;
    }
    
    .contact-hero h1{
    font-size:44px;
    }
    
    .highlight{
    color:#ff7a00;
    }
    
    /* CONTACT SECTION */
    .contact-section{
    padding:80px 0;
    background:#fafafa;
    }
    
    .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    }
    
    /* INFO */
    .contact-info{
    animation:fadeInLeft 1s ease;
    }
    
    .contact-info h2{
    margin-bottom:20px;
    color:#ff7a00;
    }
    
    .contact-info p{
    margin-bottom:15px;
    color:#555;
    line-height:1.7;
    }
    
    /* FORM */
    .contact-form{
    background:white;
    padding:40px;
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    animation:fadeInRight 1s ease;
    }
    
    .contact-form h2{
    margin-bottom:20px;
    }
    
    .contact-form input,
    .contact-form textarea{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:6px;
    font-family:inherit;
    transition:0.3s;
    }
    
    .contact-form input:focus,
    .contact-form textarea:focus{
    border-color:#ff7a00;
    outline:none;
    box-shadow:0 0 5px rgba(255,122,0,.3);
    }
    
    .success-msg{
    background:#e6ffe6;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    color:green;
    }
    
    /* Animations */
    @keyframes fadeInLeft{
    from{opacity:0;transform:translateX(-30px);}
    to{opacity:1;transform:translateX(0);}
    }
    
    @keyframes fadeInRight{
    from{opacity:0;transform:translateX(30px);}
    to{opacity:1;transform:translateX(0);}
    }
    
    /* Mobile */
    @media(max-width:768px){
    .contact-grid{
    grid-template-columns:1fr;
    }
    }
    .whatsapp-float{
        position:fixed;
        bottom:20px;
        right:20px;
        z-index:999;
        animation:whatsappPulse 2s infinite;
        }
        
        .whatsapp-float img{
        border-radius:50%;
        box-shadow:0 10px 25px rgba(0,0,0,0.3);
        }
        
        @keyframes whatsappPulse{
        0%{transform:scale(1);}
        50%{transform:scale(1.1);}
        100%{transform:scale(1);}
        }
/* WhatsApp Floating Button */
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:9999;
    animation:whatsappPulse 2s infinite;
    }
    
    .whatsapp-float img{
    width:55px;        /* FIX SIZE */
    height:55px;
    border-radius:50%;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    transition:0.3s;
    }
    
    .whatsapp-float img:hover{
    transform:scale(1.1);
    }
    
    /* Pulse Animation */
    @keyframes whatsappPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
    }
    .product-img{
        background:#f8f8f8;
        display:flex;
        align-items:center;
        justify-content:center;
        height:220px;
        }
        /* PRODUCT IMAGE FIXED SIZE */
.spice-img{
    width:100%;
    height:200px;          /* Same size for all */
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5f5f5;
    overflow:hidden;
    border-radius:12px;
}

.spice-img img{
    width:100%;
    height:100%;
    object-fit:contain;    /* Keeps full image */
    padding:10px;
}
/* ==============================
   PREMIUM SITE ANIMATIONS
============================== */

/* Sticky header animation */
header{
    position:sticky;
    top:0;
    transition:0.3s;
}
header.scrolled{
    background:#000;
    padding:8px 0;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
}

/* Product hover zoom */
.spice-img img,
.product-img img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.5s;
}
.spice-card:hover img{
    transform:scale(1.1);
}

/* Export statistics */
.stats{
    background:#111;
    color:white;
    text-align:center;
    padding:70px 0;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
}
.stat h2{
    color:#ff7a00;
    font-size:40px;
}

/* Timeline */
.timeline{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
}
.timeline div{
    background:#ff7a00;
    color:white;
    padding:14px 22px;
    border-radius:30px;
}

/* Inquiry bar */
.inquiry-bar{
    position:fixed;
    bottom:0;
    width:100%;
    background:#ff7a00;
    color:white;
    text-align:center;
    padding:10px;
    z-index:999;
}
.inquiry-bar a{
    color:white;
    font-weight:bold;
    text-decoration:underline;
}
/* EXPORT CAPABILITY SECTION */
.export-capability{
    background:#f7f7f7;
}

.capability-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:40px;
}

.capability-card{
    background:white;
    padding:35px;
    border-radius:14px;
    text-align:center;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border-top:4px solid #ff7a00;
}

.capability-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

.capability-card h3{
    color:#ff7a00;
    margin-bottom:12px;
}

.capability-card p{
    color:#555;
}
.section-title{
color:#222;
}
       /* ===============================
   ABOUT PAGE PREMIUM ANIMATIONS
================================ */

/* Page load fade */
body{
    animation:pageFade .8s ease;
}

@keyframes pageFade{
    from{opacity:0;}
    to{opacity:1;}
}

/* HERO ANIMATION */
.about-hero h1{
    animation:slideUp 1s ease;
}

.about-hero p{
    animation:slideUp 1.3s ease;
}

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

/* ABOUT GRID ANIMATION */
.about-grid{
    animation:fadeUp 1.2s ease;
}

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

/* RIGHT SIDE HIGHLIGHT BOX */
.highlight-box{
    background:white;
    padding:25px;
    border-radius:12px;
    margin-bottom:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:.4s;
    border-left:4px solid #ff7a00;
}

.highlight-box:hover{
    transform:translateX(8px);
    box-shadow:0 18px 40px rgba(0,0,0,0.15);
}



/* WHY CHOOSE GRID */
.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:40px;
}

.why-card{
    background:white;
    padding:30px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.why-card span{
    font-size:32px;
    font-weight:700;
    color:#ff7a00;
    display:block;
    margin-bottom:10px;
}

.why-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,0.15);
}

/* ORANGE GLOW EFFECT */
.why-card::after{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,122,0,0.15),
        transparent
    );
    top:-100%;
    left:-100%;
    transition:.6s;
}

.why-card:hover::after{
    top:100%;
    left:100%;
}
/* ===============================
   PREMIUM PRODUCTS ANIMATION
================================ */

/* Product grid animation */
.spice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

/* PRODUCT CARD */
.spice-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    transition:.45s;
    position:relative;
    opacity:0;
    transform:translateY(40px);
}

/* Reveal animation */
.spice-card.show{
    opacity:1;
    transform:translateY(0);
}

/* Hover lift */
.spice-card:hover{
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 30px 60px rgba(0,0,0,0.18);
}

/* Image container */
.spice-img{
    background:#f6f6f6;
    padding:25px;
    text-align:center;
    overflow:hidden;
}

/* Image animation */
.spice-img img{
    width:100%;
    height:200px;
    object-fit:contain;
    transition:.6s;
}

.spice-card:hover img{
    transform:scale(1.12) rotate(1deg);
}

/* Title area */
.spice-title{
    padding:18px;
    text-align:center;
    font-weight:600;
    background:linear-gradient(45deg,#ff7a00,#ff9d3c);
    color:white;
    letter-spacing:.4px;
}

/* Shine effect */
.spice-card::after{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    top:-100%;
    left:-100%;
    transition:.6s;
}

.spice-card:hover::after{
    top:100%;
    left:100%;
}

/* Smooth appearance */
.spice-card:nth-child(1){transition-delay:.05s;}
.spice-card:nth-child(2){transition-delay:.1s;}
.spice-card:nth-child(3){transition-delay:.15s;}
.spice-card:nth-child(4){transition-delay:.2s;}
.spice-card:nth-child(5){transition-delay:.25s;}
.spice-card:nth-child(6){transition-delay:.3s;}
/* =========================
   GLOBAL PAGE LOAD EFFECT
========================= */
body {
    animation: pageFade 0.6s ease-in-out;
}

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

/* =========================
   SECTION FADE ANIMATION
========================= */
.section {
    animation: sectionFade 0.9s ease;
}

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

/* =========================
   HERO PREMIUM EFFECT
========================= */
.hero-content h1,
.contact-hero h1 {
    animation: heroText 1s ease;
}

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

/* =========================
   CONTACT HERO
========================= */
.contact-hero {
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
                url('../images/hero.jpg') center/cover;
    color:white;
    padding:120px 20px;
    text-align:center;
}

/* =========================
   CONTACT SECTION
========================= */
.contact-section {
    padding:80px 0;
    background:#fafafa;
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

/* =========================
   CONTACT INFO BOX
========================= */
.contact-info {
    background:white;
    padding:40px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.4s;
}

.contact-info:hover {
    transform:translateY(-6px);
}

.contact-details p {
    margin-top:12px;
    font-weight:500;
}

/* =========================
   CONTACT FORM BOX
========================= */
.contact-form {
    background:white;
    padding:40px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

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

.contact-form input,
.contact-form textarea {
    padding:14px;
    margin-bottom:15px;
    border-radius:6px;
    border:1px solid #ddd;
    font-size:15px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:#ff7a00;
    outline:none;
    box-shadow:0 0 8px rgba(255,122,0,0.3);
}

/* =========================
   SUCCESS MESSAGE
========================= */
.success-msg {
    background:#e8f9ee;
    color:#0a7a33;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
}

/* =========================
   PREMIUM BUTTON EFFECT
========================= */
.btn {
    transition:0.3s;
    cursor:pointer;
}

.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(255,122,0,0.4);
}

/* =========================
   CARD ANIMATION (ALL PAGES)
========================= */
.card,
.spice-card,
.step {
    transition:0.4s;
}

.card:hover,
.spice-card:hover,
.step:hover {
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* =========================
   WHATSAPP FLOAT BUTTON
========================= */
.whatsapp-float {
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:1000;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float img {
    width:60px;
}

@keyframes whatsappPulse {
    0% { transform:scale(1); }
    50% { transform:scale(1.08); }
    100% { transform:scale(1); }
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
    .contact-grid {
        grid-template-columns:1fr;
    }
}
/* CONTACT HERO FIX */
.contact-hero{
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url('../images/contact-hero.jpg') center/cover no-repeat;

    min-height:350px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
}
.work-card img{
width:70px;
height:70px;
object-fit:contain;
margin-bottom:15px;
filter:brightness(0) invert(1);
transition:0.4s;
}

/* hover icon color */
.work-card:hover img{
filter:none;
transform:scale(1.1);
}
/* ================================
   PREMIUM HOW WE WORK ANIMATION
================================ */

.how-work{
background:#f8f8f8;
}

.work-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:50px;
}

.work-card{
background:#111;
color:white;
padding:35px;
border-radius:14px;
border-top:4px solid #ff7a00;
transition:0.6s;
opacity:0;
transform:rotateY(90deg);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.work-card h3{
color:#ff7a00;
margin-bottom:12px;
}

.work-card p{
color:#ddd;
}

/* hover effect */
.work-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 25px 40px rgba(0,0,0,0.5);
}

/* scroll animation */
.work-card.show{
opacity:1;
transform:rotateY(0deg);
}
                 /* =========================
   HERO PREMIUM ANIMATION
========================= */

.hero{
    background:linear-gradient(135deg,#0f0f0f,#1a1a1a);
    color:#fff;
    padding:120px 0;
}

.hero-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.hero-content{
    flex:1;
}

.hero-content h1{
    font-size:44px;
    line-height:1.3;
    margin-bottom:20px;
    transition:0.5s ease;
}

.hero-content p{
    color:#ccc;
    margin-bottom:25px;
    font-size:16px;
    line-height:1.7;
}

.highlight{
    color:#ff7a00;
}

.hero-image{
    flex:1;
    text-align:right;
}

.hero-image img{
    width:420px;
    max-width:100%;
    transition:0.6s ease;
    animation:float 5s ease-in-out infinite;
}

/* Floating animation */
@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-18px);}
    100%{transform:translateY(0);}
}

/* Fade animation */
.fade-out{
    opacity:0;
    transform:translateY(20px);
    transition:0.5s ease;
}

/* Button style */
.btn{
    display:inline-block;
    padding:14px 28px;
    background:#ff7a00;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    transition:0.3s;
}

.btn:hover{
    background:#e66900;
    transform:translateY(-3px);
}

/* Responsive */
@media(max-width:900px){

    .hero-wrapper{
        flex-direction:column;
        text-align:center;
    }

    .hero-image{
        text-align:center;
    }

    .hero-content h1{
        font-size:30px;
    }
}
/* ================================
   HOW WE WORK – PREMIUM DARK
================================ */

.how-work{
    background:#0f0f0f;
    padding:100px 0;
}

.how-work .section-title{
    color:#fff;
}

.work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:50px;
}

.work-card{
    background:#1a1a1a;
    color:#fff;
    padding:35px 30px;
    border-radius:16px;
    text-align:center;
    border-top:4px solid #ff7a00;
    transition:0.4s ease;
    transform:translateY(40px);
    opacity:0;
}

.work-card.show{
    transform:translateY(0);
    opacity:1;
}

.work-card img{
    width:65px;
    height:65px;
    object-fit:contain;
    margin-bottom:18px;
}

.work-card h3{
    color:#ff7a00;
    margin-bottom:12px;
    font-size:20px;
}

.work-card p{
    color:#ccc;
    font-size:15px;
    line-height:1.6;
}

.work-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 40px rgba(255,122,0,0.25);
}
/* ===================================
   MISSION & VISION – PREMIUM SECTION
==================================== */

.mission-vision-section{
    background:#111;
    padding:100px 0;
}

.mission-vision-section .section-title{
    color:#fff;
}

.mv-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
    margin-top:60px;
}

/* CARD */

.mv-card{
    background:#1a1a1a;
    padding:45px 35px;
    border-radius:18px;
    transition:0.4s ease;
    position:relative;
    border-left:4px solid #ff7a00;
    transform:translateY(40px);
    opacity:0;
}

/* Reveal animation */

.mv-card.active{
    transform:translateY(0);
    opacity:1;
}

/* Title */

.mv-card h3{
    color:#ff7a00;
    font-size:22px;
    margin-bottom:15px;
}

/* Text */

.mv-card p{
    color:#ccc;
    line-height:1.8;
    font-size:15px;
}

/* Hover effect */

.mv-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(255,122,0,0.3);
}
/* ===============================
   FINAL MISSION & VISION FIX
================================ */

.mission-vision-section{
    background:#0f0f0f;
    padding:100px 0;
}

.mission-vision-section .section-title{
    color:#fff;
}

.mv-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:40px;
    margin-top:60px;
}

/* CARD */

.mv-card{
    background:#1a1a1a;
    padding:45px 35px;
    border-radius:16px;
    border-top:4px solid #ff7a00;
    transition:0.4s ease;
}

/* Title */

.mv-card h3{
    color:#ff7a00;
    font-size:22px;
    margin-bottom:15px;
}

/* Text */

.mv-card p{
    color:#ccc;
    line-height:1.7;
    font-size:15px;
}

/* Hover */

.mv-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(255,122,0,0.25);
}
/* ================================
   PREMIUM HOW WE WORK ANIMATION
================================ */

.how-work{
    background:#f8f8f8;
    padding:100px 0;
}

.how-work .section-title{
    text-align:center;
    font-size:34px;
    margin-bottom:60px;
    color:#111;
}

.work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:50px;
}

.work-card{
    background:#111;
    color:white;
    padding:35px;
    border-radius:14px;
    border-top:4px solid #ff7a00;
    transition:0.6s;
    opacity:0;
    transform:rotateY(90deg);
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.work-card h3{
    color:#ff7a00;
    margin-bottom:12px;
}

.work-card p{
    color:#ddd;
}

/* hover effect */
.work-card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 25px 40px rgba(0,0,0,0.5);
}

/* scroll animation */
.work-card.show{
    opacity:1;
    transform:rotateY(0deg);
}
/* =====================================
   PREMIUM MISSION & VISION – DARK STYLE
===================================== */

.mission-vision-section{
    background:linear-gradient(135deg,#0f0f0f,#1a1a1a);
    padding:110px 0;
}

.mission-vision-section .section-title{
    text-align:center;
    font-size:34px;
    margin-bottom:60px;
    color:#fff;
}

.mv-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:40px;
}

.mv-card{
    background:#1a1a1a;
    padding:45px 35px;
    border-radius:18px;
    border-top:4px solid #ff7a00;
    transition:0.5s ease;
    opacity:0;
    transform:translateY(40px);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.mv-card.active{
    opacity:1;
    transform:translateY(0);
}

.mv-card h3{
    color:#ff7a00;
    margin-bottom:15px;
    font-size:22px;
}

.mv-card p{
    color:#ccc;
    line-height:1.8;
    font-size:15px;
}

.mv-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 55px rgba(255,122,0,0.3);
}

/* Keep original size for Beans & Onion */
.spice-img img.original-size{
    object-fit: contain !important;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 180px;
}

/* ================= MOBILE MENU ================= */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:#ff7a00;
}

/* Desktop */
nav ul{
display:flex;
gap:25px;
list-style:none;
}

/* Mobile */
@media(max-width:768px){

nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#111;
display:none;
}

nav ul{
flex-direction:column;
padding:20px 0;
text-align:center;
}

nav ul li{
margin:15px 0;
}

nav.active{
display:block;
}

.menu-toggle{
display:block;
}

}

/* ================================
   PREMIUM MOBILE SIDEBAR MENU
================================ */

/* Sticky Header */
#mainHeader{
position:sticky;
top:0;
z-index:1000;
background:#111;
transition:0.3s ease;
}

#mainHeader.scrolled{
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* Hamburger */
.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
gap:6px;
}

.hamburger span{
width:28px;
height:3px;
background:#ff7a00;
transition:0.4s;
}

/* Animate to X */
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(6px,6px);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* Desktop Nav */
.nav-menu ul{
display:flex;
gap:25px;
list-style:none;
}

.nav-menu ul li a{
color:white;
text-decoration:none;
transition:0.3s;
}

.nav-menu ul li a:hover{
color:#ff7a00;
}

/* Overlay */
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* Mobile */
@media(max-width:768px){

.hamburger{
display:flex;
}

.nav-menu{
position:fixed;
top:0;
right:-260px;
width:260px;
height:100vh;
background:#111;
padding-top:80px;
transition:0.4s ease;
z-index:999;
}

.nav-menu ul{
flex-direction:column;
text-align:center;
}

.nav-menu ul li{
margin:20px 0;
}

.nav-menu.active{
right:0;
}

}