:root{
    --primary: #4CAF50; /* green */
    --accent: #FF9800;  /* orange */
    --bg: #f7fbf7;
    --muted: #666;
    --card: #fff;
    --glass: rgba(255,255,255,0.7);
    --round: 12px;
    --shadow: 0 8px 24px rgba(0,0,0,0.08);
  }

  /* .course-card {
    position: relative;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  } */

  .course-card {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }

  .course-card:hover {
    transform: translateY(-5px);
  }
  
  .read-more-btn .info-card{
    display: none;
  }
  /* .read-more-btn {
    margin-top: 10px;
    padding: 6px 12px;
    border: none;
    background: #4CAF50;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
  } */

  .video-list {
    display: flex;
    flex-direction: column;   /* one below the other */
    gap: 20px;
    align-items: center;
  }
  
  .video-list video {
    width: 100%;
    max-width: 400px;   /* good for desktop */
    height: auto;
    border-radius: 12px;
  }
  

  .indent {
     text-indent: 5%;
  }

  .read-more-btn {
    margin-top: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #4f46e5;
    color: white;
    cursor: pointer;
  }
  
  .read-more-btn:hover {
    background: #45a049;
  }
  
  
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #f8fff8 0%, var(--bg) 100%);
    color:#222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }
  
  /* header */
  .site-header{background:linear-gradient(90deg,var(--primary),#3fa84a);color:#fff;padding:18px 8px;position:sticky;top:0;z-index:999;box-shadow:0 6px 14px rgba(0,0,0,0.06);}
  .header-inner{max-width:1100px;margin:0 auto;display:flex;gap:12px;align-items:center}
  .logo-wrap{flex:0 0 160px}
  .header-text h1{font-size:1.35rem;margin-bottom:4px}
  .tag{opacity:0.92;font-weight:500}
  
  /* whatsapp CTA */
  .whatsapp-btn{
    background:#fff;color:var(--primary);padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.08);
  }
  .header-cta{margin-left:auto}
  
  /* nav */
  .navbar{display:flex;gap:12px;justify-content:center;padding:10px;background:rgba(255,255,255,0.85);box-shadow:0 4px 10px rgba(0,0,0,0.03);position:sticky;top:68px;z-index:998}
  .navbar a{color:var(--primary);text-decoration:none;padding:8px 12px;font-weight:600;border-radius:10px}
  
  /* hero */
  .hero{padding:46px 16px}
  .hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center}
  .hero-left h2{font-size:2rem;margin-bottom:12px;color:#123}
  .hero-left p{color:var(--muted);margin-bottom:16px}
  .btn{display:inline-block;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
  .btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 30px rgba(76,175,80,0.18)}
  .btn.ghost{background:transparent;border:2px solid rgba(0,0,0,0.06);color:#333}
  
  /* animated card */
  .card-animate{background:linear-gradient(180deg,var(--card),#fff);padding:18px;border-radius:16px;box-shadow:var(--shadow);transform:translateY(0);animation:float 6s ease-in-out infinite}
  .card-animate .badge{background:var(--accent);display:inline-block;padding:6px 8px;border-radius:8px;color:#fff;font-weight:700;margin-bottom:8px}
  @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
  
  /* sections */
  .section{padding:40px 16px}
  .container{max-width:1100px;margin:0 auto}
  .section h2{font-size:1.6rem;margin-bottom:10px}
  .section p.muted,.muted{color:var(--muted)}
  
  /* course grid */
  .course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
  .course-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow);transition:transform .28s ease}
  .course-card:hover{transform:translateY(-8px)}
  
  /* gallery */
  .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:16px}
  .gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.06)}
  
  /* video slider */
  .video-slider{display:flex;gap:1px;overflow:hidden;scroll-snap-type:x mandatory;padding:8px 0}
  .video-item{min-width:320px;flex:0 0 70%;scroll-snap-align:center;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
  .video-item iframe{width:50%;height:220px;border:0;display:block}
  .slider-controls{display:flex;gap:1px;justify-content:center;margin-top:12px}
  
  /* testimonials */
  .testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
  .testimonial{background:linear-gradient(180deg,var(--card),#fff);padding:16px;border-radius:12px;box-shadow:var(--shadow)}
  .testimonial cite{display:block;margin-top:8px;font-size:.9rem;color:var(--muted)}
  
  /* achievements */
  .achievements{list-style:disc;margin-left:18px;margin-top:12px;color:var(--muted)}
  
  /* form */
  .narrow{max-width:700px;margin:0 auto}
  .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
  input,select,textarea{padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);font-size:1rem}
  textarea{min-height:90px;resize:vertical}
  .form-actions{display:flex;gap:10px;margin-top:10px}
  .form-msg{margin-top:10px;color:var(--primary);font-weight:700}
  
  /* footer */
  .site-footer{background:linear-gradient(90deg,var(--primary),#3fa84a);color:#fff;padding:18px;margin-top:28px}
  .small{font-size:.85rem}
  .muted a{color:#fff;text-decoration:underline}
  
  /* responsive */
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr}
    .video-item iframe{height:200px}  /* changed from 180 to 200 for increasing height of video frame 02/01/25 */
    .header-inner{flex-direction:column;align-items:flex-start;gap:8px}
    .navbar{overflow-x:auto;white-space:nowrap;padding:8px}
  }
  
  .info-card {
    background: #ffffff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  }
  
  .info-card h3 {
    color: #2e7d32;
    margin-bottom: 10px;
  }
  
  .info-card ul {
    padding-left: 20px;
  }
  
  .highlight-card {
    background: #e8f5e9;
    border-left: 5px solid #4caf50;
  }