.carousel-container { 
   position: relative; 
   width: 100%;
   margin: 40px auto 40px;
}

.carousel { 
   position: relative;
   overflow: hidden; 
   width: 100%; 
   height: max-content;
   margin: 0 auto 20px;
}

.carousel {
   width: 95%;
}

.carousel-inner { 
   display: flex;
   padding: 15px 0;
   transition: transform 0.5s ease-in-out; /* Animation for translation */
}

.carousel-item { 
   position: relative;
   box-sizing: border-box;
   margin-left: 2.5%;
   margin-right: 2.5%;
   text-align: center;
}

.carousel-picture {
   position: relative;
   text-align: center; 
}

.carousel-picture a {
   display: block;
   width: 280px;
   height: 280px;
   color: #fff;
}

.carousel-picture a:hover {
   font-weight: 400;
}

.carousel-picture a span {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 0;
   color: #fff;
   background: rgba(47, 47, 48, 0.7);
   font-size: 18px;
   font-weight: 400;
   line-height: 33px;
   letter-spacing: 1px;
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
}

.carousel-item.has-caption .carousel-picture a:hover span,
.carousel-item.has-caption .carousel-picture a:focus-visible span {
   opacity: 1;
   pointer-events: auto;
}

.carousel-picture a:focus {
   outline: #0066ff solid 3px !important;
   outline-offset: 10px;
}

.carousel-picture a:focus:not(:focus-visible) {
   outline: 0 !important;
} 

.carousel-item img { 
   width: 100%; 
   height: auto;
}

.hairdresser-carousel .carousel-item img:nth-child(2),
.hairdresser-carousel .carousel-item img:nth-child(5) {
   width: 120%;
}

.carousel-dots {
   text-align: center;
   margin-top: 0;
}

.carousel-dots .dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin: 0 5px;
   background-color: #7c7c7e;
   cursor: pointer;
   transition: background-color 0.3s;
   shape-rendering: crispEdges;
}

.carousel-dots .dot.active {
   background: #fb7d00;
}


/* BELOW 1400 */

@media only screen and (max-width: 1400px) {
   
   .carousel-item {
      margin-left: 4%;
      margin-right: 4%;
   }
   
   .carousel-picture a {
      width: 320px;
      height: 320px;
   }
}


/* BELOW 900 */

@media only screen and (max-width: 900px) {

   .carousel-container {
      margin: 0 auto 50px;
   }
   
   .carousel-picture a {
      width: 250px;
      height: 250px;
   }
}


/* BELOW 700 */

@media only screen and (max-width: 700px) {
   
   .carousel-picture a {
      width: 465px;
      height: 465px;
   }
}


/* BELOW 480 */

@media only screen and (max-width: 480px) {
   
   .carousel-picture a {
      width: 410px;
      height: 410px;
   }
   
   .carousel-item {
      margin-left: 5%;
      margin-right: 5%;
   }
}


/* BELOW 380 */

@media only screen and (max-width: 380px) {
   
   .carousel-picture a {
      width: 325px;
      height: 325px;
   }
   
   .carousel-item {
      margin-left: 4%;
      margin-right: 4%;
   }
}