body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
  }

  .header {
    font-family: Lato,"sans-serif";
    position: absolute;
    width: 100%;
    z-index: 1000;
    top: 0;
    position: fixed;
  }

  .scrolled {
    background-color: white;
  }

  .home-main {
    background: url(../img/homepage-img1.jpg) no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100vw;   
    object-fit: cover;
    color: white;
  }

  .logo {
    display: flex;
    float: left;
    margin-top: 2ch;
    margin-left: 5ch;
  }

  .logo img {
    vertical-align: middle;
    margin-right: 10px;
  }

  .buttons {
    display: flex;
    gap: 10px;
    float: right;
    margin-top: 4ch;
    margin-right: 5ch;
  }

  .button {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: white;
    transition: color 0.3s;
  }

  .active {
    color: black;
  }

  .active:hover {
    color:aquamarine;
  }

  .button:hover {
    color: #000000;
  }

  /* Mobile Styles */
  @media (max-width: 768px) {
    header {
      display: none; /* Hide the header */
    }

    .mobile-panel {
      display: block; /* Show the mobile panel */
      /* Panel styling */
    }
  }

  .content {
    padding: 120px 20px 20px; /* Add padding to accommodate sticky header */
  }

  /* Centered text */
  .text {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

  .center {
    position: absolute;
    top: 120%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .footer {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
  }

  .footer-text {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .social-icons {
    margin-top: 10px;
  }

  .social-icon {
    font-size: 24px;
    margin: 0 10px;
    color: #333;
    text-decoration: none;
  }

  .social-icon:hover {
    color: #1877f2; /* Change to the color you prefer for hover state */
  }

  .feria-icon {
    margin-left: 100px;
  }

  .page-header {
    font-family: Lato,"sans-serif";
    position: absolute;
    width: 100%;
    z-index: 1000;
    top: 0;
    position: fixed;
    background-color: white;
  }

  .page-button {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: black;
    transition: color 0.3s;
  }

  .page-text{
    margin-top: 4%;
    text-align: center;
    color: white;
  }

  .image-container {
    width: 80%; /* Set a fixed width for consistent circle size */
    height: 80%; /* Set a fixed height for consistent circle size */
    border-radius: 5%; /* Make the container circular */
    overflow: hidden;
    margin: 0 auto; /* Center horizontally */
  }

  .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Maintain aspect ratio while filling the container */
  }

  .member-info-bg {
    color: white;
  }

  .father-page {
    margin-top: 10%;
  }

  .major {
    text-align: center;
  }