*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
body{background:#f5f7fb;color:#333}
.container{width:90%;max-width:1200px;margin:auto}

/* HEADER */
.header{background:#000000;position:fixed;top:0;width:100%;z-index:1000;box-shadow:0 5px 20px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.logo img{height:45px}
.menu a{margin:0 15px;color:#ffffff;text-decoration:none;font-weight:500}
.btn{background:linear-gradient(45deg,#20c997,#4dabf7);padding:10px 22px;border-radius:30px;color:#000000;text-decoration:none}
.menu-btn{display:none;font-size:24px;cursor:pointer}

/* HERO SECTION */
.hero {
  height: 90vh;
  background: url("image/WhatsApp\ Image\ 2025-12-30\ at\ 16.10.54.jpeg") no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: #fff;
}

/* Overlay for readability */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* background: linear-gradient(
    120deg,
    rgba(77, 171, 247, 0.85),
    rgba(32, 201, 151, 0.85)
  ); */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

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

.hero .btn {
  display: inline-block;
  padding: 12px 30px;
  background: #ffffff;
  color: #20c997;
  text-decoration: none;
  font-weight: 600;
  border-radius: 30px;
  transition: 0.3s ease;
}

.hero .btn:hover {
  background: #20c997;
  color: #fff;
}


/* ABOUT */
.about{padding:100px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-img img{width:100%;border-radius:20px;height: 250px;}
.about-text h2{margin-bottom:15px}

/* SERVICES */
.services{padding:80px 0;background:#fff}
.center{text-align:center;margin-bottom:50px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{background:#f9fafc;padding:35px;border-radius:20px;text-align:center;
transition:.4s;cursor:pointer}
.card i{font-size:40px;color:#4dabf7;margin-bottom:15px}
.card:hover{transform:scale(1.08);box-shadow:0 15px 40px rgba(0,0,0,.15)}

/* FOOTER */
.footer{background:#0b0f1a;color:#ccc;padding:60px 0}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: flex-start;
}

.footer-grid > div{
  justify-self: center;      
  text-align: left;
  max-width: 280px;          
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;                
  align-items: flex-start;
  justify-items: center;    
  text-align: center;       
}
@media(max-width:992px){
  .footer-grid{grid-template-columns:1fr}
}
.footer-brand{
  max-width: 280px;
}

.footer-logo{
  width: 140px;       
  margin-bottom: 15px;
}

.footer h3{
  color:#fff;
  margin-bottom: 10px;
}

.footer a{display:block;color:#ccc;margin:8px 0;text-decoration:none}
.copy{text-align:center;margin-top:30px;border-top:1px solid #222;padding-top:15px}

/* FLOAT */
.float{position:fixed;right:20px;padding:14px;border-radius:50%;color:#fff;font-size:20px;z-index:999}
.whatsapp{bottom:90px;background:#25d366}
.call{bottom:30px;background:#007bff}

/* RESPONSIVE */
@media(max-width:992px){
  .menu{position:absolute;top:80px;left:0;background:#000000;width:100%;display:none;flex-direction:column}
  .menu a{margin:15px}
  .menu-btn{display:block}
  .about-grid,.service-grid,.footer-grid{grid-template-columns:1fr}
}