@media only screen and (max-width: 600px) {
    /* header */
    body {
        padding-bottom: 0px !important;
    }


    .top-ban .contact-info {
        display: none;
    }

    .top-ban .btn-link {
        flex-basis: 100%;
    }

    .top-ban .btn-link ul {
        text-align: center;
    }

    .top-ban .btn-link ul li {
        display: inline-block;
        width: 33%;
        margin: 0px 2px !important;
        padding: 0px !important;
    }

    .top-ban .btn-link ul li:first-child {
        margin-left: 4px !important;
    }
    
    .top-ban .btn-link ul li:last-child {
        margin-right: 4px !important;
    }

    .top-ban .btn-link ul li a {
        display: block;
    }

    .top-ban .btn-link ul li a img {
        display: block;
        width: 100%;
        object-fit: scale-down;
    }

    header .navbar {
        padding: 4px 8px;
    }

    header .navbar .navbar-brand {
            margin: 8px 0px 8px 10px;
        }

    header .navbar .navbar-brand img {
        width: 88px;
    }

    header .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,225, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    header .navbar-dark .navbar-toggler {
        border: none;
    }

    /* content */

    .flex-topic .item-topic {
        flex-basis: 100%;
    }

    .news-page {
        background-color: #fff;
    }

    .post-news {
        display: block;
    }

    .post-news .item-container .item-post {
        background-color: #f7f7f7;
        margin: 0px 8px 32px 8px;
        padding: 16px;
    }

    .post-news .item-container {
        width: 100% !important;
    }

    .post-news aside {
        width: 100% !important;
        padding: 0px 8px;
    }

    .post-news #frmUserDetails {
        padding: 0px 8px;
        margin-bottom: 40px;
    }


    /* footer */
    footer .flex-footer {
        display: block;
        text-align: center;
    }

    footer .footer-note {
        display: block;
        text-align: center;
    }

    footer .item-fnote a {
        text-align: center;
    }

    /* mbe-c center page */

    .map-section,
    .calendarpublic {
        padding: 40px 15px 40px 15px !important;
    }

    .calendarpublic .event-calendar .fc-list-table tbody {
        width: 100% !important;
    }

    .map-section .table-responsive {
        margin-top: 40px;
    }

    .map-section li.paginate_button.previous, .map-section li.paginate_button.next {
        font-size: 16px;
    }

        .map-section .table-responsive .city-holder {
            position: unset;
            margin: 0 auto;
            width: 93%;
        }
        .map-section .table-responsive #list_wrapper #list_filter label {
            width: 100%;
        }
            .map-section .table-responsive #list_wrapper #list_filter label input[type="search"] {
                width: 81% !important;
            }

    .map-section div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        white-space: normal !important;
    }

            .map-section .pagination .paginate_button {
                display: inline-block !important;
            }

        .cal-responsive {
            padding: 0px;
        }

    .event-calendar {
        padding: 40px 15px;
    }

    .event-calendar .fc-toolbar {
        display: block;
        text-align: center;
    }
    
    .event-calendar .fc-toolbar-chunk {
        margin: 16px 0px;
    }

    .event-calendar .card-body {
        padding: 0 !important;
    }

    .event-calendar .fc-daygrid .fc-event-img img {
        display: none !important;
    }

    .event-calendar .fc-daygrid .fc-daygrid-event .event-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-nav .nav-item:nth-child(1),
    .navbar-nav .nav-item:nth-child(4),
    .navbar-nav .nav-item:nth-child(5),
    .navbar-nav .nav-item:nth-child(7),
    .navbar-nav .nav-item .dropdown,
    header .navbar {
        padding: unset !important;
    }

    .navbar-nav {
        background-color: #f3f3f3;
    }

    .navbar-nav .nav-item .nav-link,
    .navbar-nav .nav-item .dropdown button {
        color: #000 !important;
    }

    .challenge-section {
        padding: 15px;
    }

    .challenge-section .page-details {
        padding: 0px 0px 40px 0px;
    }

    .challenge-section .page-details ul {
        padding-left: 20px;
    }

    .challenge-section h3,
    .challenge-section .text-muted{
        text-align: center;
    }

    .challenge-section h3 {
        margin-top: 40px;
    }

    .challenge-section .row .res-width {
        max-width: 100% !important;
        text-align: center;
        flex-basis: 100%;
        padding: 0px 15px;
    }

    .challenge-section .row .res-width .page-title-box {
        margin-bottom: 16px;
    }

    .challenge-section .row .res-width:last-child {
        margin-bottom: 60px;
    }

    .challenge-section .res-challenge-details {
        display: block;
    }

    .challenge-section .res-challenge-details .col:not(:last-child) {
        margin-bottom: 40px;
    }

    .challenge-section .no-margin {
        margin: 0 !important;
    }
    .challenge-section .btn-eco-container .btn-eco {
        flex-basis: 100%;
        margin-bottom: 16px;
        text-align: center;
    }
    .challenge-section .btn-eco-container .btn-eco:last-child {
        border-left: 1px solid #ccc;
    }

    .challenge-section .flex-row {
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 16px 8px;
    }

    .challenge-section .flex-row .item-filter {
        flex-basis: 100%;
    }

    .event-calendar .fc-event-main {
        max-height: 72px;
    }

    .section-video video {
        width: 100% !important;
        margin-bottom: 32px;
    }

    .challenge-section #challengeContainer #divGrid .pb-3,
    .challenge-section #milestoneContainer #divGrid .pb-3,
    .challenge-section #challengeContainer .section-progress .pb-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .challenge-section #challengeContainer {
        padding: 0px 15px;
    }

    .challenge-section .carousel-section .col-sm-4:not(:last-child) {
        margin-bottom: 16px;
    }
    .swal2-show {
        right: unset !important;
    }
    

}

@media only screen and (max-width: 932px) {
    /* header */
    .top-ban .contact-info {
        flex-basis: 80%;
        padding-left: 8px;
    }

    .top-ban .btn-link ul li {
        display: inline-block;
        width: 49%;
        padding: 0 8px;
    }

            .top-ban .btn-link ul li a {
                display: block;
            }

                .top-ban .btn-link ul li a img {
                    display: block;
                    width: 100%;
                }

    header .navbar {
        padding: 4px 8px;
    }

        header .navbar .navbar-brand {
            margin: 8px 0px 8px 10px;
        }

        header .navbar .navbar-brand img {
            width: 88px;
        }

    header .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,225, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    header .navbar-dark .navbar-toggler {
        border: none;
    }

    /* content */

    .news-page .btn-back {
        padding: 0px 8px 40px 8px;
    }

    .news-page {
        background-color: #fff;
    }

    .post-news {
        gap: 16px;
    }

    .post-news .item-container {
        width: 70%;
    }

    .post-news aside {
        width: 30%;
        padding: 0px 8px;
    }

    .post-news .item-container .item-post {
        background-color: #f7f7f7;
        margin: 0px 8px 32px 8px;
        padding: 16px;
    }


        

        .post-news #frmUserDetails {
            padding: 0px 8px;
            margin-bottom: 40px;
        }


    /* footer */
   footer {
       padding: 40px 8px;
   }

   .event-calendar {
       padding: 40px 15px;
   }

    .map-section,
    .calendarpublic {
        padding: 40px 15px 40px 15px !important;
    }

    .navbar-nav .nav-item:nth-child(1),
    .navbar-nav .nav-item:nth-child(4),
    .navbar-nav .nav-item:nth-child(5),
    .navbar-nav .nav-item:nth-child(7),
    .navbar-nav .nav-item .dropdown,
    header .navbar {
        padding: unset !important;
    }

    .navbar-nav {
        background-color: #f3f3f3;
    }

        .navbar-nav .nav-item .nav-link,
        .navbar-nav .nav-item .dropdown button {
            color: #000 !important;
        }

    .challenge-section {
        padding: 32px 15px !important;
    }

    .challenge-section .carousel-control-prev, .carousel-control-next {
        display: none !important;
    }

    .swal2-show {
        right: unset !important;
    }
}