*{box-sizing:border-box}
body{
  font-family: Poppins, Arial, sans-serif;
  background:#f2f4f8;
  color:#222;
}


.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  background:#0b66c3;
  color:#fff;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo img{height:100px}

nav a{
  color:#fff;
  margin-left:15px;
  text-decoration:none;
  font-weight:600;
}
nav a:hover{opacity:.85}

/* Hero */
.hero{
  position:relative;
}
.hero-img{
  width:100%;
  height:340px;
  object-fit:cover;
}
.hero-content{
  position:absolute;
  bottom:20px;
  left:20px;
  color:#fff;
  max-width:400px;
}
.btn{
  display:inline-block;
  margin-top:8px;
  padding:10px 18px;
  background:#ff9800;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}

/* Sections */
.about,.contact{padding:35px 20px;max-width:1000px;margin:auto}

/* Courses Grid */
.courses{
  padding:25px;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.course-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden;
}
.course-card img{
  width:100%;
  height:160px;
  object-fit:cover;
}
.course-card h3{margin:10px 12px}
.course-card p{margin:0 12px 12px}

/* Contact */
.contact-grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr 1fr;
}
.contact-img{
  width:100%;
  border-radius:10px;
  margin-top:10px;
}
form{
  display:grid;
  gap:10px;
}
input,textarea{
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
}
button{
  padding:10px;
  border:none;
  border-radius:8px;
  background:#0b66c3;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* Footer */
footer{
  text-align:center;
  padding:12px;
  background:#0b66c3;
  color:#fff;
  margin-top:25px;
}

/* Mobile */
@media(max-width:768px){
  .topbar{flex-direction:column;gap:8px}
  .hero-img{height:260px}
  .hero-content{position:static;padding:14px;background:rgba(0,0,0,.55);border-radius:10px;margin:10px}
  .contact-grid{grid-template-columns:1fr}
}
.hero-img{height:420px;object-fit:cover}
.carousel-caption{background:rgba(0,0,0,.55);padding:18px;border-radius:12px}
.course-card{border-radius:14px;overflow:hidden}
.course-card img{height:150px;object-fit:cover}
@media(max-width:768px){
  .hero-img{height:300px}
}

/* Common Floating Button Style */
.whatsapp-float,
.call-float,
.email-float,
.facebook-float,
.instagram-float{
  position:fixed;
  right:18px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index:9999;
  transition:.2s;
}

.whatsapp-float img,
.call-float img,
.email-float img,
.facebook-float img,
.instagram-float img{
  width:30px;
  height:30px;
}

.whatsapp-float:hover,
.call-float:hover,
.email-float:hover,
.facebook-float:hover,
.instagram-float:hover{
  transform:scale(1.08);
}

/* Individual Colors + Positions */
.call-float{ bottom:150px; background:#0b66c3; }
.whatsapp-float{ bottom:90px; background:#25d366; }
.email-float{ bottom:30px; background:#ff9800; }
.facebook-float{ bottom:210px; background:#1877f2; }
.instagram-float{ bottom:270px; background:#d62976; }