@import "styles.css";


/* Landing Contact */
.pagesContact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
}

.infos{
    display: flex;
    margin: auto;
    padding: calc(var(--defaultSpace) - 1rem);
    text-align: justify;
    flex: 1;
}

.infosText{
    color: var(--firstColor);
}

.infosText .signature{
    color: var(--fifthColor);
    font-weight: bold;
}


.cardContact{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--defaultSpace) - 1rem);
    flex: 1;
}

.imgCard{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    width: calc(22rem - var(--defaultSpace));
    background-color: var(--fourthColor);
    box-shadow: .1rem .1rem 1rem var(--firstColor);
    border-radius: .5rem .5rem 0rem 0rem;
}
.imgCard img{
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    margin: .5rem;
}

.cardInfos{
    width: calc(22rem - var(--defaultSpace));
    padding: .2rem;
    background-color: var(--fifthColor);
    box-shadow: .1rem .1rem .5rem var(--firstColor);
}

.myInfos{
    text-align: center;
    margin: 2.5rem 0;
}
.name{
    font-size: 1.5rem;
    font-family: var(--secondFontFamily);
}
.infoTittle{
    font-size: 1rem;
    color: var(--secondColor);
    font-family: var(--secondFontFamily);
}

.infoList{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: .5rem 0;
    font-family: var(--firstFontFamily);
}

.info{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
    padding: .1rem .5rem;
    font-size: calc(.1rem + 14px);
}
.info svg{
    margin-right: .3rem;
    color: var(--secondColor);
}
/* ------------------------------------------------- */


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

    .header{
        font-size: .2rem;
    }

    .container{
        flex-direction: column;
    }

    .pagesContact{
        flex-direction: column;
    }

    .infos{
        padding: 0;
        margin-bottom: calc(var(--defaultSpace) + 1.5rem);
        font-size: calc(.4rem + 14px);
    }
}