@media screen and (min-width: 786px) and (max-width: 1800px) {

    .swiper_arrow{
        max-width: 90%;
        width: 90%;
    }
    .about_warehouse{
        background-size: cover;
        background-position: center;
    }
    .about_warehouse{
        margin-bottom: 15rem;
    }
}
@media screen and (min-width: 786px) and (max-width: 1600px) {

    .content, .small_content, .related_post .small_content{
      padding: 0 1.2rem;
    }
    .content .content, .content .small_content{
        padding-left: 0;
        padding-right: 0;
    }
    .swiper_content {
      padding: 10px 1.2rem;
    }
    header .header_main .contact {
      min-width: 200px;
    }
    header .header_main .search input[type="text"] {
      width: 260px;
      padding: 0 1.25rem;
    }
    .swiper_category li.swiper-slide p{
        font-size: 16px;
    }
    .product_banner .flex img{
        width: 50vw;
    }
  }
  @media screen and (min-width: 786px) and (max-width: 1440px) {
    .content, .small_content, .related_post .small_content{
      max-width: 1220px;
    }
    .swiper_content {
      max-width: 1240px;
    }
    header .header_main .search form {
      position: relative;
      z-index: 2;
    }
    header .header_main .search form input[type="text"] {
      position: absolute;
      z-index: -1;
      left: 0;
      top: 0;
      height: 100%;
    }
    .home_blog .main .right .infos{
        padding: 2rem;
    }
    .swiper_arrow{
        max-width: 99%;
        width: 99%;
    }
    .blog_latest .swiper_arrow>div{
        width: 50px;
        height: 50px;
    }
  }
  @media screen and (min-width: 786px) and (max-width: 1220px) {
    .content, .small_content, .related_post .small_content{
      max-width: 1000px;
    }
    .swiper_content {
      max-width: 1020px;
    }
    .swiper_btns.full div {
      width: 3.5rem;
      height: 3.5rem;
    }
    
    header .header_main nav div > ul > li {
      margin-right: 2rem;
    }
    footer .col .menu li a{
        font-size: 16px;
    }
    .footer-main .small_content>.flex{
        gap: 1rem;
    }
    .about_profile .img img{
        max-width: 100%;
    }

    .product_banner .flex img{
      min-width: 650px;
    }
  }
  @media screen and (min-width: 786px) and (max-width: 1100px) {
    header .header_main .contact{
        height: 73px;
    }
    header .header_main nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        background-color: #fff;
        z-index: 19999;
        transition: all 0.3s;
        display: block;
        overflow: auto;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      }
      header .header_main nav::-webkit-scrollbar {
        width: 5px;
      }
      header .header_main nav::-webkit-scrollbar-track {
        background: #b3b1b1;
        border-radius: 10px;
      }
      header .header_main nav::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 10px;
      }
      header .header_main nav::-webkit-scrollbar-thumb:hover {
        background: #646464;
        border-radius: 10px;
      }
      header .header_main nav::-webkit-scrollbar-thumb:active {
        background: #444444;
        border-radius: 10px;
      }
      header .header_main nav.active {
        left: 0;
      }
      header .header_main nav .close {
        padding: 2rem 1.2rem 1.2rem;
        border-bottom: 1px solid #eee;
        text-align: right;
      }
      header .header_main nav .close span {
        display: inline-block;
        width: 15px;
        filter: brightness(0);
        height: 15px;
        background: url('../img/mobile-menu/close.svg') no-repeat center / contain;
        transition: all 0.3s;
        cursor: pointer;
      }
      header .header_main nav .close span:hover {
        transform: rotate(180deg);
      }
      header .header_main nav div > ul {
        display: block;
      }
      header .header_main nav div > ul > li {
        margin-right: 0;
        cursor: pointer;
      }
      header .header_main nav div > ul > li::before {
        display: none;
      }
      header .header_main nav div > ul > li.menu-item-has-children {
        padding: 0;
      }
      header .header_main nav div > ul > li:hover.current-menu-item,
      header .header_main nav div > ul > li:hover.current-menu-parent {
        color: var(--theme_color);
      }
      header .header_main nav div > ul > li:hover > a {
        color: var(--title_color);
      }
      header .header_main nav div > ul > li > a {
        color: var(--title_color);
        line-height: 4rem;
        position: relative;
        padding: 0 0 0 4rem;
      }
      header .header_main nav div > ul > li > a::before {
        content: "";
        width: 23px;
        height: 23px;
        position: absolute;
        left: 2rem;
        top: 50%;
        transform: translateY(-50%);
        background: url('../img/mobile-menu/menu-default.svg') no-repeat center / contain;
      }
      header .header_main nav div > ul > li.menu-item-home > a::before {
        background-image: url(../img/mobile-menu/menu-home.svg);
      }
      header .header_main nav div > ul > li.product-icon > a::before {
        background-image: url(../img/mobile-menu/menu-product.svg);
      }
      header .header_main nav div > ul > li.about-icon > a::before {
        background-image: url(../img/mobile-menu/menu-about.svg);
      }
      header .header_main nav div > ul > li.case-icon > a::before {
        background-image: url(../img/mobile-menu/menu-case.svg);
      }
      header .header_main nav div > ul > li.blog-icon > a::before {
        background-image: url(../img/mobile-menu/menu-blog.svg);
      }
      header .header_main nav div > ul > li.service-icon > a::before {
        background-image: url(../img/mobile-menu/menu-service.svg);
      }
      header .header_main nav div > ul > li.contact-icon > a::before {
        background-image: url(../img/mobile-menu/menu-contact.svg);
      }
      header .header_main nav div > ul > li.menu-item-has-children > a {
        margin-right: 52px;
      }
      header .header_main nav div > ul > li.menu-item-has-children::after {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background: url(../img/mobile-menu/select.svg) no-repeat center / contain;
        position: absolute;
        left: calc(100% - 2rem);
        top: 26px !important;
        transition: all 0.3s;
      }
      header .header_main nav div > ul > li.active::after {
        transform: rotate(180deg) !important;
      }
      header .header_main nav div > ul > li ul {
        position: static;
        visibility: visible;
        padding: 1rem 1rem 0.8rem;
        background-color: #f8f8f8;
        margin: 0 2rem;
        box-shadow: none;
        border-radius: 8px !important;
        display: none;
        transform: translate(0) !important;
        opacity: 1;
        pointer-events: all;
        transition: none;
      }
      header .header_main nav div > ul > li ul li a {
        color: var(--title_color);
        padding: 0.5rem 0;
        white-space: wrap;
        font-size: 14px;
      }
      header .header_main .btns {
        display: flex;
        position: relative;
      }
      header .header_main .btns .icon_menu {
        display: block;
        width: 23px;
        height: 23px;
        background: url(../img/mobile-menu/nav-btn.svg) no-repeat center / contain;
        cursor: pointer;
        position: absolute;
        left: -50px;
        top: 50%;
        transform: translateY(-50%);
      }
      header .header_main .btns .overlay_m {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        z-index: 9999;
      }
      header .header_main .btns .overlay_m.active {
        display: block;
      }
      header .header_main .right{
        height: 100%;
      }
      .swiper_home_banner li.swiper-slide{
        height: auto;
        padding: 5rem 0;
      }
      .home_solutions .main ul li .img{
        height: 250px;
      }
      .home_solutions .main ul li .img a{
        font-size: 18px;
      }
      .home_solutions .main ul li .sub_links{
        gap: 1.5rem;
      }
      .home_solutions .main ul li .sub_links a{
        font-size: 1rem;
      }
      .swiper_related li.swiper-slide{
        box-shadow: none;
        border: 1px solid #eee;
      }
  }
  @media screen and (min-width: 786px) and (max-width: 1000px) {
    .content, .small_content, .related_post .small_content{
      max-width: 786px;
    }
    .home_safe .safe_block li{
        aspect-ratio: 472/560;
        height: auto;
    }
    .home_blog .main .right li:nth-of-type(1) .infos p{
        display: none;
    }
    .home_blog .main .right li.item a{
        padding-top: 29px;
    }
    .home_blog .main .right li.item strong{
        font-size: 18px;
        padding-right: 1rem;
    }
    .related_post .swiper_arrow{
        max-width: 100%;
        width: 100%;
    }
    .related_post .swiper_arrow>div{
        width: 50px;
        height: 50px;
    }
    .swiper_warehouse .swiper-slide .right{
        padding-left: 50px;
    }
    .products_list .sy_products{
        grid-template-columns: repeat(2,1fr);
    }
    .product_banner .head{
        width: 50%;
        max-width: 50%;
    }
    .product_banner .img{
        width: 50%;
    }
    .product_banner .flex img{
        width: 100%;
    }

    .sy_products .sy_product .img img{
        object-fit: contain;
    }
    .product_related .sy_products .sy_product .img{
        height: 200px;
    }
    .product_related .sy_products .sy_product .img img{
        transform: translateY(0);
    }
    .product_related .sy_products .sy_product:hover .img img{
        transform: scale(1.1);
    }
  }
  @media screen and (min-width: 600px) and (max-width: 786px){

    .footer-main{
        margin-top: 0;
    }
    
  }
  