:root{
    --gradient:linear-gradient(90deg, #637CBB, #485E95);
}

*{
    font-family: 'Open Sans', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline:none;
    text-transform: capitalize;
    transition: all .2s linear;
}

*::selection{
    background:#fff;
    color:#333;
}


body{
    background:#333333;
}

section{
    padding:0 7%;
    padding-top: 0 1%;
}

.btn{
    padding:.6rem 3rem;
    font-size: 2rem;
    margin-top: 1rem;
    cursor: pointer;
    border:none;
    background:var(--gradient);
    color:#fff;
}

.btn:hover{
    background:#ec9c07;
    color:#333;
}


.contact{
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.contact form{
    flex:1 1 40rem;
    background:#444;
    padding:1rem;
    box-shadow: 0 0 1rem rgba(0,0,0,.5);
}

.contact form .box{
    height:4rem;
    width:100%;
    background:none;
    border:none;
    border-bottom: .1rem solid #ccc;
    font-size: 1.5rem;
    margin:1rem 0;
    color:#fff;
    text-transform: none;
}

.contact form textarea{
    height:10rem;
    width:100%;
    background:none;
    border:none;
    border-bottom: .1rem solid #ccc;
    font-size: 1.5rem;
    margin:1rem 0;
    color:#fff;
    text-transform: none;
    resize: none;
}

.contact form .box::placeholder, .contact form textarea::placeholder{
    text-transform: capitalize;
}

.contact form .box:focus, .contact form textarea:focus{
    border-color: #637CBB;
}

.contact form .btn{
    width:100%;
}

.contact .content{
    flex:1 1 40rem;
    padding:4rem;
}

.contact .content h3{
    font-size: 2.5rem;
    color:#ff9900;
}

.contact .content p{
    font-size: 1.4rem;
    color:#eee;
    padding:1rem 0;
}

.contact .content .icons{
    display: flex;
    align-items: center;
}

.contact .content .icons p{
    font-size: 1rem;
    color:#fff;
}

.contact .content .icons i{
    font-size: 2rem;
    color:#637CBB;
    padding-right: 1rem;
}









/* media queries  */

@media (max-width:768px){

    html{
        font-size: 55%;
    }

    .contact .content{
        padding:3rem 0;
    }

}