/* Custom Responsive CSS for Bootstrap 5 */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .contactus.d-flex {
        display: block !important;
    }
    .contactus .wa,
    .contactus .int {
        display: block;
        margin-top: 20px;
    }
    .contactus .int .ms-4,
    .contactus .int .me-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .card-glance {
        height: 650px;
    }
    .card-space-type {
        p {
            font-size: 16px !important;
        }
    }
    .energizing {
        text-align: center;
    }
    .footer .energizing img {
        position: static;
        margin-top: 10px;
    }
    .footer-collapse-link {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }
    .footer-collapse-link .btn {
        border: 0;
        padding: 0;
    }
    .footer-container-link {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: thin solid rgba(255, 255, 255, 0.32);
    }
    .footer #footer-tautan-item.collapse:not(.show),
    .footer #footer-situs-item.collapse:not(.show) {
        display: none;
    }
    .btn-main-search {
        background: red m !important;
        width: 100% !important;
    }
    .section-search .nav-item, .nav-fill > .nav-link {
        flex: 1 1 auto;
        text-align: center
    }
    .section-search .nav-item .nav-link, .nav-justified .nav-item .nav-link {
        width: 100%;
    }
    .hero h1 {
        font-size: 32px;
    }
    .hero h5 {
        font-size: 16px;
    }
    .filter-order {
        display: flex;
        text-align: center;
    }
    .filter-order .btn,
    .filter-order .dropdown {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .card-space p,
    .card-spbu p {
            font-size: 12px;
    }
    .card-space h6,
    .card-spbu h6 {
            font-size: 13px;

    }
    .container-contact .btn-success .bi,
    .container-contact .btn-info .bi {
        display: block;
        width: 100%;
    }
    .card-space .alert {
        text-align: center;
    }
    .card-space .alert .bi {
        display: block;
        /* font-size: 10px; */
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* custom */
@media (max-width: 991.98px) {
    .section-contact {
        margin-top: 3rem;
    }
    .section-recomendation-spbu .owl-carousel {
        height: auto; 
    }
    .navbar .navbar-toggler {
        border-color: white;
    }
    .navbar .navbar-toggler:active {
        border-color: white;
    }
    .navbar .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar .navbar-collapse.collapse {
        background-color: white;
        padding: 10px 20px;
        border-radius: 10px;
    }
    .navbar .nav-link {
        color: black;
    }
    .navbar .navbar-collapse.collapsing {
    -webkit-transition: height 0.01s;
       -moz-transition: height 0.01s;
        -ms-transition: height 0.01s;
         -o-transition: height 0.01s;
            transition: height 0.01s;
    }
    .navbar:not(.scrolled) .navbar-toggler .icon {
        /*color: white;*/
    }
    .footer .col-lg-2,
    .footer .col-lg-4 {
        margin-top: 20px !important;
    }
    #modal-login .bg {
        border-bottom-left-radius: 0px;
        border-top-right-radius: 6px;
    }
    #modal-login .inner {
        border-bottom-left-radius: 0px;
        border-top-right-radius: 6px;
    }
}