/*==================================================
VEDIC SPIRITUALS
ABOUT PAGE
about.css
==================================================*/

:root{

--primary:#8C6A2F;
--gold:#C8A44D;
--dark:#2D2D2D;
--light:#F8F6F2;
--white:#ffffff;
--text:#555;
--border:#E8E2D7;

--heading:'Cormorant Garamond',serif;
--body:'Inter',sans-serif;

}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:var(--body);
background:var(--light);
color:var(--text);
line-height:1.9;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

.container{

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

}

.narrow{

max-width:820px;
margin:auto;

}

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

.about-hero{

position:relative;
height:90vh;

background:url("../images/himalayas/about-hero.jpg")
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:#fff;

}

.hero-label{

letter-spacing:4px;
font-size:.85rem;
text-transform:uppercase;
margin-bottom:20px;
opacity:.9;

}

.hero-content h1{

font-family:var(--heading);
font-size:4.6rem;
font-weight:500;
line-height:1.1;

margin-bottom:30px;

}

.hero-content p{

font-size:1.2rem;
max-width:650px;
margin:auto;

}

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

.btn{

display:inline-block;
margin-top:45px;

padding:16px 42px;

background:var(--gold);
color:#fff;

border-radius:40px;

transition:.35s;

}

.btn:hover{

background:#A57D31;

}

/*=========================================
GENERAL SECTIONS
=========================================*/

section{

padding:110px 0;

}

.section-label{

letter-spacing:3px;
font-size:.85rem;

color:var(--primary);

text-transform:uppercase;

margin-bottom:18px;

}

.section-heading{

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

}

.section-heading h2,
.about-section h2,
.ashram-story h2,
.future-section h2,
.about-cta h2{

font-family:var(--heading);

font-size:3rem;
font-weight:500;

color:var(--dark);

margin-bottom:25px;

}

/*=========================================
GOLD LINE
=========================================*/

.gold-line{

width:90px;
height:2px;

background:var(--gold);

margin:25px auto 35px;

}

.about-section .gold-line,
.ashram-story .gold-line,
.future-section .gold-line,
.about-cta .gold-line{

margin-left:0;

}

/*=========================================
TEXT
=========================================*/

p{

font-size:1.08rem;
margin-bottom:25px;

}

/*=========================================
PHILOSOPHY
=========================================*/

.philosophy-section{

background:#fff;

}

.philosophy-grid{

display:grid;

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

gap:35px;

}

.philosophy-card{

padding:40px;

background:var(--light);

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

transition:.35s;

}

.philosophy-card:hover{

transform:translateY(-8px);

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

}

.philosophy-card h3{

font-family:var(--heading);

font-size:2rem;

margin-bottom:20px;

color:var(--dark);

}

/*=========================================
DISCOVER
=========================================*/

.discover-grid{

display:grid;

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

gap:30px;

}

.discover-card{

padding:35px;

text-align:center;

background:#fff;

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

transition:.35s;

}

.discover-card:hover{

transform:translateY(-8px);

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

}

.discover-card h3{

font-family:var(--heading);

font-size:1.9rem;

margin-bottom:15px;

color:var(--dark);

}

/*=========================================
APPROACH
=========================================*/

.approach-section{

background:#fff;

}

.approach-grid{

display:grid;

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

gap:30px;

}

.approach-card{

padding:40px;

border-top:3px solid var(--gold);

background:var(--light);

}

.approach-card h3{

font-family:var(--heading);

font-size:2rem;

margin-bottom:18px;

}

/*=========================================
FOUNDER
=========================================*/

.founder-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.founder-image img{

border-radius:8px;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.founder-content h2{

font-family:var(--heading);

font-size:3rem;

margin-bottom:15px;

color:var(--dark);

}

/*=========================================
FINAL CTA
=========================================*/

.about-cta{

background:#fff;

text-align:center;

}

.about-cta .gold-line{

margin:auto;

}

.about-cta p{

max-width:700px;

margin:auto;

margin-bottom:45px;

}

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

.site-footer{

padding:60px 0;

background:#222;

color:#ccc;

text-align:center;

}

.footer-logo{

width:80px;

margin:auto;
margin-bottom:20px;

}

.site-footer p{

margin-bottom:10px;

font-size:.95rem;

}

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

@media(max-width:992px){

.hero-content h1{

font-size:3.5rem;

}

.philosophy-grid,
.discover-grid,
.approach-grid,
.founder-grid{

grid-template-columns:1fr;

}

.founder-image{

max-width:420px;

margin:auto;

}

}

@media(max-width:768px){

section{

padding:80px 0;

}

.hero-content h1{

font-size:2.8rem;

}

.section-heading h2,
.about-section h2,
.ashram-story h2,
.future-section h2,
.about-cta h2,
.founder-content h2{

font-size:2.3rem;

}

}