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



.navbar {
    background-color: #501214 !important; 
    border-bottom: 3px solid #AC9155; 
}


.navbar a {
    color: #AC9155 !important; 
}


.navbar a:hover {
    color: #fefcfc !important; 
    background-color: #AC9155;
}


.navbar .nav-link.active {
    color: #faf9f8 !important; 
    font-weight: bold; 
}


h2 {
    color: #7A0F33; 
    font-size: 2.5rem;
    font-weight: bold;
}



.heading-box {
    background-color: #F8F9FA; 
    border: 2px solid #7A0F33; 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    padding: 20px;
    margin-bottom: 40px; 
    text-align: center;
}
.slim-heading-box {
    background-color: #F8F9FA;
    border: 2px solid #7A0F33; 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    padding: 10px; 
    margin-bottom: 40px; 
    text-align: center;
}

/* Container and Section Styling */
.container {
    padding-top: 80px; /* space below navbar */
  }
  
  /* Carousel Shadow & Rounded Corners */
  .carousel-inner {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  }
  
  /* Carousel Caption Styling */
  .carousel-caption {
    background: rgba(0, 0, 0, 0.5); /* translucent black overlay */
    border-radius: 10px;
    padding: 1rem;
    bottom: 20px;
    text-align: left;
  }
  
  .carousel-caption h5 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  }
  
  .carousel-caption p {
    font-size: 1rem;
    color: #ddd;
  }
  
  /* Control Buttons */
  .carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* Remove the default Bootstrap icon */
  width: 2.5rem;
  height: 2.5rem;
  background-color: red; /* Bright red background */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  mask-size: cover;
}

.carousel-control-next-icon {
  transform: rotate(180deg); /* Flip right arrow to point right */
}
  
  /* Optional: Customize hover color */
  .carousel-control-prev-icon:hover,
  .carousel-control-next-icon:hover {
    filter: invert(0%) sepia(100%) saturate(1000%) hue-rotate(10deg);
  
  }
  
  /* Indicators (dots) customization */
  .carousel-indicators button {
    background-color: maroon;
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  
  .carousel-indicators .active {
    background-color: gold;
  }
  

  @media (max-width: 768px) {
    .carousel-caption {
      font-size: 0.9rem;
      padding: 0.5rem;
    }
  
    .carousel-caption h5 {
      font-size: 1.2rem;
    }
  
    .carousel-caption p {
      font-size: 0.85rem;
    }
  }
  #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; }
    
    #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 */
    }