/* ==============================
   Vertical Sidebar Container
   ============================== */
 /* Force sidebar container to be off-canvas and full height */
#os-vertical-container {
   position: fixed; 
    top: 0; 
    left: 0; 
    width: 300px; 
    height: 80vh; 
    background: #fff; 
    border-right: 1px solid #ddd; 
    z-index: 2000; 
    /* start hidden */ 
    transition: transform 0.9s ease-in-out;
   transform: translateX(-100%);
   visibility: hidden;
  
}

 /* When open, slide in */ 
#os-vertical-container.open {
   display: block;
   transform: translateX(0);
  visibility: visible; 

}

#os-vertical-container .os-mega-close {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #f33;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  z-index: 10000;
}



/* Inner scrolling wrapper (only the list scrolls) */
#os-vertical-container .menu-secondary-menu-container{
  height: 100%;
  overflow-y: scroll!important;
  overflow-x: hidden!important;
  -webkit-overflow-scrolling: touch;
}


/*Srollbar Styling*/
/* Target the scrollbar itself */
.menu-secondary-menu-container::-webkit-scrollbar {
  width: 3px; /* For vertical scrollbar */
  height: 3px; /* For horizontal scrollbar */
}

/*style the scrollbar track */
.menu-secondary-menu-container::-webkit-scrollbar-track {
  background: green!important;
}

/*style the scrollbar thumb */
.menu-secondary-menu-container::-webkit-scrollbar-thumb {
  background: red!important;
  border-radius: 4px; /* Optional: for rounded corners */
  max-height: 8px!important;
}

/* Optional: style the scrollbar thumb on hover */
.menu-secondary-menu-container::-webkit-scrollbar-thumb:hover {
  background: yellow!important;
}


/* ==============================
   Sidebar Menu Basics
   ============================== */
.os-vertical-mega {
  list-style: none;
  margin: 0;
  padding: 0;
}



/* Mega menu grid columns */
#os-vertical-container .os-mega-submenu.grid-4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start; /* align content to top */
  gap: 20px;
  padding: 20px;
}

/* Each column */
#os-vertical-container .os-mega-submenu.grid-4cols > li {
  text-align: left;   /* align content left */
  padding: 10px;
}

/* Thumbnail images */
#os-vertical-container .os-mega-submenu.grid-4cols img.menu-thumb {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
  margin-bottom: 8px;
  object-fit: contain;
}

/* Column headings */
#os-vertical-container .os-mega-submenu.grid-4cols .menu-heading {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  text-transform: none;
}

/* 3rd level links */
#os-vertical-container .os-mega-submenu.depth-2 {
  margin-top: 4px;
  padding: 0;
}

#os-vertical-container .os-mega-submenu.depth-2 li a {
  font-size: 14px;
  color: #444;
  display: block;
  padding: 3px 0;
}
/* Thumbnail in mega menu */
#os-vertical-container .menu-thumb {
  display: block;
  width: 80px;   /* adjust as needed */
  height: auto;
  margin-bottom: 10px;
  object-fit: cover;
}

.os-vertical-mega > li {
  position: relative;
  border-bottom: none!important;
}

.os-vertical-mega > li > a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

/* ==============================
   Mega Menu Panels (2nd level)
   ============================== */
#os-vertical-container .os-vertical-mega > li > .os-mega-submenu.grid-4cols {
  position: fixed;                 /* FIXED, not absolute */
  top: 0;                          /* align to top of screen */
  left: 300px;                     /* sidebar width */
  height: 80vh !important;        /* full viewport height */
  width: 900px;                    /* adjust width as needed */
  background: #fff;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 2500;
  overflow-y: auto;                /* allow scroll if tall */
  text-align:left!important;
}


/* Show mega menu on hover */
#os-vertical-container .os-vertical-mega > li:hover > .os-mega-submenu.grid-4cols {
  display: grid;
}

/* ==============================
   Third Level Items
   ============================== */
 /* Ensure 3rd+ level items stack inside parent */
.os-mega-submenu.depth-2 {
  position: static;
  display: block;
  margin-top: 8px;
  padding-left: 15px;
  background: none;
  box-shadow: none;
}

.os-mega-submenu.depth-2 li {
  list-style: none;
  margin: 0;
}

.os-mega-submenu.depth-2 a {
  font-size: 14px;
  color: #444;
  display: block;
  padding: 4px 0;
  text-decoration: none;
}

.os-mega-submenu.depth-2 a:hover {
  color: #000;
}

/* ==============================
   Styling 2nd vs 3rd Level
   ============================== */
  /* Style 2nd level items as headings (unclickable) */
#os-vertical-container .os-mega-submenu.grid-4cols > li > a {
  pointer-events: none;       /* disable click */
  cursor: default;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid green;
  padding: 8px 12px;
  display: block;
  text-align:left!important;

}
/* 3rd-level menu items stay clickable */
#os-vertical-container .os-mega-submenu.depth-2 a {
  pointer-events: auto;       /* clickable */
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  padding: 6px 12px;
}

.os-vertical-mega li a {
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

.os-vertical-mega li img {
  z-index: 1;
  pointer-events: none; /* ensures images don’t block clicks */
}

.os-vertical-mega li a {
  position: relative;
  z-index: 2;   /* ensure links are on top */
  pointer-events: auto; /* make sure they stay clickable */
}

.os-vertical-mega li img {
  z-index: 1;   /* keep images behind */
}
  /* ============================== Overlay ============================== */
.os-vertical-mega-overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(255,255,255,0.8); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease; 
  z-index: 1900; 
} 
.os-vertical-mega-overlay.active { 
  opacity: 1; 
  visibility: visible; 
    } 

/* Style for WooCommerce thumbnails inside mega menu */ 
#os-vertical-container .os-mega-submenu.grid-4cols li { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* align to top/left */ 
} 
#os-vertical-container .os-mega-submenu.grid-4cols li .menu-cat-thumb { 
    display: block; 
    width: 100px; /* adjust size */ 
    height: auto; 
    margin-bottom: 8px; /* spacing between image and title */ 
    object-fit: contain; /* keep aspect ratio */  
} 
#os-vertical-container .os-mega-submenu.grid-4cols li > a { 
    font-weight: 600; 
    text-transform: none; 
    margin-bottom: 6px; 
    display: block; 
} 
#os-vertical-container .os-mega-submenu.grid-4cols li a { 
    display: block; 
    text-align: center; 
}
#os-vertical-container .os-mega-submenu.grid-4cols li .menu-cat-title { 
    font-weight: 600; 
    text-transform: uppercase; 
    font-size: 14px; 
    margin-bottom: 6px; 
    display: block; 
} 
/* Ensure image is above children links */ 
 #os-vertical-container .os-mega-submenu.grid-4cols li { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
#os-vertical-container .os-mega-submenu.grid-4cols li > a { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    pointer-events: none; /* disable click on category heading */
} 
#os-vertical-container .os-mega-submenu.depth-2 a { 
    pointer-events: auto; /* keep children clickable */ 
}
#os-vertical-container .os-mega-submenu.grid-4cols .menu-cat-thumb { 
    width: 100px; 
    height: auto; 
    margin-bottom: 8px; 
    object-fit: contain;
} 




/*Mobile Toggle*/
/* ===========================
   Drawer Toggle Buttons
   =========================== */
.drawer-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.drawer-toggle .line {
  width: 30px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.5s ease;
}
.drawer-toggle:hover .line {
  background-color: #0073e6; /* accent color */
}

/* ===========================
   Mobile Drawers
   =========================== */
.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
  max-width: 80%;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  overflow-y: auto;
  transition: transform 0.5s ease-in-out, opacity 0.25s ease;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  height: 100%;
}

/* Start hidden */
.mobile-drawer.left {
  left: 0;
  transform: translateX(-100%);
  background:green;
  
}
.mobile-drawer.right {
  right: 0;
  transform: translateX(100%);
  background:yellow;
}

/* When open */
.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

/* Drawer header */
.mobile-drawer .drawer-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: inline-block;
  flex: 0 0 auto;
  justify-content: space-between;
  width:100%!important;
}
.mobile-drawer .drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* Drawer contents fills the space */
/* Nav inside drawer */
.mobile-drawer .mobile-nav-entry {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
/* Main UL menu takes full width */
.mobile-drawer .mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%!important;
}

/* Each LI fills full width */
.mobile-drawer .mobile-menu li {
  border-bottom: 1px solid #eee;
  width: 100%!important;
}
/* Anchor links */
.mobile-drawer .mobile-menu li a {
  display: flex;
  justify-content: space-between; /* text left, arrow right */
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  color: #fff;       /* adjust based on background */
  background: transparent;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}
/* Hover state */
.mobile-drawer .mobile-menu li a:hover {
  background: rgba(255,255,255,0.1);
}
/* ===========================
   Overlay Mask
   =========================== */
.drawer-overlay, .mobile-navigation-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999; /* behind drawer */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.drawer-overlay.active, .mobile-navigation-mask.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Prevent background scroll when drawer open */
html.drawer-open,
body.drawer-open {
  overflow: hidden;
}


/*Srollbar Styling*/
/* Target the scrollbar itself */
.mobile-drawer::-webkit-scrollbar {
  width: 4px; /* For vertical scrollbar */
  height: 4px; /* For horizontal scrollbar */
}

/*style the scrollbar track */
.mobile-drawer::-webkit-scrollbar-track {
  background: blue!important;
}

/*style the scrollbar thumb */
.mobile-drawer::-webkit-scrollbar-thumb {
  background: red!important;
  border-radius: 4px; /* Optional: for rounded corners */
  max-height: 8px!important;
}

/* Optional: style the scrollbar thumb on hover */
.mobile-drawer::-webkit-scrollbar-thumb:hover {
  background: black!important;
}


/* Accordion submenu with animation */
/* Submenu hidden by Default */
.mobile-drawer .sub-menu {
  display: none;
  padding-left: 10px;
  margin-left: 5px;
  border-left: none!important;
}

/* Show when parent li has .open */
.mobile-drawer .menu-item-has-children.open > .sub-menu {
  display: block;
}

/* Parent links with arrows */
.mobile-drawer .menu-item-has-children > a {
  position: relative;
  padding-right: 10px;
}

/* Arrow base */
.mobile-drawer .menu-item-has-children > a::after {
  content: "▶"; /* U+25B6 */
  font-size: 16px;
  margin-left: 6px;
  float: right;
  transition: transform 1.2s ease;
}

/* Arrow down when open */
.mobile-drawer .menu-item-has-children.open > a::after {
  content: "▼"; /* U+25BC */
}

/* Smooth submenu accordion */
.mobile-drawer .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, padding 0.4s ease;
}

/* Open state */
.mobile-drawer .menu-item-has-children.open > .sub-menu {
  max-height: 500px; /* enough for nested links */
}


/* ===========================
   Responsive
   =========================== */
@media (min-width: 1025px) {
  .mobile-drawer,
  .drawer-toggle,
  .mobile-navigation-mask {
    display: none !important;
  }
}

/* Force submenus to show when .open is applied */
.mobile-drawer .menu-item-has-children.open > .sub-menu {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ==========================
   Submenu Styling (all drawers)
   ========================== */

/* Base submenu */
.mobile-drawer .sub-menu {
  margin: 0;
  padding: 6px 0px 6px 0px; /* indent + vertical padding */
  border-left:none;
  background: #f9f9f9;
}

/* Submenu links */
.mobile-drawer .sub-menu li a {
  font-size: 14px;
  padding: 4px 8px;
  color: #444;
  border-bottom:none;
}

/* Hover effect */
.mobile-drawer .sub-menu li a:hover {
  background: #efefef;
}

/* Nested submenus (2nd level+) */
.mobile-drawer .sub-menu .sub-menu {
  padding-left: 5px;
  border-left: none;
  background: #fdfdfd;
}

/* Arrow sizing */
.mobile-drawer .menu-item-has-children > a::after {
  font-size: 16px;
  color: #fff;
  background: #666;
  padding:0px 3px 0px 2px; 
}



/* ==========================
   Mobile Search Bar Styling
   ========================== */
.mobile-header-search {
  display: none; /* hidden until search button clicked */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  padding: 6px 8px;
  z-index: 10001; /* above drawers */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-bottom: 1px solid #eee;
}

.mobile-header-search.active {
  display: block; /* shown when active */
}

/* Make the search form full width */
.mobile-header-search form {
  display: inline-block;
  align-items: center;
  width: 100%;
  float:left;
}

.mobile-header-search input[type="search"],
.mobile-header-search input[type="text"] {
  flex: 1;
  padding: 5px 6px;
  border: 1px solid #ddd;
  border-radius: 6px 0 0 6px;
  font-size: 16px;
}

.mobile-header-search button[type="submit"] {
  padding: 4px 6px;
  background: green; /* theme accent color */
  border: none;
  border-radius: 0 6px 6px 0;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.mobile-header-search button[type="submit"]:hover {
  background: blue;
}

/* Ensure it hides on desktop */
@media (min-width: 1025px) {
  .mobile-header-search {
    display: none !important;
  }
}



/*CAROUSEL SLIDER*/

.category-carousel-wrapper {
  max-width: 1136px;   /* same as banner width */
  margin: 0 auto;      /* center it */
  padding: 10px 0;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;         /* background for each card */
  border-radius: 8px;
  padding: 10px 15px;
  transition: transform 0.8s ease;
}

.category-card:hover {
  transform: scale(1.1, 1.1);
}

.category-card .cat-img img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  margin-right: 10px;
}

.category-card .cat-text span {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* Remove red underline/border on hover */
/* ===== Strong overrides for the carousel hover underline ===== */
/* Apply only to this carousel area so we don't break other links */
.category-carousel-wrapper a,
.category-carousel-wrapper a:link,
.category-carousel-wrapper a:visited,
.category-carousel-wrapper a:hover,
.category-carousel-wrapper a:active,
.category-carousel-wrapper a:focus {
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background: transparent !important;
}
/* Remove any pseudo-element lines (most common culprit) */
.category-carousel-wrapper a::before,
.category-carousel-wrapper a::after,
.category-carousel-wrapper .category-card::before,
.category-carousel-wrapper .category-card::after,
.category-carousel-wrapper .cat-text span::before,
.category-carousel-wrapper .cat-text span::after {
  content: none !important;
  display: none !important;
}
/* Specific: remove bottom border/underline on the text span */
.category-carousel-wrapper .category-card .cat-text,
.category-carousel-wrapper .category-card .cat-text span {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* If theme adds the line by styling child elements, remove it from all children inside the carousel (temporary safe override) */
.category-carousel-wrapper * {
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Optional: nicer focus styles (keyboard accessibility) */
.category-carousel-wrapper a:focus .category-card {
  outline: 2px solid rgba(0,123,255,0.12);
  outline-offset: 2px;
}




.custom-slider.animation-zoom .owl-item.active img {
    animation: zoomIn 0.8s ease-in-out;
}
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.custom-slider.animation-flip .owl-item.active img {
    animation: flipInY 0.8s ease-in-out;
}
@keyframes flipInY {
    from { transform: rotateY(90deg); opacity: 0; }
    to   { transform: rotateY(0deg); opacity: 1; }
}

/* Ensure Owl Animate.css is available */
.owl-animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes zoomIn {
  from {transform: scale(0.8); opacity: 0;}
  to   {transform: scale(1); opacity: 1;}
}
.zoomIn {animation-name: zoomIn;}

@keyframes zoomOut {
  from {transform: scale(1); opacity: 1;}
  to   {transform: scale(0.8); opacity: 0;}
}
.zoomOut {animation-name: zoomOut;}

@keyframes flipInY {
  from {transform: perspective(400px) rotateY(90deg); opacity: 0;}
  to   {transform: perspective(400px) rotateY(0deg); opacity: 1;}
}
.flipInY {animation-name: flipInY;}

@keyframes flipOutY {
  from {transform: perspective(400px) rotateY(0deg); opacity: 1;}
  to   {transform: perspective(400px) rotateY(90deg); opacity: 0;}
}
.flipOutY {animation-name: flipOutY;}

/* --- OS Slider: animations used by our JS (apply to .item and .thumb) --- */
.custom-slider .os-animated,
.custom-slider .os-fadeIn, .custom-slider .os-fadeOut,
.custom-slider .os-zoomIn, .custom-slider .os-zoomOut,
.custom-slider .os-flipInY, .custom-slider .os-flipOutY,
.custom-slider .os-bounceIn, .custom-slider .os-bounceOut,
.custom-slider .os-rotateIn, .custom-slider .os-rotateOut,
.custom-slider .os-rollIn, .custom-slider .os-rollOut,
.custom-slider .os-jackInTheBox {
  animation-duration: 0.9s;
  animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fade */
.os-fadeIn  { animation-name: osFadeIn; }
.os-fadeOut { animation-name: osFadeOut; }
@keyframes osFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes osFadeOut { from { opacity:1 } to { opacity:0 } }

/* Zoom */
.os-zoomIn  { animation-name: osZoomIn; transform-origin: center center; }
.os-zoomOut { animation-name: osZoomOut; transform-origin: center center; }
@keyframes osZoomIn  { from { transform: scale(0.85); opacity:0 } to { transform: scale(1); opacity:1 } }
@keyframes osZoomOut { from { transform: scale(1); opacity:1 } to { transform: scale(0.85); opacity:0 } }

/* Flip Y */
.os-flipInY  { animation-name: osFlipInY; transform-origin: center center; }
.os-flipOutY { animation-name: osFlipOutY; transform-origin: center center; }
@keyframes osFlipInY { from { transform: perspective(400px) rotateY(90deg); opacity:0 } to { transform: perspective(400px) rotateY(0); opacity:1 } }
@keyframes osFlipOutY{ from { transform: perspective(400px) rotateY(0); opacity:1 } to { transform: perspective(400px) rotateY(90deg); opacity:0 } }

/* Bounce */
.os-bounceIn  { animation-name: osBounceIn; }
.os-bounceOut { animation-name: osBounceOut; }
@keyframes osBounceIn  { 0% { transform: translateY(-300px); opacity:0 } 60% { transform: translateY(30px); opacity:1 } 80% { transform: translateY(-10px)} 100% { transform: translateY(0) } }
@keyframes osBounceOut { from { opacity:1 } to { transform: translateY(-200px); opacity:0 } }

/* Rotate */
.os-rotateIn  { animation-name: osRotateIn; transform-origin:center center; }
.os-rotateOut { animation-name: osRotateOut; transform-origin:center center; }
@keyframes osRotateIn  { from { transform: rotate(-200deg) scale(.8); opacity:0 } to { transform: rotate(0) scale(1); opacity:1 } }
@keyframes osRotateOut { from { transform: rotate(0) scale(1); opacity:1 } to { transform: rotate(200deg) scale(.8); opacity:0 } }

/* Roll */
.os-rollIn  { animation-name: osRollIn; transform-origin:center center; }
.os-rollOut { animation-name: osRollOut; transform-origin:center center; }
@keyframes osRollIn  { from { transform: translateX(-100%) rotate(-120deg); opacity:0 } to { transform: translateX(0) rotate(0); opacity:1 } }
@keyframes osRollOut { from { transform: translateX(0) rotate(0); opacity:1 } to { transform: translateX(100%) rotate(120deg); opacity:0 } }

/* JackInTheBox */
.os-jackInTheBox { animation-name: osJackIn; transform-origin: center bottom; }
@keyframes osJackIn { 0% { opacity:0; transform: scale(.1) rotate(30deg) } 50% { transform: scale(1.02) rotate(-10deg) } 70% { transform: scale(.98) rotate(3deg) } 100% { opacity:1; transform: scale(1) rotate(0) } }

/* Apply animations to common slide targets (background figure, image or generic item) */
.custom-slider .owl-item.os-animated .item,
.custom-slider .owl-item.os-animated .thumb,
.custom-slider .owl-item.os-animated,
.custom-slider .item.os-animated,
.custom-slider .thumb.os-animated,
.custom-slider .item > * { /* keep for safety */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure that our animation classes also work whether added to .owl-item or to the slide itself */
.custom-slider .owl-item.os-fadeIn, .custom-slider .os-fadeIn,
.custom-slider .owl-item.os-zoomIn, .custom-slider .os-zoomIn,
.custom-slider .owl-item.os-flipInY, .custom-slider .os-flipInY,
.custom-slider .owl-item.os-bounceIn, .custom-slider .os-bounceIn,
.custom-slider .owl-item.os-rotateIn, .custom-slider .os-rotateIn,
.custom-slider .owl-item.os-rollIn, .custom-slider .os-rollIn,
.custom-slider .owl-item.os-jackInTheBox, .custom-slider .os-jackInTheBox {
  /* nothing else needed — keyframes above apply */
}


/*Arrows and dots*/
/* Make navigation arrows bigger and white */
.custom-slider .owl-nav button.owl-prev,
.custom-slider .owl-nav button.owl-next {
  font-size: 2rem;
  color: white;
  background: #000ffa!important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-slider .owl-nav button.owl-prev:hover{
  background: #27c0fe!important; 
}
.custom-slider .owl-nav button.owl-next:hover{
  background: #27c0fe!important; 
}

/* Active dot color */
.custom-slider .owl-dots .owl-dot.active span {
  background: #27c0fe; /* brand color */
}

/* Force Owl arrows & dots visible */
.custom-slider .owl-nav {
    display: flex !important;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}
.custom-slider .owl-nav button {
    pointer-events: all;
    background: #000ffa!important;
    color: #fff!important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
}
.custom-slider .owl-dots {
    text-align: center;
    margin-top: 10px;
}

/* Round slider dots with theme color */
/* Force Owl dots visible & round them */
.custom-slider .owl-dots {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  pointer-events: auto;
}

.custom-slider .owl-dots .owl-dot {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-slider .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  transition: transform .18s ease, background .18s ease;
}

.custom-slider .owl-dots .owl-dot.active span {
  background: #27c0fe; /* change to your brand color */
  transform: scale(1.25);
}

/* optional: ensure nav is visible */
.custom-slider .owl-nav { display: flex !important; }




/* 🖼 Make slider images scale nicely on small devices */
.custom-slider .owl-carousel .item .thumb {
    background-size: cover; /* default for desktop - full bleed */
    background-position: center center;
    background-repeat: no-repeat;
    height: 420px; /* matches your current layout height */
}

/* ✅ On mobile, switch to 'contain' so the full image shows without cropping */
@media (max-width: 600px) {
    .custom-slider .owl-carousel .item .thumb {
        background-size: contain !important;
        background-color: #000; /* optional: black bars if aspect ratio differs */
        height: 240px; /* shrink height to fit screen better */
    }
}
/* Desktop stays the same No black lines*/
.custom-slider .owl-carousel .item .thumb {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 420px;
}

/* ✅ Small screens: reduce height so more of image is visible */
@media (max-width: 768px) {
    .custom-slider .owl-carousel .item .thumb {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .custom-slider .owl-carousel .item .thumb {
        height: 220px;
    }
}
.custom-slider .owl-carousel .item .thumb {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 16 / 9; /* ✅ Automatically keeps correct height */
}

/* For very small screens, you can use a taller aspect ratio */
@media (max-width: 480px) {
    .custom-slider .owl-carousel .item .thumb {
        aspect-ratio: 4 / 3;
    }
}
/* Make slider background match site (white) to cover remaining black lines*/
.custom-slider .owl-carousel .item,
.custom-slider .owl-carousel .item .thumb {
    background-color: #fff !important; /* change if your site background is not white */
}



/*MAKE ONLY MENU STICKY*/
/* Sticky menu for both desktop and mobile */
.main-navigation.is-sticky,
.mobile-header .bottom-block .block-entry.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Sticky Menu with Semi-Transparent Background */
.main-navigation.is-sticky,
.mobile-header .bottom-block .block-entry.is-sticky {
  background: rgba(0, 0, 255, 0.65); /* 65% blue */
  backdrop-filter: blur(5px); /* optional: nice blur effect */
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.mobile-header .bottom-block {
  background: rgba(0, 0, 255, 0.65); /* 65% blue */
  backdrop-filter: blur(5px); /* optional: nice blur effect */
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}