/* 
   Creator           : Coding's Time
   Youtube Channel   : https://www.youtube.com/channel/UC6dnKqrImGWqMb9ty1n0Ziw
   Github Profile    : https://github.com/codingstime
 */

 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');

/* reset */
:root{
   font-family: 'Nuniot Sans';
   font-size: 16px;
   font-weight: 400;
}

*{
   margin: 0;
   box-sizing: border-box;
}

/* carousel */
.carousel_inner {
   width: 100%;
   margin-top: 64px;
   overflow: hidden;
}

.carousel_inner::after{
   content: "";
   display: block;
   clear: both;
}

.carousel_item{
   position: relative;
   float: left;
   display: none;
   width: 100%;
   margin-right: -100%;
}

/* slide effect */
.carousel_item__active,
.carousel_item__pos_next{
   display: block;
}

.carousel_item__pos_next{
   left: 100%;
}

.carousel_item__next{
   transform: translateX(-100%);
   transition: transform .5s ease-in-out;
}

/* fade effect */
.carousel__fade .carousel_item__pos_next{
   left: 0;
   opacity: 0;
}

.carousel__fade .carousel_item__next{
   transform: none;
   opacity: 1;
   transition: opacity .5s ease-in-out;
}

.carousel__fade .carousel_item__active.carousel_item__next{
   opacity: 1;
}

/* carousel */

.carousel_img{
   display: block;
   width: 100%;
} 


.carousel_caption {
   position: absolute;
   top: -30px;
   left: 0px;
   display: flex;
   flex-direction: column;
   place-content: flex-start center;
   width: 50%;
   height: 100%;
   padding: 0rem 2.5rem;
   text-align: center;
   color: rgb(255, 255, 255);
   z-index: 1;
   align-items: flex-start;
   animation: carousel_caption 6s;
}

@keyframes carousel_caption{
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.carousel_title {
   font-family: 'Nunito Sans';
   font-weight: 900;
   font-size: 50px;
   text-align: initial;
   text-transform: uppercase;
}

.carousel_description{
   margin-top: .75rem;
   line-height: 150%;
   font-family: 'Nunito';
   text-align: left;
}

.carousel_btn{
   text-decoration: none;
   color: #f5f5f5;
   font-family: 'Nunito Sans';
   font-size: 25px;
   margin-top: 40px;
}

.carousel_btn:hover{
   color: #0E278D;
}

@media (max-width: 440px) {
   .carousel_caption {
      position: absolute;
      top: 1px;
      left: -23px;
      display: flex;
      flex-direction: column;
      place-content: flex-start center;
      width: 62%;
      height: 100%;
      padding: 0rem 2.5rem;
      text-align: center;
      color: rgb(255, 255, 255);
      z-index: 1;
      align-items: flex-start;
      animation: carousel_caption 6s;
  }

  .carousel_description {
   margin-top: 0.75rem;
   line-height: 121%;
   font-family: 'Nunito';
   text-align: left;
   font-size: 8px;
   }

   .carousel_title {
      font-family: 'Nunito Sans';
      font-weight: 900;
      font-size: 16px;
      text-align: initial;
      text-transform: uppercase;
  }

  .carousel_btn {
   text-decoration: none;
   color: #f5f5f5;
   font-family: 'Nunito Sans';
   font-size: 10px;
   margin-top: 15px;
   }


   .carousel_inner {
      width: 100%;
      margin-top: 22px;
      overflow: hidden;
  }
}