.elementor-386 .elementor-element.elementor-element-efc7acb{--divider-border-style:slashes;--divider-color:#13371C;--divider-border-width:1px;--divider-pattern-height:20px;--divider-pattern-size:20px;}.elementor-386 .elementor-element.elementor-element-efc7acb .elementor-divider-separator{width:100%;}.elementor-386 .elementor-element.elementor-element-efc7acb .elementor-divider{padding-block-start:15px;padding-block-end:15px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6c2162b *//*=================================
OUR PHILOSOPHY HERO
=================================*/

.philosophy-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}

/*=================================
BACKGROUND
=================================*/

.philosophy-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/Section-1-our-story.png") center center/cover no-repeat;

    transform:scale(1.18);

    animation:philosophyZoom 12s ease-out forwards;

    z-index:0;

}

@keyframes philosophyZoom{

    from{

        transform:scale(1.18);

    }

    to{

        transform:scale(1);

    }

}

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

.philosophy-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(19,62,36,.82),
        rgba(19,62,36,.74)
    );

    z-index:1;

}

/*=================================
PATTERN
=================================*/

.philosophy-pattern{

    position:absolute;

    inset:0;

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

    background-size:850px;

    opacity:.04;

    z-index:2;

}

/*=================================
CONTENT
=================================*/

.philosophy-content{

    position:relative;

    z-index:3;

    max-width:850px;

    padding:30px 25px 0;

}

.philosophy-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#EE771C;

    font-family:Poppins,sans-serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.philosophy-content h1{

    font-family:"Cormorant Garamond",serif;

    font-size:72px;

    font-weight:500;

    line-height:1.05;

    color:#F8F5EE;

    margin-bottom:28px;

}

.philosophy-content p{

    max-width:720px;

    margin:auto;

    font-family:Poppins,sans-serif;

    font-size:16px;

    line-height:1.9;

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

}

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

.philosophy-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.philosophy-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    font-family:Poppins,sans-serif;

    font-size:16px;

    font-weight:600;

    transition:.35s ease;

}

/* Primary Button */

.philosophy-buttons .primary-btn{

    background:#EE771C;

    color:#fff;

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

}

.philosophy-buttons .primary-btn:hover{

    background:#ff8d3a;

    transform:translateY(-4px);

}

/* Secondary Button */

.philosophy-buttons .secondary-btn{

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

    color:#fff;

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

    backdrop-filter:blur(10px);

}

.philosophy-buttons .secondary-btn:hover{

    background:#fff;

    color:#133E24;

    transform:translateY(-4px);

}

/*=================================
SCROLL INDICATOR
=================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:30px;

    height:52px;

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

    border-radius:40px;

    z-index:4;

}

.scroll-down span{

    position:absolute;

    left:50%;

    top:10px;

    width:4px;

    height:10px;

    background:#EE771C;

    border-radius:20px;

    transform:translateX(-50%);

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        top:10px;
        opacity:1;

    }

    100%{

        top:28px;
        opacity:0;

    }

}

/*=================================
TEXT ANIMATION
=================================*/

.philosophy-tag,
.philosophy-content h1,
.philosophy-content p,
.philosophy-buttons{

    opacity:0;

    transform:translateY(35px);

    animation:fadeUp .9s ease forwards;

}

.philosophy-tag{

    animation-delay:.2s;

}

.philosophy-content h1{

    animation-delay:.4s;

}

.philosophy-content p{

    animation-delay:.6s;

}

.philosophy-buttons{

    animation-delay:.8s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=================================
TABLET
=================================*/

@media(max-width:1024px){

    .philosophy-content h1{

        font-size:58px;

    }

}

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

@media(max-width:767px){

    .philosophy-hero{

        min-height:100vh;

    }

    .philosophy-content{

        padding:100px 24px 0;

    }

    .philosophy-content h1{

        font-size:40px;

    }

    .philosophy-content p{

        font-size:16px;

        line-height:1.8;

    }

    .philosophy-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .philosophy-buttons a{

        width:100%;

        max-width:260px;

    }

    .scroll-down{

        display:none;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b95184a *//*=====================================
SECTION 4
=====================================*/

.story-cooking{

    background:#F8F5EE;

    padding:150px 8%;

    position:relative;

    overflow:hidden;

}
.story-cooking .section-tag{

    color:#EE771C;

}

.story-cooking::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    bottom:-220px;

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

    opacity:.04;

}

.story-cooking-container{

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

/* LEFT */

.cooking-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:68px;

    color:#133E24;

    margin:20px 0 30px;

    line-height:1.1;

}

.cooking-content p{

    color:#666;

    font-size:18px;

    line-height:1.9;

}

/* LIST */

.cooking-list{

    margin-top:45px;

}

.list-item{

    display:flex;

    gap:25px;

    margin-bottom:35px;

}

.list-item span{

    font-size:46px;

    font-family:"Cormorant Garamond",serif;

    color:#EE771C;

    min-width:60px;

}

.list-item h4{

    font-size:28px;

    font-family:"Cormorant Garamond",serif;

    color:#133E24;

    margin-bottom:10px;

}

.list-item p{

    margin:0;

}

/* RIGHT */

.cooking-images{

    position:relative;

}

.img-main{

    width:100%;

    border-radius:30px;

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

    transition:.5s;

}

.img-main:hover{

    transform:scale(1.03);

}

.img-small{

    position:absolute;

    width:280px;

    bottom:-60px;

    left:-60px;

    border-radius:25px;

    border:8px solid #F8F5EE;

    box-shadow:0 25px 60px rgba(0,0,0,.2);

    transition:.5s;

}

.img-small:hover{

    transform:translateY(-8px);

}

/* RESPONSIVE */

@media(max-width:991px){

.story-cooking-container{

grid-template-columns:1fr;

}

.cooking-images{

margin-top:70px;

}

.img-small{

left:20px;

bottom:-40px;

width:220px;

}

}

@media(max-width:767px){

.story-cooking{

padding:90px 25px;

}

.cooking-content h2{

font-size:42px;

}

.img-small{

position:relative;

left:auto;

bottom:auto;

margin-top:20px;

width:100%;

border:none;

}
/* Number Column */

.list-number{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:70px;

}

/* Number */

.list-number span{

    font-family:"Cormorant Garamond",serif;

    font-size:48px;

    color:#EE771C;

    line-height:1;

    position:relative;

    z-index:2;

}

/* Vertical Line */

.line{

    position:relative;

    width:2px;

    height:90px;

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

    margin-top:15px;

    overflow:hidden;

}
.line::after{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:#EE771C;

    animation:lineFlow 3s ease-in-out infinite;

}

}@keyframes lineFlow{

0%{

top:-100%;

}

100%{

top:100%;

}
}.list-item:last-child .line{

display:none;

}.list-item{

transition:.4s;

}

.list-item:hover{

transform:translateX(10px);

}

.list-item:hover .list-number span{

transform:scale(1.15);

color:#133E24;

transition:.35s;

}

.list-item:hover h4{

color:#EE771C;

transition:.35s;

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

.story-philosophy{

    position:relative;

    padding:40px 8%;

    background:#133E24;

    overflow:hidden;

}
.story-philosophy .section-tag{

    color:#EE771C;

}


/* Background Artwork */

.philosophy-bg{

    position:absolute;

    inset:0;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/download__2_-removebg-preview.png") center center no-repeat;

    background-size:900px;

    opacity:.10;

    pointer-events:none;

}

.container{

    position:relative;

    z-index:2;

    max-width:1280px;

    margin:auto;

    text-align:center;

}

.story-philosophy h2{

    color:#F8F5Ee;

    font-family:"Cormorant Garamond",serif;

    font-size:68px;

    line-height:1.1;

    margin:25px 0;

    font-weight:500;

}

.section-description{

    max-width:760px;

    margin:0 auto 70px;

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

    font-size:18px;

    line-height:1.9;

}

/* Grid */

.philosophy-grid{

    display:grid;

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

    gap:35px;

}

/* Card */

.philosophy-card{

    position:relative;

    padding:55px 40px;

    border-radius:24px;

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

    backdrop-filter:blur(12px);

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

    transition:.45s;

    overflow:hidden;

}

/* Hover Light */

.philosophy-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transition:.8s;

}

/* Underline */

.philosophy-card::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:3px;

    background:#EE771C;

    transition:.35s;

}

.philosophy-card:hover{

    transform:translateY(-15px);

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

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

}

.philosophy-card:hover::before{

    left:130%;

}

.philosophy-card:hover::after{

    width:90px;

}

/* Number */

.card-number{

    font-family:"Cormorant Garamond",serif;

    font-size:70px;

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

    margin-bottom:20px;

    transition:.35s;

}

.philosophy-card:hover .card-number{

    color:#EE771C;

    transform:translateY(-6px);

}

/* Heading */

.philosophy-card h3{

    color:#F8F5EE;

    font-size:34px;

    font-family:"Cormorant Garamond",serif;

    margin-bottom:20px;

}

/* Text */

.philosophy-card p{

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

    line-height:1.9;

    font-size:16px;

}

/* Responsive */

@media(max-width:991px){

.philosophy-grid{

grid-template-columns:1fr;

max-width:600px;

margin:auto;

}

.story-philosophy h2{

font-size:52px;

}

}

@media(max-width:767px){

.story-philosophy{

padding:90px 25px;

}

.story-philosophy h2{

font-size:40px;

}

.section-description{

font-size:16px;

}

.philosophy-card{

padding:40px 30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9bfa691 *//*=================================
GLOBAL CTA
=================================*/

.global-cta{

    padding:100px 8%;

    background:#F8F5EE;

}

.global-cta-box{

    max-width:1200px;

    margin:auto;

    text-align:center;

    background:#133E24;

    border-radius:32px;

    padding:90px 50px;

    position:relative;

    overflow:hidden;

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

}

/* Decorative Border */

.global-cta-box::before{

    content:"";

    position:absolute;

    inset:20px;

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

    border-radius:24px;

    pointer-events:none;

}

/* Mandala */

.global-cta-box::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    top:-150px;

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

    opacity:.03;

}

/* Tag */

.cta-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#EE771C;

    font-family:Poppins,sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    position:relative;

    z-index:2;

}

/* Heading */

.global-cta h2{

    font-family:"Cormorant Garamond",serif;

    font-size:64px;

    line-height:1.1;

    color:#F8F5EE;

    margin-bottom:25px;

    position:relative;

    z-index:2;

}

/* Text */

.global-cta p{

    max-width:760px;

    margin:0 auto;

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

    font-size:18px;

    line-height:1.9;

    position:relative;

    z-index:2;

}

/* Buttons */

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    position:relative;

    z-index:2;

}

/* Primary */

.cta-primary{

    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:600;

    transition:.35s;

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

}

.cta-primary:hover{

    background:#ff8d3a;

    transform:translateY(-4px);

}

/* Secondary */

.cta-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border-radius:50px;

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

    color:#fff;

    text-decoration:none;

    font-family:Poppins,sans-serif;

    font-weight:600;

    transition:.35s;

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

    backdrop-filter:blur(10px);

}

.cta-secondary:hover{

    background:#fff;

    color:#133E24;

    transform:translateY(-4px);

}

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

@media(max-width:991px){

    .global-cta{

        padding:80px 25px;

    }

    .global-cta-box{

        padding:70px 35px;

    }

    .global-cta h2{

        font-size:48px;

    }

}

@media(max-width:767px){

    .global-cta-box{

        padding:60px 25px;

        border-radius:24px;

    }

    .global-cta h2{

        font-size:38px;

    }

    .global-cta p{

        font-size:16px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-primary,
    .cta-secondary{

        width:100%;

        max-width:260px;

    }

}/* End custom CSS */