/* Carousel / Banner Images */
.carousel-inner img,
.banner_section img {
    height: 40vh;
    width: 100%;       /* ensures full width */
    object-fit: cover; /* crops image nicely to fit */
    display: block;    /* remove inline spacing */
}

/* Optional: make hero text vertically centered */
.banner_section .banner_text,
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* or use --bg / --txt as needed */
}


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

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.65;
  background: var(--bg);
  color: var(--txt);
}

/* ===== Hero Section ===== */
.hero { position: relative; }
.swiper { width: 100%; height: 60vh; min-height: 360px; }
.swiper-slide { position: relative; }
.hero-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .45)); }
.slide-caption { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.slide-caption h1 { color: #fff; margin: 0; font-weight: 700; font-size: clamp(32px, 4vw, 56px); letter-spacing: 0.5px; text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 4px 20px rgba(0,0,0,.4); animation: fadeIn 1.6s ease-in-out; }
.slide-caption p { color: #f8f9fa; max-width: 900px; margin: 16px auto 0; font-weight: 500; font-size: clamp(16px,1.6vw,20px); text-shadow: 0 2px 8px rgba(0,0,0,.5); animation: fadeIn 2s ease-in-out; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.swiper-pagination-bullet { background: #fff; opacity: .8; }
.swiper-button-next, .swiper-button-prev { color: #fff; }

/* ===== Main Content ===== */
main { max-width: 1200px; margin: -40px auto 72px; padding: 0 24px; }

.intro { text-align: center; margin-bottom: 40px; }
.intro h2 { font-weight: 700; font-size: clamp(24px,3vw,36px); margin-bottom: 10px; }
.intro p { color: var(--muted); font-size: 1.05rem; max-width: 800px; margin: 0 auto; }

/* ===== Video + About Text ===== */
.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; margin-top: 40px; }
.video-left iframe { width: 100%; height: 360px; border: none; border-radius: 12px; box-shadow: var(--ring); }
.about-right h3 { font-size: clamp(22px,2.5vw,32px); font-weight: 700; margin-bottom: 16px; }
.about-right p { font-size: 1.05rem; line-height: 1.8; color: var(--muted); }

.video-left, .about-right { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease forwards; }
.video-left { animation-delay: 1s; }
.about-right { animation-delay: 2s; }

@keyframes fadeInUp { 0% { opacity:0; transform:translateY(20px);} 100% { opacity:1; transform:translateY(0);} }

/* ===== Mission & Vision ===== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 60px; }
.grid-2 article h3 { font-weight: 700; font-size:1.5rem; margin-bottom:12px; text-align:center; position: relative; display: inline-block; left:50%; transform: translateX(-50%); opacity:0; animation: fadeInUp 1s ease forwards; }
.grid-2 article:nth-child(1) h3 { animation-delay:0.3s; }
.grid-2 article:nth-child(2) h3 { animation-delay:0.6s; }
.grid-2 article h3::after { content:""; display:block; width:60px; height:3px; background:#c8102e; margin:8px auto 0; border-radius:2px; }
.grid-2 article p { text-align:center; max-width:800px; margin:0 auto; color: var(--muted); line-height:1.8; font-size:1.05rem; opacity:0; animation: fadeInUp 1s ease forwards; }
.grid-2 article:nth-child(1) p, .grid-2 article:nth-child(2) p { animation-delay:2s; }

/* ===== Quality Section ===== */
.quality { margin-top: 40px; text-align:center; font-weight:700; color:var(--brand); }

/* ===== Responsive ===== */
@media (max-width:980px) {
  .swiper { height: 52vh; }
  main { margin: -30px auto 60px; }
  .grid, .grid-2 { grid-template-columns:1fr; gap:24px; }
  .video-left iframe { height:280px; }
}