.about-heading {
        text-align: center;
        padding: 4em 2em;
        background-color: #6d865f;
    }

    body.dark-mode .about-heading {
        background-color: #111;
    }
    
    .about-heading h2 {
        font-size: 2.5em;
        margin-bottom: 0.5em;
        background: linear-gradient(90deg, #ff5429, #0800ff); /* Your gradient colors */
        -webkit-background-clip: text; /* Clips the gradient to the text */
        -webkit-text-fill-color: transparent; /* Makes the text transparent to show the gradient */
    }
    
    body.dark-mode .about-heading h2 {
        background: linear-gradient(to bottom, #43f55e, #9f34f6); /* Dark mode gradient colors */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .about-heading p {
        font-size: 1.2em;
        line-height: 1.8;
        color: #000;
        max-width: 1000px;
        margin: 0 auto
    }

    body.dark-mode .about-heading p {
        color: #ffffff;
    }

    /* Video Section Styling */
.videos {
    text-align: center;
    padding: 4em 1em; /* Adjust as needed */
    background-color: #f9f9f9; /* Optional background color */
  }

  body.dark-mode .videos {
    background-color: #111;
  }
  
  .videos h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #333;
  }

  body.dark-mode .videos h2 {
    color: #c9c9c9;
  }
  
  /* Video Container */
  .video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em; /* Space between videos */
    justify-content: center;
  }
  
  /* Individual Video Items */
  .video-item {
    flex: 1 1 calc(50% - 2em); /* Two videos per row, adjust spacing */
    max-width: 600px;
    aspect-ratio: 16 / 9; /* Ensures videos maintain proper aspect ratio */
    overflow: hidden;
    position: relative;
  }
  
  .video-item iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
  }
  
  /* Responsive Layout for Smaller Screens */
  @media (max-width: 768px) {
    .video-item {
      flex: 1 1 100%; /* Full width on smaller screens */
    }
  }

/* Team Section */
.team {
    max-width: 100%;
    margin: 0 auto;
    padding: 4em 1em;
    text-align: center;
    background-color: #6d865f;
  }
  
  body.dark-mode .team {
    background-color: #111;
  }

  .team h2 {
    margin-bottom: 2em;
    font-size: 2em;
    color: #363636;
  }

  body.dark-mode .team h2 {
    color: #ffffff;
  }
  
  /* Grid Layout */
  .team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center; /* Center the grid items */
  }
  
  /* Each Team Member */
  .team-member {
    flex: 1 1 calc(33.33% - 2em); /* 3 columns with space between */
    max-width: 400px; /* Prevent items from getting too wide */
    box-sizing: border-box;
    text-align: center;
  }
  
  /* Image Container for Hover Effect */
  .team-member .image-container {
    position: relative;
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    aspect-ratio: 1; /* Ensures square images */
  }
  
  .team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fit the container */
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* Default Image */
  .default-img {
    opacity: 1;
    z-index: 1;
  }
  
  /* Hover Image */
  .hover-img {
    opacity: 0;
    z-index: 2;
  }
  
  /* On Hover: Swap Images */
  .image-container:hover .default-img {
    opacity: 0;
  }
  
  .image-container:hover .hover-img {
    opacity: 1;
  }
  
  /* Text Below Each Image */
  .team-member p {
    margin-top: 1em;
    font-weight: bold;
    font-size: 1.1em;
    color: #555;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .team-member {
      flex: 1 1 calc(50% - 1em); /* 2 columns on medium screens */
    }
  }
  
  @media (max-width: 480px) {
    .team-member {
      flex: 1 1 100%; /* Stack items in a single column */
    }
  }