/* ==========================================
   HOME PAGE STYLES - CAROUSEL
   ========================================== */

.carousel {
     width: 88vw;
     max-width: 920px;
     margin: 10px auto 22px;
     /* padding-top: 2%; */
     background: #ffffff;
     border-radius: 14px;
     border: 1px solid #e6ebf7;
     box-shadow: 0 8px 32px rgba(72,56,199,0.10), 0 1.5px 8px rgba(0,0,0,0.07);
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     /* border: 2px solid #bdbdf7; */
     min-height: 0;
}


@media (min-width: 769px) {
     /* .carousel {
height: 250px;
} */
}

.carousel-track {
     display: flex;
     width: 100%;
     transition: transform 1s cubic-bezier(.77,0,.18,1);
     background: transparent;
}

.carousel-item {
     flex-shrink: 0;
     width: 88vw;
     max-width: 920px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: transparent;
     padding: 0;
     border-radius: 0;
     box-shadow: none;
}

.carousel-item img {
     width: 100%;
     height: auto;
     max-height: 260px;
     object-fit: cover;
     display: block;
     border-radius: 12px;
     box-shadow: 0 4px 24px rgba(72,56,199,0.10);
     border: 2px solid #e0e7ff;
     transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}

.carousel-item img:hover {
     transform: scale(1.03) rotate(-1deg);
     box-shadow: 0 8px 32px rgba(72,56,199,0.18);
     border-color: #bdbdf7;
}


.controls {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 10;
     pointer-events: none;
}

.controls button {
     width: 48px;
     height: 48px;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     background: rgba(72,56,199,0.16);
     box-shadow: 0 2px 8px rgba(72,56,199,0.10);
     transition: background 0.3s, box-shadow 0.3s;
     pointer-events: auto;
     display: flex;
     align-items: center;
     justify-content: center;
}

.controls button:hover {
     background: #4838c7;
     box-shadow: 0 4px 16px rgba(72,56,199,0.18);
}

.controls svg {
     width: 28px;
     height: 28px;
     stroke: #fff;
     pointer-events: none;
}


.pagination {
     position: absolute;
     bottom: 14px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     justify-content: center;
     gap: 12px;
     z-index: 20;
     background: rgba(255, 255, 255, 0.7);
     padding: 6px 14px;
     border-radius: 20px;
     box-shadow: 0 2px 8px rgba(72,56,199,0.08);
}

.pagination-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: #bdbdf7;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.3s;
     border: 2px solid #e0e7ff;
}

.pagination-dot.active {
     background-color: #4838c7;
     transform: scale(1.2);
     border-color: #4838c7;
}


@media (max-width: 1024px) {
     .carousel {

          max-width: 100vw;
          min-height: 0;
          border-radius: 10px;
          margin: 8px auto 14px;
     }

     .carousel-item {
          width: 100vw;
          max-width: 100vw;
     }

     .carousel-item img {

          max-height: none;
          height: auto;
          object-fit: contain;
          border-radius: 8px;
     }

     .controls button {

          width: 32px;
          height: 32px;
     }

     .controls svg {

          width: 16px;
          height: 16px;
     }

     .pagination-dot {

          width: 8px;
          height: 8px;
     }

     .pagination {

          padding: 3px 7px;
          gap: 5px;
          bottom: 6px;

     }
}