.marquee-wrapper {
    display: flex;
    width: fit-content;
    animation: scroll-left 25s linear infinite;
}
  
.marquee-content {
  display: flex;
}
  
.marquee-text {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 15px;
  white-space: nowrap;

  h3 {
    color: #060606;
    font-size: 32px;
    font-weight: 500;
  }
}
  
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
  
.choose-us-section {
  background-color: #1A1A1A;
  margin: 0 60px;
  border-radius: 20px;
  position: relative;
  z-index: 9;

  @include breakpoint (max-xxxl){
    margin: 0 30px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  @include breakpoint (max-xl){
    margin: 0 20px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

}

.choose-us-wrapper {
  margin-top: 60px;
  
  @include breakpoint (max-md){
    margin-top: 30px;
  }

  .choose-us-box-list {
      li {
          @include flex;
          justify-content: space-between;
          border-top: 1px solid rgba(255, 255, 255, 0.20);
          padding: 25px 0;

          @include breakpoint (max-xl){
            flex-wrap: wrap;
            gap: 20px;
          }

          .content {
            h2 {
                font-size: 50px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 15px;

                a {
                  color: #888;
                }

                 @include breakpoint (max-xl){
                  font-size: 35px;
                }

                 @include breakpoint (max-md){
                  font-size: 38px;
                }

                @include breakpoint (max-sm){
                  font-size: 35px;
                }

                 @include breakpoint (max-xxs){
                  font-size: 30px;
                }
            }

            p {
              max-width: 475px;
            }
          }

          .arrow-icon {
            display: inline-block;
            border-radius: 100px;
            border: 1.5px solid rgba(255, 255, 255, 0.20);
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border-radius: 50%;
            color: $theme-color;
          }

          &:hover {
            .content {
              h2 {
                a {
                  color: $white;
                }
              }
            }

            .arrow-icon {
               background-color: $theme-color;
               color: $black;
            }
          }
      }
  }

  .choose-us-image {
    margin-left: 20px;

    @include breakpoint (max-xl){
      margin-left: 0;
    }

    img {
      @include imgw;
    }
  }
}


.video-wrapper {
    text-align: center;
    position: relative;

    .video-thumb {
      position: relative;

      img {
        @include imgw;
      }
    }

    .video {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        .video-btn {
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
            border-radius: 140px;
            background-color: $white;
            color: #121212;
            display: inline-block;
            text-align: center;
            font-size: 18px;

            &:hover {
              background-color: $theme-color
            }
  
        }

        .circle-image {
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            top: 50%;
            display: none;

            img {
                animation: cir36 10s linear infinite;
            }
        }
    }

    .text-tansprot {
        text-align: center;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgba(191, 247, 71, 0.8);
        font-size: 160px;
        font-weight: 700;
        display: inline-block;
        line-height: 1;
        letter-spacing: -4.8px;
        text-transform: uppercase;
        color: transparent;
        margin-top: 150px;

       
    }
}

.award-wrapper {
    .award-content {
        margin-top: 60px;

        @include breakpoint (max-md){
          margin-top: 30px;
        }
      
        ul {
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          padding-top: 30px;

            li {
              @include flex;
              gap: 80px;
            }
        }

        .award-list-items {
          @include flex;
          gap: 85px;

          @include breakpoint (max-xl){
            gap: 40px;
          }
          
          &.bb-bottom {
            span {
              border-bottom: 1px solid rgba(255, 255, 255, 0.20);
            }
          }
          
          span {
            width: 100%;
            display: inline-block;
            border-top: 1px solid rgba(255, 255, 255, 0.20);
            padding: 30px 0
          }
        }
    }

    .award-image {
      img {
          @include breakpoint (max-xl){
            @include imgw;
          }
      }
    }
}

.award-section-2 {
  position: relative;

  .award-image {
    position: absolute;
    bottom: 0;
    left: 65%;
    transform: translateX(-50%);

    @include breakpoint (max-lg){
      display: none;
    }
  }

  .circle-box {
    display: inline-block;
    width: 182px;
    height: 182px;
    line-height: 182px;
    text-align: center;
    border-radius: 50%;
    background-color: #060606;
    position: absolute;
    right: 20%;
    top: 40%;

     @include breakpoint (max-lg){
      display: none;
    }

    .text-image {
      text-align: center;

      img {
            animation: cir36 10s linear infinite;
      }
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: inline-block;
      width: 56px;
      height: 56px;
      line-height: 56px;
      border-radius: 50%;
      background-color: $theme-color;
      color: $black;
    }
  }
}

.build-impactful-section {
  .build-text {
    span {
      color: $theme-color;
    }
  }
}

.build-content {
  margin-top: 40px;
  max-width: 1370px;

    h2 {
        color: $text-color;
        font-size: 50px;
        text-align: center;

        @include breakpoint (max-xxxl){
          font-size: 40px;
          line-height: 140%;
        }

         @include breakpoint (max-xl){
          font-size: 36px;
        }

        @include breakpoint (max-lg){
          font-size: 32px;
        }

        @include breakpoint (max-md){
          font-size: 26px;
        }

        @include breakpoint (max-sm){
          font-size: 24px;
        }

         @include breakpoint (max-xxs){
          font-size: 22px;
        }

        span {
          color: $white;
        }
    }

    .build-bottom-items {
      @include flex;
      gap: 80px;
      justify-content: center;
      margin-top: 80px;

      @include breakpoint (max-xl){
        margin-top: 50px;
        flex-wrap: wrap;
        gap: 30px;
      }

      @include breakpoint (max-lg){
        margin-top: 40px;
      }

       @include breakpoint (max-md){
        margin-top: 30px;
      }

      @include breakpoint (max-sm){
        margin-top: 25px;
      }

        .client-info {
          @include flex;
          gap: 20px;

        }

        .award-info {
          @include flex;
          gap: 20px;

          p {
            span {
              color: $white;
            }
          }
        }
    }
}

.choose-us-box-items-2 {
    @include flex;
    justify-content: space-between;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    background-color: #1A1A1A;

    @include breakpoint (max-xl){
     display: block;
    }

    .choose-content {
      @include flex;
      gap: 150px;

      @include breakpoint (max-xxl){
        gap: 30px;
      }

       @include breakpoint (max-xl){
         margin-bottom: 30px;
         flex-wrap: wrap;

         br {
          display: none;
         }
      }

        .content {
            h2 {
              font-size: 50px;
              @include transition;
              margin-bottom: 10px;

              a {
                 color: $text-color;
              }

              @include breakpoint(max-xxl){
                font-size: 44px;
              }

              @include breakpoint(max-xl){
                font-size: 40px;
              }

              @include breakpoint(max-lg){
                font-size: 36px;
              }

              @include breakpoint(max-md){
                font-size: 42px;
              }

              @include breakpoint(max-sm){
                font-size: 34px;
              }

               @include breakpoint(max-xxs){
                font-size: 28px;
              }

                &:hover {
                  color: $white;
                }
            }
        }

        .arrow-icon {
            display: inline-block;
            border-radius: 100px;
            border: 1.5px solid rgba(255, 255, 255, 0.20);
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border-radius: 50%;
            color: $theme-color;

            &:hover {
              background-color: $theme-color;
              color: $black;
            }
        }
    }

    .choose-image {
        img {
            @include imgw;
            border-radius: 6px;
        }
    }
}

.choose-us-section-2 {
    border-radius: 20px;
    margin: 30px;
    margin-top: 0;
    margin-bottom: 0;
}

.skill-section-2 {
    .section-title-area {
      h2 {
        span {
          color: $theme-color;
        }
      }
    }

    p {
      text-align: center;
      margin-top: 60px;

      a {
        color: $theme-color;
        text-decoration-line: underline;
      }
    }
}

.skill-box-items-2 {
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: #060606;
  padding: 40px;
  margin-top: 30px;
  position: relative;
  z-index: 9;

  &::before {
     position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 1px solid $theme-color;
      border-left: 1px solid $theme-color;
      transition: 0.5s;
      opacity: 0;
      visibility: hidden;
      border-radius: 10px;
      z-index: -1;
  }

  &::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 1px solid $theme-color;
    border-right: 1px solid $theme-color;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
    z-index: -1;
  }

  &:hover {
    &::before {
      width: 100%;
      height: 100%;
      visibility: visible;
      opacity: 1;
    }

    &::after {
        width: 100%;
        height: 100%;
        visibility: visible;
        opacity: 1;
    }
  }

    p {
      font-size: 20px;
      font-weight: 500;
      margin-top: 20px;
    }

    h2 {
      font-size: 50px;
      font-weight: 500;
      margin-top: 40px;
      color: #888;
    }

    .progress {
        position: relative;
        height: 4px;
        background: rgba(136, 136, 136, 0.30);
        border-radius: 0;
        overflow: visible;
        border-radius: 22px;
        margin-top: 20px;
    }

    .progress-bar {
        background-color: #888888;
        height: 4px;
        border-radius: 22px;
        margin: 0;
        border-radius: inherit;
        overflow: visible;
        position: relative;
        margin-top: 0;
        @include transition;
    }

     &:hover {
      p {
        color: $white;
      }
          .progress-bar {
            background-color: $theme-color;
          }
        }
}

.brand-section-2 {
  padding: 10px 0;
}

.work-process-section-2 {
  .section-title-area {
    h2 {
      font-size: 50px;

       @include breakpoint(max-xxl){
          font-size: 44px;
        }

        @include breakpoint(max-xl){
          font-size: 40px;
          br {
            display: none
          }
        }

        @include breakpoint(max-lg){
          font-size: 36px;
        }

        @include breakpoint(max-md){
          font-size: 42px;
        }

        @include breakpoint(max-sm){
          font-size: 34px;
        }

      span {
        color: $theme-color;
      }
    }
  }
}

.about-section-3 {
  @include breakpoint (max-xxl){
    overflow: hidden;
  }
}

.service-list-items-3 {
    margin-bottom: 50px;

    @include breakpoint (max-md){
      margin-bottom: 30px;
      margin-top: 30px;
    }

    li {
        border-radius: 10px;
        background: #1A1A1A;
        padding: 20px 30px;
        @include flex;
        justify-content: space-between;
        position: relative;
        z-index: 9;

        @include breakpoint (max-md){
          flex-wrap: wrap;
          gap: 20px;
        }

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          border-radius: 30px 0 0 30px;
          background: #BFF747;
          width: 7px;
          height: 100%;
          @include transition;
          z-index: -1;
        }

        &:not(:last-child){
          margin-bottom: 20px;
        }

        .icon-items {
          @include flex;
          gap: 20px;
          flex-basis: 45%;
          
          @include breakpoint (max-md){
           flex-basis: initial;
          }

          h3 {
              color: $white;
              font-size: 24px;
              font-weight: 700;
              text-transform: uppercase;
          }

          .icon {
            filter: invert(56%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(94%) contrast(89%);
            @include transition;
          }
        }

        .service-image {

          img {
              border-radius: 100px;

              @include breakpoint (max-xl){
                  width: 100%;
              }
          }
        }

        .arrow-icon {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
          border: 1.5px solid rgba(255, 255, 255, 0.20);
          color: $theme-color;
        }

        &:hover {
          .arrow-icon {
          background: #060606;
          }
            &::before {
              width: 100%;
              border-radius: 10px;
            }

            .icon-items {
              .icon {
                filter: initial;
              }
            }

            h3 {
              color: #060606;
            }
        }
    }
}

.work-experience-section-3 {
    padding: 50px 30px 12px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
     border-radius: 10px;

     @include breakpoint (max-sm){
      background-image: none !important;
      background-color: #1A1A1A;
     }

    .sub-title {
      color: $theme-color;
      font-family: $body-font;
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      @include flex;
      gap: 10px;
      position: absolute;
      top: 0;
      left: 78px;

      @include breakpoint (max-sm){
       position: static;
     }
    }

    h2 {
      margin-top: 10px;
    }

    .work-experience-list-items {

      @include breakpoint (max-md){
        margin-top: 30px;
      }

      li {
          @include flex;
          justify-content: space-between;
          padding: 30px 0;

          @include breakpoint (max-xl){
             flex-wrap: wrap;
             gap: 30px;
             justify-content: start;
          }

          .title {
            color: #888;
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
            flex-basis: 28%;

             @include breakpoint (max-xl){
                flex-basis: initial;
              }
          }

          .text-1 {
            flex-basis: 23%;

            @include breakpoint (max-xl){
                flex-basis: initial;
              }
          }

          .text-2 {
            font-size: 14px;
            font-weight: 500;
            flex-basis: 22%;

            @include breakpoint (max-xl){
                flex-basis: initial;
              }
          }

          &:not(:last-child){
            border-bottom: 1px solid rgba(255, 255, 255, 0.20);
          }

          &:hover {
            .title,.text-1,.text-2 {
              color: $theme-color;
            }
          }
      }
    }
}

.video-banner-section {
  position: relative;
  text-align: center;
  margin-top: 60px;
  z-index: 9;
  margin-bottom: 60px;

  .video-image1 {
    position: relative;
    overflow: hidden;
     border-radius: 10px;
     z-index: 9;

    img {
      @include imgw;
       border-radius: 10px;
    }

    .ripple {
      &::before,&::after {
        width: 54px;
        height: 54px;
      }
    }
  }

  .video-btn {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    border-radius: 50%;
    background-color: $white;
    color: #121212;
     top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    position: absolute;

    &:hover {
      background-color: $theme-color;
    }
  }

  .reels-title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.25);
    font-size: 200px;
    font-weight: 900;
    letter-spacing: 40px;
    text-transform: uppercase;
    color: transparent;
    margin-left: 25px;

    @include breakpoint (max-xl){
      display: none;
    }
  }
}

.work-achievements-section {
  position: relative;
  padding: 70px 30px 40px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;

  @include breakpoint (max-sm){
      background-image: none !important;
      background-color: #1A1A1A;
     }

    .sub-title {
      
        font-family: "Kanit", sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        top: 0;
        left: 80px;
        color: #888;

        @include breakpoint (max-sm){
          position: static;
          margin-bottom: 10px;
        }

        b {
          color: $theme-color;
        }
    }

    .section-title-2 {
      @include flex;
      gap: 20px;
    }

    ul {

      @include breakpoint (max-md){
        margin-top: 30px;
      }

        li {
            display: flex;
            gap: 85px;

             @include breakpoint (max-md){
               gap: 50px;
              }

            &:not(:last-child){
             .text {
                padding-bottom: 25px;
                margin-bottom: 25px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.20);
             }
            }

            .year {
              color: #888;
              font-size: 16px;
              font-weight: 400;
              @include transition;
            }

            .text {
              color: #888;
              font-size: 16px;
              font-weight: 400;
              text-transform: uppercase;
              width: 100%;
              @include transition;
            }

            &:hover {
              .year,.text {
                color: $theme-color;
              }

               &:not(:last-child){
                .text {
                    border-bottom: 1px solid rgba(255, 255, 255, 1);
                }
            }
            }
        }
    }
}

.build-impactful-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  padding-bottom: 120px;

  @include breakpoint (max-xl){
    padding-bottom: 100px;
  }

  @include breakpoint (max-lg){
    padding-bottom: 80px;
  }
}

.faq-items {
  padding-right: 80px;

   @include breakpoint (max-xxl){
   padding-right: 0;
  }

   .accordion-box {
        position: relative;
        margin-top: 40px;

        .block {
            position: relative;
            background-color: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, 0.20);
            line-height: 1;
            padding-bottom: 38px;
            margin-bottom: 38px;

            .acc-btn {
                position: relative;
                font-size: 26px;
                color: #888;
                font-weight: 500;
                cursor: pointer;
                -webkit-transition: all 500ms ease;
                transition: all 500ms ease;
                text-transform: uppercase;
                font-family: $heading-font;

                @include breakpoint (max-sm){
                  font-size: 22px;
                  line-height: 1.6;
                  padding-right: 70px;
                }


                .icon {
                    position: absolute;
                    right: 0;
                    top: -7px;
                    height: 45px;
                    width: 45px;
                    font-size: 18px;
                    line-height: 45px;
                    text-align: center;
                    border-radius: 50%;
                    color: $header-color;
                    -webkit-transition: all 500ms ease;
                    transition: all 500ms ease;
                    border: 1px solid rgba(255, 255, 255, 0.20);
                }
            }

            .acc-content {
                position: relative;
                display: none;
                margin-top: 22px;

                @include breakpoint (max-xxs){
                    margin-top: 10px;
                }

                .content {
                    position: relative;
                    max-width: 570px;

                    .text {
                        line-height: 150%;
                        font-size: 16px;
                        font-weight: 400;
                        color: #888;

                        @include breakpoint (max-xl){
                            font-size: 14px;
                        }

                        @include breakpoint (max-xxs){
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }

    .accordion-box .block .acc-content.current {
        display: block;
    }

    .accordion-box .block .acc-btn.active .icon:before {
        content: "\f068";
        color: $theme-color;
    }

    .accordion-box .block .acc-btn.active {
        color: $theme-color;
    }

    .accordion-box .block:last-child {
        margin-bottom: 0;
    }
}

.faq-content-items {

  form {
    border-radius: 10px;
    background: #060606;
    padding: 38px 24px;
    margin-top: 40px;

    .form-clt {
        input,textarea {
            outline: none;
            width: 100%;
            border-radius: 12px;
            border: 1px solid rgba(193, 193, 193, 0.16);
            background: transparent;
            text-transform: uppercase;
            padding: 18px 25px;
            line-height: 1;
            color: $text-color;
        }

        textarea {
            padding-bottom: 100px;
        }

        .budget-item {
            @include flex;
            gap: 30px;

             @include breakpoint (max-xxl){
                flex-wrap: wrap;
                gap: 15px;
            }
            
            h4 {
                color: $white;
                font-size: 16px;
                font-weight: 500;
                font-family: $body-font;
                letter-spacing: 0.5px;
                text-transform: uppercase;
            }

            .budget-button {
                @include flex;
                gap: 8px;

                 @include breakpoint (max-xxl){
                    flex-wrap: wrap;
                }

                .budget-btn {
                    display: inline-block;
                    border-radius: 100px;
                    border: 1px solid rgba(255, 255, 255, 0.20);
                    color: #888;
                    font-family: $body-font;
                    font-size: 14px;
                    font-weight: 500;
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                    padding: 8px 16px;
                    line-height: 1;
                    @include transition;

                    &:hover {
                        background-color: $theme-color;
                        color: $black;
                    }

                    &.active {
                        background-color: $theme-color;
                        color: $black;
                    }
                }
            }
        }
    }
  }
}

.work-experience-wrap1 {
  .work-experience-feature-box {
    border-radius: 868px;
    background: #1A1A1A;
    max-width: 870px;
    margin: 0 auto;
    padding: 60px 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    .info-img {
      text-align: center;
    }

    .info-content {
      text-align: center;
      margin-top: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.20);
      padding-bottom: 30px;
      margin-bottom: 30px;

      h3 {
          color: $white;
          font-size: 36px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
      }

      span {
        color: $theme-color;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
      }
    }
  }
}

.work-process-section-2 {
  .section-title-area {
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    padding-bottom: 60px;
  }

}

.tp-funfact-panel-wrap {
    width: 300%;
    height: 100%;
    display: flex;

    @include breakpoint (max-xxl){
      gap: 30px;
    }

     @include breakpoint (max-xl){
      flex-wrap: wrap;
      width: 100%;
      gap: 0;
    }

}

.work-process-box-items-2 {
  margin-top: 30px;
  @include flex;
  gap: 30px;

   @include breakpoint (max-lg){
      flex-wrap: wrap;
    }

  .work-process-content {
    display: flex;
    gap: 15px;

    .number {
      color: $white;
      font-size: 100px;
      font-weight: 700;
      text-transform: uppercase;
      font-family: $heading-font;
      line-height: 1;

      @include breakpoint (max-xxl){
        font-size: 70px;
      }

       @include breakpoint (max-xl){
        font-size: 60px;
      }

       @include breakpoint (max-md){
        font-size: 45px;
      }

      @include breakpoint (max-sm){
        font-size: 35px;
      }
    }

    h3 {
      font-size: 100px;
      font-weight: 700;
      color: $text-color;
      line-height: 110%;

      @include breakpoint (max-xxl){
        font-size: 70px;
      }

      @include breakpoint (max-xl){
        font-size: 60px;

        br {
          display: none;
        }
      }

       @include breakpoint (max-md){
        font-size: 45px;
      }

       @include breakpoint (max-sm){
        font-size: 35px;
      }
    }

    p {
      max-width: 450px;
      margin-top: 20px;
      margin-left: 35px;

      @include breakpoint (max-xl){
       margin-left: 0;
      }
    }
  }

  .work-process-image {
    img {
      border-radius: 10px;
      @include breakpoint (max-sm){
       width: 100%;
      }
    }
  }
}

.tp-funfact-panel {
    width: 100%;
    height: 100%;
    will-change: transform;
    opacity: 1 !important;
}

.work-process-box-area2 {
  padding-top: 50px;

   @include breakpoint (max-xl){
     padding-top: 0;
    }
}

.project-wrapper {
  padding-bottom: 150px;

}

.work-experience-section-1 {
  position: relative;

  .line-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @include breakpoint (max-xl){
      display: none;
    }
  }

  &.style-2 {
    .line-shape {
      bottom: 120px;
    }

    .arrow1 {
      position: absolute;
      top: 0;
      left: 90px;

      @include breakpoint (max-xl){
        display: none;
      }
    }

     .arrow2 {
      position: absolute;
      top: 0;
      right: 90px;

      @include breakpoint (max-xl){
        display: none;
      }
    }
  }
}


.feature-work-experience-wrap {
  height: 585px;
  position: relative;

  &::before {
    position: absolute;
    bottom: -80%;
    left: 49%;
    transform: translateX(-50%);
    height: 990px;
    width: 910px;
    border-radius: 50%;
    content: "";
    background: #1A1A1A;

    @include breakpoint (max-lg){
      display: none;
    }
  }
}

.feature-work-experience-preview-slider {
  .swiper-wrapper {
    max-width: 1050px;
    height: 1050px;
    position: relative;
    margin: 0 auto;

    .swiper-slide {
      position: absolute;
      width: 100px;
      height: 100px;

      // &.swiper-slide-thumb-active {
      //   .feature-work-experience-preview-slider-item {
      //     border-color: var(--clr-pr-1);
      //     box-shadow: -1.526px 7.853px 59px 0 rgba(214, 243, 69, 0.6);
      //   }
      // }
    }
  }

  .feature-work-experience-preview-slider-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all 0.5s var(--cube-1);
    cursor: pointer;
    overflow: hidden;

    &:hover {
      border-color: var(--clr-pr-1);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
  }
}

.feature-work-experience-main-slider {
    position: absolute;
    top: 150px;
    left: 49%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: 670px;
    width: 100%;
   

    .client-info-items {
      text-align: center;

      .info-content {
        margin-top: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.20);
         padding-bottom: 30px;
        margin-bottom: 30px;

        h3 {
          color: $white;
          font-size: 36px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          line-height: 1;
        }

        span {
          color: #BFF747;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          text-transform: uppercase;
        }
      }
    }

    .info-item {
      display: flex;
      gap: 45px;

      h5 {
          color: $white;
          font-size: 20px;
          font-weight: 500;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          max-width: 100px;
          width: 100%;
      }

      p {
        max-width: 460px;
      }
    }

  @media (max-width: 767px) {
    max-width: 100%;
  }

  .feature-work-experience-main-slider-single {
    
    .icon {
      font-size: 70px;
      color: var(--clr-pr-1);
    }

    .fw-comment {
      color: #fff;
      font-weight: 500;
      line-height: 36px;
      margin-top: 10px;
    }

    .line {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(255, 255, 255) 15%,
        rgb(255, 255, 255) 85%,
        rgba(255, 255, 255, 0) 100%
      );
      width: 90%;
      height: 1px;
      opacity: 0.2;
      margin: 28px auto 0;
    }

    .fw-rating {
      margin-top: 28px;

      .rating-icon {
        display: flex;
        justify-content: center;
        gap: 7px;
        font-size: 18px;
      }
    }

    .fw-author-name {
      font-size: 15px;
      margin-top: 10px;
    }
  }

  /* Animation */
  .swiper-slide {
    .line {
      transform: scaleX(0);
      transition: 1s;
    }

    .rating-icon i {
      opacity: 0;
      transition: 0.5s;
    }

    &.swiper-slide-active {
      .icon,
      .fw-comment,
      .fw-author-name {
        animation: fadeInUp 0.5s var(--cube-1) backwards;
      }

      .icon {
        animation-delay: 0.5s;
      }

      .fw-comment {
        animation-delay: 0.7s;
      }

      .line {
        transform: scaleX(1);
        transition-delay: 0.7s;
      }

      .fw-author-name {
        animation-delay: 0.9s;
      }

      .rating-icon {
        i {
          opacity: 1;

          &:nth-child(1) {
            transition-delay: 0.4s;
          }
          &:nth-child(2) {
            transition-delay: 0.5s;
          }
          &:nth-child(3) {
            transition-delay: 0.6s;
          }
          &:nth-child(4) {
            transition-delay: 0.7s;
          }
          &:nth-child(5) {
            transition-delay: 0.8s;
          }
        }
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}






.approach-wrapper {
  .approach-top-items {
      @include flex;
      justify-content: space-between;
      margin-bottom: 60px;

      @include breakpoint (max-xl){
        flex-wrap: wrap;
        gap: 20px;
      }

      h2 {
          color: $white;
          font-size: 50px;
          font-weight: 700;
          text-transform: uppercase;
          line-height: 120%;
          max-width: 490px;

           @include breakpoint (max-lg){
            font-size: 39px;
        }

         @include breakpoint (max-sm){
            font-size: 34px;
        }

         @include breakpoint (max-xxs){
            font-size: 30px;
        }

      }

      ul {
        li {
            color: #888;
            font-size: 16px;
            font-weight: 400;
            text-transform: uppercase;
        }
      }
  }

  .approach-wrap-items {
    @include flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    padding: 60px 0;
    background: #060606;
    position: relative;
    z-index: 99;

    @include breakpoint (max-xl){
      flex-wrap: wrap;
      gap: 30px;
    }

    h3 {
      font-size: 50px;
      font-weight: 700;

       @include breakpoint (max-xl){
       font-size: 38px;
      }
    }

    p {
        max-width: 530px;
        margin-left: 70px;

         @include breakpoint (max-xl){
         margin-left: 0;
        }
    }

    .approach-thumb {
      max-width: 450px;

      img {
        @include imgw;
        border-radius: 10px;
      }
    }
  }
}

.favorite-tools-wrapper {
  border-radius: 20px;
  background: #1A1A1A;
  padding: 50px 60px;
  @include flex;
  justify-content: space-between;
  position: relative;
  z-index: 9;

  @include breakpoint (max-xxl){
    flex-wrap: wrap;
    gap: 30px;
  }

   @include breakpoint (max-lg){
      padding: 40px 30px;
      justify-content: start;
    }

  .vec-shape {
    position: absolute;
    bottom: 30px;
    left: 200px;
    z-index: -1;

     @include breakpoint (max-xxl){
      display: none;
    }
  }

    h3 {
        font-size: 30px;
        font-weight: 700;

        span {
          color: #888;
        }
    }

    .favorite-tools-items {
        @include flex;
        justify-content: space-between;
        max-width: 990px;
        width: 100%;

         @include breakpoint (max-xl){
          flex-wrap: wrap;
          gap: 30px;
        }

        .skill-counter {
          @include flex;
          gap: 15px;
          
          .content {
            h2 {
              color: $theme-color;
              font-size: 32px;
              font-weight: 700;
              letter-spacing: 0.5px;
            }
            p {
              color: #888;
              font-size: 16px;
              font-weight: 400;
              letter-spacing: 0.5px;
              text-transform: uppercase;
            }
          }
        }

        .line-shape {
          background: rgba(255, 255, 255, 0.20);
          width: 1px;
          height: 51px;

           @include breakpoint (max-xl){
           display: none;
          }
        }
    }
}

.faq-inner-page-wrapper {
  .faq-image {
    max-width: 600px;
    margin: 30px auto 0;
     border-radius: 10px;

    img {
      width: 100%;
      border-radius: 10px;
    }
  }

  .accordion-box {
        position: relative;
        max-width: 650px;
        margin: 50px auto 0;

        .block {
            position: relative;
            background-color: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, 0.20);
            line-height: 1;
            padding-bottom: 38px;
            margin-bottom: 38px;

            .acc-btn {
                position: relative;
                font-size: 30px;
                color: #888;
                font-weight: 500;
                cursor: pointer;
                -webkit-transition: all 500ms ease;
                transition: all 500ms ease;
                text-transform: uppercase;
                font-family: $heading-font;

                @include breakpoint (max-sm){
                  font-size: 22px;
                  line-height: 1.6;
                  padding-right: 70px;
                }


                .icon {
                    position: absolute;
                    right: 0;
                    top: -7px;
                    height: 45px;
                    width: 45px;
                    font-size: 18px;
                    line-height: 45px;
                    text-align: center;
                    border-radius: 50%;
                    color: $header-color;
                    -webkit-transition: all 500ms ease;
                    transition: all 500ms ease;
                    border: 1px solid rgba(255, 255, 255, 0.20);
                }
            }

            .acc-content {
                position: relative;
                display: none;
                margin-top: 22px;

                @include breakpoint (max-xxs){
                    margin-top: 10px;
                }

                .content {
                    position: relative;
                    max-width: 570px;

                    .text {
                        line-height: 150%;
                        font-size: 16px;
                        font-weight: 400;
                        color: #888;

                        @include breakpoint (max-xl){
                            font-size: 14px;
                        }

                        @include breakpoint (max-xxs){
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }

    .accordion-box .block .acc-content.current {
        display: block;
    }

    .accordion-box .block .acc-btn.active .icon:before {
        content: "\f068";
        color: $theme-color;
    }

    .accordion-box .block .acc-btn.active {
        color: $theme-color;
    }

    .accordion-box .block:last-child {
        margin-bottom: 0;
    }
}

.experiences-wrapper4 {
    .experiences-box-item {
        margin-top: 30px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.20);
        padding: 30px;

        h3 {
            font-size: 24px;
            font-weight: 600;
            color: $header-color;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.20);
        }

        .counter-box {
            margin-top: 25px;
            @include flex;
            justify-content: space-between;

            h2 {
                font-size: 60px;
                color: $header-color;
                font-weight: 400;
            }
        }
    }

    .skill-list {
        margin-top: 30px;
        margin-left: 30px;

        li {
            padding: 35px 0;
            font-size: 16px;
            font-weight: 500;
            color: $header-color;
            @include flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.20);

            &:first-child {
                border-top: 1px solid rgba(255, 255, 255, 0.20);
            }

            .content {
                h2 {
                    font-size: 36px;
                    color: $header-color;
                    font-weight: 600;
                    margin-bottom: 5px;
                }

                span {
                    font-size: 16px;
                    font-weight: 500;
                    color: $header-color;
                }
            }
        }
    }
}

.award-wrapper-5 {
    margin-bottom: 40px;

    @include breakpoint (max-xxl){
        margin-bottom: 0;
    }

    .award-items {
        margin-top: 30px;

        ul {
            li {
                border-bottom: 1px solid rgba(255, 255, 255, 0.20);
                padding: 30px 0;
                @include flex;
                justify-content: space-between;

                @include breakpoint (max-lg){
                    flex-wrap: wrap;
                    gap: 20px;
                }

                &:first-child {
                    border-top: 1px solid rgba(255, 255, 255, 0.20);
                }

                .title-left {
                    @include flex;
                    gap: 20px;
                    flex-basis: 45%;

                    @include breakpoint (max-xl){
                      flex-basis: initial;
                    }

                    .circle-box {
                        border-radius: 70px;
                        border: 0.5px solid rgba(255, 255, 255, 0.20);
                        border-radius: 70px;
                        width: 47px;
                        height: 47px;
                        line-height: 47px;
                        text-align: center;
                        display: inline-block;
                        font-size: 24px;
                        font-weight: 400;
                        font-family: $heading-font;
                        color: $header-color;
                    }

                    h3 {
                        font-size: 28px;
                        font-weight: 500;
                        color: $header-color;
                    }
                }

                h2 {
                    font-size: 20px;
                    font-weight: 400;
                    color: $header-color;
                    text-align: right;
                    font-family: $body-font;
                    text-align: right;
                }
            }
        }
    }

    .award-image {
        margin-top: 30px;
        margin-right: 40px;
        position: relative;

        @include breakpoint (max-xl){
           margin-right: 0;
        }
        
        img {
            @include imgw;
        }

        .award-image-2 {
            position: absolute;
            bottom: -40px;
            right: -40px;
            transform: rotate(21.668deg);

            @include breakpoint (max-xl){
              bottom: 0;
              right: 0;
              transform: rotate(0);
            }
        }
    }
}


.ani-contact-box-area {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;

    .ani-area-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
  }

  .ani-bg {
        position: absolute;
        height: 390px;
        width: 390px;
        background-color: $theme-color;
        border-radius: 100%;
        z-index: -1;
    }

    .section-title {
        font-family: $heading-font;
        font-weight: 700;
        line-height: 20px;
        text-transform: uppercase;
        display: inline-block;
        font-size: 3vw;

       a {
          color: $black;
       }
    }
}


.view-reels-section  {
 
    h4 {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
      color: $white;
      margin-top: 18px;

      span {
        color: $theme-color;
      }
    }

    .shape {
      text-align: center;
      margin-left: 100px;

      @include breakpoint (max-xxl) {
         margin-left: 0;
      }
    }

    .reels-slider {
      margin-top: 60px;
     
      @include breakpoint (max-xxl) {
        margin-top: 30px;
      }
    }
}

.reels-video {
    video {
      width: 100%;
      height: 471px;
      border-radius: 20px;
      object-fit: cover;

      @include breakpoint (max-sm) {
          height: 400px;
      }
   }
}

.gallery-top {
    margin-bottom: 80px;

    @include breakpoint (max-xxl) {
       margin-bottom: 30px;
    }

    h6 {
      color: $theme-color;
      text-transform: uppercase;
      font-family: $body-font;
      font-weight: 500;
      text-align: center;
      margin-bottom: 10px;

    }

   
    .item {
      @include flex;

        @include breakpoint (max-lg) {
           flex-wrap: wrap;
           gap: 10px;
           margin-top: 20px;
        }

        .hover-img {
          overflow: hidden;
          position: relative;

          @include breakpoint (max-md) {
            display: none;
        }

        a {
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            top: 0;
            left: 0;
            overflow: hidden;
            position: absolute;
            @include transition;
            border-radius: 50%;
            @include breakpoint(max-md){
              width: 100%;
            }
          }
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 120px;
          }
        }

        &:hover {
          a {
            &:nth-child(2) {
              transform: scale(0.9);
            }
            &:nth-child(3) {
              transform: scale(0.7);
            }
            &:nth-child(4) {
              transform: scale(0.5);
            }
          }
        }
      }

       h2 {
        color: $white;
        font-size: 290px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 95%;

         @include breakpoint (max-xxl) {
           font-size: 140px;
        }

         @include breakpoint (max-lg) {
           font-size: 90px;
        }

        @include breakpoint (max-lg) {
           font-size: 70px;
        }
      }

      span {
        font-family: $heading-font;
        font-size: 290px;
        font-weight: 700;
        text-transform: uppercase;
        color: $theme-color;
        line-height: 90%;

         @include breakpoint (max-xxl) {
           font-size: 140px;
        }

        @include breakpoint (max-lg) {
           font-size: 90px;
        }


        @include breakpoint (max-lg) {
           font-size: 70px;
        }
      }
    }
}


.gallery-wrapper {
   
  .gallery-item-4 {
    margin-bottom: 50px;
    position: relative;
    z-index: 999;

  .gallery-image {
    position: relative;
    overflow: hidden;

     a {
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            top: 0;
            left: 0;
            overflow: hidden;
            position: absolute;
            @include transition;
            border-radius: 50%;
            @include breakpoint(max-md){
              width: 100%;
            }
          }
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 10px;
          }
        }

         &:hover {
          a {
            &:nth-child(2) {
              transform: scale(0.9);
            }
            &:nth-child(3) {
              transform: scale(0.7);
            }
            &:nth-child(4) {
              transform: scale(0.5);
            }
          }
        }

    .arrow-icon {
        background-color: $theme-color;
        width: 86px;
        height: 86px;
        line-height: 86px;
        text-align: center;
        border-radius: 100px;
        color: $bg-color;
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        display: inline-block;
        font-size: 30px;
        top: 20%;
        left: 80%;
        opacity: 0;
        visibility: hidden;
        transform: translate(50%, -50%) scale(0.5);
    }
  }

  .gallery-content {
    margin-top: 30px;
    position: relative;
  z-index: 999;

     h3 {
      a {
        position: relative;
        display: inline-block;
        color: inherit;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        background-position: 0 100%; 
        transition: background-size 0.4s linear, color 0.4s linear;
        background-image: linear-gradient($theme-color, $theme-color);

        &:hover {
          background-size: 100% 1px; 
          color: $theme-color;
        }
      }
    }
   }

   &:hover {
     .gallery-image {
        .arrow-icon {
          opacity: 1;
        visibility: visible;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        }
     }
   }
}
}

.award-wrapper-4 {

    .brand-wrapper-new {
      margin-bottom: 60px;
      margin-top: 48px;
      @include flex;
      justify-content: space-between;

        @include breakpoint (max-xxl) {
          margin-bottom: 30px;
          margin-top: 30px;
          gap: 10px;
        }

         @include breakpoint (max-lg) {
          flex-wrap: wrap;
          gap: 20px;
        }


        .brand-item {
            border: 1px solid rgba(255, 255, 255, 0.20);
            position: relative;
            overflow: hidden;
            padding: 0px 35px;
            border-radius: 10px;
            height: 80px;
            text-align: center;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;

             @include breakpoint (max-lg) {
                padding: 0px 20px;
                height: 70px;
            }

          .brand-three-active-media {
              position: relative;
              z-index: 1;
              transition: all 0.5s ease-in-out;

            img {
                max-width: 100%;
                height: auto;
                display: block;
                filter: grayscale(100%) brightness(1.1) sepia(0.1) hue-rotate(0deg) saturate(0%) contrast(50%);
                mix-blend-mode: multiply;
            }
          }

        .brand-three-hover-media {
            position: absolute;
            top: 20px; 
            left: 20px;
            right: 20px;
            bottom: 20px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(30%);
            transition: all 0.6s ease-in-out;
            z-index: 2;

            img {
              @include breakpoint (max-xxl) {
                width: 100%;
              }

              @include breakpoint (max-lg) {
                width: initial;
              }
            }
        }

           &:hover {
              .brand-three-active-media {
                  opacity: 0;
                  visibility: hidden;
              }

            .brand-three-hover-media {
              opacity: 1;
              visibility: visible;
              transform: translateY(0);

              img {
                filter: none;
              }
            }
          }
        }
      }



    .award-content {

        h2 {
          margin-bottom: 60px;

            @include breakpoint (max-xxl){
             margin-bottom: 30px;
           }
        }
      
        ul {
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          padding-top: 30px;

            li {
              @include flex;
              gap: 80px;
            }
        }

        .award-list-items {
          @include flex;
          gap: 85px;

          @include breakpoint (max-xl){
            gap: 40px;
          }
          
          &.bb-bottom {
            span {
              border-bottom: 1px solid rgba(255, 255, 255, 0.20);
            }
          }
          
          span {
            width: 100%;
            display: inline-block;
            border-top: 1px solid rgba(255, 255, 255, 0.20);
            padding: 30px 0
          }
        }
    }

    .award-image {
      img {
          @include breakpoint (max-xl){
            @include imgw;
          }
      }
    }
}




.Portfolio-box-item {
  background-color: $white;
  @include flex;
  justify-content: space-between;
  overflow: hidden;


  .left-item {
    @include flex;
    gap: 60px;
   

    .left-image {
     height: 448px;
     width: 440px;
    
    img {
      @include imgw;
      object-fit: cover;
    }
  }

  .content {
    h6 {
      margin-bottom: 30px;
      color: black;
    }

    p {
      font-size: 22px;
      color: black;
      max-width: 600px
    }

    .count-item {
      @include flex;
      gap: 40px;

      h2 {
        color: black;
      }
    }
  }
  }
  
  .right-image {
   margin-right: -100px;
    overflow: hidden;
    img {
      @include imgw;
      position: relative;
      z-index: 0;
      display: block;
      width: 300px;
      height: 300px;
      border-radius: 50%;
    }
  }
}

.gt-portfolio-11 {
    &-slider {
        &-bg {
            height: 100vh;
            width: 100%;
            background-size: cover;
            background-position: center;
            &.slick-active{
                & .gt-portfolio-11-slider-link{
                    opacity: 1;
                }
                & .gt-portfolio-11-slider-subtitle{
                    opacity: 1;
                }
                & .gt-portfolio-11-slider-title{
                    opacity: 1;
                }
            }
        }

        &-content {
            padding-left: 180px;
            padding-bottom: 150px;

            @include breakpoint (max-xxl) {
                padding-left: 80px;
            }

            @include breakpoint (max-lg) {
                padding-left: 20px;
            }

           
        }

        &-link {
            margin-bottom: 30px;
            opacity: 0;
        }

        &-subtitle {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.6;
            margin-bottom: 50px;
            display: inline-block;
            text-transform: uppercase;
            color: $white;
            opacity: 0;
        }

        &-title {
            font-size: 100px;
            font-weight: 700;
            line-height: 0.85;
            letter-spacing: 2px;
            margin-bottom: 0;
            color: $white;
            opacity: 0;

             @include breakpoint (max-xxxl) {
                font-size: 90px;
            }

            @include breakpoint (max-lg) {
                font-size: 80px;
            }

            @include breakpoint (max-md) {
                font-size: 60px;

                & br {
                    display: none;
                }
            }

            @include breakpoint (max-sm) {
                font-size: 60px;

                & br {
                    display: none;
                }
            }
        }

        &-active {
            & button {
                left: 40px;
                bottom: 60px;
                width: 55px;
                height: 56px;
                line-height: 53px;
                text-align: center;
                border-radius: 50%;
                position: absolute;
                color: $white;
                border: 2px solid rgba(255, 255, 255, 0.20);
                transition: .3s;
                z-index: 99;

                @media only screen and (min-width: 992px) {
                    display: none !important;
                }

                @include breakpoint (max-sm) {
                    left: 15px;
                }

                &.slick-next {
                    margin-left: 70px;
                }

                & i {
                    font-weight: 500;
                }

                &:hover {
                    color: $black;
                    border-color: $white;
                    background-color: $white;
                }
            }
        }

        &-nav {
            &-item {
                cursor: pointer;
            }

            &-thumb {
                & img {
                    border-radius: 14px;
                    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.20);
                }
            }

            &-wrap {
                width: 1260px;
                position: absolute;
                bottom: 110px;
                right: -65px;
                z-index: 99;

                @include breakpoint (max-xxxl) {
                    right: -465px;
                }

               @include breakpoint (max-xxl) {
                    right: -80px;
                    width: 900px;
                }

                @include breakpoint (max-xl) {
                    right: -80px;
                    width: 600px;
                }

                & .slides-number {
                    position: absolute;
                    right: 12%;
                    bottom: -10%;
                    z-index: 99;

                    @include breakpoint (max-xxxl) {
                        right: 39%;
                    }

                   @include breakpoint (max-xl) {
                        right: 16%;
                    }

                    @include breakpoint (max-lg) {
                        right: 19%;
                    }

                    & span {
                        font-size: 50px;
                        font-weight: 500;
                        line-height: 1;
                        text-align: center;
                        text-transform: uppercase;
                        color: $white;
                        min-width: 50px;
                    }

                    & .slider-line {
                        height: 1px;
                        width: 850px;
                        margin-right: 45px;
                        background-color: rgba(255, 255, 255, 0.20);

                        @include breakpoint (max-xxxl) {
                            width: 500px;
                        }

                        @include breakpoint (max-xxl) {
                            width: 520px;
                        }

                        @include breakpoint (max-xl) {
                            width: 240px;
                        }

                        @include breakpoint (max-lg) {
                            width: 215px;
                        }
                    }
                }
            }

            &-active {
                & button {
                    left: 0;
                    width: 55px;
                    bottom: -45px;
                    height: 56px;
                    line-height: 53px;
                    text-align: center;
                    border-radius: 50%;
                    position: absolute;
                    color: $white;
                    border: 2px solid rgba(255, 255, 255, 0.20);
                    transition: .3s;

                    &.slick-next {
                        margin-left: 70px;
                    }

                    & i {
                        font-weight: 500;
                    }

                    &:hover {
                        color: $black;
                        border-color: $white;
                        background-color: $white;
                    }
                }

                & .slick-list {
                    padding: 50px 0;
                }
            }

            &-content-wrap {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
            }

            &-content {
                height: 100%;
                padding: 30px;
            }

            &-year {
                & span {
                    height: 30px;
                    font-size: 16px;
                    font-weight: 700;
                    border-radius: 4px;
                    padding: 0px 12px;
                    line-height: 30px;
                    display: inline-block;
                    backdrop-filter: blur(5px);
                    color: $white;
                    background: rgba(255, 255, 255, 0.20);
                }
            }

            &-subtittle {
                font-size: 13px;
                font-weight: 600;
                line-height: 10px;
                margin-bottom: 10px;
                display: inline-block;
                text-transform: uppercase;
                color: $white;
            }

            &-tittle {
                font-size: 40px;
                font-weight: 400;
                line-height: 1;
                color: $white;
                margin-bottom: 0;
                letter-spacing: 1px;
            }
        }
    }
}