/* ------------------------------
Basic Setup
------------------------------ */

:root {
--pink: #d98998;
--dark-pink: #b96878;
--soft-pink: #fff3f6;
--light-pink: #fbe2e8;
--gold: #c9a04f;
--dark: #28241f;
--gray: #6f6863;
--white: #ffffff;
--border: rgba(185, 104, 120, 0.18);
--shadow: 0 20px 50px rgba(97, 53, 61, 0.12);
}

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

html {
scroll-behavior: smooth;
}

body {
font-family: "DM Sans", sans-serif;
color: var(--dark);
background: var(--white);
line-height: 1.6;
}

img {
max-width: 100%;
}

a {
color: inherit;
}


/* ------------------------------
Navigation
------------------------------ */

.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(15px);
border-bottom: 1px solid var(--border);
}

.navbar {
width: min(1180px, 92%);
min-height: 78px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.brand {
font-family: "Playfair Display", serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--pink);
text-decoration: none;
}

.brand span {
color: var(--dark);
font-style: italic;
}

.nav-links {
display: flex;
align-items: center;
gap: 28px;
}

.nav-links a {
font-size: 0.94rem;
font-weight: 600;
text-decoration: none;
color: var(--gray);
transition: 0.25s;
}

.nav-links a:hover {
color: var(--pink);
}

.nav-book-button {
padding: 11px 23px;
border-radius: 50px;
background: var(--pink);
color: var(--white);
text-decoration: none;
font-weight: 700;
transition: 0.25s;
}

.nav-book-button:hover {
background: var(--dark-pink);
transform: translateY(-2px);
}


/* ------------------------------
Hero
------------------------------ */

.hero {
min-height: calc(100vh - 78px);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
padding: 80px 20px;
background:
linear-gradient(
135deg,
#fff 0%,
var(--soft-pink) 50%,
#fff9ef 100%
);
}

.hero-content {
width: min(780px, 100%);
position: relative;
z-index: 2;
text-align: center;
}

.hero-logo {
width: min(330px, 80%);
margin-bottom: 18px;
filter: drop-shadow(0 15px 20px rgba(88, 51, 57, 0.09));
}

.eyebrow {
margin-bottom: 12px;
color: var(--gold);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.hero h1 {
max-width: 720px;
margin: 0 auto 22px;
font-family: "Playfair Display", serif;
font-size: clamp(3rem, 7vw, 5.8rem);
line-height: 1.02;
letter-spacing: -0.04em;
}

.hero h1 span {
color: var(--pink);
font-style: italic;
}

.hero-description {
max-width: 610px;
margin: 0 auto 34px;
color: var(--gray);
font-size: 1.08rem;
}

.hero-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}

.primary-button,
.secondary-button,
.booking-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
padding: 15px 28px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
transition: 0.25s;
}

.primary-button,
.booking-button {
background: var(--pink);
color: var(--white);
box-shadow: 0 12px 30px rgba(185, 104, 120, 0.25);
}

.primary-button:hover,
.booking-button:hover {
background: var(--dark-pink);
transform: translateY(-3px);
}

.secondary-button {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.75);
color: var(--dark);
}

.secondary-button:hover {
border-color: var(--pink);
color: var(--pink);
transform: translateY(-3px);
}

.hero-glow {
position: absolute;
border-radius: 50%;
filter: blur(2px);
opacity: 0.55;
}

.hero-glow-one {
width: 350px;
height: 350px;
top: -130px;
left: -100px;
background: var(--light-pink);
}

.hero-glow-two {
width: 280px;
height: 280px;
right: -80px;
bottom: -80px;
background: #f4e4bd;
}

.scroll-down {
position: absolute;
bottom: 25px;
color: var(--gray);
font-size: 0.85rem;
text-decoration: none;
}


/* ------------------------------
Shared Sections
------------------------------ */

.section {
width: min(1180px, 90%);
margin: auto;
padding: 110px 0;
}

.section-heading {
max-width: 680px;
margin: 0 auto 55px;
text-align: center;
}

.section-heading h2 {
margin-bottom: 14px;
font-family: "Playfair Display", serif;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.1;
}

.section-heading > p:last-child {
color: var(--gray);
}


/* ------------------------------
About
------------------------------ */

.about-section {
padding-top: 120px;
}

.about-card {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
min-height: 430px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 30px;
background: var(--white);
box-shadow: var(--shadow);
}

.about-decoration {
display: grid;
place-items: center;
background:
linear-gradient(
145deg,
var(--light-pink),
#fff8ea
);
}

.about-decoration span {
font-family: "Playfair Display", serif;
font-size: 10rem;
font-style: italic;
color: var(--pink);
opacity: 0.85;
}

.about-text {
align-self: center;
padding: clamp(35px, 6vw, 75px);
}

.about-text h3 {
margin-bottom: 22px;
font-family: "Playfair Display", serif;
font-size: clamp(1.9rem, 3vw, 2.8rem);
line-height: 1.2;
}

.about-text p {
margin-bottom: 17px;
color: var(--gray);
}

.text-link {
display: inline-block;
margin-top: 10px;
color: var(--pink);
font-weight: 700;
text-decoration: none;
}


/* ------------------------------
Services
------------------------------ */

.services-section {
width: 100%;
max-width: none;
padding-left: 5%;
padding-right: 5%;
background: var(--soft-pink);
}

.services-grid {
width: min(1180px, 100%);
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

.service-card {
min-height: 330px;
padding: 34px 28px;
border: 1px solid var(--border);
border-radius: 25px;
background: rgba(255, 255, 255, 0.85);
transition: 0.3s;
}

.service-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
}

.service-number {
margin-bottom: 45px;
color: var(--gold);
font-family: "Playfair Display", serif;
font-size: 1.15rem;
}

.service-card h3 {
margin-bottom: 15px;
font-family: "Playfair Display", serif;
font-size: 1.65rem;
}

.service-card p {
margin-bottom: 25px;
color: var(--gray);
}

.service-card span {
color: var(--pink);
font-size: 0.9rem;
font-weight: 700;
}


/* ------------------------------
Gallery
------------------------------ */

.gallery-grid {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
align-items: center;
gap: 22px;
}

.gallery-placeholder {
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
border-radius: 28px;
color: var(--white);
background:
linear-gradient(
150deg,
rgba(217, 137, 152, 0.75),
rgba(86, 63, 67, 0.8)
),
var(--pink);
box-shadow: var(--shadow);
}

.featured-placeholder {
min-height: 480px;
background:
linear-gradient(
150deg,
rgba(201, 160, 79, 0.58),
rgba(161, 91, 105, 0.88)
),
var(--pink);
}

.gallery-placeholder span {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.gallery-placeholder p {
font-family: "Playfair Display", serif;
font-size: 2rem;
}

.instagram-link {
display: block;
width: fit-content;
margin: 40px auto 0;
color: var(--pink);
font-weight: 700;
text-decoration: none;
}


/* ------------------------------
Benefits
------------------------------ */

.why-section {
width: 100%;
max-width: none;
padding-left: 5%;
padding-right: 5%;
background: var(--dark);
color: var(--white);
}

.why-section .eyebrow {
color: #e5c986;
}

.benefits-grid {
width: min(1100px, 100%);
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 45px;
}

.benefit {
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.benefit span {
color: #e5c986;
font-weight: 700;
}

.benefit h3 {
margin: 20px 0 12px;
font-family: "Playfair Display", serif;
font-size: 1.65rem;
}

.benefit p {
color: rgba(255, 255, 255, 0.68);
}


/* ------------------------------
Booking
------------------------------ */

.booking-section {
padding: 120px 20px;
background:
linear-gradient(
130deg,
var(--soft-pink),
#fff9e9
);
}

.booking-content {
width: min(760px, 100%);
margin: auto;
text-align: center;
}

.booking-content h2 {
margin-bottom: 20px;
font-family: "Playfair Display", serif;
font-size: clamp(2.7rem, 6vw, 4.8rem);
line-height: 1.05;
}

.booking-content > p:not(.eyebrow) {
max-width: 600px;
margin: 0 auto 30px;
color: var(--gray);
}

.booking-button {
margin-bottom: 20px;
}

.booking-content small {
display: block;
color: var(--gray);
}


/* ------------------------------
Contact
------------------------------ */

.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.contact-card {
padding: 34px;
border: 1px solid var(--border);
border-radius: 22px;
background: var(--white);
text-align: center;
}

.contact-label {
margin-bottom: 10px;
color: var(--gold);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.contact-card a {
color: var(--dark);
font-weight: 700;
text-decoration: none;
word-break: break-word;
}

.contact-card a:hover {
color: var(--pink);
}


/* ------------------------------
Footer
------------------------------ */

footer {
padding: 60px 20px;
border-top: 1px solid var(--border);
background: #fffafa;
text-align: center;
}

.footer-brand {
display: inline-block;
margin-bottom: 12px;
color: var(--pink);
font-family: "Playfair Display", serif;
font-size: 1.6rem;
font-weight: 700;
text-decoration: none;
}

footer p {
color: var(--gray);
}

.copyright {
margin-top: 20px;
font-size: 0.85rem;
}


/* ------------------------------
Mobile
------------------------------ */

@media (max-width: 900px) {

.navbar {
min-height: auto;
padding: 17px 0;
flex-wrap: wrap;
}

.nav-links {
order: 3;
width: 100%;
justify-content: center;
gap: 18px;
padding-top: 10px;
}

.nav-links a {
font-size: 0.82rem;
}

.services-grid {
grid-template-columns: repeat(2, 1fr);
}

.gallery-grid {
grid-template-columns: 1fr;
}

.gallery-placeholder,
.featured-placeholder {
min-height: 350px;
}

.benefits-grid {
grid-template-columns: 1fr;
}

}

@media (max-width: 650px) {

.brand {
font-size: 1.05rem;
}

.nav-book-button {
padding: 9px 16px;
font-size: 0.85rem;
}

.nav-links {
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 4px;
}

.hero {
min-height: 800px;
}

.hero-logo {
width: 245px;
}

.hero h1 {
font-size: 3.35rem;
}

.hero-buttons {
flex-direction: column;
align-items: center;
}

.primary-button,
.secondary-button {
width: min(280px, 100%);
}

.section {
padding: 85px 0;
}

.about-card {
grid-template-columns: 1fr;
}

.about-decoration {
min-height: 220px;
}

.about-decoration span {
font-size: 7rem;
}

.services-grid,
.contact-grid {
grid-template-columns: 1fr;
}

.service-card {
min-height: auto;
}

}


.gallery-item {
overflow: hidden;
border-radius: 28px;
box-shadow: var(--shadow);
height: 400px;
background: var(--soft-pink);
}

.featured-item {
height: 500px;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}

.gallery-item:hover img {
transform: scale(1.05);
}


.about-card {
display: flex;
justify-content: center;
align-items: center;
}

.about-text {
max-width: 650px;
width: 100%;
text-align: center;
margin: 0 auto;
}