/* Global Styles */

  :root {

      --primary: #d35400;

      --primary-dark: #a04000;

      --secondary: #2c3e50;

      --light: #f9f9f9;

      --dark: #1a1a1a;

      --accent: #3498db;

      --success: #27ae60;

      --gray: #7f8c8d;

      --light-gray: #ecf0f1;

  }



  * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

  }



  body {

      font-family: 'Inter', sans-serif;

      line-height: 1.6;

  }



  .container {

      max-width: 1300px;

      margin: 0 auto;

      padding: 0 20px;

  }



  /* Header Styles */

  header {

      /* background: #fff; */
     background: #edf3e9;

      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

      position: relative;

      top: 0;

      z-index: 1000;

  }



  .header-container {

      display: flex;

      justify-content: space-between;

      align-items: center;

      /* padding: 1rem 0; */

  }



  .logo {

      display: flex;

      align-items: center;

      /* gap: 10px; */

  }



  .logo img {

      width: 90px;

      height: 90px;

      object-fit: contain;

  }





  .logo-text h1 {
    margin-right: 48px;

    text-wrap: none;

      font-size: .8rem;

      font-weight: 700;

      color: #006400;

  }



  /* Navigation Styles */

  nav ul {

      display: flex;

      list-style: none;

      gap: 2rem;

  }



  nav ul li {

      position: relative;

  }



  nav ul li a {

      white-space: nowrap;

      text-decoration: none;

      color: #10530f;

      font-weight: 700;

      /* padding: 0.5rem 1rem; */

      border-radius: 3px;

      transition: all 0.3s ease;

      display: flex;

      align-items: center;

      /* gap: 0.5rem; */

  }



  nav ul li a:hover {
    

      background: #10530f;

      color: white;

  }



  /* Dropdown Menu Styles */

  .dropdown-menu {

      gap: inherit;

      display: flex;

      flex-direction: column;

      position: absolute;

      top: 100%;

      left: 0;

      background: white;

      min-width: 250px;

      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

      border-radius: 6px;

      opacity: 0;

      visibility: hidden;

      transform: translateY(-10px);

      transition: all 0.3s ease;

      z-index: 1000;

  }



  .dropdown-menu li {

      display: block;

      width: 100%;

  }



  .dropdown-menu li a {

      padding: 0.95rem 1rem;

      border-bottom: 1px solid #f0f0f0;

      display: block;

      color: #2c3e50;

      font-weight: 400;

  }



  .dropdown-menu li:last-child a {

      border-bottom: none;

  }



  .dropdown-menu li a:hover {

      background: #f8f9fa;

      color: #3498db;

  }



  nav ul li:hover .dropdown-menu {

      opacity: 1;

      visibility: visible;

      transform: translateY(0);

  }



  /* Mobile Toggle */

  .mobile-toggle {

      display: none;

      cursor: pointer;

      font-size: 1.5rem;

      color: #2c3e50;

      padding: 0.5rem;

  }



  /* Mobile Styles */

  @media (max-width: 768px) {

      .mobile-toggle {

          display: block;

      }



      nav {

          position: absolute;

          top: 100%;

          left: 0;

          width: 100%;

          background: white;

          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

          opacity: 0;

          visibility: hidden;

          transform: translateY(-20px);

          transition: all 0.3s ease;

      }



      nav.active {

          opacity: 1;

          visibility: visible;

          transform: translateY(0);

      }



      nav ul {

          flex-direction: column;

          gap: 0;

          padding: 1rem 0;

      }



      nav ul li {

          width: 100%;

          border-bottom: 1px solid #f0f0f0;

      }



      nav ul li a {

          padding: 1rem 2rem;

          justify-content: space-between;

          border-radius: 0;

      }



      nav ul li a:hover {

          background: #f8f9fa;

          color: #3498db;

      }



      /* Mobile Dropdown Styles */

      .dropdown-menu {

          position: static;

          opacity: 1;

          visibility: visible;

          transform: none;

          box-shadow: none;

          background: #f8f9fa;

          min-width: auto;

          border-radius: 0;

          max-height: 0;

          overflow: hidden;

          transition: max-height 0.3s ease;

      }



      .dropdown-menu.active {

          max-height: 500px;

      }



      .dropdown-menu li a {

          padding: 0.75rem 3rem;

          font-size: 0.9rem;

          border-bottom: 1px solid #e9ecef;

      }



      .dropdown-menu li a:hover {

          background: #e9ecef;

      }



      /* Mobile dropdown toggle icon */

      nav ul li>a .dropdown-toggle {

          transition: transform 0.3s ease;

      }



      nav ul li.active>a .dropdown-toggle {

          transform: rotate(180deg);

      }

  }







  /* Hero Section */



  .hero-carousel {

      position: relative;

      height: 100vh;

      overflow: hidden;

      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  }



  .carousel-container {

      position: relative;

      width: 100%;

      height: 100%;

  }



  .carousel-slide {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      opacity: 0;

      transition: opacity 1s ease-in-out;

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;

  }



  .carousel-slide.active {

      opacity: 1;

  }


.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}




  /* Slide Background Images */

  .slide-1 {

      background-image: url('../img/slide10.jpg');

  }



  .slide-2 {

      background-image: url('../img/math3.jpg');

  }



  .slide-3 {

      background-image: url('../img/math4.jpg');

  }



  .slide-4 {

      background-image: url('../img/slide9.jpg');

  }



  .hero-content {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      text-align: center;

      color: white;

      z-index: 2;

      max-width: 800px;

      width: 90%;

      padding: 0 20px;

  }

  @media (max-width: 768px) {
    .hero-carousel {
        height: 70vh; /* Reduce height on smaller screens */
    }

    .hero-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 10px;
        font-size: 14px;
    }

    .hero-content h1 {
        font-size: 24px; /* Adjust headline font size */
    }

    .hero-content p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-carousel {
        height: 60vh; /* Further reduce for very small screens */
    }

    .hero-content h1 {
        font-size: 20px;
    }

    .hero-content p {
        font-size: 14px;
    }
}




  .hero-content h1 {

      font-size: 3.5rem;

      font-weight: bold;

      margin-bottom: 1.5rem;

      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

      animation: fadeInUp 1s ease-out;

  }



  .hero-content p {

      font-size: 1.3rem;

      margin-bottom: 2.5rem;

      opacity: 0.95;

      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

      animation: fadeInUp 1s ease-out 0.3s both;

  }



  .hero-btns {

      display: flex;

      gap: 1rem;

      justify-content: center;

      flex-wrap: wrap;

      animation: fadeInUp 1s ease-out 0.6s both;

  }



  .btn {

      color: darksalmon;

      display: inline-block;

      padding: 0rem 1rem;

      text-decoration: none;

      border-radius: 50px;

      font-weight: 600;

      font-size: 1.1rem;

      transition: all 0.3s ease;

      border: 2px solid transparent;

      cursor: pointer;

      text-transform: uppercase;

      letter-spacing: 1px;

  }



  .btn:first-child {

      background: linear-gradient(135deg, #ff6b6b, #ee5a24);

      color: white;

      box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);

  }



  .btn:first-child:hover {

      transform: translateY(-2px);

      box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);

  }



  .btn-outline {

      background: transparent;

      color: white;

      border: 2px solid white;

  }



  .btn-outline:hover {

      background: white;

      color: #667eea;

      transform: translateY(-2px);

  }



  /* Carousel Indicators */

  .carousel-indicators {

      position: absolute;

      bottom: 30px;

      left: 50%;

      transform: translateX(-50%);

      display: flex;

      gap: 10px;

      z-index: 3;

  }



  .indicator {

      width: 12px;

      height: 12px;

      border-radius: 50%;

      background: rgba(255, 255, 255, 0.5);

      cursor: pointer;

      transition: all 0.3s ease;

  }



  .indicator.active {

      background: white;

      transform: scale(1.2);

  }



  /* Carousel Navigation */

  .carousel-nav {

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      background: rgba(255, 255, 255, 0.2);

      border: none;

      color: white;

      font-size: 2rem;

      padding: 15px 20px;

      cursor: pointer;

      border-radius: 50%;

      transition: all 0.3s ease;

      z-index: 3;

      backdrop-filter: blur(10px);

  }



  .carousel-nav:hover {

      background: rgba(255, 255, 255, 0.3);

      transform: translateY(-50%) scale(1.1);

  }



  .prev {

      left: 30px;

  }



  .next {

      right: 30px;

  }



  /* Animations */

  @keyframes fadeInUp {

      from {

          opacity: 0;

          transform: translateY(30px);

      }



      to {

          opacity: 1;

          transform: translateY(0);

      }

  }



  /* Responsive Design */

  @media (max-width: 768px) {

      .hero-content h1 {

          font-size: 1.5rem;

      }



      .hero-content p {

          font-size: 1.1rem;

      }



      .btn {

          padding: 0.8rem 1.5rem;

          font-size: 1rem;

      }



      .carousel-nav {

          font-size: 1.5rem;

          padding: 10px 15px;

      }



      .prev {

          left: 15px;

      }



      .next {

          right: 15px;

      }

  }



  @media (max-width: 480px) {

      .hero-content h1 {

          font-size: 1rem;

      }



      .hero-btns {

          flex-direction: column;

          align-items: center;

      }



      .btn {

          width: 200px;

          text-align: center;

      }

  }





  /* welcome content */





  .welcome-content {

      display: flex;

      background: #f9f9f9;

      /* padding: 40px 0; */

      max-width: 1200px;

      margin: 0 auto;

  }



  .welcome-numbers {

      background-color: #0d6635;

      color: white;

      padding: 30px 20px;

      text-align: center;

      flex: 0 0 250px;

      display: flex;

      flex-direction: column;

      justify-content: center;

      font-family: Arial, sans-serif;

  }



  .welcome-numbers h4 {

      font-size: 14px;

      letter-spacing: 1px;

      margin-bottom: 20px;

      color: #ffc107;

  }



  .welcome-numbers .number-box {

      margin-bottom: 30px;

  }



  .welcome-numbers .number {

      font-size: 32px;

      font-weight: bold;

      margin-bottom: 5px;

  }



  .welcome-numbers .label {

      font-size: 14px;

  }



  .welcome-text {

      padding: 20px 40px;

      flex: 1;

      font-family:sans-serif;

  }



  .welcome-text h5 {

      color: #333;

      font-size: 16px;

      margin-bottom: 10px;

  }



  .welcome-text h2 {

      color: #006400;

      font-size: 28px;

      margin-bottom: 15px;

  }



  .welcome-text p {

      font-size: 15px;

      color: #444;

      line-height: 1.8;

      margin-bottom: 20px;

  }



  .welcome-text .read-more {

      display: inline-block;

      background: #ffc107;

      color: black;

      text-decoration: none;

      padding: 8px 18px;

      border-radius: 4px;

      font-weight: 600;

      font-size: 14px;

  }



  .welcome-text .read-more:hover {

      background: #e0a800;

  }



  @media (max-width: 768px) {

      .welcome-content {

          flex-direction: column;

      }



      .welcome-numbers {

          flex: none;

          width: 100%;

          text-align: center;

      }



      .welcome-text {

          padding: 20px;

      }

  }







  /* About Section */

  .about {

      background-color: var(--light);

  }



  .about-content {

      display: flex;

      gap: 50px;

      align-items: center;

  }



  .about-text {

      flex: 1;

  }



  .about-text h3 {

      margin-top: 30px;

      font-size: 2rem;

      color: var(--secondary);

      margin-bottom: 20px;

  }



  .about-text p {

      margin-bottom: 20px;

      color: var(--gray);

  }



  .about-features {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 20px;

      margin-top: 30px;

  }



  .feature-item {

      display: flex;

      align-items: flex-start;

      gap: 15px;

  }



  .feature-icon {

      background-color: rgba(211, 84, 0, 0.1);

      width: 50px;

      height: 50px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

  }



  .feature-icon i {

      color: var(--primary);

      font-size: 1.3rem;

  }



  .feature-text h4 {

      color: var(--secondary);

      margin-bottom: 5px;

  }



  .feature-text p {

      font-size: 0.9rem;

      color: var(--gray);

  }



  .about-image {

      flex: 1;

      border-radius: 10px;

      overflow: hidden;

      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

  }



  .about-image img {
    margin-top: 30px;

      width: 100%;

      height: 55vh;

      display: block;

  }

  @media (max-width: 768px) {
    .about-image img {
        height: 40vh;
    }
}




  /* Features Section */

  .features {

      background-color: white;

  }



  .features-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 30px;

  }



  .feature-card {

      background-color: white;

      border-radius: 10px;

      overflow: hidden;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

      transition: all 0.3s ease;

      text-align: center;

      padding: 40px 30px;

  }



  .feature-card:hover {

      transform: translateY(-10px);

      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  }



  .feature-card i {

      font-size: 3rem;

      color: var(--primary);

      margin-bottom: 20px;

  }



  .feature-card h3 {

      font-size: 1.3rem;

      margin-bottom: 15px;

      color: var(--secondary);

  }



  .feature-card p {

      color: var(--gray);

  }



  /* Facilities Section */

  .facilities-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 20px;

  }

  .facility-card {
    text-decoration: none;
    color: inherit; /* optional: link ka color text jaisa hi rahe */
    display: block; /* ensures the whole card is clickable */
}




  .facility-card {

      background-color: white;

      border-radius: 10px;

      overflow: hidden;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

      text-align: center;

      padding: 30px 20px;

      transition: all 0.3s ease;

  }



  .facility-card:hover {

      transform: translateY(-5px);

      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  }



  .facility-card i {

      font-size: 2.5rem;

      color: var(--primary);

      margin-bottom: 15px;

  }



  .facility-card h3 {

      font-size: 1.2rem;

      color: var(--secondary);

      margin-bottom: 10px;

  }



  .facility-card p {

      font-size: 0.9rem;

      color: var(--gray);

  }



  /* new latest */





  .virtual-news-section {

      display: flex;

      gap: 20px;

      margin: 40px auto;

      max-width: 1100px;

  }



  .video-box {

      flex: 2;

  }



  .video-box h2 {

      font-size: 22px;

      margin-bottom: 10px;

  }



  .video-box iframe {

      width: 100%;

      height: 315px;

      border: none;

  }



  .c-class-name {

      flex: 1;

      background: #eee;

      padding: 20px;

      border-radius: 4px;

  }



  .c-class-name h2 {

      font-size: 20px;

      margin-bottom: 10px;

  }



  .c-class-name marquee {

      font-size: 16px;

      color: #333;

      height: 260px;

      display: block;

      line-height: 1.8;

  }



  @media (max-width: 768px) {

      .virtual-news-section {

          flex-direction: column;

      }



      .video-box iframe,

      .c-class-name marquee {

          height: auto;

      }

  }







  /* News Section */

  .news {

      background-color: var(--light);

  }



  .news-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 30px;

  }



  .news-card {

      background-color: white;

      border-radius: 10px;

      overflow: hidden;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

      transition: all 0.3s ease;

  }



  .news-card:hover {

      transform: translateY(-10px);

      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  }



  .news-image {

      height: 200px;

      overflow: hidden;

  }



  .news-image img {



      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.5s ease;

  }



  .news-card:hover .news-image img {

      transform: scale(1.1);

  }



  .news-content {

      padding: 25px;

  }



  .news-meta {

      display: flex;

      align-items: center;

      margin-bottom: 15px;

  }



  .news-date {

      background-color: var(--primary);

      color: white;

      padding: 5px 12px;

      border-radius: 20px;

      font-size: 0.8rem;

      font-weight: 600;

  }



  .news-category {

      margin-left: 15px;

      font-size: 0.9rem;

      color: var(--primary);

      font-weight: 600;

  }



  .news-content h3 {

      font-size: 1.3rem;

      margin-bottom: 15px;

      color: var(--secondary);

  }



  .news-content p {

      color: var(--gray);

      margin-bottom: 20px;

  }



  .news-link {

      color: var(--primary);

      text-decoration: none;

      font-weight: 600;

      display: flex;

      align-items: center;

  }



  .news-link i {

      margin-left: 5px;

      transition: transform 0.3s ease;

  }



  .news-link:hover i {

      transform: translateX(5px);

  }



  /* CTA Section */

  .cta {

      background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('../img/bgslide2.avif') no-repeat center center/cover;

      color: white;

      text-align: center;

  }



  .cta-content {

      max-width: 800px;

      margin: 0 auto;

  }



  .cta h2 {

      font-size: 2.5rem;

      margin-bottom: 20px;

  }



  .cta p {

      font-size: 1.2rem;

      margin-bottom: 30px;

      max-width: 600px;

      margin-left: auto;

      margin-right: auto;

  }



  /* Footer */

  footer {

      background-color: var(--secondary);

      color: white;

      padding: 80px 0 20px;

  }



  .footer-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 40px;

      margin-bottom: 60px;

  }



  .footer-col h3 {

      font-size: 1.3rem;

      margin-bottom: 25px;

      position: relative;

      padding-bottom: 10px;

  }



  .footer-col h3::after {

      content: '';

      position: absolute;

      bottom: 0;

      left: 0;

      width: 50px;

      height: 3px;

      background-color: var(--primary);

  }



  .footer-about p {

      margin-bottom: 20px;

      color: var(--light-gray);

  }



  .footer-links li {

      margin-bottom: 10px;

      list-style: none;

  }



  .footer-links a {

      color: var(--light-gray);

      text-decoration: none;

      transition: all 0.3s ease;

      display: flex;

      align-items: center;

  }



  .footer-links a i {

      margin-right: 10px;

      color: var(--primary);

  }



  .footer-links a:hover {

      color: var(--primary);

      transform: translateX(5px);

  }



  .footer-contact li {

      margin-bottom: 15px;

      list-style: none;

      color: var(--light-gray);

      display: flex;

      align-items: flex-start;

  }



  .footer-contact i {

      margin-right: 10px;

      color: var(--primary);

      min-width: 20px;

  }



  .footer-social {

      display: flex;

      gap: 15px;

      margin-top: 20px;

  }



  .footer-social a {

    text-decoration-line:blink;

      display: flex;

      align-items: center;

      justify-content: center;

      width: 40px;

      height: 40px;

      background-color: rgba(255, 255, 255, 0.1);

      border-radius: 50%;

      color: white;

      transition: all 0.3s ease;

  }



  .footer-social a:hover {

      background-color: var(--primary);

      transform: translateY(-5px);

  }



  .footer-bottom {

      border-top: 1px solid rgba(255, 255, 255, 0.1);

      padding-top: 20px;

      text-align: center;

      color: var(--light-gray);

      font-size: 0.9rem;

  }



  .whatsapp-float {

      text-decoration-line:blink;


      position: fixed;

      bottom: 30px;

      right: 30px;

      width: 60px;

      height: 60px;

      background-color: #25d366;

      color: white;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 1.8rem;

      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

      z-index: 1000;

      transition: all 0.3s ease;

  }



  .whatsapp-float:hover {

      transform: translateY(-5px);

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

  }



  /* Responsive Styles */

  @media (max-width: 992px) {



      .features-grid,

      .news-grid,

      .footer-grid {

          grid-template-columns: repeat(2, 1fr);

      }



      .facilities-grid {

          grid-template-columns: repeat(3, 1fr);

      }



      .about-content {

          flex-direction: column;

      }

  }



  @media (max-width: 768px) {

      .mobile-toggle {

          display: block;

      }



      nav ul {

          display: none;

          position: absolute;

          top: 100%;

          left: 0;

          width: 100%;

          background-color: white;

          flex-direction: column;

          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

          padding: 20px 0;

      }



      nav ul.show {

          display: flex;

      }



      nav ul li {

          margin: 0;

          width: 100%;

      }



      nav ul li a {

          padding: 12px 20px;

      }



      .dropdown-menu {

          position: static;

          opacity: 1;

          visibility: visible;

          transform: none;

          box-shadow: none;

          width: 100%;

          padding: 0;

      }



      .hero h1 {

          font-size: 2.5rem;

      }



      .hero p {

          font-size: 1.1rem;

      }



      .section {

          padding: 60px 0;

      }



      .facilities-grid {

          grid-template-columns: repeat(2, 1fr);

      }

  }



  @media (max-width: 576px) {



      .features-grid,

      .news-grid,

      .footer-grid,

      .facilities-grid {

          grid-template-columns: 1fr;

      }



      .hero h1 {

          font-size: 2rem;

      }



      .hero-btns {

          flex-direction: column;

          gap: 10px;

      }



      .btn {



          width: 100%;

          text-align: center;

      }



      .section-title h2 {

          font-size: 2rem;

      }

  }