@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



*{

    margin: 0;

    padding: 0;

    font-family: "Roboto", sans-serif;

    box-sizing: border-box;

}



html{

    scroll-behavior: smooth;

}



body{

    background: white;

    color: gray;

}



/* -----header----- */



#header{

    width: 100%;

    height: auto;

    background-image: linear-gradient(to bottom, transparent, white), url(images/padrao_background.png);

    background-size: cover;

    background-position: center;

}



.container{

    padding: 10px 10%;

}



nav{

    margin-top: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

}



.logo{

    width: 140px;

    animation: fadeIn 2s;

}



nav ul li{

    display: inline-block;

    list-style: none;

    margin: 10px 20px;

}



nav ul li a{

    color: gray;

    text-decoration: none;

    font-size: 18px;

    position: relative;

    animation: fadeIn 3s;

}



nav ul li a::after{

    content: '';

    width: 0;

    height: 3px;

    background: gray;

    position: absolute;

    left: 0;

    bottom: -6px;

    transition: 0.5s;

}



nav ul li a:hover::after{

    width: 100%;

}



@keyframes fadeIn{

    0% {opacity: 0;}

    100% {opacity: 1;}

}



.language{

    padding: 5px;

    margin-bottom:50px;

    font-size: 14px;

    text-decoration: none;

    font-family: 'Roboto', sans-serif;

    color: gray;

    border-width: thin;

    border-style: dashed;

    border-color: gray;

    transition: 0.5s;

    animation: fadeIn 5s;

}



.language:hover{

    color: black;

    border-color: black;

    border-radius: 5px;

}



/* -----slider----- */



section.slider{

    margin: 20px auto;

    width: 100%;

    height: auto;

    padding: 0 !important;

    overflow: hidden;

    margin-bottom: 60px;

}



.slider-content{

    width: 600%;

    height: auto;

    display: flex;

}



.slider-content input, .img-mobile{

    display: none;

}



.slide-box{

    width: 16.66667%;

    height: auto;

    position: relative;

    text-align: center;

    transition: 1s;

}



.slide-box img{

    width: 100%;

    animation: fadeIn 3s;

}



.nav-manual, .nav-auto{

    position: absolute;

    width: 100%;

    margin-top: 35%;

    display: flex;

    justify-content: center;

}



.nav-manual .manual-btn, .nav-auto div{

    border-width: thin;

    border-style: dashed;

    border-color: gray;

    padding: 7.5px;

    border-radius: 50%;

    cursor: pointer;

    transition: 0.5s;

    animation: fadeIn 5s;

}



.nav-manual .manual-btn:not(:last-child), .nav-auto div:not(:last-child){

    margin-right: 10px

}



.nav-manual .manual-btn:hover{

    background-color: gray;

}



#radio1:checked ~ .nav-auto .auto-btn1, 

#radio2:checked ~ .nav-auto .auto-btn2,

#radio3:checked ~ .nav-auto .auto-btn3,

#radio4:checked ~ .nav-auto .auto-btn4,

#radio5:checked ~ .nav-auto .auto-btn5{

    background-color: gray;

}



#radio1:checked ~ .first{

    margin-left: 0%;

}



#radio2:checked ~ .first{

    margin-left: -16.66667%;

}



#radio3:checked ~ .first{

    margin-left: -33.33333%;

}



#radio4:checked ~ .first{

    margin-left: -50%;

}



#radio5:checked ~ .first{

    margin-left: -66.66667%;

}



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

    .img-desktop{

        display: none;

    }

    .img-mobile{

        display: block;

    }

    .nav-auto, .nav-manual{

        margin-top: 65%;

    }

    .nav-manual .manual-btn, .nav-auto div{

        padding: 5px;

    }

    .nav-manual .manual-btn:not(:last-child), .nav-auto div:not(:last-child){

        margin-right: 7.5px

    }

}



/* -----about project----- */



.about-projetct{

    padding: 80px 0;

    color: black;

}



.about-text{

    padding-top: 20px;

    padding-right: 75%;

    font-size: 16px;

    font-family: 'Roboto light', sans-serif;

    color: gray;

    text-indent: 15px;

    animation: fadeIn 5s;

}



.link{

    margin-top: 20px;

}



.about-text-link{

    font-size: 16px;

    font-family: 'Roboto light', sans-serif;

    color: #124d75;

    text-decoration: none;

    animation: fadeIn 7s;

}



.sub-title{

    font-size: 45px;

    font-family: 'Roboto light', sans-serif;

    color: black;

    animation: fadeIn 3s;

}



/* -----footer----- */



.footer{

    text-align: center;

}



.copyright{

    width: 100%;

    padding: 20px 0;

    font-size: 14px;

}



/* -----small screen css----- */



nav .fa-solid{

    display: none;

}



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

    #header{

        background-image: linear-gradient(to bottom, transparent, white), url(images/padrao_background_16-9.png);

    }

    .header-text{

        margin-top: 100%;

        font-size: 16px;

    }

    .header-text h1{

        font-size: 30px;

    }

    nav .fa-solid{

        display: block;

        font-size: 16px;

        cursor: pointer;

    }

    nav ul{

        position: fixed;

        background: white;

        border-left-width: thin;

        border-left-style: dashed;

        border-left-color: black;

        top: 0;

        right: -200px;

        width: 200px;

        height: 100vh;

        padding-top: 50px;

        z-index: 2;

        transition: right 0.5s;

    }

    nav ul li{

        display: block;

        margin: 25px;

    }

    nav ul .fa-solid{

        position: absolute;

        top: 25px;

        left: 25px;

    }

    .sub-title{

        font-size: 30px;

    }

    .about-text{

        font-size: 14px;

        padding-right: 0;

    }

    .about-text-link{

        font-size: 14px;

    } 



    .copyright{

        font-size: 14px;

    }

}