/* HEADER SECTION */
@media(max-width:991px) {
    .header{
        padding: 12px 0;
    }
    .header .menu{
        position: fixed;
        right: 0;
        top: 0;
        width: 320px;
        height: 100%;
        background-color:  rgb(249, 242, 242);
        padding: 15px 30px 30px;
        overflow-y: auto;
        z-index: 10;
        transform: translateX(100%);
        

    }

    .header .menu.open{
        transform: none;
    }
    .header .menu .head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
    }
    .header .menu .close-menu-btn{
        height: 35px;
        width: 35px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        cursor: pointer;
        border: none;
    }
    .header .menu .close-menu-btn::before,
    .header .menu .close-menu-btn::after{
        content: '';
        position: absolute;
        width: 80%;
        height: 2px;
        background-color: hsl(0, 0%, 0%);

    }

    .header .menu .close-menu-btn::before{
        transform: rotate(45deg);
    }
    .header .menu .close-menu-btn::after{
        transform: rotate(-45deg);
    }
    .header .menu ul >li{
        display: block;
    }
    .header .menu > ul > li:not(:last-child){
        margin-right: 0;
    }
    .header .menu li{
        border-bottom: 1px solid hsla(0, 0%, 0%, 0.345);
    }
    .header .menu li:first-child{
        border-bottom: 1px solid hsla(0, 0%, 0%, 0.345);
    }
    .header .menu > ul > li > a{
        padding: 12px 0;
    }
    .header .menu > ul > .dropdown > a{
        padding-right: 34px;
    }
    
    .header .menu i{
        height: 34px;
        width: 34px;
        border: 1px solid hsl(0, 7%, 11%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        cursor: pointer;
        top: 7px ;
        color: hsl(0, 0%, 4%);
    }
    .header .menu .sub-menu{
        position: static;
        opacity: 1;
        transform: none;
        visibility: visible;
        padding: 0;
        transition: none;
        box-shadow: none;
        width: 100%;
        display: none;
        z-index: 5;
        background: transparent;
        border: none;

    }
    .header .menu .sub-menu li:last-child{
        border: none;
    }
    .header .menu .sub-menu a{
        padding: 12px 0 12px 15px;
    }
    .header .menu .sub-menu i{
        transform: none;
        right: 0;
    }
    .header-right .open-menu-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 44px;
        cursor: pointer;
        position: relative;
        background-color: transparent;
        border: none;
    }
    .header-right .open-menu-btn .line{
        width: 2px;
        height: 30px;
        background-color: hsl(0, 0%, 0%);
        position: absolute;
    }
    .header-right .open-menu-btn .line-1{
        transform: translateX(-10px);
    }
    .header-right .open-menu-btn .line-3{
        transform: translateX(8px);
    }

    .CTA-Banner .main{
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .our-team{
      width: 100%;
      height: auto;
      padding: 20px;
    }
    .our-team .main-heading2{
      width: 100%;
      height: auto;
      font-size: 3rem;
    }
  
    .team-container{
      height: auto;
      width: 100%;

      flex-direction: column;
    }
    .team-card{
      width: 80%;
    }
    .testimonial{
      height: auto;
      
    }
   
  .f-div{
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-content: center;
    align-items: center;
  }
  .f-logo{
    width: 100%;
    display: block;
    align-items: center;
    text-align: center;
    align-content: center;
  }
  .f-link{
    width: 100%;
    display: block;
    align-items: center;
    text-align: center;
    align-content: center;
  }
  .f-link ul{
    display: block;

  }
  .f-link .f-icon{
    text-align: center;
    display: flex;
  }

  .gallery-container{
    flex-direction: column;
    
  }
/* ABOUT US SECTION */
  .main-banner{
    flex-direction: column;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }
  .sab-banner{
    width: 100%;
    height: auto;
    text-align: center;
    align-content: center;
  }
  .sabs-banner{
    width: 100%;
    height: auto;
    margin: auto;
  }
  .main-section{
    flex-direction: column-reverse;
    width: 100%;
    height: auto;
  }
  .about-section-img{
    width: 100%;
    height: 300px;
  }
  .about-section-img img{
    width: 100%;
    height: 300px;
    object-fit: fill;
  }
  .about-section-text{
    width: 100%;
    height: auto;
  }

  .Manufacturing-section{
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .manufacturing-section-text{
    width: 100%;
    height: auto;
  }
  .Manufacturin-section-img{
    width: 100%;
    height: 250px;
  }
  .Manufacturin-section-img img{
    width: 100%;
    height: 250px;
  }
  .our-mession{
    flex-direction: column-reverse;
    width: 100%;
    height: auto;
  }
  .mession-section-img{
    width: 100%;
    height: 250px;
  }
  .mession-section-img img{
    width: 100%;
    height: 250px;
  }
  .mession-text{
    width: 100%;
    height: auto;
  }

  .form-sec{
    flex-direction: column-reverse;

  }
  .form-img{
    width: 100%;

  }
  .form{
    width: 100%;
  }
  .quality-assurance-section{
    flex-direction: column;
    width: 100%;

  }
  .qa-text{
    width: 100%;

  }
  .qa-img{
    width: 100%;
  }
}




/* SLIDER SECTION */

@media (max-width: 1536px) {
    .slider-wrapper .slider-item .slide-content,
    .slider-controls .slider-pagination {
      width: 85%;
    }
  }
  
  @media (max-width: 1024px) {
    .slider-wrapper .slider-item .slide-content,
    .slider-controls .slider-pagination {
      width: 100%;
    }
  
    .slider-wrapper .slider-item .slide-content > * {
      max-width: 66%;
    }
  
    .slider-container .slider-controls {
      bottom: 50px;
    }
  
    @keyframes animate_button {
      100% {
        width: 100%;
        opacity: 1;
      }
    }
  
    .slider-navigations button {
      top: unset;
      bottom: -15px;
      background: none;
    }
  
    .slider-navigations button:hover {
      background: none;
    }
  }
  
  @media (max-width: 768px) {
    .slider-wrapper .slider-item .slide-content > * {
      max-width: 100%;
    }
  }

/* PRODUCT GALLERY */


@media screen and (max-width: 690px) {
  .p-gallery {
    flex-direction: column;
  }
  .main-heading{
    height: 100px;
    font-family: "Fjalla One", sans-serif;
    font-weight: 500;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 10px;
    padding: 20px;
    color: blue;
    margin-bottom: 2%;


  }
  section {
      height: 65vh;
    }
  }
  @media screen and (max-width: 470px) {
    section {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 35%);
    }
  }
  section .card {
    border-radius: 25px;
    box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.26);
  }
  @media screen and (max-width: 470px) {
    section .card {
      grid-column: span 1;
    }
  }

  @media screen and (max-width: 690px) {
    section .card:nth-child(2) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }
  @media screen and (max-width: 690px) {
    section .card:nth-child(3) {
      grid-column: 2/4;
      grid-row: 1/2;
    }
  }
  @media screen and (max-width: 690px) {
    section .card:nth-child(6) {
      grid-column: 2/4;
      grid-row: 2/3;
    }
  }
  @media screen and (max-width: 470px) {
    section .card:nth-child(5) {
      grid-column: span 2;
    }
  }
  @media screen and (max-width: 690px) {
    section .card .card__img span {
      top: 20px;
    }
  }
  @media screen and (max-width: 470px) {
    section .card .card__img span {
      top: 15px;
    }
  }