body {
   margin: 0;
   padding: 0;
 }

 .slideshow-container {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
   padding-top: 180px;
 }




 .carousel-wrapper {
   display: flex;
   transition: transform 0.5s ease-in-out;
   width: 100%;
 }





 .slide {
   min-width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   /* align-items: center; */
 }

 .slide img {
   width: 100%;
   height: 100%;

 }


 .prev,
 .next {
   position: fixed;
   /* position: absolute; */
   top: 50%;
   transform: translateY(-50%);
   font-size: 20px;
   font-weight: bold;
   color: rgba(78, 78, 78, 0.6);
   background-color: rgba(0, 0, 0, 0.1);
   padding: 10px 15px;
   cursor: pointer;
   border-radius: 5px;
   transition: all 0.3s ease;
   z-index: 10;
   border: none;
   outline: none;
 }

 .next {
   right: 20px;
 }

 .prev {
   left: 20px;
 }

 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.3);
   transform: translateY(-50%) scale(1.1);
 }

 .prev:active,
 .next:active {
   transform: translateY(-50%) scale(0.95);
 }

 .dots {
   text-align: center;
   padding: 20px 0;
 }

 .dot {
   display: inline-block;
   width: 15px;
   height: 15px;
   background-color: #bbb;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
   margin: 0 5px;
 }

 .active,
 .dot:hover {
   background-color: #717171;
   transform: scale(1.2);
 }