@media (max-width:1401px) {
    header .primary-menu {
        gap: 0px;
    }

    header .primary-menu ul a {
        padding  : 8px 7px;
        color    : #000;
        font-size: 13px;
    }
}




@media only screen and (max-width: 1200px) {
    .full-container {
        padding: 0px 20px;
    }

    .Categorie-btn {
        width: 170px;
    }

    h2 {
        font-size: 38px;
    }

    header {
        & .logo {
            & img {
                width: 250px;
            }
        }

        & .shop-details {
            gap: 12px;
        }

        & .primary-btn a {
            padding: 15px 12px;
        }

        & .primary-menu {
            gap: 0px;











            & ul {
                gap: 0px;
            }
        }
    }

    .hero-section {
        & .banner {
            width: 65%;
        }

        & .popular-categories {
            width: 40%;
        }

        & .main-hero-section {
            gap: 18px;
        }
    }

    .hero-section {
        & .popular-categories {
            & .item {
                & .item-content {
                    & h6 {
                        font-size: 22px;
                    }

                    padding: 16px;
                }
            }
        }
    }

    .marquee-tagline {
        & .main-marquee {
            font-size: 32px;
        }
    }

    .our-products {
        & .our-product-heading {
            width: 70%;
        }

        & .main-products {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }

        & .item {
            padding: 15px;

            & .product-content {
                & .product-title {
                    font-size: 18px;
                }
            }
        }
    }

    .how-we-work {
        & .we-work-heading {
            width: 70%;
        }
    }
}

@media(max-width:1071px) {
    header {
        & .primary-menu {
            & ul {
                a {
                    font-size: 12px;
                }
            }
        }
    }


}

@media(max-width:1054px) {
    header .left {

        gap: 34px;
    }

    header .primary-btn a {
        padding  : 9px 7px;
        font-size: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .banner-content h3 {
        font-size: 3.5rem;
    }

    .Categorie-btn {
        width    : 200px;
        font-size: 14px;
        padding  : 10px 15px;
    }

    header {
        & .middle-tagline {
            display: none;
        }

        & .toggle {
            position        : relative;
            width           : 60px;
            height          : 60px;
            background-color: rgb(255, 255, 255);
            box-shadow      : rgba(0, 0, 0, 0.08) 0px 10px 20px;
            border-radius   : 10px;
            display         : flex;
            justify-content : center;
            align-items     : center;
            cursor          : pointer;
            overflow        : hidden;
            z-index         : 99;

            & span {
                position     : absolute;
                width        : 30px;
                height       : 3px;
                background   : rgb(0, 0, 0);
                border-radius: 10px;
                transition   : 0.5s;
            }

            & span:nth-child(1) {
                transform: translateY(-10px);
                width    : 25px;
                right    : 15px;
            }

            & span:nth-child(2) {
                transform: translateY(10px);
                width    : 25px;
                right    : 15px;
            }
        }

        & .active span:nth-child(1) {
            width           : 20px;
            transform       : translateY(0px) rotate(45deg);
            transition-delay: 0.125s;
        }

        & .active span:nth-child(2) {
            width           : 20px;
            transform       : translateY(0px) rotate(315deg);
            transition-delay: 0.25s;
        }

        & .active span:nth-child(3) {
            transform: translateX(60px);
        }

        & .primary-menu {
            display       : block;
            flex-direction: column;
            padding       : 150px 20px;
            position      : fixed;
            background    : #222a92;
            width         : 100%;
            max-width     : 300px;
            right         : -100%;
            top           : 0px;
            z-index       : 1;
            height        : 100vh;
            transition    : 0.5s;

            & ul {
                flex-direction: column;
                gap           : 5px;
            }

            & nav {
                text-align: center;

                & a {
                    display  : block;
                    padding  : 10px 0px;
                    font-size: 18px;
                }

                & ul a {
                    color: #ffffff;
                }
            }
        }

        & .primary-menu.active-menu {
            right     : 0%;
            z-index   : 8;
            text-align: center;
        }

        & .desktop-view-1 {
            display: none;
        }

        & .mobile-view-1 {
            display: block;
        }
    }

    .hero-section {
        padding: 20px 0px 40px;

        & .popular-categories {
            & .popular-items {
                display: none;
            }
        }

        & .banner {
            width: 100%;
        }
    }

    .main-support {
        gap: 20px;

        & .support-item {
            padding: 0px;
        }

        & .icon img {
            width: 42px;
        }
    }

    .home-shop-categories {
        & .categories-items {
            & .single-item-content {
                position  : absolute;
                bottom    : 20px;
                width     : 100%;
                text-align: center;
            }
        }
    }

    .marquee-tagline {
        padding: 12px 0px;

        & .main-marquee {
            font-size: 22px;
        }
    }

    .about-us {
        & .main-about-us {
            flex-direction: column-reverse;

            & .about-img {
                width: 70%;
            }

            & .about-content {
                width: 100%;
            }
        }
    }

    .our-products {
        & .our-product-heading {
            width: 90%;
        }

        & .main-products {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        }
    }

    .how-we-work {
        & .main-how-we-work {
            gap       : 19px;
            margin-top: 60px;
        }

        & .we-work-heading {
            width: 90%;
        }

        & .step {
            padding: 0px 15px;

            & h5 {
                font-size: 18px;
            }
        }
    }

    footer {
        & .main-top-footer {
            gap: 10px;
        }

        & .item-box {
            padding: 20px;
        }

        & .box3 {
            & p {
                font-size  : 14px;
                line-height: 1.5;
            }
        }
    }

    .content-1 {
        flex-direction: column;
        padding       : 5px;
    }

    .header-cart-info a i {
        color: rgb(0, 0, 0);
    }

    .categories-toggle {
        background: transparent;
        border    : 2px solid rgba(255, 255, 255, 0.7);
    }

    .categories-toggler {
        margin-right : 0px;
        margin-bottom: 20px;
        width        : 100%;
    }

    .categories-btn {
        width          : 100%;
        justify-content: center;
    }

    .categories-dropdown {
        width     : 100%;
        position  : static;
        opacity   : 1;
        visibility: visible;
        transform : none;
        display   : none;
        margin-top: 15px;
        box-shadow: none;
    }

    .categories-toggler:hover .categories-dropdown {
        display: block;
    }

    .services-content {
        grid-template-columns: 1fr;
        gap                  : 40px;
    }

    .services-text {
        padding-right: 0px;
    }

    .services-title {
        font-size: 2.4rem;
    }

    .process-section {
        grid-template-columns: 1fr;
        gap                  : 40px;
    }

    .process-content {
        padding-right: 0px;
        text-align   : center;
    }

    .printing-title {
        font-size: 2.5rem;
    }

    .artist-content {
        grid-template-columns: 1fr;
        gap                  : 40px;
    }

    .music-title {
        font-size: 2.2rem;
    }

    .video-player {
        height: 250px;
    }

    .left {
        display       : flex;
        gap           : 40px;
        flex-direction: row-reverse;
    }
}

@media only screen and (max-width: 768px) {
    .inner-section {
        padding: 130px 0px 40px;
    }

    .banner-content h3 {
        font-size: 2.8rem;
    }

    .breadcrumb {
        padding: 6px 25px;
    }

    .inner-heading {
        font-size: 0.8rem;
    }

    .hero-section {
        & .banner-item {
            & .owl-dots {
                padding: 5px;

                & .owl-dot span {
                    width : 21px;
                    height: 3px;
                    margin: 3px 7px;
                }
            }
        }
    }

    .main-support {
        gap      : 20px;
        flex-wrap: wrap;

        & .support-item {
            width: 48%;
        }
    }

    .home-shop-categories {
        & .categories-items {
            flex-wrap: wrap;

            & .item {
                width: 50%;
            }
        }
    }

    .about-us {
        & .main-about-us {
            & .about-img {
                width: 100%;
            }
        }
    }

    .our-products {
        & .main-products {
            grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
        }
    }

    .how-we-work {
        & .we-work-heading {
            width: 100%;
        }

        & .main-how-we-work {
            gap       : 40px;
            margin-top: 50px;
            flex-wrap : wrap;
        }

        & .step {
            & h5 {
                font-size: 24px;
            }
        }
    }

    footer {
        & .main-top-footer {
            flex-wrap: wrap;
            gap      : 30px;
        }
    }

    .social__icon {
        width    : 30px;
        height   : 30px;
        font-size: 16px;
    }

    .heading--secondary {
        font-size: 24px;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-info,
    .contact-form {
        width: 100%;
    }

    .section-heading h2 {
        font-size: 28px;
    }

    .services-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap                  : 20px;
    }

    .logo-services {
        padding: 60px 4%;
    }

    .services-title {
        font-size: 2rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width            : 500px;
        margin               : 0px auto;
    }

    .screen-printing {
        padding: 60px 4%;
    }

    .printing-title {
        font-size: 2.2rem;
    }

    .printing-subtitle {
        font-size: 1.1rem;
    }

    .features-grid,
    .types-container {
        grid-template-columns: 1fr;
        max-width            : 500px;
        margin               : 0px auto;
    }

    .music-section {
        padding: 60px 4%;
    }

    .platform-icons {
        grid-template-columns: 1fr;
    }

    .player-controls {
        flex-direction: column;
        gap           : 15px;
        text-align    : center;
    }

    .section-2 {
        padding: 60px 15px;
    }

    .content-2 {
        grid-template-columns: 1fr;
        max-width            : 400px;
        margin               : 0px auto;
    }
}

@media only screen and (max-width: 600px) {
    h2 {
        font-size: 28px;
    }

    header {
        & .social-media {
            display: none;
        }
    }

    .main-support {
        gap: 15px;
    }

    .home-shop-categories {
        padding: 40px 0px 0px;
    }

    .about-us {
        padding: 40px 0px;
    }

    .our-products {
        padding: 40px 0px;

        & .our-product-heading {
            gap: 10px;
        }

        & .main-products {
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap                  : 10px;
        }

        & .item {
            padding: 10px;

            & .product-content {
                padding-top: 10px;
            }
        }
    }

    .how-we-work {
        padding: 40px 0px;

        & .we-work-heading {
            gap: 10px;
        }
    }

    footer {
        & .item-box {
            width: 100%;
            flex : 1 1 auto;
        }

        & .main-top-footer {
            flex-wrap: wrap;
            gap      : 15px;
        }
    }

    .content__image {
        padding: 5px;
    }
}

@media (max-width: 576px) {
    .services-container {
        grid-template-columns: 1fr;
    }

    .service-image {
        height: 180px;
    }

    .services-title {
        font-size: 1.8rem;
    }

    .services-subtitle {
        font-size: 1rem;
    }

    .services-text p {
        font-size: 1rem;
    }

    .services-highlight {
        padding: 25px;
    }

    .portfolio-title {
        font-size: 1.8rem;
    }

    .printing-title {
        font-size: 1.8rem;
    }

    .process-content h3 {
        font-size: 1.8rem;
    }

    .process-content p {
        font-size: 1rem;
    }

    .features-title,
    .types-title {
        font-size: 1.8rem;
    }

    .music-title {
        font-size: 1.8rem;
    }

    .video-player {
        height: 200px;
    }

    .card-content-2 {
        padding: 20px;
    }

    .card-title-2 {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 450px) {
    h2 {
        font-size: 24px;
    }

    .container {
        padding: 0px 10px;
    }

    .full-container {
        padding: 0px 10px;
    }

    header {
        & .shop-details {
            gap: 10px;

            & i {
                margin-right: 5px;
            }

            & a {
                gap: 1px;
            }
        }
    }

    .hero-section {
        padding: 10px 0px 40px;

        & .main-hero-section {
            gap: 0px;
        }
    }

    .main-support {
        gap: 10px;

        & .support-item {
            flex-direction: column;
            text-align    : center;
        }
    }

    .about-us {
        & .main-about-us {
            & .about-img {
                gap: 10px;

                & .group-img {
                    width         : 50%;
                    display       : flex;
                    flex-direction: column;
                    gap           : 10px;
                }
            }
        }
    }

    .our-products {
        & .our-product-heading {
            width: 100%;

            & p {
                line-height: 1.5;
            }
        }

        & .main-products {
            grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        }

        & .item {
            & .product-content {
                & .product-title {
                    font-size: 16px;
                }
            }
        }
    }

    .how-we-work {
        & .we-work-heading {
            & p {
                display: none;
            }
        }
    }
}

@media (max-width: 430px) {
    header {
        & .logo {
            & img {
                width: 150px;
            }
        }

        & .left {
            display: flex;
            gap    : 6px;
        }

        & .shop-details {
            gap           : 10px;
            flex-direction: column;
        }

        & .toggle {
            position: relative;
            width   : 46px;
            height  : 36px;
        }
    }
}

@media (max-width: 576px) {
    .inner-section {
        padding: 100px 0px 30px;
    }

    .banner-content h3 {
        font-size: 2.2rem;
    }

    .banner-content p {
        font-size     : 0.9rem;
        letter-spacing: 1px;
        margin-bottom : 25px;
    }

    .breadcrumb {
        padding       : 5px 20px;
        flex-direction: row;
        border-radius : 25px;
        /* margin     : 0px 5px; */
        /* gap        : 0px; */
    }

    .inner-heading {
        font-size: 0.75rem;
    }


}


@media(max-width:430px) {
    header .header-cart {
        position: relative;
        padding : 0px 14px;
    }

    header #cartCount {
        position: absolute;
        top     : -8px;
        right   : 2px;
    }
}