/* Add custom CSS styles /* Add custom CSS styles be/* Add custom CSS styles below */ 
.s-products-list-vertical-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.grid.s-products-list-vertical-cards.two-row.grid-flow-row.gap-3.sm\:gap-8 {
  gap: 12px;
}
.grid_sec {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 5px;
  max-height: 600px;
}
@media (max-width: 768px) {
  .grid.s-products-list-vertical-cards.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    height: 400px;
  }
}

@media (max-width: 450px) {
  .grid.s-products-list-vertical-cards.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    height: 220px;
    gap: 5px;
  }
}

@media (min-width: 640px) {
  .s-products-list-vertical-cards {
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .s-products-list-vertical-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .s-products-list-vertical-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* Target the footer logo container */
.logo-footer img {
  display: none !important; /* Hide the original logo */
}

.logo-footer {
  display: block;
  width: 199px;    /* adjust as needed */
  height: 110px;    /* adjust as needed */
  background: url("https://i.postimg.cc/KvCwf0XW/eye-language-logo-3.png") no-repeat center center;
  background-size: contain;
}

.grid_sec {
  display: flex;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 5px;
  max-height: 600px;
}

.grid_sec .ref-grid span {
  position: absolute;
  Top: 28px;   /* always top */
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
}

.grid_sec .ref-grid:hover img {
  transform: none !important; /* stop zoom */
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
.grid_sec .ref-grid {
  display: flex;
  align-items: center;   
  justify-content: center; 
  text-align: center;
  position: relative;
}

.grid_sec .ref-grid span {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
}
@media (max-width: 768px) {
  .grid_sec {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }

  .grid_sec > * {
    grid-column: span 1 !important;
    height: auto !important;  
  }
}
.s-product-card-entry:hover,
.s-product-card-entry:hover img,
.s-product-card-image:hover,
.s-product-card-image:hover img {
  transform: none !important;
  transition: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  will-change: auto !important;
}
.main_bg_slide_div {
  position: relative;
}

.main_bg_slide_div::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
  cursor: pointer;
}

.main_bg_slide_div::after {
  background: transparent;
}

.main_bg_slide_div {
  cursor: pointer;
}

.grid_sec .ref-grid:first-child {
  position: relative; 
}

.grid_sec .ref-grid:first-child span {
  position: absolute;
  top: 264px;
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}


@media (max-width: 768px) {
  .grid_sec .ref-grid:first-child span {
    top: auto;               
    bottom: 10px;            
    font-size: 20px;         
  }
}

.grid_sec .ref-grid:nth-child(2) span {
  position: absolute;
  top: 264px; 
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
}


@media (max-width: 768px) {
  .grid_sec .ref-grid:nth-child(2) span {
    top: auto;
    bottom: 10px; 
    font-size: 20px; 
  }
}

.grid_sec .ref-grid:nth-child(3) span {
  position: absolute;
  top: 264px; 
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 768px) {
  .grid_sec .ref-grid:nth-child(3) span {
    top: auto;
    bottom: 10px; /
    font-size: 20px; 
  }
}
.grid_sec .ref-grid:nth-child(4) span {
  position: absolute;
  top: 264px; 
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
}


@media (max-width: 768px) {
  .grid_sec .ref-grid:nth-child(4) span {
    top: auto;
    bottom: 10px; 
    font-size: 20px; 
  }
}
.banners {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .banners {
    flex-direction: column;
  }
}
.banners {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .banners {
    flex-direction: column;
  }
}
@media (max-width: 768px){
  .grid_sec{
    grid-template-rows: unset !important;   
    grid-auto-rows: auto !important;      
    max-height: none !important;           
    align-content: start !important;     
  }

  .grid_sec .ref-grid:empty,
  .grid_sec > a:empty,
  .grid_sec > div:empty{
    display: none !important;
  }

  .grid_sec .ref-grid img{
    height: auto !important;  */
  }
}
h1.font-bold.text-2xl.mb-6 {
  display: none !important;
}low */*/