.swiper {
    width: 100%;
    height: 530px;
  }

  .swiper-slide {
    font-size: 18px;
    background: #fff;
    display: flex;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  }

  .swiper-slide .title {
    font-size: clamp(1.5rem, 4vw, 2.6rem); /* min, preferred (vw), max */
    font-weight: 300;
    padding-left: clamp(1rem, 8vw, 120px);
  }

  .swiper-slide .title-normal {
    font-size: clamp(1.5rem, 4vw, 2.6rem); /* min, preferred (vw), max */
    font-weight: 300;
    color: #fff;
  }

  .swiper-slide .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem); /* 16px–21px approx */
    padding-left: clamp(1rem, 8vw, 120px);
  }
  
  .swiper-slide .text {
    font-size: clamp(0.875rem, 2vw, 0.95rem); /* 14px–15px approx */
    width: 85%;
    line-height: 1.4;
    padding-left: clamp(1rem, 8vw, 120px);
  }

  .swiper-slide .text-normal {
    font-size: clamp(0.875rem, 2vw, 0.95rem); /* 14px–15px approx */
    line-height: 1.4;
    color: #fff;
  }

  .swiper-slide .half-div{
    width: 50%;
    display: flex;
    flex-direction: column; /* stack items vertically */
    justify-content: center; /* vertical centering */
    height: 100%; /* required for vertical alignment */
    background-color: #d5eef9;  /* tempory */
  }

  .swiper-slide .button{
    width: fit-content;
    margin-left: clamp(1rem, 8vw, 120px);
  }


  /* Specific styles for the category carousel */
.mySwiperCategories {
  padding: 20px 0;
  height: auto; /* Don’t inherit 600px height from the global .swiper */
}

.mySwiperCategories .swiper-wrapper {
  align-items: center; /* Vertically center the items */
}

.mySwiperCategories .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /* Avoid the large height of your hero slider */
  background: transparent; /* Remove white background */
}

.mySwiperCategories .category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
}

.mySwiperCategories .circle {
  width: 150px;
  height: 150px;
  border: 2px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
}

.mySwiperCategories .circle img {
  /* padding: 25px; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mySwiperCategories .category-card p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.slider-image{
  max-width: 80%;
}