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

body{
    font-family:Sora;
    background:#201E1B;
    overflow-x:hidden;
}

/* FONTS */

@font-face{
    font-family:Kanit;
    src:url('../fontes/Kanit-Regular.ttf');
}

@font-face{
    font-family:Sora;
    src:url('../fontes/Sora-Regular.ttf');
}

/* HEADER */

header{
    width:100%;
    position:relative;
}

#header_logo{
    width:60vw;
}

#title_container{
    position:absolute;
    top:15vw;
    left:8vw;
    z-index:1;
}

header h2{
    font-family:Kanit;
    color:#A6A6A6;
    font-weight:300;
    font-size:1.3rem;
}

.title_style_um{
    color:#645A48;
    font-weight:600;
    font-size:1.5em;
}

.title_style_dois{
    font-family:Kanit;
    color:#A4936C;
    font-weight:400;
    font-size:1.1em;
}

/* DIVIDER */

#divider{
    text-align:center;
}

#divider img{
    width:40px;
    margin:10px;
}

/* NAVBAR */

nav{
    z-index:10;
}

.sticky{
    position:fixed;
    top:0;
    width:100%;
}

.sticky + main{
    padding-top:60px;
}

nav ul{
    list-style:none;
    height:8vh;
    background:#645A48;
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
}

nav ul li{
    transition:0.4s;
}

nav ul li:hover{
    transform:scale(1.1);
}

nav ul li a{
    text-decoration:none;
    color:#A6A6A6;
    font-weight:300;
}

nav ul li a:hover{
    color:#d1d1d1;
}

/* MAIN */

main{
    padding:30px;
    padding-bottom:0;
}

h3{
    font-size:3rem;
    font-weight:400;
    color:#645A48;
    text-align:center;
}

hr{
    margin-top:80px;
    height:3px;
    border:none;
    background:#353535;
}

/* SOBRE */

#sobre_nos_container{
    padding-top:6vh;
    display:flex;
    flex-direction:column;
    gap:50px;
}

#sobre_nos_container div{
    display:flex;
    flex-direction:column;
    gap:20px;
}

#sobre_nos_container p{
    color:#A6A6A6;
    text-align:justify;
    line-height:1.8;
}

/* EQUIPE */

#equipe_container{
    padding-top:85px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#equipe_cards_container{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:40px;
    width:100%;
    justify-items:center;
}

.equipe_card{
    width:180px;
    height:257px;
    background:#645A48;
    border-radius:12px;
    padding:15px;

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

    text-align:center;

    transition:0.4s;
}
.card_name{
    font-size:0.9rem;
    color:#000;
    min-height:40px;

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

.card_description{
    font-size:0.75rem;
    min-height:35px;

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

.equipe_card:hover{
    transform:translateY(-8px);
}

.circle-yan,
.circle-ricardo,
.circle-jose,
.circle-afonso,
.circle-isa{
    width:80px;
    height:80px;
    border-radius:50%;
    background-size:cover;
    background-position:center;
}

.circle-yan{
    background-image:url("../images/integrantes/yan.jpg");
}

.circle-ricardo{
    background-image:url("../images/integrantes/ricardo.jpg");
}

.circle-jose{
    background-image:url("../images/integrantes/jose.jpeg");
}

.circle-afonso{
    background-image:url("../images/integrantes/afonso.jpg");
}

.circle-isa{
    background-image:url("../images/integrantes/isa.jpg");
}

.card_name{
    font-size:0.9rem;
    text-align:center;
    color:#000;
}

.card_description{
    font-size:0.75rem;
}

.icons-row{
    display:flex;
    gap:15px;
}

.card_link{
    width:20px;
    height:20px;
}

/* GALERIA */

#team_gallery{
    padding:80px 0;
}

#team_gallery p{
    color:#A6A6A6;
    text-align:center;
    margin-top:15px;
    margin-bottom:50px;
}

.gallery_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.gallery_grid img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:20px;
    transition:0.4s;
    filter:brightness(0.9);
}

.gallery_grid img:hover{
    transform:scale(1.02);
    filter:brightness(1);
}

/* PROJETO */

#projeto_container{
    width:100%;
    padding:60px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#A6A6A6;
    background-image:url('../images/back-proj.png');
    background-size:cover;
    background-position:center;
    border-radius:20px;
}

#projeto_content{
    width:100%;
    max-width:1200px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    margin-top:50px;
}

#projeto_text{
    flex:1;
}

#projeto_text p{
    text-align:justify;
    line-height:1.9;
}

#projeto_text ul{
    margin-top:30px;
    padding-left:20px;
}

#projeto_text li{
    margin-top:15px;
}

#projeto_image{
    flex:1;
    display:flex;
    justify-content:center;
}

#projeto_image img{
    width:100%;
    max-width:350px;
    height:auto;
}

#imageiot{
    width:100%;
    max-width:700px;
    margin-top:50px;
}

/* CARROSSEL */

.carousel{
    width:80%;
    overflow:hidden;
    margin:50px auto 0;
    position:relative;
}

.carousel-track{
    display:flex;
    transition:transform 0.5s ease-in-out;
}

.carousel-track img{
    width:100%;
    min-width:100%;
    object-fit:cover;
}

.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.4);
    border:none;
    color:white;
    font-size:2rem;
    padding:10px 16px;
    cursor:pointer;
    transition:0.3s;
}

.carousel-btn:hover{
    background:rgba(0,0,0,0.7);
}

.prev{
    left:15px;
}

.next{
    right:15px;
}

/* YOUTUBE */

.youtube{
    width:80%;
    max-width:900px;
    aspect-ratio:16/9;
    margin:50px auto;
    overflow:hidden;
    border-radius:20px;
}

.youtube iframe{
    width:100%;
    height:100%;
    border:none;
}

/* FOOTER */

footer{
    margin-top:50px;
    padding:20px;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

#footer_logo_tw{
    width:20%;
}

#footer_logo_github{
    width:8%;
}

#footer_logo_ecoSwitch{
    width:30%;
    justify-content: center;
    align-items: center;
    display: flex;
}

footer a:hover{
    transform:scale(1.05);
    transition:0.4s;
}

/* TABLET */

@media (min-width:481px) and (max-width:768px){

    main{
        padding:50px;
    }

    #header_logo{
        width:50%;
    }

    header h2{
        font-size:1.5rem;
    }

    .title_style_um{
        font-size:2rem;
    }

    .title_style_dois{
        font-size:1.8rem;
    }
}

/* MOBILE */

@media (max-width:900px){

    main{
        padding:20px;
    }

    h3{
        font-size:2.2rem;
    }

    #projeto_content{
        flex-direction:column;
        gap:40px;
    }

    #projeto_text{
        width:100%;
    }

    #projeto_text p{
        text-align:left;
    }

    #projeto_image img{
        max-width:260px;
    }

    #imageiot{
        width:100%;
    }

    .carousel{
        width:100%;
    }

    .youtube{
        width:100%;
    }

    .carousel-btn{
        font-size:1.2rem;
        padding:8px 12px;
    }

    footer{
        flex-direction:column;
        gap:20px;
    }

    #footer_logo_tw{
        width:60%;
    }

    #footer_logo_github{
        width:15%;
    }

    #footer_logo_ecoSwitch{
        width:60%;
    }
}

/* DESKTOP GRANDE */

@media (min-width:1025px){

    main{
        padding:50px 150px 0;
    }

    #header_logo{
        width:70vh;
    }

    #title_container{
        top:20vh;
        left:6vw;
    }

    header h2{
        font-size:3rem;
    }

    .title_style_um{
        font-size:5rem;
    }

    .title_style_dois{
        font-size:3rem;
    }

    #sobre_nos_container div{
        padding-inline:150px;
    }

    #footer_logo_tw{
        width:15%;
    }

    #footer_logo_github{
        width:3%;
    }

    #footer_logo_ecoSwitch{
        width:15%;
    }
}