body {
  margin:0;
  font-family:Arial;
  background:linear-gradient(to bottom, #e0f7ff, #ffffff);
}

/* TOPBAR */
.topbar {
  background:#023e8a;
  color:white;
  display:flex;
  justify-content:space-between;
  padding:10px 15px;
}

.topbar a {
  background:#25D366;
  padding:6px 12px;
  color:white;
  text-decoration:none;
  border-radius:5px;
}

/* NAVBAR */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0077b6;
  padding:10px 20px;
  color:white;
  position:sticky;
  top:0;
}

.logo {
  display:flex;
  align-items:center;
}

.logo img {
  width:40px;
  margin-right:10px;
}

nav {
  display:flex;
}

nav a {
  margin-left:15px;
  color:white;
  text-decoration:none;
  position:relative;
}

/* NAV HOVER */
nav a::after {
  content:'';
  position:absolute;
  width:0%;
  height:2px;
  background:#90e0ef;
  left:0;
  bottom:-5px;
  transition:0.3s;
}

nav a:hover::after {
  width:100%;
}

/* MOBILE MENU */
.menu-toggle {
  display:none;
  font-size:25px;
}

/* HERO */
.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px;
  flex-wrap:wrap;
}

.hero-left {
  width:45%;
}

.hero-left h1 {
  color:#023e8a;
}

.call-btn {
  display:inline-block;
  margin-top:10px;
  background:#25D366;
  padding:10px 20px;
  color:white;
  border-radius:20px;
  text-decoration:none;
}

.hero-right img {
  width:100%;
  max-width:350px;
  animation:move 3s infinite alternate;
}

@keyframes move {
  from {transform:translateX(0);}
  to {transform:translateX(20px);}
}

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

.services h2 {
  color:#023e8a;
}

.service-container {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.card {
  width:45%;
  margin:10px;
  padding:15px;
  background:#caf0f8;
  border-radius:10px;
  transition:0.3s;
}

.card:hover {
  transform:translateY(-8px);
  background:#90e0ef;
}

.card h3 {
  font-size:14px;
  color:#023e8a;
}

.card a {
  display:block;
  margin-top:10px;
  background:#0077b6;
  padding:8px;
  color:white;
  text-decoration:none;
  border-radius:5px;
}

/* FOOTER */
footer {
  background:#023e8a;
  color:white;
  text-align:center;
  padding:20px;
}

footer a {
  color:#90e0ef;
}

/* MOBILE */
@media(max-width:768px){

  .menu-toggle {
    display:block;
  }

  nav {
    display:none;
    flex-direction:column;
    background:#0077b6;
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    text-align:center;
  }

  nav a {
    padding:10px;
  }

  .hero {
    flex-direction:column;
    text-align:center;
  }

  .hero-left, .hero-right {
    width:100%;
  }

  .card {
    width:90%;
  }
}

.hero-right img {
  width:100%;
  max-width:350px;
  border-radius:10px;
  transition:0.5s ease-in-out;
}

.hero-right img {
  transition:0.5s;
}

/* HERO */
.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px;
  flex-wrap:wrap;
}

/* LEFT IMAGE */
.hero-left {
  width:45%;
  text-align:center;
}

.hero-left img {
  width:100%;
  max-width:350px;
  border-radius:10px;
  transition:0.5s;
}

/* RIGHT CONTENT */
.hero-right {
  width:45%;
}

.hero-right h1 {
  color:#023e8a;
}

/* INFO BOX */
.hero-info {
  margin:15px 0;
  background:#e0f7ff;
  padding:15px;
  border-radius:10px;
}

.hero-info p {
  margin:6px 0;
  color:#023e8a;
  font-weight:bold;
}

/* BUTTON */
.call-btn {
  display:inline-block;
  background:#25D366;
  padding:10px 20px;
  color:white;
  text-decoration:none;
  border-radius:20px;
}
/* SERVICE TEXT STYLE */
.card h3 {
  font-size:15px;
  color:#023e8a;
}

/* BOLD HIGHLIGHT 🔥 */
.card h3 span {
  display:block;
  font-size:13px;
  color:#0077b6;
  font-weight:bold;
  margin-top:4px;
}

/* CARD IMPROVE */
.card {
  width:45%;
  margin:10px;
  padding:15px;
  background:linear-gradient(135deg, #caf0f8, #ade8f4);
  border-radius:12px;
  transition:0.3s;
}

/* HOVER EFFECT 🔥 */
.card:hover {
  transform:translateY(-8px) scale(1.03);
  background:#90e0ef;
}

/* ABOUT PAGE */
.about {
  padding:30px;
  text-align:center;
}

.about h1 {
  color:#023e8a;
  margin-bottom:10px;
}

/* GRID */
.about-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:15px;
  margin-top:20px;
}

/* BOX STYLE 🔥 */
.box {
  background:linear-gradient(135deg, #caf0f8, #ade8f4);
  padding:20px;
  border-radius:12px;
  transition:0.3s;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.box:hover {
  transform:translateY(-8px);
  background:#90e0ef;
}

.box h3 {
  color:#023e8a;
  margin-bottom:8px;
}

/* MOBILE */
@media(max-width:768px){
  .about-grid {
    grid-template-columns:1fr;
  }
}
@media(max-width:768px){

  /* HERO FIX */
  .hero {
    flex-direction:column;
    padding:20px 15px;
    text-align:center;
  }

  /* IMAGE FIRST (TOP) */
  .hero-left {
    width:100%;
    order:1;
  }

  .hero-left img {
    width:90%;
    max-width:280px;
    margin:auto;
    display:block;
  }

  /* CONTENT BELOW IMAGE */
  .hero-right {
    width:100%;
    order:2;
    margin-top:15px;
  }

  .hero-right h1 {
    font-size:24px;
    line-height:1.3;
  }

  .hero-right p {
    font-size:14px;
  }

  /* INFO BOX FIX (GAP REMOVE 🔥) */
  .hero-info {
    margin:10px auto;
    padding:12px;
    width:90%;
  }

  /* TEXT ALIGN FIX */
  .hero-info p {
    font-size:13px;
    margin:5px 0;
    text-align:left;
  }

  /* BUTTON FIX */
  .call-btn {
    margin-top:10px;
    padding:10px 18px;
  }

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

  .service-container {
    gap:8px;
  }

  .card {
    width:95%;
    margin:5px auto;
    padding:12px;
  }

  .card h3 {
    font-size:14px;
  }

  .card a {
    padding:7px;
    font-size:13px;
  }

}