/* RESET */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:'Poppins',sans-serif;
}

body{
 background:#f9f9f9;
 color:#333;
}

/* TOP BAR */
.top-bar{
 background:linear-gradient(90deg,#ff4da6,#6f42c1);
 color:#fff;
 text-align:center;
 padding:8px;
 font-size:14px;
}

/* HEADER */
.header{
 position:sticky;
 top:0;
 z-index:1000;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:15px 20px;
 background:#fff;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.logo{
 font-size:22px;
 font-weight:bold;
 color:#6f42c1;
}

nav a{
 margin:0 10px;
 text-decoration:none;
 color:#333;
 font-weight:500;
 transition:0.3s;
}

nav a:hover{
 color:#ff4da6;
}

/* HERO */
.hero{
 height:90vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
 url('../images/bg.jpg');
 background-size:cover;
 color:#fff;
}

.hero h1{
 font-size:40px;
 margin-bottom:10px;
}

.hero p{
 font-size:18px;
 margin-bottom:20px;
}

.btn{
 padding:12px 25px;
 border:none;
 border-radius:30px;
 background:linear-gradient(45deg,#ff4da6,#6f42c1);
 color:#fff;
 text-decoration:none;
 margin:5px;
 transition:0.3s;
}

.btn:hover{
 transform:scale(1.1);
}

/* SLIDER */
.swiper{
 width:90%;
 margin:auto;
 margin-top:-80px;
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.swiper img{
 width:100%;
 height:300px;
 object-fit:cover;
}

/* SERVICES */
.services{
 text-align:center;
 padding:50px 20px;
}

.services h2{
 font-size:30px;
 margin-bottom:20px;
 color:#6f42c1;
}

.card{
 display:inline-block;
 width:280px;
 margin:15px;
 padding:20px;
 background:#fff;
 border-radius:15px;
 box-shadow:0 5px 20px rgba(0,0,0,0.1);
 transition:0.3s;
}

.card:hover{
 transform:translateY(-10px);
}

.card h3{
 color:#28c76f;
 margin-bottom:10px;
}

/* GALLERY */
.gallery{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 padding:30px;
}

.gallery img{
 width:280px;
 margin:10px;
 border-radius:15px;
 transition:0.3s;
}

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

/* TESTIMONIAL */
.testimonials{
 padding:50px;
 text-align:center;
 background:#fff;
}

/* FOOTER */
footer{
 background:#111;
 color:#fff;
 text-align:center;
 padding:20px;
}

/* WHATSAPP */
.whatsapp{
 position:fixed;
 bottom:20px;
 right:20px;
 background:#25D366;
 color:#fff;
 padding:15px;
 border-radius:50%;
 font-size:20px;
}

/* MOBILE */
@media(max-width:768px){
 .hero h1{font-size:28px;}
 .card{width:90%;}
}

/* LOADER */
#loader{
 position:fixed;
 width:100%;
 height:100%;
 background:#fff;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index:9999;
}

.spinner{
 width:50px;
 height:50px;
 border:5px solid #eee;
 border-top:5px solid #ff4da6;
 border-radius:50%;
 animation:spin 1s linear infinite;
}

@keyframes spin{
 100%{transform:rotate(360deg);}
}

.header.scrolled{
 background:#fff;
 box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.stats{
 display:flex;
 justify-content:center;
 text-align:center;
 padding:40px;
 background:#6f42c1;
 color:#fff;
}

.stats div{
 margin:20px;
}

.count{
 font-size:40px;
 color:#ff4da6;
}

.before-after{
 text-align:center;
 padding:50px;
}

.compare{
 position:relative;
 width:300px;
 margin:auto;
}

.compare img{
 width:100%;
 border-radius:10px;
}

.compare .after{
 position:absolute;
 top:0;
 left:0;
 width:50%;
 overflow:hidden;
}

html{
 scroll-behavior:smooth;
}

.card:hover{
 box-shadow:0 0 20px #ff4da6;
}

.btn{
 position:relative;
 overflow:hidden;
}

.btn::after{
 content:'';
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:-100%;
 background:rgba(255,255,255,0.3);
 transition:0.3s;
}

.btn:hover::after{
 left:100%;
}

.call-btn{
 position:fixed;
 bottom:20px;
 left:20px;
 background:#28c76f;
 color:#fff;
 padding:12px 20px;
 border-radius:30px;
 text-decoration:none;
 font-weight:bold;
 box-shadow:0 5px 15px rgba(0,0,0,0.2);
}