@media screen and (max-width:768px) {
    .container {
        width: 100%;
    }

    .col-md-12 {
        width: 100%;
        float: left;
    }

    .col-md-11 {
        width: 91.66666667%;
        float: left;
    }

    .col-md-10 {
        width: 83.33333333%;
        float: left;
    }

    .col-md-9 {
        width: 75%;
        float: left;
    }

    .col-md-8 {
        width: 66.666666%;
        float: left;
    }

    .col-md-7 {
        width: 75%;
        float: left;
    }

    .col-md-6 {
        width: 50%;
        float: left;
    }

    .col-md-5 {
        width: 41.66666667%;
        float: left;
    }

    .col-md-4 {
        width: 33.33333333%;
        float: left;
    }

    .col-md-3 {
        width: 25%;
        float: left;
    }

    .col-md-2 {
        width: 16.66666667%;
        float: left;
    }

    .col-md-1 {
        width: 8.33333333%;
        float: left;
    }
    .searchbar {
        display: flex;
        position: relative;
    }
    
    .searchbar input {
        width: 70%;
        margin: 8px;
        border-radius: 7px;
        border: none;
        padding-left: 8px;
    }

 .button-btn{
    font-size: 1.125rem;
    border-radius: 30px;
    width: 51%;
    background-color: #19829d;
    color: white;
}


}
@media (max-width: 768px) {
    .top-header-content {
        text-align: center;
    }


    .top-header-content ul {
        padding: 3px;
    }

    .searchbar {
        max-width: 100%;
    }

    .login-button {
        text-align: center;
        margin-top: 10px;
    }
}

@media screen and (max-width:600px) {
    .container {
        width: 100%;
    }

    .col-sm-12 {
        width: 100%;
        float: left;
    }

    .col-sm-11 {
        width: 91.66666667%;
        float: left;
    }

    .col-sm-10 {
        width: 83.33333333%;
        float: left;
    }

    .col-sm-9 {
        width: 75%;
        float: left;
    }

    .col-sm-8 {
        width: 66.666666%;
        float: left;
    }

    .col-sm-7 {
        width: 75%;
        float: left;
    }

    .col-sm-6 {
        width: 50%;
        float: left;
    }

    .col-sm-5 {
        width: 41.66666667%;
        float: left;
    }

    .col-sm-4 {
        width: 33.33333333%;
        float: left;
    }

    .col-sm-3 {
        width: 25%;
        float: left;
    }

    .col-sm-2 {
        width: 16.66666667%;
        float: left;
    }

    .col-sm-1 {
        width: 8.33333333%;
        float: left;
    }
   

}

  /* Ensure offcanvas background color is white on mobile */
  @media (max-width: 767px) {
    .offcanvas.offcanvas-end.text-bg-dark {
        background-color: ##19829d !important;
        width: auto;
    }

    /* Change close icon color to black */
    .btn-close-white {
        color: white !important;
    }

    /* Optionally, adjust the text color of the sidebar links */
    .offcanvas-body .nav-link {
        color: white !important;
    }
}
@media (max-width: 1024px), (max-width: 768px), (max-width: 480px) {
    .offcanvas.offcanvas-end.text-bg-dark {
        background-color: #19829d !important;
        width: auto;
    }

    .btn-close-white {
        color: white !important;
    }

    .offcanvas-body .nav-link {
        color: white !important;
    }
}