:root {
    --banner-slide-1: url('../../img/banner/banner_1_desktop.png');
    --banner-slide-2: url('../../img/banner/banner_1_desktop.png');
    --banner-slide-3: url('../../img/banner/banner_1_desktop.png');
    --banner-slide-4: url('../../img/banner/banner_1_desktop.png');
}

#container {
    #header .swiper {
        height: 70vh;

        .swiper-wrapper {
            &, .swiper-slide {
                height: 100%;
            }

            .swiper-slide {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .swiper-slide:nth-child(1) {background-image: var(--banner-slide-1);}
            .swiper-slide:nth-child(2) {background-image: var(--banner-slide-2);}
            .swiper-slide:nth-child(3) {background-image: var(--banner-slide-3);}
            .swiper-slide:nth-child(4) {background-image: var(--banner-slide-4);}
        }
    }

    #most-searched-services .content {
        padding-top: 3rem;
    }

    #feedbacks {
        background-color: #f2f2f2;
        
        .content .feedbacks-carousel {
            .feedback,
            .feedback .infos,
            .feedback .infos .top,
            .feedback .infos .bottom {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .feedback {
                padding: 1.5rem 1rem 1rem;
                border-radius: 12px;
                gap: 1rem;

                .infos {
                    gap: .6rem;

                    .top, .bottom {text-align: center;}

                    .top {
                        .name, 
                        .service {
                            color: var(--black);
                        }

                        .name {
                            font-size: 18px;
                            font-weight: 700;
                            font-family: var(--font-poppins);
                        }

                        .service {
                            font-size: 14px;
                            font-weight: 500;
                        }
                    }

                    .bottom .date {
                        color: var(--clr-dark-paragraph);
                        font-size: 14px;
                    }
                }

                .evaluation {
                    display: flex;
                    gap: .3rem;

                    svg {
                        width: 20px;
                        height: 20px;
                        fill: var(--highlight1);
                    }
                }

                .desc p {
                    text-align: center;
                    font-size: 15px;
                    color: var(--clr-dark-paragraph);
                }
            }
        }
    }

    #categories .content .links a {
        --category-image-1: url(../../../../img/cilios/efeito-express-1.jpeg);
        --category-image-2: url(../../../../img/sobrancelha/spa-1.jpeg);
        --category-image-3: url(../../../../img/maquiagem/noiva-cerimonial-1.jpeg);
        --category-image-4: url(../../../../img/maquiagem/noiva-civil-1.jpeg);
        --category-image-5: url(../../../../img/labial/hidragloss-1.jpeg);
        --category-image-6: url(../../img/cursos/extensao_cilios/certificado-2.webp);

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 10%;

        &:nth-child(1) {.image {background-image: var(--category-image-1);}}
        &:nth-child(2) {.image {background-image: var(--category-image-2);}}
        &:nth-child(3) {.image {background-image: var(--category-image-3);}}
        &:nth-child(4) {.image {background-image: var(--category-image-4);}}
        &:nth-child(5) {.image {background-image: var(--category-image-5);}}
        &:nth-child(6) {.image {background-image: var(--category-image-6);}}

        &:hover .text {
            gap: 1.1rem;
        }

        .image {
            width: 100%;
            aspect-ratio: 1/1;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 50%;
        }

        .text {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-family: var(--font-poppins);
            font-size: 16px;
            font-weight: 500;
            transition: all .2s;

            svg {
                width: 16px;
                height: 16px;
            }
        }
    }

    #about .content .links .link {
        --link-image-1: url('../../img/curso_online/extensao_cilios/instrutora_priscilla.jpeg');
        --link-image-2: url('../../img/studio2.png');
        --link-image-3: url('../../img/cursos/design_sobrancelhas/cta-final.webp');

        position: relative;
        display: flex;
        align-items: end;
        justify-content: start;
        padding: 1rem 1.5rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: calc((100% - (1rem * 2)) / 3);
        height: 250px;

        &:hover {
            &::before {
                opacity: .2;
            }

            .name {
                gap: 1rem;
            }
        }

        &, &::before {
            border-radius: 12px;
        }
        
        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: var(--black);
            opacity: .6;
            z-index: 1;
            transition: all .3s;
        }

        &:nth-child(1) {background-image: var(--link-image-1);}
        &:nth-child(2) {background-image: var(--link-image-2);}
        &:nth-child(3) {background-image: var(--link-image-3);}

        .name {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: 16px;
            font-weight: 500;
            font-family: var(--font-poppins);
            color: var(--white);
            z-index: 99;
            transition: all .4s;

            svg {
                width: 16px;
                height: 16px;
                fill: var(--white);
            }
        }
    }
}

@media (max-width: 1024px) {
    #container {
        #header .swiper {
            height: 40vh;   
        }   

        #categories .content .links {
            flex-wrap: wrap;
            gap: 2.5rem 3rem;

            a {
                width: 20%;
            }
        }

        #about .content .links {
            flex-wrap: wrap;

            .link {
                width: 45%;
                aspect-ratio: 1 / .55;
                height: auto;
            }
        }
    }
}

@media (max-width: 640px) {
    :root {
        --banner-slide-1: url('../../img/banner/banner_1_mobile.png');
        --banner-slide-2: url('../../img/banner/banner_1_mobile.png');
        --banner-slide-3: url('../../img/banner/banner_1_mobile.png');
        --banner-slide-4: url('../../img/banner/banner_1_mobile.png');
    }

    #container {
        #header .swiper {
            height: 60vh;   
        }  

        #categories .content .links a .text {
            font-size: 14px;

            svg {
                width: 14px;
                height: 14px;
            }
        }

        #about .content .links {
            flex-direction: column;
            gap: .6rem;

            .link {
                width: 90%;
                aspect-ratio: 1 / .4;

                 .name {
                    font-size: 15px;
                }
            }
        }
    }
}