body {
      font-family: Arial, sans-serif;
      /* line-height: 1.6; */
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
  }

  /* General Styling */
  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
  }

  /* Marquee */
  #teaching-philosophy {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black with 50% opacity */
        rgba(0, 0, 0, 0.5)
    ),
    url(/img/philo.jpeg); /* Replace with the actual background image path */
    z-index: 1;
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    color: white; /* Text color for contrast against the background */
    padding: 2rem; /* Adds spacing inside the section */
    border-radius: 10px; /* Optional: Rounds the corners of the section */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    margin-bottom: 5rem;
}

#teaching-philosophy h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fda31b; /* Ensures the heading stands out */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow for readability */
}

#teaching-philosophy p,
#teaching-philosophy ul {
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0;
    color: #f8f9fa; /* Slightly lighter text color for paragraphs */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Adds shadow for better visibility */
}

#teaching-philosophy ul li {
    margin-bottom: 0.5rem;
}

#co-curricular {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black with 50% opacity */
        rgba(0, 0, 0, 0.5)
    ),
    url(/img/Co-Curricular.jpg); /* Replace with the actual background image path */
    z-index: 1;
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    color: white; /* Text color for contrast against the background */
    padding: 2rem; /* Adds spacing inside the section */
    border-radius: 10px; /* Optional: Rounds the corners of the section */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    margin-bottom: 5rem;
}

#co-curricular h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fda31b; /* Ensures the heading stands out */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow for readability */
}

#co-curricular p,
#co-curricular ul {
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0;
    color: #f8f9fa; /* Slightly lighter text color for paragraphs */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Adds shadow for better visibility */
}

#co-curricular ul li {
    margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
    #co-curricular {
        padding: 1.5rem;
    }

    #co-curricular h2 {
        font-size: 1.5rem;
    }

    #co-curricular p,
    #co-curricular ul {
        font-size: 0.9rem;
    }
}
/* Shared Section Styling */
.section {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black with 50% opacity */
        rgba(0, 0, 0, 0.5)
    );
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    color: white; /* Text color for contrast against the background */
    padding: 2rem; /* Adds spacing inside the section */
    border-radius: 10px; /* Optional: Rounds the corners of the section */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    margin-bottom: 5rem; /* Adds spacing between sections */
}

.section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fda31b; /* Highlight heading with theme color */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow for readability */
}

.section p,
.section ul {
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0;
    color: #f8f9fa; /* Slightly lighter text color for paragraphs */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Adds shadow for better visibility */
}

.section ul li {
    margin-bottom: 0.5rem;
}

/* Unique Backgrounds */
#technology {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    ),
    url('/img/tech.jpeg'); /* Replace with actual background image path */
    margin-bottom: 5rem;
}

#academic-excellence {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    ),
    url('/img/academicexcellence.jpg'); /* Replace with actual background image path */
    margin-bottom: 5rem;
}

#support {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    ),
    url('/img/StudentSupportServicesLogo.jpg'); /* Replace with actual background image path */
    
}

  /* Hero Section */
  .adm-display {
      position: relative;
      width: 100%;
      height: 60vh;
      overflow: hidden;
  }

  .adm-display .innerimg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(80%);
  }

  .adm-display .tagline {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
  }

  .adm-display .welcome2 {
      font-size: 2.5rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px 20px;
      border-radius: 5px;
      animation: fadeIn 1.5s ease-in-out;
  }

  /* Animations */
  @keyframes fadeIn {
      0% {
          opacity: 0;
      }

      100% {
          opacity: 1;
      }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .adm-display .welcome2 {
          font-size: 1.8rem;
      }
  }


  .hero {
      background-color: #fda31b;
      color: white;
      text-align: center;
      padding: 2rem 1rem;
  }

  .hero h1 {
      font-size: 2.5rem;
  }

  .hero p {
      font-size: 1.2rem;
      margin-top: 10px;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
  }

  .section-title {
      font-size: 2rem;
      color: #333;
      margin-bottom: 1rem;
  }

  .section {
      margin-bottom: 2rem;
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .section h2 {
      margin-bottom: 1rem;
      color: #fda31b;
  }

  .section p {
      margin-bottom: 1rem;
      color: white;
  }

  ul {
      list-style: square inside;
      margin: 1rem 0;
      padding: 0;
  }

  ul li {
      margin-bottom: 0.5rem;
  }

  /* .footer {
      background: #333;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
  } */

  .photo-gallery {
      display: flex;
      justify-content: space-between;
      /* Ensure equal spacing between items */
      align-items: center;
      /* Align items vertically */
      margin: 20px auto;
      /* Center the gallery */
      padding: 0 20px;
      /* Add some padding on the sides */
      max-width: 1200px;
      /* Set a maximum width for the gallery */
  }

  .photo-item {
      flex: 1;
      /* Make all photos equal in width */
      margin: 0 10px;
      /* Add space between photos */
      text-align: center;
      /* Center the photos */
  }

  .photo-item img {
      width: 100%;
      /* Make the image fill its container */
      max-width: 250px;
      /* Restrict the maximum size of the image */
      height: auto;
      /* Maintain aspect ratio */
      border-radius: 10px;
      /* Optional: Add rounded corners */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      /* Optional: Add shadow */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      /* Smooth hover effect */
  }

  .photo-item img:hover {
      transform: scale(1.1);
      /* Slight zoom on hover */
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      /* Add depth on hover */
  }


  /* .footer {
      background-color: #282c34;
      color: #ffffff;
      padding: 2rem 1rem;
      font-family: Arial, sans-serif;

      width: 100%;
      margin-top: 10rem;
      height: 30rem;
  }

  .footer-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
  }

  .footer-contact h4,
  .footer-social h4,
  .footer-links h4 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }

  .footer-contact p {
      margin: 0.5rem 0;
  }

  .footer-contact a {
      color: #fda31b;
      text-decoration: none;
  }

  .footer-social {
      text-align: left;
  }

  .footer-social .social-icon {
      display: block;
      margin: 0.5rem 0;
      color: #fda31b;
      text-decoration: none;
  }
  .footer-links ul {
      list-style: none;
      padding: 0;
  }

  .footer-links li {
      margin: 0.5rem 0;
  }

  .footer-links a {
      color: #fda31b;
      text-decoration: none;
  }

  .footer-bottom {
      text-align: center;
      margin-top: 2rem;
      font-size: 0.9rem;
      border-top: 1px solid #444;
      padding-top: 1rem;
  }

  .footer-bottom p {
      margin: 0;
  } */

  #curriculum {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black with 50% opacity */
        rgba(0, 0, 0, 0.5)
    ), 
    url(/img/curriculum.jpg);
    z-index: 1;
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    color: white; /* Text color for contrast against the background */
    padding: 2rem; /* Adds spacing inside the section */
    border-radius: 10px; /* Optional: Rounds the corners of the section */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    margin-bottom: 5rem;
}


  /* #curriculum h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #fff;
      /* Ensure the heading stands out on the background */
      /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      /* Adds shadow for readability */
  

  #curriculum p,
  #curriculum ul {
      font-size: 1rem;
      line-height: 1.6;
      margin: 1rem 0;
      color: #f8f9fa;
      /* Slightly lighter text color for paragraphs */
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      /* Adds shadow for better visibility */
  }

  #curriculum ul li {
      margin-bottom: 0.5rem;
  };
/* Highlighted Scholarship Link Style */
.highlight-link {
    background: linear-gradient(135deg, #fda31b 0%, #fd8c1b 50%, #fda31b 100%);
    color: white !important;
    padding: 8px 18px;
    border-radius: 12px;
    font-weight: 600;
    border: 3px solid transparent;
    position: relative;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transform: translateZ(0);
    overflow: hidden;
}

/* Add shine effect */
.highlight-link::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s;
    pointer-events: none;
}

.highlight-link:hover::before {
    animation: shine 0.6s ease-out;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Enhanced Blinking Border Animation - Blended with Website Theme */
.blink {
    animation: blinkBorder 1s ease-in-out infinite, pulse 2s ease-in-out infinite;
}

/* Orange-themed blinking border that matches the button */
@keyframes blinkBorder {
    0%, 45% {
        border-color: #ff8c00;
        box-shadow: 
            0 0 15px rgba(253, 163, 27, 0.8),
            0 0 25px rgba(253, 163, 27, 0.4),
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50%, 100% {
        border-color: #ffa500;
        box-shadow: 
            0 0 8px rgba(253, 163, 27, 0.6),
            0 0 15px rgba(253, 163, 27, 0.3),
            inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
}

/* Alternative: Professional blue theme for school websites */
.blink-blue {
    animation: blinkBorderBlue 1s ease-in-out infinite, pulse 2s ease-in-out infinite;
}

@keyframes blinkBorderBlue {
    0%, 45% {
        border-color: #2196F3;
        box-shadow: 
            0 0 15px rgba(33, 150, 243, 0.8),
            0 0 25px rgba(33, 150, 243, 0.4),
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50%, 100% {
        border-color: #64B5F6;
        box-shadow: 
            0 0 8px rgba(33, 150, 243, 0.6),
            0 0 15px rgba(33, 150, 243, 0.3),
            inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
}

/* Subtle orange glow - most website-friendly */
.blink-subtle {
    animation: blinkBorderSubtle 1.5s ease-in-out infinite, pulse 2s ease-in-out infinite;
}

@keyframes blinkBorderSubtle {
    0%, 45% {
        border-color: #fd8c1b;
        box-shadow: 
            0 0 10px rgba(253, 140, 27, 0.6),
            0 0 20px rgba(253, 140, 27, 0.3);
    }
    50%, 100% {
        border-color: #fda31b;
        box-shadow: 
            0 0 5px rgba(253, 163, 27, 0.4),
            0 0 10px rgba(253, 163, 27, 0.2);
    }
}

/* Subtle scale pulse */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Alternative: Pulsing Border (if you prefer smoother effect) */
.blink-pulse {
    animation: pulseBorder 1.5s ease-in-out infinite;
}

@keyframes pulseBorder {
    0% {
        border-color: #ff4444;
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.8);
    }
    70% {
        border-color: #ff4444;
        box-shadow: 0 0 0 6px rgba(255, 68, 68, 0);
    }
    100% {
        border-color: #ff4444;
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }
}

/* Hover effect with matching theme colors */
.highlight-link:hover {
    animation-play-state: paused;
    border-color: #ff8c00;
    box-shadow: 
        0 0 20px rgba(253, 163, 27, 0.9),
        0 0 35px rgba(253, 163, 27, 0.5),
        0 4px 15px rgba(0,0,0,0.3);
    transform: scale(1.05) translateY(-2px);
    background: linear-gradient(135deg, #fd8c1b 0%, #fda31b 50%, #fd8c1b 100%);
}

/* Enhanced pulsing version */
.blink-enhanced {
    animation: enhancedPulse 1.5s ease-in-out infinite;
}

@keyframes enhancedPulse {
    0% {
        border-color: #ff0044;
        box-shadow: 
            0 0 5px rgba(255, 0, 68, 0.4),
            0 0 10px rgba(255, 0, 68, 0.2);
        transform: scale(1);
    }
    25% {
        border-color: #ff2266;
        box-shadow: 
            0 0 10px rgba(255, 34, 102, 0.6),
            0 0 20px rgba(255, 34, 102, 0.3);
        transform: scale(1.015);
    }
    50% {
        border-color: #ff0044;
        box-shadow: 
            0 0 20px rgba(255, 0, 68, 0.9),
            0 0 30px rgba(255, 0, 68, 0.5),
            0 0 40px rgba(255, 0, 68, 0.2);
        transform: scale(1.03);
    }
    75% {
        border-color: #ff2266;
        box-shadow: 
            0 0 15px rgba(255, 34, 102, 0.7),
            0 0 25px rgba(255, 34, 102, 0.4);
        transform: scale(1.015);
    }
    100% {
        border-color: #ff0044;
        box-shadow: 
            0 0 5px rgba(255, 0, 68, 0.4),
            0 0 10px rgba(255, 0, 68, 0.2);
        transform: scale(1);
    }
}