@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600;700&display=swap");

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root { --color-accent: #a67c52; --color-accent-dark: #806044; --color-accent-light: #caa77d; --color-dark: #302522; --color-darker: #211b19; --color-text: #3a302d; --color-muted: #756b68; --color-bg-soft: #fbf8f5; --color-white: #ffffff; --color-border: #ded5d0; --font-heading: "Playfair Display", serif; --font-body: "Poppins", sans-serif; --section-space: 60px; --transition: all 0.3s ease; --wrap: 1180px; }

/* ==========================================================================
   2. GLOBAL
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button, input, textarea { font-family: inherit; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 25px; border: 1px solid transparent; font-size: 13px; font-weight: 600; transition: var(--transition); }
.btn-primary { background: var(--color-accent); color: var(--color-white); }
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-outline { border-color: var(--color-accent); color: var(--color-accent-dark); background: rgba(255, 255, 255, 0.55); }
.btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
.btn-light { background: var(--color-white); color: #6d5849; }
.btn-light:hover { background: var(--color-accent-light); color: var(--color-white); }

/* ==========================================================================
   4. NAVBAR
   ========================================================================== */
/* .navbar { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; padding: 18px 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); transition: background 0.3s ease, box-shadow 0.3s ease; } */
.navbar.navbar-scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 25px rgba(50, 35, 25, 0.08); }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.logo img { width: auto; height: 65px;}
.nav-menu { display: flex; align-items: center; gap: 27px; }
.nav-menu a { position: relative; color: #4a403d; font-size: 15px; font-weight: 500; transition: color 0.3s ease; }
.nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 1px; background: var(--color-accent); transition: width 0.3s ease; }
.nav-menu a:hover { color: var(--color-accent); }
.nav-menu a:hover::after { width: 100%; }
.nav-button { padding: 12px 21px; background: var(--color-accent); color: var(--color-white); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; transition: var(--transition); }
.nav-button:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
nav {background: transparent !important; box-shadow: none !important;}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero { position: relative; padding: 20px 0 15px; overflow: hidden; background-image: url("../img/bridal-hero-bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.3) 100%); }
.hero-overlay { display: none; }
.hero-container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.75fr; align-items: center; gap: 70px; }
/* .hero-content { max-width: 650px; } */
.hero-label { display: inline-block; margin-bottom: 18px; color: var(--color-accent); font-size: 12px; font-weight: 600; letter-spacing: 3px; }
.hero h1 { margin-bottom: 22px; font-family: var(--font-heading); font-size: clamp(48px, 5vw, 70px); line-height: 1.05; font-weight: 500; color: var(--color-dark); color: var(--color-dark); letter-spacing: -1px; }
.hero h1 em { color: var(--color-accent); font-style: italic; }
.hero-content h3 { font-family: var(--font-heading); color: #cd9800; font-weight: 700; }
.hero-content h3 span { color: #a00b5e; font-size: 2.2rem;}
.hero-content > p {margin-bottom: 22px; color: #625854; font-size: 17px; line-height: 1.9; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   6. HERO FORM
   ========================================================================== */
.hero-form { width: 100%; margin-left: auto; padding: 25px; background: rgba(255, 255, 255, 0.96); border-top: 4px solid var(--color-accent); box-shadow: 0 25px 60px rgba(58, 42, 35, 0.14); }
.form-heading { margin-bottom: 20px; }
.form-heading span { display: block; margin-bottom: 7px; color: var(--color-accent); font-size: 12px; font-weight: 600; letter-spacing: 2.2px; }
.form-heading h2 { margin-bottom: 7px; font-family: var(--font-heading); font-size: 27px; line-height: 1.2; font-weight: 500; color: var(--color-dark); }
.form-heading p { color: #776c68; font-size: 12px; line-height: 1.7; }
.appointment-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { color: #514742; font-size: 11px; font-weight: 600; }
.form-group input, .form-group textarea { width: 100%; padding: 11px 13px; border: 1px solid #ddd3ce; outline: none; background: #fffdfc; color: #3b312e; font-size: 14px; resize: vertical; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.08); }
.form-submit { width: 100%; padding: 14px; border: none; background: var(--color-accent); color: var(--color-white); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.form-submit:hover { background: var(--color-accent-dark); }

/* ==========================================================================
   7. TRUST STRIP
   ========================================================================== */
.trust-strip { background: var(--color-dark); color: var(--color-white); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { min-height: 105px; padding: 10px 18px; display: flex; flex-direction: column; justify-content: center; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.trust-item:last-child { border-right: none; }
.trust-item strong { margin-bottom: 4px; font-family: var(--font-heading); font-size: 35px; font-weight: 500; }
.trust-item span { color: #d7ccc6; font-size: 15px; }

/* ==========================================================================
   8. SHARED SECTION STYLES
   ========================================================================== */
.about-section, .services-section, .process-section, .why-choose-section, .package-section, .faq-section { padding: var(--section-space) 0; }
.about-section, .process-section, .package-section { background: var(--color-white); }
.services-section, .why-choose-section, .faq-section { background: var(--color-bg-soft); }
.section-heading { max-width: 750px; margin: 0 auto 35px; text-align: center; }
.section-heading > span, .section-label { display: inline-block; margin-bottom: 12px; color: var(--color-accent); font-size: 11px; font-weight: 600; letter-spacing: 3px; }
.section-heading h2, .about-content h2 { margin-bottom: 12px; font-family: var(--font-heading); color: var(--color-dark); font-size: clamp(34px, 4vw, 48px); line-height: 1.2; font-weight: 500; }
.section-heading p { color: var(--color-muted); font-size: 14px; line-height: 1.85; }

/* ==========================================================================
   9. ABOUT
   ========================================================================== */
.about-wrapper { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 50px; }
.about-image { position: relative; overflow: hidden; }
.about-image::after { content: ""; position: absolute; right: 0px; bottom: 0px; width: 80px; height: 80px; border-right: 2px solid #7a2841; border-bottom: 2px solid #7a2841; pointer-events: none; }
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-content h2 { max-width: 580px; }
.about-content h2 em { color: var(--color-accent); font-style: italic; }
.about-content p { max-width: 620px; margin-bottom: 18px; color: var(--color-muted); font-size: 14px; line-height: 1.9; }
.text-link { display: inline-block; margin-top: 12px; padding-bottom: 4px; color: var(--color-accent); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--color-accent); }

/* ==========================================================================
   10. SERVICES
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { background: var(--color-white); overflow: hidden; box-shadow: 0 12px 35px rgba(65, 45, 35, 0.07); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 20px 45px rgba(65, 45, 35, 0.12); }
.service-image { height: 210px; overflow: hidden; }
.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-image img { transform: scale(1.05); }
.service-content { padding: 20px; }
.service-content > span { display: block; margin-bottom: 8px; color: #b69b82; font-family: var(--font-heading); font-size: 14px; }
.service-content h3 { margin-bottom: 11px; color: var(--color-dark); font-family: var(--font-heading); font-size: 21px; line-height: 1.3; font-weight: 500; }
.service-content p { margin-bottom: 12px; color: var(--color-muted); font-size: 12px; line-height: 1.8; }
.service-content a { color: var(--color-accent); font-size: 12px; font-weight: 600; }

/* ==========================================================================
   11. PROCESS
   ========================================================================== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.process-card { position: relative; min-height: 205px; padding: 28px 25px; border-right: 1px solid var(--color-border); }
.process-card:last-child { border-right: none; }
.process-number { margin-bottom: 18px; color: var(--color-accent); font-family: var(--font-heading); font-size: 31px; }
.process-card h3 { margin-bottom: 8px; color: var(--color-dark); font-family: var(--font-heading); font-size: 21px; font-weight: 500; }
.process-card p { color: var(--color-muted); font-size: 13px; line-height: 1.8; }

/* ==========================================================================
   12. WHY CHOOSE US
   ========================================================================== */
.why-choose-wrapper { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 50px; }
.why-choose-image { position: relative; height: 500px; overflow: hidden; }
.why-choose-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.why-choose-image:hover img { transform: scale(1.04); }
.why-image-badge { position: absolute; left: 28px; bottom: 28px; min-width: 225px; padding: 17px 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); }
.why-image-badge span { display: block; margin-bottom: 4px; color: var(--color-accent); font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.why-image-badge strong { display: block; color: var(--color-dark); font-family: var(--font-heading); font-size: 18px; font-weight: 500; }
.why-choose-content { padding-right: 15px; }
.why-heading { margin: 0 0 22px; text-align: left; }
.why-heading h2 { font-size: 46px; }
.why-heading h2 em { color: var(--color-accent); font-style: italic; }
.why-heading p { max-width: 620px; color: var(--color-muted); font-size: 14px; line-height: 1.85; }

/* ---------- Results gallery ---------- */
.results{padding:60px 0;background:var(--surface);}
.results__inner{max-width:var(--wrap);margin:0 auto;}
.results__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.results__grid img{border-radius:16px;border:1px solid #E8DACD;aspect-ratio:1/1;object-fit:cover;width:100%;}
@media (max-width:800px){.results__grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   13. ACCORDIONS (Why Choose Us + FAQ)
   ========================================================================== */
.why-accordion, .faq-container { border-top: 1px solid #dcd2cc; }
.why-item, .faq-item { border-bottom: 1px solid #dcd2cc; }
.why-question, .faq-question { width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; }
.why-answer, .faq-answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; }
.why-answer p, .faq-answer p { color: var(--color-muted); font-size: 13px; line-height: 1.85; }
.why-icon, .faq-question span:last-child { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid #cdbfb7; border-radius: 50%; color: #806b5e; font-size: 17px; transition: var(--transition); }
/* Why accordion */
.why-question { display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; gap: 14px; padding: 17px 3px; font-family: inherit; }
.why-number { color: #b19a89; font-family: var(--font-heading); font-size: 14px; }
.why-title { color: var(--color-dark); font-family: var(--font-heading); font-size: 20px; font-weight: 500; transition: color 0.3s ease; }
.why-item.active .why-title, .why-item.active .why-number { color: var(--color-accent); }
.why-item.active .why-icon, .faq-item.active .faq-question span:last-child { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.why-item.active .why-answer { max-height: 180px; opacity: 1; padding: 0 40px 18px 62px; }
/* FAQ accordion */
.faq-container { max-width: 900px; margin: 0 auto; border-top-color: #ddd3ce; }
.faq-item { border-bottom-color: #ddd3ce; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; color: var(--color-dark); font-family: var(--font-heading); font-size: 19px; font-weight: 500; }
.faq-question span:last-child { flex: 0 0 auto; font-family: var(--font-body); }
.faq-item.active .faq-question { color: var(--color-accent); }
.faq-item.active .faq-answer { max-height: 250px; opacity: 1; padding: 0 55px 18px 4px; }

/* ==========================================================================
   14. PACKAGE
   ========================================================================== */
.package-box { position: relative; display: grid; grid-template-columns: 0.9fr 0.8fr 1.3fr; overflow: hidden; background: var(--color-bg-soft); border: 1px solid #e4d9d2; box-shadow: 0 20px 55px rgba(65, 45, 35, 0.08); }
.package-intro { padding: 35px 30px; background: var(--color-dark); color: var(--color-white); }
.package-intro > span, .package-price > span { display: block; margin-bottom: 14px; color: var(--color-accent-light); font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.package-intro h3 { margin-bottom: 18px; font-family: var(--font-heading); font-size: 35px; line-height: 1.2; font-weight: 500; }
.package-intro p { color: #ded2cb; font-size: 13px; line-height: 1.8; }
.package-price { display: flex; flex-direction: column; justify-content: center; padding: 30px; text-align: center; border-right: 1px solid #ded4ce; }
.package-price del { margin-bottom: 3px; color: #8e817b; font-size: 18px; }
.package-price strong { display: block; color: var(--color-accent); font-family: var(--font-heading); font-size: 44px; line-height: 1.1; font-weight: 600; }
.package-price small { margin-top: 8px; color: #665a55; font-size: 12px; }
.package-treatments { padding: 28px 30px; }
.package-treatments h3 { margin-bottom: 18px; color: var(--color-dark); font-family: var(--font-heading); font-size: 23px; font-weight: 500; }
.package-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; }
.package-list div { display: flex; align-items: flex-start; gap: 9px; color: #655a55; font-size: 12px; line-height: 1.5; }
.package-list div span { color: var(--color-accent); font-weight: 700; }
.package-button { grid-column: 1 / -1; padding: 18px 30px; text-align: center; border-top: 1px solid #ded4ce; }

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */
.final-cta { position: relative; padding: var(--section-space) 0; background: var(--color-dark); color: var(--color-white); text-align: center; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; top: -100px; left: 50%; width: 400px; height: 400px; border: 1px solid rgba(202, 167, 125, 0.15); border-radius: 50%; transform: translateX(-50%); }
.final-cta .container { position: relative; z-index: 2; }
.final-cta > .container > span { display: inline-block; margin-bottom: 12px; color: var(--color-accent-light); font-size: 11px; font-weight: 600; letter-spacing: 3px; }
.final-cta h2 { margin-bottom: 10px; font-family: var(--font-heading); font-size: clamp(36px, 5vw, 52px); font-weight: 500; }
.final-cta p { max-width: 600px; margin: 0 auto 20px; color: #d6cac3; font-size: 14px; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
/* .footer { background: var(--color-darker); color: var(--color-white); }
.footer-container { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 60px; padding-top: 45px; padding-bottom: 40px; }
.footer-brand img { width: 185px; margin-bottom: 17px; background: var(--color-white); }
.footer-brand p { max-width: 360px; color: #bdb1ab; font-size: 12px; line-height: 1.8; }
.footer h3 { margin-bottom: 17px; color: var(--color-white); font-family: var(--font-heading); font-size: 19px; font-weight: 500; }
.footer-contact p { max-width: 280px; margin-bottom: 9px; color: #bdb1ab; font-size: 12px; line-height: 1.8; }
.footer-contact strong { color: var(--color-accent-light); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { margin-bottom: 8px; color: #bdb1ab; font-size: 12px; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--color-accent-light); }
.footer-bottom { padding: 17px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
.footer-bottom p { color: #8f837d; font-size: 10px; } */

/* ==========================================================================
   17. RESPONSIVE - TABLET (max 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
	.nav-menu { gap: 16px; }
	.nav-menu a { font-size: 12px; }
	.hero-container { gap: 40px; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.package-box { grid-template-columns: 1fr 1fr; }
	.package-treatments { grid-column: 1 / -1; border-top: 1px solid #ded4ce; }
}

/* ==========================================================================
   18. RESPONSIVE - SMALL TABLET (max 991px)
   ========================================================================== */
@media (max-width: 991px) {
	.navbar { position: relative; }
	.nav-container { flex-wrap: wrap; }
	.nav-menu { order: 3; width: 100%; justify-content: center; padding-top: 8px; overflow-x: auto; }
	.hero { min-height: auto; padding: 90px 0 70px; }
	.hero-container { grid-template-columns: 1fr; }
	.hero-content { max-width: 700px; }
	.hero-form { margin: 0; max-width: 520px; }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-item:nth-child(2) { border-right: none; }
	.trust-item:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.about-wrapper { grid-template-columns: 1fr; gap: 45px; }
	.about-image { height: 500px; max-width: 600px; }
	.process-grid { grid-template-columns: repeat(2, 1fr); }
	.process-card:nth-child(2) { border-right: none; }
	.process-card:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
	.why-choose-wrapper { grid-template-columns: 1fr; }
	.why-choose-image { height: 520px; max-width: 600px; }
	.why-choose-content { padding-right: 0; }
	.footer-container { grid-template-columns: 1fr 1fr; }
	.footer-links { grid-column: 1 / -1; }
}

/* ==========================================================================
   19. RESPONSIVE - MOBILE (max 767px)
   ========================================================================== */
@media (max-width: 767px) {
	:root { --section-space: 50px; }
	.container { width: min(92%, 600px); }
	/* Navbar */
	.navbar { padding: 14px 0; }
	.logo img { width: 150px; }
	.nav-button { padding: 10px 13px; font-size: 10px; }
	.nav-menu { justify-content: flex-start; gap: 20px; padding-bottom: 4px; }
	.nav-menu a { white-space: nowrap; font-size: 11px; }
	/* Hero */
	.hero { padding: 70px 0 60px; background-position: 65% center; }
	.hero::before { background: rgba(255, 255, 255, 0.87); }
	.hero h1 { font-size: 45px; }
	.hero-content > p { font-size: 14px; }
	.hero-buttons { flex-direction: column; align-items: stretch; }
	.hero-buttons .btn { width: 100%; }
	.hero-form { padding: 25px; }
	/* Trust strip */
	.trust-grid { grid-template-columns: 1fr; }
	.trust-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.trust-item:last-child { border-bottom: none; }
	/* Section headings */
	.section-heading { margin-bottom: 30px; }
	.section-heading h2, .about-content h2 { font-size: 34px; }
	/* Services */
	.services-grid { grid-template-columns: 1fr; }
	.service-image { height: 260px; }
	/* Process */
	.process-grid { grid-template-columns: 1fr; }
	.process-card { border-right: none; border-bottom: 1px solid var(--color-border); }
	.process-card:last-child { border-bottom: none; }
	/* Why choose us */
	.why-choose-image { height: 430px; }
	.why-heading h2 { font-size: 35px; }
	.why-question { grid-template-columns: 38px 1fr 28px; gap: 10px; }
	.why-title { font-size: 17px; }
	.why-item.active .why-answer { padding: 0 25px 18px 48px; }
	/* Package */
	.package-box { grid-template-columns: 1fr; }
	.package-intro { padding: 38px 28px; }
	.package-price { border-right: none; border-top: 1px solid #ded4ce; border-bottom: 1px solid #ded4ce; }
	.package-treatments { grid-column: auto; padding: 30px 25px; }
	.package-list { grid-template-columns: 1fr; }
	.package-button { grid-column: auto; padding: 22px 20px; }
	/* FAQ */
	.faq-question { padding: 18px 0; font-size: 17px; }
	.faq-item.active .faq-answer { padding: 0 35px 18px 0; }
	/* Footer */
	.footer-container { grid-template-columns: 1fr; gap: 35px; }
	.footer-links { grid-column: auto; }
}

/* ==========================================================================
   20. RESPONSIVE - SMALL MOBILE (max 480px)
   ========================================================================== */
@media (max-width: 480px) {
	.logo img { width: 135px; }
	.nav-button { padding: 9px 10px; }
	.hero h1 { font-size: 38px; }
	.hero-label { letter-spacing: 2px; }
	.hero-form { padding: 21px; }
	.about-image { height: 390px; }
	.why-choose-image { height: 360px; }
	.why-image-badge { left: 18px; bottom: 18px; min-width: 190px; padding: 14px 17px; }
	.why-title { font-size: 15px; }
	.why-icon { width: 25px; height: 25px; font-size: 15px; }
	.why-item.active .why-answer { padding-left: 42px; }
	.package-price strong { font-size: 38px; }
	.final-cta h2 { font-size: 35px; }
}