@media (min-width: 768px) and (max-width: 1024px){

    header{height: 60px;}
    header .logo{margin-left: 15px; flex: 0;}
    header img{width: 140px;}
    header ul{justify-content: flex-end;}
    header ul li a{display: block; border-top: none;}
    header ul li a:hover{border-top: none;}
    header .menu{display: none; width: 60px; height: 60px; font-size: 0px}

    .slider {height: 600px; margin-top: 0;}
    .slider .list .item .content{bottom: 0px; padding: 40px 40px 135px 40px; height: 800px; top: auto; clip-path: polygon(0 0, 40% 0, 100% 100%, 0% 100%); background: #AB052D; width: 70%; max-width: 100%; z-index: 1; justify-content: end;}
    .slider .list .item .content h2{width: 70%; font-size: 30px; line-height: 38px;}
    .slider .arrows{bottom: 30px; right: 30px;}


    .about-area{padding: 60px 0px}
    .about-area .abt-area-desc{padding: 0px}
    .about-area .abt-area-desc h2{font-size: 28px}
    .about-area .abt-area-desc p{font-size: 14px; width: auto; line-height: 24px; height: auto;}

    .why{min-height: auto;}
    .why .container-fluid{padding: 60px 15px 50px 15px}
    .why .container-fluid .title-area h2{font-size: 28px; line-height: 36px; margin: 0px}
    .why .container-fluid .break-line{margin-top: 10px; margin-bottom: 20px}
    .why .container-fluid .list-area ul li{width: auto;}
    .why .container-fluid .list-area ul li p{font-size: 14px; text-align: left;}

    .our-mission{padding: 60px 0}
    .our-mission .desc-area {padding: 0 5px;}
    .our-mission .img-area{width: 200px;}
    .our-mission .img-area img{width: 100%}
    .our-mission .desc-area h2{font-size: 28px; line-height: 36px; margin: 0px}
    .our-mission .desc-area .break-line{margin-top: 10px; margin-bottom: 20px}
    .our-mission .desc-area p{text-align: left; font-size: 14px; line-height: 24px}

    footer .container-fluid {padding: 30px !important;}
    footer .logo-area img{width: 150px}
    footer .mb-4.logo-area{margin: 0px !important;}
    footer .logo-area p{width: auto; text-align: left; margin: 20px 0 10px 0 !important;}
    footer .link-area{padding: 0px; margin: 0 !important; place-content: flex-start !important;}
    footer .addr-area{padding: 0px; margin:0 !important}
    footer .copy-area{padding: 15px 0px; margin: 0px; width: 100%; text-align: center; border-top: #505d6a 1px solid;}

    .bg-area .title-area{padding: 200px 15px 30px 30px; width: 50%; height: auto; margin-top: 0; clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);}
    .bg-area .title-area h2 { color: #FFF; margin-top: 10px; font-size: 26px; font-style: normal; font-weight: 700; line-height: 40px;}

    .product-sec{padding: 50px 30px 30px 30px}
    .product-sec .product-card{padding: 25px; min-height: auto}
    .product-sec .product-card h3{font-size: 24px; line-height: 30px}
    .product-sec .product-card p{font-size: 14px; line-height: 24px}

    .capa-des-sec{padding: 30px 5px}
    .capa-des-sec .capa-des .col-md-6{max-width: 100%;}
    .capa-des-sec .capa-des p{font-size: 16px}
    .capa-list-sec{padding: 0 20px 20px 20px}
    .capa-list-sec .capa-list ul li img {margin-right: 15px; width: 34px; height: 34px;}
    .capa-list-sec .capa-list ul li p{font-size: 15px; line-height: 17px}

    .contact-area-sec{padding: 30px 15px}
    .contact-area-sec .contact-cont{width: 100%; margin: 0px}
    .contact-area-sec .contact-cont p{font-size: 16px; margin: 0 0 20px 0 !important}
    .contact-area-sec .contact-desc span{font-size: 20px}
    .contact-area-sec .contact-desc h3{margin-top: 20px; margin-bottom: 20px}
    .contact-area-sec .contact-desc p{font-size: 14px; line-height: 20px}
}
@media (max-width: 767px) {
    header{height: 60px; background-color: rgb(171, 5, 45) !important;}
    header .logo{margin-left: 15px;}
    header img{width: 140px;}
    header ul{display: none}
    header ul li a{display: block; border-top: none;}
    header ul li a:hover{border-top: none;}
    header .menu{display: block; width: 60px; height: 60px; font-size: 0px}
    header .menu label{width: 60px; height: 60px; margin: 0px; font-size: 24px; line-height: 60px; text-align: center;}
    .main-menu.active {display: block; background: #ab052d; position: absolute; top: 60px; width: 100%; padding: 15px;}

    .slider {height: 600px; margin-top: 0;}
    .slider .list .item img{height: 100%;}
    .slider .list .item .content{bottom: 0px; padding: 20px; height: 230px; display: block; top: auto; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); background: #AB052D; width: 100%; max-width: 100%; z-index: 1; height: 230px;}
    .slider .list .item .content h2{width: 90%; font-size: 20px; line-height: 28px}
    .slider .arrows{position: absolute; bottom: 250px; right: auto; z-index: 100; left: 15px;}
    .break-line{margin-top: 20px;}

    .about-area{padding: 30px 0px}
    .about-area .abt-area-desc{padding: 0px}
    .about-area .abt-area-desc h2{font-size: 28px}
    .about-area .abt-area-desc p{font-size: 14px; width: auto; line-height: 24px; height: auto;}

    .why{min-height: auto;}
    .why .container-fluid{padding: 30px 15px 20px 15px}
    .why .container-fluid .title-area h2{font-size: 28px; line-height: 36px; margin: 0px}
    .why .container-fluid .break-line{margin-top: 10px; margin-bottom: 20px}
    .why .container-fluid .list-area ul li{width: auto;}
    .why .container-fluid .list-area ul li p{font-size: 14px; text-align: left;}

    .our-mission{padding: 30px 0}
    .our-mission .desc-area {padding: 0 5px;}
    .our-mission .img-area{width: 160px; margin-bottom: 20px}
    .our-mission .img-area img{width: 100%}
    .our-mission .desc-area h2{font-size: 28px; line-height: 36px; margin: 0px}
    .our-mission .desc-area .break-line{margin-top: 10px; margin-bottom: 20px}
    .our-mission .desc-area p{text-align: left; font-size: 14px; line-height: 24px}

    footer .container-fluid {padding: 30px !important;}
    footer .logo-area img{width: 150px}
    footer .logo-area p{width: auto; text-align: left; margin-top: 20px !important;}
    footer .link-area{padding: 0px; margin: 0 !important; place-content: flex-start !important;}
    footer .addr-area{padding: 0px; margin:0 !important}
    footer .copy-area{padding: 15px 0px; margin: 0px; width: 100%; text-align: center; border-top: #505d6a 1px solid;}

    .bg-area{margin-top: 60px; background-size: cover;}
    .bg-area .title-area{padding: 0px 15px 20px 15px; width: 100%; height: auto; margin-top: 130px; clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);}
    .bg-area .title-area h2 { color: #FFF; margin-top: 10px; font-size: 26px; font-style: normal; font-weight: 700; line-height: 40px;}

    .product-sec{padding: 20px 15px 0 15px}
    .product-sec .product-card{padding: 25px; min-height: auto}
    .product-sec .product-card h3{font-size: 24px; line-height: 30px}
    .product-sec .product-card p{font-size: 14px; line-height: 24px}

    .capa-des-sec{padding: 30px 5px}
    .capa-des-sec .capa-des p{font-size: 16px}
    .capa-list-sec{padding: 0 20px 20px 20px}
    .capa-list-sec .capa-list ul li img {margin-right: 15px; width: 34px; height: 34px;}
    .capa-list-sec .capa-list ul li p{font-size: 15px; line-height: 17px}

    .contact-area-sec{padding: 30px 15px}
    .contact-area-sec .contact-cont{width: 100%; margin: 0px}
    .contact-area-sec .contact-cont p{font-size: 16px; margin: 0 0 20px 0 !important; line-height: 26px;}
    .contact-area-sec .contact-desc span{font-size: 20px; line-height: 30px;}
    .contact-area-sec .contact-desc h3{margin-top: 20px; margin-bottom: 20px;}
    .contact-area-sec .contact-desc p{font-size: 14px; line-height: 20px}
    .contact-area-sec .btn{width: 100%; height: 50px;}

}

@media (max-width: 767px) {
    .contact-desc{
      margin-right: 0px !important;
    }

  }

/* @media(max-width:1000px){
  .search-box button{
      position: absolute;
  }
  header ul{
      position: fixed;
      top:100px;
      right: -100%;
      background: rgba(0,0,0,0.5);
      height: calc(100vh - 100px);
      width:50%;
      flex-direction: column;
      align-items: center;
      transition: right 0.5s linear;
  }

  header .menu{
      display: block;
      width:100px;
      text-align: center;
  }
  #chk1:checked ~ ul{
      right: 0;

  }
}

@media screen and (max-width: 678px) {
  .thumbnail{
      justify-content: start;
  }
  .slider .list .item .content h2{
      font-size: 60px;
  }
  .arrows{
      top: 10%;
  }
  .slider .list .item .content {
    position: absolute;
    left: 0%;
    align-items: baseline;
    padding: 43px;
    top: 0;
    clip-path: polygon(0 0, 49% 0, 100% 100%, 0% 100%);
    background: #AB052D;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

  .thumbnail{
      justify-content: start;
  }
  .slider .list .item .content h2{
      font-size: 60px;
  }
  .arrows{
      top: 10%;
  }
}


@media only screen and (max-width: 600px) {
    .logo-area {
    padding: 0px;
    }

    .why .container-fluid{
    padding-right: 0px;
    margin-top: 00px;
    margin-bottom: 0px;
    padding-left: 0px;
    }
    .why .container-fluid .list-area ul li{
    list-style: none;
    margin-top: 10px;
    width: 100%;
    display: flex;
    }
    .our-mission .desc-area{
    padding: 0px;
    }
    .why{
    padding: 10px;
    }
    .our-mission{
    padding: 10px;
    }
    .our-mission .desc-area h2{
    font-size: 40px;
    }
    .why .container-fluid .title-area h2{
    font-size: 40px;
    }
    .about-area .abt-area-desc h2{
    font-size: 40px;
    }
    .about-area{
    padding: 10px;
    }
    .about-area .abt-area-desc{
    padding: 0px;
    }
    .about-area .abt-area-desc p{
    width: auto;
    height: auto;
    }
    .bg-area .title-area{
    clip-path: polygon(0 0, 61% 0, 100% 100%, 0% 100%);
    background-color: #AB052D;
    width: 100%;
    height: 24vh;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 0;
    align-items: baseline;
    padding: 10px;
    }
    .bg-area .title-area h2{
    font-size: 40px;
    }
    .product-sec .product-card{
    padding: 30px;

    }
    .product-sec {
    padding: 20px;
    }
    .capa-des-sec{
    padding: 10px;
    }
    .capa-list-sec {
    padding: 29px;
    justify-content: center;
    display: flex;
    align-items: center;
    }
    .slider .list .item .content{
    position: absolute;
    left: 0%;
    align-items: baseline;
    padding: 43px;
    top: 0;
    clip-path: polygon(0 0 , 36% 0, 100% 100%, 0% 100%);
    background: #AB052D;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

} */