/* ======== Base Styles ======== */
* {  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}


/* ======== Header ======== */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  background-color: transparent;
  border-bottom: 2px solid #faf7f7;
  position: relative;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  
}

/* Logo Container (important for 3D effect) */
.main-header .logo {
  width: 90px;
  border-radius: 60%;
  animation: flipLogo 8s linear infinite;
  transform-style: preserve-3d;
   backface-visibility: hidden;
}

/* Mobile size increase */
@media (max-width: 768px) {
  .main-header .logo {
    width: 155px;
  }
}

/* 3D Flip Animation */
@keyframes flipLogo {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(25deg); }
  100% { transform: rotateY(0deg); }
}

.school-title {
  flex: 1;
  padding: 0px;
  margin-bottom: 0px;
  
}

.school-title h1 {
 
  color: #053b6e;
  text-align: left;
  
}

.school-title p {
  font-size: 0.9rem;
  color: #030931;
}

@media (max-width: 768px) {
  .admission-banner {
    position: static;
    margin-top: 10px;
    display: inline-block;
  }

  .main-header {
    flex-direction: column;
    text-align: center;
  }
}
/* ======== Navbar ======== */
.navbar {
  padding: 0.3rem 1rem;
  background-color: #053b6e ;
  margin-bottom: 5px;
}

.navbar-brand {
  font-size: 0.5rem;
  
}

.navbar-nav .nav-link {
  padding: 0.7rem 0.6rem;
  font-size: 0.9rem;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.navbar ul li {
  position: relative;
}

.navbar ul li a {
  display: block;
  padding: 5px 20px;
  color:  #faf7f7;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s ease;
}

.navbar ul li:hover > a {
  background-color: #053b6e;
}

.navbar ul li ul {
  display: none;
  position: absolute;
  background-color: #053b6e;
  min-width: 200px;
  top: 100%;
  z-index: 999;
}
 
 /* Desktop Dropdown Hover */
.navbar ul li:hover > ul {
  display: block;
}


.navbar ul li ul li {
  width: 80%;
}

.navbar ul li ul li a {
  padding: 5px;
  color:  #ffffff;
  text-decoration: none;
}

.navbar ul li ul li a:hover {
  background-color: #dddddd;
}


@media (max-width: 768px) {

  .navbar ul li ul {
    position: static;          /* mobile me absolute remove */
    background-color: #ffffff; /* clean white */
    box-shadow: none;
  }

  .navbar ul li ul li a {
    color: #333;
    background-color: #ffffff;
  }

  .navbar ul li ul li a:hover {
    background-color: #f2f2f2;
    color: #000;
  }

  .navbar ul li:hover > a {
    background-color: transparent;  /* blue remove */
  }

}


/* ======== Banner ======== */
.banner-section {
  text-align: center;
  margin-top: 10px;
}

.banner-img {
  width: 80%;
  max-height: 500px;
  border: 5px solid #009879;
}

.sticky-label {
  position: fixed;
  top: 60%;
  right: 0;
  background-color: #8e4b10;
  color: white;
  padding: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: bold;
  z-index: 999;
}

/* ======== Paragraph Styling ======== */
.school-paragraph {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
  text-align: justify;
}

/* ======== Footer ======== */
.school-footer {
  background-color: #053b6e;
  color: #fff;
  font-size: 14px;
  padding: 40px 20px 10px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1500px;
  margin: auto;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
}

.footer-section h3 {
  color: #f39c12;
  margin-bottom: 15px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #ecf0f1;
  text-decoration: none;
}

.footer-section ul li a:hover {
  text-decoration: underline;
}

.social-icons img {
  width: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.footer-bottom {
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid #444;
  font-size: 13px;
}

/* ======== Shared Fancy Heading ======== */
.fancy-heading {
  font-size: 3.5em;
  font-family: 'Georgia', serif;
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}

.fancy-heading::after {
  content: '';
  display: block;
  width: 120px;
  height: 2px;
  background-color: #ccc;
  margin: 10px auto 0;
}



/* ======== Academic Structure ======== */
.academic-structure {
  padding: 40px 20px;

  text-align: center;
}

.cards-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  padding: 15px;
  width: 300px;
  transition: transform 0.3s;
}

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

.card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.card .title {
  color: #0056b3;
  margin: 10px 0 5px;
  font-weight: 600;
}

.card .subtitle {
  color: #444;
  font-size: 0.95em;
  margin: 0;
}



/* ======== Video Section ======== */

.video-container {
  display: flex;
  justify-content: space-between;  /* left-right space */
  align-items: stretch;
  gap: 20px;
  padding: 20px;
}

/* Left and Right */
.left-div,
.right-div {
  flex: 1;               /* equal width automatically */
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #faf4f4;
}

/* Optional: agar right-div ka background yellow hi chahiye */
.right-div {
  background-color: #fcbf49;
}

/* Mobile View */
@media (max-width: 768px) {
  .video-container {
    flex-direction: column;   /* ek ke niche ek */
  }

  .left-div,
  .right-div {
    width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 768px) {
  .owl-carousel .item img {
    height: 200px;
  }
}

.hover-block {
  position: relative;
  cursor: pointer;
 font-family: 'Noto Sans', 'Noto Sans Devanagari', 'Segoe UI', 'Arial', sans-serif;

}

/* Default English text */
.hover-block .hover-heading,
.hover-block .hover-para {
  color: #0b5494;
  transition: all 0.1s ease;
}

/* On hover, hide original text */
.hover-block:hover .hover-heading,
.hover-block:hover .hover-para {
  color: transparent;
  position: relative;
}

/* On hover, show Hindi versions */
.hover-block:hover .hover-heading::before {
  content:"विद्यालय केवल एक इमारत नहीं, यह वह स्थान है जहाँ सपनों की शुरुआत होती है।";
  position: absolute;
  left: 50;
  top: 0;
  color:#053b6e;
}

.hover-block:hover .hover-para::before {
  content: "विद्यालय केवल पढ़ाई का स्थान नहीं, यह विचारों को आकार देता है।यहाँ जिज्ञासा को पोषण, आत्मविश्वास को बढ़ावा मिलता है। कक्षा और किताबों से परे, यह जीवन की नींव रखता है। यहीं से हर बच्चा अपने सुनहरे भविष्य की ओर पहला कदम रखता है।";
  position: absolute;
  left: 50;
  
  color:#053b6e;
}


    .container {
      margin-top: 0px;
      
    }

    #myCarousel {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      overflow: hidden;
    }

   .carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
  height: 400px;          /* fixed height */
  object-fit: cover;      /* image stretch nahi hogi */
  transition: transform 0.5s ease;
}

    .carousel-inner .item img:hover {
      transform: scale(1.05);
    }

    .carousel-caption {
      background: rgba(0, 0, 0, 0.5);
      padding: 10px;
      border-radius: 30px;
    }

    .carousel-caption h3, 
    .carousel-caption p {
      color: #fff;
    }

    .carousel-control.left, .carousel-control.right {
      background-image: none;
    }

    .carousel-indicators li {
      background-color: #888;
    }

    .carousel-indicators .active {
      background-color: #555;
    }

    @media (max-width: 1500px) {
      .carousel-caption {
        font-size: 14px;
        padding: 20px;
      }
    }

@media (max-width: 768px) {

  .carousel-inner > .item > img {
    width: 100%;
    height: 250px;      /* fixed height */
    object-fit: cover;  /* crop karega stretch nahi */
  }

  .carousel-caption {
    bottom: 10px;
    background: rgba(0,0,0,0.6);
    padding: 8px;
    border-radius: 10px;
  }

  .carousel-caption h3,
  .carousel-caption p {
    color: #fff;
    font-size: 13px;
  }

}








.solid-3d-text {
  font-size: 55px;
  font-weight: 900;
  color: #053b6e;
  text-align: center;
  font-family: 'Poppins', sans-serif;

  text-shadow: 
    0 4px 8px rgba(0,0,0,0.4),
    0 8px 16px rgba(0,0,0,0.2);
}




@media (max-width: 768px) {

  .main-header {
    flex-direction: column;
    align-items: center;
    text-align: center;   /* 👈 justify ki jagah center */
    padding: 10px;
  }

  .logo {
    width: 120px;
    margin-bottom: 8px;
  }

  .solid-3d-text {
    font-size: 32px;      /* 38 thoda bada hai mobile ke liye */
    line-height: 1.2;
    text-align: center;   /* extra safety */
  }

  .admission-banner {
    margin-top: 8px;
    font-size: 13px;
    padding: 5px 12px;
  }
}











 div.scroll-container {
  height: auto;
  max-height: 300px;
  background-color: #053b6e;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 10px;
  padding: 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

div.scroll-container img {
  max-height: 265px;
  width: auto;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: center;
}

div.scroll-container img:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
  div.scroll-container {
    max-height: 200px;
  }

  div.scroll-container img {
    max-height: 180px;
  }
}



.album .responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  justify-content: flex-start;
}

.album .responsive-container-block.bg {
  max-width: 1320px;
  margin: 0 0 0 0;
  justify-content: space-between;
}

.album .img {
  width: 100%;
  margin: 0 0 20px 0;
}

.album #i9rb {
  color: black;
}

.album #ir6i {
  color: black;
}

.album #ikz3b {
  color: black;
}

.album .responsive-container-block.img-cont {
  flex-direction: column;
  max-width: 33.3%;
  min-height: auto;
  margin: 0 0 0 0;
  height: 100%;
}

.album #ipix {
  color: black;
}

.album #ipzoh {
  color: black;
}

.album #ig5q8 {
  color: black;
}

.album #imtzl {
  color: black;
}

.album #i53es {
  color: black;
}

.album .img.img-big {
  height: 20%;
  margin: 0 0 16px 0;
}

@media (max-width: 1024px) {
  .album .img {
    margin: 0 0 18px 0;
  }
}

@media (max-width: 768px) {
  .album .img {
    max-width: 32.5%;
    margin: 0 0 0 0;
  }

  .album .responsive-container-block.bg {
    flex-direction: column;
  }

  .album .responsive-container-block.img-cont {
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

  .album .img.img-big {
    max-width: 49%;
    margin: 0 0 0 0;
  }
}

@media (max-width: 500px) {
  .album .img {
    max-width: 94%;
    margin: 0 0 25px 0;
  }

  .album .responsive-container-block.img-cont {
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 10px 10px;
  }

  .album .img.img-big {
    max-width: 94%;
    margin: 0 0 25px 0;
  }

  .album .img.img-last {
    margin: 0 0 5px 0;
  }
}







  .view-all-btn {
  margin: 20px auto;
  display: block;
  padding: 12px 30px;
  background-color: #003366;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  width: fit-content;
}

.view-all-btn:hover {
  background-color: #00264d;
  color: #ffffff;
  transform: translateY(-2px);
}










/* ===== Hamburger Icon ===== */

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  background: none;
  border: none;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 0;
  transition: 0.4s;
}

/* Animation */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Default Desktop */
.nav-links {
  display: flex;
  justify-content: center;
}



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

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #053b6e;
    animation: slideDown 0.3s ease forwards;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .dropdown {
    position: static;
    width: 100%;
    background: #0a4a88;
  }

  .dropdown.active {
    display: block;
  }
}

/* Slide Animation */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}





/* Desktop Dropdown */
@media (min-width: 769px) {
  .navbar ul li:hover > .dropdown {
    display: block;
  }

  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #053b6e;
    min-width: 200px;
    display: none;
  }
}

/* ===== Admission Banner ===== */

.admission-banner {
  position: absolute;
  top: 15px;
  right: 30px;
  background-color: #f39c12;
  color: #fff;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: 0.3s ease;
  z-index: 10;
}

.admission-banner:hover {
  background-color: #e67e22;
  transform: scale(1.05);
}

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

  .admission-banner {
    position: static;         
    margin-top: 10px;
    display: inline-block;
  }

}