/* Add here all your CSS customizations */



/* Added by J */
.bg-khaki-light {
    background-color: #DDD9C3 !important;
}
.bg-ivory {
    background-color: #F4F1E6; 
}
/* End Added by J*/



/* Hero */
.hero-section {
    position: relative;
    width: 100%;
    height: 90vh; /* Keep hero section height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5rem; /* Keeps left padding */
}

.hero-content-wrapper {
    max-width: 45%;
    background: rgba(28, 31, 33, 0.8); /* Keeps the dark background for readability */
    padding: 3rem;
}

.hero-text {
    color: #FFF;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-section {
        height: auto;
        flex-direction: column;
        align-items: center;
        padding: 3rem 1rem;
    }
    
    .hero-content-wrapper {
        max-width: 90%;
        text-align: center;
        padding: 2rem;
    }
}
/* End Hero */

.owl-carousel.dots-style-3 .owl-dots .owl-dot span {
    background: rgba(80, 80, 80, 0.7) !important; /* Darker neutral gray - Added by J*/
}

/* Added by J */
.card.card-overlay-bottom-part {
    position: relative;
    overflow: hidden;
    height: 300px; /* Adjust based on design needs */
}

.card-overlay-bottom-part .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 33%; /* Adjust this to 33% if you want it smaller */
    background: rgba(0, 0, 0, 0.50); /* Dark overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.card-overlay-bottom-part .card-body > * {
    position: relative;
    z-index: 1;
    color: #FFF; /* Ensures text stays readable */
}
/* End Added by J*/