.for-mobile {
    display: none;
}


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

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

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

    .for-mobile {
        display: block;
    }

    .for-desktop {
        display: none !important;
    }

    .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);
    }

    .header-wrap {
        height: 58px;
    }

    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100%;
        background-color: var(--body-bg-color);
        z-index: 100;
        padding: 64px 16px;
        transition: all 0.6s ease-in-out;
    }

    .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: -20px;
        align-items: flex-start;
    }

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

    .cat-img {
        height: 350px;
    }

    .btn-group.category-tab-btns {
        justify-content: flex-start;
        overflow-x: scroll;
        gap: 4px;
    }

    .category-section .flex-row {
        flex-direction: column;
        align-items: initial;
    }

    .category-section .tab.active {
        gap: 24px;
    }

    .category-section .bottom-line {
        padding: 8px;
    }

    .stuff-list-wrap .stuff-icn {
        width: 48px;
        height: 48px;
    }

    .speciality-section .heading-block h2 {
        font-size: var(--h1);
    }

    .speciality-section .skater-img {
        object-position: left center;
    }

    .stuff-list-wrap {
        gap: 16px;
    }

    .speciality-section h2 {
        font-size: 20px;
        line-height: 1;
    }

    .frame-section .frame-img {
        height: 450px;
    }

    .frame-section h3 {
        padding: 16px;
    }

    .frame-section .flex-col {
        flex-direction: column-reverse;
    }

    .intro-section,
    .about-intro-section {
        padding-bottom: initial;
    }

    .subs-section img {
        display: none;
    }

    .luxury-section {
        padding-block: initial;
    }

    .luxury-section .des-img,
    .mission-section .mission-img {
        height: 300px;
    }

    .luxury-section .des-content {
        padding: 16px;
    }

    .luxury-section .des-sign {
        max-width: 140px;
        height: initial;
    }

    .mission-section .cols-m-1 {
        gap: 24px;
    }

    .mission-section .site-common-content {
        padding: initial;
    }

    .mission-list {
        gap: 16px;
    }

    .privacy-wrapper {
        gap: 16px;
    }

    .bar-btn {
        padding-inline: 16px;
    }

    .copy-right-bar {
        align-items: center;
    }

    .subs-form input {
        height: 48px;
    }

    .order-summary-col {
        gap: 24px;
        margin-top: 24px;
    }

    .product-order-wrapper,
    .visual-product-row,
    .add-items,
    .checkout-wrapper,
    .purchased-items-wrapper .flex-row {
        flex-direction: column;
        align-items: initial;
        gap: 24px;
    }

    .checkout-wrapper {
        /* flex-direction: column-reverse; */
        align-items: initial;
        gap: 24px;
    }

    .edit-btn {
        align-self: flex-start;
    }

    .grand-total {
        font-size: 20px;
    }

    /* .checkout-section .order-summary-col {
        gap: 16px;
    } */

    .checkout-section .checkout-form-col {
        & {

            input[type="text"],
            input[type="email"],
            input[type="tel"],
            .login-alert {
                height: 48px;
                padding: 16px;
            }

            input[type="submit"] {
                width: 100%;
                margin-top: 16px;
                height: 48px;
            }
        }
    }

    .address-wrapper {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: initial;
    }

    .map iframe {
        height: 250px;
    }

    .contact-section .bg-f-white {
        padding: 16px;
    }

    .team-content-wrapper,
    .designer-section .team-slide-content {
        flex-direction: column;
        gap: 16px;
    }

    .designer-section .team-img {
        max-width: 100%;
    }

    .payment-section .tab-btn-group {
        appearance: none;
        overflow-x: scroll;
        justify-content: flex-start;
    }

    .payment-section .gap-8 {
        gap: 24px;
    }

    .payment-section .num-list li {
        padding-left: initial;
    }

    .payment-section .num-list {
        gap: 8px;
    }

    .num-list h3,
    .privacy-section h3 {
        font-size: 18px;
        font-weight: 700;
    }

    .privacy-section .gap-8 {
        gap: 24px;
    }

    .privacy-section .gap-2 {
        gap: 8px;
    }

    .prouct-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .thumbnail-slider-wrap {
        gap: 4px;
        height: 600px;
        overflow: hidden;
    }

    /* .thumbnail-slider-wrap .mySwiper2 {
        height: 50%;
    } */

    .thumbnail-slider-wrap .mySwiper .swiper-slide {
        height: 75px;
    }

    .filter-options span {
        width: 40px;
        height: 40px;
    }

    .shop-btn-wrap a {
        display: inline-flex;
    }

    .product-accordian-container .accordion-item {
        padding: 16px;
        gap: 4px;
    }

    .accordion-content .site-common-content {
        gap: 8px;
    }

    .faq-icon {
        font-size: 22px;
    }

    .trending-section {
        padding-top: initial;
    }

    .trending-section .section-header {
        gap: 8px;
    }

    .product-listing-section {
        padding-block: 48px;
    }

    .product-listing-section .listing-wrapper {
        flex-direction: column;
        gap: 48px;
    }

    .shop-card img {
        height: 225px;
    }

    .shop-filters-wrap {
        gap: 16px;
    }

    .filter-title {
        margin-bottom: 16px;
    }

    .filter-box {
        padding-top: 16px;
    }

    .filter-box.active .course-checkbox-list {
        padding-bottom: 16px;
    }

    .sorting-right-bar .btn-group,
    .sorting-bar .breadcrumbs {
        display: none;
    }

    .sort-by-select select {
        width: 140px;
    }

    .sort-by-select::after {
        top: 2px;
    }

    .breadcrumbs.for-mobile {
        margin-bottom: 16px;
        font-weight: 700;
    }

    .desginer-slider-section .designer-info-card img {
        height: 225px;
    }

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

    .standard-section {
        padding-top: initial;
        padding-bottom: 64px;
    }

    .standard-section .standard-img {
        height: 350px;
    }

    .standard-section .gap-5 {
        gap: 24px;
    }

    .standard-section .standard-content .flex-row {
        padding: initial;
        flex-direction: column;
        gap: 8px;
    }

    .contact-form input[type="submit"] {
        margin-top: initial;
    }

    /* NEW CSS */

    .featured-section .img-fit {
        height: 300px !important;
    }

    .frame-section .flex-3 {
        width: 100%;
    }

    .frame-wrapper .frame-img-sml,
    .frame-wrapper .frame-img-sml-2 {
        bottom: 0;
        width: 100px;
        height: 100px;
        padding: 8px;
    }


    .frame-wrapper .frame-img-sml {
        left: initial;
    }

    .frame-wrapper .frame-img-sml-2 {
        right: 0;
    }



    .site-common-content {
        gap: 8px;
    }

    .cta-section .bg-primary {
        padding: 16px;
        border-radius: 16px;
    }

    .testimonial-section .tl-img {
        height: 250px;
        ;
    }

    .cta-form-section .contact-form {
        flex-direction: column;
    }

    .footer-row {
        align-items: flex-start;
    }

    .footer-logo {
        height: initial;
        justify-content: flex-start;
    }

    .cta-form-section .contact-form input[type="email"] {
        max-width: 100%;
    }

    .footer-logo>img {
        width: 106px;
    }

    .border-lining {
        height: 40px;
    }

    .quick-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .founder-section .inner-content {
        display: flex;
        flex-direction: column;
    }

    .client-img {
        height: 400px;
        object-position: top;
    }

    .exp-img {
        height: 500px;
        object-position: center center;
        margin-bottom: 12px;
    }

    .client-sign {
        left: initial;
        width: 150px;
        align-self: flex-end;
    }

    .gallery-cols {
        gap: 8px;
    }

    .gallery-cols .div1 {
        height: 232px;
    }

    .gallery-cols .div2,
    .div3,
    .div4 {
        height: 112px;
    }

    h2.site-title-h2.ft-wt-500.my-1 {
        margin: initial;
        margin-bottom: 4px;
    }

    .subtitle-text,
    .bg-primary .subtitle-text {
        font-size: 14px;
        font-weight: 500;
    }

    .woven-card p.ft-wt-700.mb-1 {
        font-size: 16px;
        line-height: 1.1;
    }

    .contact-section .tab-btn-group {
        appearance: none;
        overflow-x: scroll;
        justify-content: flex-start;
    }

    .tab-btn {
        max-width: max-content;
        padding: 2px 16px;
    }

    .featured-section-2 .product-list-grid {
        row-gap: 20px;
        column-gap: 10px;
    }

    .featured-section .img-fit {
        height: 256px;
    }

    .featured-section h4 {
        font-size: 16px;
    }

    .featured-section .price {
        font-size: 20px;
    }

    .btn-group a {
        height: 40px;
        line-height: 1;
    }

    .popup-form {
        padding-inline: 16px;
        max-width: 280px;
    }

    .popup-form .popup-cross-icn {
        right: 6px;
        font-size: 36px;
    }

    .color-variety-wrap.grid.cols-6 {
        grid-template-columns: repeat(5, 1fr);
    }

    .search-wrapper input[type="search"].active {
        width: 180px;
    }

    .site-btn,
    .site-btn-outline {
        border-width: 2px;
    }

    .blog-card .blog-img {
        height: 250px;
    }

    .admin-wrapper {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }

    .thanks-page img {
        width: 150px;
    }

    .thumbnail-slider-wrap {
        flex-direction: column;
    }

    .small-swiper-wrapper {
        flex-direction: row;
        gap: 0;

        margin-top: 8px;
    }

    .thumbnail-slider-wrap .small-thumb-slider {
        height: max-content;
    }

    .single-blog-content h2 {
        font-size: 28px;
    }

    .hero-border {
        display: none !important;
    }

    .main-hero {
        height: 80vh;
    }

    .main-hero h1 {
        font-size: 58px;
        line-height: 0.8;
    }

    .cross-anch {
        color: var(--primary-color);
    }

    .navbar .menu a {
        font-size: 16px;
    }

    .contact-hero h2,
    .product-header .site-title-h2 {
        font-size: 44px;
    }

    .new-logo {
        width: 100px;
    }

    .flower-img {
        width: 200px;
    }

    .custm-section .grid img {
        height: 200px;
        border-radius: 8px;
    }

    .pro-card .body-text {
        font-size: 18px;
    }

    .checklist-wrapper i {
        color: var(--white-color);
        font-size: 14px;
    }

    .checklist-wrapper p {
        font-size: 18px;
    }

    .un-section .flex-col {
        align-items: center;
        text-align: center;
    }

    .com-container {
        padding-inline: 16px;
        margin-inline: 16px;
    }

    .com-container .site-container {
        padding-inline: initial;
    }

    .header-logo {
        height: 54px;
    }

    .subs-form form {
        flex-direction: column !important;
        position: relative;
    }

    .subs-form .wpcf7-response-output {

        position: initial;
    }

    .policy-tab-section .tab-btn-group {
        overflow-x: auto;
        -ms-overflow-style: none;
        /* IE & Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .policy-tab-section .tab-btn-group::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .policy-tab-section h3 {
        font-size: 22px;
    }

    .policy-tab-section h4 {
        font-size: 18px;
    }

    .variant-thumb img {
        height: 100px;
    }

    .color-variety-wrap {
        gap: 8px;
    }

    .craft-card {
        padding: 8px;
        text-align: initial;
        align-items: flex-start;
    }

    .craft-section .grid {
        gap: 8px;
    }

    .weavers-section .flex-col {
        flex-direction: column;
    }

    .weavers-section h3 {
        font-size: 14px;
        padding: initial !important;
    }

    .weavers-section .grid {
        gap: 12px;
    }

    .div4.for-mobile {
        height: auto;
    }

    .div4.for-mobile .abt-box-content{
        gap: 10px;
    }

    .gallery-cols .div3{
        grid-column: span 2 / span 2;
        grid-column-start: 3;
    }

    .benefit-section .section-header {
        min-width: initial;
    }

    .stories-section .site-title-h2{word-break: break-all;}
    .service-section img {height: 320px;}
    .location-box-wrap{flex-wrap: wrap;}
    .location-box-wrap .divider{display: none;}
    .location-box{max-width: initial;width: 100%;}
    .location-box-wrap h4{margin-bottom: 8px;}
    .bespoke-title{font-size: 30px !important;}

    
.bespoke-extra-text p, .size-28{font-size: 18px !important;}
.bespoke-extra-text h3{font-size: 22px;}

}


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