/* Add custom CSS styles below */ 

/* Hero */
@media(min-width:768px){  
.main-banner-component .content .flex.flex-col.gap-2.md\:gap-4{
    align-items: center;
    text-align: center;
}
  .main-banner-component .swiper-slide .container{
    max-width: 1400px;
  }
}
section.main-banner-component picture img,
section.about-us-component img{
  object-fit: initial !important;
}
/* section.main-banner-component .swiper.s-slider-container,
section.main-banner-component .swiper.s-slider-container .relative{
  height: 100%;
} */
@media(min-width:1024px){
.main-banner-component .content .flex.flex-col.gap-2.md\:gap-4{
    max-width: 40%;
} 
}
@media(max-width:767px){
  .main-banner-component .content{
    align-items: flex-start;
    padding-top: 3rem;
  }
}
/* Breadcramb */
.breadcrumbs .s-breadcrumb-wrapper .s-breadcrumb-item {
    color: #fff;
}

/* Fatures */
section.store-features-component .lg\:grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* banner with bg */
section.my-8.md\:my-32 .overlay{
  opacity: 0 !important;
}
@media(min-width:768px) and (max-width:1200px){  
.min-h-\[303px\].md\:min-h-\[600px\].lg\:min-h-\[828px\].relative.z-\[5\].p-4.md\:p-10.flex.items-center.justify-center{       min-height: 420px;
    }
}