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

body{background:#0f172a;color:#fff}

/* NAVBAR */
header{
 position:fixed;width:100%;top:0;
 display:flex;justify-content:space-between;
 padding:15px 50px;
 background:rgba(0,0,0,0.4);
 backdrop-filter:blur(10px);
 z-index:1000;
}

header img{height:50px}

/* HERO */
.hero{
 height:100vh;
 background:url('images/hero.jpg') center/cover no-repeat;
 position:relative;
 display:flex;align-items:center;justify-content:center;
}

.hero::after{
 content:"";
 position:absolute;inset:0;
 background:linear-gradient(135deg,#1e3a8a,#9333ea,#ec4899);
 opacity:0.8;
}

.hero-content{
 position:relative;
 text-align:center;
}

.hero h1{font-size:50px;animation:fadeUp 1.2s}

.btn{
 margin-top:20px;padding:12px 30px;
 border-radius:30px;border:none;
 background:#fff;color:#000;
 cursor:pointer;
}

/* SECTION */
.section{padding:80px 50px;text-align:center}

/* CARDS */
.cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}

.card{
 background:rgba(255,255,255,0.1);
 backdrop-filter:blur(15px);
 padding:20px;border-radius:20px;width:280px;
 transition:0.3s;
}

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

.card img{width:100%;border-radius:15px}

/* BEFORE AFTER */
.compare{
 position:relative;width:300px;
}

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

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

/* REVIEWS */
.review{
 background:#111;padding:20px;margin:10px;
 border-radius:15px;
}

/* FLOAT BUTTONS */
.whatsapp, .call{
 position:fixed;right:20px;
 padding:15px;border-radius:50%;
 color:#fff;text-decoration:none;
}

.whatsapp{bottom:20px;background:#25d366}
.call{bottom:80px;background:#ff4ecd}

/* ANIMATION */
.fade{
 opacity:0;transform:translateY(30px);
 transition:1s;
}
.fade.show{opacity:1;transform:translateY(0)}

@keyframes fadeUp{
 from{opacity:0;transform:translateY(40px)}
 to{opacity:1}
}