#hero {
    position: relative;
    background-image: url(/images/hero-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(132px + clamp(3rem, 10vh, 7rem)) 1rem clamp(4rem, 12vh, 8rem);
    z-index: 0;
    /* ensure it's behind any absolutely positioned children */
}

#hero::before {
    content: '';
    position: absolute;
    /* fixed from "display: absolute" */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* light overlay (or use black for darkening) */
    z-index: -1;
    pointer-events: none;
    /* optional: lets you click "through" the overlay */
}

#hero .title{
    color: var(--bodyTextColorWhite);
}

#hero .text {
    color: var(--bodyTextColorWhite);
    max-width: none;
}

#hero .container {
    text-align: center;
}

#hero .button-solid {
    margin: 0 auto;
    margin-top: 1.5em;
}


#feature .title {
    text-align: center;
    margin-bottom: var(--fontSize96);
    margin: 0 auto 1.5em;
}

.feature-ul {
    list-style: none;
}

.feature-li {
    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #F9F9F9;
    border-radius: var(--fontSize32);
    margin-top: var(--fontSize32);
    padding: var(--fontSize96) var(--fontSize48);
    text-align: center;
}
.feature-li .icon-img {
    margin: 0 auto 1.2em;
}
.feature-li .text {
    margin: 0 auto;
}
#instagram {
    background-color: var(--primary);
}
#instagram .title {
    color: var(--bodyTextColorWhite);
    margin-bottom: 1.2em;
}
#instagram .ig-posts {
    display: flex;
    gap: 1.2em;
    overflow-x: auto;
}
/* testimonials section */
#testimonials h2.title{
    text-align: center;
    margin-bottom: 2em;
}
#testimonials .quote {
    border: 2px solid #000;
    background: #F9F9F9;
    padding: var(--fontSize48);
    max-width: 635px;
    border-radius: 4px;
}
#testimonials .quote .quote-content {
    margin-top: 0.5em;
    margin-bottom: 1em;
}
/* carousel part */ 
.carousel {
    position: relative;
    display: flex;
    gap: 1rem;
    
}
.carousel-button {
    min-width: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;  
    transition: opacity ease 500ms;
}
.carousel-button:disabled{
    opacity: 0.2;
}
.carousel-track-container {
    position: relative;
    overflow: hidden;
}
.carousel-track {
    position: relative;
    list-style: none;
    transition: transform ease 500ms;
    display: flex;
}
.carousel-slide {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
@media (min-width: 64rem) {
    #hero {
        min-height: 100vh;
        padding: calc(132px + clamp(3rem, 10vh, 7rem)) 1rem clamp(4rem, 12vh, 8rem);
        position: relative;
        display: flex;
        align-items: center;
    }

    .feature-ul {
        display: flex;
        gap: var(--fontSize48);
    }
}