/* Contact Section  */
*{
    font-family: "Manrope-Regular";
    margin:0;padding:0;
    text-decoration: none;
    transition: all .2s linear;
}

html{
    font-family: "Manrope-Regular";
}


.Contact{
    position: relative;
    min-height: 50vh;
    padding-top:150px;
    padding-bottom:100px;
    box-shadow: inset 0 0 10px rgb(0, 0, 0);    
    background-color: var(--background);
}

.Contact h1{
    text-transform: uppercase;
    text-align: center;
    color: var(--secondary);
    text-shadow: 1px 1px 5px #001;
}

.Contact .container .card .info h2{
    color: var(--secondary);
    font-size: 2em;
}

.Contact .container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 500px;
}

.Contact .container .card{
    display: flex;
    background-color: var(--secondary);
    width:600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgb(0, 0, 0, 0.2) 5px 5px 10px;
}


.Contact .container .card .info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: var(--background);
    height: 100%;
    width: 260px;
}

.Contact .container .card .info .box{
    display: flex;
}



.Contact .container .card form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    padding-bottom: 0;
    background-color: var(--secondary);
    height: 100%;
    width: 260px;
}



.Contact .container .card form .inputs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: left;
    align-self: center;
}

.Contact .container .card form input
,.Contact .container .card form textarea{
    padding-left: 10px;
    width: 240px;
    height: 30px;
    background-color: var(--secondary);
    color: var(--background);
    border-radius: 30px;
    border: .2rem solid var(--background);
    resize: none;
    font-size: 1.5em;
}


.Contact .container .card form textarea{
    padding: 10px;
    height: 140px;
    width: 230px;
    border-radius: 10px;
}


.Contact .container .card form .submit{
    position: relative;
    border: .2rem solid var(--secondary-snd);
    border-radius: 5px;
    color:var(--secondary);
    background-color:var(--background);
    width: 120px;
    height: 40px;
    cursor: pointer;
    padding: 0;
}

.Contact .container .card form .submit:hover{
    color:var(--background);
    background-color:var(--secondary);
}

/* Media queries */

/********** @970px **********/

@media  screen and (max-width: 970px ) {
    
    .Contact  h1{
        font-size: 6em;
    }

    .Contact .container{
        height: 850px;
    }

    .Contact .container .card{
        border-radius: 0;
        padding-top: 20px;
        flex-direction: column;
        align-items: center;
    }
    
    .Contact .container .card .info,
    .Contact .container .card form{
        border-radius: 20px;
    }
    

    .Contact .container .card form{
        padding-bottom: 20px;
    }
    
}