@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap');

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

.container1, .container2, .fixo, .container3, .container4, .container5, .container6{
    animation: CSSscrollReveal ease-in-out both;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}

@keyframes CSSscrollReveal{
    from {
    opacity: 0;
    transform: translateY(100px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

@keyframes fade-up{
    0%{
        opacity: 0;
        transform: translate(30px) scale(0.9);
    }
    100%{
        opacity: 1;
        transform: translate(0px) scale(1);

    }
} 

@font-face {
    font-family: 'rama';
    src: url('C:\Users\ARROBA_11-10-2023\Desktop\fonts\rama.ttf')
    format('truetype');
}


header{
    width: 100%;
    background-color: black;
    padding: 0% 8% 0% 12%;
}

.cabecalho{
    display: flex;
    align-items: center;
    padding: 20px 0px 20px 0px;
    gap: 65%;
}

.cabecalho__logotipo{
    width: 10%;
}

body{
    background-color: #FDF8F2;
}

.container{
    height: 500px;
    background-image: linear-gradient(to right, rgb(24, 22, 22)19%, rgba(0,0, 0, 0) ), url(/assets/Bone.png);
    background-repeat: no repeat;
    background-position: center;
    background-size: cover;
}

.container__imagemBone__texto{
    margin: 8% 52% 0% 12%;
    color: white;
    position: absolute; 
    animation: fade-up 0.5s;
}

.container__imagemBone__texto__titulo{
    font-family: 'rama', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
}
.container__imagemBone__texto__titulo2{
    font-family: 'rama', sans-serif;
    font-weight: 400;
    font-size: 1.37rem;
}

.container1{
    padding: 5% 8% 1% 12%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap:30px;

}

.container1__imagemBoneco{
    width: 500px;
    border-radius: 7%;
}

.container1__conteudo__titulo1{
    font-family: 'rama', sans-serif;
    font-weight: 750;
    font-size: 3rem;
    color: #FF4100;
}

.container1__conteudo__titulo{
    font-family: 'rama', sans-serif;
    font-weight: 750;
    font-size: 3rem;
}

.container1__conteudo__texto{
    font-family: 'rama', sans-serif;
    font-weight: 400;
    font-size: 1.18rem;
    text-align: justify;
   
}

.container2{
    padding: 30px;
    width: 460px;
    height: 290px;
    background-color: rgb(252, 249, 249);
    border-radius: 15px;
    box-shadow:  5px 0 20px rgb(187, 181, 181);
}

.container2__titulo{
    font-family: 'rama', sans-serif;
    font-weight: 700;
    font-size: 1.62rem;
    color:  #FF4100 ; 
    text-align: center;
}

.container2__conteudo{
    font-family: 'rama', sans-serif;
    text-align: center;
}

.cont{
    display: flex;
    padding: 1% 8% 1% 12%;
    gap: 30px;
}

.fixo{
    background-image: url(/assets/Telao.png);
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no repeat;
    background-size: cover;
}

.container3{
    padding: 1% 8% 1% 12%;
    background-color: black;
    
}


.container3__titulo{
    display: flex;
    justify-content: center;
    font-family: 'rama', sans-serif;
    font-size: 2.32rem;
    color: white;
}

.container3__instagran{
    padding: 5px;
    width: 350px;
    height: 350px;
}

.container4{
    padding: 3% 8% 1% 12%;
    display: flex;
    align-items: center;
    text-align: justify;
    gap: 50px;
}

.container4__imagemLivro{
    width: 600px;
    border-radius: 20px;
    box-shadow:  15px 0 50px rgb(236, 232, 232);
    
}

.container4__conteudo__titulo{
    font-family: 'rama', sans-serif;
    font-weight: 700;
    font-size: 1.37rem;
    color: #FF4100 ;
}


.container4__conteudo__titulo__paragrafo{
    font-family: 'rama', sans-serif;
    font-weight: 400;
    font-size: 1.12rem;
    color: black;

}

.container5{
    padding: 2%;
    background-color: white
}

.container5__titulo{
    display: flex;
    justify-content: center;
    font-family: 'rama', sans-serif;
    font-size: 2.32rem;
    color: #141414;

}

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

.container5__imagemColaboradores{
    padding: 3%;
    width: 300px;
}

.container5__imagemColaboradores1{
    padding: 5%;
    width: 500px;
    height: 250px;
}

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

.container6__imagemLeitura{
    width: 50%;
}

.container7{
    padding: 1% 8% 1% 12%;
    background-color: black;
}


.container7__titulo{
    display: flex;
    justify-content: center;
    font-family: 'rama', sans-serif;
    font-size: 2.32rem;
    color: white;
}

.container7__youtube{
    padding: 5px;
}


footer{
    width: 100%;
    background-color: black;
    padding: 0% 8% 0% 12%;
}

.rodape{
    display: flex;
    align-items: center;
    gap: 65%;
}

.rodape__logotipo{
    width: 10%;
}

@media (max-width: 1532px ){

    .container2{
        align-items: center;
        height: auto;
    } 
}

@media (max-width: 1340px ){
        
    .container1{
        padding: 0% 6% 0% 11%;
    }   
}


@media (max-width: 1300px ){

    .cabecalho{
        flex-direction: column-reverse;
    }

    .cabecalho__logotipo{
        width: 22%;
    }

    .container__imagemBone__texto{
        margin: 8% 30% 0% 3%;
    }

    .container{
     background-position: center center;
     padding: 20px 20px 20px 20px;
    }

    .container__imagemBone__texto__titulo{
        font-size: 2rem;
    }

    .container__imagemBone__texto__titulo2{
        font-size: 1.35rem;;
    }
 
     .container1{
         flex-direction: column-reverse;
         padding: 20px 20px 20px 20px;
     }
     
     .container1__imagemBoneco{
         width: 100%;
     }

     .container1__conteudo__titulo{
        font-size: 2.0rem;
     }

     .container2{
        padding: 20px 20px 20px 20px;
        width: auto;
     }
    
     .cont{
         flex-direction: column;
         padding: 3%;
     }
 
     .container3{
        padding: 20px 20px 20px 20px;
     }

     .container3__titulo{
        font-size: 2.0rem;
     }
 
     .container4{
         flex-direction: column-reverse;
         padding: 20px 20px 20px 20px;
     }

     .container4__imagemLivro{
        width: 95%;
     }

     .container5{
        padding: 20px 20px 20px 20px;
     }

     .container5__titulo{
        font-size: 2.0rem;
     }

     .container5__imagens{
        flex-direction: column;
        align-items: center;
     }

     .container5__imagemColaboradores{
        width: 35%;
     }

     .container5__imagemColaboradores1{
        width: 220px;
        height: 110px;
     }
     .container7{
        padding: 20px 20px 20px 20px;
     }

     .container5__imagens{
        flex-direction: column;
     }

     .container7__youtube{
        width: 100%;
     }

     .container7__titulo{
        font-size: 2.0rem;
     }

     .rodape__logotipo{
        width: 25%;
    }

    .rodape{
    
        gap: 50%;
    }
    
     
    }