/*--------------------- Responsive (Start) ---------------------*/
 @media (max-width: 991px){
     html{
         font-size: 75%;
    }
     .header .navbar{
         display: none;
    }
     .header #menu-btn{
         display: initial;
    }
     .header .icon-container .btn{
         display: none;
    }
     .mobile-menu {
         display: block;
         position: absolute;
         top: 100%;
         right: 0;
         left: 0;
         z-index: 10000;
         max-height: 80vh;
         overflow-y: auto;
         background: var(--black);
         -webkit-transition: all 0.5s ease-in-out;
         -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;
         -webkit-box-shadow: var(--box-shadow);
         box-shadow: var(--box-shadow);
         border-bottom: 0.2rem solid var(--main-color);
         padding: 2rem 4rem;
         -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
     .header.active .mobile-menu{
         padding-top: 6rem;
    }
     .mobile-menu.active {
         -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
     .mobile-navbar{
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         gap: 1rem;
    }
     .mobile-navbar .nav-link{
         overflow: hidden;
    }
     .mobile-navbar .main-nav-link, .mobile-navbar .sub-nav-link a{
         display: inline-block;
         color: var(--white);
         font-size: 2rem;
         font-weight: bold;
         cursor: pointer;
         width: 100%;
         padding: 1.5rem;
         border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
    }
     .mobile-navbar .main-nav-link{
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
    }
     .mobile-navbar .main-nav-link a{
         color: var(--white);
    }
     .mobile-navbar .sub-nav-link {
         padding: 1rem 0;
         padding-left: 4rem;
         display: none;
         -webkit-transition: all 0s;
         -moz-transition: all 0s;
         -o-transition: all 0s;
         transition: all 0s;
    }
     .mobile-navbar .sub-nav-link a:hover{
         color: var(--main-color);
    }
     .mobile-menu::-webkit-scrollbar{
         width: 0.8rem;
    }
     .mobile-menu::-webkit-scrollbar-thumb{
         border-radius: 1rem;
         background-color: var(--main-color);
    }
     .mobile-menu::-webkit-scrollbar-track{
         background: transparent;
    }
     .blog.grid, .blog.list{
         -ms-flex-wrap: wrap-reverse;
         flex-wrap: wrap-reverse;
    }
     .shop{
         -ms-flex-wrap: wrap-reverse;
         flex-wrap: wrap-reverse;
    }
     .features .box-container{
         -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
         grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }
     .team .box-container{
         -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
         grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }
     .page-single{
         gap: 3rem;
    }
     .portfolio-item{
         width: 50%;
    }
     .team-item {
         height: 45rem;
    }
     .shop, .blog.grid, .blog.list{
         gap: 3rem;
    }
     .vendor-categories .box-container{
         -ms-grid-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
         grid-template-areas: 'category-1 category-1' 'category-2 category-3' 'category-4 category-5' 'category-6 category-6' 
    }
}
 @media (max-width: 768px){
     html{
         font-size: 65%;
    }
     section{
         padding: 3rem 2rem;
    }
     .header .header-1{
         justify-content: flex-end;
    }
     .header .header-contacts{
         display: none;
    }
     .mobile-menu {
         padding: 2rem;
    }
     .header .header-1{
         padding-left: 2rem;
    }
     .header .header-2{
         padding: 0rem 2rem;
    }
     .header .social-contacts{
         padding: 0.5rem 2rem;
    }
     .footer .box-container{
         padding: 2rem;
    }
     .search-container{
         right: 1rem;
    }
     .home-item{
         height: 75rem;
    }
     .home-item .content{
         padding: 10rem 2rem;
    }
     .project-item{
         width: 50%;
    }
     .team-item {
         height: 45rem;
    }
     .gallery .box-container{
         -ms-grid-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
         gap: 1.5rem;
         grid-template-areas: 'gallery-1 gallery-4' 'gallery-2 gallery-4' 'gallery-3 gallery-7' 'gallery-3 gallery-8' 'gallery-5 gallery-9' 'gallery-6 gallery-9';
    }
}
 @media (max-width: 450px){
     html{
         font-size: 50%;
    }
     section{
         /*padding: 3rem 1rem;*/
         padding: 3rem 3rem;
    }
     .mobile-menu {
         padding: 1rem;
    }
     .career .career-intro, .career-positions, .career-benefits, .contact .box-container{
         padding: 3rem 1rem;
    }
     .header .header-1{
         padding-left: 1rem;
    }
     .header .header-2{
         padding: 0rem 1rem;
    }
     .header .social-contacts{
         width: 50%;
         padding: 0.5rem 1rem;
    }
     .footer .box-container{
         padding: 2rem 1rem;
    }
     .footer-item > p{
         font-size: 1.8rem;
    }
     .footer-item .info a{
         font-size: 2.2rem;
    }
     .home-item{
         height: 100vh;
    }
     .home-item .content .text{
         margin-top: 6rem;
    }
     .home-slider .swiper-button-next, .home-slider .swiper-button-prev{
         display: none;
    }
     .features{
         padding-bottom: 1rem;
    }
     .about .experience{
         padding: 2rem;
    }
     .testi-item .intro{
         padding: 0;
    }
     .comment .comment-content{
         -webkit-box-flex: 1;
         -ms-flex: 1 1 25rem;
         flex: 1 1 25rem;
    }
     .comment.reply .comment-content{
         -webkit-box-flex: 1;
         -ms-flex: 1 1 15rem;
         flex: 1 1 15rem;
    }
     .form .input-box, .dark-form .input-box{
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
     .dark-form .input-box .input-field, .dark-form .select{
         -webkit-box-flex: 1;
         -ms-flex: 1 1 25rem;
         flex: 1 1 25rem;
    }
     .team-single .image{
         width: 100%;
    }
     .team-item .team-image{
         height: 40rem;
    }
     .gallery-item{
         height: 40rem !important;
    }
    /* .gallery .box-container{
         -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-template-areas: 'gallery-1' 'gallery-2' 'gallery-3' 'gallery-4' 'gallery-5' 'gallery-6' 'gallery-7' 'gallery-8' 'gallery-9';
    }*/
	 .gallery .box-container{
         -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-template-areas: 'gallery-1' 'gallery-2' 'gallery-3'
        'gallery-4' 'gallery-5' 'gallery-6'
        'gallery-7' 'gallery-8' 'gallery-9'
       
        'gallery-10' 'gallery-11' 'gallery-12'
        'gallery-13' 'gallery-14' 'gallery-15'
        'gallery-16' 'gallery-17' 'gallery-18'
       
        'gallery-19' 'gallery-20' 'gallery-21'
        'gallery-22' 'gallery-23' 'gallery-24'
        'gallery-25' 'gallery-26' 'gallery-27'
        
        'gallery-28' 'gallery-29' 'gallery-30'
        'gallery-31' 'gallery-32' 'gallery-33'
        'gallery-34' 'gallery-35' 'gallery-36'
       
        'gallery-37' 'gallery-38' 'gallery-39'
        'gallery-40' 'gallery-41' 'gallery-42'
        'gallery-43' 'gallery-44' 'gallery-45'
        
        'gallery-46' 'gallery-47' 'gallery-48'
        'gallery-49' 'gallery-50' 'gallery-51'
        'gallery-52'; 
    }
     .account-form{
         max-width: 100%;
    }
     .portfolio-item{
         width: 100%;
    }
     .shop .product-container.list .product-item {
         gap: 0rem;
    }
     .shop .product-container.list .product-item .image {
         width: 30rem;
    }
     .shop .product-container.list .product-item .content {
         padding: 1rem;
         width: 100%;
    }
     .shop .product-container.list .product-item .content p {
         line-height: 1.5;
    }
     .product-info .leave-reply{
         width: 100%;
    }
     .cart .cart-summary{
         width: 100%;
    }
     .whyUs .content, .custom-form .content{
         padding: 4rem 5%;
         -webkit-clip-path: none;
         clip-path: none;
    }
     .contact .contact-info .info-item{
         -webkit-box-flex: 1;
         -ms-flex: 1 1 15rem;
         flex: 1 1 15rem;
    }
}
/*--------------------- Responsive (End) ---------------------*/