.elementor-453 .elementor-element.elementor-element-f911393 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-453 .elementor-element.elementor-element-f911393 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-453 .elementor-element.elementor-element-f911393{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-f37ae0e *//*=================================
GALLERY HERO
=================================*/

.gallery-hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

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

.gallery-bg{
    position: absolute;

    top: -8%;
    left: -8%;

    width: 116%;
    height: 116%;

    background-image: url("https://clovespiice.com/wp-content/uploads/2026/07/Front-Photo.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.18);
    animation: heroZoomOut 8s ease-out forwards;

    will-change: transform;
    backface-visibility: hidden;
    transform-origin: center center;

    z-index: 0;
}

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

.gallery-overlay{
    position: absolute;
    inset: 0;

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

    z-index: 1;
}

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

.gallery-pattern{
    position: absolute;
    inset: 0;

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

    opacity: .04;

    z-index: 2;
}

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

.gallery-content{
    position: relative;
    z-index: 3;

    max-width: 860px;
    padding: 120px 25px;
}

.gallery-tag{
    display: inline-block;

    margin-bottom: 20px;

    color: #EE771C;

    font-family: Poppins,sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.gallery-content h1{
    font-family: "Cormorant Garamond",serif;
    font-size: 74px;
    font-weight: 500;
    line-height: 1.05;

    color: #F8F5EE;

    margin-bottom: 28px;
}

.gallery-content p{
    max-width: 720px;
    margin: auto;

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

    font-family: Poppins,sans-serif;
    font-size: 18px;
    line-height: 1.9;
}

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

.gallery-buttons{
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;

    margin-top: 45px;
}

.gallery-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 38px;

    border-radius: 50px;

    text-decoration: none;

    font-family: Poppins,sans-serif;
    font-weight: 600;

    transition: .35s;
}

.gallery-btn.primary{
    background: #EE771C;
    color: #fff;

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

.gallery-btn.primary:hover{
    background: #ff8d3a;
    transform: translateY(-4px);
}

.gallery-btn.secondary{
    color: #fff;

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

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

    backdrop-filter: blur(12px);
}

.gallery-btn.secondary:hover{
    background: #fff;
    color: #133E24;
}

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

.hero-scroll{
    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    z-index: 3;
}

.hero-scroll span{
    display: block;

    width: 28px;
    height: 48px;

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

    position: relative;
}

.hero-scroll span::before{
    content: "";

    position: absolute;

    left: 50%;
    top: 8px;

    width: 5px;
    height: 9px;

    background: #fff;

    border-radius: 20px;

    transform: translateX(-50%);

    animation: scrollMove 2s infinite;
}

/*=================================
ANIMATIONS
=================================*/

@keyframes heroZoomOut{

    0%{
        transform: scale(1.18);
    }

    100%{
        transform: scale(1);
    }

}

@keyframes scrollMove{

    0%{
        opacity: 1;
        transform: translate(-50%,0);
    }

    100%{
        opacity: 0;
        transform: translate(-50%,16px);
    }

}

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

@media (max-width:1024px){

    .gallery-content h1{
        font-size:58px;
    }

}

@media (max-width:767px){

    .gallery-hero{
        min-height:85vh;
    }

    .gallery-content{
        padding:100px 24px;
    }

    .gallery-content h1{
        font-size:42px;
    }

    .gallery-content p{
        font-size:16px;
    }

    .gallery-buttons{
        flex-direction:column;
        align-items:center;
    }

    .gallery-btn{
        width:100%;
        max-width:260px;
    }

}/* End custom CSS */