/* ============================================
   Main Banner Carousel
   ============================================ */
.home-banner-carousel .swiper-pagination-bullet {
  background: #707070;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.90);
}

.home-banner-carousel .swiper-pagination-bullet-active,
selector .swiper-pagination-bullet-active:hover {
  background: #FFF !important;
}

/* ============================================
   Overflow Hidden Utility
   ============================================ */
.overfl-hide {
  overflow: hidden !important;
}

/* ============================================
   Featured Section - Hover Zoom Effect
   ============================================ */

/* Shared styles for all hover containers */
.hover-zoom {
  position: relative;
  overflow: hidden;
  background-image: none !important;
}

.hover-zoom::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background-size: cover;
  transition: transform 0.4s ease !important;
  z-index: 0;
}

.hover-zoom:hover::before {
  transform: scale(1.1);
}

.hover-zoom > * {
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease !important;
}

.hover-zoom:hover > * {
  transform: translateY(-10px);
}

/* Individual container images - Desktop Backgrounds */
.hover-zoom-1::before {
  background-image: url('/wp-content/uploads/2025/11/Frame-1532-min.jpg');
}

.hover-zoom-2::before {
  background-image: url('/wp-content/uploads/2025/11/Frame-1532-min-1.jpg');
}

.hover-zoom-3::before {
  background-image: url('/wp-content/uploads/2025/11/Frame-1532-min-2.jpg');
}
.hover-zoom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%);
  transition: height 0.3s ease;
}
.hover-zoom:hover::after {
  height: 40%;
}
/* ============================================
   Brand Logos Section
   ============================================ */
.brand-logos::-webkit-scrollbar {
  display: none;
}

.brand-logos > div {
  flex-shrink: 0;
}

.brand-logos {
  overflow-x: auto !important;
}

/* ============================================
   Eyewear Section
   ============================================ */
.eyewear-tabs button > span {
  line-height: 1.2em !important;
}

.eyewear-tabs button.e-n-tab-title {
  border-radius: 0 !important;
}

.home-loop-carousel .swiper {
  --swiper-offset-size: 16.8%;
}

.home-loop-carousel img{
  mix-blend-mode: multiply !important;
}

/* hover effect for single product tile */
.single-prod-tile img {
  transition: transform 0.4s ease;
}
.single-prod-tile:hover img {
  transform: scale(1.1);
}

/* ============================================
   Prescription Steps
   ============================================ */
.pres-steps svg {
  height: auto !important;
  width: auto !important;
}

/* ============================================
   Content USPs
   ============================================ */
.content-usps .elementor-icon-box-description {
  padding-top: 16px !important;
}

/* ============================================
   Video Section
   ============================================ */
.home-video .elementor-custom-embed-play{
  inset-block-start: 51% !important;
}
.home-video{
  flex-grow: 1 !important;
}
.home-video > div.elementor-wrapper, .home-video img{
  aspect-ratio: 1.87242 !important;
  height: 100% !important;
}

/* ============================================
   Instagram Feeds Section
   ============================================ */
.insta_section #sb_instagram #sbi_images a.sbi_photo{
  height: auto !important;
}
/* ============================================
   Responsive Styles - Large Desktop (max-width: 1440px)
   ============================================ */
@media(max-width:1440px) {
  .content-usps .elementor-icon-box-description br {
    display: none !important;
  }
}

/* ============================================
   Responsive Styles - Tablet (max-width: 1024px)
   ============================================ */
@media(max-width:1024px) {
  .content-usps br {
    display: none;
  }
  
  .pres-steps br {
    display: none;
  }
  .hover-zoom::before {
    background-position: center center;
  }
}

/* ============================================
   Responsive Styles - Tablet Lanscape (min-width: 769px and max-width: 1200px)
   ============================================ */
@media(min-width:769px) and (max-width:1200px) {
  .eyewear-tabs .e-n-tabs-heading {
    padding-left: 49.8%;
  }
}

/* ============================================
   Responsive Styles - Large Desktop (min-width: 1201px)
   ============================================ */
@media(min-width: 1201px) {
  .eyewear-tabs .e-n-tabs-heading {
    padding-left: 39.8%;
  }
}

/* ============================================
   Responsive Styles - Instagram Feeds Section (max-width: 800px)
   ============================================ */
@media(max-width:800px) {
  .insta_section #sb_instagram #sbi_images::-webkit-scrollbar{
    display: none;
}

  .insta_section #sb_instagram #sbi_images {
  display: -webkit-box;
  -webkit-box-align: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 0px !important;
} 

.insta_section #sb_instagram #sbi_images .sbi_item {
  max-width: 151px;
  max-height: 148px;
  display: flex;
  gap: 0px !important;
  margin-right: 9px !important;
}

.insta_section #sb_instagram .sbi_photo img {
  object-fit: cover !important;
  max-height: 148px;
}

.insta_section .sbi_item .sbi_photo_wrap {
  width: 100% !important;
}
}

/* ============================================
   Responsive Styles - Mobile Landscape (max-width: 768px)
   ============================================ */
@media(max-width:768px) {

  /* Hover Zoom Mobile Backgrounds */
  .hover-zoom-1::before {
    background-image: url('/wp-content/uploads/2025/11/Frame-1533-min.jpg');
  }
  
  .hover-zoom-2::before {
    background-image: url('/wp-content/uploads/2025/11/overlay-min.jpg');
  }
  
  .hover-zoom-3::before {
    background-image: url('/wp-content/uploads/2025/11/overlay-min-1.jpg');
  }
  
  /* Banner Text Container */
  .banner-txt-container {
    background-color: rgba(66, 66, 66, 0.47) !important;
  }
  
  .banner-txt-container .banner-heading .elementor-heading-title{
    color: #FFF !important;
  }
  
  .banner-txt-container .elementor-widget-text-editor {
    color: #FFF !important;
  }
  
  .banner-txt-container .elementor-widget-button a {
    background-color: #FFF !important;
    border-color: #FFF !important;
    color: #1F1F1F !important;
  }
  .banner-txt-container .elementor-widget-button a:hover {
    background-color: #2E4379 !important;
    border-color: #2E4379 !important;
    color: #FFFFFF !important;
  }
  
  /* Banner 2 Text */
  .banner-2-text .banner-heading br {
    display: none;
  }
  
  .banner-2-text {
    background-color: #EEF2F8 !important;
  }
  
  /* Hero Banner Slide */
  .hero-banner-slide > .e-con-inner {
    justify-content: end !important;
  }
  /* Eyewear Tabs */
  .eyewear-tabs .e-n-tab-title[aria-selected=true],.eyewear-tabs .e-n-tab-title[aria-selected=true] a {
    font-weight: 700 !important;
}
.eyewear-tabs .elementor-swiper-button{
  display: none !important;
}
/* Video Section */
.home-video > div.elementor-wrapper, .home-video img{
  aspect-ratio: 1.538 !important;
}  
}
@media(max-width:480px){
    /* Eyewear Tabs */
  .eyewear-tabs .e-n-tabs-heading{
    padding-right: 16px !important;
  }
  .eyewear-tabs .e-n-tabs-heading > button{
    flex-grow: 1 !important;
  }
  .home-loop-carousel .swiper {
    --swiper-offset-size: 27.8%;
  }
}