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

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

.home .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%;
   margin-right: 2%;
   text-align: center;
}

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

.carousel-item a {
   display: block;
   width: 330px;
   height: 250px;
   color: #fff;
}

.home .carousel-item a {
   width: 290px;
   height: 290px;
}

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

.carousel-item a:hover span {
   opacity: 0;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: fit-content;
   padding: 15px 20px;
   bottom: 0;
   left: 0;
   color: #fff;
   background: rgba(76, 70, 70, 0.8);
   font-size: 18px;
   line-height: 33px;
   letter-spacing: 1px;
}

.carousel-item a:hover span {
   opacity: 1;
   transition: all 0.3s ease-in;
}

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

.carousel-item 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: 10px;
}

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

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


/* BELOW 1300 */

@media only screen and (max-width: 1300px) {
   
   .carousel-item {
      margin-left: 2.5%;
      margin-right: 2.5%;
   }
}


/* BELOW 900 */

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

   .carousel-container {
      margin: 0 auto 50px;
   }
   
   .carousel-item {
      margin-left: 4%;
      margin-right: 4%;
   }
}


/* BELOW 600 */

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

   .carousel-container {
      margin-bottom: 60px;
   }
}


/* BELOW 450 */

@media only screen and (max-width: 450px) {
   
   .carousel-item {
      margin-left: 9.5%;
      margin-right: 4%;
   }
}


/* BELOW 400 */

@media only screen and (max-width: 400px) {
   
   .carousel-item {
      margin-left: 4%;
      margin-right: 2%;
   }
}