:root {
  --wacom-purple: #6b46c1;
  --wacom-dark: #1f2937;
  --wacom-light-gray: #f3f4f6;
}

* {
  font-family: "Montserrat", sans-serif !important;
}
body {
  margin: 0;
  padding: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

/* Mobile optimization - Remove GSAP animation states on mobile */
@media (max-width: 768px) {
  [class*="animate-"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
  }
}

/* Menu Dropdown Styles */
.menu-dropdown-container {
  /* position: relative; */
}

.menu-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  /* border-radius: 8px; */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 24px;
  width: 320px;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-dropdown-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
}
.menu-divider{
    margin-top: 32px;
    padding-top:25px ;
    border-top: 1px solid #E5E7EB;
}
.close-dropdown{
    padding: 12px 8px;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.close-dropdown:hover {
    opacity: 0.7;
}

/* .menu-dropdown-item:hover {
  background-color: #f3f4f6;
  color: #00a5ad;
  padding-left: 25px;
} */

.menu-icon-toggle {
  transition: transform 0.3s ease;
}

.menu-icon-toggle:hover {
  transform: scale(1.1);
}

h2 {
  color: #00a5ad;
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 46px; /* 127.778% */
}
h3 {
  color: #161f28;
  text-align: center;
  font-size: 23.4px;
  font-style: normal;
  font-weight: 600;
  line-height: 31px;
}
h4 {
  color: #161f28;
  text-align: center;
  font-size: 16.2px;
  font-weight: 700;
  line-height: 22px;
}
.gray-color {
  color: #6b7280;
}
.white-color {
  color: #fff !important;
}
.light-green-color {
  color: #99c221;
}
.black-color {
  color: #161f28;
}
.blue-color {
  color: #00AADB;
}
.red-color {
  color: #d51010;
}
.f-size-11 {
  font-size: 11px;
}
.f-size-14 {
  font-size: 14px;
}
.f-size-12 {
  font-size: 12px;
}
.f-size-13 {
  font-size: 13px;
}
.f-size-15 {
  font-size: 15px;
}
.f-size-16 {
  font-size: 16px;
}
.f-size-18 {
  font-size: 18px;
}
.f-size-20 {
  font-size: 20px;
}
.f-size-24 {
  font-size: 24px;
}
.f-size-26 {
  font-size: 26px;
}
.f-size-32 {
  font-size: 32px;
}
.f-size-36 {
  font-size: 36px;
}
.f-weight-700 {
  font-weight: 700;
}
.f-weight-600 {
  font-weight: 600;
}
.f-weight-500 {
  font-weight: 500;
}
.f-weight-300 {
  font-weight: 300;
}
.f-weight-400 {
  font-weight: 400;
}
.mt-40 {
  margin-top: 40px;
}
.mt-45 {
  margin-top: 45px;
}

.mt-60 {
  margin-top: 60px;
}
.mt-65 {
  margin-top: 65px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-36 {
  margin-top: 36px;
}
.bold-text {
  font-size: 54px;
  font-weight: 700;
  line-height: 60px;
}
/* Hero Section */
.header-section {
  padding: 18px 0px;
  background-color: #ffe800;
}
.hero-section {
  background: white;
  padding: 40px 0 1rem;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.swiper-slide{
    transform:none !important;
}
.hero-content {
  display: flex;
  align-items: center;
  gap: 4rem;
}

/* Brand Logo */
.brand-logo {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--wacom-dark);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

/* Headline */
.hero-headline {
  color: #161f28;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
}
.navbar-collapse{
flex-wrap: wrap;
}

.hero-headline .creative {
  color: var(--wacom-dark);
}

.hero-headline .solutions {
  color: var(--wacom-purple);
}

/* Buttons */
.btn-group {
  gap: 1rem;
}
.main-btn {
  border-radius: 54px !important;
  padding: 18px 24px;
  color: white;
  font-size: 12.6px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  transition: all 0.3s ease;
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.purple-btn {
  background: #6950a1;
  border: 1px solid #6950a1;
}
.green-btn {
  background: #99c221;
  border: 1px solid #99c221;
}
.yellow-btn {
  background: #ffe800;
  border: 1px solid #ffe800;
  min-width: 199px;
  color: #161f28;
  font-size: 12.6px;
  font-weight: 500;
}
.blue-btn {
  border-radius: 48px;
  border: 1px solid #00aadb;
  background: #00aadb;
  min-width: 156px;
}
.outline-new-btn {
  background: white;
  border: 1px solid #6950a1;
  color: #6950a1;
}
.outline-black-btn {
  background: white;
  border: 1px solid #161f28;
  color: #161f28;
  min-width: 286px;
  font-size: 12.6px;
  font-weight: 500;
}
/* Product Image */
.product-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* unify image area height so cards align */
}
.product-image img{
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.tablet-container {
  position: relative;
  transform: rotate(-5deg);
  transition: transform 0.3s ease;
}

.tablet-container:hover {
  transform: rotate(-3deg) scale(1.02);
}

/* Pagination Dots */
.pagination-dots {
  display: none; /* replaced by Swiper pagination */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Swiper overrides */
.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-pagination-bullets {
  bottom: 2rem;
}

.hero-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d1d5db;
  opacity: 1;
  transition: transform 0.3s ease, background 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: var(--wacom-purple);
  transform: scale(1.2);
}
.products-swiper {
  padding: 0 42px;
  overflow: hidden;
  position: relative;
}

.products-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.products-swiper .swiper-slide {
  height: auto;
  width: auto;
}

/* Force navigation buttons to be visible for products section */
/* .products-swiper .swiper-button-prev,
.products-swiper .swiper-button-next {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  z-index: 10;
} */

/* .products-swiper {
            padding: 0 3rem;
        } */

.product-card {
  background: white;
  border-radius: 16px;
  /* padding: 1.5rem;  */
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: var(--stroke-weight-1, 1.002px) solid #e5e7eb;
  background: #fff;
}

.product-card:hover {
  transform: translateY(-8px);
  /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); */
}

.product-image {
  margin-bottom: 18px;
}

.screen-text {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 8px;
  font-weight: 600;
  color: #1f2937;
}

.intuos {
  background: #374151;
}

.intuos-buttons {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.intuos-buttons .button {
  width: 12px;
  height: 12px;
  background: #6b7280;
  border-radius: 50%;
}
.light-blue-color-btn {
  min-width: 155px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00a5ad;
  border-radius: 48px;
  color: white;
  font-size: 13px;
  border-radius: 48px;
  border: 1px solid #00a5ad;
  padding: 10px 21px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px 24px 16px;
}
.product-name {
  /* Single-line title, same vertical level across cards */
  height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.original-price {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 14px;
}
.product-btn:hover {
  background: #0f766e;
}

.product-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}


.product-icons .icon {
  font-size: 1rem;
  opacity: 0.6;
}

/* Swiper Navigation */
.products-prev,
.products-next {
  color: var(--wacom-dark);
  background: white;
  /* border-radius: 8px; */
  width: 55px;
  height: 55px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  opacity: 1 !important; /* Force arrows to always be visible */
  display: flex !important;
  box-shadow: 0 9px 24px 0 #999;
}
.img-position {
  position: absolute;
  right: 16px;
}
.products-prev:hover,
.products-next:hover {
  background: #00a5ad;
  color: white;
}
.products-next-blue:hover,
.products-prev-blue:hover {
    background: #00aadb;
}
/* Video Player Styles */
.video-container {
  margin: 0 auto;
  max-width: 1200px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  /* border-radius: 12px; */
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
  background: #fff;
}
.sub-card{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
}
.sub-card .product-image img{
    border-radius: 8px;

}

.sub-card .product-card {
    width: 75%;
    height: auto;
}
/* Video Cover */
.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.video-cover.hidden {
  opacity: 0;
  pointer-events: none;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 12px; */
}

.play-button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-icon {
  /* width: 80px;
  height: 80px; */
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.play-button:hover .play-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* Video Player */
.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* border-radius: 12px; */
  border: none;
}

.video-player.hidden {
  display: none;
}

/* Responsive video player */
@media (max-width: 768px) {
    /* .f-size-32{
        font-size: 28px;
    }
    .f-size-36{
        font-size: 32px;
    }
    .f-size-24{
        font-size: 20px;
    }
    .f-size-20{
        font-size: 18px;
    }
    .f-size-18{
        font-size: 16px;
    } */
    /* .f-size-16{
        font-size: 14px;
    }
    .f-size-14{
        font-size: 12px;
    }
    .f-size-12{
        font-size: 10px;
    }
    .f-size-11{
        font-size: 9px;
    }
    .f-size-10{
        font-size: 8px;
    } */
  .video-wrapper {
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio on mobile */
  }
  
  .play-icon {
    width: 60px;
    height: 60px;
  }
}

.products-prev::after,
.products-next::after {
  font-size: 20px;
}

/* Ensure navigation is always visible */
.products-swiper .swiper-button-disabled {
  opacity: 0.3 !important; /* Show disabled state but keep visible */
}

/* Responsive Design */
@media (max-width: 768px) {
  .products-section {
    padding: 2rem 0;
  }
  .tablet-product {
    width: 100px;
    height: 70px;
  }
}

.dot.active {
  background: var(--wacom-purple);
  transform: scale(1.2);
}

.dot:hover {
  background: #9ca3af;
}
.contact-section {
  /* background-color: linear-gradient(
    90deg,
    rgba(88, 28, 135, 0.9) 0%,
    rgba(30, 58, 138, 0.8) 50%,
    rgba(88, 28, 135, 0.9) 100%
  ); */
  background-image: url("../images/margin-wrap.png");
  padding: 70px 16px 75px 16px;
  background-size: cover;
}
.contact-input {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
  /* text-align: center !important; */
  display: flex;
  width: 288px;
  /* width: 100% !important; */
  height: 40px;
  padding: 17px 21px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.contact-input:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}
/* Placeholder styling */
.contact-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.8;
}

/* Placeholder styling for different browsers */
.contact-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}

.contact-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}

.contact-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}
.footer-section {
  background-color: #727272;
  padding-top: 48px;
  padding-bottom: 20px;
}

/* Cintiq Section GSAP Animations - Initial Hidden State */
.animate-cintiq {
  opacity: 0;
  y: 100;
}

.animate-logo {
  opacity: 0;
  y: 50;
  scale: 0.8;
}

.animate-cintiq-title {
  opacity: 0;
  x: -30;
}

.animate-subtitle {
  opacity: 0;
  y: 40;
}

.animate-button {
  opacity: 0;
  y: 30;
  scale: 0.9;
}

.animate-image-container {
  opacity: 0;
  y: 80;
}

.animate-cintiq-image {
  opacity: 0;
  y: 60;
  scale: 0.8;
  rotation: 5;
}

/* Responsive Design */
@media (max-width: 992px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }

  .tablet {
    width: 300px;
    height: 210px;
  }

  .btn-group {
    justify-content: center;
  }
}

@media (max-width: 768px) {
    .logo-image{
        width: 60%;
    }
  .hero-section {
    padding: 2rem 0 4rem;
  }

  .hero-headline {
    font-size: 2rem;
  }

  .brand-logo {
    font-size: 2rem;
  }

  .tablet {
    width: 250px;
    height: 175px;
  }

  .navbar-nav {
    gap: 1rem;
  }
}
.intuos-pro-section {
  background-color: #f5f5f5;
  padding: 50px 16px 60px 16px;
}

/* Hero Swiper - Basic Styles */
.hero-swiper {
  width: 100%;
  height: auto;
}

.hero-swiper .swiper-slide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.hero-swiper .swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-swiper .swiper-slide-next,
.hero-swiper .swiper-slide-prev {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Discover Section - Simple Animations */
.animate-discover-section {
  opacity: 0;
  y: 60;
}

.animate-discover-title {
  opacity: 0;
  y: 40;
}

.animate-discover-text {
  opacity: 0;
  y: 30;
}

/* Ready to Start Creating Section - Simple Animations */
.animate-ready-section {
  opacity: 0;
  y: 70;
}

.animate-ready-title {
  opacity: 0;
  y: 50;
}

.animate-ready-subtitle {
  opacity: 0;
  y: 40;
}

.animate-ready-buttons {
  opacity: 0;
  y: 30;
}

/* Unlock Your Creative Potential Section - Simple Animations */
.animate-unlock-section {
  opacity: 0;
  y: 80;
}

.animate-unlock-icon {
  opacity: 0;
  y: 60;
  scale: 0.8;
}

.animate-unlock-title {
  opacity: 0;
  y: 50;
}

.animate-unlock-text {
  opacity: 0;
  y: 40;
}

.animate-unlock-form {
  opacity: 0;
  y: 30;
}

.animate-unlock-disclaimer {
  opacity: 0;
  y: 20;
}

/* Products Section GSAP Animations - Initial Hidden State */
.animate-products {
  opacity: 0;
  y: 80;
}

.animate-title {
  opacity: 0;
  y: 50;
}

.animate-swiper {
  opacity: 0;
  y: 60;
}

/* Sequential Product Cards - Bottom to Top Animation */
.animate-sequential-card-1 {
  opacity: 0;
  y: 100;
  scale: 0.8;
}

.animate-sequential-card-2 {
  opacity: 0;
  y: 100;
  scale: 0.8;
}

.animate-sequential-card-3 {
  opacity: 0;
  y: 100;
  scale: 0.8;
}

.animate-sequential-card-4 {
  opacity: 0;
  y: 100;
  scale: 0.8;
}

.animate-sequential-card-5 {
  opacity: 0;
  y: 100;
  scale: 0.8;
}

/* Entry to Digital Creativity Section GSAP Animations - Initial Hidden State */
.animate-creativity-section {
  opacity: 0;
  y: 150;
  scale: 0.95;
}

.animate-creativity-title {
  opacity: 0;
  y: 100;
  rotation: -5;
}

.animate-creativity-swiper {
  opacity: 0;
  y: 120;
}

.animate-creativity-card-1 {
  opacity: 0;
  y: 100;
  scale: 0.6;
  rotation: 15;
}

.animate-creativity-card-2 {
  opacity: 0;
  x: -120;
  scale: 0.5;
  rotation: -20;
}

.animate-creativity-card-3 {
  opacity: 0;
  y: -100;
  scale: 0.6;
  rotation: 10;
}

.animate-creativity-card-4 {
  opacity: 0;
  x: 120;
  scale: 0.5;
  rotation: -15;
}

.animate-creativity-card-5 {
  opacity: 0;
  y: 80;
  x: -60;
  scale: 0.7;
  rotation: 25;
}

/* Shop our best sellers Section GSAP Animations - Initial Hidden State */
.animate-sellers-section {
  opacity: 0;
  x: -100;
}

.animate-sellers-title {
  opacity: 0;
  x: -80;
}

.animate-sellers-swiper {
  opacity: 0;
  y: 100;
}

.animate-seller-card-1,
.animate-seller-card-2,
.animate-seller-card-3,
.animate-seller-card-4,
.animate-seller-card-5 {
  opacity: 0;
  x: -100;
}

/* Intuos Pro Section GSAP Animations - Initial Hidden State */
.animate-intuos-pro {
  opacity: 0;
  y: 100;
}

.animate-intuos-text {
  opacity: 0;
  y: 60;
}

.animate-intuos-logo {
  opacity: 0;
  y: 50;
  scale: 0.8;
}

.animate-intuos-title {
  opacity: 0;
  y: 40;
}

.animate-intuos-button {
  opacity: 0;
  y: 50;
  scale: 0.9;
}

.animate-intuos-image-container {
  opacity: 0;
  y: 80;
}

.animate-intuos-image {
  opacity: 0;
  y: 100;
  scale: 0.7;
  rotation: 5;
}
.wpcf7 form .wpcf7-response-output{
  border: none;
  display: none;

}
.wpcf7-spinner
{
  display: none;
}

/* Search form (global) */
.search-form,
#searchform {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 12px 0 20px 0;
}
.search-form .search-field,
#searchform #s {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.search-form .search-field::placeholder,
#searchform #s::placeholder {
  color: #9ca3af;
}
.search-form .search-field:focus,
#searchform #s:focus {
  outline: 0;
  border-color: #99c222;
  box-shadow: 0 0 0 0.2rem rgba(153, 194, 34, 0.25);
}
.search-form .search-submit,
#searchform #searchsubmit {
  height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid #99c222;
  background: #99c222;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus,
#searchform #searchsubmit:hover,
#searchform #searchsubmit:focus {
  background: #85ad1f;
  border-color: #85ad1f;
  box-shadow: 0 0 0 0.2rem rgba(153, 194, 34, 0.25);
}
/* Search page specific styling - wider form */
.search-page-form-wrapper .search-form,
.search-page-form-wrapper #searchform {
  max-width: 100%;
  width: 100%;
  margin: 0;
}
.search-page-form-wrapper .search-form .search-field,
.search-page-form-wrapper #searchform #s {
  flex: 1 1 auto;
  /* min-width: 500px; */
  width: 450px;
  font-size: 16px;
  padding: 0 18px;
  height: 50px;
}
.search-page-form-wrapper .search-form .search-submit,
.search-page-form-wrapper #searchform #searchsubmit {
  height: 50px;
  padding: 0 28px;
  font-size: 16px;
}

@media (max-width: 992px) {
  .search-header-wrapper {
    flex-direction: column;
    align-items: stretch !important;
  }
  .search-header-wrapper .page-title {
    margin-bottom: 15px !important;
  }
  .search-page-form-wrapper .search-form .search-field,
  .search-page-form-wrapper #searchform #s {
    min-width: auto;
  }
}
@media (max-width: 576px) {
  .contact-input{
    width: 100% !important;
  }
  .search-form,
  #searchform {
    flex-direction: column;
    align-items: stretch;
  }
  .search-form .search-submit,
  #searchform #searchsubmit {
    width: 100%;
  }
  .search-page-form-wrapper .search-form .search-field,
  .search-page-form-wrapper #searchform #s {
    min-width: auto;
    width: 100%;
  }
}
.search-min-height{
  min-height: 55vh;
}
.category-scroll{
  display: flex;
  overflow-x: scroll;
  flex-wrap: nowrap !important;
  gap: 10px; /* spacing between links */
  padding-bottom: 10px; /* space for scrollbar */
  scrollbar-width: thin;  /* Firefox - thin scrollbar */
  scrollbar-color: gray #f0f0f0;  /* Firefox - thumb and track color */
}
/* Scrollbar styling for Chrome, Safari and Opera */
.category-scroll::-webkit-scrollbar {
  height: 8px;  /* scrollbar height */
}
.category-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;  /* track color */
  border-radius: 10px;
}
.category-scroll::-webkit-scrollbar-thumb {
  background: gray;  /* scrollbar color */
  border-radius: 10px;
}
.category-scroll::-webkit-scrollbar-thumb:hover {
  background: gray;  /* scrollbar color on hover */
}
.category-scroll a {
  white-space: nowrap;
  flex-shrink: 0; /* prevent links from shrinking */
}
.subscribe-btn-home{
  padding: 0 !important;
}