.fade {
      transition: opacity 1s ease-in-out;
    }
    .fade-hidden {
      opacity: 0;
    }
    .fade-visible {
      opacity: 10;
    }
    @keyframes logoAnimation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }
    .animated-logo {
      animation: logoAnimation 3s infinite;
    }



/* three div animation*/

    .animated-div {
      transition: all 0.3s ease-in-out;
      background-color: #ffffff; /* Initial white color */
    }
    .aim:hover {
      background-color: #FF9933; /* Saffron */
    }
    .ANTHEM:hover {
      background-color: #FFFFFF; /* White */
    }
    .VISION:hover {
      background-color: #138808; /* Green */
    }
     .expanded {
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 50;
      width: 90%;
      max-width: 600px;
      height: auto;
      max-height: 90vh;
      overflow-y: auto;
      background-color: white;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
      padding: 20px;
      border-radius: 8px;
    }
    .collapsed {
      height: 150px;
      max-height: 150px;
    }
    .read-more-btn {
      cursor: pointer;
      transition: color 0.3s ease-in-out;
    }
    .read-more-btn:hover {
      color: #FF9933; /* Hover effect */
    }
    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #333;
    }
    .close-btn:hover {
      color: red;
    }



  /* SVG Wave Animation */
    .wave {
      position: relative;
      width: 100%;
      height: 150px;
      overflow: hidden;
    }

    .wave svg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .wave path {
      animation: waveAnimation 6s linear infinite;
    }

    @keyframes waveAnimation {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

/* why section animation*/

 @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .animate-gradient-move {
        background-size: 400% 400%;
        animation: gradientMove 8s ease infinite;
    }
    @keyframes floating {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
    .animate-floating span {
        animation: floating 4s infinite ease-in-out alternate;
    }
    .fade-in {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }


      /* Teacher Card Styling */
    .teacher-card {
        width: 250px;
        padding: 16px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .teacher-img {
        display: block;
        margin: 0 auto;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        border: 4px solid;
    }


 .scrolling-text-container {
            width: 100%;
            overflow: hidden;
            background-color: #ffcc00;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .scrolling-text {
            display: flex;
            white-space: nowrap;
            animation: scrollText 20s linear infinite;
        }
        @keyframes scrollText {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }


 /* Ensure the image acts as a top banner */
    .top-banner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 300px; /* Adjust the height of the banner as needed */
      object-fit: cover; /* Make sure the image covers the width without distortion */
      z-index: 10; /* Keeps the banner above the content */
    }

    /* Popup background overlay */
    .popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    .popup.show {
      display: flex;
      opacity: 1;
    }

    /* Popup content */
    .popup-content {
      position: relative;
      width: 100vw;
      animation: popupShow 0.5s forwards;
    }

    .popup img {
      width: 100%;
      height: auto; /* Keeps the image height proportional */
      object-fit: cover; /* Ensures image covers full width */
    }

    /* Close button */
    .popup-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: rgba(255, 255, 255, 0.7);
      color: black;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      text-align: center;
      font-size: 24px;
      cursor: pointer;
    }

    /* Animation for popup */
    @keyframes popupShow {
      0% {
        transform: scale(0.8);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Lock page content while popup is visible */
    .lock {
      pointer-events: none;
      opacity: 0.5;
    }