/* index.html */

/* head */

.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

body {
    font-family: 'Inter', sans-serif;
}

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

/* ### MENU  ### */

nav#desktop ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

    display: flex;
    justify-content: space-between;
}

nav#desktop ul li {
    margin: 0 10px;
}

nav a {
    color: black;
    text-decoration: none;
}

nav a:visited {
    color: black;
}

nav a:hover {
    text-decoration: underline;
    color: #9A7D46;
}

#bigmac {
    display: none;

    width: 40px;
    height: 28px;

    position: relative;

    z-index: 30;

    cursor: pointer;
}

#bigmac .linha {
    position: absolute;
    height: 4px;
    width: 100%;


    background-color: white;
    border-radius: 9px;

    opacity: 1;
    left: 0;

    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
}


#bigmac .linha:nth-child(1) {
    top: 0px;
}

#bigmac .linha:nth-child(2) {
    top: 12px;
}

#bigmac .linha:nth-child(3) {
    top: 12px;
}

#bigmac .linha:nth-child(4) {
    top: 24px;
}

#bigmac.open .linha:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#bigmac.open .linha:nth-child(2) {
    transform: rotate(45deg);
}

#bigmac.open .linha:nth-child(3) {
    transform: rotate(-45deg);
}

#bigmac.open .linha:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

nav#mobile {
    display: none;

}

/* FIM HEADER */

img {
    display: block;
    width: 100%;
}

header img {
    width: 50px;
}

.grelha {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    align-items: start;


    width: 80%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

#cdp30anos {
    background-image: url(media/basegradientheader.png);
    background-repeat: no-repeat;
    background-position: center bottom;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 100px;
    padding-bottom: 100px;

}

#cdp30anos img {
    width: 70%;
}


#intro {
    background-color: #FFBDC0;
    padding-top: 115px;
    padding-bottom: 115px;
}


/* section intro */

.grad {
    background-image: linear-gradient(0deg, #E4DBBF, #ffbdc0);
    height: 125px;
}

#bv {
    grid-column-start: 1;
    grid-column-end: 13;
    font-size: 26px;
    text-align: center;
    padding-bottom: 60px;
}

#star {
    grid-column: 1;
    width: 50px;
    padding-top: 15px;
}

#mc {
    grid-column: 2/13;
    font-size: 25.5px;
    font-style: italic;
    margin: 0;
    padding-top: 25px;
}

/* section testemunhos */

#testemunhosection {
    background-color: #E4DBBF;
    padding-top: 90px;
}

#comun {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
}

.aspas {
    max-width: 76px;
    margin: auto;
    padding-bottom: 40px;
}

#testemunhos {
    padding-top: 95px;
}

.texto-testemunhos {
    font-size: 19px;
}

.nome-testemunhos {
    padding-top: 40px;
    padding-bottom: 5px;
    font-size: 15px;
    font-weight: bold;
}


.descricao-testemunhos {
    font-size: 15px;
}


.caixa_testemunhos {
    grid-column: span 4;
    text-align: center;
}


/* blank section */

#blank {
    background-color: #BADD90;
    padding-top: 100px;
    padding-bottom: 400px;
    background-image: url(media/beige.png);
    background-repeat: no-repeat;
    background-position: center top;

    display: flex;
    justify-content: center;
    align-items: center;

}

#descobre_botao {
    position: relative;
    text-align: center;
    display: grid;
    align-items: center;
    color: black;
    font-style: bold;
}

#descobre-dentro {
    position: absolute;
    text-align: center;
    width: 100%;
}

#descobre-dentro:hover {
    color: lightgray;
}


/* footer */

footer {
    background-color: #9A7D46;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cdp_logotipo_footer {
    width: 300px;
    margin: auto;
    max-width: 80%;
}

.grid_links {
    width: 90%;
    max-width: 500px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.grid_links a {
    text-decoration: none;
    color: white;
}

#copy {
    width: 90%;
    max-width: 600px;
    margin: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    color: white;
    padding-top: 10px;
    padding-bottom: 12px;
    white-space: normal;
}

#redes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding-top: 18px;
    padding-bottom: 30px;
}

a {
    color: white;
    text-decoration: none;
    /* underline */
    text-transform: capitalize;
}

a:hover {
    color: darkgray;
}


/* sobre_nos.html */

#introsobrenos {
    background-color: #FFBDC0;
    background-image: url(media/pink_radial_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 130px;
}

#conhece {
    grid-column-start: 1;
    grid-column-end: 13;
    text-align: center;
    font-size: 27px;
    padding-top: 130px;
}

#o-centro {
    grid-column-start: 1;
    grid-column-end: 13;
    text-align: center;
    font-size: 27px;
    padding-top: 30px;
}

#baseamos-nos {
    grid-column-start: 1;
    grid-column-end: 13;
    text-align: center;
    font-size: 27px;
    padding-top: 30px;
}


#umsonho {
    grid-column: 1 / 7;
    padding-top: 170px;
    padding-bottom: 30px;
    font-weight: 600;
    font-size: 29px;
}

#teresatexto {
    grid-column: 1 / 7;
    font-size: 18px;
}

#imagem-destaque {
    grid-column: 8 / 13;
    width: 100%;
    padding-top: 20px;
}

header {
    background-color: #BADD90;
    padding-bottom: 7px;
    padding-top: 7px;
}

#menu_nav {
    width: 80%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* section carousel estudios  */

#carousel_estudios {
    background-color: #BADD90;
}

#espacos {
    grid-column: 1/13;
    margin: auto;
    text-align: center;
    padding-top: 130px;
}

#gold_line {
    grid-column: 1/13;
    margin: auto;
    width: 340px;
    padding-top: 15px;
}

#oestudio {
    padding-top: 70px;
    padding-bottom: 40px;
    grid-column: 3/5;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
}

#pin {
    padding-top: 70px;
    padding-bottom: 40px;
    width: 30px;
    margin: auto;
    grid-column-start: 2;
}

.swiper {
    grid-column: 2/12;
    width: 100%;
    min-width: 0;
    margin-bottom: 50px; 
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#infra {
    grid-column: 2/13;

    font-style: italic;
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 270px;
}

.emflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
}

#equipa {
    background-image: url(media/fundo_equipa.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-bottom: 200px;
    height: auto;
}

#titulo_equipa {
    grid-column: 1 / 13;
    padding-top: 75px;
    margin: auto;
    text-align: center;
}

#logot {
    width: 50px;
    grid-column: 1 / 13;
    padding-top: 11px;
    margin: auto;
}

#teresa {
    grid-column: 2 / 6;
    padding-top: 130px;
}

#dados_teresa {
    grid-column: 7 / 12;
    padding-top: 140px;
}

#teresavi {
    font-weight: 500;
    font-size: 26px;
    padding-bottom: 5px;
}

#cargo_teresa {
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 25px;

}

#dados_jaime {
    grid-column: 2 / 7;
    padding-top: 130px;
}

#jaime {
    grid-column: 8 / 12;
    padding-top: 100px;
}

#jaimeto {
    font-weight: 500;
    font-size: 26px;
    padding-bottom: 5px;
}

#cargo_jaime {
    font-style: italic;
    font-size: 18px;
    padding-bottom: 25px;
    font-weight: 500;
}

.texto_bio {
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;

}


#titulo_docentes {
    grid-column: 1 / 13;
    text-align: center;
    padding-top: 190px;
}

#linha_fotos {
    grid-column: 1 / 13;

    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 100px;
    padding-bottom: 50px;
}

.foto_item {
    width: 23%;
}

.foto_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === RESPONSIVE === */

@media screen and (max-width: 800px) {
    #teresa,
    #dados_teresa,
    #jaime,
    #dados_jaime {
        grid-column: 1 / 13;
        text-align: center;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #dados_jaime {
        padding-top: 20px;
    }
}

/* RESPONSIVE */



@media screen and (max-width:500px) {

    .grelha {
        display: block;
        width: 95%;
    }

    body {
        margin: 5px;
    }

    #cdp_logotipo_footer {
        max-width: 250px;
    }

    /* section cdp 30 anos */

    #cdp30anos img {
        width: 100%;
    }

    /* section intro */

    #bv {
        font-size: 19px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #star {
        max-width: 40px;
        height: 100%;
        margin: auto;
    }

    #mc {
        font-size: 20px;
        text-align: center;
    }

    .emflex {
        flex-direction: row;
        justify-content: center;
        max-width: 80%;
    }


    /* section testemunhos */

    h1 {
        font-size: medium;
    }


    #comun {
        font-size: 22px;
    }

    .aspas {
        max-width: 50px;
        padding-bottom: 10px;
        padding-top: 53px;
    }

    .texto-testemunhos {
        font-size: 15px;
    }

    .nome-testemunhos {
        font-size: 13px;
        padding-top: 10px;
    }

    .descricao-testemunhos {
        font-size: 13px;

    }

    #descobre_botao {
        max-width: 300px;
    }


    #linha_fotos {
        flex-direction: column;
        padding-top: 50px;
        }
    
    .foto_item {
        width: 100%;  
        margin-bottom: 20px;
    }



    .grid_links {
        width: 90%;
    }

    #redes {

        width: 50%;
    }

    header {
        width: 100%;

        position: fixed;
        top: 0;

        z-index: 9999;
    }

    #menu_nav {
        width: 95%;
    }

    #bigmac {
        display: block;
    }

    header img {
        margin: 0;
        text-align: center;
        padding: 8px 0;
    }

    nav#desktop {
        display: none;

    }

    nav#mobile {
        display: block;
        position: fixed;


        z-index: 20;
        width: 100%;
        left: -100vw;
        top: 70px;
        transition: .3s linear;

        background-color: rgba(182, 230, 255, 0.95);
    }


    nav#mobile.menu_abre {
        left: 0;
    }

    nav#mobile ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    nav#mobile li {
        width: 100%;
        padding: 20px 0;
        text-align: center;
        height: 80px;
    }


}



#banner_ensino {
    background-image: url(media/ensinoheader.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 490px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 180px;
}

#banner_ensino h1 {
    color: #E6DFC9;
    font-size: 50px;
}
#ensino_azul {
    background-image: url(media/fundo_ensinoartistico.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 4013px;
    padding-top: 80px;
    padding-bottom: 80px;
    color: #E4DBBE;
}

#ensino_verde {
    background-color: #BADD90;
    padding-top: 80px;
    padding-bottom: 80px;
}

#ensino_bege {
    background-color: #F5F2DC;
    padding-top: 80px;
    padding-bottom: 80px;
}


.titulo_centro {
    grid-column: 3 / 11;
    text-align: center;
    margin-bottom: 60px;
}

#ensinoart {
    font-size: 30px;
    font-weight: 800;
    padding-bottom: 7px;
}

#nocentro {
    display: grid;
    grid-column: 2/12;
    font-size: 25px;
    font-weight: 600;
}

.lado_esquerdo {
    grid-column: 1 / 7;
    margin-bottom: 50px;
}

.lado_direito {
    grid-column: 7 / 13;
    margin-bottom: 50px;
}

.coluna_tres {
    grid-column: span 4;
}

.padding_extra {
    padding-top: 20px;
}

ul {
    margin-left: 20px;
    margin-top: 10px;
}

.caixa_info {
    grid-column: 1 / 13;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 5px;
}


@media screen and (max-width: 500px) {
    .titulo_centro,
    .lado_esquerdo,
    .lado_direito,
    .coluna_tres,
    .caixa_info {
        grid-column: 1 / -1;
        width: 100%;
        margin-bottom: 30px;
    }

    #banner_ensino {
        height: 200px;
        margin-top: 95px;
    }

    #banner_ensino h1 {
        font-size: 30px;
    }
}

#ensino_azul img {
    max-width: 340px;
}