:root {
    --primary: #963D97!important;
    --primary-accent: #FBD46D;
    --secondary: #F76B8A;
    --secondary-accent: #A8D8EA;
    --success: #43AA8B;
    --dark: #22223B;
    --muted: #6B7280;
    --card: #FFFFFF;
    --bg: #F6F6F6;
  }

    body { margin:0; font-family:'Poppins',sans-serif; background:var(--bg); color:var(--dark); line-height:1.7; }

    nav {
      background:#4F8A8B;
      box-shadow:0 4px 18px rgba(0,0,0,0.06);
      padding:14px 40px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:sticky;
      top:0;
      z-index:100;
    }

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

    nav a {
      text-decoration:none;
      margin:0 14px;
      font-weight:500;
      color: #fff;
      position: relative;
      transition: color 0.2s;
    }

    nav a::after {
      content:"";
      position:absolute;
      left:0;
      bottom:-6px;
      width:0;
      height:2px;
      background: #FBD46D;
      transition:0.3s ease;
    }

    nav a:hover::after { width:100%; }
    nav a:hover { color:#FBD46D }

    header {
      position:relative;
      background: url('../Data/background_img.jpeg') center/cover no-repeat;
      min-height: 500px;
      padding:140px 20px;
      text-align:center;
      overflow: hidden;
    }

    header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(250,250,245,0.7); /* or any color/opacity */
      z-index: 0;
      pointer-events: none;
    }
    header > * {
      position: relative;
      z-index: 1;
    }

    .hero-logo { max-width:190px; margin-bottom:22px; }

    header h1 {
      font-size:3.2rem;
      margin-bottom:14px;
      font-weight:600;
    }

  
  header h1 img {
    position: relative;
    z-index: 2;
  }

    header p {
      max-width:720px;
      margin:0 auto 10px;
      font-size:1.15rem;
      color:#333;
    }

    .hero-sub, .trust-line {
      font-size:0.95rem;
      color:#444;
    }

    .hero-sub {
      font-size: 1.5rem;
      color: var(--secondary);
      margin-bottom: 18px;
      font-weight: 500;
    }

    .hero-features {
      list-style: disc inside;
      max-width: 500px;
      margin: 18px auto 24px auto;
      padding: 0;
      color: #444;
      text-align: left;
      font-size: 1.05rem;
    }

    .hero-features li::marker {
      margin-top: 80px;
      margin-bottom: 8px;
      color: var(--secondary);
    }

    .btn {
      display:inline-block;
      margin-top:28px;
      padding:14px 36px;
      background:var(--primary);
      color:#fff;
      text-decoration:none;
      border-radius:10px;
      font-weight:600;
      box-shadow:0 8px 22px rgba(255,122,24,0.35);
      transition:0.3s ease;
    }

    .btn:hover {
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(255,122,24,0.45);
    }

    section { padding:30px 20px; max-width:1100px; margin:auto; }

    .section-title {
      text-align:center;
      margin-bottom:28px;
    }

    .section-title h2 {
      font-size:2.1rem;
      position:relative;
      display:inline-block;
    }

    .section-title h2::after {
      content:"";
      display:block;
      width:60px;
      height:3px;
      background:var(--primary);
      margin:12px auto 0;
      border-radius:3px;
    }

    .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

.card {
  max-width: 320px;         /* or use max-width: 320px; for responsive */
  min-height: 220px;        /* or min-height: 220px; for flexible height */
  padding: 15px 10px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  transition: box-shadow 0.2s;
  margin: 12px;
  overflow: hidden;
}

.cards-container {
  display: flex;        /* or use display: grid; for grid layout */
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

    .card:hover { transform:translateY(-10px); }

    .card h3 { margin-top:40px; 
      margin-bottom:5px;
      color:var(--primary);
      align-items: center;
    }

    form { max-width:620px; margin:0 auto; }

    form input, form textarea {
      width:100%;
      padding:14px;
      margin-bottom:14px;
      border-radius:10px;
      border:1px solid #d1d5db;
      font-family:'Poppins',sans-serif;
    }

    form input:focus, form textarea:focus {
      outline:none;
      border-color:var(--primary);
      box-shadow:0 0 0 3px var(--primary-soft);
    }

    form button {
      width:100%;
      padding:14px;
      border:none;
      background:var(--primary);
      color:#fff;
      font-size:1rem;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
    }

    figure { margin:0; }

    figure img {
      width:100%;
      border-radius:14px;
      box-shadow:0 8px 22px rgba(0,0,0,0.12);
    }

    figcaption {
      font-size:0.85rem;
      color:var(--muted);
      margin-top:6px;
      text-align:center;
    }

    footer {
      background:#1f1f1f;
      color:#fff;
      padding:50px 20px;
      text-align:center;
    }

    footer p { margin:6px 0; 
               font-size:0.9rem; 
            }

    .card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-link .card {
  /* your card styles */
  transition: box-shadow 0.2s;
}
.card-link .card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  cursor: pointer;
}

 .camp-dates {
  text-align: center;
  margin-right: 0; /* ensures no extra indentation */
  padding-left: 0;
}
.camp-dates h4,
.camp-dates p {
  margin-left: 0;
  padding-left: 0;
  font-weight: bold;
  color:#6B7280;
}   

.camp-batches ol::before {
  content: "➤ ";
  color: #444; /* or your accent color */
  font-weight: bold;
  list-style: none;
  padding-left: 90;
  margin-left: 90;
  align-content: center;
}

.query-form {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  color:#6B7280;
}

.camp-batches{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}