.for-mobile {
    display: none;
}


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

    :root {
        --h1: 44px;
        --h2: 28px;
        --h3: 22px;
        --h4: 16px;

        --text-base: 14px;
        --text-small: 14px;
        --menu-text: 14px;
        --inpt-field-ht: 40px;
    }

    .for-mobile {
        display: block;
    }

    .for-desktop {
        display: none;
    }




    .text-center-desk {
        text-align: initial;
    }

    .common-hero {
        height: 250px;
    }

    .common-hero .text-center-desk {
        text-align: center;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 1;
    }

    .flex-3 {
        flex: 1;
    }

    .flex-4 {
        flex: 1;
    }

    .flex-5 {
        flex: 1;
    }

    .flex-6 {
        flex: 1;
    }

    .flex-7 {
        flex: 1;
    }

    .flex-8 {
        flex: 1;
    }

    .flex-9 {
        flex: 1;
    }

    .flex-10 {
        flex: 10;
    }

    .row-gap-40,
    .col-gap-40,
    .row-gap-60,
    .col-gap-60 {
        gap: 24px;
    }

    .site-section-lg {
        padding-block: var(--space-5);
    }

    .site-section-med {
        padding-block: var(--space-5);
    }

    .site-section-sml {
        padding-block: 40px;
    }

    .for-mobile {
        display: block;
    }

    .site-list {
        font-size: var(--text-base);
    }

    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100vh;
        background-color: var(--body-bg-color);
        z-index: 100;
        padding: 64px 16px;
        transition: all 0.6s ease-in-out;
        flex-direction: column;
        justify-content: initial;
        align-items: initial;
        overflow-y: scroll;
        appearance: none;
        transition: all 0.3s ease-in;
        gap: 24px;
    }

    .navbar.active {
        right: 0;
    }

    .navbar .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-bar .cross-icn {
        font-size: 36px;
        cursor: pointer;
    }

    .header-bar .cross-icn {
        position: absolute;
        top: 0;
        right: 10px;
    }

    .user-int-bar {
        gap: 8px;
    }

    .main-hero .site-container {
        bottom: 0;
    }

    .header-wrap {
        height: 80px;
    }

    .header-wrap .header-logo {
        height: 60px;
    }

    .hero-section {
        height: 90vh;
        justify-content: center;
    }

    .site-btn-outline,
    .site-btn,
    .tab-btn,
    .skill-filter .checkbox-span,
    .site-btn-white {
        text-wrap: nowrap;
        padding: 6px 18px;
        height: 44px;
        font-size: 14px;
    }

    .cat-section .cat-card .cat-box {
        height: 175px;
    }

    .cat-section .grid {
        row-gap: 24px;
        column-gap: 8px;
    }

    .about-img {
        height: 350px;
    }

    .accordion-header {
        padding: 8px;
    }

    .footer-navbar {
        justify-content: center;
    }

    .footer-section .footer-wp.for-mobile {
        position: fixed;
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .copyright-section {
        text-align: center;
    }

    .dropdown-wrapper {
        width: 100%;
        padding-block: initial;
    }

    .dropdown-menu {
        gap: 16px;
        position: initial;
        padding-block: 0;
        opacity: 0;
        visibility: hidden;
        width: 100%;
        margin-top: 8px;
        max-height: 0px;
        overflow: hidden;
        padding: 0;
        margin-top: 0;
    }

    .dropdown-menu li {
        padding-inline: 8px;
    }

    .dropdown-link {
        padding-block: initial;
    }

    .dropdown-menu.active {
        max-height: 350px;
        visibility: visible;
        opacity: 1;
        padding-block: 8px;
        overflow: hidden;
        margin-top: 16px;
    }

    .dd-arrow {
        transform: rotate(0deg);
        transition: all 0.6s ease-in;
    }

    .dropdown-menu.active .dd-arrow {
        transform: rotate(360deg);
    }

    .knob-icon {
        display: none;
    }

    .xl-bar-section h3 {
        font-size: 18px;
    }

    .service-left-col {
        width: 100%;
    }

    .service-section h3 {
        font-size: 18px;
    }

    .service-card .service-img {
        height: 175px;
    }

    .products-listing-section .grid {
        column-gap: 8px;
        row-gap: 24px;
    }

    .section-header .subtitle-text {
        margin-bottom: 4px;
    }

    .contact-form .form-row {
        flex-direction: column;
    }

    .standard-section {
        margin-top: 30px;
    }

    .qc-section .about-img {
        height: initial;
    }

    .size-bar {
        padding: 16px;
        border-radius: 8px;
    }

    .material-size h3 {
        font-size: 14px;
    }

    .num,
    .num-2 {
        font-size: 94px;
        top: -8px;
    }

    .num-2 {
        right: -2px;
    }

    .about-img.plywood-img {
        height: 350px;
    }

    .vision-card {
        max-width: 100%;
    }

    .vehicle-img.used-pallet {
        height: 200px;
    }

    .contact-wrapper {
        padding-top: 500px;
    }

    .map {
        margin-top: 418px;
    }

    .map iframe {
    height: 250px;
}


}


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