body{
  scroll-behavior: smooth;
}



  .overview-div{
    border-radius: 5px;
    background-color: #f0f0f0;
    background-color: #f5f8fa;
    max-width: 1280px;
    display: grid;
    width: 100%;
    font-size: small;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
    /* justify-content: space-around; */
    /* width: fit-content; */
    margin: auto;
}

.overview-div img{
    height: 30px;
    margin :  5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overview-div > div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    /* margin: 10px; */
    /* font-size: small; */
    /* border-radius: 50%;
    background-color: cyan; */
}

.carousel{
    max-width:  1280px;
    margin: auto;
    margin-top: 10px;
}
.carousel-cell > div img{
    height: 180px;
    width: 255px;
}
.carousel-cell a{
  color: black;
}
.carousel-cell {
    /* width: 200px; */
    /* height: 200px; */
    margin-right: 5px;
    border-radius: 5px;
    counter-increment: carousel-cell;
    font-weight: 600;
    text-align: center;
  }
  .carousel-cell p{
    z-index: 1000;
  }
  .flickity-button {
    scale: 0.8;
    margin-top: -10px;
    }
  .products-heading{
    max-width: 1280px;
    margin: 15px auto;
    font-weight: 600;
    /* text-align: center; */
    font-size: x-large;
  }
  .most-popular img{
    margin-bottom: 10px;
  }
  /* testimonials css */
  .testimonials-container{
    /* height: 200px; */
    width: 100%;
    padding: 5px;
    background-image: url("../images/carousel-images/slider_background.jpg");
    /* background-image: url("../images/texture.webp"); */
  }
  .testimonial-div {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 10px auto;
    height: 100%;
    display: grid !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    /* flex-direction: column; */
    /* justify-content: space-between; */
    /* width: 250px !important; */
    height: 300px;
    width: 300px;
  }
  .testimonial-heading{
    text-align: center;
    margin: 20px;
  }
  /* .testimonial-heading > h2{
    text-transform: uppercase;
  } */
  .testimonial-div p{
    /* text-align: justify; */
    font-size: 0.85rem;
    color: #999;
  }
  .review-bottum{
    display: flex;
    justify-content: space-between;
    align-self: flex-end;
    width: 100%;
    text-align: end;
  }
  .t-icon{
    color: #1ABB9B;
    font-size: 35px;
  }
  .review-div{
    margin: auto;
    max-width: 1280px;
  }
  /* larg formate section */
  .larg-formate-container{
    max-width: 1280px;
    margin: auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,1fr);
  }
  .larg-formate-container > div{
    /* padding: 10px; */
    padding-bottom: 5px;
    border-bottom: #c9c9c9 solid 1px;
  }
  .larg-formate-container > div:hover{
    border-bottom: black solid 1px;
  }

  .larg-formate-container a {
    color: #1ABB9B;
    /* align-content: end; */
  }
  .larg-formate-container img{
    width: 100%;
    margin-bottom: 10px;
  }
/* companies logos */

  .marquee {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid #000; */
    height: 100px;
    /* max-width: 1280px; */
    margin: auto;
    /* border-radius: 22px; */
    /* box-shadow: 4px 4px 0 #000; */
    overflow: hidden;
    /* background: white; */
    white-space: nowrap;
  }
  
  .marquee--inner {
    display: block;
    width: 200%;
    /* max-width: 1280px; */
    position: absolute;
    margin: auto;
    animation: marquee 12s linear infinite;
    
  }

  .marquee--inner:hover {
      animation-play-state: paused;
    }
  .marquee  span {
    float: left;
    width: 48%;
    margin-left: 10px;
    /* overflow: hidden; */
  }
  .marquee-logos{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 20px;
    align-items: center;
  }
  .marquee-logos img{
    height: 60px;
    /* width: 100%; */
  }
  @keyframes marquee {
    0% {
      left: 0;
    }
    100% {
      left: -100%;
    }
  }
  
.companies{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  margin: auto;
  max-width: 1280px;
  align-items: center;
}
.companies img{
  /* width: 80%; */
  height: 30px;
  width: fit-content;
  margin: auto;
}
.companies > div{
  width: fit-content;
  margin: auto;
}
.companies-div{
  /* display: block; */
  height: 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.companies-container{
  background-color: #F3F3F3;
  width: 100%;
  /* margin-top: 30px; */
  padding: 20px;
  text-align: center;

}
.canvas-section img{
  margin: 10px auto;
  width: 100%;
}
/* order process */
.order-process-container{
  margin-top: 20px;
  color: #fff;
  background-color: #1ABC9C;
  padding: 20px 0px;
}
.order-process{
  font-size: small;
  display: grid;
  margin-top: 10px;
  max-width: 1280px;
  margin: auto;
  grid-template-columns: repeat(6,1fr);
  /* align-items: center; */
  gap: 20px;
  /* grid-template-columns: repeat(4, 1fr); */
}

.order-process > div{
  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
  text-align: center;
}
.order-process p{
  width: 100%;
  /* text-align: justify; */
}
.order-process img{
  height: 50px;
  opacity: 0.9;
  filter: invert(100%);
}
.order-process i{
  font-size: 30px;
  border: 3px solid #58595B;
  padding: 20px;
  margin: 10px;
  /* color: #58595B; */
  border-radius: 50%;
}

.catagories-container{
  display: grid;
  gap: 10px;
  
  grid-template-columns: repeat(3,1fr);
}
.catagories-container hr{
  margin-top: 0.5rem;
}
.catagories-container > div{
  /* background-color: #f8f8f8; */
  /* background-color: ##f9f9f9; */
  /* padding: 15px; */
  border-radius: 5px;
  /* border: 1px solid rgb(214, 214, 214); */
  border-radius: 10px;
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; */
}
.catagories-container > div > p{
  font-size: 24px;
  /* text-decoration: underline grey ; */
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px black solid;
  /* color: #1ABB9B; */
}



.catagory-product{
  display: flex;
  gap: 20px;
  /* line-height: 25px; */
  text-decoration: none;
  color: #000;
  margin-bottom: 10px;
  font-size: large;
  /* align-items: center; */
  /* margin-bottom: 30px; */
  
  /* box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; */
  /* border-radius: 5px; */
  /* padding-bottom: 10px; */
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */

  /* border-bottom: #d1d2d6 solid 1px; */
  /* justify-content: center; */
  /* border-bottom: 1px solid rgb(207, 207, 207); */
  
}
.catagory-product > div{
  width: 100%;
}
.catagory-product:hover{
  color: black;
  text-decoration: none;
  scale: 1.03;
  transition: all 0.3s;
}


.catagory-product img{
  /* height: 70px; */
  height: 100px;
  /* aspect-ratio: 1; */
  border-radius: 3px;
  /* margin-bottom: 20px; */
}

.catagories-container-inner{
  display: grid;
  background-color: rgb(248, 248, 248);
  gap: 15px;
  padding: 10px;
  border-radius: 10px;
  

}

/* .catagory-product span{
  margin-top: -50px !important;
} */

.loader {
  /* display: flex;
  justify-content: center;
  align-self: center; */
  /* position: absolute; */
  /* top: 45%;
  
  left: 45%; */
  margin: auto;
  border: 5px solid #EAF0F6;
  border-radius: 50%;
  border-top: 5px solid #1ABB9B;
  width: 80px;
  height: 80px;
  animation: spinner 4s linear infinite;
}
.loader-container{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background-color: white;
}
@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
swiper-container {
width: 100%;
height: 100%;
}

swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

swiper-slide img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}

/* .swiper-pagination-bullet-active {
height: 50px !important;
background-color: #1ABB9B !important;
} */
:root {
/* var(--swiper-theme-color) */
--swiper-pagination-color: #f5f8fa;
/* --swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px; */

}
.product-div{
box-sizing: border-box;
color: black;
width: 105%;

/* border-bottom: #c9c9c9 solid 1px; */
}
/* .product-div:hover{
border-bottom: #000000 solid 1px;

} */

.swiper-slide > a:hover {
text-decoration: none;
}
.product-div h3{
text-align: center;
font-size: medium;

}

.product-div img{
width: 100%;
margin-bottom: 10px;
}
.product-div span{
color: #1ABB9B;
}

.swiper-btn {
/* font-size: 10px !important; */
top: 40% !important;
/* left: 0px !important; */
padding: 20px !important;
font-weight: 800;
background-color: rgb(248, 248, 248) !important;
/* opacity: 0.4 !important; */
/* background-color: #F3F3F3; */
border-radius: 50%;
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}
:root {
--swiper-navigation-size: 15px !important;
--swiper-theme-color: black !important
}


/* ============ mobile view ============ */
@media (min-width:200px) and (max-width: 769px) {
  .heading-padding{
    margin-left: 20px !important;
  }
	.overview-div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 10px ;
        padding: 5px ;
        /* width: fit-content; */
        margin: auto;
        gap: 10px;
        font-size: smaller;
    }

    .overview-div > div{
        display: flex;
        width: fit-content;
        margin: 0 10px
    }

    .overview-div img{
        height: 20px;
        margin : 10px;
    }

    .flickity-button {
        scale: 0.6;
        margin-top: -30px;
    }

    .carousel-cell > div img{
        width: 165px;
        height: 130px;
    }

    .carousel {
        margin: 20px;
    }
    
    .products-heading{
        max-width: 1280px;
        margin: 5px 10px ;
        /* margin-top: 50px; */
        /* text-align: center; */
        font-size: large;
    }
      /* .testimonial-div {
        height: 320px;
        width: 300px;
      } */
      .larg-formate-container{
        max-width: 1280px;
        margin: auto;
        font-size: small;
        display: grid;
        padding: 10px;
        gap: 20px;
        grid-template-columns: repeat(2,1fr);
      }
      .larg-formate-container  h5{
        font-size: medium;
      }
      .companies{
        grid-template-columns: repeat(2, 1fr);
      }
      .companies img{
        /* width: 80%; */
        height: 20px;

      }
      .companies-container > h1{
        font-size: x-large;
      }
      .order-process{
        font-size: x-small;
        display: grid;
        margin-top: 10px;
        max-width: 1280px;
        /* margin: auto; */
        grid-template-columns: repeat(3,1fr);
        /* align-items: center; */
        gap: 10px;
        /* grid-template-columns: repeat(4, 1fr); */
      }
      .order-process-container{
        margin-top: 20px;
        padding: 20px ;
      }
      .h2-heading{
        font-size: x-large;

      }
      .order-process i{
        font-size: 20px;
      }
      .order-process img{
        height: 30px;
      }
      .catagories-container{
        display: grid;
        gap: 20px; 
        grid-template-columns: repeat(1,1fr);
      }
      .pTitle { grid-area: pTitle; }
      .p1 { grid-area: p1; }
      .p2 { grid-area: p2; }
      .p3 { grid-area: p3; }
      .p4 { grid-area: p4; }
    
     

      .catagories-container-inner{
        /* display: grid;
        grid-template-columns: repeat(2, 1fr); */
        display: grid;
        grid-template-columns: 1fr 1fr;        grid-template-areas:
        'pTitle p1'
        'pTitle p2'
        'p3 p4';
        /* box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px; */
        padding: 10px;
        background-color: rgb(248, 248, 248);
        border-radius: 10px;
      }

      .pTitle{
        
        /* border: 1px solid grey; */
        /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; */
        border-radius: 5px;
        height: 100%;
        width: 100%;
        /* background-color: #58595B; */
        display: grid;
        font-weight: 600;
        text-shadow: 1px 1px white;
        

        
        /* align-content: center;
        align-items: center;
        justify-content: center; */
        

      }
      .pTitle div{
        position:relative;
        top: 30%;
        font-size: large;
        /* left: 40%; */
        text-align: center;
      }

      .catagory-product{
        gap: 5px;
        margin-bottom: 10px;
        /* flex-direction: column; */
        font-size: small;
      }

      /* .catagory-product span{
        margin-top: -20px;
      } */

      .catagory-product img{
        width: 50%;
        height: auto;
      }
      .catagory-product span{
        font-size: 8px !important;
      }
      
      .swiper-btn {
        /* font-size: 10px !important; */
        top: 40% !important;
        /* left: 0px !important; */
        padding: 15px !important;
        font-weight: 800;
        background-color: rgb(248, 248, 248) !important;
        /* opacity: 0.4 !important; */
        /* background-color: #F3F3F3; */
        border-radius: 50%;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
        }
        :root {
        --swiper-navigation-size: 10px !important;
        --swiper-theme-color: black !important;
        --swiper-navigation-sides-offset: 4px;
        --swiper-navigation-size: 18px !important;
        }
        .marquee-logos img{
          height: 40px;
          /* width: 100%; */
        }
        .marquee--inner {
          display: block;
          width: 300%;
          /* max-width: 1280px; */
          position: absolute;
          margin: auto;
          animation: marquee 8s linear infinite;
          
        }
        .marquee-logos{
          display: grid;
          grid-template-columns: repeat(6,1fr);
          gap: 10px;
          align-items: center;
        }
}
/* tablet view */
@media (min-width: 770px) and (max-width: 1350px){ 
  .heading-padding{
    margin-left: 30px !important;
  }
  .carousel {
    margin: 30px;
    }
    .flickity-button {
        scale: 0.6;
        margin-top: -20px;
    }
    
    .overview-div{
        padding: 10px ;
        font-size: smaller;
    }
    .overview-div img{
        height: 25px;
        margin : 10px;
    }
    .products-heading{
        max-width: 1280px;
        margin: 10px;
        /* text-align: center; */
        font-size: large;
      }
      /* .testimonial-div {
        height: 320px;
        margin-left: 50px;
    } */
    .companies img{
      /* width: 80%; */
      height: 25px;

    }
    .companies-container > h1{
      font-size: x-large;
    }
    .order-process-container{
      margin-top: 20px;
      padding: 20px ;
    }
    .h2-heading{
      font-size: larger;
    }
    .order-process i{
      font-size: 20px;
    }
    .larg-formate-container{
      margin: 30px;
    }
}