@media screen and (min-width: 320px) and (max-width: 767px) {
    /**************************************
        Common Section
    **************************************/
    .mobile-view {display: block;}
    .desktop-view {display: none;}
    
    /**************************************
        Header Section
    **************************************/
    .header {background-color: #fff;}
    .header .container {flex-direction: column;}
    .header .contact-info {display: none;}

    /**************************************
        Navbar Section
    **************************************/
    #navbar {
        background-color: #dfdfdf;
        position: relative;
        z-index: 99999;
        height: auto;
    }

    .navbar-menu {
        padding: 7px 0 7px 15px;
        text-align: left;
    }

    #menubar {
        display: inline-block;
        font-size: 22px;
        line-height: 100%;
        color: #1b405d;
        border: 1px solid #1b405d;
        padding: 4px 12px;
        padding-top: 6px;
    }

    #close-btn {
        position: absolute;
        top: 5px;
        left: calc(50% - 15px);
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #868686;
        border: 1px solid #868686;
        border-radius: 50%;
        font-size: 14px;
    }

    .menu {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        background-color: #f8fcff;
        width: 100%;
        padding: 20px;
        padding-top: 40px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: all 0.4s;
    }
    .menu.active {transform: translateX(0);}

    .menu li a {
        font-size: 16px;
        text-transform: capitalize;
        color: #485763;
        height: auto;
        width: calc(100% - 50px);
        padding: 12px 5px;
    }

    .menu li a ~ i {
        width: 38px;
        color: #a1afb9;
        background-color: #e6eaed;
        text-align: center;
        margin-left: auto;
        padding: 6px 5px;
    }
    .menu > li:hover > a {background-color: transparent;}

    .dropdown_menu {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .dropdown_menu .dropdown-list {
        position: static;
        background-color: #f2f5f7;
        width: 100%;
        min-width:auto;
        padding: 10px;
        padding-left: 20px;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    .dropdown_menu:hover .dropdown-list {transition: none;}

    .dropdown_menu .dropdown-list li a {
        color: #485763;
        border-bottom: none;
        width: 100%;
    }

    /**************************************
        Slider Banner Section
    **************************************/
    .slider-banner .owl-nav .owl-next,
    .slider-banner .owl-nav .owl-prev {
        opacity: 1;
        transform: translateX(0);
    }
    .slider-banner .owl-nav {padding: 0 15px;}

    .slider-banner .owl-nav i {
        background-color: rgba(223, 0, 0, 0.7) !important;
        font-size: 22px;
        width: 40px;
        height: 40px;
        line-height: 42px !important;
    }
    .owl-carousel .owl-item img.desktop-view {display: none;}
    .owl-carousel .owl-item img.mobile-view {display: block;}

    /**************************************
        Service Period Section
    **************************************/
    .service-period {
        width: 100%;
        flex-direction: column;
        padding: 25px 15px;
    }

    .service-period .service-time,
    .service-period .service-desc {width: 100%;}

    .service-period .service-time h2,
    .service-period .service-time h3 {font-size: 20px;}

    .service-period .service-desc {
        border: none;
        padding: 0;
        margin-top: 15px;
    }
    
    /**************************************
        Events Section
    **************************************/
    .event-details {width: 100%;}
    .event-details h2 {font-size: 21px;}
    .event-details p {font-size: 15px;}

    /**************************************
        Brief Section
    **************************************/
    .brief-area {
        flex-direction: column;
        gap: 25px;
        padding: 60px 12px;
        margin-bottom: 0;
    }

    .brief-content {width: 100%;}
    .brief-content p, .form-detail ul li {font-size: 15px;}
    .form-box .form-group input,
    .form-box .form-group select,
    .form-box .form-group textarea {font-size: 15px;}

    /**************************************
        Collage Gallery Section
    **************************************/
    .collage-gallery {
        width: 100%;
        border-top: 2px solid #fff;
        padding: 50px 12px;
        padding-bottom: 100px;
        margin: 0;
    }

    .collage-gallery h2 {font-size: 26px;}
    .collage-gallery .single-column {width: 33.33%;}
    .collage-gallery .single-column:nth-child(4),
    .collage-gallery .single-column:nth-child(5) {display: none;}

    /**************************************
        Help Section
    **************************************/
    .help-section {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        padding: 60px 12px;
        padding-top: 20px;
        margin: 0;
    }
    .help-thumb {width: 100%;}

    .help-content {
        width: 100%;
        padding: 0;
    }

    .help-content h4::before {display: none;}
    .help-content h2 {font-size: 35px;}
    .help-tabs {flex-direction: column;}

    .help-content .readMoreBtn {
        font-size: 16px;
        padding: 14px 30px;
    }

    /**************************************
        Projects Section Start
    **************************************/
    #common-box {
        flex-wrap: wrap;
        justify-content: center;
    }

    .single-service-mini {
        width: calc(50% - 2px);
        margin-bottom: 20px;
    }

    /**********************************************************
        Contact Us Begin Here
    **********************************************************/
    .contact-form {margin-top: 20px;}
    .form-box {
        padding: 13px !important;
        padding-top: 25px !important;
        margin-bottom: 40px;
    }

    .contact-detail h5 {font-size: 18px;}
    .contact-detail {padding-top: 30px;}

    .contact-detail ul li span {
        font-size: 15px;
        min-width: 75px;
    }

    /**************************************
        Our Team Section
    **************************************/
    .team-profile {gap: 12px;}
    .single-team-profile {width: calc(50% - 6px);}
    .single-team-profile:hover {transform: translateY(0px);}

    /**************************************
        Our Gallery Section
    **************************************/
    .gallery-block .gallery-item, .gallery-block.two .gallery-item {width: 100%;}

    /**************************************
        Reports Section
    **************************************/
    .reports {
        gap: 30px;
        margin-top: 0;
    }

    .single-report {
        width: 100%;
        padding: 20px 0;
    }    
    .single-report h3 {margin-bottom: 12px;}

    /**************************************
    Page Content Section Start
    **************************************/
    #page_content {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .main-hd {font-size: 20px;}
    #page_content p {font-size: 15px;}

    /********************************************
        Support Page Section
    ********************************************/
    .single-partner-block {
        flex-direction: column;
        gap: 15px;

        border-bottom: 1px solid #dfdfdf;
        margin-bottom: 50px;
        padding-bottom: 25px;
    }

    .partner-thumb {
        max-width: 150px;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 5px;
    }

    .partner-block-content h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .partner-block-content ul li {margin-bottom: 7px;}
    .partner-block-content ul li strong {display: block;}

    /**************************************
        Footer Section
    **************************************/
    #footer-section {flex-direction: column;}

    #footer-left .footer-desc h1 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    #footer-left .footer-desc h2 {font-size: 16px;}

    #footer-left, #footer-right {
        padding: 40px 12px;
        width: 100%;
    }
    #footer-right {padding-bottom: 20px;}

    #footer-menu-list {
        flex-wrap: wrap;
        gap: 20px;
    }
    #footer-menu-list ul {width: 46.9%;}

    #copyright-section .support-section {
        flex-direction: column;
        gap: 10px;
    }
    
    #copyright-section .support-link, #copyright-section .privacy-section p,
    #copyright-section .privacy-link {
        width: 100%;
        text-align: center;
    }

    #copyright-section .privacy-section {
        flex-direction: column-reverse;
        gap: 10px;
    }
    #copyright-section .privacy-section p, #copyright-section .privacy-link {font-size: 13px;}

    #scrollTop {
        top: auto;
        bottom: 170px;
    }
    
}