.embla {
    position: relative;
    width: 100%;
}
.embla__viewport {
  width: 100%;
  overflow: hidden;
}
.embla__container {
  display: flex;
  flex-flow: row nowrap;
}
@media (max-width: 768px) {
    .embla {

        --embla-dots: 5;
        --currentDotTop: 0;
        --currentDotLeft: 0;
        --dotWidth: 20px;
        --dotHeight: 6px;
        --container-gap: 10px;
        --container-width: calc((var(--dotWidth) + var(--container-gap)) * var(--embla-dots));
    }

   

    .embla__container {
        display: flex !important;
        flex-flow: row nowrap;
    }

    .embla__slide {
        flex: 0 0 100%;
        min-width: 0;
    }

    .embla__dots {
        display: flex;
        margin-top: 10px;
        margin-inline: auto;
        padding-block: 10px;
        transition: all 0.3s ease;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        z-index: 10;
        overflow: hidden;
        width: var(--container-width);

        
    }
    .embla__dots .container {
        display: flex;
        gap: var(--container-gap);
        transition: all 0.3s ease;

    }
    .embla__dot {
        height: var(--dotHeight);
        width: var(--dotWidth);
        background-color: #fff9;
        transition: all 0.3s ease;
        flex: 0 0 var(--dotWidth);
    }
    .embla__dot--selected {
        background-color: #fff;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
    }
    .embla__dot--visible {
        transform: scale(0.7);
      }
      
      .embla__dot--visible-medium {
        transform: scale(1.2);
      }
      
      .embla__dot--visible-large {
        transform: scale(1.2);
      }

      .embla__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 20px;
        bottom: 10px;
        z-index: 10;
        overflow: hidden;
        color: #fff;
        font-size: 18px;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
      }
      .pagination-wrapper {
        display: flex;
        align-items: center;
      }
      .pagination-number {
        display: inline-block;
        min-width: 1ch; /* Prevents layout shift */
        text-align: center;
        margin-right: 5px;
      }
      
      @keyframes slideOutUp {
        to { transform: translateY(-50%); opacity: 0; }
      }
      
      @keyframes slideOutDown {
        to { transform: translateY(50%); opacity: 0; }
      }
      
      @keyframes slideInUp {
        from { transform: translateY(50%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      
      @keyframes slideInDown {
        from { transform: translateY(-50%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
}