@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Poppins',Arial,Helvetica,sans-serif;color:#243746;background:#fffdfb;line-height:1.7;overflow-x:hidden}
a{text-decoration:none}
button,input,select,textarea{font-family:inherit}
img{max-width:100%}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif}
h1,h2,h3,p{margin-top:0}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.96);border-bottom:1px solid rgba(18,76,93,0.08);box-shadow:0 4px 20px rgba(18,76,93,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-container{min-height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center}
.logo-image{width:185px;height:auto;display:block;transition:transform .3s ease}
.logo:hover .logo-image{transform:scale(1.02)}
nav {background: transparent !important;box-shadow: none !important;}
.nav{display:flex;align-items:center;gap:25px}
.nav-menu {display: flex;align-items: center;gap: 27px;}
.nav-menu a{position:relative;color:#4a403d;font-size:16px;font-weight:500;transition:color .3s ease,transform .3s ease}
.nav a:not(.nav-button)::after{content:"";position:absolute;left:50%;bottom:-8px;width:0;height:2px;background:#c58b20;transform:translateX(-50%);transition:width .3s ease}
.nav a:not(.nav-button):hover{color:#c58b20}
.nav a:not(.nav-button):hover::after{width:70%}
.nav-button {padding: 12px 21px;background: #a67c52;color: #fff;font-size: 12px;font-weight: 600;letter-spacing: 0.3px;transition: var(--transition);}
.nav .nav-button{padding:11px 21px;border-radius:30px;color:#fff;background:linear-gradient(135deg,#087b8d,#075c6c);box-shadow:0 8px 20px rgba(8,123,141,0.18);transition:transform .3s ease,box-shadow .3s ease}
.nav .nav-button:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 25px rgba(8,123,141,0.28)}
.menu-button{display:none;border:none;background:transparent;font-size:28px;cursor:pointer;color:#124c5d}
.hero{position:relative;width:100%;display:flex;align-items:center;background-image:url("../img/bridal-makeup.png");background-repeat:no-repeat;background-size:cover;background-position:center center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;width:100%;height:100%;background:rgba(255,255,255,0.70);z-index:1;pointer-events:none}
.hero-container{position:relative;z-index:2;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:45px;align-items:center;padding:30px 0}
.hero-content{position:relative;z-index:3;padding:20px 0;background:transparent;transform:translateY(-10px)}
.hero-label{display:inline-block;margin-bottom:15px;color:#b77a16;font-size:12px;font-weight:700;letter-spacing:2.5px}
.hero h1{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:clamp(44px,5vw,64px);line-height:1.04;color:#124c5d;letter-spacing:-1.5px}
.hero h1 span{display:block;color:#c52b72;margin-top:4px}
.hero-content>p{max-width:680px;margin:20px 0;color:#365b63;font-size:16px;line-height:1.8;font-weight:400}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap;margin-top:20px}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 25px;border-radius:30px;font-size:13px;font-weight:600;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.primary-button{color:white;background:linear-gradient(135deg,#08788a,#075f6d);box-shadow:0 8px 22px rgba(8,120,138,0.20)}
.primary-button:hover{background:linear-gradient(135deg,#075f6d,#064e5b);transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,120,138,0.28)}
.secondary-button{color:#08788a;border:1.5px solid #08788a;background:rgba(255,255,255,0.90)}
.secondary-button:hover{color:white;background:#08788a;transform:translateY(-3px);box-shadow:0 10px 22px rgba(8,120,138,0.18)}
.hero-features{display:flex;gap:18px;flex-wrap:wrap;margin-top:23px}
.hero-features div{font-size:17px;color:#52666f;font-weight:500}
.hero-features strong{color:#bd7e19;margin-right:5px;font-size:14px}
.appointment-card{position:relative;z-index:10;width:100%;padding:15px;background:rgba(255,255,255,0.97);border-radius:20px;border:1px solid rgba(255,255,255,0.8);box-shadow:0 20px 50px rgba(0,0,0,0.18);box-sizing:border-box;transition:transform .3s ease,box-shadow .3s ease}
.appointment-card:hover{transform:translateY(-3px);box-shadow:0 25px 60px rgba(0,0,0,0.20)}
.appointment-heading{margin-bottom:13px;text-align:center}
.appointment-heading span{color:#bd7e19;font-size:10px;font-weight:800;letter-spacing:1.8px}
.appointment-heading h2{margin:4px 0;color:#124c5d;font-family:'Playfair Display',Georgia,serif;font-size:24px;line-height:1.25}
.appointment-heading p{color:#71818a;font-size:11px;line-height:1.5;margin:0}
.appointment-card .form-group{margin-bottom:9px;display:flex;flex-direction:column}
.appointment-card .form-group label{margin-bottom:4px;color:#36535e;font-size:11px;font-weight:600}
.appointment-card input,.appointment-card select,.appointment-card textarea{width:100%;padding:9px 11px;border:1px solid #d5e0e3;border-radius:8px;background:#fff;color:#344d56;font-size:15px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.appointment-card input:focus,.appointment-card select:focus,.appointment-card textarea:focus{border-color:#08788a;box-shadow:0 0 0 3px rgba(8,120,138,0.08)}
.appointment-card input:hover,.appointment-card select:hover,.appointment-card textarea:hover{border-color:#a9c8cd}
.appointment-card textarea{resize:vertical;min-height:55px;max-height:70px}
.appointment-card .submit-button{width:100%;margin-top:3px;padding:11px;border:none;border-radius:25px;background:linear-gradient(135deg, #704f2e, #a67c52);color:white;font-size:15px;font-weight:700;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.appointment-card .submit-button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(8,120,138,0.25)}
.appointment-card .form-note{margin-top:7px;text-align:center;color:#829198;font-size:13px}
.section-heading{max-width:720px;margin:0 auto 55px;text-align:center}
.section-heading span,.section-label{color:#bf7e17;font-size:15px;font-weight:800;letter-spacing:2.5px}
.section-heading h2,.two-column h2{margin-top:10px;font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,4vw,43px);line-height:1.2;color:#124c5d;letter-spacing:-0.5px}
.section-heading p{margin-top:15px;color:#71818a;font-size:14px}
.about-section{padding:60px 0;background:linear-gradient(180deg,#fffdfb 0%,#fff8f8 100%)}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.two-column p{margin:19px 0;color:#657780;font-size:14px;line-height:1.8}
.two-column .primary-button{margin-top:8px}
.info-card{position:relative;padding:40px;border-radius:25px;background:linear-gradient(145deg,#eaf7f6,#fff6f8);border:1px solid rgba(8,120,138,0.08);box-shadow:0 15px 40px rgba(18,76,93,0.08);overflow:hidden}
.info-card::before{content:"";position:absolute;width:130px;height:130px;right:-50px;top:-50px;border-radius:50%;background:rgba(197,43,114,0.08)}
.info-card h3{margin-bottom:20px;font-size:35px;color:#124c5d}
.info-card ul{list-style:none}
.info-card li{position:relative;padding:12px 0 12px 25px;border-bottom:1px solid rgba(0,0,0,0.07);color:#526770;font-size:15px}
.info-card li::before{content:"✓";position:absolute;left:0;color:#c58b20;font-weight:800}
.services-section{padding:60px 0;background:#f7fbfb}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.service-card{overflow:hidden;padding:0;background:white;border-radius:20px;border:1px solid #e3eeee;box-shadow:0 8px 25px rgba(18,76,93,0.05);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.service-card:hover{transform:translateY(-8px);border-color:rgba(197,139,32,0.25);box-shadow:0 20px 45px rgba(18,76,93,0.12)}
.service-image{width:100%;height:215px;overflow:hidden;position:relative}
.service-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,76,93,0.12),transparent 45%);pointer-events:none}
.service-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}
.service-card:hover .service-image img{transform:scale(1.07)}
.service-card-content{padding:21px 22px 24px}
.service-card-content h3{margin:0 0 9px;color:#07566a;font-family:'Playfair Display',Georgia,serif;font-size:22px}
.service-card-content p{margin:0;color:#65767d;font-size:13px;line-height:1.7}
.service-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:20px;border-radius:50%;background:#fff1f5;font-size:27px}
.benefits-section{padding:105px 0;background:#fffdfb}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefit{position:relative;padding:30px 25px;border-radius:16px;background:#fff;border:1px solid #edf0f0;box-shadow:0 8px 25px rgba(18,76,93,0.04);transition:transform .3s ease,box-shadow .3s ease}
.benefit:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(18,76,93,0.09)}
.benefit span{color:#c88b19;font-size:13px;font-weight:800;letter-spacing:1px}
.benefit h3{margin:11px 0;color:#124c5d;font-family:'Playfair Display',Georgia,serif;font-size:21px}
.benefit p{color:#6d7d84;font-size:13px;line-height:1.7}
.process-section{padding:60px 0;background:#f7fbfb}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.process-card{position:relative;padding:30px 25px;background:white;border-radius:18px;border:1px solid #e6eeee;box-shadow:0 8px 25px rgba(18,76,93,0.04);transition:transform .3s ease,box-shadow .3s ease}
.process-card:hover{transform:translateY(-6px);box-shadow:0 16px 35px rgba(18,76,93,0.09)}
.process-number{width:48px;height:48px;display:grid;place-items:center;margin-bottom:20px;border-radius:50%;color:white;background:linear-gradient(135deg,#08788a,#0b6070);font-weight:700;box-shadow:0 8px 18px rgba(8,120,138,0.18)}
.process-card h3{color:#124c5d;font-family:'Playfair Display',Georgia,serif;font-size:21px}
.process-card p{margin-top:10px;color:#6d7d84;font-size:13px;line-height:1.7}
.packages-section{padding:60px 0;background:linear-gradient(180deg,#fffdfb,#fff8fa)}
.package-image {position: relative;overflow: hidden;border-radius: 10px}
.package-image a {display: block;position: relative;}
.package-image img {width: 100%;height: auto;display: block;}
.zoom-icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 50px; opacity: 0; transition: all 0.3s ease; pointer-events: none;}
.package-image:hover .zoom-icon {opacity: 1;}
.package-image:hover img {transform: scale(1.03);transition: transform 0.3s ease;}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;align-items:stretch}
.package-card{position:relative;padding:38px 32px;border-radius:22px;border:1px solid #e1e7e8;background:white;text-align:center;box-shadow:0 10px 30px rgba(18,76,93,0.05);transition:transform .35s ease,box-shadow .35s ease}
.package-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(18,76,93,0.10)}
.package-card.featured{border:2px solid #c58b20;transform:translateY(-10px);box-shadow:0 18px 45px rgba(197,139,32,0.13)}
.package-card.featured:hover{transform:translateY(-15px)}
.popular{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 18px;border-radius:20px;background:linear-gradient(135deg,#c58b20,#ad7410);color:white;font-size:10px;font-weight:800;letter-spacing:1px}
.package-card h3{color:#124c5d;font-family:'Playfair Display',Georgia,serif;font-size:25px}
.package-price{margin:20px 0;color:#c52b72;font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700}
.package-card ul{list-style:none;text-align:left}
.package-card li{padding:10px 0;border-bottom:1px solid #f0f1f1;color:#61737b;font-size:13px}
.package-button{display:block;margin-top:27px;padding:13px;border-radius:28px;background:linear-gradient(135deg,#08788a,#075f6d);color:white;font-size:13px;font-weight:700;transition:transform .3s ease,box-shadow .3s ease}
.package-button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(8,120,138,0.22)}
.faq-section{padding:105px 0;background:#f7fbfb}
.faq-container{max-width:850px;margin:auto}
.faq-item{margin-bottom:12px;overflow:hidden;border-radius:14px;background:white;border:1px solid #e5eeee;box-shadow:0 5px 18px rgba(18,76,93,0.04)}
.faq-question{width:100%;padding:20px 22px;border:none;background:white;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;cursor:pointer;font-size:15px;font-weight:600;color:#244b59;transition:background .3s ease,color .3s ease}
.faq-question:hover{background:#fbfefe;color:#08788a}
.faq-question span:last-child{min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#edf8f8;font-size:19px;color:#08788a;transition:transform .3s ease}
.faq-item.active .faq-question span:last-child{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 22px 20px;color:#6b7d84;font-size:13px;line-height:1.7}
.faq-item.active .faq-answer{display:block}
.final-cta{position:relative;padding:60px 20px;text-align:center;background:linear-gradient(135deg,#08788a,#174c5a);color:white;overflow:hidden}
.final-cta::before{content:"";position:absolute;width:250px;height:250px;left:-100px;top:-100px;border-radius:50%;background:rgba(255,255,255,0.05)}
.final-cta::after{content:"";position:absolute;width:300px;height:300px;right:-130px;bottom:-150px;border-radius:50%;background:rgba(197,43,114,0.15)}
.final-cta .container{position:relative;z-index:2}
.final-cta h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,4vw,44px);line-height:1.2}
.final-cta p{max-width:600px;margin:15px auto 30px;opacity:0.9;font-size:14px}
.cta-button{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:30px;background:white;color:#124c5d;font-size:13px;font-weight:800;transition:transform .3s ease,box-shadow .3s ease}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,0.18)}
.footer{background:#123844;color:white}
.footer-content{padding:55px 0;display:flex;justify-content:space-between;gap:40px}
.footer h3{margin-bottom:5px;color:#f1c46a;font-family:'Playfair Display',Georgia,serif;font-size:25px}
.footer p{margin-top:8px;opacity:0.8;font-size:13px}
.copyright{padding:20px;border-top:1px solid rgba(255,255,255,0.1);text-align:center;font-size:12px;opacity:0.7}
@media (max-width:1000px){
.hero{min-height:auto;height:auto;padding:60px 0}
.hero-container{grid-template-columns:1fr;gap:40px}
.hero-content{max-width:700px;margin:auto;text-align:center}
.hero-content>p{margin-left:auto;margin-right:auto}
.hero-buttons{justify-content:center}
.hero-features{justify-content:center}
.appointment-card{max-width:500px;margin:auto}
.cards-grid{grid-template-columns:repeat(2,1fr)}
.benefits-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
.package-grid{grid-template-columns:1fr;max-width:600px;margin:auto}
.package-card.featured,.package-card.featured:hover{transform:none}
.two-column{gap:40px}
}
@media (max-width:850px){
.nav{display:none;position:absolute;top:76px;left:0;right:0;padding:20px;background:rgba(255,255,255,0.98);flex-direction:column;align-items:stretch;gap:16px;border-bottom:1px solid #eee;box-shadow:0 15px 30px rgba(18,76,93,0.08)}
.nav.show{display:flex}
.nav a{text-align:center}
.nav a:not(.nav-button)::after{display:none}
.nav .nav-button{text-align:center}
.menu-button{display:block}
}
@media (max-width:600px){
.logo-image{width:155px}
.hero{padding:40px 0}
.hero h1{font-size:40px;letter-spacing:-0.8px}
.hero-label{font-size:10px;letter-spacing:1.8px}
.hero-content>p{font-size:14px;line-height:1.7}
.hero-buttons{flex-direction:column;align-items:stretch;width:100%}
.primary-button,.secondary-button{width:100%}
.hero-features{flex-direction:column;align-items:center;gap:7px}
.appointment-card{padding:20px;border-radius:16px}
.appointment-heading h2{font-size:22px}
.section-heading{margin-bottom:40px}
.section-heading h2,.two-column h2{font-size:31px}
.section-heading p{font-size:13px}
.about-section,.services-section,.benefits-section,.process-section,.packages-section,.faq-section{padding:75px 0}
.two-column{grid-template-columns:1fr;gap:35px}
.info-card{padding:28px}
.cards-grid,.benefits-grid,.process-grid{grid-template-columns:1fr}
.service-image{height:220px}
.service-card-content{padding:20px 20px 23px}
.benefit,.process-card{padding:25px 22px}
.package-card{padding:35px 25px}
.package-price{font-size:32px}
.faq-question{padding:17px;font-size:13px}
.faq-answer{padding:0 17px 17px}
.final-cta{padding:75px 20px}
.final-cta h2{font-size:32px}
.footer-content{flex-direction:column;padding:45px 0}
}
@media (max-width:400px){
.hero h1{font-size:35px}
.appointment-card{padding:17px}
.service-image{height:200px}
.section-heading h2,.two-column h2{font-size:28px}
.package-card{padding:30px 20px}
}
.why-choose-section{padding:60px 0;background:#fffaf8}
.why-choose-wrapper{display:grid;grid-template-columns:0.95fr 1.05fr;gap:80px;align-items:center}
.why-choose-image{position:relative;height:620px;overflow:hidden;border-radius:4px}
.why-choose-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.why-choose-image:hover img{transform:scale(1.04)}
.why-image-badge{position:absolute;left:30px;bottom:30px;background:rgba(255,255,255,0.95);padding:18px 24px;min-width:210px;box-shadow:0 12px 35px rgba(0,0,0,0.12)}
.why-image-badge span{display:block;font-size:11px;letter-spacing:3px;color:#a67c52;margin-bottom:5px;font-weight:600}
.why-image-badge strong{display:block;font-family:"Playfair Display",serif;font-size:18px;color:#2f2522;font-weight:500}
.why-choose-content{padding-right:20px}
.why-heading{text-align:left;margin-bottom:35px}
.why-heading span{display:inline-block;margin-bottom:14px;font-size:12px;letter-spacing:3px;font-weight:600;color:#a67c52}
.why-heading h2{margin-bottom:18px;font-family:"Playfair Display",serif;font-size:46px;line-height:1.15;font-weight:500;color:#302522}
.why-heading h2 em{color:#a67c52;font-style:italic}
.why-heading p{max-width:600px;margin:0;color:#756b68;font-size:15px;line-height:1.9}
.why-accordion{border-top:1px solid #ded4d0}
.why-item{border-bottom:1px solid #ded4d0}
.why-question{width:100%;border:none;background:transparent;padding:24px 4px;display:grid;grid-template-columns:50px 1fr 30px;align-items:center;gap:15px;cursor:pointer;text-align:left;font-family:inherit}
.why-question:hover{background:rgba(255,255,255,0.45)}
.why-number{font-family:"Playfair Display",serif;font-size:15px;color:#b29a8c;transition:color .3s ease}
.why-title{font-family:"Playfair Display",serif;font-size:21px;color:#302522;font-weight:500;transition:color .3s ease}
.why-icon{width:28px;height:28px;border:1px solid #cfc2bc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;color:#8f7668;transition:all .3s ease}
.why-item.active .why-number{color:#a67c52}
.why-item.active .why-title{color:#a67c52}
.why-item.active .why-icon{background:#a67c52;border-color:#a67c52;color:#fff}
.why-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}
.why-item.active .why-answer{max-height:180px;opacity:1;padding:0 50px 25px 65px}
.why-answer p{margin:0;color:#756b68;font-size:14px;line-height:1.85}
.why-item:not(.active) .why-question:hover .why-title{color:#a67c52}
.why-item:not(.active) .why-question:hover .why-icon{border-color:#a67c52;color:#a67c52}
@media (max-width:991px){
.why-choose-section{padding:80px 0}
.why-choose-wrapper{grid-template-columns:1fr;gap:50px}
.why-choose-image{height:520px}
.why-choose-content{padding-right:0}
.why-heading h2{font-size:40px}
}
@media (max-width:767px){
.why-choose-section{padding:65px 0}
.why-choose-wrapper{gap:40px}
.why-choose-image{height:430px}
.why-image-badge{left:20px;bottom:20px;padding:15px 18px;min-width:190px}
.why-heading{margin-bottom:25px}
.why-heading h2{font-size:34px}
.why-heading p{font-size:14px;line-height:1.8}
.why-question{grid-template-columns:38px 1fr 28px;gap:10px;padding:20px 0}
.why-title{font-size:18px}
.why-item.active .why-answer{padding:0 35px 22px 48px}
.why-answer p{font-size:13px}
}
@media (max-width:480px){
.why-choose-image{height:360px}
.why-heading h2{font-size:30px}
.why-question{grid-template-columns:32px 1fr 26px}
.why-number{font-size:13px}
.why-title{font-size:16px}
.why-icon{width:25px;height:25px;font-size:16px}
.why-item.active .why-answer{padding-left:42px}
}