/*==================================================
    AURA ELITE SPA
    Premium Dark Blue + White Theme
==================================================*/


/*=========================
  ROOT COLORS
=========================*/

:root{

    --primary:#1E5EFF;
    --primary-dark:#123A9A;

    --secondary:#5DADE2;

    --dark:#06152D;
    --dark-blue:#0B1F3A;

    --white:#FFFFFF;

    --light:#F7FAFF;

    --text:#475569;

    --heading:#06152D;

    --silver:#CBD5E1;

    --radius:20px;

    --shadow:
    0 20px 50px rgba(30,94,255,.15);

    --transition:.35s ease;

    --container:1200px;

}

/* Inner Pages Header */

.inner-header{

    background:#0B1F3A;

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

}


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

*{

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

}


html{

scroll-behavior:smooth;

}


body{

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

background:var(--light);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}


img{

max-width:100%;

display:block;

}


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;

line-height:1.2;

}


h3{

font-size:28px;

}


p{

font-size:17px;

}



/* SECTION TITLE */


.section-heading{

max-width:750px;

margin:0 auto 70px;

text-align:center;

}


.section-tag{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:rgba(30,94,255,.08);

color:var(--primary);

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:20px;

font-weight:600;

}



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


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


display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}



/* MAIN BUTTON */


.primary-btn{


background:

linear-gradient(
135deg,
#1E5EFF,
#123A9A
);


color:#fff;


box-shadow:

0 12px 30px rgba(30,94,255,.35);


}


.primary-btn:hover{


transform:translateY(-5px);


}


/* SECONDARY */


.secondary-btn{


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

color:#fff;


}


.secondary-btn:hover{


background:#fff;

color:var(--dark-blue);


}



/* CALL BUTTON */


.btn-call{


background:var(--primary);

color:#fff;


}



/* WHATSAPP */


.btn-whatsapp{


background:#25D366;

color:#fff;


}



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


#preloader{


position:fixed;

inset:0;

background:var(--dark-blue);

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,.2);

border-top-color:#fff;

animation:spin 1s linear infinite;


}



@keyframes spin{


100%{

transform:rotate(360deg);

}


}



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


#header{


position:fixed;

top:0;

left:0;

width:100%;

padding:22px 0;

z-index:999;

transition:.4s;


}



#header.scrolled{


background:

rgba(6,21,45,.95);


backdrop-filter:blur(15px);


box-shadow:

0 10px 40px rgba(0,0,0,.25);


padding:15px 0;


}



#header .container{


display:flex;

justify-content:space-between;

align-items:center;


}




.logo{


font-family:'Cormorant Garamond',serif;

font-size:36px;

font-weight:700;

color:#fff;


}


.logo span{


color:#5DADE2;


}



/* NAV */


#navbar ul{


display:flex;

gap:35px;


}



#navbar a{


color:#fff;

font-weight:500;

transition:.3s;

position:relative;


}



#navbar a:hover,
#navbar a.active{


color:#5DADE2;


}


#navbar a::after{


content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:#5DADE2;

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;


}



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


#hero{


min-height:100vh;

display:flex;

align-items:center;

position:relative;

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(6,21,45,.92),

rgba(30,94,255,.55)

);


z-index:-2;


}




.hero-glow{


position:absolute;

width:500px;

height:500px;

right:-100px;

top:-100px;


background:

rgba(93,173,226,.35);


filter:blur(150px);


}



.hero-content{


display:grid;

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

gap:70px;

align-items:center;

padding-top:120px;


}




.hero-subtitle{


color:#5DADE2;

letter-spacing:2px;

text-transform:uppercase;

font-size:15px;


}



.hero-text h1{


color:#fff;

margin-top:20px;


}



.hero-text h1 span{


color:#5DADE2;


}



.hero-text p{


color:#e2e8f0;

margin:25px 0;

max-width:620px;


}



.hero-buttons{


display:flex;

gap:15px;

margin-bottom:40px;


}



.hero-features{

display:grid;

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

gap:20px;

}



.feature{

display:flex;

align-items:center;

gap:12px;

padding:22px 20px;

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

border-radius:18px;

backdrop-filter:blur(10px);

color:#fff;

min-height:90px;

}



.feature .icon{


width:40px;

height:40px;

border-radius:50%;

background:#1E5EFF;

display:flex;

align-items:center;

justify-content:center;

color:#fff;


}


/* HERO CARD */


.hero-card{


background:

rgba(255,255,255,.12);


backdrop-filter:blur(18px);


padding:40px;

border-radius:25px;


border:

1px solid rgba(255,255,255,.2);


}



.hero-card h3{


color:#fff;

}



.hero-card p,
.hero-card li{


color:#e2e8f0;


}



.card-tag{


color:#5DADE2;

text-transform:uppercase;

letter-spacing:2px;


}


/* SCROLL */


.scroll-down{

position:absolute;

bottom:15px;

left:50%;

transform:translateX(-50%);

color:#fff;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:14px;

z-index:5;

}


.scroll-down span{

display:block;

width:2px;

height:45px;

background:#fff;

position:relative;

overflow:hidden;

}


.scroll-down span::after{

content:"";

position:absolute;

top:-45px;

left:0;

width:2px;

height:45px;

background:#5DADE2;

animation:scrollLine 1.8s infinite;

}


@keyframes scrollLine{

0%{

top:-45px;

}


50%{

top:45px;

}


100%{

top:45px;

}

}



.scroll-down span{


display:block;

height:50px;

width:2px;

background:#fff;

margin:auto;


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


#about{

padding:120px 0;

background:#ffffff;

}



.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}



/* ABOUT IMAGE */


.about-image{

position:relative;

}



.about-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:25px;

box-shadow:

0 20px 50px rgba(6,21,45,.15);

}



/* EXPERIENCE BOX */


.experience-box{


position:absolute;

right:-35px;

bottom:40px;


background:

linear-gradient(
135deg,
#1E5EFF,
#123A9A
);


color:#fff;


padding:35px;


border-radius:22px;


text-align:center;


box-shadow:

0 15px 40px rgba(30,94,255,.35);


}



.experience-box h3{


font-size:55px;

color:#fff;

line-height:1;


}



.experience-box p{


font-size:15px;

color:#fff;

max-width:140px;


}



/* ABOUT CONTENT */


.about-content h2{


margin-bottom:25px;

}



.about-content p{


margin-bottom:20px;


}



/* ABOUT FEATURES */


.about-features{


display:grid;

gap:20px;

margin:35px 0;


}



.about-item{


display:flex;

gap:20px;

padding:20px;


background:#F7FAFF;


border-radius:18px;


border:1px solid #E2E8F0;


transition:.35s;


}



.about-item:hover{


transform:translateX(10px);


border-color:#5DADE2;


}



.about-item .icon{


width:45px;

height:45px;

min-width:45px;


border-radius:50%;


background:

linear-gradient(
135deg,
#1E5EFF,
#5DADE2
);


display:flex;

align-items:center;

justify-content:center;


color:#fff;


}



.about-item h3{


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

font-size:20px;

margin-bottom:5px;


}



.about-item p{


font-size:15px;

margin:0;


}





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


#why-us{


padding:120px 0;


background:

linear-gradient(
135deg,
#06152D,
#0B1F3A
);


}



#why-us .section-tag{


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

color:#5DADE2;


}



#why-us h2{


color:#fff;


}



#why-us .section-heading p{


color:#CBD5E1;


}




.why-grid{


display:grid;

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

gap:30px;


}




.why-card{


padding:40px 30px;


background:

rgba(255,255,255,.08);


border-radius:22px;


border:

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


transition:.35s;


}



.why-card:hover{


transform:translateY(-10px);


background:

rgba(255,255,255,.15);


border-color:#5DADE2;


}



.why-icon{


width:65px;

height:65px;


display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


background:

rgba(93,173,226,.2);


font-size:30px;


margin-bottom:25px;


}



.why-card h3{


color:#fff;

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

font-size:22px;

margin-bottom:15px;


}



.why-card p{


color:#CBD5E1;

font-size:16px;


}




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


#services{


padding:120px 0;


background:#F7FAFF;


}



.services-grid{


display:grid;

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

gap:30px;


}




.service-card{


background:#fff;


border-radius:25px;


overflow:hidden;


border:1px solid #E2E8F0;


transition:.4s;


}



.service-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(30,94,255,.18);


border-color:#5DADE2;


}



/* SERVICE IMAGE */


.service-image{


height:280px;

overflow:hidden;


}



.service-image img{


width:100%;

height:100%;

object-fit:cover;

transition:.6s;


}



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


transform:scale(1.1);


}




/* SERVICE CONTENT */


.service-content{


padding:35px 30px;


}



.service-number{


width:48px;

height:48px;


display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


background:

linear-gradient(
135deg,
#1E5EFF,
#5DADE2
);


color:#fff;


font-weight:700;


margin-bottom:20px;


box-shadow:

0 10px 25px rgba(30,94,255,.3);


}



.service-content h3{


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

font-size:24px;

margin-bottom:15px;


}



.service-content p{


color:#64748B;

font-size:16px;

margin-bottom:25px;


}




.service-btn{


padding:12px 28px;


border-radius:50px;


border:1px solid #1E5EFF;


color:#1E5EFF;


font-weight:600;


transition:.35s;


}



.service-btn:hover{


background:#1E5EFF;

color:#fff;


}





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


@media(max-width:992px){


.about-grid{


grid-template-columns:1fr;


}





.experience-box{


right:20px;


}



.why-grid{


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


}



.services-grid{


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


}



}




@media(max-width:600px){


#about,
#why-us,
#services{


padding:80px 0;


}



.about-image img{


height:420px;


}



.experience-box{


padding:20px;


bottom:20px;


}



.experience-box h3{


font-size:40px;


}



.why-grid{


grid-template-columns:1fr;


}



.services-grid{


grid-template-columns:1fr;


}



}

@media(max-width:992px){

.hero-features{

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

margin-bottom:60px;

}

}
@media(max-width:600px){

.hero-features{

grid-template-columns:1fr;

margin-bottom:50px;

}


.scroll-down{

display:none;

}

}
/* HERO FEATURES + SCROLL FIX */

#hero{
    overflow:hidden;
}

.hero-content{
    padding-bottom:120px;
}


.hero-features{
    position:relative;
    z-index:2;
}


.scroll-down{
    bottom:25px;
    z-index:1;
}

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


#gallery{

padding:120px 0;

background:#ffffff;

}



.gallery-grid{


display:grid;

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

gap:25px;


}



.gallery-item{


position:relative;

height:320px;

overflow:hidden;

border-radius:22px;

cursor:pointer;


}



.gallery-item img{


width:100%;

height:100%;

object-fit:cover;

transition:.6s;


}



.gallery-item:hover img{


transform:scale(1.12);


}



.gallery-overlay{


position:absolute;

inset:0;


background:

linear-gradient(
180deg,
transparent,
rgba(6,21,45,.85)
);


display:flex;

align-items:flex-end;

padding:30px;


opacity:0;

transition:.4s;


}



.gallery-item:hover .gallery-overlay{


opacity:1;


}



.gallery-overlay h3{


color:#fff;

font-size:24px;


}








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


#faq{


padding:120px 0;


background:#F7FAFF;


}



.faq-container{


max-width:850px;

margin:auto;


}



.faq-item{


background:#fff;

border-radius:18px;

margin-bottom:15px;


border:

1px solid #E2E8F0;


overflow:hidden;


}



.faq-question{


width:100%;

padding:25px 30px;


background:none;

border:none;


display:flex;

justify-content:space-between;

align-items:center;


font-size:18px;

font-weight:600;


color:#06152D;


cursor:pointer;


text-align:left;


}



.faq-question span{


width:35px;

height:35px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(30,94,255,.1);


color:#1E5EFF;


border-radius:50%;


font-size:22px;


}



.faq-answer{


max-height:0;

overflow:hidden;

transition:.4s;


padding:0 30px;


}



.faq-answer p{


padding-bottom:25px;

color:#64748B;


}



.faq-item.active .faq-answer{


max-height:200px;


}







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


#contact{


padding:120px 0;


background:#ffffff;


}




.contact-grid{


display:grid;

grid-template-columns:1fr 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:#F7FAFF;


border-radius:18px;


border:

1px solid #E2E8F0;


transition:.35s;


}



.contact-card:hover{


border-color:#5DADE2;

transform:translateX(8px);


}



.contact-icon{


width:55px;

height:55px;


border-radius:50%;


background:

linear-gradient(
135deg,
#1E5EFF,
#5DADE2
);


display:flex;

align-items:center;

justify-content:center;


font-size:25px;


color:#fff;


}



.contact-card h3{


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

font-size:20px;

margin-bottom:5px;


}



.contact-card a{


color:#1E5EFF;

font-weight:600;


}



.contact-card p{


margin:0;

font-size:15px;


}





/* CONTACT FORM */


.contact-form-wrapper{


background:

linear-gradient(
135deg,
#06152D,
#0B1F3A
);


padding:40px;

border-radius:25px;


}



.contact-form{


display:grid;

gap:18px;


}



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


width:100%;

padding:16px 20px;


border-radius:12px;


border:none;


outline:none;


font-size:16px;


background:#fff;


color:#334155;


}



.form-group textarea{


resize:none;


}



.contact-form .primary-btn{


border:none;

width:fit-content;


}







/* GOOGLE MAP */


.map-wrapper{


margin-top:50px;


border-radius:25px;


overflow:hidden;


}



.map-wrapper iframe{


width:100%;

height:400px;


border:0;


}








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


#footer{


background:#06152D;


padding:80px 0 0;


color:#CBD5E1;


}



.footer-grid{


display:grid;

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

gap:40px;


}




.footer-logo{


font-family:'Cormorant Garamond',serif;

font-size:38px;

font-weight:700;

color:#fff;


}



.footer-logo span{


color:#5DADE2;


}



.footer-about p{


margin-top:20px;

color:#CBD5E1;


}




#footer h3{


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

font-size:20px;

color:#fff;

margin-bottom:25px;


}



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


display:grid;

gap:12px;


}



.footer-links a{


color:#CBD5E1;

transition:.3s;


}



.footer-links a:hover{


color:#5DADE2;


}



.footer-services li{


color:#CBD5E1;


}



.footer-contact p{


margin-bottom:12px;


}




.footer-social{


display:flex;

gap:10px;

margin-top:20px;


}



.footer-social a{


padding:10px 15px;


border-radius:30px;


background:

rgba(255,255,255,.1);


color:#fff;


font-size:14px;


transition:.3s;


}



.footer-social a:hover{


background:#1E5EFF;


}




.footer-bottom{


margin-top:60px;


padding:25px 0;


border-top:

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


text-align:center;


}



.footer-bottom p{


font-size:14px;


}







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


.floating-whatsapp{


position:fixed;


right:25px;

bottom:90px;


width:60px;

height:60px;


border-radius:50%;


background:#25D366;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;


color:#fff;


z-index:999;


box-shadow:

0 15px 35px rgba(37,211,102,.4);


transition:.3s;


}



.floating-whatsapp:hover{


transform:scale(1.1);


}







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


#backToTop{


position:fixed;


right:25px;

bottom:25px;


width:50px;

height:50px;


border:none;


border-radius:50%;


background:

linear-gradient(
135deg,
#1E5EFF,
#123A9A
);


color:#fff;


font-size:22px;


cursor:pointer;


opacity:0;


visibility:hidden;


transition:.4s;


z-index:999;


}



#backToTop.show{


opacity:1;


visibility:visible;


}







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


@media(max-width:992px){


.gallery-grid{


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


}



.contact-grid{


grid-template-columns:1fr;


}



.footer-grid{


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


}


}







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


@media(max-width:600px){


.gallery-grid{


grid-template-columns:1fr;


}



.gallery-item{


height:280px;


}



.contact-form-wrapper{


padding:25px;


}



.footer-grid{


grid-template-columns:1fr;


}



.floating-whatsapp{


width:55px;

height:55px;


right:18px;


}



#backToTop{


right:18px;


}



}

/*==================================================
    MOBILE NAVIGATION
==================================================*/


@media(max-width:992px){


.header-buttons{

display:none;

}



#menu-btn{

display:block;

}



#navbar{


position:fixed;

top:0;

right:-100%;


width:300px;

height:100vh;


background:

linear-gradient(
180deg,
#06152D,
#0B1F3A
);


padding:120px 40px;


transition:.4s;


z-index:999;


}



#navbar.active{


right:0;


}



#navbar ul{


display:flex;

flex-direction:column;

gap:30px;


}



#navbar a{


font-size:18px;


}



/* MOBILE MENU CLOSE EFFECT */


#menu-btn.active span:nth-child(1){


transform:rotate(45deg) translate(6px,6px);


}



#menu-btn.active span:nth-child(2){


opacity:0;


}



#menu-btn.active span:nth-child(3){


transform:rotate(-45deg) translate(6px,-6px);


}



#menu-btn span{


transition:.3s;


}


}








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


@media(max-width:992px){


.hero-content{


grid-template-columns:1fr;


padding-top:150px;

text-align:center;


}



.hero-text p{


margin-left:auto;

margin-right:auto;


}



.hero-buttons{


justify-content:center;


}



.hero-features{

display:grid;

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

gap:20px;

margin-bottom:80px;

}



.hero-card{


max-width:500px;

margin:auto;


}



.hero-card ul{


text-align:left;


}



}



@media(max-width:600px){


h1{


font-size:42px;


}



h2{


font-size:34px;


}



h3{


font-size:24px;


}



p{


font-size:15px;


}



#hero{


min-height:auto;

padding-bottom:100px;


}



.hero-content{


padding-top:130px;


}



.hero-text h1{


line-height:1.15;


}



.hero-buttons{


flex-direction:column;


}



.hero-buttons a{


width:100%;


}



.hero-features{


display:grid;

grid-template-columns:1fr;


}



.feature p{

margin:0;

font-size:17px;

line-height:1.5;

}



.hero-card{


padding:30px 25px;


}



.scroll-down{


display:none;


}


}








/*==================================================
    GLOBAL ANIMATION POLISH
==================================================*/


.service-card,
.why-card,
.gallery-item,
.about-item,
.contact-card{


will-change:transform;


}




/*==================================================
    IMAGE PERFORMANCE
==================================================*/


img{


content-visibility:auto;


}






/*==================================================
    ACCESSIBILITY
==================================================*/


button,
a{


-webkit-tap-highlight-color:transparent;


}



:focus-visible{


outline:

3px solid #5DADE2;


outline-offset:4px;


}








/*==================================================
    PREMIUM GLASS EFFECTS
==================================================*/


.hero-card,
.feature{


backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);


}








/*==================================================
    DARK BLUE PREMIUM GRADIENT HELPERS
==================================================*/


.dark-gradient{


background:

linear-gradient(
135deg,
#06152D,
#1E5EFF
);


}



.blue-gradient{


background:

linear-gradient(
135deg,
#1E5EFF,
#5DADE2
);


}








/*==================================================
    SMOOTH SECTION TRANSITIONS
==================================================*/


section{


scroll-margin-top:90px;


}








/*==================================================
    SMALL DEVICE FIXES
==================================================*/


@media(max-width:380px){


.logo{


font-size:30px;


}



.hero-text h1{


font-size:36px;


}



.primary-btn,
.secondary-btn{


padding:13px 22px;


}



}