.elementor-314 .elementor-element.elementor-element-42e764a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-314 .elementor-element.elementor-element-ddd90e6{--divider-border-style:slashes;--divider-color:#13371C;--divider-border-width:1px;--divider-pattern-height:20px;--divider-pattern-size:20px;}.elementor-314 .elementor-element.elementor-element-ddd90e6 .elementor-divider-separator{width:100%;}.elementor-314 .elementor-element.elementor-element-ddd90e6 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-314 .elementor-element.elementor-element-4dc296b{--divider-border-style:slashes;--divider-color:#13371C;--divider-border-width:1px;--divider-pattern-height:20px;--divider-pattern-size:20px;}.elementor-314 .elementor-element.elementor-element-4dc296b .elementor-divider-separator{width:100%;}.elementor-314 .elementor-element.elementor-element-4dc296b .elementor-divider{padding-block-start:15px;padding-block-end:15px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-7edb634 *//*=========================================
OUR STORY HERO
=========================================*/

.story-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    background:#133E24;

}

/* Background Image */

.story-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/Indian-Spice.png") center center/cover no-repeat;

    opacity:.;

    animation:heroZoom 2s ease-in-out infinite alternate;

}

/* Green Overlay */

.story-overlay{

    position:absolute;

    inset:0;

    background:rgba(19,62,36,.82);

}

/* Decorative Mandala */

.story-hero::after{

    content:"";

    position:absolute;

    width:750px;

    height:750px;

    background:url("images/mandala.png") center/contain no-repeat;

    opacity:.05;

    right:-120px;

    top:-120px;

    pointer-events:none;

}

/* Content */

.story-hero-content{

    position:relative;

    z-index:2;

    max-width:950px;

    padding:0px;

}

/* Tag */

.story-tag{

    display:inline-block;

    color:#EE771C;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

/* Heading */

.story-hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:88px;

    color:#F8F5EE;

    line-height:1.08;

    margin-bottom:30px;

    font-weight:500;

}

/* Paragraph */

.story-hero p{

    color:rgba(255,255,255,.85);

    font-size:20px;

    line-height:1.9;

    max-width:760px;

    margin:auto auto 45px;

}

/* Buttons */

.story-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/* Primary */

.story-btn-primary{

    padding:18px 40px;

    background:#EE771C;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.story-btn-primary:hover{

    background:#d76715;

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(238,119,28,.35);

}

/* Secondary */

.story-btn-secondary{

    padding:18px 40px;

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

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    backdrop-filter:blur(10px);

    transition:.35s;

}

.story-btn-secondary:hover{

    background:#fff;

    color:#133E24;

}

/* Scroll */

.scroll-indicator{

    position:absolute;

    bottom:-145px;

    left:50%;

    transform:translateX(-50%);

    width:30px;

    height:52px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:30px;

}

.scroll-indicator span{

    display:block;

    width:5px;

    height:8px;

    background:#EE771C;

    border-radius:10px;

    margin:8px auto;

    animation:scroll 2s infinite;

}

/* Animations */

@keyframes scroll{

0%{transform:translateY(0);opacity:1;}

100%{transform:translateY(14px);opacity:0;}

}

@keyframes heroZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}

/* Responsive */

@media(max-width:991px){

.story-hero h1{

font-size:64px;

}

}

@media(max-width:767px){

.story-hero{

padding:100px 25px;

}

.story-hero h1{

font-size:44px;

}

.story-hero p{

font-size:17px;

}

.story-buttons{

flex-direction:column;

align-items:center;

}

.story-btn-primary,

.story-btn-secondary{

width:250px;

text-align:center;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1afc331 *//*=========================================
SECTION 2
=========================================*/

.story-beginning{

    position:relative;

    background:#F8F5EE;

    padding:140px 8%;

    overflow:hidden;

}
.story-beginning .section-tag{

    color:#EE771C;

}

/* Decorative Background */

.story-beginning::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-200px;

    top:-120px;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/download-2.jpg") center/contain no-repeat;

    opacity:.14;

    pointer-events:none;

}

.story-container{

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* Image */

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:28px;

    display:block;

    box-shadow:0 35px 80px rgba(0,0,0,.12);

    transition:.6s;

}

.story-image:hover img{

    transform:scale(1.03);

}

/* Decorative Frame */

.story-image::after{

    content:"";

    position:absolute;

    inset:20px;

    border:1px solid rgba(238,119,28,.35);

    border-radius:28px;

    pointer-events:none;

}

/* Content */

.story-content{

    position:relative;

}

.story-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:64px;

    line-height:1.1;

    color:#133E24;

    margin:20px 0 30px;

    font-weight:500;

}

.story-content p{

    color:#555;

    font-size:18px;

    line-height:1.9;

    margin-bottom:25px;

}

/* Feature Cards */

.story-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:40px;

}

.feature-card{

    background:#fff;

    padding:35px 30px;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:4px;

    background:#EE771C;

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#133E24;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:20px;

}

.feature-card h4{

    font-family:"Cormorant Garamond",serif;

    color:#133E24;

    font-size:30px;

    margin-bottom:12px;

}

.feature-card p{

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:#666;

}


/* Responsive */

@media(max-width:991px){

.story-container{

grid-template-columns:1fr;

gap:60px;

}

.story-content{

text-align:center;

}

.story-features{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.story-beginning{

padding:90px 25px;

}

.story-content h2{

font-size:40px;

}

.story-content p{

font-size:16px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-80f12f3 *//*=========================================
SECTION 5 - OUR JOURNEY
=========================================*/

.clove-journey{

    position:relative;

    overflow:hidden;

    background:#F8F5EE;

    padding:50px 8%;

    color:#EE771C;

}

/* Background Pattern */

.journey-pattern{

    position:absolute;

    inset:0;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/Download-premium-png-of-PNG-Spices-floating-food-ingredients_-by-Sasi-about-spices-png-background-png-leaf-and-explosion-15499321.jpg") center center no-repeat;

    background-size:900px;

    opacity:.04;

    pointer-events:none;

}

/* Container */

.journey-container{

    position:relative;

    z-index:2;

    max-width:1250px;

    margin:auto;

}

/*=========================
Heading
=========================*/

.journey-heading{

    text-align:center;

    max-width:820px;

    margin:0 auto 90px;

}

.journey-heading h2{

    font-family:"Cormorant Garamond",serif;

    font-size:68px;

    color:#133E24;

    line-height:1.08;

    margin:22px 0 30px;

    font-weight:500;

}

.journey-heading p{

    font-size:18px;

    line-height:1.9;

    color:#666;

}

/*=========================
Timeline
=========================*/

.journey-timeline{

    position:relative;

    max-width:950px;

    margin:auto;

}

/* Vertical Line */

.journey-timeline::before{

    content:"";

    position:absolute;

    left:39px;

    top:0;

    width:2px;

    height:100%;

    background:rgba(19,62,36,.12);

}

/*=========================
Journey Item
=========================*/

.journey-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:35px;

    margin-bottom:65px;

}

.journey-item:last-child{

    margin-bottom:0;

}

/*=========================
Timeline Dot
=========================*/

.timeline-dot{

    position:relative;

    width:80px;

    height:80px;

    border-radius:50%;

    background:#133E24;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    box-shadow:0 12px 35px rgba(0,0,0,.10);

    z-index:2;

}

.timeline-dot span{

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    color:#F8F5EE;

}

/*=========================
Content Card
=========================*/

.timeline-content{

    flex:1;

    background:#ffffff;

    padding:35px;

    border-radius:24px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.45s ease;

}

.timeline-content h3{

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    color:#133E24;

    margin-bottom:15px;

    font-weight:500;

}

.timeline-content p{

    font-size:16px;

    line-height:1.9;

    color:#666;

}

/*=========================================
Premium Hover Effects
=========================================*/

/* Animated Vertical Line */

.journey-timeline::after{

    content:"";

    position:absolute;

    left:39px;

    top:-120px;

    width:2px;

    height:120px;

    background:linear-gradient(
        to bottom,
        transparent,
        #EE771C,
        transparent
    );

    animation:lineFlow 4s linear infinite;

}

@keyframes lineFlow{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(900px);
    }

}

/*=========================================
Timeline Dot Animation
=========================================*/

.timeline-dot{

    transition:.45s ease;

}

.timeline-dot::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(238,119,28,.25);

    transform:scale(.9);

    opacity:0;

    transition:.45s ease;

}

.timeline-dot::after{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:50%;

    background:rgba(238,119,28,.18);

    animation:pulse 3s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:.35;

    }

    70%{

        transform:scale(1.45);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

/*=========================================
Card Hover
=========================================*/

.timeline-content{

    position:relative;

    overflow:hidden;

}

.timeline-content::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    transition:.8s;

}

.journey-item:hover .timeline-content{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.journey-item:hover .timeline-content::before{

    left:150%;

}

.journey-item:hover .timeline-dot{

    background:#EE771C;

    transform:scale(1.08);

}

.journey-item:hover .timeline-dot::before{

    opacity:1;

    transform:scale(1.15);

}

.journey-item:hover .timeline-content h3{

    color:#EE771C;

}

.journey-item:hover .timeline-content{

    border-left:5px solid #EE771C;

}

/*=========================================
Fade Animation
=========================================*/

.journey-item{

    opacity:0;

    transform:translateY(50px);

    animation:fadeUp .8s forwards;

}

.journey-item:nth-child(1){

    animation-delay:.2s;

}

.journey-item:nth-child(2){

    animation-delay:.45s;

}

.journey-item:nth-child(3){

    animation-delay:.7s;

}

.journey-item:nth-child(4){

    animation-delay:.95s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

    .clove-journey{

        padding:100px 6%;

    }

    .journey-heading h2{

        font-size:52px;

    }

    .journey-heading p{

        font-size:17px;

    }

    .timeline-content{

        padding:28px;

    }

}

@media(max-width:767px){

    .journey-heading{

        margin-bottom:60px;

    }

    .journey-heading h2{

        font-size:40px;

    }

    .journey-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .journey-timeline::before{

        left:25px;

    }

    .journey-timeline::after{

        left:25px;

    }

    .journey-item{

        gap:20px;

        margin-bottom:45px;

    }

    .timeline-dot{

        width:50px;

        height:50px;

    }

    .timeline-dot span{

        font-size:18px;

    }

    .timeline-content{

        padding:22px;

        border-radius:18px;

    }

    .timeline-content h3{

        font-size:26px;

    }

    .timeline-content p{

        font-size:15px;

        line-height:1.7;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9f4666e *//*=========================================
SECTION 6 - LUXURY GALLERY
=========================================*/

.clove-gallery{
    position:relative;
    background:#F8F5EE;
    padding:140px 8%;
    overflow:hidden;
    color: 133E24;
}

/* Background Pattern */

.gallery-pattern{
    position:absolute;
    inset:0;
    background:url("images/mandala.png") center center no-repeat;
    background-size:900px;
    opacity:.03;
    pointer-events:none;
}

.gallery-container{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:auto;
}

/*=========================================
Heading
=========================================*/

.gallery-heading{
    max-width:800px;
    margin:0 auto 80px;
    text-align:center;
    colour: 133e24
}

.gallery-heading h2{
    font-family:"Cormorant Garamond",serif;
    font-size:68px;
    font-weight:500;
    color:#133E24;
    line-height:1.1;
    margin:20px 0 25px;
}

.gallery-heading p{
    font-family:"Poppins",sans-serif;
    font-size:18px;
    color:#666;
    line-height:1.9;
}

/*=========================================
Gallery Grid
=========================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/* Large Cards */

.gallery-item.large{

    grid-column:span 2;

}

/* Gallery Card */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    min-height:340px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/* Images */

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*=========================================
Overlay
=========================================*/

.gallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:35px;

    background:linear-gradient(

        transparent,

        rgba(19,62,36,.90)

    );

}

.gallery-overlay h3{

    font-family:"Cormorant Garamond",serif;

    color:#fff;

    font-size:34px;

    font-weight:500;

    margin-bottom:12px;

}

.gallery-overlay span{

    display:block;

    width:70px;

    height:2px;

    background:#EE771C;

}

/*=========================================
Bottom CTA
=========================================*/

.gallery-cta{

    margin-top:90px;

    background:#133E24;

    border-radius:30px;

    padding:70px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.gallery-cta h3{

    font-family:"Cormorant Garamond",serif;

    color:#F8F5EE;

    font-size:52px;

    font-weight:500;

    margin-bottom:20px;

}

.gallery-cta p{

    color:rgba(255,255,255,.85);

    font-size:18px;

    max-width:650px;

    margin:0 auto 35px;

    line-height:1.9;

}

/* Button */

.gallery-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    background:#EE771C;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

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

    font-weight:500;

    transition:.35s;

}
/*=========================================
IMAGE HOVER EFFECT
=========================================*/

.gallery-item{
    transition:.45s ease;
}

.gallery-item img{
    transition:transform .8s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item:hover{
    transform:translateY(-10px);
    box-shadow:0 35px 70px rgba(0,0,0,.15);
}

/*=========================================
OVERLAY ANIMATION
=========================================*/

.gallery-overlay{

    opacity:0;

    transform:translateY(35px);

    transition:.5s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

    transform:translateY(0);

}

/* Dark Overlay */

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(19,62,36,.45);

    opacity:0;

    transition:.45s ease;

    z-index:1;

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-overlay{

    z-index:2;

}

/*=========================================
ORANGE UNDERLINE
=========================================*/

.gallery-overlay span{

    width:0;

    transition:.45s ease;

}

.gallery-item:hover span{

    width:90px;

}

/*=========================================
SHINE EFFECT
=========================================*/

.gallery-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.9s;

    z-index:3;

}

.gallery-item:hover::after{

    left:150%;

}

/*=========================================
CTA SECTION
=========================================*/

.gallery-cta{

    transition:.45s ease;

}

.gallery-cta:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(19,62,36,.25);

}

/* Decorative Border */

.gallery-cta::before{

    content:"";

    position:absolute;

    inset:18px;

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

    border-radius:22px;

    pointer-events:none;

}

/* Button */

.gallery-btn:hover{

    background:#fff;

    color:#133E24;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(238,119,28,.35);

}

/*=========================================
SCROLL REVEAL
=========================================*/

.gallery-item{

    opacity:0;

    transform:translateY(60px);

    animation:galleryFade .8s forwards;

}

.gallery-item:nth-child(1){animation-delay:.15s;}
.gallery-item:nth-child(2){animation-delay:.30s;}
.gallery-item:nth-child(3){animation-delay:.45s;}
.gallery-item:nth-child(4){animation-delay:.60s;}
.gallery-item:nth-child(5){animation-delay:.75s;}
.gallery-item:nth-child(6){animation-delay:.90s;}

@keyframes galleryFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:1024px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-item.large{

        grid-column:span 2;

    }

    .gallery-heading h2{

        font-size:56px;

    }

    .gallery-cta{

        padding:55px;

    }

}

@media(max-width:768px){

    .clove-gallery{

        padding:90px 6%;

    }

    .gallery-heading{

        margin-bottom:55px;

    }

    .gallery-heading h2{

        font-size:40px;

    }

    .gallery-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .gallery-item.large{

        grid-column:auto;

    }

    .gallery-item{

        min-height:280px;

    }

    .gallery-overlay{

        opacity:1;

        transform:none;

        padding:25px;

    }

    .gallery-overlay h3{

        font-size:28px;

    }

    .gallery-overlay span{

        width:70px;

    }

    .gallery-cta{

        margin-top:70px;

        padding:40px 25px;

        border-radius:24px;

    }

    .gallery-cta h3{

        font-size:36px;

    }

    .gallery-cta p{

        font-size:16px;

        margin-bottom:25px;

    }

    .gallery-btn{

        width:100%;

        max-width:280px;

    }

}/* End custom CSS */