/* Top strip header */
.top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 15px 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.top-logo { height: 80px; }
.top-title {
  font-family: 'Algerian', cursive;
  font-size: 3rem;
  color: #333;
  text-align: center;
  flex: 1;
}

/* General */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', sans-serif; color:#333; line-height:1.6; scroll-behavior: smooth; }
a { text-decoration:none; color:inherit; }
section { padding:60px 20px; text-align:center; }
h2 { font-size:2rem; margin-bottom:20px; }

/* Navbar */
.navbar ul { display:flex; list-style:none; gap:20px; }
.navbar ul li a { font-weight:bold; color:#000; transition:0.3s; }
.navbar ul li a:hover { color:#ff6b6b; }

/* HERO SECTION (VIDEO ONLY) */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full-screen hero section */
  overflow: hidden;
}

/* Video styling */
.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero video {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.hero video.loaded {
  opacity: 1;
}

/* About */
#about { background:#fdfcfb; color:#333; }
#about p { max-width:700px; margin:auto; font-size:1.2rem; text-align:center; }
#about h2 { white-space: nowrap; }

/* Services */
.services { padding: 60px 20px; background: #fdfcfb; text-align: center; }
.services h2 {
  font-size: 2rem;   /* same as About Us */
  margin-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: auto;
}

.service-card {
  position: relative;
  background: #F9D5D3;
  padding: 50px 20px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  font-size: 1.3rem;
  font-weight: bold;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Ribbon */
.ribbon {
  position: absolute;
  top: 15px;
  right: -10px;
  width: 120px;
  transform: rotate(45deg);
  background: rgba(255,255,255,0.95);
  color: #000;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Videos */
.video-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:auto; }
.video-card iframe { width:100%; height:200px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); transition:transform 0.3s; }
.video-card iframe:hover { transform:scale(1.05); }

/* Volunteer */
.community { background:#F9D5D3; color:#333; padding:80px 20px; }
.community h2 { margin-bottom:15px; }
.community p { max-width:600px; margin:0 auto 25px; font-size:1.2rem; }
.cta-btn { padding:12px 25px; border-radius:25px; background:#ff6b6b; color:#fff; font-weight:bold; transition:0.3s; display:inline-block; }
.cta-btn:hover { background:#ff4757; transform:scale(1.05); }

/* Testimonials */
#testimonials { background:#f9f9f9; padding:60px 20px; }
.testimonial-container { position:relative; width:80%; max-width:700px; margin:auto; overflow:hidden; }
.testimonial { display:none; font-size:1.2rem; font-style:italic; color:#444; line-height:1.6; }
.testimonial span { display:block; margin-top:15px; font-weight:bold; color:#222; }

/* Contact */
.contact { background:#fff; color:#333; padding:80px 20px; }
.contact h2 { margin-bottom:8px; }
.contact-subtitle { margin-bottom:16px; font-weight:bold; }
.contact-form { display:flex; flex-direction:column; max-width:500px; margin:auto; gap:15px; }
.contact-form input, .contact-form textarea { padding:12px; border-radius:8px; border:1px solid #ccc; font-size:1rem; }
.contact-form button { padding:12px; border-radius:25px; background:#ff6b6b; color:#fff; font-weight:bold; cursor:pointer; transition:0.3s; }
.contact-form button:hover { background:#ff4757; }
.social-links { margin-top:20px; display:flex; justify-content:center; gap:20px; }
.social-links a { color:#ff6b6b; font-weight:bold; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.contact-form textarea {
  min-height: 120px;
}

.contact-form button {
  align-self: center;
  width: 50%;
}

/* Other Services Section with Two-Column and Image */
#other-services {
  background: #F9D5D3; /* blush pink */
  padding: 60px 20px;
}

#other-services h2 {
  margin-bottom: 30px;
  font-size: 2rem; /* match other section headings */
  font-weight: bold;
  text-align: center;
}

.other-services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left; /* text in columns aligns left */
}

.other-services-left, .other-services-right {
  flex: 1 1 300px; /* flexible, minimum width */
}

.other-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.2rem;
  line-height: 2;
  color: #333;
}

.other-services-right {
  text-align: center; /* center image and paragraph */
}

.other-services-img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
}

.other-services-right p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin: 0 auto;
}

.register-btn {
  margin-top: 30px;
  text-align: center;
}

.register-btn .cta-btn {
  padding: 12px 25px;
  border-radius: 25px;
  background: #ff6b6b;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.3s ease;
}

.register-btn .cta-btn:hover {
  background: #ff4757;
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .other-services-container {
    flex-direction: column;
    align-items: center;
  }
  .other-services-left, .other-services-right {
    width: 100%;
  }
  .other-services-right p, .other-services-list {
    text-align: center;
  }
}
/* Make "Other Services" heading a bit bigger */
#other-services h2 {
  font-size: 2.3rem;   /* increase size */
  font-weight: bold;
  margin-bottom: 25px;
  text-align: center;
}

/* Left side heading (Study Courses) */
.other-services-left .left-heading {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Left side list items */
.other-services-list li {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 8px 0;
}

/* Footer */
footer { background:#222; color:#fff; padding:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
footer p { margin:0; }
footer ul { display:flex; list-style:none; gap:10px; }
footer ul li a { color:#fff; }

/* Animations */
.fade-in { opacity:0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.fade-in.visible { opacity:1; transform: translateY(0); }

.slide-in { opacity:0; transform: translateX(-50px); transition: all 1s ease; }
.slide-in.visible { opacity:1; transform: translateX(0); }

.slide-in-fast { opacity:0; transform: translateX(-80px); transition: all 0.5s ease; }
.slide-in-fast.visible { opacity:1; transform: translateX(0); }

/* Responsive */
@media (max-width:1024px){
  .video-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .navbar ul { flex-direction:column; gap:10px; margin-top:10px; }
  .hero-content h1 { font-size:2rem; }
  .video-grid { grid-template-columns:1fr; }
  #about h2 { font-size:1.8rem; }
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 1;
}