@import url('https://fonts.googleapis.com/css2?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');
/* Option 2: Import via CSS */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
}



#capoeira{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #4273B8;
    color: white;
}

.container_capoeira{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.capoeira_texto{
    width: 450px;
}

.capoeira_img{
    width: 450px;
}

.capoeira_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
    object-fit: cover;
    margin-top: 50px;
}

.h2_capoeira_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_capoeira_texto{
    font-size: 1.2rem;
    text-align: justify;
}



#ballet{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #B9319D;
    color: white;
}

.container_ballet{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.ballet_texto{
    width: 450px;
}

.ballet_img{
    width: 450px;
}

.ballet_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
    object-fit: cover;
}

.h2_ballet_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_ballet_texto{
    font-size: 1.2rem;
    text-align: justify;
}




#boxe{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #009900;
    color: white;
}

.container_boxe{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.boxe_texto{
    width: 450px;
}

.boxe_img{
    width: 450px;
}

.boxe_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
    object-fit: cover;
}

.h2_boxe_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_boxe_texto{
    font-size: 1.2rem;
    text-align: justify;
}




#skate{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #4273B8;
    color: white;
}

.container_skate{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.skate_texto{
    width: 450px;
}

.skate_img{
    width: 450px;
}

.skate_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
    object-fit: cover;
}

.h2_skate_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_skate_texto{
    font-size: 1.2rem;
    text-align: justify;
}



#manicure{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #B9319D;
    color: white;
}

.container_manicure{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.manicure_texto{
    width: 450px;
}

.manicure_img{
    width: 450px;
}

.manicure_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
}

.h2_manicure_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_manicure_texto{
    font-size: 1.2rem;
    text-align: justify;
}



#barbearia{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background: #009900;
    color: white;
}

.container_barbearia{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 100px;
}

.barbearia_texto{
    width: 450px;
}

.barbearia_img{
    width: 450px;
}

.barbearia_img img{
    width: 100%;
    border-radius: 32px;
    height: 350px;
    object-fit: cover;
    margin-top: 50px;
}

.h2_barbearia_texto{
    font-size: 2rem;
    margin-bottom: 30px;
}

.p_barbearia_texto{
    font-size: 1.2rem;
    text-align: justify;
}




@media (max-width: 801px){
    .container_capoeira{
        gap: 50px;
    }

    .capoeira_img img{
        margin-top: 0px;
    }

    .h2_capoeira_texto{
        margin-top: 50px;
    }

    .container_ballet{
        flex-flow: row wrap-reverse; 
        gap: 50px; 
    }

    .container_boxe{
        gap: 50px;
    }

    .container_skate{
        flex-flow: row wrap-reverse; 
        gap: 50px; 
    }

    .container_manicure{
        flex-flow: row wrap-reverse; 
        gap: 50px; 
    }

    .manicure_img img{
        margin-top: 0px;
    }

    .container_barbearia{
        gap: 50px;
    }

    .barbearia_img img{
        margin-top: 0px;
    }

    .h2_barbearia_texto{
        margin-top: 50px;
    }




}

@media (max-width:401px){
    .h2_capoeira_texto{
        text-align: center;
    }

    .h2_ballet_texto{
        text-align: center;
    }

    .h2_boxe_texto{
        text-align: center;
    }

    .h2_skate_texto{
        text-align: center;
    }

    .h2_manicure_texto{
        text-align: center;
    }

    .h2_manicure_barbearia{
        text-align: center;
    }
}