/* ==========================================
        Categories Responsive
========================================== */

@media (max-width:1200px){

    .categories-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .categories-section{

        padding:90px 0;

    }

    .section-header h2{

        font-size:34px;

    }

    .section-header p{

        font-size:16px;

        line-height:2;

        padding:0 20px;

    }

    .categories-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .category-card{

        padding:35px 25px;

    }

    .category-icon{

        width:74px;

        height:74px;

        font-size:34px;

    }

}
/* ==========================================
            Brands Responsive
========================================== */

@media (max-width:1200px){

    .brands-slider{

        grid-template-columns:repeat(4,1fr);

    }

}

@media (max-width:992px){

    .brands-slider{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:768px){

    .brands-section{

        padding:90px 0;

    }

    .brands-slider{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .brand-card{

        height:110px;

    }

    .brand-card img{

        max-width:90px;

        max-height:45px;

    }

}

@media (max-width:480px){

    .brands-slider{

        grid-template-columns:1fr;

    }

}
/* ==========================================
        Products Responsive
========================================== */

@media (max-width:1200px){

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .products-section{

        padding:90px 0;

    }

    .products-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .product-image{

        height:220px;

    }

}

@media (max-width:480px){

    .product-content{

        padding:22px;

    }

    .product-content h3{

        font-size:20px;

    }

    .product-btn{

        width:100%;

    }

}
/* ==========================================
            Projects Responsive
========================================== */

@media (max-width:1200px){

    .projects-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


@media (max-width:850px){

    .projects-toolbar{

        grid-template-columns:
            1fr 1fr;

    }

    .projects-search{

        grid-column:
            1 / -1;

    }

}


@media (max-width:768px){

    .projects-categories{

        padding:
            60px 0 35px;

    }

    .projects-section{

        padding:
            35px 0 70px;

    }

    .projects-toolbar{

        grid-template-columns:
            1fr;

        padding:
            18px;

    }

    .projects-search{

        grid-column:
            auto;

    }

    .projects-search-box{

        flex-direction:
            column;

    }

    #projectSearchButton{

        width:
            100%;

        min-height:
            46px;

    }

    .category-tabs{

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding:
            4px 2px 12px;

        scrollbar-width:
            none;

    }

    .category-tabs::-webkit-scrollbar{

        display:
            none;

    }

    .category-tab{

        flex:
            0 0 auto;

        padding:
            11px 18px;

        font-size:
            12px;

    }

    .projects-grid{

        grid-template-columns:
            1fr;

        gap:
            18px;

    }

    .project-image{

        height:
            235px;

    }

    .project-card-content{

        padding:
            20px;

    }

    .project-card-content h3{

        font-size:
            19px;

    }

    .project-card-meta{

        grid-template-columns:
            1fr;

    }

    .project-card-actions{

        grid-template-columns:
            1fr;

    }

    .projects-cta{

        padding:
            70px 0;

    }

    .projects-cta-content h2{

        font-size:
            28px;

    }

}


@media (max-width:480px){

    .projects-hero{

        min-height:
            330px;

    }

    .projects-hero-content{

        padding:
            105px 15px
            40px;

    }

    .projects-hero-content h1{

        font-size:
            36px;

    }

    .projects-hero-content p{

        font-size:
            13px;

    }

    .projects-section{

        padding:
            30px 0 60px;

    }

    .project-image{

        height:
            210px;

    }

    .project-card-content{

        padding:
            17px;

    }

    .project-card-content h3{

        font-size:
            18px;

    }

}
/* ==========================================
            Articles Responsive
========================================== */

@media (max-width:1200px){

    .articles-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .articles-section{

        padding:90px 0;

    }

    .articles-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .article-image{

        height:220px;

    }

    .article-content{

        padding:24px;

    }

    .article-content h3{

        font-size:22px;

    }

}

@media (max-width:480px){

    .article-image{

        height:200px;

    }

    .article-btn{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================
            Why Choose Us Responsive
========================================== */

@media (max-width:1200px){

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .why-section{

        padding:90px 0;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .why-card{

        padding:30px 24px;

    }

    .why-card h3{

        font-size:22px;

    }

    .why-icon{

        width:64px;

        height:64px;

        font-size:28px;

    }

}

@media (max-width:480px){

    .why-card{

        border-radius:22px;

    }

}
/* ==========================================
            Company Intro Responsive
========================================== */

@media (max-width:992px){

    .company-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .company-image{

        order:1;

    }

    .company-content{

        order:2;

    }

}

@media (max-width:768px){

    .company-section{

        padding:90px 0;

    }

    .company-content h2{

        font-size:34px;

    }

    .company-features{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .company-image img{

        border-radius:24px;

    }

    .company-content h2{

        font-size:28px;

    }

}
/* ==========================================
        Quick Contact Responsive
========================================== */

@media (max-width:992px){

    .quick-contact-wrapper{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .quick-contact-section{

        padding:90px 0;

    }

    .contact-info-box{

        order:2;

    }

    .quick-contact-form{

        order:1;

    }

}

@media (max-width:480px){

    .info-item{

        padding:22px;

    }

    .info-icon{

        width:56px;

        height:56px;

        font-size:26px;

    }

}
/* ==========================================
                Footer Responsive
========================================== */

@media (max-width:992px){

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        padding:60px 0 40px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

}

@media (max-width:480px){

    .footer-logo{

        width:140px;

    }

    .footer-column h3{

        font-size:20px;

    }

    .footer-column p,

    .footer-column ul li{

        font-size:15px;

    }

}
/* =========================================================
   PRODUCTS PAGE - RESPONSIVE
========================================================= */


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

    .products-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .products-toolbar {

        grid-template-columns:
            1fr 1fr;

    }

    .products-search {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .products-hero {

        min-height: 380px;

    }

    .products-hero-content {

        padding:
            120px 20px 50px;

    }

    .products-hero-content h1 {

        font-size: 48px;

    }

    .products-hero-content p {

        font-size: 15px;

    }

    .products-categories {

        padding:
            65px 0 35px;

    }

    .products-section {

        padding:
            35px 0 75px;

    }

    .products-toolbar {

        grid-template-columns:
            1fr;

    }

    .products-search {

        grid-column:
            auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .section-container {

        width:
            90%;

    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .products-hero {

        min-height:
            330px;

    }

    .products-hero::before {

        width:
            420px;

        height:
            420px;

    }

    .products-hero::after {

        width:
            290px;

        height:
            290px;

    }

    .products-hero-content {

        padding:
            105px 15px 40px;

    }

    .products-hero-badge {

        font-size:
            10px;

        letter-spacing:
            1.5px;

    }

    .products-hero-content h1 {

        font-size:
            38px;

        margin-bottom:
            14px;

    }

    .products-hero-content p {

        font-size:
            13px;

        line-height:
            1.9;

    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .section-heading {

        margin-bottom:
            30px;

    }

    .section-heading h2 {

        font-size:
            27px;

    }

    .section-heading p {

        font-size:
            13px;

    }


    /* -----------------------------------------
       CATEGORY TABS
    ----------------------------------------- */

    .category-tabs {

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding:
            4px 2px 12px;

        scrollbar-width:
            none;

    }

    .category-tabs::-webkit-scrollbar {

        display:
            none;

    }

    .category-tab {

        flex:
            0 0 auto;

        padding:
            11px 18px;

        font-size:
            12px;

    }


    /* -----------------------------------------
       TOOLBAR
    ----------------------------------------- */

    .products-toolbar {

        padding:
            18px;

        gap:
            15px;

        border-radius:
            15px;

    }

    .search-box {

        flex-direction:
            column;

    }

    .search-box input {

        height:
            46px;

    }

    #productSearchButton {

        width:
            100%;

        min-height:
            46px;

    }

    .products-filter select {

        height:
            46px;

    }


    /* -----------------------------------------
       PRODUCT GRID
    ----------------------------------------- */

    .products-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    /* -----------------------------------------
       PRODUCT IMAGE
    ----------------------------------------- */

    .product-image {

        height:
            235px;

    }

    .product-image img {

        padding:
            20px;

    }


    /* -----------------------------------------
       PRODUCT CONTENT
    ----------------------------------------- */

    .product-content {

        padding:
            20px;

    }

    .product-content h3 {

        font-size:
            19px;

    }

    .product-content > p {

        min-height:
            auto;

        font-size:
            12px;

    }


    /* -----------------------------------------
       PRODUCT META
    ----------------------------------------- */

    .product-meta {

        grid-template-columns:
            1fr;

    }


    /* -----------------------------------------
       PRODUCT BUTTONS
    ----------------------------------------- */

    .product-actions {

        grid-template-columns:
            1fr;

    }

    .product-actions a {

        min-height:
            46px;

    }


    /* -----------------------------------------
       RESULTS
    ----------------------------------------- */

    .products-results-info {

        font-size:
            12px;

    }


    /* -----------------------------------------
       PAGINATION
    ----------------------------------------- */

    .products-pagination {

        margin-top:
            35px;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .products-cta {

        padding:
            70px 0;

    }

    .products-cta::before {

        width:
            350px;

        height:
            350px;

    }

    .products-cta-content h2 {

        font-size:
            26px;

    }

    .products-cta-content p {

        font-size:
            13px;

    }

    .cta-button {

        width:
            100%;

        max-width:
            300px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .products-hero-content h1 {

        font-size:
            33px;

    }

    .products-hero-content p {

        font-size:
            12px;

    }

    .category-tab {

        padding:
            10px 15px;

    }

    .product-image {

        height:
            210px;

    }

    .product-content {

        padding:
            17px;

    }

    .product-content h3 {

        font-size:
            18px;

    }

}