// @keyframes w {
//   0% {
//     transform: translateX(-3%) rotate(0deg);
//   }

//   50% {
//     transform: translateX(3%) rotate(0.01deg);
//   }

//   to {
//     transform: translateX(-3%) rotate(0deg);
//   }
// }

// @keyframes E {
//   0% {
//     opacity: 1;
//     transform: scale(1);
//   }

//   to {
//     opacity: 0;
//     transform: scale(1.2);
//   }
// }

// ========= start home-banner-sec ===========

.home-banner-sec {
  width: 100%;
  position: relative;
  padding-top: 120px;
  overflow: hidden;

  @media screen and (max-width: 767px) {
    padding-top: 90px;
  }

  &:after {
    content: "";
    background-image: url(../images/home/home-video-bottom-bg.png);
    background-repeat: repeat-x;
    width: 100%;
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 350px;
    z-index: 2;
    background-size: auto 100%;
    background-position: bottom;
    height: 57px;
    pointer-events: none;

    @media screen and (max-width: 991px) {
      bottom: -20px;
      height: 200px;
    }

    @media screen and (max-width: 767px) {
      bottom: -20px;
      height: 90px;
    }
  }

  //   &:after {
  //     content: "";
  // /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+65,000000+100&0+0,1+65,1+100 */
  // background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  // background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 65%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  // background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 65%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

  //     position: absolute;
  //     bottom: 0;
  //     left: 0;
  //     right: 0;
  //     height: 160px;
  //     bottom: 0;
  //   }

  @media screen and (max-width: 767px) {}

  .home-banner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;

    .home-productItems-wrap {
      padding: 50px 0 0;
      position: relative;

      &:before {
        content: "";
        background: #000;
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 35%, #000 100%);
        width: 100%;
        height: 250px;
        bottom: 0;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
      }

      .home-productItems-row {
        .productsItem-img {
          width: 100%;
          max-width: 445px;
          height: 480px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            -webkit-animation: moverY 1s infinite alternate;
            animation: moverY 1s infinite alternate;
          }
        }
      }
    }

    .home-videoPlayer-wrap {
      width: 100%;
      padding-top: 56.25%;
      position: relative;
      z-index: 2;

      .home-videoPlayer {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        object-fit: cover;
      }

      iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        //object-fit: cover;
      }

      .home-vimeo-videoPlayer {
        object-fit: cover;
      }
    }

    .home-bannerImg-wrap {
      width: 100%;
      padding-top: 56.4%;
      position: relative;
      z-index: 2;

      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        object-fit: cover;
      }
    }
  }
}

.topIcons-sec {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;

  .topIcons-holder {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;

    .topIcons-item {
      max-width: 150px;
      margin: 0 auto;
      text-align: center;

      .icon-holder {
        width: 70px;
        height: 70px;
        margin: 0 auto 10px;

        @media screen and (max-width: 767px) {
          width: 60px;
          height: 60px;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .icon-infoText {
        font-size: 16px;

        @media screen and (max-width: 767px) {
          font-size: 14px;
        }
      }
    }
  }
}

.home-intro-sec {
  width: 100%;
  //height: 1500px;
  //height: 200vh;
  //height: 1100px;
  height: 100vh;
  overflow: hidden;
  //margin-top: -25vh;

  @media screen and (min-width: 992px) and (max-height: 500px) {
    height: auto;
  }

  @media screen and (min-width: 360px) and (max-width: 991px) and (max-height: 400px) {
    height: auto;
  }

  @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
    height: auto;
  }

  @media screen and (min-width: 360px) and (max-width: 767px) and (min-height: 375px) {
    // height: 800px;
    height: 100vh;
  }

  .tyrePath-img-holder {
    width: 100%;
    height: auto;
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    height: calc(100 * var(--vh));
    min-height: 700px;
    mix-blend-mode: lighten;
    // mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;

    &:after {
      content: "";
      background: rgb(0, 0, 0);
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
      width: 100%;
      height: 190px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    img {
      width: 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      // -webkit-animation: clip-path-topTOBottomAni 3.2s linear infinite alternate;
      // animation: clip-path-topTOBottomAni 3.2s linear infinite alternate;
    }
  }

  .home-intro1-wrap {
    width: 100%;
    height: calc(100 * var(--vh));

    @media screen and (min-width: 992px) and (max-height: 500px) {
      height: auto;
      padding-bottom: 100px;
      padding-top: 100px;
    }

    @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
      height: auto;
      padding-bottom: 100px;
      padding-top: 100px;
    }

    @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
      height: auto;
      padding-bottom: 100px;
      padding-top: 100px;
    }

    .intro1Text-holder {
      //position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      z-index: 1;
      margin: 0 auto;
      background: #000;
      transform: translateY(calc(50vh - 50% + var(--nav-height) * 0.5));
      padding: 1px;
      border: 1px solid #000;
      position: relative;

      @media screen and (min-width: 992px) and (max-height: 500px) {
        transform: none;
      }

      @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
        transform: none;
      }

      @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
        transform: none;
      }

      .intro1-gradient {
        width: 100%;
        position: absolute;
        z-index: 2;
        background-color: #000;
        mix-blend-mode: darken;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        overflow: hidden;

        width: calc(100% + 2px);
        margin-top: -1px;
        top: 0;
        left: 0;
        padding-bottom: 0;
        min-height: calc(100 * var(--vh));
        height: 1000px;
        transform: translateY(-60px);
        // padding-bottom: 999vh;
        // --enhance-hero-intro-gradient-padding-top: 0;
        // padding-top: var(--enhance-hero-intro-gradient-padding-top);

        @media screen and (min-width: 992px) and (max-height: 500px) {
          height: auto;
          transform: translateY(-216px) !important;
          min-height: auto;
        }

        @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
          height: auto;
          transform: translateY(-216px) !important;
          min-height: auto;
        }

        @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
          height: auto;
          transform: translateY(-216px) !important;
          min-height: auto;
        }

        .overview-hero-hero-background {
          display: block;
          //width: 734px;
          width: 855px;
          height: 700px;

          position: relative;
          // left: 50%;
          // margin-left: -720px;54px
          margin: 0 auto;
          pointer-events: none;
          -webkit-user-select: none;
          user-select: none;
          max-width: none;
        }
      }

      .intro1Text-box {
        width: 820px;
        max-width: 100%;
        margin: 0 auto;

        @media screen and (min-width: 992px) and (max-height: 500px) {
          position: relative;
        }

        @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
          position: relative;
        }

        @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
          position: relative;
        }
      }

      .intro1Text {
        // background-image: linear-gradient(to bottom, #ef7f1a, #ff5b66, #f258ab, #ae73df, #1a8aef);
        // font-weight: 700;
        // -webkit-background-clip: text;
        // color: transparent;

        line-height: 1.4;
        background-clip: text;
        text-align: center;
        @include font-size($intro1Text-sizes);
        opacity: 0;
        font-weight: 700;

        background-size: 100% 100%;
        background-position: 50% 0;
        padding-left: 15px;
        padding-right: 15px;

        @media screen and (min-width: 992px) and (max-height: 500px) {
          opacity: 1;
        }

        @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
          opacity: 1;
        }

        @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
          opacity: 1;
        }
      }
    }
  }

  .home-intro2-wrap {
    position: relative;
    z-index: 1;

    @media screen and (min-width: 992px) and (min-height: 501px),
    (min-width: 768px) and (max-width: 991px) and (min-height: 401px),
    (min-width: 360px) and (max-width: 767px) and (min-height: 375px) {
      visibility: hidden;
      opacity: 0;
      margin-top: -100vh;
    }

    @media screen and (min-width: 992px) and (max-height: 500px) {
      visibility: visible;
      opacity: 1;
      margin-top: 0;
    }

    @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
      visibility: visible;
      opacity: 1;
      margin-top: 0;
    }

    @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
      visibility: visible;
      opacity: 1;
      margin-top: 0;
    }

    .intro2Text-holder {
      // position: sticky;
      // top: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: calc(100 * var(--vh));
      margin: 0 auto;
      padding-top: calc(var(--nav-height) * 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: transparent;
      opacity: 0;
      z-index: 2;

      @media screen and (min-width: 992px) and (max-height: 500px) {
        padding-top: 100px;
        padding-bottom: 100px;
        opacity: 1;
        height: auto;
      }

      @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
        padding-top: 100px;
        padding-bottom: 100px;
        opacity: 1;
        height: auto;
      }

      @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
        padding-top: 100px;
        padding-bottom: 100px;
        opacity: 1;
        height: auto;
      }

      .intro2Text-box {
        width: 850px;
        max-width: 100%;
        margin: 0 auto;

        .intro2Text {
          font-weight: 700;
          line-height: 1.4;
          color: $color__black;
          text-align: center;
          @include font-size($intro2Text-sizes);
          padding-left: 15px;
          padding-right: 15px;
        }

        .intro2Text-bottom {
          width: 100%;
          margin-top: 37px;

          .play-btn {
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: $color__black;
            border-radius: 100%;
            position: relative;
            color: $color__white;
            border: none;
            text-align: center;
            -webkit-animation: shadow-pulse 1.2s linear infinite;
            animation: shadow-pulse 1.2s linear infinite;
            margin-left: 35px;

            img {
              width: 26px;
            }

            &:hover {}
          }
        }
      }
    }

    .intro2-gradient-bg-holder {
      width: 100%;
      overflow: hidden;
      height: 100vh;
      //height: 200vh;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      @media screen and (min-width: 992px) and (max-height: 500px) {
        width: 100%;
        overflow: hidden;
        height: auto;
        position: relative;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        padding-top: 100%;
      }

      @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
        width: 100%;
        overflow: hidden;
        height: auto;
        position: relative;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        padding-top: 100%;
      }

      @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
        width: 100%;
        overflow: hidden;
        height: auto;
        position: relative;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        padding-top: 100%;
      }

      .intro2-gradient-bg {
        position: relative;
        height: 200vh;
        transform: translateY(0);
        //padding-top: 58vh;

        @media screen and (min-width: 992px) and (max-height: 500px) {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        img {
          width: 100%;
          // height: auto;
          height: 3600px;
          object-fit: cover;
          // height: 100%;
          // position: absolute;
          // top: 0;
          // bottom: 0;
          // left: 0;
          // right: 0;
          // object-fit: cover;

          @media screen and (min-width: 992px) and (max-height: 500px) {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }

          @media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 400px) {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }

          @media screen and (min-width: 360px) and (max-width: 767px) and (max-height: 374px) {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}

.scroll-headingText {
  width: auto;
  display: inline-block;
  transition: all 0.2s linear;
  transform: translateX(180%);

  .headingText {
    opacity: 0.45;
    font-weight: 700;
    font-size: 120px;
    line-height: 1.3;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #acacac;
    opacity: 0.45;
    white-space: nowrap;

    @media only screen and (max-width: 1199px) {
      font-size: 80px;
    }

    @media only screen and (max-width: 991px) {
      font-size: 65px;
    }

    @media only screen and (max-width: 767px) {
      font-size: 55px;
    }

    @media only screen and (max-width: 575px) {
      font-size: 44px;
    }
  }
}

// ========= end home-banner-sec ===========

// ============= start findProduct-sec =============
.findProduct-sec {
  position: relative;
  width: 100%;
  padding-top: 200px;

  @media only screen and (max-width: 767px) {
    padding-top: 60px;
  }

  .findProduct-top-sec {
    .container {
      max-width: calc(1246px + (100vw - 1246px) / 2);
      margin-left: auto;
      margin-right: 0;
      //padding-right: 0;
    }

    .sec-heading-wrap {
      max-width: 265px;

      // @media only screen and (max-width: 991px) {
      //   max-width: 465px;
      // }

      @media screen and (max-width: 991px) {
        max-width: 100%;
        width: 100%;
      }
    }

    .findProduct-filter-wrap {
      width: 100%;
      height: 98px;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #404040 100%);
      padding-left: 50px;
      // padding-right: 10px;
      padding-right: 50px;

      .findProduct-filter-wrap-inr {
        width: 100%;
        max-width: 900px;
      }

      @media screen and (max-width: 991px) {
        margin-top: 50px;
        padding-left: 0;
      }

      @media screen and (max-width: 767px) {
        margin-top: 20px;

        padding-top: 20px;
        padding-bottom: 10px;
        height: auto;
        flex-wrap: wrap;
      }

      .findProduct-filter-select-box-holder {
        max-width: 25%;
        // width: 25%;
        padding-left: 7px;
        padding-right: 7px;
        position: relative;
        flex: 1;

        @media screen and (max-width: 767px) {
          margin: 10px 0;
          max-width: 50%;
          width: 50%;
        }

        // &.findProduct-filter {
        //   display: none;
        //   &:first-child {
        //     display: block;
        //   }
        // }

        &.arrow-active {
          padding-right: 30px;

          @media screen and (max-width: 575px) {
            padding-right: 7px;
            max-width: 100%;
            flex: 1;
            width: 100%;
            min-width: 100%;
          }

          &:after {
            content: "";
            width: 26px;
            height: 98px;
            position: absolute;
            right: 0;
            background-image: url(../images/home/filter-divider.svg);
            background-size: cover;
            top: -30px;
            right: 9px;

            @media screen and (max-width: 767px) {
              display: none;
            }
          }
        }

        .title {
          font-weight: 600;
          font-size: 13px;
          line-height: 1.2;
          color: #acacac;
          position: absolute;
          top: -12px;
          left: 7px;
          width: 100%;
          width: 165px;
        }

        .findProduct-filter-select-box {
          width: 100%;
          cursor: pointer;

          .SumoSelect {
            &>.optWrapper {
              &>.options {
                li {
                  &:first-child {
                    pointer-events: none;
                  }
                }
              }
            }
          }

          .SumoSelect.open>.CaptionCont,
          .SumoSelect:focus>.CaptionCont,
          .SumoSelect:hover>.CaptionCont {
            box-shadow: 0 0 2px transparent;
            border-color: transparent;
          }

          .SumoSelect>.CaptionCont {
            background-color: transparent;
            margin: 0;
            border: none;
          }

          .SelectBox {
            padding: 5px 0;
          }

          .SumoSelect {
            // width: 300px;
            width: auto;
            margin-left: 0;
            cursor: pointer;
            max-width: 100%;

            @media only screen and (max-width: 991px) {
              margin-left: 0;
            }
          }

          .SumoSelect>.CaptionCont>span {
            font-size: 18px;
            line-height: 1.3;
            color: #ffffff;
            cursor: pointer;
            font-weight: 600;

            @media only screen and (max-width: 991px) {
              font-size: 16px;
            }

            &.placeholder {
              font-style: normal;
              background-color: transparent;
            }
          }

          .SumoSelect>.CaptionCont>label {
            cursor: pointer;
          }

          .SelectClass:disabled,
          .SumoUnder:disabled {
            opacity: 0;
          }

          .SumoSelect.disabled {
            opacity: 0.5;
          }

          .SumoSelect.disabled>.CaptionCont>span {
            cursor: default;
          }

          .SumoSelect.open>.optWrapper {
            top: 45px;
            min-width: 320px;

            @media only screen and (max-width: 767px) {
              min-width: 240px;
            }
          }

          .SumoSelect>.optWrapper>.options li label {
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
          }

          .SumoSelect>.CaptionCont>label>i {
            background-image: url(../images/down-angle.svg);
            background-size: contain;
            width: 14px;
            height: 14px;
          }

          .SumoSelect>.optWrapper {
            background: rgba(235, 235, 235, 1);
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            border: none;
          }

          .SumoSelect>.optWrapper>.options li label {
            font-weight: 600;
            font-size: 14px;
            line-height: 1.4;
            color: $color__black;
          }

          .SumoSelect>.optWrapper>.options li.opt {
            padding: 10px 15px 12px 15px;
            margin: 0;

            &.selected {
              background-color: #e2e2e2;
              color: $color__pumpkin;

              label {
                color: $color__pumpkin;
              }
            }
          }

          .SumoSelect>.optWrapper>.options li.opt:hover {
            background-color: #e2e2e2;
            color: $color__pumpkin;
          }

          .SumoSelect>.optWrapper>.options li:nth-child(1) {
            pointer-events: none;
          }
        }
      }
    }
  }

  .findProduct-bottom-sec {
    margin-top: 100px;
    width: 100%;

    @media only screen and (max-width: 991px) {
      margin-top: 80px;
    }

    .findProduct-product-img-wrap {
      width: 100%;

      @media only screen and (max-width: 767px) {
        text-align: center;
        margin-bottom: 40px;
      }

      .findProduct-product-img-holder {
        width: 100%;

        img {
          width: auto;
          max-width: 100%;
        }
      }
    }
  }

  .findProduct-searchResult-sec {
    width: 100%;
    margin-top: 60px;

    @media only screen and (max-width: 991px) {
      margin-top: 40px;
    }

    .searchResult-pContent-wrap {
      .searchResult-product-logo-img {
        width: 200px;
        margin-top: -8%;

        img {
          width: 100%;
        }
      }

      .searchResult-product-img-holder {
        width: 100%;
        max-width: 370px;

        @media screen and (max-width: 767px) {
          margin: 0 auto 0px;
        }

        .img-holder {
          padding-top: 118%;
          position: relative;
          width: 100%;

          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            object-fit: contain;
            -webkit-animation: moverY 1s infinite alternate;
            animation: moverY 1s infinite alternate;
          }
        }
      }

      .searchResult-pContent-list {
        width: 100%;
        max-width: 350px;

        ul {
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            padding-left: 30px;
            position: relative;
            min-height: 20px;
            margin-top: 15px;
            opacity: 0;

            .searchResultDiv {
              margin: 0;
              font-weight: 400;
              font-size: 17px;
              line-height: 1.6;
              position: relative;
              font-family: $secondfont;

              span {
                color: $color__pumpkin;
                font-family: $basefont;
                font-weight: 500;
              }

              &:after {
                content: "";
                background-image: url(../images/list-style-type.svg);
                background-repeat: no-repeat;
                background-size: 8px 12px;
                position: absolute;
                left: -25px;
                top: 5px;
                background-size: contain;
                width: 10px;
                height: 20px;
              }
            }
          }
        }
      }
    }
  }
}

.searchResult-chart-wrap {
  width: 100%;
  position: relative;

  &:after {
    content: "";
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) -28.21%, #b5b5b5 45.51%, rgba(217, 217, 217, 0) 125.64%);
    opacity: 0.5;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    // @media screen and (max-width: 767px) {
    //   display: none;
    // }
  }

  &:before {
    content: "";
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(181, 181, 181, 1) 51%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.5;
    opacity: 0.5;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    // @media screen and (max-width: 767px) {
    //   display: none;
    // }
  }

  .chart-box-holder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;

    .chart-box-content {
      .gauge-chart-box {
        width: 110px;
        height: auto;
        margin: 0 auto 10px;
      }

      .chart-infoText1 {
        font-weight: 600;
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
        font-family: $secondfont;
      }

      .chart-infoText2 {
        font-weight: 600;
        font-size: 16px;
        line-height: 1.4;
        color: $color__dodgerBlue;
        margin: 0;
        font-family: $secondfont;
      }
    }
  }
}

// ============= end findProduct-sec =============

// ============= clients-sec =============

.slide-sec-heading-holder {
  width: 100%;

  .slide-sec-heading-block {
    width: 100%;

    .logo-sm-holder {
      padding: 15px;
      background-color: $color__black;
      position: absolute;
      right: 100%;
      top: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      background-image: url(../images/home/logo-sm.svg);
      width: 18px;
      height: 21px;
      background-repeat: no-repeat;
      background-position: center;
      transition: all 0.2s linear;
      //transform: translateX(100%);

      img {
        width: 18px;
        height: 21px;
      }
    }

    .slide-sec-line {
      width: 100%;
      height: 1px;
      background-color: #acacac;
      position: relative;
    }

    .headingText-block {
      padding-left: 15px;
      flex: 0 0 auto;
      min-width: 0;
      max-width: 250px;

      .headingText {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.3;
        color: #dddddd;
      }
    }
  }
}

.pumpkin-glow-box {
  width: 533px;
  height: 533px;
  background: $color__pumpkin;
  opacity: 0.7;
  filter: blur(150px);
}

.blue-glow-box {
  width: 533px;
  height: 533px;
  background: $color__dodgerBlue;
  opacity: 0.7;
  filter: blur(150px);

  @media only screen and (max-width: 1199px) {
    width: 423px;
    height: 423px;
  }
}

.clients-sec {
  width: 100%;
  padding: 100px 0 250px;
  position: relative;

  @media screen and (max-width: 1199px) {
    padding: 150px 0 150px;
  }

  @media screen and (max-width: 991px) {
    padding: 50px 0 150px;
  }

  @media screen and (max-width: 767px) {
    padding: 50px 0 100px;
  }

  .pumpkin-glow-box {
    left: -455px;
    bottom: -30%;
    position: absolute;
  }

  .clients-swiper-slider {
    width: 100%;
    margin-top: 50px;

    .clients_info_item {
      width: 100%;
      text-align: center;
      padding: 30px 0;

      .clients_info_img_block {
        width: 100%;

        .clients_logo_img {
          max-width: 180px;
          height: 60px;
          margin: 0 auto 20px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }

      .clients_info__content {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;

        .logoHeadingText {
          font-weight: 600;
          font-size: 14px;
          margin-bottom: 4px;
          color: $color__white;
        }

        p {
          font-weight: 500;
          font-size: 13px;
          line-height: 1.4;

          margin: 0;
        }
      }
    }
  }

  .accordion-h-slider {
    width: 100%;
    margin-top: 100px;

    @media only screen and (max-width: 767px) {
      margin-top: 50px;
    }

    display: flex;

    @media screen and (max-width: 991px) {
      flex-wrap: wrap;
    }

    .accordion__item {
      align-items: flex-start;
      cursor: pointer;
      display: flex;
      justify-content: center;
      height: 220px;
      position: relative;
      min-width: 200px;
      flex: 1 1;
      transition: all 0.5s linear;
      flex-direction: column;

      background: #131313;
      border: 1px solid #393939;
      border-radius: 5px;

      margin: 0 10px;

      @media screen and (max-width: 1199px) {
        min-width: 160px;
      }

      @media screen and (max-width: 991px) {
        min-width: calc(50% - 20px);
        margin: 10px 10px;
      }

      &.active {
        flex: 100 1;

        .accordion__content {
          animation: show-content 400ms 300ms forwards;
          display: block;
          visibility: visible;
          padding: 10px 25px 20px;
        }

        .accordion__block {
          text-align: left;
          padding: 20px 25px 0;

          .accordion__img {
            margin: 0 0;
            height: 40px;

            img {
              object-position: left bottom;
            }
          }
        }
      }

      .accordion__block {
        width: 100%;
        text-align: center;
        transition: all 0.4s ease-in-out;
        padding: 0 0 0;

        .accordion__img {
          max-width: 130px;
          // height: 40px;
          margin: 0 auto;
          height: 100px;
          transition: all 0.4s ease-in-out;

          @media screen and (max-width: 1199px) {
            max-width: 120px;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            //object-position: center bottom;
            transition: all 0.4s ease-in-out;
          }
        }
      }

      .accordion__content {
        visibility: hidden;
        opacity: 0;
        position: relative;
        transform-origin: left;
        height: 0;
        transition: all 0.4s ease-in-out;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.4;

        @media screen and (max-width: 991px) {
          font-size: 12px;
        }

        @media screen and (max-width: 767px) {
          font-size: 13px;
        }

        padding: 0 0 0;

        .logoHeadingText {
          font-weight: 600;
          font-size: 14px;
          margin-bottom: 4px;
          //color: $color__white;
        }
      }
    }
  }
}

.specialize-left-navBar {
  width: 180px;
  align-self: center;
  margin-top: -30px;

  @media screen and (max-width: 991px) {
    width: 110px;
    align-self: start;
    margin-top: 0;
  }

  @media screen and (max-width: 767px) {
    display: none;
  }
}

.specialize-tab-content {
  .content-block {
    .img-holder-wrap {
      flex: 1 1 0;
      padding-right: 30px;
      padding-left: 30px;
      text-align: center;
      position: relative;

      @media only screen and (max-width: 767px) {
        padding-right: 30px;
        padding-left: 0;
      }

      .view360Modal-btn {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
        padding: 6px 5px;
        min-width: 70px;
        font-family: $secondfont;
        z-index: 2;

        @media only screen and (max-width: 767px) {
          top: -25px;
        }
      }

      .img-holder {
        max-width: 450px;
        margin: 0 auto;
        height: auto;

        img {
          width: 100%;
          max-height: 450px;
          max-width: 100%;
          object-fit: contain;
        }
      }
    }

    .dscText-content {
      flex: 0 0 auto;
      max-width: 420px;

      @media screen and (max-width: 991px) {
        max-width: 300px;
      }
    }
  }
}

.specialize-tab-content {
  .content-block {
    .img-holder-wrap {
      .img-holder {
        position: relative;

        &:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -115px;
          height: 140px;
          background-image: url(../images/home/tyre-shadow.svg);
          width: 100%;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center center;
        }

        img {
          -webkit-animation: moverY 1s infinite alternate;
          animation: moverY 1s infinite alternate;
        }
      }
    }

    .dscText-content {
      .headingText {
        font-weight: 700;
        font-size: 26px;
        line-height: 1.3;
        color: $color__white;
      }

      .feature-option-holder {
        margin-top: 30px;

        .img-holder {
          text-align: center;
          width: 60px;
          height: 60px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .option-infoText {
          font-weight: 600;
          font-size: 14px;
          line-height: 1.4;
          margin-top: 15px;
          text-align: center;
          color: #ffffff;
        }
      }

      .btn-holder {
        margin-top: 35px;
      }
    }
  }
}

.specialize-sec {
  width: 100%;
  padding: 0 0 60px;
  position: relative;

  // &:after {
  //   content: "";
  //   background: rgb(0, 0, 0);
  //   background: linear-gradient(
  //     180deg,
  //     rgba(0, 0, 0, 0) 0%,
  //     rgba(0, 0, 0, 0.32816876750700286) 35%,
  //     rgba(0, 0, 0, 1) 100%
  //   );
  //   width: 100%;
  //   height: 130px;
  //   top: -130px;
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  // }

  .sec-heading-wrap {
    margin-top: -40px;
    margin-bottom: 80px;
    z-index: 1;
    position: relative;

    @media screen and (max-width: 767px) {
      margin-top: -20px;
      margin-bottom: 40px;
    }
  }
}

.eDesign-sec {
  width: 100%;
  position: relative;
  padding: 300px 0 200px;

  @media screen and (max-width: 991px) {
    padding: 200px 0 100px;
  }

  @media only screen and (max-width: 767px) {
    padding: 100px 0 100px;
  }

  .blue-glow-box {
    right: -474px;
    top: -200px;
    position: absolute;

    @media screen and (max-width: 1199px) {
      right: -360px;
      top: -15%;
      position: absolute;
    }
  }

  .sec-heading-wrap {
    max-width: 365px;
    margin-bottom: 100px;

    @media only screen and (max-width: 767px) {
      margin-bottom: 50px;
    }
  }

  .eDesign-accordion {
    margin-top: 45px;
  }

  .eDesign-content-block {
    max-width: 482px;

    @media screen and (max-width: 991px) {
      margin-bottom: 70px;
      max-width: 100%;
    }
  }

  .video-wrap-block {
    width: 100%;

    .btn-holder-withLine {
      margin-top: 80px;
    }
  }

  .video-img-holder {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .accordion {
    &.eDesign-accordion {
      .accordion-item {
        border: none;
        background: #1c1c1c;
        border-radius: 5px;
        margin-bottom: 15px;
        overflow: hidden;

        .accordion-header {
          .accordion-button:not(.collapsed) {
            background-color: transparent;

            &:before {
              height: 100%;
              transition-delay: 0.4s;
            }

            .headingText {}
          }

          .accordion-button {
            background-color: transparent;
            border: none;
            padding: 15px 20px;
            box-shadow: none;
            border-radius: 0;
            transition: all 0.3s ease-in-out;

            @media screen and (max-width: 767px) {
              padding: 12px 15px;
            }

            .headingText {
              font-weight: 700;
              font-size: 15px;
              color: $color__lightGray;
              line-height: 1.6;
              position: relative;

              @media only screen and (max-width: 991px) {
                font-size: 16px;
                line-height: 1.4;
              }

              @media screen and (max-width: 767px) {
                font-size: 16px;
              }

              &::after {
                content: "";
                transition: all 0.2s ease-in-out;
                top: 10px;
                bottom: 100%;
              }
            }

            // &::after {
            //   background-image: none;
            //   content: '';
            //   background-image: url(../images/home/icons/plus-green.svg);
            //   line-height: 1;
            //   height: 15px;
            //   background-size: contain;
            //   width: 13px;
            // }
            &::after {
              background-image: none;
              // font-family: "fontello";
              content: "+";
              font-size: 30px;
              right: 0;
              text-align: right;
              height: 10px;
              line-height: 1;
              transform-origin: center;
              color: $color__white;
              transform: translateY(-10px);
              transform-origin: 15px center;
            }

            &:not(.collapsed)::after {
              // background-image: url(../images/home/icons/minus-green.svg);
              transform: rotateZ(-180deg) translateY(-14px);

              content: "-";
            }

            &:before {
              content: "";
              width: 4px;
              height: 0;
              top: 0;
              left: 0;
              bottom: 0;
              position: absolute;
              background-color: $color__pumpkin;
              transition: all 0.2s ease-in-out;
              transition-delay: 0.3s;
            }

            &:focus {
              box-shadow: none;
            }
          }
        }

        .accordion-collapse {
          &.show {
            .accordion-body {
              background-color: transparent;

              &:after {
                height: 100%;
                transition-delay: 0.2s;
              }

              .dscText {
                position: relative;
                transition: all 0.3s ease-in-out;
              }
            }
          }
        }

        .accordion-body {
          padding: 0 20px 25px;
          position: relative;

          &:after {
            content: "";
            width: 4px;
            top: 0;
            left: 0;
            bottom: 0;
            height: 0;
            position: absolute;
            background-color: $color__pumpkin;
            transition: all 0.2s ease-in-out;
            transition-delay: 0.4s;
          }

          @media screen and (max-width: 767px) {
            padding: 0 15px 15px;
          }

          .dscText {
            // padding: 0 25px;
            // transition: all 0.2s ease-in-out;

            // &::after {
            //   content: "";
            //   transition: all 0.2s ease-in-out;
            //   top: 0;
            //   bottom: 100%;
            // }

            p {
              line-height: 1.6;
              font-weight: 500;
              font-size: 14px;
              color: $color__lightGray;

              @media only screen and (max-width: 991px) {}
            }
          }
        }
      }
    }
  }
}

.process-sec {
  width: 100%;
  position: relative;
  padding: 100px 0;

  @media only screen and (max-width: 767px) {
    padding: 50px 0 100px;
  }

  .pumpkin-glow-box {
    left: -399px;
    top: 5%;
    position: absolute;
  }

  .sec-heading-wrap {
    margin-bottom: 85px;

    @media only screen and (max-width: 767px) {
      margin-bottom: 40px;
    }
  }

  .video-img-holder {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .process-video-wrap {
    position: relative;
    width: 100%;

    .video-holder {
      width: 100%;
      padding-top: 56.25%;
      position: relative;
      z-index: 2;

      video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        object-fit: cover;
      }

      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
      }
    }

    .image-holder {
      width: 100%;
      padding-top: 56.25%;
      position: relative;
      z-index: 2;
      border-radius: 5px;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        object-fit: cover;
        border-radius: 5px;
      }
    }
  }

  .process-vidBottom-content {
    max-width: 700px;
    margin: 80px auto 0;

    @media only screen and (max-width: 767px) {
      margin: 40px auto 0;
    }

    .process-vidBottom-left-text-box {
      width: 100%;

      p {
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        color: $color__darkGray;
      }

      @media only screen and (max-width: 767px) {
        p {
          font-size: 18px;
        }
      }
    }

    .process-vidBottom-right-text-box {
      max-width: 244px;
      margin-left: auto;
      width: 100%;
      display: flex;

      @media screen and (max-width: 575px) {
        margin-left: 0;
        margin-right: 0;
      }

      p {
        font-weight: 700;
        font-size: 32px;
        line-height: 1.5;
        color: $color__darkGray;

        @media screen and (max-width: 575px) {
          font-size: 28px;
        }
      }

      @media only screen and (max-width: 767px) {
        p {
          font-size: 28px;
        }
      }

      span {
        color: $color__dodgerBlue;
        display: block;
      }
    }
  }
}

.pfeature-sec {
  width: 100%;
  padding-bottom: 100px;

  @media only screen and (max-width: 767px) {
    padding-bottom: 50px;
  }

  .pfeature-content-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 200px;

    @media only screen and (max-width: 767px) {
      margin-top: 100px;
    }

    .pfeature-content-block {
      max-width: 194px;
      margin: 0 auto;

      @media only screen and (max-width: 767px) {
        max-width: 230px;
        margin: 0 auto 30px;
      }

      @media screen and (max-width: 575px) {
        max-width: 260px;
        margin: 0 auto 30px;
        text-align: center;
      }

      &.middle-block {
        transform: translateY(-110px);

        @media only screen and (max-width: 767px) {
          transform: translateY(0px);
        }
      }

      .pfeature-content-top {
        .icon-box {
          width: 50px;
          height: 50px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          @media screen and (max-width: 575px) {
            margin: 0 auto;
          }
        }

        .headingText {
          font-weight: 700;
          font-size: 18px;
          line-height: 1.3;
          color: $color__white;
          margin-top: 14px;
        }
      }

      .pfeature-content-dsc {
        opacity: 0;
        margin-top: 15px;
        max-width: 157px;

        @media only screen and (max-width: 767px) {
          max-width: 220px;
        }

        @media screen and (max-width: 575px) {
          max-width: 100%;
        }

        p {
          font-weight: 500;
          font-size: 14px;
          line-height: 22px;
          color: $color__darkGray;
          margin: 0;
        }
      }
    }
  }

  .pfeature-video-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    transform: translateY(-50px);

    @media only screen and (max-width: 767px) {
      margin: 60px auto 0;
    }

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(180.14deg, rgba(0, 0, 0, 0) 11.94%, #000000 90.26%);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }

    .video-img-holder {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
}

.testimonial-sec {
  width: 100%;
  padding-bottom: 60px;
  padding-top: 220px;
  position: relative;

  @media screen and (max-width: 991px) {
    padding-top: 150px;
  }

  .pumpkin-glow-box {
    // left: -430px;
    // top: 0;
    left: -380px;
    top: -95%;
    bottom: 0;
    margin: auto;
    position: absolute;

    @media screen and (max-width: 767px) {
      opacity: 0;
    }
  }

  .blue-glow-box.right-align {
    right: -430px;
    top: 0;
    bottom: 0;
    margin: auto;
    left: auto;
    position: absolute;

    @media screen and (max-width: 767px) {
      opacity: 0;
    }
  }
}

.testimonial-slider-wrap {
  margin-top: 125px;
  position: relative;
  width: 100%;
  padding-bottom: 70px;

  @media screen and (max-width: 991px) {
    margin-top: 100px;
  }

  .testimonial-quote-holder {
    margin-bottom: 45px;
    font-size: 53px;
    line-height: 1;
    color: $color__dodgerBlue;
  }

  .testimonial-slider-holder {
    width: 100%;
    position: relative;

    .testimonial-slide-item {
      max-width: 746px;
      margin: 0 auto;

      .testimonial-des-content {
        .dsc-text {
          font-weight: 700;
          font-size: 26px;
          line-height: 1.5;
          text-align: center;
          color: $color__darkGray;

          @media only screen and (max-width: 767px) {
            font-size: 20px;
          }

          @media screen and (max-width: 575px) {
            font-size: 17px;
          }
        }
      }
    }

    .testimonial-swiper-thumbs {
      max-width: 460px;
      margin: 60px auto 0;

      @media screen and (max-width: 991px) {
        margin: 40px auto 0;
      }

      @media screen and (max-width: 991px) {
        margin: 20px auto 0;
      }

      .swiper-slide-thumb-active {
        .testimonial-slide-user-item {
          opacity: 1;
        }
      }

      .testimonial-slide-user-item {
        opacity: 0.5;
        cursor: pointer;

        .user-img {
          width: 90px;
          height: 90px;
          margin: 0 auto;
          border-radius: 100%;

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

        .user-info {
          width: 100%;
          margin-top: 10px;
          text-align: center;

          .nameText {
            font-weight: 700;
            font-size: 18px;
            line-height: 1.3;
            color: $color__white;
            margin: 0;
          }

          .infoText {
            font-weight: 500;
            font-size: 12px;
            line-height: 1.3;
            color: $color__white;
            margin: 5px 0 0;
          }
        }
      }
    }
  }
}

// -------------- start newTestimonial ----------------
.newTestimonial-slider-wrap {
  margin-top: 125px;

  @media screen and (max-width: 991px) {
    margin-top: 85px;
  }

  .newTestimonial-slider-holder {
    width: 100%;
    position: relative;
    padding-bottom: 60px;

    &:before {
      content: "";
      width: 219px;
      height: 100%;
      right: auto;
      left: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(450deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
      position: absolute;
      z-index: 2;
      pointer-events: none;

      @media screen and (max-width: 991px) {
        width: 150px;
      }

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    &:after {
      content: "";
      width: 219px;
      height: 100%;
      left: auto;
      right: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 100%);
      position: absolute;
      z-index: 2;
      pointer-events: none;

      @media screen and (max-width: 991px) {
        width: 150px;
      }

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    .swiper-slide {
      position: relative;
      width: 625px;

      @media screen and (max-width: 767px) {
        width: 525px;
      }

      @media screen and (max-width: 575px) {
        width: 95%;
      }
    }

    .newTestimonial-slide-item {
      margin: 0 auto;
      position: relative;
      padding-left: 180px;
      width: 100%;

      @media screen and (max-width: 767px) {
        padding-left: 125px;
      }

      @media screen and (max-width: 575px) {
        padding-left: 0;
        padding-top: 60px;
      }

      &:after {
        content: "";
        background-image: url(../images/home/testimonial-shape-top.svg);
        width: 300px;
        height: 200px;
        background-position: left top;
        position: absolute;
        top: 0;
        left: 0;

        @media screen and (max-width: 575px) {
          display: none;
        }
      }

      &:before {
        content: "";
        background-image: url(../images/home/testimonial-shape-bottom.svg);
        width: 300px;
        height: 200px;
        background-position: left bottom;
        position: absolute;
        bottom: 0;
        left: 0;

        @media screen and (max-width: 575px) {
          display: none;
        }
      }

      .newTestimonial-user-img {
        width: 139px;
        height: 139px;
        margin: 0 auto;
        border-radius: 100%;
        padding: 10px;

        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        background-color: $color__white;

        @media screen and (max-width: 767px) {
          width: 110px;
          height: 110px;
          padding: 5px;
        }

        @media screen and (max-width: 575px) {
          top: 0px;
          left: 0;
          right: 0;
          margin: auto;
          bottom: auto;
          z-index: 3;
        }

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

      .newTestimonial-slide-content {
        width: 100%;
        position: relative;
        height: 380px;
        background: #1c1c1c;
        z-index: 2;
        display: flex;
        align-items: center;
        padding-right: 30px;
        border-radius: 8px;
        padding-left: 30px;
        padding-top: 65px;
        padding-bottom: 30px;

        @media screen and (min-width: 576px) {
          border-radius: 0 8px 8px 0;
          padding-left: 0;
          padding-top: 0;
          padding-bottom: 0;
        }

        @media screen and (max-width: 575px) {
          height: auto;
        }

        .newTestimonial-quote-holder {
          font-size: 60px;
          line-height: 1;
          color: #1a8aef;
          position: absolute;
          left: -85px;
          top: 40px;
          opacity: 0.3;

          @media screen and (max-width: 575px) {
            left: 10px;
            font-size: 50px;
            top: 15px;
          }
        }

        .newTestimonial-dsc-content {
          width: 100%;

          .dsc-text {
            width: 100%;

            @media screen and (min-width: 576px) {
              max-height: 265px;
              overflow: auto;
              padding-right: 10px;
            }

            p {
              font-size: 14px;
              font-weight: 500;
              line-height: 1.8;
              color: $color__white;
              margin: 0;
            }
          }
        }

        .newTestimonial-user-info {
          width: 100%;
          margin-top: 25px;
          display: flex;

          .user-infoText {
            width: auto;
            padding-right: 20px;
            min-width: 0;
            flex: 0 1 auto;

            .nameText {
              font-size: 16px;
              font-weight: 700;
              line-height: 1.3;
              color: $color__dodgerBlue;
              margin: 0;
            }

            .infoText {
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: 14px;
              letter-spacing: 0.48px;
              margin: 5px 0 0;
            }
          }

          .videoPlay-button-holder {
            border-left: 1px solid #acacac;
            padding-left: 20px;
            display: flex;
            align-items: center;
            flex: 1 0 auto;

            .playText-btn {
              font-size: 14px;
              color: $color__pumpkin;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

.certificates-sec {
  width: 100%;
  position: relative;

  .sec-heading-wrap {
    margin-bottom: 100px;

    @media only screen and (max-width: 767px) {
      margin-bottom: 50px;
    }
  }

  .certificates-slider-wrap {
    width: 850px;
    margin: 0 auto 250px;
    max-width: 100%;

    @media screen and (max-width: 991px) {
      margin: 0 auto 200px;
    }

    @media screen and (max-width: 767px) {
      margin: 0 auto 150px;
    }

    @media screen and (max-width: 575px) {
      margin: 0 auto 50px;
    }

    .certificates-swiper {
      @media screen and (max-width: 767px) {
        padding-bottom: 45px;
      }

      .comnStyle-swiper-pagination {
        bottom: -20px;
      }
    }

    .certificate-item {
      .certificateText {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
        color: $color__white;
        font-family: $secondfont;
      }
    }
  }

  .spacing-div {
    height: 240px;
    width: 100%;

    @media screen and (max-width: 991px) {
      height: 180px;
    }

    @media screen and (max-width: 575px) {
      height: 0;
    }
  }

  // svg {
  //   animation: dash 2s linear forwards;
  //   -webkit-animation: dash 2s linear forwards;
  // }
}

.certificates-award-holder {
  width: 928px;
  margin: 0 auto 0;

  @media screen and (max-width: 991px) {
    width: 690px;
  }

  @media screen and (max-width: 767px) {
    width: 500px;
    border: 1px solid #464646;
    border-radius: 20px;
  }

  @media screen and (max-width: 575px) {
    width: 100%;
  }

  .certificates-award-box-outer {
    width: 100%;
    // padding-bottom: 59%;
    position: relative;
    height: 547px;

    @media screen and (max-width: 991px) {
      height: 410px;
    }

    @media screen and (max-width: 575px) {
      height: auto;
    }

    .certificates-award-box {
      width: 100%;
      height: 100%;
      // position: absolute;
      // left: 0;
      // right: 0;
      // bottom: 0;
      // top: 0;
      // padding: 35px;

      .full-border-holder {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        @media screen and (max-width: 767px) {
          display: none;
        }

        svg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          // stroke-dasharray: 3000;
          // stroke-dashoffset: 3000;
        }

        &.addAni {
          svg {
            animation: dash 1s linear forwards;
            -webkit-animation: dash 1s linear forwards;
          }
        }
      }

      .certificates-award-box-inr {
        width: 100%;
        height: 100%;
        padding: 30px 50px;
        position: relative;

        @media screen and (max-width: 767px) {
          padding: 30px 30px;
        }

        @media screen and (max-width: 575px) {
          padding: 20px 20px;
        }

        .half-border-holder {
          position: absolute;
          left: 50px;
          right: auto;
          bottom: 0;
          top: 35px;

          svg {
            width: 100%;

            // stroke-dasharray: 2000;
            // stroke-dashoffset: 2000;
            @media only screen and (max-width: 991px) {
              height: 336px;
            }

            @media screen and (max-width: 767px) {
              height: 348px;
            }

            @media screen and (max-width: 575px) {
              display: none;
            }
          }

          &.addAni {
            svg {
              animation: dash2 1s linear forwards;
              -webkit-animation: dash2 1s linear forwards;
            }
          }

          @media screen and (max-width: 767px) {
            left: 30px;
            top: 30px;
          }

          @media screen and (max-width: 575px) {
            left: 20px;
            top: 20px;
          }
        }

        .award-content-holder {
          width: 100%;
          position: relative;
          min-height: 100%;

          .award-dsc-content {
            flex: 1 1 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 40px 60px 20px;
            position: relative;

            @media screen and (max-width: 991px) {
              padding: 0px 40px 20px;
            }

            @media screen and (max-width: 767px) {
              padding: 0px 20px 20px;
            }

            @media screen and (max-width: 575px) {
              padding: 20px 20px 20px;

              &:after {
                content: "";
                width: 100%;
                border-radius: 20px 0 0 20px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                border: 1px solid #464646;
                border-right: 0;
                position: absolute;
                top: 0;
              }
            }

            .award-headingText {
              font-weight: 700;
              font-size: 40px;
              line-height: 1.4;
              color: $color__white;
              opacity: 0.6;
              //transform: translateY(-196px) scale(1.5) translateX(50%);
              //margin:'0  0 0 -122px'
              transition: all 0.3s linear;

              @media screen and (max-width: 991px) {
                font-size: 30px;
              }
            }

            .award-list-holder {
              margin-top: 30px;
              margin-bottom: 10px;
              width: 100%;
              height: 194px;
              overflow: hidden;
              position: relative;

              @media only screen and (max-width: 991px) {
                margin-top: 14px;
                margin-bottom: 5px;
              }

              .award-list {
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                top: 0;
                bottom: auto;
                left: 0;
                padding-bottom: 20px;

                li {
                  font-weight: 600;
                  font-size: 28px;
                  line-height: 1.3;
                  margin-top: 17px;
                  color: $color__dodgerBlue;
                  font-family: $secondfont;

                  @media screen and (max-width: 767px) {
                    font-size: 24px;
                  }

                  &:first-child {
                    margin-top: 0;
                  }
                }
              }
            }

            .signature-img {
              width: 200px;
              margin-top: auto;

              @media only screen and (max-width: 991px) {
                width: 70px;
              }

              img {
                max-width: 100%;
              }
            }
          }

          .award-img-holder {
            flex: 0 0 auto;

            .award-img {
              width: 300px;

              @media screen and (max-width: 991px) {
                width: 200px;
              }

              @media screen and (max-width: 767px) {
                width: 190px;
              }

              @media screen and (max-width: 575px) {
                width: 116px;
                margin: 10px auto 0;
                height: auto;
              }

              svg {
                width: 100%;

                @media screen and (max-width: 575px) {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
    }
  }
}

.newsEvents-sec {
  width: 100%;
  padding: 180px 0 150px;

  @media only screen and (max-width: 1199px) {
    padding: 100px 0 100px;
  }

  @media screen and (max-width: 991px) {
    padding: 80px 0 80px;
  }

  @media screen and (max-width: 767px) {
    padding: 60px 0 80px;
  }

  .sec-heading-wrap {
    margin-top: -40px;
    margin-bottom: 80px;

    @media only screen and (max-width: 767px) {
      margin-top: -25px;
      margin-bottom: 40px;
    }
  }

  .newsEvents-large-content-item {
    width: 100%;
    position: relative;
    z-index: 1;

    .newsEvents-content {
      width: 100%;

      .dataInfo-content-block {
        width: 100%;
        margin-top: 30px;

        .inr-box {
          .sm-info-area {
            width: 100%;
            margin-bottom: 10px;

            .dateText {
              font-weight: 400;
              font-size: 14px;
              line-height: 1.4;
              color: $color__darkGray;
              font-family: $secondfont;
            }

            .tagText-holder {
              padding-left: 10px;
              position: relative;
              margin-left: 10px;

              &:before {
                content: "";
                width: 1px;
                height: 12px;
                position: absolute;
                left: 0;
                background-color: $color__darkGray;
                top: 4px;
              }

              .tagText {
                font-weight: 400;
                font-size: 14px;
                line-height: 1.4;
                color: $color__darkGray;
                font-family: $secondfont;
              }
            }
          }

          .dscText-holder {
            width: 100%;

            .headingText {
              font-weight: 700;
              font-size: 28px;
              line-height: 1.3;
              color: $color__white;
              font-family: $secondfont;

              @media only screen and (max-width: 767px) {
                font-size: 24px;
              }

              @media only screen and (max-width: 575px) {
                font-size: 22px;
              }
            }

            .dscText {
              font-weight: 500;
              font-size: 15px;
              line-height: 1.6;

              margin-top: 15px;
              margin-bottom: 0;
            }
          }
        }

        .btn-holder {
          margin-top: 20px;
        }
      }

      .img-holder-wrap {
        width: 100%;

        .img-holder {
          width: 100%;
          padding-top: 65%;
          position: relative;
          display: block;
          border-radius: 5px;
          overflow: hidden;

          &:hover {
            img {
              transform: scale3d(1.1, 1.1, 1);
            }
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 7px;
            transition: transform 0.3s ease-in-out;
          }
        }
      }
    }
  }

  .newsEvents-content-item {
    width: 100%;

    .newsEvents-content {
      width: 100%;

      .img-holder-wrap {
        width: 173px;

        .img-holder {
          width: 100%;
          padding-top: 86%;
          position: relative;
          display: block;
          border-radius: 5px;
          overflow: hidden;

          &:hover {
            img {
              transform: scale3d(1.1, 1.1, 1);
            }
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 7px;
            transition: transform 0.3s ease-in-out;
          }
        }
      }

      .dataInfo-content-block {
        width: calc(100% - 173px);
        padding-left: 30px;

        @media only screen and (max-width: 575px) {
          width: 100%;
          padding-left: 0;
          margin-top: 15px;
        }

        .inr-box {
          .sm-info-area {
            width: 100%;
            margin-bottom: 10px;

            .dateText {
              font-weight: 400;
              font-size: 14px;
              line-height: 1.4;
              color: $color__darkGray;
              font-family: $secondfont;
            }

            .tagText-holder {
              padding-left: 10px;
              position: relative;
              margin-left: 10px;

              &:before {
                content: "";
                width: 1px;
                height: 12px;
                position: absolute;
                left: 0;
                background-color: $color__darkGray;
                top: 4px;
              }

              .tagText {
                font-weight: 400;
                font-size: 14px;
                line-height: 1.4;
                color: $color__darkGray;
                font-family: $secondfont;
              }
            }
          }

          .dscText-holder {
            width: 100%;

            .headingText {
              font-weight: 700;
              font-size: 18px;
              line-height: 1.5;
              font-family: $secondfont;
              max-width: 300px;
            }
          }
        }

        .btn-holder {
          margin-top: 12px;

          .btn {
            &.btn-white-sm {
              min-width: 44px;
              padding: 8px 10px;
            }
          }
        }
      }
    }
  }

  .newsEvents-content-right-block {
    padding-left: 10px;

    @media screen and (max-width: 991px) {
      padding-left: 0;
      margin-top: 60px;
    }

    .newsEvents-content-item {
      margin-top: 40px;

      &:first-child {
        margin-top: 0px;
      }
    }

    .newsEvents-bottom-area {
      position: relative;
      padding-top: 45px;
      margin-top: 50px;
      width: 100%;

      .line-v {
        width: 1px;
        height: 100%;
        background-color: $color__darkGray;
        position: absolute;
        left: 0;
        top: 0;
      }

      .bottom-infoText {
        font-weight: 500;
        font-size: 14px;
        line-height: 1.3;
        padding-left: 20px;
        padding-bottom: 25px;
        color: $color__darkGray;

        a {
          color: $color__pumpkin;
          text-decoration: underline;
          font-weight: 600;

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

.iframeVideo-wrap {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;

  .iframeVideo-holder {
    width: 100%;
    padding-top: 55%;
    position: relative;

    iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}

.opening-modal {
  border-radius: 20px;

  .modal-dialog {
    max-width: 840px;

    @media screen and (max-width: 991px) {
      width: 670px;
    }

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

    @media screen and (max-width: 575px) {
      width: 360px;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .modal-content {
      background-color: transparent;
      border: none;
      border-radius: 0;

      .close {
        width: 26px;
        height: 26px;
        background: transparent;
        border-radius: 100%;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        border: none;
        font-size: 28px;
        line-height: 1;
        text-align: center;
        padding: 0;
        color: #cccccc;
        transition: all 0.3s ease-in;

        &:hover {
          color: $color__pumpkin;
        }

        @media screen and (max-width: 767px) {
          top: 160px;
        }

        @media screen and (max-width: 575px) {
          top: 93px;
        }

        &.poster-close {
          top: 6px;
          right: 6px;
          color: rgba(137, 137, 137, 0.5);

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

      .modal-body {
        padding: 0;
      }
    }
  }
}

.opening-modal-poster {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;

  .poster-img-wrap {
    width: 100%;
    padding-top: 60%;
    position: relative;
    display: block;
    border-radius: 7px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 7px;
    }
  }
}

.opening-modal-content {
  width: 100%;
  max-width: 100%;

  .opening-modal-img-content {
    flex: 1 1 0;
    width: calc(100% - 540px);
    position: relative;
    height: auto;
    display: flex;
    z-index: 2;

    @media screen and (max-width: 991px) {
      width: calc(100% - 420px);
    }

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

    .tyre-img-holder {
      position: relative;
      z-index: 2;

      @media screen and (max-width: 767px) {
        width: 167px;
        margin-bottom: -50px;
      }

      @media screen and (max-width: 575px) {
        width: 110px;
      }

      img {
        -webkit-animation: moverY 1s infinite alternate;
        animation: moverY 1s infinite alternate;
      }
    }

    .opening-modal-bg-img {
      position: absolute;
      top: 0;
      right: -138px;
      height: 100%;
      bottom: 0;

      @media screen and (max-width: 991px) {
        right: -75px;
      }

      @media screen and (max-width: 767px) {
        display: none;
      }

      img {
        height: 100%;
        width: auto;
        max-width: none;
      }
    }
  }

  .opening-modal-main-content {
    flex: 0 0 auto;
    width: 540px;
    background-color: $color__white;
    padding: 55px 44px 55px 175px;
    position: relative;
    border-radius: 0 20px 20px 0;

    @media screen and (max-width: 767px) {
      border-radius: 20px 20px 20px 20px;
    }

    &:before {
      content: "";
      width: 80px;
      height: 100%;
      position: absolute;
      left: -80px;
      top: 0;
      bottom: 0;
      background-color: $color__white;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    @media screen and (max-width: 991px) {
      width: 420px;
      padding: 55px 44px 55px 100px;
    }

    @media screen and (max-width: 767px) {
      width: 100%;
      padding: 50px 44px 50px 44px;
    }

    .opening-form-heading {
      width: 100%;
      margin-bottom: 30px;

      .headingText {
        font-weight: 700;
        font-size: 22px;
        line-height: 1.3;
        color: $color__dark;
      }
    }
  }
}

// ============ discoverProducts-sec ============

.discoverProducts-sec {
  width: 100%;
  position: relative;
  padding-bottom: 100px;

  &:after {
    content: "";
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.32816876750700286) 35%,
        rgba(0, 0, 0, 1) 100%);
    width: 100%;
    height: 130px;
    top: -130px;
    position: absolute;
    left: 0;
    right: 0;
  }

  .discoverProducts-content-wrap {
    margin-top: 80px;

    @media screen and (max-width: 1199px) {
      margin-top: 50px;
    }

    .bottom-area {
      position: relative;
      padding: 42px 10px 0 0;
      width: 100%;

      .line-v {
        width: 1px;
        height: 100%;
        background-color: $color__darkGray;
        position: absolute;
        left: 0;
        top: 0;
      }

      .bottom-infoText {
        font-weight: 500;
        font-size: 14px;
        line-height: 1.3;
        padding-left: 20px;
        padding-bottom: 20px;
        padding-top: 8px;
        color: $color__darkGray;

        a {
          color: $color__pumpkin;
          text-decoration: underline;
          font-weight: 600;
          font-size: 14px;

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

      .comnStyle-swiper-button {
        margin-left: 50px;
      }
    }

    .discoverProducts-slider-holder {
      .discoverProductsSlider {
        padding-left: 80px;
        padding-right: 150px;
      }

      .discoverProduct-slide {
        padding-top: 180px;
        padding-bottom: 40px;

        @media screen and (max-width: 1199px) {
          padding-top: 215px;
        }

        .discoverProduct-image-container {
          width: 100%;

          .discoverProduct-image-holder {
            width: 100%;

            img {
              width: 200px;
              height: 215px;
              transition: all 0.5s ease-in-out;
              object-fit: contain;
            }
          }
        }

        .discoverProduct-slideInfo {
          padding: 0;
          display: block;
          position: absolute;
          left: 65%;
          top: 0;
          z-index: 1;
          visibility: hidden;
          opacity: 0;
          transition: all 0.5s ease-in-out;
          display: flex;
          align-items: center;
          width: 260px;

          @media screen and (max-width: 1199px) {
            left: 10%;
            top: 0;
          }

          .arrowSign-holder {
            width: 60px;
            height: 120px;
            flex-shrink: 0;
            clip-path: inset(0 0 100% 0);
            transition-delay: 0.2s;
            transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);

            @media screen and (max-width: 1199px) {
              width: 54px;
              height: 100px;
              flex-shrink: 0;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .info-content {
            width: auto;
            min-width: 0;
            flex: 1;
            padding-left: 15px;

            .discoverProduct-slideInfo-title {
              font-size: 30px;
              line-height: 1.4;
              font-weight: 700;
              color: $color__white;
              margin: 0;

              @media screen and (max-width: 1199px) {
                font-size: 26px;
              }
            }

            .discoverProduct-slideInfo-link {
              color: $color__pumpkin;
              font-size: 14px;
              font-style: normal;
              font-weight: 600;
              line-height: 1.3;
              text-decoration-line: underline;

              &:hover {
                text-decoration-line: none;
                color: $color__dodgerBlue;
              }
            }
          }
        }
      }

      @media (hover: hover) and (min-width: 1200px) {
        .discoverProduct-slide {
          &:hover {
            .discoverProduct-slideInfo {
              visibility: visible;
              opacity: 1;
              transition: all 0.5s ease;

              .arrowSign-holder {
                clip-path: inset(0 0 0 0);
              }
            }

            .discoverProduct-image-container {
              img {
                -webkit-transform: scale(1.5) translateZ(0);
                transform: scale(1.5) translateZ(0);
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
                transition: all 0.5s ease;
              }
            }
          }
        }
      }

      .swiper-slide {
        width: 203px;

        &.swiper-slide-active {
          @media screen and (max-width: 1199px) {
            .discoverProduct-slide {
              .discoverProduct-slideInfo {
                visibility: visible;
                opacity: 1;
                transition: opacity 0.5s ease;

                .arrowSign-holder {
                  clip-path: inset(0 0 0 0);
                }
              }

              .discoverProduct-image-container {
                img {
                  -webkit-transform: scale(1.5) translateZ(0);
                  transform: scale(1.5) translateZ(0);
                  -webkit-transform-origin: center bottom;
                  transform-origin: center bottom;
                  transition: all 0.5s ease;
                }
              }
            }
          }
        }
      }
    }
  }
}

.getInTouch-sec {
  width: 100%;
  padding: 100px 0 50px;

  @media screen and (max-width: 991px) {
    padding: 120px 0 50px;
  }

  &.blackBg {
    background-color: $color__black;

    .getInTouch-content-wrap {
      .getInTouch-content-holder {
        .headingText-holder {
          .headingText {
            color: $color__white;
          }
        }
      }
    }
  }

  .getInTouch-content-wrap {
    width: 100%;
    position: relative;

    .getInTouch-content-holder {
      border-radius: 5px;
      border: 1px solid var(--Dark-Gray, #ACACAC);
      padding: 20px 40px;
      width: 100%;

      @media screen and (max-width: 1199px) {
        padding: 20px 20px;
      }

      @media screen and (max-width: 991px) {
        padding: 50px 25px 20px;
      }

      .headingText-holder {
        max-width: 365px;

        .headingText {
          font-size: 20px;
          // color: $color__white;
          font-weight: 600;
          line-height: 1.5;
        }
      }

      .getInTouch-productImages-holder {
        width: 275px;

        @media screen and (max-width: 991px) {
          position: absolute;
          top: -46px;
          left: 0;
          right: 0;
          margin: auto;
        }

        .getInTouch-productImages {
          width: 100%;
          position: relative;
          display: flex;
          align-items: center;
          height: 42px;
          z-index: 2;

          .getInTouchProductImage {
            width: 118px;
            height: 140px;
            object-fit: contain;
            position: relative;
            opacity: 1;

            &.img2 {
              left: -55px;
            }

            &.img3 {
              left: -95px;
            }

            &.img4 {
              left: -160px;
            }
          }
        }
      }

    }
  }
}

.eDesign-sec {
  .edesignAccordionScroll {

    .eDesign-content-block {
      max-width: 100%;

      .comn-dscText-holder {
        max-width: 482px;

      }

      .eDesign-accordion {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        .accordion-item {
          width: 100%;
          border: 0;
          background: none;

          .accordion-header {
            .accordion-button {
              pointer-events: none;

              @media (max-width:991px) {
                pointer-events: all;

                &::before {
                  transition-delay: 0.4s;

                }
              }

              &::after {
                content: "+" !important;
              }

              &::before {
                height: 0;
              }

              @media (max-width:991px) {
                &.collapsed {
                  &::before {
                    height: 0;
                  }
                }

                &::before {
                  height: 100%;
                }

                &:not(.collapsed) {
                  &::after {
                    transform: rotateZ(-180deg) translateY(-14px);
                    content: "-" !important;
                  }
                }
              }

            }
          }

          .data {
            max-width: 482px;
            border-radius: 6px;
            background: #1c1c1c;

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

          .accordion-collapse {
            overflow: hidden;
            display: block;
            height: 0;
            transition: all 0.4s ease-in;

            @media (max-width:991px) {
              height: auto;

              &:not(.show) {
                display: none;
              }
            }

            .video-img-holder-mobile {
              display: none;

              @media (max-width:991px) {
                display: block;
              }
            }
          }

          .media {
            max-width: 590px;
            position: absolute;
            right: 0;
            top: -75px;
            opacity: 0.20;
            transition: all 0.5s ease;

            @media (max-width:1199px) {
              max-width: 440px;
            }

            @media (max-width:991px) {
              display: none;
            }



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

          }

          &.open {
            .accordion-collapse {
              height: 85px;

              .accordion-body {
                &::after {
                  height: 100%;
                  transition-delay: 0.3s;
                }
              }
            }

            .accordion-header {
              .accordion-button {
                &::after {
                  content: "-" !important;
                }

                &::before {
                  height: 100%;
                  transition-delay: 0.2s;
                }

              }
            }

            .media {
              opacity: 1;
            }

          }
        }
      }
    }
  }

  .edesign-responsive-media {
    position: relative;
    display: none;
    // background-image: url(https://www.rubberkingtyres.com/wp-content/uploads/2023/05/RubberKing_Cut-Section-1.png);
    background-repeat: no-repeat;
    background-size: 318px 275px;
    background-position: center;
    width: 100%;
    max-width: 460px;
    height: 395px;
    margin: 30px auto 0;

    @media (max-width:991px) {
      display: block;
    }

    @media (max-width:767px) {
      max-width: 318px;
      height: 275px;
    }

    .item {
      opacity: 0.2;
      visibility: visible;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      transition: all 0.4s ease;

      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        object-position: top;
      }

      &.active-show {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .e-design-learn-more {
    margin-top: 280px;
    max-width: 630px;
    margin-left: auto;

    @media (max-width:1199px) {
      margin-top: 140px;
    }

    @media (max-width:991px) {
      margin-top: 0;
    }
  }
}

h2.headingText {
    color: white;
}