body{
    background-color: #F1F1F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    @media (min-width: 800px) {

    }
}
h1, h2{
    font-family: "Changa One", sans-serif;
    font-weight: 400;
    font-style: normal;
    @media (min-width: 800px) {
        
    }
}
h3, h4, p, ul, li, span{
    font-family: "PT Sans", sans-serif;
    font-style: normal;
}
p, ul, li, span{
    font-weight: 400;
}
h3, h4{
    font-weight: 700;
}
/*--Header Section--*/
.header{
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; 
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    @media (min-width: 800px) {
        width: 90%;
        margin: 0 auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
.header__div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin-bottom: 2rem;
    @media (min-width: 800px) {
        flex-direction: row;/*--*/
        width: fit-content;/*--*/
        margin-bottom: 0rem;/*--*/
        padding: 0rem 1rem 0rem 0rem;/*--*/
    }
}
.header__h1{
    font-size: 2rem;
    @media (min-width: 800px) {
    }
}
.header__burguer{
    display: flex;
    width: 50px;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 8px;
    padding: 12px;
    svg{

    }
    @media (min-width: 800px) {
        display: none; /*--changed--*/
    }
}

.nav{
    display: none;
    width: -webkit-fill-available;
    margin-bottom: 0rem;
    border-radius: 8px;  
    @media (min-width: 800px) {
        width: fit-content;/*--*/
        display: flex;
    }

}
body.show-menu .nav{
    display: block;
}
.nav__list{
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 90%;
    margin: 0 auto;
    @media (min-width: 800px) {
        flex-direction: row;/*--*/
        width: 100%;
    }
}
.nav__item{
    border: 1px solid;
    padding: 8px 24px 8px 24px;
    font-size: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    @media (min-width: 800px) {
        border-radius: 0rem;/*--*/
        margin-bottom: 0rem; /*--*/
        border-right: 0px solid;/*--*/
    }
}
.nav__item:first-child{
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    @media (min-width: 800px) {
        border-radius: 0.5rem 0rem 0rem 0.5rem;/*--*/
    }
}
.nav__item:last-child{
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border-right: 1px solid;
    margin-bottom: 0rem; 
    @media (min-width: 800px) {
        border-radius: 0rem 0.5rem 0.5rem 0rem;/*--*/
    }
}
.nav__link{
    width: fit-content;
    text-decoration: none;
    @media (min-width: 800px) {

    }
}
.nav__item:hover{
    background-color: #FC927C;
    font-weight: 700;
    cursor: pointer; 
    @media (min-width: 800px) {

    }
}
/*--Text Section--*/
.section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem; 
    @media (min-width: 800px) {
        margin-bottom: 4rem;/*--*/
    }
}
.section__imgBg{
    background: linear-gradient(45deg, #747FD3, #B9C0FC);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3rem 0rem 0rem 0rem;
    @media (min-width: 800px) {
        padding: 2rem 0rem 0rem 0rem;
        flex-direction: row;/*--*/
        width: 90%;/*--*/
        max-width: 1600px;
        border-radius: 1rem;
    }
}
.section__img{
    max-width: 80%;
    margin: 0 auto;
    margin-top: 40px;
    @media (min-width: 800px) {
        width: 35%;/*--*/
        margin: 0; /*--*/
    }
}
.section__h2{
    font-size: 3rem;
    text-align: center;
    padding: 3rem 0rem 0rem 0rem;
    @media (min-width: 800px) {
        font-size: 4rem;/*--*/
        text-align: left;/*--*/
        width: 30%;/*--*/
    }
}
.section__em{
    color: white;
    font-family: "Changa One", sans-serif;
    font-style: normal;
    @media (min-width: 800px) {

    }
}
.section__div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-top: 1rem;
    @media (min-width: 800px) {
        margin-top: 2rem;/*--*/
    }
}
.section__blackquote{
    text-align: center;
    color: black;
    font-size: 28px;
    line-height: 37px;
    margin: 0 auto;
    padding: 2rem 0rem 2rem 0rem;
    @media (min-width: 800px) {

    }
}
.section__author{
    font-size: 24px;  
    @media (min-width: 800px) {
    }
}
/*--Card Section--*/
.cardsRow{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    @media (min-width: 800px) {

    }
}
.cardsRow__h2{
    color: #E3644A;
    text-transform: uppercase;
    font-size: 28px;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 2rem; 
    @media (min-width: 800px) {
        margin-bottom: 4rem;/*--*/
    }
}
.cardsRow__div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 2rem;  
    @media (min-width: 800px) {
        flex-direction: row; /*--*/
        margin: 0 auto;/*--*/
        margin-bottom: 4rem;/*--*/
        width: 90%; /*--*/
    }
}
.card{
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3rem;
    border-radius: 8px;
    -webkit-box-shadow: 3px 3px 10px -4px rgba(0,0,0,0.49); 
    @media (min-width: 800px) {
        width: 30%;/*--*/
        margin-bottom: 0rem; /*--*/
    }
}
.card__imgDiv{
    background-color: #FC927C;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    @media (min-width: 800px) {
        margin-top: 2rem;/*---*/
        margin-bottom: 2rem;/*---*/
    }
}
.card__img{
    border-radius: 50%;
    width: 9rem;
    mix-blend-mode: multiply; 
    @media (min-width: 800px) {

    }
}
.card__h4{
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 1rem;
    @media (min-width: 800px) {

    }
}
.card__p{
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    margin: 0rem 1rem 1rem 1rem; 
    @media (min-width: 800px) {
        margin: 0rem 1rem 1.5rem 1rem;/*---*/
    }
}
.cardsRow__button{
    background-color: #B9C0FC;
    padding: 16px 24px 16px 24px;
    border-radius: 6px;
    width: fit-content;
    margin: 0 auto;
    font-weight: 700;
    margin-bottom: 4rem;
    @media (min-width: 800px) {
        text-decoration: none;/*--*/
    }
}
/*--Footer--*/
.footer{
    background-color: #1E2534;
    height: fit-content;
    padding: 48px 64px 48px 64px;  
    @media (min-width: 800px) {

    }

}
.footer__p{
    width: 100%;
    margin: 0 auto;
    margin-left: 0;
    color: white;
    font-size: 16px;
    @media (min-width: 800px) {

    }
}