html, body {
    height: 100%; /* Full height for both */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-size: 16px; /* Base font size for rem units */
    background: linear-gradient(to bottom, #050112, #072335);
    background-attachment: fixed;
  }
  
  body {
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
    line-height: 1.6; /* Improve text readability */
    /* Use a linear gradient (top to bottom) */
    /* Fallback color for older browsers that don't support gradients */
    background-color: #050112;
    color: rgb(235, 249, 255); /* Light text color */
    text-align: center;
    height: 100%;
  }
  
  /* Navigation bar styles */
  .navbar {
    display: flex; /* Arrange items in a row */
    justify-content: space-between; /* Space out items (logo and links) */
    align-items: center; /* Center items vertically */
    padding: 1rem 2%; /* Add space inside the navbar */
  }
  
  /* Logo (your name) styles */
  .logo {
    font-size: 2rem; /* Use rem for scalable font size */
    font-weight: bold; /* Make the text bold */
  }
  
  /* Navigation link styles */
  nav a {
    color: rgb(235, 249, 255); /* Link text color */
    text-decoration: none; /* Remove the default underline */
    margin: 0 1rem; /* Space between links */
    font-size: 1.3rem; /* Use rem for scalable font size */
    position: relative; /* Needed for the pseudo-element */
    font-weight: bold;
  }
  
  /* Create the underline animation using a pseudo-element */
  nav a::after {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute; /* Position it relative to the link */
    left: 51.5%; /* Position the start of the underline at the center */
    bottom: -4px; /* Adjust this value to move the underline lower */
    width: 0; /* Start with no width */
    height: 2px; /* Thickness of the underline */
    background-color: rgb(235, 249, 255); /* Color of the underline */
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* Smooth animation */
    transform: translateX(-50%); /* Offset by 50% to center it */
  }
  
  /* When the user hovers over the link */
  nav a:hover::after {
    width: 100%; /* Expand the underline to full width */
  }
  
  
  /* Main content styles */
  main {
    position: relative;
    top: -2vh; /* Moves the container up */
    max-width: 1200px; /* Limit the width of the content */
    margin: 20px auto; /* Center the content and add vertical spacing */
    padding: 20px; /* Add space inside the content box */
    line-height: 2;
    font-size: 20px;
  }
  
  .about-container {
    position: relative;
    width: 100%; /* Ensures full width */
    max-width: 1000px; /* Optional: adjust based on your layout */
    margin: 0 auto; /* Centers the container */
    overflow: hidden; /* Keeps floated elements inside */
  }
  
  .about-container img {
    width: 25%; /* Adjust size */
    height: auto;
    border-radius: 2%; /* Optional rounded corners */
    margin: 3.5% 2% 0 0; /* Adds spacing around image */
    float: left; /* Enables text wrapping */
    display: block; /* Prevents inline spacing issues */
  }
  
  .about-text {
    text-align: left;
    text-indent: 6%;
    width: 100%;
    font-size: 1.2rem; /* Use rem for scalable font size */
    line-height: 2;
  }
  
  /* image-carousel.css */
  .carousel-container {
    position: relative;
    top: -7vh;
    bottom: 2vh;
    overflow: hidden;
    width: 100%;
  }
  
  .carousel {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }
  
  .carousel img {
    height: 70vh;
    padding: 0.5vh;
    border-radius: 2vh;
    flex: none;
    width: auto;
    object-fit: cover;
  }
  
  .carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #000000a9;
    color: rgb(235, 249, 255);
    border: none;
    font-size: 2rem; /* Use rem for scalable font size */
    width: 6vh;
    height: 10vh;
    cursor: pointer;
  }
  
  .carousel-button:hover {
    background: #000000d7; /* Darker color on hover */
  }
  
  .left {
    left: 10px;
  }
  
  .right {
    right: 10px;
  }