@import url("pages.css");

header.contact-header{
    min-height : 80px;
    height : 80px;
    background-color: var(--text-clr);
}

.contact-page nav{
    background : white;
    height : 80px;
}

.contact-page nav .container{
    height : 100%;
}

.contact-page a.nav-link{
    color  : var(--b-theme-clr)
}

.contact-page a.nav-link::after{
    background-color : var(--b-theme-clr)
}

.contact-page .hamburger span{
    background-color : black;
}

.contact-wrapper{
    display : flex;
    flex-wrap : wrap;
    /* height : calc(100vh - 78px); */
}


.contact-banner-container,
.contact-form-container{
    flex-basis : 50%;
    /* min-width : 500px; */
}


.contact-banner-container{
    /* background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); */
    background-image: linear-gradient(45deg, #4481eb 0%, #04befe 100%);
    /* background-color : rgba(0,0,0,.8); */
    /* background-blend-mode : darken; */
    background-size : cover;
    background-position : center;
    display : flex;
    align-items: center;
}

.contact-banner-head{
    /* margin: 0; */
    font-size : clamp(2rem, 5.5vw, 3rem);
    color : rgba(255,255,255,.8);
    width : 80%;
    margin: auto;
    text-align : center;
}

.typewriter-cursor{
    color : rgb(4, 115, 241);
    animation : cursor 1s infinite steps(1)
}

@keyframes cursor{
    0%, 100%{
        opacity : 0;
    }

    50%{
        opacity : 1;
    }
}



.contact-form-container{
    padding : 20px 0;
    background : #ebefef;
}

.contact-form-head{
    font-size : clamp(2.5rem, 3.5vw, 1.7rem);
    margin : 0px 0 12px 0;
    text-align: center;
}

.contact-message-text{
    padding: 12px 15px;
    width: 450px;
    margin: 10px auto;
    background-color: rgb(119, 192, 8);
    color: rgba(255, 255, 255, .8);
    font-size: 1.2rem;
    border-radius: 30px;
    text-align: center;

}

.hiding{
    display : block;
    animation : fadeUp 1s ease 3s forwards;
}

@keyframes fadeUp {
    0%{
        opacity : 1;
        transform: translateY(0);
    }

    50%{
        opacity: .5;
    }

    100%{
        opacity : 0;
        transform: translateY(-20px);
    }
}

.contact-form{
    width : 90%; 
    margin : auto;
    display : flex;
    flex-direction : column;
    gap : 1rem
    /* align-items : center; */
}

.contact-form p{
    margin : 0;
}

.contact-form label{
    display : inline-block;
    font-size : .9rem;
    color : rgba(0,0,0,.8);
    margin-bottom : 5px;
    letter-spacing: 1px;
}

.contact-form input,
.contact-form textarea{
    display : block;
    padding : 10px 20px;
    border : 1px solid rgba(0,0,0,.2);
    border-radius : 5px;
    font-size : 1.2rem;
    background-color: rgba(255,255,255,.4);
    width : 100%;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline : 1px solid var(--b-theme-clr);
    border-color : transparent;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible{
    outline : 1px solid var(--b-theme-clr);
    border-color : transparent;

}

.contact-form textarea{
    height : 200px;
}

.submit-btn{
    padding : 15px;
    font-size : 1rem;
    background-image: linear-gradient(45deg, #4481eb 0%, #04befe 100%);
    border-radius : 10px;
    color: rgba(255,255,255,.8);
    letter-spacing: 1px;
}



@media(max-width : 1000px){
    .contact-banner-container,
    .contact-form-container{
        flex-basis : 100%;
    }

    .contact-banner-container{
        height : 350px;
    }

}

.errorlist li{
    color : #db1b1b;
}