/* ==========================================================
   Contact Page
========================================================== */

.contact-page{

    padding:60px 0 120px;

}

.contact-layout{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:30px;

    align-items:start;

}

@media(max-width:768px){

    .contact-layout{

        grid-template-columns:1fr;

    }

}

.contact-info{

    background:#111C2E;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:26px;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-info-row{

    display:flex;

    align-items:center;

    gap:14px;

    color:#CBD5E1;

    font-size:14px;

}

.contact-info-row i{

    color:#06B6D4;

    font-size:18px;

    width:20px;

}

.contact-info-row a{

    color:inherit;

    text-decoration:none;

    transition:.2s;

}

.contact-info-row a:hover{

    color:#06B6D4;

}

.contact-form{

    background:#111C2E;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:30px;

}

.contact-form label{

    display:block;

    font-size:13px;

    color:#94A3B8;

    margin-bottom:6px;

    margin-top:16px;

}

.contact-form label:first-of-type{

    margin-top:0;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:#0B1220;

    border:1px solid rgba(255,255,255,.15);

    border-radius:10px;

    color:#fff;

    padding:12px 14px;

    font-size:14px;

    resize:vertical;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:#06B6D4;

}

.contact-submit-button{

    margin-top:24px;

    background:#0891B2;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:14px 30px;

    font-weight:700;

    font-size:15px;

    cursor:pointer;

    transition:.2s;

}

.contact-submit-button:hover{

    background:#06B6D4;

}