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

.contact-honeypot{
    position:absolute;
    left:-9999px;
}


.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.contact-method{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:32px;

    background:#1b1b1b;

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

    border-radius:16px;

    transition:.3s ease;

}

.contact-method:hover{

    border-color:rgba(212,32,37,.25);

}

.cm-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(212,32,37,.10);

    color:#D42025;

    font-size:24px;

}

.contact-method h4{

    color:#fff;

    font-size:18px;

    font-weight:600;

    margin:0 0 6px;

}

.contact-method p{

    color:#888;

    line-height:1.6;

    margin:0;

}

.contact-method a{

    color:#888;

    text-decoration:none;

    transition:.3s;

}

.contact-method a:hover{

    color:#D42025;

}

/* ===========================================
   FORM
=========================================== */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form .form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-form .form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.contact-form label{

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.5px;

    color:rgba(255,255,255,.60);

}

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

    width:100%;

    background:#1e1e1e;

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

    border-radius:10px;

    padding:14px 18px;

    color:#fff;

    font-size:.95rem;

    outline:none;

    transition:.3s;

}

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

    color:#777;

}

.contact-form textarea{

    min-height:140px;

    resize:vertical;

}

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

    border-color:#D42025;

    box-shadow:0 0 0 3px rgba(212,32,37,.15);

}

/* ===========================================
   GDPR
=========================================== */

.contact-form .gdpr{

    margin-top:5px;

}

.contact-form .gdpr label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    line-height:1.6;

    font-size:.88rem;

}

.contact-form .gdpr input{

    width:18px;

    height:18px;

    margin-top:2px;

}

.contact-form .gdpr a{

    color:#D42025;

    text-decoration:none;

}

.contact-form .gdpr a:hover{

    text-decoration:underline;

}

/* ===========================================
   BUTTON
=========================================== */

/*
.btn-submit{

    margin-top:10px;

    padding:16px 40px;

    background:#D42025;

    color:#fff;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

}
.btn-submit:hover{

    background:#a8181c;
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(212,32,37,.30);
}
*/
.contact-form button.btn-submit,
.contact-form button[type="submit"]{

    margin-top:10px;

    padding:16px 40px;

    background:#D42025;

    color:#ffffff;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.contact-form button.btn-submit:hover,
.contact-form button[type="submit"]:hover{

/*
    background:#a8181c;
    color:#ffffff;
*/

    background:#a8181c;
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(212,32,37,.30);

}


/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:1024px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media(max-width:767px){

    .contact-form .form-row{

        grid-template-columns:1fr;

    }

    .btn-submit{

        width:100%;

    }

}

/* ===========================================
   SUCCESS TOAST
=========================================== */

.contact-toast{

    position:fixed;

    top:40px;

    left:50%;

    transform:translate(-50%,-30px);

    width:520px;

    max-width:90%;

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px 28px;

    background:#132d1c;

    border:1px solid #2ecc71;

    border-radius:16px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    opacity:0;

    transition:.45s;

    z-index:999999;

}

.contact-toast.show{

    opacity:1;

    transform:translate(-50%,0);

}

.toast-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#2ecc71;

    color:#fff;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.toast-content h3{

    margin:0 0 6px;

    color:#fff;

    font-size:22px;

    font-weight:600;

}

.toast-content p{

    margin:0;

    color:#d7f5e3;

    line-height:1.6;

    font-size:15px;

}

@media(max-width:767px){

    .contact-toast{

        width:92%;

        padding:18px;

        gap:16px;

    }

    .toast-icon{

        width:48px;

        height:48px;

        font-size:24px;

    }

    .toast-content h3{

        font-size:18px;

    }

}