.customer-reviews{
    background-color: #2C5134;
    padding-block: 10% 5%;
    height: auto;
    .testimonial{
        position: relative;
        width: fit-content;
        height: fit-content;
        scale: 0.8;
        opacity: 0.5;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        &.swiper-slide-active{
            scale: 1.1;
            opacity: 1;
            .content{
                opacity: 1;
            }
        }
        .img{
            width: 40.271vw;
            height: 30.854vw;
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
                border-radius: 2vw;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 2vw;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
            }
        }
        .content{
            opacity: 0;
            transition: opacity 0.3s ease-in-out 0.3s;
            position: absolute;
            bottom: 5%;
            width: 100%;
            padding: 0 5%;
        }
        h5{
            font-family: "Articulat CF Bold";
            font-size: clamp(18px, 1.354vw, 2.5vw);
            color: #CDEA80;
            text-transform: capitalize;
            letter-spacing: 0.02em;
        }
        h6{
            font-family: "Articulat";
            font-size: clamp(14px, 1.042vw, 1.5vw);
            color: white;
            text-transform: uppercase;
            margin-block: 0.5vw;
            letter-spacing: 0.08em;
            line-height: 120%;
        }
        p{
            font-family: "Neue Haas Unica Pro";
            font-size: clamp(14px, 1.042vw, 1.5vw);
            color: white;
            line-height: 120%;
        }
    }
    .swiper-pagination-bullet{
        width: 0.677;
        height: 0.417vw;
        border-radius: 1vw;
        background: #ADAFA8;
        opacity: 1;
        transition: all 0.3s ease-in-out;
        &.swiper-pagination-bullet-active{
            background: #CDEA80;
            width: 2.083vw;
        }       
    }
}
.reviews-section{
    background-color: #2C5134;
    padding-block: 5%;
    height: auto;
    h1{
        font-family: "Articulat CF Bold";
        font-size: clamp(32px, 4.688vw, 5vw);
        color: #CDEA80;
        line-height: 120%;
        text-align: center;
        margin-bottom: 5%;
    }
    .cards-testimonial{
        padding-bottom: 3%;
    }
    .card-testimonial{
        width: 44.271vw;
        height: 18.229vw;
        margin-inline: 0.5%;
        border: 1px solid #CDEA80;
        border-radius: 1vw;
        display: flex;
        padding: 2% 3%;
        gap: 8%;
        transition: all 0.3s ease-in-out;
        &.swiper-slide-active{
            background: #CDEA80;
            path{
                fill: #2C5134;
            }
            p, h5, h6{
                color: #2C5134;
            }
        }
        svg{
            width: 4.688vw;
        }
        path{
            fill: #CDEA80;
        }
        .content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        p{
            font-family: "Neue Haas Unica Pro";
            font-size: clamp(14px, 1.354vw, 1.5vw);
            color: #CDEA80;
            line-height: 120%;
        }
        h5{
            font-family: "Articulat CF Bold";
            font-size: clamp(14px, 1.354vw, 1.5vw);
            color: #CDEA80;
            text-transform: capitalize;
        }
        h6{
            font-family: "Articulat";
            font-size: clamp(14px, 1.354vw, 1.5vw);
            color: #CDEA80;
            text-transform: capitalize;
        }
    }
    .swiper-pagination-bullet{
        width: 0.677;
        height: 0.417vw;
        border-radius: 1vw;
        background: #ADAFA8;
        opacity: 1;
        transition: all 0.3s ease-in-out;
        &.swiper-pagination-bullet-active{
            background: #CDEA80;
            width: 2.083vw;
        }       
    }
}

#modal-video .overlay{
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#modal-video .video-modal{
    z-index: 1;
}

@media (width < 1024px) {
    .customer-reviews{
        padding-block: 100px 50px;
        .testimonial{
            scale: 0.9;
            &.swiper-slide-active{
                scale: 1;
            }
            .img{
                width: 70vw;
                height: 53.333vw;
                &::before{
                    border-radius: 4vw;
                }
                img{
                    border-radius: 4vw;
                }
            }
            .content{
                bottom: 8%;
            }
            h5{
                font-size: clamp(16px, 3.125vw, 2.5vw);
            }
            h6{
                font-size: clamp(12px, 2.604vw, 1.5vw);
                margin-block: 1vw;
            }
            p{
                font-size: clamp(12px, 2.604vw, 1.5vw);
            }
        }
        .swiper-pagination-bullet{
            width: 1.25vw;
            height: 0.833vw;
            &.swiper-pagination-bullet-active{
                width: 3.125vw;
            }       
        }
    }
    .reviews-section{
        padding-block: 50px 20px;
        h1{
            font-size: clamp(24px, 6.25vw, 5vw);
            margin-bottom: 10%;
        }
        .cards-testimonial{
            padding-bottom: 35px;
        }
        .card-testimonial{
            width: 90vw;
            height: auto;
            padding: 20px 20; 
            gap: 4%;
            margin-inline: 8px;
            border-radius: 10px;
            svg{
                width: 8.333vw;
            }
            p{
                font-size: clamp(14px, 2.604vw, 1.5vw);
                margin-top: 10px;
            }
            .bottom{
                margin-top: 50px;
            }
            h5{
                font-size: clamp(14px, 2.604vw, 1.5vw);
            }
            h6{
                font-size: clamp(14px, 2.604vw, 1.5vw);
            }
        }
        .swiper-pagination-bullet{
            width: 1.25vw;
            height: 0.833vw;
            &.swiper-pagination-bullet-active{
                width: 3.125vw;
            }       
        }
    }
}