@media (min-width: 300px) and (max-width: 600px) {

    .section-padding {
        padding: 50px 0;
    }

    #restriction .modal-body .main img {
        width: 160px;
        margin: 0 auto 30px;
    }

    #restriction .modal-body .main h2 {
        font-size: 30px;
        line-height: 42px;
        text-align: center;
        margin: 0px auto 28px;
    }

    #restriction .modal-body .main form .form-group button {
        letter-spacing: 18px;
    }

    .desktop-header {
        display: none;
    }

    .mobile-header {
        display: block;
        padding: 14px 0;
        position: sticky;
        top: 0;
        background: #efefef;
        border-bottom: 1px solid #c2c2c2;
        z-index: 99;
    }

    .mobile-header .logo-box img {
        width: 120px;
    }

    .mobile-header .humburger {
        text-align: end;
    }

    .mobile-header .humburger svg {
        width: 29px;
        height: 29px;
    }

    #menuOffcanvas .offcanvas-body {
        padding: unset;
    }

    #menuOffcanvas .mobile-menu-head {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    #menuOffcanvas .go-back {
        height: 50px;
        width: 50px;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        color: #000000;
        font-size: 16px;
    }

    #menuOffcanvas .header-links li a {
        display: block;
        border-bottom: 1px solid #ddd;
        line-height: 50px;
        height: 50px;
        padding: 0 50px 0 15px;
        font-size: 15px;
        font-weight: 600;
        color: #333333;
        letter-spacing: 0.4px;
        position: relative;
        text-transform: capitalize;
    }

    .hero-banner {
        height: 100%;
    }

    .hero-banner img {
        height: 200px;
    }

    .home-about .content-area h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .home-about .content-area p {
        font-size: 15px;
    }

    .inquiry-form .content-area h2 {
        font-size: 22px;
    }

    .inquiry-form form .form_field {
        margin: 0 0 6px;
    }
    
    .inquiry-form form .form_field .form-label {
        font-size: 16px;
        line-height: 28px;
    }

    .inquiry-form form .form_field .input_field .form_control {
        min-width: 220px;
        font-size: 14px;
        line-height: 18px;
        padding: 3px;
    }

    .inquiry-form form .form_field .input_field.full_width textarea {
        margin: unset;
    }

    .inquiry-form form .form_field .input_field label.error {
        top: -13px;
        font-size: 14px;
    }

    .page-breadcrumb {
        height: 220px;
    }

    .page-breadcrumb .content-area h2 {
        text-align: center;
        font-size: 40px;
        margin-bottom: 12px;
    }

    .page-breadcrumb .content-area nav .breadcrumb {
        justify-content: center;
    }

    .our-story {
        padding: 50px 0;
    }

    .our-story .content-area h2 {
        font-size: 22px;
    }

    .our-story .content-area span {
        font-size: 18px;
    }

    .our-story .content-area p {
        font-size: 15px;
    }

    .quality .top-area span {
        font-size: 16px;
    }

    .quality .top-area h2 {
        font-size: 28px;
    }

    .quality .row {
        gap: 30px;
    }

    .products .productBox {
        grid-template-columns: 100%;
        padding: 22px;
        gap: 22px;
    }

    .products .productBox .img-box img {
        height: 300px;
    }

    .page-breadcrumb .content-area h2 {
        text-align: center;
        font-size: 38px;
        margin-bottom: 12px;
    }

    .products .productBox .content-area p {
        font-size: 15px;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .contact-info .row {
        gap: 30px;
    }

    .contact-info .info-box {
        padding: 20px;
    }

    .contact-info .info-box .icon {
        max-width: 70px;
        width: 100%;
        height: 70px;
    }
}