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

/* =========================
BODY
========================= */
body{
font-family:"Playfair Display",serif;
background:#F1ECE4;
color:#363028;
line-height:1.7;
-webkit-font-smoothing:antialiased;
}

/* =========================
LAYOUT
========================= */
.section{
padding:90px 20px;
}

.container{
max-width:1200px;
margin:auto;
}

.narrow{
max-width:720px;
margin:auto;
}

.center{
text-align:center;
}

/* =========================
DIVIDERS
========================= */
.divider{
width:70px;
height:2px;
background:#FFC107;
margin:28px auto 45px;
}

.divider-light{
background:ivory;
}

/* =========================
TYPOGRAPHY
========================= */
h1{
font-size:3rem;
letter-spacing:2px;
color:ivory;
font-weight:500;
}

h2{
font-size:2.3rem;
margin-bottom:10px;
}

h3{
font-size:1.2rem;
margin-bottom:12px;
letter-spacing:.5px;
}

p{
font-weight:500;
}

/* =========================
HERO
========================= */
.hero{
position:relative;
min-height:80vh;
overflow:hidden;
}

.hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
rgba(20,30,25,.55),
rgba(246,241,231,.45)
);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
min-height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#FFF8F0;
padding:20px;
animation:heroFade 1.4s ease;
}

.hero-content h1{
text-shadow:0 6px 30px rgba(0,0,0,.45);
}

.hero-content p{
max-width:520px;
margin:6px auto;
font-size:1.05rem;
line-height:1.8;
opacity:.95;
text-shadow:0 3px 16px rgba(0,0,0,.45);
}

/* =========================
BUTTONS
========================= */
.hero-actions{
margin-top:20px;
display:flex;
gap:18px;
justify-content:center;
align-items:center;
}

.btn{
padding:12px 28px;
min-width:150px;
border-radius:30px;
background:#7B2E2E;
color:#fff;
text-decoration:none;
font-size:.95rem;
font-weight:600;
letter-spacing:.5px;
transition:all .3s ease;
text-align:center;
}

.btn:hover{
background:#5C1F1F;
transform:translateY(-2px);
}

/* =========================
SOCIAL MEDIA
========================= */
.socmed-buttons{
display:flex;
gap:14px;
justify-content:center;
}

.socmed-btn{
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#7B2E2E;
font-size:17px;
background:#fff;
border:1px solid #E8E1D7;
transition:.3s;
text-decoration:none;
}

.socmed-btn:hover{
background:#F6F1E7;
color:#5C1F1F;
transform:translateY(-3px);
}

/* =========================
ABOUT
========================= */
.about{
background:#eddbc2;
}

blockquote{
font-style:italic;
color:#800000;
margin-top:20px;
}

/* =========================
OFFERINGS
========================= */
.offerings{
background:#74342b;
color:#F1ECE4;
}

.offerings-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:60px;
}

.offer-card{
background:#fef4e7;
border-radius:18px;
padding:35px;
color:#544E47;
text-align:center;
box-shadow:0 10px 28px rgba(0,0,0,.06);
transition:.3s;
}

.offer-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.offer-card img,
.offer-card video{
width:100%;
aspect-ratio:3/4;
object-fit:cover;
border-radius:14px;
margin-bottom:20px;
display:block;
}

.offer-card h3{
color:#5A1E28;
}

/* =========================
CONTACT
========================= */
.contact{
background:#eddbc2;
padding:80px 20px;
}

.contact-wrapper{
max-width:720px;
margin:auto;
text-align:center;
}

.contact-title{
font-size:2.1rem;
margin-bottom:10px;
}

.contact-details{
margin:20px 0 30px;
line-height:1.8;
color:#5c4a45;
}

.contact-info{
display:flex;
flex-direction:column;
gap:12px;
font-size:1rem;
}

.contact-info a{
color:#3a2e2a;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.contact-info a:hover{
color:#5A1E28;
transform:translateY(-2px);
}

/* =========================
FOOTER
========================= */
footer{
background:#8fa4d1;
color:black;
text-align:center;
padding:25px;
font-size:.85rem;
}

/* =========================
RESPONSIVE
========================= */
@media(max-width:768px){

h1{font-size:2.2rem;}
h2{font-size:1.8rem;}

.section{padding:70px 16px;}

.hero{min-height:70vh;}

.hero-content{min-height:70vh;}

.hero-actions{
flex-direction:column;
gap:14px;
}

.btn{
width:100%;
max-width:260px;
}

}

/* =========================
ANIMATION
========================= */
@keyframes heroFade{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}

::selection{
background:#7B2E2E;
color:white;
}