/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {

    /* ======= header ========== */
    header {
         .bottom-header {
            .primary-menu {
                gap: 10px;
                nav{
                    ul{
                        gap: 6px;
                    }
                    a {
                        color: #000;
                        font-size: 16px;
                        padding: 10px 6px;
                    }
                }
            }
             .main-bottom-header {
                 .logo {
                    img {
                        max-width: 200px;
                    }
                }
                .primary-btn {
                    button {
                        padding: 15px 12px;
                    }
                }
            }
        }
    }

    /* ===== hero section ========== */
    .hero-section {
        padding: 170px 0px;
        .banner-content {
            width: 90%;
        }
    }
    .about-us {
         .about-img {
            img {
                border-radius: 10px;
                width: 100%;
            }
        }
    }

    .services {
        .services-item:nth-last-child(1){
            display: none;
        }
        .main-services {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
    }

    .quality-section {
        padding: 150px 0px 200px;
        h3 {
            font-size: 44px;
        }
        .quality-content{
            max-width: 100%;
        }

    }
    .quality-items {
        .item:nth-last-child(1){
            display: none;
        }
        .main-quality-items{
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
    }


    /* ========== hiring page ======== */

    #hiring-page {
        .main-hiring-form {
            width: 90%;
        }
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
    h1 {
        font-size: 65px;
        font-family: Great vibes;
    }
    header{
        .bottom-header {
            padding: 10px 0px;
        
            .primary-menu {
              flex-direction: column;
              padding: 150px 20px;
              position: fixed;
              background: #fff;
              width: 100%;
              max-width: 470px;
              right: -100%;
              top: 0px;
              transition: all .4s ease-in;
              z-index: 1;
              height: 100vh;
        
              transition: .5s;
        
              ul {
                flex-direction: column;
                gap: 15px;
              }
        
              nav {
                text-align: center;
        
                a {
                  display: block;
                  padding: 10px 0px;
                  font-size: 20px;
                }
              }
        
            }
        
            .primary-menu.active {
                background-color: #ffc0cb;
              right: 0%;
              /* top: 0%; */
            }
        
            .menu-icon {
              display: block;
              border: none;
              background: transparent;
              width: 40px;
              z-index: 9;
              font-size: 24px;
            }
          }
    }
    .hero-section {
        .banner-content {
            width: 100%;
        }
    }
    .services {
        .services-item:nth-last-child(1){
            display: block;
        }
        .main-services {
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
        }
    }
    .about-us {
        .main-about-us {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-direction: column;
        }
        .about-img {
            width: 100%;
        }
        .about-content {
            width: 100%;
        }
    }

    .quality-items {
        .item:nth-last-child(1){
            display: flex;
        }
        .main-quality-items{
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
        }
    }

    .location {
        .main-loacation {
            .item {            
             width: 46%;
            }
        }
    }


    /* ========== about page ========== */

    #about-page {
        .main-about-more{
            flex-direction: column;
        }
        .about-more-img {
            width: 100%;
            max-width: 50%;
        }
        .about-more-content{
            width: 100%;
        }
    }

    
    /* ============= service page ========== */

    #service-page {
        .main-services {
           .container {
            gap: 20px;
           }
     
       }
   }

   
    /* ========== hiring page ======== */

    #hiring-page {
        .main-hiring-form {
            width: 100%;
        }
    }

       
    /* ========== book page ======== */

    #book-page {
        .main-book {
            width: 100%;
        }
    }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 670px) {
    header {
        .top-header {
            .header-social-icons {
               display: none;
            }
        }
    }
    .about-us {
        .main-about-us {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-direction: column;
        }
        .about-img {
            width: 100%;
        }
        .about-content {
            width: 100%;
        }
    }
    .services {
        .main-services {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
    }
    .quality-items {
        .main-quality-items {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
    }
    footer {
        .main-top-footer {
            display: flex;
            justify-content: space-between;
            color: #fff;
            flex-wrap: wrap;

            .box{
                margin-top: 20px;
            }
        }
    }

    /* ======= services page ======== */

    #service-page {
         .main-services {
            .container {
                gap: 20px;
                flex-direction: column;
            }
            .service-name{
                width: 100%;
            }
            .tab{
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                grid-gap: 15px;
                align-items: stretch;
                /* margin-top: 40px; */
                width: 100%;
            }
            .service-content{
                width: 100%;
            }
            .tab button{
                font-size: 14px;
                padding: 8px 10px;
            }
        }
    }

    /* =========== gallery ========== */
    #gallery-page {
        .main-gallerys {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
            grid-gap: 20px;
            align-items: stretch;
        }
    }

    #about-page {
        .main-benefit {
            display: flex;
            gap: 40px;
            flex-direction: column;
            .box{
                width: 100%;
            }
        }
    }
       
    /* ========== hiring page ======== */

    #hiring-page {
        .main-hiring-form {
            width: 100%;
        }
        .hiring-form-img{
            display: none;
        }
        .hiring-form {
            width: 100%;
        }
    }

    /* =========== contact form ======= */

    #contact-page {
        .main-form {
            display: flex;
            gap: 20px;
            flex-direction: column-reverse;
        }
        .shop-detail{
            width: 100%;
        }
        .form-col{
            width: 100%;
        }
    }

        /* ========== book page ======== */

        #book-page {
            .main-book {
                width: 100%;
            }
            .book-form-img{
                display: none;
            }
            .book-form {
                width: 100%;
            }
        }
    

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 550px) {
    h1 {
        font-size: 46px;
    }
    .section-padding {
        padding: 40px 0px;
    }
    h3{
        font-size: 30px;
    }
    h5{
        font-size: 14px;
    }
    header {
        .top-header {
            .shop-details {
            
                align-items: start;
                gap: 6px;
                flex-direction: column;
            }
        }
        .bottom-header {
             .main-bottom-header {
                 .logo {
                    img {
                        max-width: 180px;
                    }
                }
            }
            .primary-menu {
                max-width: 300px;
            }
        }

    }
    .hero-section {
        padding: 100px 0px;
    }
    .quality-section {
     
        padding: 70px 0px 145px;
        h3 {
            font-size: 30px;
        }
    }
    .services {
        .main-services {
            grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
            margin-top: 20px;
            grid-gap: 10px;
        }
        .item-content {
            h5 {
                margin-top: 10px;
                font-size: 14px;
            }
            p{
                font-size: 12px;
            }
        }
        .item-img {
            height: 160px;
        }
        .primary-btn {
            margin-top: 20px;
        }
        .item-icon {
            span {
                width: 60px;
                height: 60px;
            }
            img {
                width: 54px;
            }
        }
    }
    .quality-items {
        .main-quality-items {
            grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
            margin-top: 20px;
            grid-gap: 10px;
        }
        p{
            font-size: 12px;
        }
        .item {
            padding: 10px 10px 15px;
            gap: 5px;
            img {
                width: 70px;
            }
        }
    }
    .about-us {
        .main-about-us {
            gap: 20px;
        }
    }
    .testimonial {
        .main-testimonial {
            .item {
                padding: 20px;
                border-radius: 10px;
                img{
                    width: 122px;
                }
                p{
                    font-size: 14px;
                }
                .author-name{
                    margin-top: 5px;
                font-size: 16px;
                }
    
            }
        }
        .primary-btn {
            margin-top: 10px;
        } 
    }

    .location {
         .main-loacation {
            .item {
                width: 100%;
            }
        }
    }

    .inner-banner{
        padding: 80px 0px;
    }
    /* =========== about page ========= */

    #about-page {
        .about-more-img {
            width: 100%;
            max-width: 100%;
        }
        .main-about-more {
        gap: 20px;
        }
        .main-why-choose{
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        }

    }

    /* ===== gallery page ======== */

    #gallery-page {
        .main-gallerys {
            grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
            grid-gap: 15px;
        }
    }

    form{
        padding: 10px;
        .box-2 {
            gap: 10px;
        }
    }

        /* =========== contact form ======= */

        #contact-page {
            .shop-detail{
                a{
                    font-size: 14px;
                }
            }
        }

        #expert-page {
             .experts-items {
                grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
                .item {
            flex-direction: column;
                }
                .item-img {
                    width: 100%;
                }
                .item-content {
                    width: 100%;
                }
            }
        }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 400px) {
    p{
        font-size: 14px;
    }
    h1{
        font-size: 38px;
    }
    h3{
        font-size: 24px;
    }
    h6{
        font-size: 20px;
    }
    .container{
        padding: 0px 10px;
    }
    header {
         .top-header {
            a {
   
                font-size: 11px;
            }
        }
    }
    .hero-section {
        padding: 60px 0px;
    }
    .section-padding {
        padding: 30px 0px;
    }
    .section-heading {
        .wdt-content-image::before {
            width: 32px;
            height: 2px;
        }
        .wdt-content-image::after{
            width: 32px;
            height: 2px;
        }
    }
    .quality-section {
        h3 {
            font-size: 22px;
        }
    }
    .about-us {
        .about-content {
            gap: 10px;
        }
    }
    .quality-items {
        .main-quality-items {
            grid-template-columns: repeat(auto-fill, minmax(139px, 1fr));
        }
        h5{
            font-size: 12px;
        }
        .item {
            img {
                width: 62px;
            }
        }
    }
    .testimonial {
        .main-testimonial {
            margin-top: 20px;
            .item {
                img {
                    width: 100px;
                }
            }
        }
    }
    footer {
         .main-top-footer {
            a {
                font-size: 14px;
            }
            .box{
                width: 100%;
            }
        }
        .top-footer {
            padding: 30px 0px;
        }
        .main-bottom-footer {
            font-size: 12px;
        }
    }

    /* ========= form ========== */
    form{
        padding: 10px;
        .box-2 {
            flex-direction: column;
            div {
                width: 100%;
            }
        }
        label{
            font-size: 14px;
            margin-bottom: 5px;
        }
    }

}