@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --azul: #5bcefa;
    --rosa: #f5a9b8;
    --branco: #f0f0f0;
    --cinza: #4f4f4f;
    --preto: #121212;
    --Poppins: 'Poppins', sans-serif;
    --Inter: 'Inter', sans-serif;
    --gradiente: linear-gradient(90deg, rgba(245,169,184,1) 30%, rgba(91,206,250,1) 80%);
}



.carrossel{
    overflow-x: hidden;
    position: relative;
    margin-top: 4rem;
    width: 100% !important;
    text-align: center;
    
}

.swiper-container {
    width: 100%;
    max-width: 1400px;
    aspect-ratio: 16 / 9;
    margin: auto;
    padding: 20px 0;
    height: 450px;
}


.swiper-wrapper{
    margin-bottom: 2rem;
    width: 100%;
    height: 100%;
}

.swiper-wrapper .capaSwiper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}



.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilizando os dots da paginação */
.swiper-pagination-bullet {
    background: #f4a9c4 !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #f4a9c4 !important;
    opacity: 1;
}

.title{
    font-size: 3rem;
    font-family: var(--Poppins);
}

.texto{
    font-family: var(--Inter);
    line-height: 1.5;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 1rem;
}

.whyTransmasc .texto{
    margin-top: 1rem;
    margin-bottom: 0;
}

.gradient{
    background: var(--gradiente);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.aboutDirHum, .whyTransmasc{
    justify-self: center;
    width: 60%;
    text-align: center;
    margin-top: 2rem;
}

.whyTransmasc .gradient{
    background: linear-gradient(90deg, rgba(245,169,184,1) 0%, rgba(91,206,250,1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.list{
    margin-left: 10rem;
    width: 80%;
    font-family: var(--Inter);
    font-size: 1.2rem;
    text-align: justify;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/*responsividade*/

@media screen and (max-width: 1440px) {
    .carrossel{
        margin-left: -.6rem;
    }

    .aboutDirHum, .whyTransmasc{
        width: 80%;
        
    }

    .texto, .list{
        font-size: 1.5rem;
    }

    .whyTransmasc .gradient{
        background: linear-gradient(90deg, rgba(245,169,184,1) 20%, rgba(91,206,250,1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media screen and (max-width: 1080px){
    .texto, .list{
        font-size: 1.2rem;
    }
    .carrossel{
        margin-left: 0;
    }
}

@media screen and (max-width: 1024px) {
    .swiper-container{
        width: 950px;
        height: 300px;
        object-fit: contain;
    }

    .swiper-container .capaSwiper {
        width: 99%;
    }

    .title{
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 768px) {
    .swiper-container{
        width: 768px;
        height: 250px;
        object-fit: contain;
        
    }

    .title{
        font-size: 2rem;
    }

    .texto,.list{
        font-size: 1rem;
    }
    .list{
        margin-left: 4rem;
    }
}

@media screen and (max-width: 425px) {
    .swiper-container{
        width: 425px;
        height: 150px;
        object-fit: contain;
    }
    .title{
        font-size: 1.6rem;
    }
    .texto,.list{
        font-size: 0.9rem;
    }
    .list{
        margin-left: 2.6rem;
    }
    
}

@media screen and (max-width: 375px) {
    .swiper-container{
        width: 375px;
        height: 120px;
        object-fit: contain;
    }

    .carrossel{
        margin-top: 3.3rem;
    }

    .title{
        font-size: 1.4rem;
    }

    .aboutDirHum .title {
        margin-bottom: .5rem;
    }

    .aboutDirHum{
        margin-top: 1rem;
    }

    .texto,.list{
        font-size: .8rem;
    }
    .list{
        margin-left: 2rem;
    }
}

@media screen and (max-width: 320px) {
    .swiper-container{
        width: 320px;
        object-fit: contain;
    }
    .aboutDirHum{
        margin-top: .5rem;
    }
    .title{
        font-size: 1.2rem;
    }
    

}