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

.page-hero{

    background:var(--surface);

    padding:120px 0 80px;

    text-align:center;

}

.page-hero h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.3rem,5vw,3.5rem);

    color:var(--secondary);

    margin-bottom:20px;

}

.page-hero p{

    max-width:760px;

    margin:0 auto;

    color:var(--text);

    line-height:1.8;

    font-size:1.05rem;

}

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

.contact-section{

    padding:100px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:start;

}

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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-card{

    background:var(--surface);

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

    border-radius:18px;

    padding:30px;

    box-shadow:0 8px 30px rgba(0,0,0,.05);

    transition:.3s ease;

}

.info-card:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 40px rgba(0,0,0,.08);

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:rgba(79,121,66,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    margin-bottom:20px;

}

.info-card h3{

    font-family:'Playfair Display',serif;

    color:var(--secondary);

    margin-bottom:12px;

}

.info-card p{

    color:var(--text);

    line-height:1.8;

    margin:0;

}

/* ==========================================
   CONTACT FORM CARD
========================================== */

.contact-card{

    background:var(--surface);

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

    border-radius:20px;

    padding:45px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.contact-card h2{

    font-family:'Playfair Display',serif;

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:18px;

}

.contact-card>p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:20px;

}

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

.contact-form{

    margin-top:35px;

    display:grid;

    gap:25px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.contact-form label{

    margin-bottom:10px;

    font-weight:600;

    color:var(--secondary);

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px 18px;

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

    border-radius:12px;

    background:#fff;

    font-size:1rem;

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

    transition:.3s ease;

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(79,121,66,.12);

}

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

.contact-form button{

    justify-self:flex-start;

    background:var(--primary);

    color:#fff;

    border:none;

    padding:16px 34px;

    border-radius:12px;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}

.contact-form button:hover{

    transform:translateY(-2px);

    opacity:.95;

    box-shadow:0 15px 30px rgba(79,121,66,.25);

}

/* ==========================================
   RESPONSE NOTE
========================================== */

.contact-note{

    margin-top:40px;

    padding:25px 30px;

    border-left:5px solid var(--primary);

    background:#f7faf6;

    border-radius:12px;

}

.contact-note strong{

    display:block;

    margin-bottom:10px;

    color:var(--secondary);

    font-size:1.05rem;

}

.contact-note p{

    margin:0;

    line-height:1.8;

}

/* ==========================================
   FAQ
========================================== */

.contact-faq{

    margin-top:80px;

}

.contact-faq h2{

    text-align:center;

    font-family:'Playfair Display',serif;

    color:var(--secondary);

    margin-bottom:45px;

}

.faq-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.faq-card{

    background:var(--surface);

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

    border-radius:18px;

    padding:30px;

}

.faq-card h3{

    color:var(--secondary);

    margin-bottom:15px;

}

.faq-card p{

    line-height:1.8;

    margin:0;

}

/* ==========================================
   SUCCESS MESSAGE
========================================== */

.success-message{

    background:#eef8ef;

    color:#2f6f39;

    border:1px solid #b9dfbf;

    padding:18px 22px;

    border-radius:12px;

    margin-top:25px;

}

.error-message{

    background:#fff2f2;

    color:#b42318;

    border:1px solid #f2b8b5;

    padding:18px 22px;

    border-radius:12px;

    margin-top:25px;

}

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

@media (max-width:1024px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}

@media (max-width:768px){

    .page-hero{

        padding:90px 20px 60px;

    }

    .contact-section{

        padding:70px 20px;

    }

    .contact-card{

        padding:30px;

    }

    .faq-grid{

        grid-template-columns:1fr;

    }


}

@media (max-width:480px){

    .page-hero h1{

        font-size:2.2rem;

    }

    .contact-card{

        padding:25px;

    }

    .info-card{

        padding:25px;

    }

}

.info-icon svg{

    width:30px;

    height:30px;

    stroke:var(--primary);

    stroke-width:2;

}

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

.submit-btn.loading .button-text{

    opacity:0;

}

.submit-btn.loading .spinner{

    display:block;

}

.submit-btn:disabled{

    cursor:not-allowed;

    opacity:.85;

}
.spinner{

    display:none;

    position:absolute;

    width:20px;

    height:20px;

    border:3px solid rgba(255,255,255,.3);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}
.info-card,

.contact-card,

.faq-card{

    transition:

    transform .3s ease,

    box-shadow .3s ease;

}

.info-card:hover,

.faq-card:hover{

    transform:translateY(-8px);

    box-shadow:0 0 0 4px rgba(156,128,97,.15);

}

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

.submit-btn.loading .button-text{
    opacity:0;
}

.submit-btn.loading .spinner{
    display:block;
}

.submit-btn:disabled{
    cursor:not-allowed;
    opacity:.8;
}
/* ==========================================
   THANK YOU PAGE
========================================== */

.thank-you-card{

    max-width:760px;

    margin:0 auto;

    padding:60px 50px;

    background:var(--surface);

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

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.thank-you-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(156,128,97,.12);

}

.thank-you-icon svg{

    width:48px;

    height:48px;

    stroke:var(--primary);

    stroke-width:2;

}

.thank-you-card h1{

    margin:20px 0;

    color:var(--secondary);

    font-family:'Playfair Display',serif;

    font-size:clamp(2.2rem,5vw,3.2rem);

}

.thank-you-card p{

    max-width:600px;

    margin:0 auto 20px;

    line-height:1.8;

}

.thank-you-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

@media (max-width:768px){

    .thank-you-card{

        padding:40px 30px;

    }

    .thank-you-buttons{

        flex-direction:column;

        align-items:center;

    }

    .thank-you-buttons .btn{

        width:100%;

        max-width:280px;

    }

}