.carousel {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .carousel .list .item {
      position: absolute;
      inset: 0 0 0 0;
    }

    .carousel .list .item img {
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }

    .carousel .list .item .content {
      position: absolute;
      top: 15%;
      width: 2560px;
      max-width: 80%;
      left: 50%;
      transform: translateX(-50%);
      padding-right: 40%;
      box-sizing: border-box;
      color: #fff;
      text-shadow: 0 5px 10px #0004;
    }

    html[lang="ar-SA"] .carousel .list .item .content {
      padding-right: 0;
      padding-left: 40%;
    }

    .carousel .list .item .content .title {
      font-weight: bold;
      font-size: 5em;
      line-height: 1.3em;
    }

    .carousel .list .item .content .baj-btns .baj-btn {
      font-size: 18px;
      font-weight: 400;
      min-width: 190px;
      min-height: 50px;
    }

    .thumbnail {
      position: absolute;
      bottom: 50px;
      left: 50%;
      width: max-content;
      z-index: 100;
      display: flex;
      gap: 20px;
    }

    html[lang="ar-SA"] .thumbnail {
      left: unset;
      right: 52%;
    }

    .thumbnail .item {
      width: 150px;
      height: 220px;
      flex-shrink: 0;
      position: relative;
    }

    .thumbnail .item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
    }

    .thumbnail .item .content {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      color: #d4d4d4;
    }

    .thumbnail .item .content .title {
      font-weight: bold;
    }

    .thumbnail .item .content .des {
      font-size: 10px;
      line-height: 12px;
    }

    .arrows {
      position: absolute;
      top: 80%;
      right: 52%;
      width: 300px;
      max-width: 30%;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    html[lang="ar-SA"] .arrows {
      right: unset;
      left: 50%;
    }

    .arrows button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #eee4;
      border: none;
      font-family: monospace;
      color: #fff;
      font-weight: bold;
      font-size: large;
      transition: .5s;
      z-index: 100;

    }

    .arrows button:hover {
      background-color: #eee;
      color:#555;
    }

    .carousel .list .item:nth-child(1) {
      z-index: 1;
    }

    .carousel .list .item:nth-child(1) .title,
    .carousel .list .item:nth-child(1) .des,
    .carousel .list .item:nth-child(1) .baj-btns {
      transform: translateY(50px);
      filter: blur(20px);
      opacity: 0;
      animation: showContent 0.5s 1s linear 1 forwards;
    }

    @keyframes showContent {
      to{
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }

    .carousel .list .item:nth-child(1) .title {
      animation-delay: 500ms;
    }

    .carousel .list .item:nth-child(1) .topic {
      animation-delay: 700ms;
    }

    .carousel .list .item:nth-child(1) .des {
      animation-delay: 900ms;
    }

    .carousel .list .item:nth-child(1) .baj-btns {
      animation-delay: 1100ms;
    }

    .carousel .list .item:nth-child(1) img {
      width: 150px;
      height: 220px;
      position: absolute;
      left: 50%;
      bottom: 50px;
      border-radius: 20px;
      animation: showImage 0.5s linear 1 forwards;
    }

    .carousel.prev .list .item:nth-child(1) img {
      width: 100%;
      height: 100vh;
      left: 0;
      bottom: 0;
      border-radius: 0;
    }

    @keyframes showImage {
      to {
        width: 100%;
        height: 100vh;
        left: 0;
        bottom: 0;
        border-radius: 0;
      }
    }

    .carousel.next .thumbnail .item:nth-last-child(1) {
      width: 0;
      overflow: hidden;
      animation: showThumbnail 0.5s linear 1 forwards;
    }

    @keyframes showThumbnail {
      to {
        width: 150px;
      }
    }

    .carousel.next .thumbnail {
      transform: translateX(150px);
      animation: transformThumbnail .5s linear 1 forwards;
    }

    html[lang="ar-SA"] .carousel.next .thumbnail {
      transform: translateX(-150px);
    }

    @keyframes transformThumbnail {
      to {
        transform: translateX(0);
      }
    }

    .carousel.prev .list .item:nth-child(1) img{
      position: absolute;
      top: 0;
      left: 0;
    }

    .carousel.prev .list .item:nth-child(2) {
      z-index: 2;
    }

    .carousel.prev .list .item:nth-child(2) img {
      position: absolute;
      bottom: 0;
      left: 0;
      animation: outImage 0.5s linear 1 forwards;
    }

    html[lang="ar-SA"] .carousel.prev .list .item:nth-child(2) img {
      left: unset;
      right: 0;
      animation: outImageAR 0.5s linear 1 forwards;
    }

    @keyframes outImage {
      to {
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
      }
    }

    @keyframes outImageAR {
      to {
        width: 150px;
        height: 220px;
        border-radius: 20px;
        right: 50%;
        bottom: 50px;
      }
    }

    .carousel.prev .thumbnail .item:nth-child(1) {
      width: 0;
      overflow: hidden;
      opacity: 0;
      animation: showThumbnail 0.5s linear 1 forwards;
    }

    .carousel.prev .list .item:nth-child(2) .title,
    .carousel.prev .list .item:nth-child(2) .des,
    .carousel.prev .list .item:nth-child(2) .baj-btns {
      animation: contentOut 0.1s linear 1 forwards;
    }

    @keyframes contentOut {
      to {
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
      }
    }

    .carousel.next .arrows button,
    .carousel.prev .arrows button {
      pointer-events: none;
    }

    .time {
      width: 100%;
      height: 5px;
      background-color: rgba(140, 104, 74, 0.5);
      position: absolute;
      z-index: 100;
      bottom: 0;
      left: 0;
    }

    .carousel.next .time,
    .carousel.prev .time {
      width: 100%;
      animation: timeRunning 2s linear 1 forwards;
    }

    @keyframes timeRunning {
      to {
        width: 0;
      }
    }

    @media screen and (max-width: 678px) {
      .carousel .list .item .content {
        padding-right: 0;
      }

      html[lang="ar-SA"] .carousel .list .item .content {
        padding-left: 0;
      }
    }