@charset "utf-8";

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

.contact-hero{

position:relative;

min-height:84vh;

display:flex;

align-items:center;
justify-content:center;

text-align:center;

padding:130px 20px 90px;

background:
linear-gradient(
rgba(20,14,10,0.45),
rgba(20,14,10,0.30)
),
url("../images/contact-hero.webp")
center center/cover no-repeat;

overflow:hidden;
}

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,0.40),
rgba(0,0,0,0.08)
);
}

.contact-hero-content{

position:relative;

z-index:2;

max-width:820px;

margin:auto;

color:white;
}

.hero-subtitle{

font-size:13px;

letter-spacing:5px;

text-transform:uppercase;

color:#E5C8A8;

margin-bottom:24px;
}

.contact-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:72px;

line-height:1.05;

margin-bottom:28px;
}

.hero-description{

font-size:18px;

line-height:1.9;

color:rgba(255,255,255,0.9);
}

/* =========================================================
SIMPLE CONTACT
========================================================= */

.contact-simple{

padding:90px 0;

background:var(--bg-soft);
}

.contact-simple .container{

max-width:1200px;

margin:auto;

padding:0 30px;
}

.contact-simple h1{

font-family:'Cormorant Garamond',serif;

font-size:64px;

line-height:1.05;

margin-bottom:24px;

color:var(--text);
}

.contact-description{

max-width:900px;

font-size:18px;

line-height:1.9;

color:var(--text-light);

margin-bottom:50px;
}


/* GRID */

.contact-grid{

display:grid;

grid-template-columns:0.9fr 1.1fr;

gap:80px;

align-items:start;
}


/* INFO */

.contact-info{

display:flex;

flex-direction:column;

gap:24px;
}

.info-item{

background:linear-gradient(
135deg,
#FFFFFF,
#FCF8F3
);

padding:34px;

border-radius:30px;

border:1px solid #EFE7DD;

transition:.35s ease;

box-shadow:
0 12px 34px rgba(0,0,0,.04);
}

.info-item:hover{

transform:translateY(-4px);

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

.info-item h3{

font-size:28px;

margin-bottom:12px;

font-family:'Cormorant Garamond',serif;

color:var(--text);
}

.info-item p,
.info-item a{

font-size:16px;

line-height:1.9;

color:var(--text-light);

text-decoration:none;
}


/* FORM */

.contact-form{

background:white;

padding:42px;

border-radius:34px;

border:1px solid #EFE7DD;
}

.contact-form input,
.contact-form textarea{

width:100%;

padding:20px 20px;

border:none;
margin-bottom: 14px;
border-radius:18px;

background:#FDFBF8;
border:1px solid #EFE7DD;
font-size:15px;

font-family:inherit;

color:var(--text);

box-shadow:
0 8px 20px rgba(0,0,0,0.03);
}

.contact-form textarea{

resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

background:#faf7f3;
}


/* BUTTON */

.contact-form .btn-primary{

width:100%;

padding:20px 40px;

border:none;

border-radius:18px;

background:#C8A27A;

color:white;

font-size:15px;

letter-spacing:1px;

cursor:pointer;

transition:.3s ease;
}

.contact-form .btn-primary:hover{

transform:translateY(-2px);

background:#B58C61;

box-shadow:
0 18px 34px rgba(0,0,0,.12);
}


.contact-location-mini .btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:999px;

background:#C8A27A;

color:white;

font-size:15px;

letter-spacing:1px;

text-decoration:none;

transition:.3s ease;

box-shadow:
0 12px 28px rgba(0,0,0,.08);
}

.contact-location-mini .btn-secondary:hover{

background:#B58C61;

transform:translateY(-2px);

box-shadow:
0 18px 34px rgba(0,0,0,.12);
}

/* RESPONSIVE */

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

gap:60px;
}

.contact-simple h1{

font-size:52px;
}
}

@media(max-width:768px){

.contact-simple{

padding:110px 0;
}

.contact-simple .container{

padding:0 24px;
}

.contact-simple h1{

font-size:42px;
}

.contact-description{

font-size:16px;

margin-bottom:50px;
}
}

/* =========================================================
WHY STAY
========================================================= */

.why-stay-section{

background:var(--bg-soft);
}

.why-stay-grid{

display:grid;

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

gap:26px;
}

.why-card{

background:white;

padding:40px;

border-radius:28px;

box-shadow:
0 15px 40px rgba(0,0,0,0.03);
}

.why-card h3{

font-size:28px;

margin-bottom:16px;

font-family:'Cormorant Garamond',serif;
}

.why-card p{

line-height:1.9;

color:var(--text-light);
}


/* =========================================================
MAP
========================================================= */

.map-section iframe{

width:100%;

height:420px;

border:none;

filter:grayscale(10%);
}

.info-label{

display:block;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#B79063;

margin-bottom:12px;
}

.info-item a{

display:block;

font-size:22px;

font-family:'Cormorant Garamond',serif;

color:var(--text);

margin-bottom:10px;
}

.info-item p{

font-size:15px;

line-height:1.8;

color:var(--text-light);
}

/* =========================================================
BOOKING BANNER
========================================================= */

.booking-banner{
    position:relative;

    padding:170px 20px;

    text-align:center;

    background:
    linear-gradient(
    rgba(16,12,8,0.68),
    rgba(16,12,8,0.45)
    ),
    url("../images/facilities-booking.webp")
    center center/cover no-repeat;

    overflow:hidden;
}

.booking-banner::after{
    content:"";

    position:absolute;
    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(255,220,180,0.08),
    transparent 60%
    );

    pointer-events:none;
}

.booking-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.05)
    );
}

.booking-content{
    position:relative;
    z-index:2;

    max-width:900px;

    margin:auto;

    color:var(--white);
}

.booking-subtitle{
    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#D5B08A;

    margin-bottom:24px;
}

.booking-content h2{
    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    line-height:1.05;

    font-weight:500;

    margin-bottom:30px;

    text-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.booking-content p{
    max-width:760px;

    margin:auto auto 42px;

    color:rgba(255,255,255,0.88);

    line-height:1.9;

    font-size:18px;
}

.booking-buttons{
    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}

.booking-banner .btn-primary{
    padding:17px 40px;

    border-radius:999px;

    font-size:15px;

    letter-spacing:1px;

    box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.booking-banner .btn-secondary{
    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.25);

    backdrop-filter:blur(8px);
}

/* MOBILE */

@media(max-width:768px){

    .booking-banner{
        padding:120px 20px;
    }

    .booking-content h2{
        font-size:52px;
    }

    .booking-content p{
        font-size:16px;
    }
}

@media(max-width:540px){

    .booking-content h2{
        font-size:42px;
    }

    .booking-buttons{
        flex-direction:column;
    }
}

/* =========================================================
MINI LOCATION
========================================================= */

.contact-location-mini{

max-width:1100px;

margin:90px auto 90px;

padding:70px 60px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
#F7F2EC,
#FCFAF7
);

border:1px solid #EFE5DA;

box-shadow:
0 18px 50px rgba(0,0,0,.04);
}

.contact-location-mini h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

line-height:1.05;

margin-bottom:24px;

color:var(--text);
}

.contact-location-mini p{

max-width:720px;

margin:auto auto 34px;

font-size:18px;

line-height:1.9;

color:var(--text-light);
}

@media(max-width:768px){

.contact-location-mini{

margin:0 24px 90px;

padding:50px 30px;

border-radius:28px;
}

.contact-location-mini h2{

font-size:42px;
}

.contact-location-mini p{

font-size:16px;
}
}

.form-heading{
margin-bottom:28px;
}

.form-heading h3{
font-family:'Cormorant Garamond',serif;

font-size:42px;

line-height:1.1;

margin-top:10px;

color:var(--text);
}

.contact-simple .container{
    max-width:1180px;
}

.contact-simple .section-heading{
    max-width:760px;
}

.contact-simple h2,
.contact-simple .contact-description{
    max-width:760px;
}

/* =========================================================
POPUP
========================================================= */

.popup-message{

position:fixed;

inset:0;

background:rgba(0,0,0,0.55);

display:flex;

align-items:center;

justify-content:center;

padding:20px;

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:9999;
}

.popup-message.active{

opacity:1;

visibility:visible;
}

.popup-box{

background:white;

padding:50px 40px;

border-radius:32px;

max-width:420px;

width:100%;

text-align:center;

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

.popup-icon{

width:72px;

height:72px;

margin:0 auto 24px;

border-radius:50%;

background:#C8A27A;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;
}

.popup-box h3{

font-family:'Cormorant Garamond',serif;

font-size:42px;

margin-bottom:16px;

color:var(--text);
}

.popup-box p{

font-size:16px;

line-height:1.8;

color:var(--text-light);

margin-bottom:30px;
}

.popup-box button{

padding:16px 34px;

border:none;

border-radius:999px;

background:#C8A27A;

color:white;

cursor:pointer;

font-size:14px;

letter-spacing:1px;
}

.btn-loading{

display:none;
}

/* TURNSTILE */

.cf-turnstile{

margin-top:10px;

margin-bottom:22px;
}