*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html, body{
      width:100%;
      overflow-x:hidden;
    }

    img, video{
      max-width:100%;
      display:block;
    }

    .school-hero-video{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
    }

    .school-hero-bg-video{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }

    @media(max-width:1024px){
      .school-hero-video{
        height:45vh;
      }
    }

    @media(max-width:768px){
      .school-hero-video{
        height:38vh;
      }
    }

    /* second section */
    .hero{
      padding:120px 20px;
      background:linear-gradient(180deg,#ffffff,#f0f0f0);
      text-align:center;
      position:relative;
      overflow:hidden;
    }

    .hero-content{
      max-width:900px;
      margin:auto;
      position:relative;
      z-index:2;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#f5e7e3;
      color:#e64a19;
      padding:8px 18px;
      border-radius:25px;
      font-size:18px;
      margin-bottom:25px;
      flex-wrap:wrap;
      justify-content:center;
    }

    .hero h1{
      font-size:70px;
      font-weight:800;
      line-height:1.2;
      margin-bottom:20px;
      font-size:clamp(32px, 6vw, 70px);
    }

    .hero h1 span{
background:linear-gradient(90deg,#ff5a2c,#d7263d);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero p{
      color:#666;
      max-width:650px;
      margin:0 auto 40px;
      line-height:1.6;
      font-size:clamp(14px, 2vw, 25px);
    }

    .hero-buttons{
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn-primary{
      background:#f4511e;
      color:white;
      padding:14px 28px;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      transition:0.3s;
    }

    .btn-primary:hover{
      background:#d84315;
    }

    .btn-outline{
      border:2px solid #f4511e;
      color:#f4511e;
      padding:14px 28px;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      transition:0.3s;
    }

    .btn-outline:hover{
      background:#f4511e;
      color:white;
    }

    .floating-icons i{
      position:absolute;
      color:#f3cfc4;
      font-size:30px;
      animation:float 6s infinite ease-in-out;
    }

    .floating-icons i:nth-child(1){ top:20%; left:10%; }
    .floating-icons i:nth-child(2){ top:60%; left:15%; animation-delay:2s; }
    .floating-icons i:nth-child(3){ top:25%; right:15%; animation-delay:3s; }
    .floating-icons i:nth-child(4){ bottom:20%; right:20%; animation-delay:1s; }
    .floating-icons i:nth-child(5){ bottom:35%; left:40%; animation-delay:4s; }

    @keyframes float{
      0%{transform:translateY(0);}
      50%{transform:translateY(-20px);}
      100%{transform:translateY(0);}
    }

    @media(max-width:992px){
      .hero h1{ font-size:48px; }
      .hero p{ font-size:16px; }
    }

    @media(max-width:600px){
      .hero{ padding:90px 20px; }
      .hero h1{ font-size:34px; }
      .hero p{ font-size:15px; }
      .hero-buttons{
        flex-direction:column;
        gap:15px;
      }
    }

    /* section three */
    .features-section{
      background: #d71919;
      padding:80px 20px;
    }

    .container{
      max-width:1200px;
      width:100%;
      margin:auto;
      display:flex;
      justify-content:space-between;
      gap:40px;
    }

    .feature-box{
      text-align:center;
      color:white;
      flex:1;
      transition:all 0.4s ease;
    }

    .feature-box:hover{
      transform:scale(1.08);
    }

    .icon-box{
      width:70px;
      height:70px;
      background:#e53935;
      border-radius:15px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 20px;
      transition:all 0.4s ease;
    }

    .icon-box i{
      color:#ffd54f;
      font-size:28px;
      transition:all 0.4s ease;
    }

    .feature-box:hover .icon-box{
      box-shadow:0 0 15px rgba(255,215,0,0.8), 0 0 35px rgba(255,215,0,0.6);
      transform:scale(1.15);
    }

    .feature-box h3{
      font-size:22px;
      font-weight:700;
      margin-bottom:15px;
      transition:all 0.4s ease;
    }

    .feature-box p{
      font-size:15px;
      line-height:1.7;
      max-width:320px;
      margin:auto;
    }

    @media (max-width:992px){
      .container{
        flex-wrap:wrap;
      }
      .feature-box{
        flex:0 0 48%;
        margin-bottom:40px;
      }
    }

    @media (max-width:600px){
      .container{
        flex-direction:column;
        gap:40px;
      }
      .feature-box{
        flex:100%;
      }
    }

    /* section about us */
    .about-section{
      padding:90px 20px;
      background:#ffffff;
    }

    .about-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      align-items:center;
      gap:60px;
    }

    .about-image{ flex:1; }
    .about-image img{
      width:100%;
      border-radius:18px;
      display:block;
    }

    .about-content{ flex:1; }

    .about-content h2{
      font-size:50px;
      margin-bottom:10px;
      font-weight:700;
    }

    .about-content h2 span{ color:#c4151c; }

    .about-tagline{
      font-size:20px;
      color:#555;
      margin-bottom:15px;
    }

    .about-line{
      width:60px;
      height:3px;
      background:#c4151c;
      margin:15px 0 20px;
    }

    .about-text{
      font-size:19px;
      line-height:1.8;
      color:#555;
      margin-bottom:25px;
    }

    .about-features{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px 30px;
      margin-bottom:25px;
    }

    .feature{
      font-size:18px;
      color:#222;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .feature i{ color:#c4151c; }

    .about-btn{
      display:inline-block;
      background:linear-gradient(90deg, #e53935, #ff5722);
      color:white;
      padding:12px 26px;
      border-radius:25px;
      text-decoration:none;
      font-size:18px;
      transition:0.3s;
    }

    .about-btn:hover{ background:#b91515; }

    @media(max-width:992px){
      .about-container{
        flex-direction:column;
        gap:40px;
      }
    }

    @media(max-width:600px){
      .about-content h2{ font-size:28px; }
      .about-features{ grid-template-columns:1fr; }
    }

    /* level of school */
    .school-levels{
      padding:0 20px;
      background:#ffffff;
      text-align:center;
      margin-bottom:80px;
    }

    .levels-header h2{
      font-size:45px;
      margin-bottom:10px;
      margin-top:20px;
    }

    .levels-header span{ color: #e53935 }

    .levels-header p{
      color:#666;
      margin-bottom:15px;
      font-size:20px;
    }

    .underline{
      width:60px;
      height:3px;
      background:#2f4fa3;
      margin:0 auto 50px;
    }

    .levels-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      gap:20px;
      justify-content:center;
      flex-wrap:wrap;
    }

    .level-card{
      background: linear-gradient(
       135deg, #ff5a2c, #d7263d
      );
      border-radius:15px;
      overflow:hidden;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      transition:0.4s;
      opacity:0;
      color:white;
      flex:1 1 calc(25% - 20px);
      max-width:calc(25% - 20px);
    }

    .level-card img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .level-content{
      padding:25px;
      background:rgba(255,255,255,0.05);
      backdrop-filter:blur(5px);
    }

    .level-content h3{
      margin-bottom:10px;
      color:white;
      font-weight:600;
    }

    .level-content p{
      font-size:14px;
      line-height:1.6;
      color:#f3f3f3;
    }

    .card1{ transform:translateY(-80px); }
    .card2{ transform:translateY(80px); }
    .card3{ transform:translateY(-80px); }
    .card4{ transform:translateY(80px); }

    .level-card.show{
      opacity:1;
      transform:translateY(0);
      transition:all 0.9s ease;
    }

    @media(max-width:992px){
      .level-card{
        flex:1 1 calc(50% - 20px);
        max-width:calc(50% - 20px);
      }
    }

    @media(max-width:600px){
      .level-card{
        flex:1 1 100%;
        max-width:100%;
      }

      .levels-header h2{
        font-size:28px;
      }
    }

    /* counting section */
    .stats-section{
      background: linear-gradient(
      90deg, #e53935, #ff5722);
      padding:30px 20px;
    }

    .stats-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      text-align:center;
    }

    .stat-box{
      flex:1;
      min-width:200px;
      color:white;
      padding:20px;
    }

    .stat-box i{
      font-size:32px;
      margin-bottom:10px;
      opacity:0.9;
    }

    .stat-box h2{
      font-size:46px;
      font-weight:700;
      margin:10px 0;
    }

    .stat-box p{
      font-size:16px;
      opacity:0.9;
    }

    @media(max-width:900px){
      .stats-container{ gap:40px; }
      .stat-box{ flex:45%; }
    }

    @media(max-width:600px){
      .stats-container{ flex-direction:column; }
      .stat-box{ width:100%; }
      .stat-box h2{ font-size:38px; }
    }

    .facilities-section{
      padding:100px 0;
      background:linear-gradient(135deg, #ff5a2c, #d7263d);
      color:white;
      overflow:hidden;
    }

    .facilities-container{
      max-width:1300px;
      margin:auto;
      display:flex;
      align-items:center;
      gap:60px;
      padding:0 40px;
    }

    .facilities-left{ flex:1; }

    .subtitle{
      letter-spacing:3px;
      font-size:13px;
      opacity:.8;
    }

    .facilities-left h2{
      font-size:42px;
      line-height:1.2;
    }

    .facilities-left h2 span{ color:#ffd166; }

    .line{
      width:60px;
      height:3px;
      background:white;
      margin:20px 0;
    }

    .desc{
      max-width:420px;
      font-size:14px;
      line-height:1.6;
      opacity:.9;
    }

    .facilities-slider{
      flex:1.5;
      overflow:hidden;
      width:100%;
    }

    .slider-track{
      display:flex;
      gap:25px;
      transition:transform 0.5s ease;
      will-change:transform;
    }

    .facility-card{
      background:white;
      color:#333;
      border-radius:18px;
      overflow:hidden;
      width:340px;
      flex-shrink:0;
      box-shadow:0 15px 40px rgba(0,0,0,0.2);
      transition:.3s;
      display:flex;
      flex-direction:column;
    }

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

    .facility-card img{
      width:100%;
      height:220px;
      object-fit:cover;
      background:#f5f5f5;
      padding:10px;
    }

    .facility-content{ padding:18px; }

    .tag{
      font-size:11px;
      letter-spacing:1.5px;
      color:#ff512f;
      margin-bottom:5px;
    }

    .facility-content h3{
      font-size:18px;
      margin-bottom:8px;
    }

    .facility-content p{
      font-size:13px;
      line-height:1.5;
      color:#666;
    }

    @media(max-width:768px){
      .facilities-container{
        flex-direction:column;
        text-align:center;
        padding:0 20px;
      }

      .facilities-slider{
        overflow:visible;
      }

      .slider-track{
        display:flex;
        flex-direction:column;
        align-items:center;
        transform:none !important;
      }

      .facility-card{
        width:100%;
        max-width:400px;
      }
    }

    /* admission */
    .admission-banner{
      background: linear-gradient(
        135deg, #b30000, #ff5a00
      );
      padding:80px 20px;
      text-align:center;
      color:#fff;
      margin-bottom:30px;
    }

    .admission-container{
      max-width:900px;
      margin:auto;
    }

    .admission-icon{
      font-size:30px;
      margin-bottom:15px;
      opacity:0.9;
    }

    .admission-banner h2{
      font-size:48px;
      font-weight:700;
      margin-bottom:15px;
    }

    .admission-banner p{
      font-size:18px;
      max-width:600px;
      margin:0 auto 30px;
      line-height:1.6;
    }

    .apply-btn{
      display:inline-block;
      background:#fff;
      color:#333;
      padding:14px 35px;
      border-radius:40px;
      font-weight:600;
      text-decoration:none;
      transition:0.3s;
    }

    .apply-btn:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 20px rgba(0,0,0,0.2);
    }

    @media(max-width:768px){
      .admission-banner{ padding:60px 20px; }
      .admission-banner h2{ font-size:30px; }
      .admission-banner p{ font-size:15px; }
      .apply-btn{
        padding:12px 28px;
        font-size:14px;
      }
    }

    /* vision mission */
    .school-vm-section{
      padding:80px 6%;
      background:#f5f5f5;
      overflow:hidden;
    }

    .school-vm-container{
      display:grid;
      grid-template-columns:1fr 1fr;
    }

    .school-vm-card{
      background: linear-gradient(
        135deg, #b30000, #ff5a00
      );
      color:white;
      padding:60px;
      min-height:250px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      transition:0.7s ease;
      box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }

    .school-vm-img{
      height:350px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#000;
    }

    .school-vm-img img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
    }

    .school-vm-card h2{
      font-size:26px;
      margin-bottom:15px;
      letter-spacing:2px;
    }

    .school-vm-card p{
      line-height:1.6;
      font-size:15px;
    }

    .school-vm-left{
      transform:translateX(-100px);
      opacity:0;
    }

    .school-vm-right{
      transform:translateX(100px);
      opacity:0;
    }

    .school-vm-show{
      transform:translateX(0);
      opacity:1;
    }

    @media(max-width:768px){
      .school-vm-container{
        grid-template-columns:1fr;
      }

      .school-vm-left,
      .school-vm-right{
        transform:translateY(80px);
      }

      .school-vm-show{
        transform:translateY(0);
      }

      .school-vm-card,
      .school-vm-img{
        min-height:auto;
        padding:40px;
      }

      .school-vm-img{
        height:220px;
      }

      .school-vm-img img{
        width:100%;
        height:100%;
        object-fit:cover;
        max-width:none;
      }
    }

    /* leadership */
    .leadership-section{
      padding:90px 20px;
      background:#f6f6f6;
      text-align:center;
    }

    .leadership-container{
      max-width:1200px;
      margin:auto;
    }

    .leadership-section h2{
      font-size:34px;
      margin-bottom:10px;
      line-height:1.2;
    }

    .leadership-subtitle{
      font-size:16px;
      color:#666;
      margin-bottom:50px;
    }

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

    .leader-card{
      background:white;
      padding:35px 30px;
      border-radius:12px;
      box-shadow:0 15px 35px rgba(0,0,0,0.08);
      transition:0.3s;
    }

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

    .leader-image{
      width:120px;
      height:120px;
      margin:auto auto 18px;
      border-radius:50%;
      overflow:hidden;
      box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }

    .leader-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .leader-card h3{
      font-size:18px;
      line-height:1.3;
    }

    .leader-role{
      font-size:13px;
      color:#888;
      display:block;
      margin-bottom:15px;
    }

    .leader-quote{
      font-size:14px;
      color:#555;
      font-style:italic;
      line-height:1.6;
    }

    .read-more-btn{
      display:inline-block;
      margin-top:15px;
      padding:10px 20px;
      font-size:13px;
      color:#fff;
      background:#f4511e;
      border-radius:6px;
      text-decoration:none;
      transition:0.3s;
    }

    .read-more-btn:hover{
      background:#c4151c;
    }

    @media (max-width: 992px){
      .leadership-section h2{ font-size:28px; }
      .leadership-subtitle{ font-size:14px; }
    }

    @media (max-width: 600px){
      .leadership-section{
        padding:60px 15px;
      }

      .leader-card{
        padding:25px 20px;
      }

      .leader-image{
        width:90px;
        height:90px;
      }

      .leader-card h3{ font-size:16px; }
      .leader-quote{ font-size:13px; }
    }

    /* Reviews */
    .reviews-section{
      padding:60px 20px;
      background:#f5f6f8;
    }

    .reviews-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      gap:30px;
    }

    .reviews-summary{
      width:30%;
      background:white;
      padding:25px;
      border-radius:12px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      text-align:center;
    }

    .school-logo{
      width:90px;
      margin:0 auto 10px;
    }

    .rating{
      margin:10px 0;
    }

    .rating-score{
      font-size:28px;
      font-weight:bold;
      color:#ff7a00;
    }

    .stars{
      color:#f4b400;
    }

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

    .reviews-content{
      width:70%;
    }

    .review-list{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }

    .review-card{
      background:white;
      padding:20px;
      border-radius:12px;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
    }

    .review-card h4{
      margin-bottom:5px;
    }

    .meta{
      font-size:12px;
      color:gray;
      margin-bottom:8px;
    }

    .review-nav{
      text-align:center;
      margin-top:30px;
    }

    .review-nav button{
      padding:10px 22px;
      margin:0 10px;
      border:none;
      border-radius:30px;
      cursor:pointer;
      font-size:14px;
      font-weight:500;
      background:linear-gradient(135deg, #1a73e8, #4f8cff);
      color:#fff;
      transition:all 0.3s ease;
      box-shadow:0 6px 15px rgba(0,0,0,0.15);
    }

    .review-nav button:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,0.2);
      background:linear-gradient(135deg, #1558b0, #3a78e0);
    }

    .review-nav button:active{
      transform:scale(0.96);
    }

    .review-nav button:disabled{
      background:#ccc;
      cursor:not-allowed;
      box-shadow:none;
    }

    @media(max-width:900px){
      .reviews-container{
        flex-direction:column;
      }

      .reviews-summary,
      .reviews-content{
        width:100%;
      }

      .review-list{
        grid-template-columns:1fr;
      }
    }
    
    /*heri image*/
.school-hero-image {
  width: 100%;
  height: 80vh; /* controls section height */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff; /* pure white background */
  padding: 20px;
}

.hero-logo {
  width: 500px;   /* increase size */
  max-width: 120%; /* responsive */
  height: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .school-hero-image {
    height: 60vh; /* smaller height for mobile */
  }

  .hero-logo {
    width: 280px; /* smaller but clean */
  }
}
#play-btn {
  padding: 15px 30px;
  background-color: #f39c12; /* Matching your logo's orange */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif;
}
.videos-section {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.section-title {
  font-size: 32px;
  margin-bottom: 30px;
  color: #333;
}

/* Grid Layout */
.videos-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Video Card */
.video-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.3s;
  text-align: left; /* override parent center for readability */
}

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

.video-card iframe {
  width: 100%;
  height: 200px;
  border: none;
}

.video-card h4 {
  padding: 10px 10px 5px 10px;
  font-size: 16px;
  margin: 0;
}

.video-card .video-meta {
  font-size: 13px;
  color: #666;
  padding: 0 10px 12px 10px;
  margin: 0;
}

/* Hide any stray "Watch on YouTube" links inside cards */
.video-card a,
.video-card .watch-link {
  display: none;
}

/* Button centering */
.read-more-btn {
  margin: 30px auto 0 auto;
  padding: 12px 25px;
  background: #c4151c;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block; /* allows auto margin to center */
}

.read-more-btn:hover {
  background: #a51218;
}

/* Responsive */
@media (max-width: 992px) {
  .videos-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .videos-container {
    grid-template-columns: 1fr;
  }
}
.legacy-section {
  padding: 70px 20px;
  background: linear-gradient(135deg, #ff3c3c, #ff8c00);
}

.legacy-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 40px;
  color: #fff;
}

/* LEFT CONTENT */
.legacy-content {
  flex: 1;
}

.legacy-content h2 {
  font-size: 36px;
  margin-bottom: 15px;
}

.legacy-main {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.legacy-content p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* RIGHT IMAGE */
.legacy-image {
  flex: 1;
  text-align: center;
}

.legacy-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}

.legacy-image img:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .legacy-container {
    flex-direction: column;
    text-align: center;
  }

  .legacy-image img {
    max-width: 100%;
  }
}
/* --------------------------------------------------------------------------------------------------------------------------------- */
/* =========================
   EVENTS SECTION
========================= */
.events-section {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.events-title {
  font-size: 32px;
  margin-bottom: 30px;
  color: #333;
}

/* =========================
   GRID
========================= */
.events-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* =========================
   CARD
========================= */
.event-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.3s;
  padding: 10px;
  min-height: 500px; /* ✅ UPDATED */
}

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

/* =========================
   INSTAGRAM FIX
========================= */
.insta-card blockquote {
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================
   FACEBOOK FIX
========================= */
.event-card iframe {
  width: 100%;
  height: 590px;
  border: none;
}

/* =========================
   TITLE
========================= */
.event-card h4 {
  padding: 10px;
  font-size: 16px;
}

/* =========================
   HIDDEN
========================= */
.event-hidden {
  display: none;
}

/* =========================
   BUTTON
========================= */
.events-btn {
  margin-top: 30px;
  padding: 12px 25px;
  background: #c4151c;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

.events-btn:hover {
  background: #a50f15;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .events-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .events-container {
    grid-template-columns: 1fr;
  }
}

.insta-card iframe {
  width: 100% !important;
  min-height: 590px !important; /* 🔥 forces more height */
  border: none;
}
.school-hero-video {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the video covers the entire section without distortion */
  object-position: center; /* Centers the video */
}
.school-hero-video {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  border: none; /* Remove border */
  padding: 0; /* Remove any padding */
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the video covers the entire section without distortion */
  object-position: center; /* Centers the video */
  border: none; /* Remove border from video */
}
.school-hero-video {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  border: none; /* Remove border */
  padding: 0; /* Remove any padding */
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the video covers the entire section without distortion */
  object-position: center; /* Centers the video */
  border: none; /* Remove border from video */
}

/* For smaller screens (e.g., mobile) */
@media (max-width: 768px) {
  .school-hero-video {
    height: 50vh; /* Reduce height for mobile screens to keep it manageable */
  }
  .hero-video {
    object-position: top; /* Adjust video position for better viewing */
  }
}

/* For larger screens */
@media (min-width: 1024px) {
  .school-hero-video {
    height: 100vh; /* Full height for desktops */
  }
}