/* Suriya WOW layer — loaded last on storefront only */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --wow-navy: #0b2740;
  --wow-navy-2: #123a5c;
  --wow-orange: #fb7701;
  --wow-red: #d40000;
  --wow-grad: linear-gradient(110deg, #d40000 0%, #fb7701 55%, #ffb347 100%);
  --wow-soft: #f2f5f9;
}

body#body {
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  background:
    radial-gradient(1000px 480px at 0% -10%, rgba(251, 119, 1, 0.16), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(212, 0, 0, 0.1), transparent 50%),
    radial-gradient(700px 500px at 50% 110%, rgba(16, 57, 89, 0.08), transparent 55%),
    var(--wow-soft) !important;
}

/* ----- Header ----- */
#header.customHeader {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 40px rgba(11, 39, 64, 0.08) !important;
}

#header.customHeader::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--wow-grad);
}

.mainNavbar .navList.sk-nav-pill {
  background: #eef3f8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(11, 39, 64, 0.06) !important;
  padding: 7px !important;
}

.mainNavbar .navList a {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
}

.mainNavbar .navList a.is-active {
  color: #fff !important;
  background: var(--wow-grad) !important;
  box-shadow: 0 10px 24px rgba(212, 0, 0, 0.32) !important;
}

a.themeWhatsup.sk-wa-btn {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4) !important;
  animation: wowPulseSoft 2.4s ease-in-out infinite;
}

@keyframes wowPulseSoft {
  0%, 100% { box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35); }
  50% { box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55); }
}

/* ----- Announcement ----- */
.sk-announce.custom-marquee {
  background: var(--wow-grad) !important;
  padding: 5px 0 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.sk-announce::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  animation: wowShine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wowShine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* ----- Hero (clean working banner) ----- */
.sk-hero-section {
  position: relative;
  padding-bottom: 4px !important;
}

.sk-hero-wrap {
  padding: 16px 16px 6px !important;
  max-width: 1280px !important;
}

.sk-hero-stage {
  position: relative !important;
  border-radius: 20px !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.sk-hero-stage::before {
  display: none !important;
  content: none !important;
}

.mianHeroBanner {
  position: relative !important;
  min-height: 220px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #e8eef4 !important;
  box-shadow: 0 22px 50px rgba(11, 39, 64, 0.16) !important;
}

.mianHeroBanner .swiper-wrapper {
  overflow: visible !important;
}

.mianHeroBanner .swiper-slide {
  height: auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #e8eef4;
}

.mianHeroBanner .swiper-slide a.sk-hero-slide-link {
  display: block !important;
  line-height: 0 !important;
  position: relative !important;
}

.mianHeroBanner .swiper-slide a.sk-hero-slide-link::after {
  display: none !important;
  content: none !important;
}

.mianHeroBanner .swiper-slide img,
.mianHeroBanner .swiper-slide-active img,
section.firstbanner .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 20px !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.sk-hero-fallback {
  min-height: 360px !important;
  height: 420px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 32px;
  background:
    radial-gradient(circle at 25% 30%, rgba(251, 119, 1, 0.35), transparent 45%),
    linear-gradient(135deg, #0b2740, #123a5c 55%, #1a4a6b) !important;
}

.sk-hero-fallback h2 {
  color: #fff !important;
  font-size: 34px !important;
  margin: 8px 0 10px !important;
}

.sk-hero-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 8 !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #103959 !important;
  box-shadow: 0 10px 24px rgba(11, 39, 64, 0.2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sk-hero-nav:hover {
  background: #fff !important;
  color: #fb7701 !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.sk-hero-prev { left: 14px !important; }
.sk-hero-next { right: 14px !important; }

.sk-hero-prev::before,
.sk-hero-next::before {
  display: none !important;
  content: none !important;
}

.sk-hero-stage .hero-pagination {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 14px auto 0 !important;
  width: max-content !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(11, 39, 64, 0.1) !important;
}

.sk-hero-stage .hero-pagination .swiper-pagination-bullet {
  width: 9px !important;
  height: 9px !important;
  margin: 0 3px !important;
  background: #c9d3de !important;
  opacity: 1 !important;
}

.sk-hero-stage .hero-pagination .swiper-pagination-bullet-active {
  width: 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #d40000, #fb7701) !important;
}

.sk-hero-caption,
.sk-hero-progress {
  display: none !important;
}

/* ----- Highlights ----- */
.sk-highlights {
  margin: 0 !important;
  padding: 4px 0 0 !important;
  background: transparent !important;
}

.sk-highlights .customContainer {
  max-width: 1280px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.sk-highlights-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.sk-highlight-card {
  position: relative;
  display: flex !important;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 18px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid rgba(11, 39, 64, 0.06) !important;
  box-shadow: 0 18px 44px rgba(11, 39, 64, 0.1) !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
  animation: wowCardIn 0.8s both;
}

.sk-highlight-card:nth-child(1) { animation-delay: 0.1s; }
.sk-highlight-card:nth-child(2) { animation-delay: 0.2s; }
.sk-highlight-card:nth-child(3) { animation-delay: 0.3s; }
.sk-highlight-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes wowCardIn {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

.sk-highlight-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wow-grad);
}

.sk-highlight-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 56px rgba(11, 39, 64, 0.16) !important;
}

.sk-highlight-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 20px !important;
  background: var(--wow-grad) !important;
  box-shadow: 0 12px 24px rgba(212, 0, 0, 0.3);
  animation: wowFloat 2.8s ease-in-out infinite;
}

.sk-highlight-card:nth-child(2) .sk-highlight-icon { animation-delay: 0.3s; }
.sk-highlight-card:nth-child(3) .sk-highlight-icon { animation-delay: 0.6s; }
.sk-highlight-card:nth-child(4) .sk-highlight-icon { animation-delay: 0.9s; }

@keyframes wowFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.sk-highlight-card h4 {
  margin: 0 0 5px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--wow-navy) !important;
  font-family: "Poppins", sans-serif !important;
}

.sk-highlight-card p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #617489 !important;
}

/* ----- Section heads ----- */
.sk-section-head {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.sk-section-badge {
  display: inline-flex !important;
  margin-bottom: 12px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fb7701 !important;
  background: rgba(251, 119, 1, 0.12) !important;
  border: 1px solid rgba(251, 119, 1, 0.28) !important;
}

.sk-section-head .themeTitle,
.sk-section-head .review-title {
  font-family: "Poppins", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--wow-navy) !important;
  -webkit-text-fill-color: var(--wow-navy) !important;
  background: none !important;
}

.sk-section-head .review-title span {
  background: var(--wow-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.sk-section-head .section-sub,
.sk-section-head .review-subtitle {
  max-width: 540px !important;
  margin: 8px auto 0 !important;
  color: #617489 !important;
  font-size: 14px !important;
}

.brand-section-title .themeTitle::after,
.review-title::after {
  width: 72px !important;
  height: 4px !important;
  margin: 16px auto 0 !important;
  background: var(--wow-grad) !important;
  box-shadow: 0 6px 16px rgba(251, 119, 1, 0.4);
  animation: none !important;
}

/* ----- Brands ----- */
.sk-brands-section {
  padding: 8px 0 28px !important;
  margin-top: 0 !important;
}

.sk-brands-section .customContainer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}

.sk-brands-section .sk-section-head,
.sk-brands-section .customTitle.brand-section-title {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  height: auto !important;
}

.sk-brands-section .categoryCntainer {
  gap: 14px;
}

.categoryItem.brandItems .categoryItemContent {
  border-radius: 20px !important;
  border: 1px solid rgba(11, 39, 64, 0.06) !important;
  box-shadow: 0 14px 36px rgba(11, 39, 64, 0.08) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
}

.categoryItem.brandItems .categoryItemContent:hover {
  transform: translateY(-10px) scale(1.03) !important;
  box-shadow: 0 26px 50px rgba(11, 39, 64, 0.14) !important;
  border-color: rgba(251, 119, 1, 0.35) !important;
}

.categoryItem.brandItems .categoryItemContent span {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--wow-navy) !important;
  color: var(--wow-navy) !important;
}

/* ----- Counters ----- */
.sk-counter-band.our-counter {
  position: relative !important;
  margin: 36px 0 !important;
  padding: 0px 0 0px !important;
  overflow: hidden !important;
  background:
    radial-gradient(600px 280px at 12% 20%, rgba(251, 119, 1, 0.28), transparent 60%),
    radial-gradient(520px 260px at 90% 80%, rgba(212, 0, 0, 0.22), transparent 55%),
    linear-gradient(135deg, #081f33 0%, #0f3554 48%, #123a5c 100%) !important;
}

.sk-counter-band::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 119, 1, 0.2), transparent 70%);
  animation: wowOrb 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes wowOrb {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-40px, 30px) scale(1.15); }
}

.sk-counter-band .sk-section-badge {
  color: #ffd7b0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.sk-counter-band .themeTitle,
.sk-counter-band .section-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.sk-counter-band .section-sub {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

.sk-counter-band .customContainer > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.sk-counter-band .customContainer > .row > [class*="col-"] {
  display: flex !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 16px !important;
}

.sk-counter-band .counter-item {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(14px);
  padding: 28px 14px !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22) !important;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none !important;
}

.sk-counter-band .counter-item:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(251, 119, 1, 0.45) !important;
}

.sk-counter-band .counter-title {
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.sk-counter-icon {
  display: inline-flex !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px !important;
  border-radius: 14px !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background: var(--wow-grad) !important;
  box-shadow: 0 12px 24px rgba(251, 119, 1, 0.4);
}

.sk-counter-band .counter-title h2 {
  background: linear-gradient(90deg, #fff, #ffd7b0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  font-family: "Poppins", sans-serif !important;
  margin: 0 0 6px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.sk-counter-band .counter-title h3 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* ----- Reviews ----- */
.sk-reviews-band.review-section {
  background: linear-gradient(180deg, #fff 0%, #f2f5f9 100%) !important;
  padding: 40px 0 30px !important;
}

.sk-reviews-band .review-card {
  position: relative !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 20px 48px rgba(11, 39, 64, 0.1) !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--wow-grad) border-box !important;
  transition: transform 0.35s ease !important;
}

.sk-reviews-band .review-card:hover {
  transform: translateY(-8px) !important;
}

.sk-reviews-band .review-card::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  right: 18px;
  font-size: 80px;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(251, 119, 1, 0.14);
  pointer-events: none;
}

.sk-reviews-band .stars.small i {
  color: #f5a623 !important;
}

/* ----- CTA strip ----- */
.sk-cta-strip {
  margin: 10px auto 10px;
  max-width: 1280px;
  padding: 28px 32px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--wow-grad);
  color: #fff;
  box-shadow: 0 24px 50px rgba(212, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.sk-cta-strip::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -40px;
  top: -60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.sk-cta-strip h3 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.sk-cta-strip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.sk-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fff;
  color: #d40000 !important;
  font-weight: 750;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease;
  position: relative;
  z-index: 1;
}

.sk-cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  color: #d40000 !important;
}

/* ----- Map / download ----- */
.map-container {
  border-radius: 24px !important;
  overflow: hidden !important;
  margin: 20px auto 48px !important;
  max-width: 1280px !important;
  box-shadow: 0 28px 60px rgba(11, 39, 64, 0.16) !important;
  border: 3px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--wow-grad) border-box !important;
}

.downloadSection {
  position: relative;
  overflow: hidden;
}

.sk-wa-float {
  width: 62px !important;
  height: 62px !important;
  font-size: 32px !important;
  box-shadow: 0 16px 36px rgba(37, 211, 102, 0.5) !important;
}

@media (max-width: 992px) {
  .sk-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mianHeroBanner .swiper-slide img {
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
  .sk-hero-fallback {
    height: auto !important;
    min-height: 220px !important;
  }
}

@media (max-width: 576px) {
  .sk-highlights-grid {
    grid-template-columns: 1fr !important;
  }
  .mianHeroBanner .swiper-slide img {
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
  .sk-hero-fallback {
    height: auto !important;
    min-height: 180px !important;
  }
  .sk-hero-nav {
    width: 36px !important;
    height: 36px !important;
  }
  .sk-hero-prev { left: 8px !important; }
  .sk-hero-next { right: 8px !important; }
  .sk-cta-strip {
    padding: 22px 18px;
    margin: 8px 12px 28px;
  }
  .sk-counter-band .counter-title h2 {
    font-size: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Typography scale-down (override older large fonts) */
body#body,
body#body p,
body#body span,
body#body a,
body#body li,
body#body h1,
body#body h2,
body#body h3,
body#body h4,
body#body h5,
body#body h6 {
  font-family: "Poppins", sans-serif !important;
}

.themeTitle,
.section-heading .themeTitle,
.review-title,
.sk-page-hero h1 {
  font-family: "Poppins", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sk-page-hero h1 {
  font-size: 30px !important;
}

.sk-page-hero p,
.review-subtitle,
.section-sub {
  font-size: 14px !important;
}

.counter-title h2 {
  font-size: 32px !important;
  font-family: "Poppins", sans-serif !important;
}

.sk-hero-fallback h2 {
  font-size: 28px !important;
  font-family: "Poppins", sans-serif !important;
}