.carousel-indicators {
    bottom: -70px;
}

.carousel-indicators [data-bs-target] {
    width: 14px;
!important;
    height: 14px;
!important;
    border-radius: 50%;
!important;
    background-color: var(--bs-travelpal-light);
!important;
}

.carousel-indicators .active {
    background-color: var(--bs-travelpal-primary);
}


.form-control:focus {
    border-color: var(--bs-travelpal-light);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(239, 241, 240, 0.5);
}

.custom-invalid-feedback {
    display: none;
    color: var(--bs-travelpal-error); /* Custom invalid feedback color */
}

.was-validated .form-control:invalid ~ .custom-invalid-feedback {
    display: block;
}

.was-validated .form-control:valid {
    border: 1px solid var(--bs-travelpal-light);
    padding-right: 0.75rem; /* Maintain padding to avoid layout shifts */
}

.was-validated .form-control:valid:focus {
    border: 1px solid var(--bs-travelpal-light);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(239, 241, 240, 0.5);
}

.was-validated .form-control:invalid {
    border: 1px solid var(--bs-travelpal-error);
    padding-right: 0.75rem;
}

@media (max-width: 744px) {
    #section-story {
        background-color: var(--bs-travelpal-light);
    }

    #section-story .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #section-story .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (min-width: 745px) and (max-width: 1023px) {
    #section-story .container {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (min-width: 1024px) {
    #section-story .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}