/* ===== SAFE RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BODY ===== */
body {
  font-family: 'Poppins', sans-serif;
  background: #E8F5E9;
  color: #2d3748;
  position: relative;
}

/* ===== NAVBAR SAFE ===== */
#navbar-container {
  position: relative;
  z-index: 9999;
}

body::before {
  content: "";
  position: fixed;

  top: 60%; /* 🔥 50% → 60% (neeche shift) */
  left: 50%;
  transform: translate(-50%, -50%);

  width: 260px;
  height: 260px;

  background: url('images/logo.png') no-repeat center;
  background-size: contain;

  opacity: 0.07;
  pointer-events: none;

  z-index: -1;
}

/* ===== MAIN CONTENT ===== */
.content-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

/* ===== HEADINGS ===== */
.content-wrapper h1 {
  font-family: 'Cinzel', serif;
  margin: 40px 0 25px;
  font-size: 1.8rem;
}

.content-wrapper h2 {
  font-family: 'Cinzel', serif;
  margin: 40px 0 20px;
  font-size: 1.4rem;
}

/* ===== TEXT ===== */
.content-wrapper p {
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: justify;
}

/* ===== IMAGE FLOAT ===== */
.img-right1,
.img-right2 {
  float: right;
  width: 200px;
  margin-left: 20px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.img-left1,
.img-left2 {
  float: left;
  width: 200px;
  margin-right: 20px;
  margin-bottom: 10px;
  border-radius: 8px;
}

/* ===== CLEAR FIX ===== */
.clear {
  clear: both;
}

/* ===== HINDI SECTION ===== */
.about-hindi h2,
.vision-hindi h2 {
  font-size: 1.4rem;
  margin-top: 20px;
}

.about-hindi p,
.vision-hindi p {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ===== INITIAL STATE ===== */
.animate {
  opacity: 0;
}

/* ===== FADE ===== */
.fade-in {
  animation: fadeIn 1s ease forwards;
}

/* ===== SLIDE RIGHT ===== */
.slide-right {
  animation: slideRight 1s ease forwards;
}

/* ===== SLIDE LEFT ===== */
.slide-left {
  animation: slideLeft 1s ease forwards;
}

/* ===== DELAYS ===== */
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
delay-3 { animation-delay: 0.9s; }
delay-4 { animation-delay: 1.2s; }
delay-5 { animation-delay: 1.5s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

  .img-right1,
  .img-right2,
  .img-left1,
  .img-left2 {
    float: none;
    display: block;
    margin: 15px auto;
    width: 80%;
  }

}