/*==================================================
    SERENITY SPA KARACHI
    Premium One Page Website
==================================================*/

/*=========================
  GOOGLE VARIABLES
=========================*/

:root{

    /* Luxury Emerald Spa Theme */

    --primary:#00B86B;          /* Emerald Green */
    --primary-dark:#007A48;     /* Dark Emerald */

    --secondary:#7FFFD4;        /* Soft Mint */

    --black:#050505;            /* Pure Luxury Black */
    --dark:#101714;             /* Deep Green Black */

    --white:#FFFFFF;
    --gray:#F2F5F3;

    --text:#BFC8C3;
    --heading:#FFFFFF;

    --accent:#D8C39A;           /* Soft Champagne */

    --radius:20px;

    --shadow:
    0 20px 50px rgba(0,184,107,0.18);

    --transition:.35s ease;

    --container:1200px;

}



/*=========================
 RESET
=========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:var(--black);
color:var(--text);
line-height:1.7;
overflow-x:hidden;

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));
margin:auto;

}

/*=========================
 TYPOGRAPHY
=========================*/

h1,
h2,
h3{

font-family:'Cormorant Garamond',serif;
font-weight:700;
color:var(--heading);

}

h1{

font-size:64px;
line-height:1.1;

}

h2{

font-size:48px;

}

h3{

font-size:28px;

}

p{

font-size:17px;

}

.section-heading{

text-align:center;
max-width:760px;
margin:0 auto 70px;

}

.section-tag{

display:inline-block;

padding:10px 22px;

border:1px solid rgba(201,168,106,.4);

border-radius:40px;

color:var(--primary);

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:20px;

}

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

.primary-btn,
.secondary-btn,
.service-btn,
.card-button,
.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.primary-btn{

background:
linear-gradient(
135deg,
#00B86B,
#007A48
);

color:#fff;

box-shadow:
0 10px 30px rgba(0,184,107,.35);

}

.primary-btn:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(212,175,55,.35);

}

.secondary-btn{

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

color:#fff;

margin-left:15px;

}

.secondary-btn:hover{

background:#fff;

color:#111;

}

.btn-call{

background:var(--primary);

color:#111;

}

.btn-whatsapp{

background:#25D366;

color:#fff;

}

/*=========================
 PRELOADER
=========================*/

#preloader{

position:fixed;

inset:0;

background:#111;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}

.loader{

width:65px;

height:65px;

border-radius:50%;

border:5px solid rgba(255,255,255,.12);

border-top-color:var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================
 HEADER
=========================*/

#header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:20px 0;

transition:.4s;

}

#header.scrolled{

background:rgba(15,15,16,.95);

backdrop-filter:blur(12px);

box-shadow:0 15px 40px rgba(0,0,0,.35);

padding:14px 0;

}

#header .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:34px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:#fff;

}

.logo span{

color:var(--primary);

}

#navbar ul{

display:flex;

gap:35px;

}

#navbar a{

color:#fff;

font-weight:500;

position:relative;

transition:.3s;

}

#navbar a:hover,

#navbar a.active{

color:var(--primary);

}

#navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

#navbar a:hover::after{

width:100%;

}

.header-buttons{

display:flex;

gap:12px;

}

#menu-btn{

display:none;

cursor:pointer;

}

#menu-btn span{

display:block;

width:28px;

height:3px;

background:#fff;

margin:5px 0;

transition:.35s;

}

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

#hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

z-index:-3;

}

.hero-bg img{

width:100%;

height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(0,184,107,0.45),
rgba(0,0,0,0.90)
);

z-index:-2;

}

.hero-glow{

position:absolute;

width:520px;

height:520px;

right:-120px;

top:-120px;

background:rgba(201,168,106,.18);

filter:blur(140px);

z-index:-1;

}

.hero-content{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

padding-top:120px;

padding-bottom:70px;

}

.hero-subtitle{

display:inline-block;

color:var(--primary);

letter-spacing:2px;

margin-bottom:18px;

text-transform:uppercase;

font-size:15px;

}

.hero-content p{

margin:28px 0;

max-width:620px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-bottom:40px;

}

.hero-features{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.feature{

display:flex;

align-items:center;

gap:14px;

background:rgba(255,255,255,.05);

padding:16px 22px;

border-radius:16px;

backdrop-filter:blur(10px);

}

.feature .icon{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#111;

font-weight:bold;

}

/*=========================
 HERO CARD
=========================*/

.hero-card{

background:rgba(255,255,255,.05);

backdrop-filter:blur(16px);

padding:40px;

border-radius:22px;

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

box-shadow:var(--shadow);

}

.card-tag{

display:inline-block;

color:var(--primary);

margin-bottom:18px;

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;

}

.hero-card p{

margin:18px 0 24px;

}

.hero-card ul{

display:grid;

gap:14px;

margin-bottom:28px;

}

.hero-card li{

padding-left:5px;

}

/*=========================
 SCROLL DOWN
=========================*/

.scroll-down{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

color:#fff;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

}

.scroll-down span{

width:2px;

height:55px;

background:linear-gradient(var(--primary),transparent);

animation:scrollLine 1.6s infinite;

}

@keyframes scrollLine{

0%{

transform:translateY(0);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:translateY(20px);

opacity:0;

}

}

/*==================================================
    ABOUT SECTION
==================================================*/

#about{

padding:120px 0;

background:#111;

}


.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}


.about-image{

position:relative;

}


.about-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:25px;

box-shadow:var(--shadow);

}


.experience-box{

position:absolute;

bottom:35px;

right:-35px;

background:linear-gradient(
135deg,
#D4AF37,
#A8843E
);

color:#111;

padding:30px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.4);

}


.experience-box h3{

font-size:55px;

color:#111;

line-height:1;

}


.experience-box p{

font-size:15px;

font-weight:600;

max-width:130px;

}


/* ABOUT CONTENT */

.about-content h2{

margin-bottom:25px;

}


.about-content p{

margin-bottom:20px;

color:#ccc;

}


.about-features{

display:grid;

gap:20px;

margin:35px 0;

}


.about-item{

display:flex;

gap:20px;

align-items:flex-start;

padding:20px;

background:rgba(255,255,255,.04);

border-radius:18px;

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

transition:.35s;

}


.about-item:hover{

transform:translateX(8px);

border-color:rgba(201,168,106,.4);

}


.about-item .icon{

min-width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary);

color:#111;

font-weight:bold;

}


.about-item h3{

font-family:'Inter',sans-serif;

font-size:20px;

margin-bottom:5px;

}


.about-item p{

font-size:15px;

margin:0;

}


/*==================================================
    STATS SECTION
==================================================*/


#stats{

padding:70px 0;

background:#0b0b0b;

}


.stats-grid{

display:grid;

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

gap:25px;

}


.stat-card{

text-align:center;

padding:45px 20px;

background:rgba(255,255,255,.04);

border-radius:20px;

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

transition:.35s;

}


.stat-card:hover{

transform:translateY(-10px);

background:rgba(201,168,106,.08);

}


.stat-card h3{

font-size:60px;

color:var(--primary);

line-height:1;

margin-bottom:15px;

}


.stat-card p{

font-size:16px;

color:#ddd;

}


/*==================================================
    WHY CHOOSE US
==================================================*/


#why-us{

padding:120px 0;

background:#111;

}


.why-grid{

display:grid;

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

gap:30px;

}


.why-card{

padding:40px 30px;

background:rgba(255,255,255,.04);

border-radius:22px;

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

transition:.35s;

position:relative;

overflow:hidden;

}


.why-card::before{

content:"";

position:absolute;

width:120px;

height:120px;

right:-50px;

top:-50px;

background:rgba(201,168,106,.12);

border-radius:50%;

transition:.35s;

}


.why-card:hover{

transform:translateY(-10px);

background:
linear-gradient(
145deg,
rgba(0,184,107,.18),
rgba(255,255,255,.04)
);

border-color:#00B86B;

}


.why-card:hover::before{

transform:scale(1.4);

}


.why-icon{

width:65px;

height:65px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

background:rgba(201,168,106,.15);

margin-bottom:25px;

}


.why-card h3{

font-family:'Inter',sans-serif;

font-size:22px;

margin-bottom:15px;

}


.why-card p{

font-size:16px;

color:#bbb;

}


/*==================================================
    RESPONSIVE TABLET
==================================================*/


@media(max-width:992px){


.about-grid{

grid-template-columns:1fr;

gap:50px;

}


.about-image img{

height:550px;

}


.experience-box{

right:20px;

}


.stats-grid{

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

}


.why-grid{

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

}


}


/*==================================================
    RESPONSIVE MOBILE
==================================================*/


@media(max-width:600px){


#about,
#why-us{

padding:80px 0;

}


.about-image img{

height:420px;

}


.experience-box{

bottom:20px;

right:15px;

padding:20px;

}


.experience-box h3{

font-size:40px;

}


.stats-grid{

grid-template-columns:1fr;

}


.stat-card h3{

font-size:45px;

}


.why-grid{

grid-template-columns:1fr;

}


.about-item{

padding:15px;

}


}
/*==================================================
    SERVICES SECTION
==================================================*/


#services{

padding:120px 0;

background:#0b0b0b;

}


.services-grid{

display:grid;

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

gap:30px;

}


/* SERVICE CARD */

.service-card{

background:rgba(255,255,255,.04);

border-radius:24px;

overflow:hidden;

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

transition:.4s ease;

}


.service-card:hover{

transform:translateY(-12px);

background:
linear-gradient(
145deg,
rgba(0,184,107,.15),
rgba(255,255,255,.03)
);

border-color:#00B86B;

}


/* SERVICE IMAGE */

.service-image{

height:280px;

overflow:hidden;

}


.service-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s ease;

}


.service-card:hover .service-image img{

transform:scale(1.1);

}


/* SERVICE CONTENT */

.service-content{

padding:35px 30px;

position:relative;

}


.service-number{

display:inline-flex;

align-items:center;

justify-content:center;

width:45px;

height:45px;

border-radius:50%;

background:
linear-gradient(
135deg,
#00B86B,
#007A48
);

color:#FFFFFF;

font-weight:700;

margin-bottom:20px;

box-shadow:
0 8px 20px rgba(0,184,107,.35);

}


.service-content h3{

font-family:'Inter',sans-serif;

font-size:25px;

margin-bottom:15px;

}


.service-content p{

font-size:16px;

color:#bdbdbd;

margin-bottom:25px;

}


.service-btn{

display:inline-flex;

padding:12px 28px;

border-radius:50px;

border:1px solid rgba(201,168,106,.5);

color:var(--primary);

font-weight:600;

transition:.35s;

}


.service-btn:hover{

background:var(--primary);

color:#111;

}


/*==================================================
 SERVICES CTA
==================================================*/


.services-cta{

margin-top:80px;

text-align:center;

padding:55px 40px;

border-radius:25px;

background:
linear-gradient(
135deg,
#00B86B,
#050505
);

border:1px solid rgba(0,184,107,.35);

}


.services-cta h3{

font-size:36px;

margin-bottom:15px;

}


.services-cta p{

max-width:700px;

margin:0 auto 30px;

}


.cta-buttons{

display:flex;

justify-content:center;

gap:15px;

}


/*==================================================
 GALLERY SECTION
==================================================*/


#gallery{

padding:120px 0;

background:#111;

}


.gallery-grid{

display:grid;

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

gap:25px;

}


.gallery-item{

height:350px;

position:relative;

overflow:hidden;

border-radius:22px;

cursor:pointer;

}


.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s ease;

}


.gallery-item:hover img{

transform:scale(1.12);

}


.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.8),
transparent
);

opacity:.7;

}


.gallery-overlay{

position:absolute;

bottom:25px;

left:25px;

z-index:2;

}


.gallery-overlay h3{

font-family:'Inter',sans-serif;

font-size:22px;

color:#fff;

}


/*==================================================
 TABLET RESPONSIVE
==================================================*/


@media(max-width:992px){


.services-grid{

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

}


.gallery-grid{

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

}


.service-image{

height:260px;

}


}


/*==================================================
 MOBILE RESPONSIVE
==================================================*/


@media(max-width:600px){


#services,
#gallery{

padding:80px 0;

}


.services-grid{

grid-template-columns:1fr;

}


.gallery-grid{

grid-template-columns:1fr;

}


.gallery-item{

height:300px;

}


.services-cta{

padding:35px 20px;

}


.services-cta h3{

font-size:28px;

}


.cta-buttons{

flex-direction:column;

}


.cta-buttons a{

width:100%;

}


}

/*==================================================
    FAQ SECTION
==================================================*/


#faq{

padding:120px 0;

background:#0b0b0b;

}


.faq-container{

max-width:900px;

margin:auto;

display:grid;

gap:20px;

}


.faq-item{

background:rgba(255,255,255,.04);

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

border-radius:18px;

overflow:hidden;

transition:.3s ease;

}


.faq-item.active{

border-color:rgba(201,168,106,.5);

}


.faq-question{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

padding:25px 30px;

background:transparent;

border:none;

color:#fff;

font-size:18px;

font-weight:600;

cursor:pointer;

text-align:left;

}


.faq-question span{

font-size:30px;

color:var(--primary);

transition:.3s;

}


.faq-item.active .faq-question span{

transform:rotate(45deg);

}


.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}


.faq-answer p{

padding:0 30px 25px;

color:#bbb;

font-size:16px;

}



/*==================================================
    CONTACT SECTION
==================================================*/


#contact{

padding:120px 0;

background:#111;

}


.contact-grid{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:50px;

align-items:start;

}


/* CONTACT CARDS */

.contact-info{

display:grid;

gap:20px;

}


.contact-card{

display:flex;

align-items:center;

gap:20px;

padding:25px;

background:rgba(255,255,255,.04);

border-radius:18px;

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

transition:.35s;

}


.contact-card:hover{

transform:translateX(8px);

border-color:rgba(201,168,106,.5);

}


.contact-icon{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(201,168,106,.15);

font-size:24px;

}


.contact-card h3{

font-family:'Inter',sans-serif;

font-size:18px;

margin-bottom:5px;

}


.contact-card a,
.contact-card p{

color:#bbb;

font-size:15px;

}


/* CONTACT FORM */


.contact-form-wrapper{

background:rgba(255,255,255,.04);

padding:45px;

border-radius:25px;

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

}


.contact-form{

display:grid;

gap:20px;

}


.form-group input,
.form-group textarea,
.form-group select{

width:100%;

padding:16px 20px;

background:#181818;

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

border-radius:12px;

color:#fff;

font-family:inherit;

font-size:15px;

outline:none;

transition:.3s;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:var(--primary);

}


.form-group textarea{

resize:none;

}


.form-group select option{

background:#181818;

}



/* GOOGLE MAP */

.map-wrapper{

margin-top:60px;

height:450px;

border-radius:25px;

overflow:hidden;

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

}


.map-wrapper iframe{

width:100%;

height:100%;

border:0;

}



/*==================================================
    FOOTER
==================================================*/


#footer{

background:#080808;

padding:80px 0 0;

}


.footer-grid{

display:grid;

grid-template-columns:1.3fr 1fr 1fr 1fr;

gap:40px;

padding-bottom:60px;

}


.footer-logo{

font-family:'Cormorant Garamond',serif;

font-size:38px;

font-weight:700;

color:#fff;

}


.footer-logo span{

color:var(--primary);

}


.footer-about p{

margin-top:20px;

color:#aaa;

}


#footer h3{

font-family:'Inter',sans-serif;

font-size:20px;

margin-bottom:25px;

}


.footer-links ul,
.footer-services ul{

display:grid;

gap:12px;

}


.footer-links a{

color:#aaa;

transition:.3s;

}


.footer-links a:hover{

color:var(--primary);

}


.footer-services li{

color:#aaa;

}


.footer-contact p{

color:#aaa;

margin-bottom:12px;

}


.footer-social{

display:flex;

gap:10px;

margin-top:20px;

}


.footer-social a{

padding:8px 14px;

border-radius:30px;

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

color:#fff;

font-size:13px;

transition:.3s;

}


.footer-social a:hover{

background:var(--primary);

color:#111;

}



.footer-bottom{

padding:25px 0;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

}


.footer-bottom p{

font-size:14px;

color:#888;

}



/*==================================================
 FLOATING WHATSAPP
==================================================*/


.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:999;

box-shadow:0 15px 35px rgba(0,0,0,.4);

transition:.35s;

}


.floating-whatsapp:hover{

transform:scale(1.1);

}



/*==================================================
 BACK TO TOP
==================================================*/


#backToTop{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

border:none;

background:var(--primary);

color:#111;

font-size:25px;

font-weight:bold;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}


#backToTop.show{

opacity:1;

visibility:visible;

}


#backToTop:hover{

transform:translateY(-5px);

}



/*==================================================
 FINAL RESPONSIVE
==================================================*/


@media(max-width:992px){


.contact-grid{

grid-template-columns:1fr;

}


.footer-grid{

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

}


}



@media(max-width:600px){


#faq,
#contact{

padding:80px 0;

}


.faq-question{

padding:20px;

font-size:16px;

}


.faq-answer p{

padding:0 20px 20px;

}


.contact-form-wrapper{

padding:25px;

}


.map-wrapper{

height:300px;

}


.footer-grid{

grid-template-columns:1fr;

}


.floating-whatsapp{

width:55px;

height:55px;

right:18px;

bottom:18px;

}


#backToTop{

left:18px;

bottom:18px;

width:50px;

height:50px;

}


}