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

html{
scroll-behavior:smooth;
}

.skip-link{
position:absolute;
top:-100px;
left:20px;
z-index:10;
padding:10px 16px;
background:#FFF8F0;
color:#5A1E28;
font-family:"Lato",sans-serif;
font-weight:700;
text-decoration:none;
}

.skip-link:focus{
top:20px;
}

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

/* =========================
LAYOUT
========================= */
.section{
padding:90px 20px;
content-visibility:auto;
contain-intrinsic-size:0 600px;
}

.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
========================= */
.hero-h1{
font-family:"Great Vibes",cursive;
font-size: 3rem;
letter-spacing:2px;
color:ivory;
font-weight:400;
}

h1{
font-size:2.8rem;
margin-bottom:14px;
}

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: rgba(0, 0, 0, 0.466);
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:1.0 ;
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;
}

/* =========================
BUTTONS
========================= */

.hero-actions{
margin-top:30px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
overflow:hidden;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 42px;
min-width:280px;
height:58px;

background:rgba(255,250,244,.95);
border:2px solid rgba(255,255,255,.7);
border-radius:999px;

font-family:"Playfair Display",serif;
font-size:1rem;
font-weight:600;
letter-spacing:.5px;

color:#79362E;
text-decoration:none;

box-shadow:
0 8px 24px rgba(0,0,0,.18),
0 2px 8px rgba(255,255,255,.15) inset;

transition:all .35s ease;
}

.btn::after{
content:"→";
margin-left:12px;
font-size:1.1rem;
transition:transform .3s ease;
}

.btn:hover{
background:#79362E;
color:#FFF8F0;

border-color:#D9C29A;

transform:translateY(-4px);

box-shadow:
0 18px 35px rgba(0,0,0,.30);
}

.btn:hover::after{
transform:translateX(6px);
}

.btn:active{
transform:translateY(-1px);
}

/* =========================
SOCIAL MEDIA
========================= */

.hero-social{
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
animation:heroFade 1.8s ease;
}

.hero-social p{
font-size:0.95rem;
font-family:"Playfair Display",serif;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(255,248,240,.92);
font-weight:500;
position:relative;
padding-bottom:12px;
}

.hero-social p::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:60px;
height:1px;
background:rgba(255,248,240,.45);
}

.socmed-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}

.socmed-btn{
width:52px;
height:52px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;

color:rgba(255,248,240,.95);
font-size:22px;

background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);

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

transition:.35s ease;
}

.socmed-btn:hover{
background:#C9A96A;
border-color:#C9A96A;
color:white;
transform:translateY(-5px) scale(1.06);
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

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

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

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

.offerings-title{
color:#fffffb;
font-family:"Playfair Display",serif ; 
letter-spacing:1px;
}

.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 h2{
color:#3f0710;
}


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

/* =========================
CONTACT
========================= */
.contact{
background:#e7e2dc;
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:3rem;}
h2{font-size:1.8rem;}

.section{padding:70px 16px;}

.hero{min-height:100svh;}

.hero-content{min-height:100svh;}

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

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

.socmed-buttons{
gap:10px;
max-width:280px;
flex-wrap:wrap;
}

.socmed-btn{
width:44px;
height:44px;
font-size:18px;
}

}

@media(max-width:380px){
.hero-content{padding:16px 12px;}
.hero-content p{font-size:.95rem;}
.btn{min-width:0;}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}

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

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