/* GLOBAL */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items:center;
    background-color: rgb(245, 245, 245);
}

.row{
    display: flex;
    flex-direction: row;
}
.column{
    display: flex;
    flex-direction: column;
}

/* MAIN CONTAINER */
.container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* CONTACT US HEADER */
.contact-us-header{
    width: 100%;
    height: 275px;
    background: url('https://res.cloudinary.com/q--design-automobile/image/upload/v1651423736/about_us_header_giutnu.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -375px;
}
.contact-us-heading-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: rgba(0, 0, 0, 0.4);
}
.contact-us-header h1{
    color: rgb(248.5, 248.5, 248.5);
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2.5px;
    padding-bottom: 2.5rem;
    text-align: center;
}

 /* slide in for animation */
@keyframes sliderInfoAnimation{
    from{
        bottom: -12.5rem;
        opacity: 0;
    }
    to{
        bottom: 0;
        opacity: 1;
    }
}

.contact-us-container{
    border-top: .75px solid #F0502B;

}
.contact-us-container > *{
    width: 50%;
    min-height: 600px;
}

.contact-us-info{
    position: relative;
    animation-name: sliderInfoAnimation;
    animation-duration: 1.25s;
    animation-timing-function: ease;
    padding-left: 12rem;
    justify-content: center;

}
.contact-us-info h1{
    position: relative;
    font-size: 32px;
    font-weight: 900;
    text-transform:  uppercase;
    letter-spacing: 3.5px;
    padding-bottom: 3rem;
}
.got-a-question{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3.5px;
    padding-bottom: .25rem;
    padding-left: .175rem;
}
.contact-us-info h1::after{
    content: '';
    position: absolute;
    top: 3.55rem;
    left: 0rem;
    height: 3px;
    width: 90px;
    margin: 0 .165rem;
    background-color: #ff6340;
}
.contact-us-info article, .contact-us-info p{
    max-width: 50ch;
    font-size: 16px;
    font-weight: 400;
    color: rgb(44, 44, 44);
    letter-spacing: .5px;
}
.follow-us, .contact-us-info article{
    margin-bottom: 2rem;
}
.follow-us{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1.5rem;
    letter-spacing: 3.5px;
}


.link-icons a{
    padding-right: 1rem;
    margin-bottom: .35rem;
}
.contact-us-info a{
    color: rgb(44, 44, 44);
    padding-bottom: .75rem;
    text-decoration: none;
}
.contact-us-info a svg{
    font-size: 14px;
    padding-top: .15rem;
    padding-right: 1rem;
}
.contact-us-info a p{
    font-weight: 400;
    color: rgb(49, 49, 49);
}

/* FORM */
.form-container{
    position: relative;
    animation-name: sliderInfoAnimation;
    animation-duration: 1.25s;
    animation-timing-function: ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form-container form{
    width: 400px;
    min-height: 450px;
    background-color: #202020;
    padding: 2.5rem;
}
.form-container form input, .form-container form textarea{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: rgb(238, 238, 238);
    min-height: 2.5rem;
    outline: none;
    border: none;
    background-color: #313131;
    padding: 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1.35px solid #ff6947;
    letter-spacing: .5px;
}
.form-container form input::placeholder{
    color: rgb(145, 145, 145);
    font-weight: 300;
}
.form-container form .form-group{
    justify-content: space-between;
}
.form-container form .form-group input{
    width: 47.5%;
}

.form-container nav{
    position: relative;
    color: rgb(238, 238, 238);
    font-size: 14px;
    font-weight: 400;
}
.form-container nav .menu-selected {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    background-color: #313131;
    padding: 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1.35px solid #ff6947;
}
/* to disable previous input styles for dropdown menu input*/
.form-container nav .menu-selected input{
    width: auto;
    cursor: pointer;
    min-height: 0;
    padding: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.form-container nav .menu {
    display: none;
    width: 100%;
    height: 160px;
    position: absolute;
    top: 2.5rem;
    color: #313131;
    background-color: rgb(238, 238, 238);
    overflow-y: auto;
    
}

.form-container nav .menu li{
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    font-weight: 500;
    padding: 0 1rem;
    
    
}

.form-container nav .menu::-webkit-scrollbar{
width: 3px;
}
.form-container nav .menu::-webkit-scrollbar-thumb{
background-color: #F0502B;
}

.form-container nav .menu li, .form-container nav .menu-selected input, .form-container nav .menu-selected{
    cursor: pointer;
}
.form-container nav .menu li:hover{
    color: rgb(238, 238, 238);
    background-color: #313131;

}
.form-container form textarea{
    min-height: 100px;
    max-height: 100px;
    max-width: 100%;
    min-width: 100%;
    padding: .5rem 1rem;
    resize: none;
}
.form-container form textarea::-webkit-scrollbar-track{
  background-color: #313131;
}
.form-container form textarea::-webkit-scrollbar{
  width: 3px;
}
.form-container form textarea::-webkit-scrollbar-thumb{
  background-color: #ff6947;
}
.form-buttons{
    padding-top: 1.25rem;
    justify-content: space-between;
    align-items: center;
}
.form-success-buttons{
    padding-top: 1.25rem;
    justify-content: space-between;
    align-items: center;  
    justify-content: center;

} 

 
.form-success-buttons #status{
    text-transform: uppercase;
    height: 35px;
    color:black;
    font-size: 12px;
    outline: none;
    border: none;
    padding: .5rem 1rem;
    background-color: transparent;
    letter-spacing: .5px;
    font-weight: 900;
    background-color: greenyellow;
    width: 90%;
    animation: status 2s ease forwards;
    animation-delay: 10s;
}

@keyframes status{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

.form-buttons .clear-btn, .form-buttons .send-btn{
    text-transform: uppercase;
    cursor: pointer;
    height: 35px;
    color:rgb(245, 245, 245);
    font-size: 12px;
    outline: none;
    border: none;
    padding: .5rem 1rem;
    background-color: transparent;
    letter-spacing: .5px;
}
.form-buttons .clear-btn{
    font-weight: 300;
}
.form-buttons .send-btn{
    font-weight: 400;
    background-color: #ff6947;
    transition: all .3s;
}
.form-buttons .send-btn:hover{
    background-color: #fd5731;
}