html,
body {
    overflow-x: hidden !important;
}
body {
    font-family: "Halaney Demo", sans-serif;
    padding-top: 8rem;
    overflow-x: hidden !important;
    position: relative;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid rgba(0, 0, 0, 0.15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}
</style > <style > .custom-width {
    max-width: 1366px;
}

::placeholder {
    color: #fff !important;
}

.input-field {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
    display: block;
    width: 40%;
    font-weight: 400;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid black;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 5%;
}

input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
    left: 10%;
}

input::-webkit-datetime-edit {
    position: relative;
    left: 10%;
}

.bg-mask {
    background-image: url(/images/Group\ 237.png),
        url(/images/Mask\ Group\ 2.png);
    width: auto;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 225px 90px, top left;
    background-size: auto 300px;
}

.bg-mask-2 {
    background-image: url(/images/Mask\ Group\ 4.png);
    width: auto;
    height: 450px;
    background-repeat: no-repeat;
    background-position: 5px 30px, center;
    background-size: auto 400px;
}

.bg-cover {
    background-image: url(/images/Group\ 228.svg),
        url(/images/Mask\ Group\ 1.png);
    background-position: bottom center, left top;
    background-repeat: no-repeat;
    background-size: 30%, cover;
    padding: 10rem;
    width: 100%;
    height: 350px;
}

.bg-multiple {
    background-image: url(/images/avatars/1.png), url(/images/avatars/2.png),
        url(/images/avatars/3.png), url(/images/avatars/4.png);
    width: auto;
    height: 450px;
    background-repeat: no-repeat;
    background-position: 5px 30px, center;
    background-size: auto 800px;
}

.bg-banner {
    background-image: url(/images/Group\ 3974.png), url(/images/Group\ 3975.svg);
    width: auto;
    height: 1000px;
    background-repeat: no-repeat;
}

.dropdown .dropdown-toggle::after {
    margin-left: 16px;
    /* Adjust the distance as needed */
}
</style > <style > .accordion,
.accordion-inner,
.dropdown-btn {
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.4s;
}

.panel,
.panel-inner,
.dropdown-content {
    display: none;
}

.sidebar-item {
    padding: 8px 24px;
    text-decoration: none;
    font-size: 16px;
    color: black;
    display: block;
    transition: 0.3s;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a:hover {
    color: #ff7f00;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    background: url(/images/Icon\ material-date-range.svg) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 75%;
}
.row {
    display: flex;
    flex-wrap: wrap;
    /* margin: -10px; */
    /* Adjust the negative margin to match your desired spacing */
}

.col {
    box-sizing: border-box;
    /*padding: 10px;*/
    /* Adjust the padding to match your desired spacing */
}

/* Mobile */
@media (max-width: 767px) {
    .col-xs-1 {
        width: 8.33%;
    }

    .col-xs-2 {
        width: 16.66%;
    }

    /* ... and so on for col-xs-3 to col-xs-12 */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-1 {
        width: 8.33%;
    }

    .col-sm-2 {
        width: 16.66%;
    }

    /* ... and so on for col-sm-3 to col-sm-12 */
}

/* Desktop */
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33%;
    }

    .col-md-2 {
        width: 16.66%;
    }

    /* ... and so on for col-md-3 to col-md-12 */
}

/* heading */
.form_container {
    margin-bottom: 1em;
}

.form_title,
.form_text-content,
.form_forgot-password-link {
    height: 56px;
    padding-top: 4%;
}

.form_title {
    color: #000;
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 0;
}

/* form */

.form_field {
    height: 56px;
}

.form_input {
    height: 56px;
    font-weight: 500;
    padding: 0 1em;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #d5dcdf;
}

.form_input:focus {
    border: 2px solid #ff7f00;
}

.form_input::placeholder {
    color: #b1b3b3;
}

.form_hide-password {
    position: relative;
    bottom: 2.5em;
    left: 42.5%;
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: #ff7f00;
    width: 1em;
    height: 1em;
    margin-right: 8px;
    margin-top: 4px;
}

.form_checkbox {
    height: 56px;
    padding: 4% 0 0 0;
}

/* button */
.form_button {
    background-color: #ff7f00;
    border-radius: 20px;
    font-weight: 500;
    color: #fff;
    border: none;
    height: 40px;
}

.form_button:hover {
    background-color: #ff7f00;
    opacity: 0.9;
}

.form_button:focus {
    background-color: #eeeeee;
    color: #000;
}

a {
    text-decoration: none;
    color: #ff7f00;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
    color: #ff7f00;
    font-weight: 400;
}

hr {
    border: none;
    border-top: 1px double #000;
    color: #000;
    overflow: visible;
    text-align: center;
    height: 5px;
    opacity: 1;
}

hr:after {
    background: #fff;
    /* content: "or"; */
    padding: 0 4px;
    position: relative;
    top: -13px;
}

.form_external-button {
    color: #000;
    border: none;
    border-radius: 20px;
    font-weight: 500;
    height: 40px;
    padding: 2% 0;
    background-color: #fff;
}

.form_external-button-google,
.form_external-button-facebook {
    border: 1px solid #d5dcdf;
}
.dropdown:hover {
    background-color: white;
}
input::placeholder {
    color: black;
}
.social-icons {
    display: flex;
}

.social-icon {
    margin-right: -5px;
    display: inline-block;
    margin-top: -10px;
    border-radius: 50%;
    padding: 5px;
}

.social-icon i {
    font-size: px;
    color: #fff;
}

.social-icon.facebook {
    background-color: #3b5998;
}

.social-icon.instagram {
    background-color: #e4405f;
}

.social-icon.youtube {
    background-color: #cd201f;
}

.social-icon.whatsapp {
    background-color: #25d366;
}

.social-icon:hover i {
    color: #fff;
}

.social-icon:hover.facebook {
    background-color: #304c8e;
}

.social-icon:hover.instagram {
    background-color: #d92250;
}

.social-icon:hover.youtube {
    background-color: #b71c1c;
}

.social-icon:hover.whatsapp {
    background-color: #20a745;
}
#loginModal .form {
    padding: 1rem !important;
}
#registerModal .form {
    padding: 1rem !important;
}
.rounded.trip .carousel-indicators {
    display: none;
}
.accordion-item.tripinner span {
    margin-left: 35px;
}
.rounded.trip .carousel-item {
    height: 12rem;
}
.rounded.trip .carousel-caption {
    bottom: 2rem;
    z-index: 10;
}
/* .rounded.trip {
    margin-top: 15px;
} */
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
        var(--bs-accordion-border-color);
}
.bus-stops-container {
    min-height: 50px !important;
}
#loginUser a {
    text-decoration: underline;
}
.my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 0rem !important;
}
#registerModal a {
    text-decoration: underline;
}
#guestModal a {
    text-decoration: underline;
}
@media (min-width: 0px) and (max-width: 767px) {
    .bg-cover {
        padding: 1.5rem;
        background-size: 55%, cover !important;
    }
    .rounded.trip .carousel-control-next,
    .carousel-control-prev {
        display: none !important;
    }
    .fixed-top {
        position: absolute !important;
    }
    p {
        font-size: 14px;
    }
    .container.mb-2.border-bottom {
        margin: 25px 10px !important;
    }
    .card.mb-2 {
        /* margin: 10px !important; */
    }
    a {
        text-decoration: none;
        color: #ff7f00;
        font-weight: 500;
        font-size: 14px;
    }
    body {
        font-family: "Halaney Demo", sans-serif;
        padding-top: 3rem !important;
    }
    #loginModal .form {
        padding: 10px !important;
    }
    #registerModal .form {
        padding: 10px !important;
    }
    .container.rounded.trip .carousel-caption {
        position: absolute;
        right: 0%;
        bottom: 1.25rem;
        left: 0%;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        color: #fff;
        text-align: center;
    }
    .container.rounded.trip h5 {
        font-size: 15px;
    }
    .container.rounded.trip .col-2 {
        padding: 25px 2px;
    }
}