/* ======================================================
   THE PRESTIGE
   CONTACT SECTION
====================================================== */

.contact{

    padding: 140px 8%;

    background: #111111;

}


.contact-container{

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 120px;

    align-items: start;

}


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

.contact-info{

    padding-top: 10px;

}


.contact-info .section-subtitle{

    display: block;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: .8rem;

    font-weight: 600;

    margin-bottom: 20px;

}


.contact-info h2{

    font-family: 'Cormorant Garamond', serif;

    font-size: 4rem;

    font-weight: 500;

    line-height: 1.1;

    color: var(--white);

    margin-bottom: 30px;

}


.contact-info h2 span{

    display: block;

    color: var(--gold);

}


.contact-info > p{

    max-width: 560px;

    color: #cfcfcf;

    font-size: 1rem;

    line-height: 1.9;

    margin-bottom: 50px;

}


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

.contact-details{

    display: flex;

    flex-direction: column;

    gap: 28px;

}


.contact-item{

    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    transition: .3s ease;

}


.contact-item > i{

    width: 50px;

    height: 50px;

    border: 1px solid rgba(239,184,16,.5);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

    font-size: 16px;

    transition: .3s ease;

}


.contact-item div{

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.contact-item small{

    color: var(--gold);

    font-size: .7rem;

    letter-spacing: 3px;

    font-weight: 600;

}


.contact-item strong{

    color: var(--white);

    font-size: .95rem;

    font-weight: 400;

}


.contact-item:hover > i{

    background: var(--gold);

    color: #111;

    transform: translateY(-3px);

}


.contact-item:hover strong{

    color: var(--gold);

}


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

.contact-form{

    border: 1px solid rgba(239,184,16,.25);

    padding: 45px;

    background: #151515;

    box-shadow:
        0 0 8px rgba(239,184,16,.10),
        0 0 25px rgba(239,184,16,.08),
        0 20px 60px rgba(0,0,0,.45);

}


.form-group{

    display: flex;

    flex-direction: column;

    margin-bottom: 25px;

}


.form-group label{

    color: var(--white);

    font-size: .8rem;

    letter-spacing: 1px;

    margin-bottom: 10px;

}


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

    width: 100%;

    background: transparent;

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

    color: var(--white);

    padding: 15px 16px;

    font-family: 'Poppins', sans-serif;

    font-size: .9rem;

    outline: none;

    transition: .3s ease;

}


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

    color: #777;

}


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

    border-color: var(--gold);

    box-shadow:
        0 0 0 1px rgba(239,184,16,.15),
        0 0 12px rgba(239,184,16,.12);

}


.form-group select{

    cursor: pointer;

}


.form-group select option{

    background: #151515;

    color: white;

}


.form-group textarea{

    resize: vertical;

    min-height: 130px;

}


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

.form-row{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


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

.contact-btn{

    width: 100%;

    min-height: 56px;

    border: 1px solid var(--gold);

    background: var(--gold);

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-family: 'Poppins', sans-serif;

    font-size: .8rem;

    font-weight: 600;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .35s ease;

}


.contact-btn i{

    transition: .35s ease;

}


.contact-btn:hover{

    background: transparent;

    color: var(--gold);

    transform: translateY(-3px);

}


.contact-btn:hover i{

    transform: translateX(6px);

}

.form-message {
    display: none;
    margin-top: 18px;
    padding: 14px 18px;

    border-radius: 8px;

    font-size: 14px;
    line-height: 1.5;

    transition: all 0.3s ease;
}

.form-message.success {
    display: block;

    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.35);

    color: #2e7d32;
}

.form-message.error {
    display: block;

    background: rgba(198, 40, 40, 0.12);
    border: 1px solid rgba(198, 40, 40, 0.35);

    color: #c62828;
}

.contact-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}