@font-face {
   font-family: 'Roboto-Regular';
   src: url(/fonts/Roboto-Regular.woff2) format('woff2');
 }
  @font-face {
   font-family: 'RobotoSerif-Regular';
   src: url(/fonts/RobotoSerif-Regular.woff2) format('woff2');
 }
 @font-face {
   font-family: 'RobotoLight-Regular';
   src: url(/fonts/Roboto-Light.woff2) format('woff2');
 }


 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "RobotoLight-Regular";
 }

 
 .slider-container {
   position: relative;
   height: 47%;
   width: 100%;
   overflow: hidden;
 }

 .slider-wrapper .slider-item {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
 }


 .slider-wrapper .slider-item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 80%;
   filter: grayscale(20%);
   background-image: url("./images/img-01.webp");
   background-size: cover;
   background-position: center;
 }

 .slider-wrapper .slider-item:nth-child(2):before {
   background-image: url("./images/img-02.webp");
 }

 .slider-wrapper .slider-item:nth-child(3):before {
   background-image: url("./images/img-03.webp");
 }

 .slider-wrapper .slider-item:nth-child(4):before {
   filter: grayscale(25%) brightness(80%);
   background-image: url("./images/img-04.webp");
 }

 .slider-wrapper .slider-item:nth-child(5):before {
   background-image: url("./images/img-05.webp");
 }

 .slider-wrapper .slider-item .slide-content {
   position: relative;
   z-index: 10;
   color: #fff;
   width: 100%;
   opacity: 0;
   margin: 0 auto;
   max-width: 1400px;
   padding:  20px 10px;


 }

 .slider-item.swiper-slide-active .slide-content {
   animation: animate_opacity 0.7s 0.6s linear forwards;
 }

 @keyframes animate_opacity {
   100% {
     opacity: 1;
   }
 }

 .slider-wrapper .slider-item .slide-content>* {
   max-width: 100%;
 }



 .slider-item .slide-content .slide-subtitle {
  font-family: "RobotoSerif-Regular";
   font-size: 20.5px;
   font-weight: normal;
   opacity: 0;
   transform: translateY(60%);
   text-shadow: 2px 2px 3px #424141;
   color: #ffc505;
 }

 .slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {
  font-family: "Roboto-Regular";
   animation: animate_text 0.6s 0.6s linear forwards;
   text-shadow: 2px 2px 3px #424141;
   color: #ffffff;
 }

 @keyframes animate_text {
   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .slider-item .slide-content .slide-description {
   font-family: "Roboto-Light";
    font-size: 1.3rem;
   font-weight: normal;
   letter-spacing: 1px;
   margin-top: 25px;
   line-height: 25px;
   opacity: 0;
   transform: translateY(60%);
   text-shadow: 2px 2px 3px #575757;
   color: #ffffff;
 }

 .slider-item.swiper-slide-active .slide-description {
   animation: animate_text 0.6s 1s linear forwards;
   
   
 }

 .slider-item .slide-content .slide-button {
   display: block;
   margin-top: 45px;
   color: #ffffff;
   width: 0;
   padding: 13px 0;
   font-size: 0.8rem;
   font-weight: 600;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-decoration: none;
   border: 2.3px solid #ffc505;
   transition: 0.5s ease;
   opacity: 0;
   white-space: nowrap;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 100px;
 }


 .slider-item.swiper-slide-active .slide-button {
   animation: animate_button 0.5s 1.3s linear forwards;
 }

 @keyframes animate_button {
   100% {
     width: 250px;
     opacity: 1;
   }
 }

 .slider-item .slide-content .slide-button span {
   opacity: 0;
 }

 .slider-item.swiper-slide-active .slide-button span {
   animation: animate_opacity 0.5s 1.5s linear forwards;
 }

 .slider-item .slide-content .slide-button:hover {
   color: #000;
   background: #fff;
 }

 .slider-container .slider-controls {
   position: absolute;
   bottom: 45px;
   z-index: 30;
   width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
 }

 .slider-controls .slider-pagination {
   display: flex;
   list-style: none;
   margin: 0 auto;
   max-width: 1400px;
   padding: 0 20px;
   position: relative;
   justify-content: space-between;
 }

 .slider-pagination .slider-indicator {
   position: absolute;
   bottom: 0;
   border-bottom: 2px solid #fff;
   transition: 0.4s ease-in-out;
 }



 .slider-controls .slider-tab.current {
   color: #fff;
 }

 .slider-navigations button {
   position: absolute;
   top: 50%;
   color: #fff;
   z-index: 20;
   border: none;
   height: 60px;
   width: 60px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #191466;
   transform: translateY(-50%);
   transition: 0.4s ease;
 }

 .slider-navigations button:hover {
   background: #569ff7;
 }

 .slider-navigations button.swiper-button-disabled {
   display: none;
 }

 .slider-navigations button#slide-prev {
   left: 50px;
 }

 .slider-navigations button#slide-next {
   right: 50px;
 }

 @media (max-width: 1536px) {

   .slider-wrapper .slider-item .slide-content,
   .slider-controls .slider-pagination {
     width: 85%;
   }
 }

 @media (max-width: 1024px) {

   .slider-wrapper .slider-item .slide-content,
   .slider-controls .slider-pagination {
     width: 100%;
   }

   .slider-wrapper .slider-item .slide-content>* {
     max-width: 66%;
   }

   .slider-container .slider-controls {
     bottom: 50px;
   }

   @keyframes animate_button {
     100% {
       width: 100%;
       opacity: 1;
     }
   }

   .slider-navigations button {
     top: unset;
     bottom: -15px;
     background: none;
   }

   .slider-navigations button:hover {
     background: none;
   }
 }

 @media (max-width: 768px) {
   .slider-wrapper .slider-item .slide-content>* {
     max-width: 100%;
   }
 }