/* link color */
/* :root {
  --e-global-color-primary: #ffffff;
  --e-global-color-secondary: #868686;
  --e-global-color-text: #a8a8a8;
  --e-global-color-accent: #3858e900;
  --e-global-color-57ef3de: #3858e9;
  --e-global-color-929f898: #000000;
  --text-color: #fff;
  --brand-color: #3858e9;
} */

.site-link a {
  color: #a8a8a8;
}

.site-link a:hover {
  color: #3858e9;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #3858e9;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #333333;
}

/* -------------------------- Image filter -------------------------- */

@media (max-width: 991px) {
  .elementor-widget-image {
    img {
      filter: none !important;
    }
  }
}

/* -------------------------- Site button -------------------------- */

.site__btn {
  a {
    position: relative;
    transition: all 0.2s ease;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      display: block;
      border-radius: 50px;
      background: #3858e9;
      width: 45px;
      height: 45px;
      transition: all 0.3s ease;
    }

    span {
      position: relative;
      align-items: center;
    }

    .elementor-button-icon svg {
      transform: translateX(-5px);
      transition: all 0.3s ease;
    }

    &:hover {
      text-decoration: none;

      .elementor-button-icon svg {
        transform: translateX(0px) !important;
      }

      &:hover:before {
        width: 100%;
        background: #3858e9;
      }
    }
  }

  /* -------------------------- connect with us btn -------------------------- */

  &.send-btn {
    display: inline-block;
    position: relative;

    p {
      position: relative;
      margin: 0;
      margin-top: 25px;
      transition: all 0.2s ease;
      padding: 8px 16px;
      display: flex;
      place-items: center;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        display: block;
        border-radius: 50px;
        background: #3858e9;
        width: 45px;
        height: 45px;
        transition: all 0.3s ease;
      }

      input[type="submit"] {
        border: none !important;
        color: #fff !important;
        font-family: "Outfit";
        font-size: 16px;
        line-height: 27px;
        font-weight: 400;
        z-index: 3;
        position: relative;
        text-transform: uppercase;
        padding: 8px 18px 8px 0px !important;
      }

      input[type="submit"]:focus-visible {
        border: none !important;
        outline: none !important;
      }

      .elementor-button-icon {
        position: relative;

        svg {
          transform: translateX(-5px);
          transition: all 0.3s ease;
        }
      }

      &:hover {
        text-decoration: none;

        .elementor-button-icon svg {
          transform: translateX(0px);
        }

        &:hover:before {
          width: 100%;
          background: #3858e9;
        }
      }

      @media (max-width: 767px) {
        margin-top: 24px;
      }
    }

    .wpcf7-spinner {
      position: absolute;
      @media (max-width: 767px) {
        display: block;
        margin: 0 auto;
      }
    }
  }
}

/* -------------------------- back button css -------------------------- */

.back__btn {
  a {
    &::before {
      content: "" !important;
      position: absolute !important;
      right: 0 !important;
      left: auto !important;
    }
    .elementor-button-icon svg {
      transform: translatex(5px) !important;
    }
  }
}

/* ---------------------lottie icon style----------------- */

.icon-style svg path {
  fill: #fff;
  stroke: #fff;
}
.icon-style:hover svg path {
  fill: #3858e9 !important;
  stroke: #3858e9 !important;
}

/* ---------------------Home page lottie icon style------------- */

.industry-icon svg path {
  fill: #fff !important;
}
.industry-icon:hover svg path {
  fill: #3858e9 !important;
}

/* -------------------------- 2nd style btn -------------------------- */
.site__animated--btn {
  a {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0%;
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #ffffff;
      transition: all 0.8s ease;
    }

    &:hover {
      .elementor-button-text {
        background-position: 0 100%;
      }
    }

    &:hover:before {
      left: 100%;
      background-color: #3858e9;
    }

    .elementor-button-text {
      position: relative;
      overflow: hidden;
      background: linear-gradient(to right, #3858e9, #3858e9 50%, #ffffff 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 100%;
      transition: background-position 0.9s ease;
    }
  }
}