/*==================================================
VEDIC SPIRITUALS
CONTACT PAGE
contact.css
==================================================*/

/*=========================================
ROOT
=========================================*/

:root{

--gold:#B28A45;
--gold-dark:#9A7538;
--light:#F8F6F2;
--white:#ffffff;
--text:#555;
--heading:#2E2E2E;
--border:#E7E1D6;

}

/*=========================================
RESET
=========================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Arial, Helvetica, sans-serif;
background:var(--light);
color:var(--text);
line-height:1.8;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

/*=========================================
LAYOUT
=========================================*/

.container{

width:min(1150px,92%);
margin:auto;

}

.narrow{

max-width:780px;
margin:auto;

}

section{

padding:100px 0;

}

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

.contact-hero{

position:relative;
height:85vh;

background:url("../images/contact.jpg")
center center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;
text-align:center;

}

.hero-overlay{

position:absolute;
inset:0;

background:rgba(0,0,0,.45);

}

.hero-content{

position:relative;
z-index:2;
color:white;

}

.hero-label{

letter-spacing:4px;
font-size:.85rem;
margin-bottom:18px;

}

.hero-content h1{

font-family:Georgia, serif;
font-size:4rem;
font-weight:500;

margin-bottom:25px;

}

.hero-content p{

max-width:700px;
margin:auto;

font-size:1.15rem;

}

/*=========================================
HEADINGS
=========================================*/

.section-heading{

text-align:center;
margin-bottom:60px;

}

.section-label{

letter-spacing:3px;
font-size:.85rem;
color:var(--gold);
text-transform:uppercase;

margin-bottom:15px;

}

.section-heading h2,
.before-contact h2,
.contact-closing h2{

font-family:Georgia, serif;
font-size:2.8rem;
font-weight:500;
color:var(--heading);

margin-bottom:20px;

}

.gold-line{

width:80px;
height:2px;

background:var(--gold);

margin:25px auto;

}

/*=========================================
HELP GRID
=========================================*/

.help-grid{

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

gap:35px;

}

.help-card{

background:white;

padding:40px;

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

transition:.35s;

}

.help-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.help-card h3{

font-family:Georgia, serif;
font-size:1.8rem;

margin-bottom:18px;

color:var(--heading);

}

/*=========================================
Contact FORM
=========================================*/
<!-- ==========================================
CONTACT FORM
========================================== -->

<section class="contact-form-section">

    <div class="container form-container">

        <div class="section-heading">

            <p class="section-label">
                SEND A MESSAGE
            </p>

            <h2>
                We Look Forward to Hearing From You
            </h2>

            <div class="gold-line"></div>

        </div>

        <div class="notice-box">

            <p><strong>Please Note</strong></p>

            <p>
                Vedic Spirituals offers meditation, education and spiritual guidance.
                Our programmes are intended for personal wellbeing and are not a
                substitute for professional medical or psychological care.
            </p>

        </div>

        <form
            class="contact-form"
            action="https://formspree.io/f/xqerjpgb"
            method="POST">

            <div class="form-row">

                <input
                    type="text"
                    name="name"
                    placeholder="Full Name"
                    required>

                <input
                    type="email"
                    name="email"
                    placeholder="Email Address"
                    required>

                <input
                    type="text"
                    name="subject"
                    placeholder="Subject"
                    required>

            </div>

            <textarea
                name="message"
                placeholder="Your Message"
                required></textarea>

            <input
                type="hidden"
                name="_next"
                value="https://vedicspirituals.com/thank-you.html">

            <button
                type="submit"
                class="btn">

                Send Message

            </button>

        </form>

    </div>

</section>

<!-- ==========================================
CONTACT DETAILS
========================================== -->
/*=========================================
CONTACT DETAILS
=========================================*/

.contact-details{

background:white;

}

.details-grid{

display:grid;

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

gap:40px;

text-align:center;

}

.details-grid h3{

font-family:Georgia, serif;

font-size:1.8rem;

margin-bottom:15px;

color:var(--heading);

}

/*=========================================
EXPLORE FIRST
=========================================*/

.before-contact{

text-align:center;

}

.before-contact p{

max-width:700px;

margin:auto;

margin-bottom:40px;

}

.quick-links{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.outline-btn{

padding:15px 35px;

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

color:var(--gold);

border-radius:40px;

transition:.3s;

}

.outline-btn:hover{

background:var(--gold);

color:white;

}

/*=========================================
FINAL MESSAGE
=========================================*/

.contact-closing{

background:white;

text-align:center;

}

.contact-closing p{

max-width:700px;

margin:auto;

}

/*=========================================
FOOTER
=========================================*/

.site-footer{

padding:60px 0;

background:#232323;

color:#ddd;

text-align:center;

}

.footer-logo{

width:80px;

margin:auto;

margin-bottom:20px;

}

.site-footer p{

margin-bottom:8px;

font-size:.95rem;

}

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

@media(max-width:900px){

.hero-content h1{

font-size:3rem;

}

.help-grid,
.details-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.hero-content h1{

font-size:2.4rem;

}

.section-heading h2,
.before-contact h2,
.contact-closing h2{

font-size:2rem;

}

.btn{

width:100%;

text-align:center;

}

.quick-links{

flex-direction:column;

}

.outline-btn{

width:100%;

}
.contact-form textarea{

    width:100%;
    min-height:220px;   /* Good default height */
    padding:18px 20px;
    border:1px solid var(--border);
    font-size:1rem;
    resize:vertical;    /* User can drag only up/down */
    outline:none;

}