@media screen and ( max-width: 720px ) {

    .main {
        padding: 0 15px;
    }

    .mobile-menu {
        display: block;
    }

    .logo {
        display: none;
    }

    .header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }

    .ma5-menu-header {
        background-color: transparent;
    }

    .site-header .ma5-menu-heading {
        color: #fff;
        margin-left: 10px;
    }

    .ma5-menu-heading a{
        text-decoration: none;
        color: #000;
        text-transform: uppercase;
    }

    .ma5-toggle-menu {
        margin-right: 10px;
    }

    .ma5-ul .fa-home{
        font-size: 19px;
    }

    .menu {
        display: none;
    }

    .logo img {
        height: 80px;
        padding: 5px;
        background-color: #fff;
    }

    .fnc-slide__heading-line {
        font-size: 35px;
        word-spacing: 5px;
        line-height: 60px;
    }

    .fnc-nav__control {
        width: 100px;
        height: 60px;
        font-size: 12px;
    }

    .fnc-slide__content {
        top: 30%;
        left: 25%;
    }

    #about-us {
        padding: 80px 0 120px;
    }

    .about-us-top-box {
        flex-direction: column;
    }

    .about-us h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .about-us-top-right {
        margin-top: 40px;
    }

    .about-us-top-left {
        font-size: 16px;
    }

    .about-us-top-right-img {
        height: 400px;
        width: 80%;
    }

    .about-us-top-right-text-box {
        left: 30%;
    }

    .about-message {
        font-size: 60px;
    }

    .about-us-bottom-left {
        margin-top: 0;
    }

    .about-us-bottom-left-img {
        height: 400px;
        width: 100%;
    }

    .about-us-bottom-right {
        font-size: 25px;
    }

    .design-studio {
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }

    .design-studio-img {
        flex: 0 0 90%;
        height: 400px;
        margin: 0 auto;
    }

    .design-studio-text-box h2::before {
        position: absolute;
        content: "";
        width: 85px;
        height: 2px;
        right: -100px;
        background: #000;
        top: 20px;
        overflow: hidden;
    }

    .design-studio-text-box {
        flex: 0 0 100%;
        margin-top: 40px;
    }

    .design-studio-text-box h2 {
        text-align: left;
        margin-left: 20px;
        font-size: 30px;
    }

    .design-studio-text-box h2::before {
        display: none;
    }

    .design-studio-quote {
        font-size: 25px;
        margin-top: 30px;
        padding: 0 20px;
    }

    #services {
        padding: 0 0 80px;
    }

    .services-text-box {
        flex: 0 0 100%;
        justify-content: flex-end;
        padding: 0 15px;
    }

    .services-text-box h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .services-img-box {
        flex: 0 0 90%;
        margin: 40px auto 0;
        height: 300px;
    }

    .our-vision {
        flex-direction: column;
    }

    .our-vision-img-box {
        flex: 0 0 100%;
        height: 300px; /* Ensure a fixed height for background image */
        background-position: center;
    }

    .our-vision-img-box-overlay {
        position: relative;
        top: 0;
        height: auto; /* Let it grow with content */
        width: 100%; /* Full width for small screens */
        padding: 20px;
    }

    .our-vision-partners {
        justify-content: center;
    }

    .our-vision-partners-item {
        flex: 0 0 45%;
        margin-bottom: 20px;
    }

    .our-vision-text-box {
        flex: 0 0 100%;
        padding: 20px;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }

    .our-vision-text-box h2 {
        margin-bottom: 30px;
        text-align: left;
        font-size: 30px;
    }

    .our-vision-text-box h2::before {
        display: none;
    }

    .our-vision-text-box img {
        height: auto;
        width: 100%;
        margin-top: 15px;
    }

    .our-vision-partners-item {
        flex: 0 0 48%;
    }

    #certification img {
        height: 100px;
        border-radius: 50%;
    }

    .heading-tertiary {
        font-size: 22px;
    }

    .header_right {
        display: none;
    }

    .slider {
        display: none;
    }

    .slider-left {
        width: 100%;
        height: 90vh;
    }

    .slider-left h2 {
        margin-top: 100px;
        font-size: 25px;
    }

    .slider-left h3 {
        font-size: 20px;
    }

    .home-products-box a {
        width: 50%;
        height: 200px;
        padding: 30px 0 0;
        font-size: 15px;
    }

    .welcome img {
        width: 100%;
        height: 200px;
    }

    .welcome h1 {
        font-size: 25px;
    }

    #home_products {
        float: left;
        width: 100%;
        padding: 0;
        background: #3C414C;
    }

    #home_products h2 {
        padding: 0 0 10px;
        margin: 0;
        font-size: 25px;
        text-align: left;
    }

    .service_head {
        padding: 20px 0 0;
    }

    #customers_section {
        padding: 50px 0;
    }

    .customers h3 {
        font-size: 15px;
    }

    .customers h2 {
        font-size: 30px;
    }

    .home_product_img img {
        height: 280px;
    }

    .customers img {
        height: 130px;
    }

    .home_video_left {
        float: left;
        width: 100%;
    }

    .home_video_left_inner {
        float: right;
        width: 100%;
        padding: 30px 30px 30px 15px;
        height: 300px;
    }

    .home_video_right {
        float: right;
        width: 100%;
        background: #ed1c24;
    }

    .home_video_right_inner {
        float: left;
        width: 100%;
        color: #eee;
        padding: 15px 15px 50px;
    }

    .home_video_right h2 {
        font-size: 20px;
    }

    .home_video_right i {
        float: left;
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 18px;
    }

    #footer-top {
        width: 100%;
        overflow: hidden;
        /*padding: 50px 0;*/
    }

    #wrapper {
        padding: 0;
    }

    .container {
        padding: 30px 0;
    }

    .page_title {
        padding: 15px 0;
    }

    .page_title h1 {
        font-size: 30px;
        line-height: 1.4;
    }

    .section-products {
        padding: 40px 0 40px;
    }

    .footer-center ul {
        float: left;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .footer_main {
        padding: 20px 15px;
    }

    .footer_bottom, .col-md-6, .copyright {
        width: 100%;
    }

    .main_body {
        padding: 20px 15px;
    }

    .product_img img {
        width: 100%;
        height: 350px;
    }

    .product_img2 img {
        width: 100%;
        height: 350px;
        margin-bottom: 20px;
    }

    .footer_social {
        margin: 0;
    }

    #commitment {
        flex-direction: column-reverse;
    }

    .commitment-right {
        width: 100%;
        height: auto;
        padding-bottom: 50px;
    }

    .commitment-left h2 {
        font-size: 35px;
    }

    .commitment-left {
        width: 90%;
        z-index: 1;
        margin-top: 0;
        padding: 30px 20px 30px 40px;
    }

    #certification {
        padding: 50px 0 0;
    }

    #certification h2 {
        font-size: 30px;
    }

    .our-promise h3 {
        font-size: 32px;
    }

    .about-counter {
        flex-direction: column;
        align-items: center;
    }

    .counter-box {
        width: 52%;
        border-right: none;
        border-bottom: 1px solid #bebebe;
        padding: 15px 0;
    }

    .counter-box:last-child {
        border-bottom: none; /* Remove bottom border from last item */
    }

    .counter-box h2 {
        text-align: center; /* Center numbers for mobile */
        font-size: 28px; /* Slightly smaller text on mobile */
    }

    .counter-box h3 {
        font-weight: 600;
        font-size: 24px;
    }

    .content {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Make the list full width and horizontal */
    .content .list {
        flex-direction: row;
        width: 100%;
        margin: 0 0 20px 0;
        overflow-x: auto; /* Allow swipe if items overflow */
        position: static;
    }

    .list label {
        font-size: 18px;
        height: auto;
        line-height: normal;
        padding: 10px 15px;
        white-space: nowrap;
    }

    /* Remove vertical slider positioning for mobile */
    .content .slider {
        display: none;
    }

    /* Text content full width */
    .content .text-content {
        width: 100%;
    }

    .text-content-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .text-content-img {
        flex: 0 0 100%;
        margin-bottom: 15px;
    }

    .text-content-img img {
        height: 400px;
        transform: none; /* Keep images upright */
    }

    .text-content-text-box {
        flex: 0 0 100%;
        font-size: 15px;
        line-height: 22px;
        text-align: left;
    }

    .text-content-text-box p {
        font-size: 16px;
    }

    .text-content-text-box p:not(:last-child) {
        margin-bottom: 10px;
    }


    .home-page-products p {
        width: 95%;
        font-size: 17px;
    }

    .home-page-products__content {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0;
        column-gap: 20px;
        margin-top: 60px;
    }

    .parent-products__link-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .parent-products__link-box a {
        flex: 0 0 45%;
    }

    .parent-products__link-box a {
        margin-top: 20px;
    }

    .parent-products__link-box a {
        font-size: 11px;
        padding: 8px 5px;
        gap: 0;
        justify-content: center;
    }

    .section-buyer-list h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .buyer-list img {
        max-width: 110px;
    }

    .footer-left {
        height: auto;
        border: none;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        margin-bottom: 20px;
    }

    .page-header__content {
        width: 90%;
    }

    .footer_main h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .footer-center {
        padding-left: 0;
        height: auto;
        width: 100%;
        border: none;
    }

    .fotter-right {
        float: left;
        width: 100%;
    }

    .certification img {
        margin-left: 73px;
    }

    .about-hero {
        padding: 120px 0 0;
        height: 60vh;
    }

    .about-hero p {
        padding: 15px 0;
        font-size: 20px;
    }

    #about-hero-bottom {
        padding: 50px 0;
        font-size: 20px;
    }

    #about-details {
        display: flex;
        flex-direction: column-reverse;
        padding: 0 0 50px 0;
    }

    .about-details-left {
        width: 80%;
        margin-top: -50px;
        padding: 40px 20px 40px 20px;
    }

    .about-hero h3 {
        font-size: 32px;
    }

    .about-details-left h3 {
        font-size: 25px;
        line-height: 39px;
    }

    .about-details-right {
        width: 100%;
        height: 40vh;
    }

    .about-details-left {
        z-index: 1;
        width: 90%;
        padding: 40px 20px 40px 20px;
        margin-top: -145px;
        background: #f7f7f7;
    }

    #our-promise {
        padding-top: 0;
    }

    .our-promise {
        width: 100%;
        padding: 70px 20px 70px 20px;
    }

    #sustainability-bio {
        padding: 40px 20px;
    }

    .sustainability-care-left {
        width: 100%;
        padding: 60px 0;
    }

    .sustainability-care-left h2 {
        font-size: 30px;
        margin-top: 30px;
    }

    .sustainability-bio h2 {
        font-size: 28px;
        color: #333;
    }

    .sustainability-care-right {
        width: 100%;
    }

    .csr-organization-content {
        padding: 40px 20px;
        color: #333;
    }

    .csr-organization-content h2 {
        font-size: 28px;
        font-weight: 500;
        color: #333;
    }

}