*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif;}
body{background:#fff;}
a{text-decoration: none;}
.logo img,
.logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

ul{padding-left: 0;}

.header-top .container{margin: 0 auto; display: flex;
  justify-content: space-between;
  align-items: center;}

/* Header Top */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px; /* increased padding */
  background: #fff;
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* subtle shadow */
}
.header-top .logo{font-size:28px; font-weight:700; color:#f44336;}
.header-top .search{flex:1; max-width:600px; display:flex; margin-left:20px;}
.header-top .search input{
  width:100%; padding:10px 15px; font-size:16px; border:1px solid #ccc; border-radius:4px 0 0 4px; outline:none;
}
.header-top .search button{
  padding:10px 15px;
  border:none;
  background:#fff;       /* white background */
  /*color:#f44336;         /* red icon */
  color: #00A0E3;
  font-size:16px;
  cursor:pointer;
  border-radius:0 4px 4px 0;
  /*border:1px solid #f44336; /* optional: red border for style */
  border: 1px solid #00A0E3;
  transition:0.3s;
}

.header-top .search button:hover{
  /*background:#f44336;*/
  background: #00A0E3;
  color:#fff;
}


.header-top .call{margin-left:20px; font-weight:500; color:#333;}
.header-top .right{display:flex; align-items:center; gap:15px; font-weight:500;}
.header-top .right span{cursor:pointer; /*color:#f44336;*/ color: #00A0E3;}

/* Header Bottom - Menu */
.header-bottom {
  /*background: #f44336;*/
  background: #00A0E3;
  position: sticky;
  top: 92px; /* match header-top height + spacing */
  z-index: 1090;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
.header-bottom .nav-container{max-width:1200px;margin:0 auto;padding:0 16px; display:flex; align-items:center; justify-content:center; position:relative;}
.header-bottom nav ul{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:6px;
}
.header-bottom nav ul li{
  position:relative;
 /* text-align: center;*/
}
.header-bottom nav ul li a{
  text-decoration:none; color:#fff; padding:16px 22px; display:block; font-weight:400; transition:0.18s;
  border-radius:6px;
}
.header-bottom nav ul li a:hover{/*background:#d32f2f;*/ background: #DC0B7B;}
.header-bottom nav ul li ul{
  display:block;
  position:absolute; top:100%; left:0; background:#fff; color:#333; border:1px solid #ddd; min-width:285px; z-index:999; box-shadow:0 8px 24px rgba(0,0,0,0.12);
  opacity:0; pointer-events:none; transform:translateY(10px); transition:all .18s ease;
}
.header-bottom nav ul li:hover > ul{
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.header-bottom nav ul li ul li{position:relative;}
.header-bottom nav ul li ul li a{
  color:#333; padding:7px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid #ccc;
  border-radius:0px; font-size: 14px;
}
.header-bottom nav ul li ul li a:hover{background:#f5f5f5;}
.header-bottom nav ul li ul li ul{
  display:none; position:absolute; top:0; left:100%; background:#fff; min-width:260px; border:1px solid #ddd; box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.header-bottom nav ul li ul li:hover > ul{display:block;}
.header-bottom nav ul li ul li.has-submenu > a::after{
  content:'▶'; font-size:12px; margin-left:6px; color:#666;
}

/* Mobile hamburger */
.hamburger{
  display:none; position:absolute; left:-7px; top:8px; background:transparent;border:0;color:grey;font-size:22px;padding:8px;cursor:pointer; z-index:1105;
}

/**********/
.mobile-menu {
  position: fixed; top:0; left:-100%; width: 80%; height: 100%; background:#fff; z-index:9999; overflow:hidden; transition:0.3s;
}
.mobile-menu.active { left:0; }
.m-inner { width:100%; height:100%; position:relative; overflow:hidden; }
.menu-slide {
  position:absolute; top:0; left:100%; width:100%; height:100%; background: #00A0E3; overflow-y:auto; transition:0.3s;
}
.menu-slide.active { left:0; }
.menu-slide.exit-left { left:100%; }
.menu-back { display:block; padding:12px;/* background:#f1f1f1;*/ cursor:pointer; font-weight:bold; }
.m-inner ul { list-style:none; padding:0; margin:0; }
.m-inner li { padding:12px 16px; border-bottom:1px solid #eee; cursor:pointer; }

/* Main menu arrows (down) */
nav ul li.has-submenu > a::after {
    content: "\f0d7"; /* FontAwesome down caret */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Submenu arrows (right) */
nav ul li.has-submenu ul li.has-submenu > a::after {
    content: "\f0da"; /* FontAwesome right caret */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Rotate arrow on hover (optional) */
nav ul li.has-submenu:hover > a::after {
    transform: rotate(180deg); /* rotates down arrow to up */
}

/* Mobile menu submenu arrow at the right */
.mobile-menu .menu-slide ul li {
    position: relative;
    padding-right: 25px; /* leave space for arrow */
    cursor: pointer;
}

/* Remove the inline arrow text added by JS */
.mobile-menu .menu-slide ul li::after {
    content: '▶';
    position: absolute;
    right: 10px;  /* distance from right edge */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff; /* change arrow color if needed */
}

/* Remove the JS-added arrow */
.mobile-menu .menu-slide ul li:contains('▶') {
    display: inline; /* ignore */
}

/***********/


/* Mobile offcanvas menu */
.mobile-overlay{
  display:none;
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.4); z-index:1098;
}
.mobile-menu{
  position:fixed; top:0; left:-320px; width:300px; height:100%;
  /*background:#f44336;*/ background: #00A0E3; color:#fff; z-index:1100; transition:0.3s ease;
  overflow-y:auto;
}
.mobile-menu.active{left:0;}
.mobile-menu .m-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 10px; border-bottom:1px solid rgba(255,255,255,0.2); background: #fff;
}
.mobile-menu .m-logo{font-size:20px; font-weight:700;}
.mobile-menu .m-close{
  font-size:28px; color:#00A0E3; background:transparent; border:none; cursor:pointer;
}
.mobile-menu .m-inner{padding:10px 0;}
.mobile-menu ul{list-style:none; margin:0; padding:0;}
.mobile-menu li{border-bottom:1px solid rgba(255,255,255,0.06);}
.mobile-menu a{display:block; padding:0px 0px; color:#fff; text-decoration:none; font-weight:600; border-radius:6px;}
.mobile-menu .submenu{display:none; padding-left:10px; background:rgba(255,255,255,0.03);}
.mobile-menu .submenu a{padding:10px 16px; font-weight:500;}
.mobile-toggle{float:right; font-weight:700; cursor:pointer; transition:0.3s;}
.mobile-toggle.open{transform:rotate(90deg);}

/* Banner */ 
.banner{position:relative; width:100%; height:450px; overflow:hidden;}
.banner img{position:absolute; width:100%; height:100%; object-fit:cover; display:none;}
.banner img.active{display:block;}
.banner h2{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:2.2rem; background:rgba(0,0,0,0.5);
  padding:10px 20px; border-radius:5px; z-index:10;
}
/* Slider Buttons */
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.4); color:#fff; border:none;
  padding:12px 18px; cursor:pointer; font-size:15px;
  border-radius:50px; z-index:20;
}
.slider-btn:hover{background:rgba(0,0,0,0.7);}
.prev-btn{left:25px;}
.next-btn{right:25px;}
/* Dots */
.dots-container{
  position:absolute; bottom:15px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.dot{width:14px; height:14px; background:rgba(255,255,255,0.6); border-radius:50%; cursor:pointer; transition:0.3s;}
.dot:hover,.active-dot{/*background:#f44336;*/ background: #00A0E3;}

/* Categories */
.categories{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; padding:50px;}
.category{text-align:center; padding:20px; border:1px solid #eee; border-radius:10px; transition:0.3s; cursor:pointer;}
.category:hover{box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.category img{width:100%; max-height:150px; object-fit:contain; margin-bottom:15px;}
.category h3{font-size:18px; font-weight:500;}

.browse-category {
  padding: 50px 0;
  background: #f9f9f9;
  position: relative;
  overflow: hidden;
}

.browse-category .section-title {
  font-size: 26px;
  font-weight: 600;
  color: #222;
  margin-bottom: 25px;
  text-align: center;
}

/* Category items */
.category-carousel .cat-item {
  text-align: center;
  padding: 20px 15px;
  transition: all 0.3s ease;
}
.category-carousel .cat-item img {
  width: 120px !important;       /* smaller circle */
  height: 120px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00A0E3;
  background: #fff;
  padding: 2px;       /* less padding for compact look */
  margin: 0 auto 4px; /* closer to text */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.category-carousel .cat-item p {
  font-size: 13px;    /* smaller text */
  margin-top: 2px;
  font-weight: 500;
  color: #333;
}

.category-carousel .cat-item:hover img {
  transform: scale(1.08);
 /* border-color: #DA251C;*/
 border-color: #E5097F;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Owl Carousel stage spacing */
.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
  gap: 15px !important; /* reduced gap so arrows don’t overlap */
  padding: 0 50px;       /* padding for left/right so arrows don’t cover items */
}

/* Owl nav arrows */
.owl-nav {
  position: absolute;
  top: 40%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 100;
 /*opacity: 1;
 padding: 0 10px; /* small padding inside carousel edges */
  pointer-events: none;
 
}

.owl-nav button {
  background: #fff !important; /* default arrow bg */
  color: #000 !important;       /* default arrow color */
  border-radius: 50%;
  width: 40px;                  /* slightly smaller */
  height: 40px;
  font-size: 14px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  border: 1px solid #ccc !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  pointer-events: all;
}

.owl-nav button:hover {
  background: #00A0E3 !important;   /* green hover */
  color: #fff !important;           /* arrow white on hover */
  border-color:#00A0E3 !important;
}

.about-section {
  padding: 60px 20px;
  background: #fff;
  color: #333;
}

.about-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.about-logo img {
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.about-text h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  color: #222;
}

.about-text p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
  color: #555;
  text-align: center;
}

.about-text h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0 10px;
  color: #222;
  text-align: center;
}

.services-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center the items */
  margin-top: 15px; /* optional spacing from heading */
  gap: 15px 25px;
}

.services-list li {
 /* background: #f44336;*/
 background: #00A0E3;
  color: #fff;
  padding: 8px 14px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
}

.services-list li:hover {
  background: #E00A7D;
  cursor: default;
}

/* ===== Footer ===== */
.footer {
  /*background: #c62828; /* darker red for contrast */
  background: #00A0E3;
  color: #fff;
  padding: 60px 20px 20px;
  font-size: 15px;
}
.footer-container {
  max-width: 1270px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}
.footer h3, .footer h4 {
  color: #fff;
  margin-bottom: 15px;
  font-weight: 600;
}
.footer p {
  color: #f5f5f5;
  line-height: 1.6;
  margin-bottom: 10px;
}
.footer ul {
  list-style: none;
}
.footer ul li {
  margin-bottom: 8px;
}
.footer ul li a {
  color: #f5f5f5;
  text-decoration: none;
  transition: 0.3s;
}
.footer ul li a:hover {
  color: #E5097F; /* yellow hover */
}
.social-links {
  margin-top: 15px;
}
.social-links a {
  display: inline-block;
  margin-right: 10px;
  /*background: #b71c1c;*/
 /* background: #2785aa;*/
 background: #246b87;
  color: #fff;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  transition: 0.3s;
}
.social-links a:hover {
  background: #E5097F;
  color: #fff;
}
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
  color: #eee;
  font-size: 14px;
}




/* === Mega Menu for Label & Stickers === */
.header-bottom nav ul li.mega-menus{position: inherit;}
.header-bottom nav ul li.mega-menus ul li a{padding: 3px 14px; border: none;}

.header-bottom nav ul li .mega-dropdown { 
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr)); /* 4 columns */
  gap: 10px 25px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fff;
  color: #333;
  width: 1300px; /* slightly wider and consistent */
  max-width: 90vw; /* prevent overflow on smaller screens */
  /*padding: 25px 35px;*/
  padding: 8px 4px;
  border: 0px solid #ddd;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 999;
}

/* Show on hover */
.header-bottom nav ul li:hover > .mega-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Items inside mega dropdown */
.mega-dropdown li {
  list-style: none;
}

.mega-dropdown li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.mega-dropdown li a:hover {
  background: #f5f5f5;
  /*color: #f44336;*/
  color: #00A0E3;
}

/* Headings inside mega dropdown */
.mega-dropdown li a b {
  display: block;
  /*color: #d32f2f;*/
  color: #00A0E3;
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 15px;
}

/* Prevent horizontal scroll / overflow */
body {
  overflow-x: hidden !important;
}
.header-bottom {
  overflow: visible !important;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .header-bottom nav ul li .mega-dropdown {
    grid-template-columns: repeat(2, 1fr);
    width: 95vw;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
  }
}

@media (max-width: 600px) {
  .header-bottom nav ul li .mega-dropdown {
    grid-template-columns: 1fr;
    width: 100%;
    left: 0;
    transform: translateY(10px);
    padding: 15px;
  }
}



.categories-section {
  background-color: #f9f9f9;
}


.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #222;
}

.category-list li {
  margin-bottom: 0.5rem;
}

.category-list li a {
  color: #555;
  text-decoration: none;
  transition: color 0.3s;
}

.category-list li a:hover {
  color: #E5097F; /* accent color */
}
.text-pink { color: #E5097F !important; }


/****/