@media screen and (min-width: 1500px) {
    :root {
        --h2: 56px;
    }

    .mop-snap {
        height: 700px;
    }

    .intro-snap {
        height: 400px;
    }

    .main-hero {
        height: 100vh;
    }

    .mid-hero-section {
        height: 714px;
    }
}





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

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

        --text-base: 14px;
        --text-small: 14px;
        --menu-text: 14px;
    }

    .spinner-bg-1 {
        height: 300px;
    }

    .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,
    .header-logo,
    .header-logo img {
        height: 56px;
    }

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

    .navbar.active {
        right: 0;
    }

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

    .header-bar .cross-icn {
        font-size: 36px;
        cursor: pointer;
        color: var(--black-color);
    }

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

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

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

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

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

    .speciality-section {
        height: 550px;
    }

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

    .speciality-section .flex-row,
    .subs-section .flex-row,
    .copy-right-bar {
        flex-direction: column;
        align-items: initial;
    }

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

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

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

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

    .footer-navbar {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-evenly;
    }

    .privacy-wrapper {
        gap: 16px;
    }

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

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

    .footer-section .flex-col,
    .social-wrap {
        gap: 24px;
    }

    .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;
        width: 100%;
    }

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

    .single-product-section .grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .thumbnail-slider-wrap {
        gap: initial;
        height: max-content;
    }

    /* .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: 4px;
    }

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


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

    .shop-filters-wrap.active {
        left: 0;
    }

    .f-cross-icn {
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: 24px;
    }

    .product-listing-section .site-container-fluid {
        position: relative;
    }

    .m-wd-100 {
        width: 100%;
    }

    .menu-icn {
        display: block;
    }

    .m-fd-col {
        flex-direction: column;
    }

    .intro-card:nth-child(even) {
        margin-top: initial;
    }

    .intro-snap {
        height: 250px;
    }

    .img-rad {
        border-radius: 12px;
    }

    .mid-hero-section {
        margin-top: 60px;
        height: 350px;
    }

    .primary-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }

    .mission-section .m-fd-col {
        flex-direction: column-reverse;
    }

    .mv-swiper-col {
        margin-left: initial;
        max-width: 100%;
    }

    .custm-sb-cont {
        justify-content: center;
        margin-top: 24px;
    }

    .mv-wrapper .mv-content {
        max-width: 290px;
    }

    .serve-img {
        height: 350px;
    }

    .for-desktop {
        display: none;
    }

    .counter-section {
        height: max-content;
    }

    .header-wrap {
        padding-right: 16px;
    }

    .navbar .menu a {
        color: var(--black-color);
    }

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

    .cta-section {
        height: 350px;
    }

    .cta-section .m-fd-col {
        width: 100%;
    }

    .cta-section .site-btn {
        width: 100%;
    }

    .form-row,
    .form-row>p {
        flex-direction: column;
        gap: 8px;
    }

    .contact-form form, .contact-form select {
        gap: 8px;
    }

    .career-cols {
        display: flex;
        flex-direction: column;
    }

    .mid-hero-section {
        border-radius: 20px;
    }

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

    .product-snap img {
        height: 200px;
    }


}


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