/*=========================
CONTACT
=========================*/

.contact{

    background:#010101;

}

.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    margin-top:50px;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-box-out{

    display:flex;
    align-items:center;
    gap:20px;
    color:inherit;
    text-decoration: none;
    cursor: pointer;
    padding:6px;

}

.info-box-out:hover{

    display:flex;
    align-items:center;
    gap:20px;
    color:inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #C59B67;
    border-radius: 4px;
    padding:6px;

}

.info-box{

    display:flex;
    align-items:center;
    gap:20px;
    color:inherit;
    text-decoration: none;
    cursor: pointer;

}

.info-box i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#010101;

    color:#C59B67;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.info-box h3{

    margin-bottom:6px;
    color: #C59B67;;

}

.info-box p{

    color:#cfcfcf;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

    width:100%;

    padding:16px;

    background:#111111;

    border:none;

    border-radius:10px;

    color:#F5F5F5;

    outline:none;

}

.contact-form input:hover,
.contact-form textarea:hover{
    border:1px solid #C59B67;
}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    width:max-content;
    outline: None;
    border: None;

}




.success-message {
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;
    border-radius: 8px;

    background: #010101;
    color: #7ee89a;

    font-size: 15px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

    animation: slideIn 0.3s ease;
}

.success-message i {
    font-size: 20px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}