/* Hide the images by default */

 .cursor {
     cursor: pointer;
 }

 .prev {
     z-index: 3 !important;
     cursor: pointer;
     position: absolute;
     width: 70px;
     height: 70px;
     left: 18%;
     padding: 16px;
     margin-top: 11.5%;
     background: linear-gradient(0deg, rgb(0 160 227 / 80%) -46%, rgb(246, 246, 246) 112%);
     color: white;
     font-weight: bold;
     font-size: 30px;
     line-height: 40px;
     text-align: center;
     border-radius: 100%;
     transition: all 0.3s ease-out;
 }

 .next {
     z-index: 3 !important;
     cursor: pointer;
     position: absolute;
     width: 70px;
     height: 70px;
     right: 18%;
     padding: 16px;
     margin-top: 11.5%;
     background: linear-gradient(0deg, rgb(0 160 227 / 80%) -46%, rgb(246, 246, 246) 112%);
     color: white;
     font-weight: bold;
     font-size: 30px;
     line-height: 40px;
     text-align: center;
     border-radius: 100%;
     transition: all 0.3s ease-out;
 }

 .prev:hover,
 .next:hover {
     background: linear-gradient(0deg, rgb(254 204 0 / 80%) -46%, rgb(246, 246, 246) 112%) !important;
     color: white;
 }


 .row:after {
     content: "";
     display: table;
     clear: both;
 }

 .column {
     float: left;
     width: 100%;
 }

 .mySlides>* {
     border-radius: 20px;
     margin-bottom: 1.5rem !important;
 }

 .column>* {
     border-radius: 20px !important;
 }

 .demo {
     opacity: 0.6;
     transition: all 0.3s ease-out;
 }

 .active,
 .demo:hover {
     opacity: 1;
 }

 .demo {
     opacity: 0.6;
     transition: all 0.3s ease-out;
 }

 /* Fading animation */
 .mySlides img {
     animation-name: fade;
     animation-duration: 1.5s;
 }

 @keyframes fade {
     from {
         opacity: .4
     }

     to {
         opacity: 1
     }
 }