body {
    background-color:rgba(88, 19, 19, 0.751);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

#home {
    position: relative;
    background-image: url('Track1.jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6rem 2rem;
    color: #f8f9fa; /* Lighter gray for text */
    text-align: left; /* Left-aligned text */
    overflow: hidden;
}

/* Darker Overlay for More Contrast */
#home .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Darker overlay */
    z-index: 1;
}

#home .content {
    position: relative;
    z-index: 2;
    padding-left: 2rem;
    max-width: 700px;
    color: white; /* Change text color to white */
}

#home h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Shadow effect */
    color: white; /* Make the heading white */
}

#home p {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Light shadow */
    color: white; /* Make the paragraph text white */
}

/* Responsive font size */
@media (max-width: 768px) {
    #home h1 {
        font-size: 1.75rem;
    }

    #home {
        padding: 4rem 1rem;
    }
}

.navbar {
    background-color: #501214 !important; /* Texas State Maroon */
    border-bottom: 3px solid #AC9155; /* Texas State Gold border at the bottom */
}

/* Navbar text color (Gold) */
.navbar a {
    color: #AC9155 !important; /* Texas State Gold */
}

/* Change color when hovering over the nav links */
.navbar a:hover {
    color: #fefcfc !important; /* Maroon on hover */
    background-color: #AC9155; /* Gold background on hover */
}

/* Ensure active nav link is also gold */
.navbar .nav-link.active {
    color: #faf9f8 !important; /* Texas State Gold */
    font-weight: bold; /* Optional: Make it bold for emphasis */
}

/* Optional: Add some margin and border to the map container */
.map-container {
    margin-top: 20px; /* Space above the map */
    margin-bottom: 20px; /* Space below the map */
    border: 5px solid #F2C13B; /* Texas State Gold border around the map */
    border-radius: 10px; /* Rounded corners for the map container */
}

/* Optional: Customize the heading */
h2 {
    font-family: 'Arial', sans-serif;
    color: #7A0F33; /* Texas State Maroon */
}

/* Optional: Customize the description */
p.lead {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 1.2rem;
}

/* Optional: Style for the About Section */
.container.my-5 {
    background-color: #f4f4f9; /* Light gray background */
    border-radius: 10px; /* Rounded corners for the about section */
    padding: 40px;
}

/* Optional: Styling for heading */
h2 {
    color: #7A0F33; /* Texas State Maroon */
    font-size: 2.5rem;
    font-weight: bold;
}

.ratio {
    border: 5px solid #F2C13B; /* Texas State Gold border around the video */
    border-radius: 10px; /* Rounded corners for the video container */
}

/* Style for the Track & Field Stories heading box */
.heading-box {
    background-color: #F8F9FA; /* Light gray background */
    border: 2px solid #7A0F33; /* Maroon border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    padding: 20px;
    margin-bottom: 40px; /* Add space below the heading box */
}

/* Style for the container of each story */
.story-container {
    margin-bottom: 30px; /* Space between each story container */
}

    .heading-box {
        background-color: #F8F9FA; /* Light gray background */
        border: 2px solid #7A0F33; /* Maroon border */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
        padding: 20px;
        margin-bottom: 40px; /* Add space below the heading box */
        margin-top: 80px; /* Add space above the heading box (adjust as needed) */
}

/* Style for each story container (individual box for each story) */
.story-container {
    margin-bottom: 30px; /* Space between each story container */
}

/* Style for each story box */
.story-box {
    background-color: #ffffff; /* White background for individual stories */
    border: 2px solid #7A0F33; /* Maroon border for each story box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    padding: 20px;
    margin-bottom: 30px; /* Space between stories */
}

/* Style for the images inside the story box */
.story-box img {
    margin-right: 20px;
    margin-bottom: 20px;
    max-width: 100%;
    height: auto;
}

/* Text styles within story boxes */
.story-box p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Ensure the body background does not affect story boxes */
.container.my-6 {
    background-color: transparent; /* Make sure the background is transparent for the container */
    padding: 40px;
}

a {
    color: #800000; /* Maroon color */
  }
  a:hover {
    color: #B22222; /* Darker maroon or a different color */
  }
  
  /* Underline on hover */
  a:hover {
    text-decoration-color: #B22222; /* Darker maroon */

    a:visited {
        color: #ee9324; /* Darker Maroon or any color you like */
      }
  }