CSS
/* ===== GOOGLE FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#eef5ff;
color:#222;
}
/* ===== HEADER ===== */
header{
position:sticky;
top:0;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:rgba(255,255,255,.9);
backdrop-filter:blur(12px);
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.logo{
font-size:32px;
font-weight:800;
color:#0d6efd;
}
.logo span{
color:#00b894;
}
nav a{
text-decoration:none;
color:#333;
margin-left:25px;
font-weight:600;
transition:.3s;
}
nav a:hover{
color:#00b894;
}
/* ===== HERO ===== */
.hero{
min-height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80') center/cover;
}
.hero h1{
font-size:60px;
font-weight:800;
}
.hero p{
margin:20px 0;
font-size:22px;
}
.btn{
display:inline-block;
padding:16px 40px;
border-radius:50px;
background:linear-gradient(45deg,#00b894,#0d6efd);
color:#fff;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.btn:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(13,110,253,.35);
}
/* ===== SECTION ===== */
section{
padding:80px 8%;
}
.title{
text-align:center;
font-size:40px;
margin-bottom:45px;
color:#0d6efd;
}
/* ===== SERVICES ===== */
.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}
.card{
background:rgba(255,255,255,.9);
backdrop-filter:blur(15px);
border-radius:20px;
padding:35px;
text-align:center;
transition:.4s;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.card:hover{
transform:translateY(-10px);
}
.card i{
font-size:55px;
color:#00b894;
margin-bottom:20px;
}
.card h3{
color:#0d6efd;
margin-bottom:15px;
}
/* ===== FOOTER ===== */
footer{
background:#0d6efd;
color:#fff;
text-align:center;
padding:40px;
}
footer h2{
margin-bottom:10px;
}