.hero-section {
    background-color: white;
    padding-top:20px;
    padding-bottom:40px;
}
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 90vh;
    background-color: white !important;
}
.hero-carousel .carousel-item img {
    width: 100%;
    height: 90vh;
    object-fit: contain;
    opacity: 1 !important;
    filter: none !important;
    background-color: white;
}
.carousel-caption {
    bottom: 45% !important;
   
}
.carousel-caption h2 {
    color: #dc3545 !important;
    letter-spacing: 0.5rem;
    font-weight: 800;
    font-size: 3rem;    
}

.carousel-caption p {
    color: black;
}

/* Responsive Slide Text Positioning Matrices */
.carousel-item:nth-child(1) .carousel-caption {
    top: 20%; right: 10%; left: 50%; bottom: auto; text-align: right;
}
.carousel-item:nth-child(2) .carousel-caption {
    top: 20%; left: 30%; right: 10%; bottom: auto; text-align: right;
}
.carousel-item:nth-child(3) .carousel-caption {
    bottom: 0; left: 0; right: 50%; top: 20%; text-align: left;
}

.hero-overlay-subtle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
    pointer-events: none;
}

.hero-button-overlay { 
    position: absolute; 
    top: 80%; 
    bottom: 30%; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 2000; 

}


.hero-button-overlay .hero-cta-btn {
    color: #dc3545 !important;         /* Changes text color to red */
    border-color: #dc3545 !important;  /* Changes outline border to red */
}

/* Optional: Controls what happens when a user hovers over the red button */
.hero-button-overlay .hero-cta-btn:hover {
    background-color: #dc3545 !important; /* Fills button background with red on hover */
    color: white !important;               /* Changes text to white on hover */
    border-color: #dc3545 !important;
}

.project-detail-standard-hero {
    max-width: 10%;
    max-height: 10%;
    object-fit: contain;
    display: block;
    margin: 0;              /* remove auto spacing */
    padding: 0;             /* ensure no padding */
}



.parallax-hero {
    padding-top: 4rem;
}

/* Deep override targeting the text generated by the string property */
.hero-carousel .carousel-item .carousel-caption .carousel-heading,
.hero-carousel .carousel-item .carousel-caption h3,
.hero-carousel .carousel-item .carousel-caption h5 {
    color: #dc3545 !important; /* Forces the red color */
    letter-spacing: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}