:root {
  --landing-purple: #a472fe;
  --landing-lgreen: #9ad3cc;
  --landing-blue: #3595f1;
  --landing-orange: #ff970a;
  --landing-grad: linear-gradient(
    130deg,
    rgba(53, 149, 241, 0.9),
    rgba(154, 211, 204, 0.9)
  );
  --landing-grad-green: linear-gradient(130deg, #a472fe, #3595f1);
}

* {
  font-family: "Spartan", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-family: "Livvic", sans-serif !important;
}
.lni {
    font: normal normal normal 1em/1 'LineIcons'!important;
}

.purple-bg {
  background: var(--landing-purple) !important;
}

.blue-bg {
  background: var(--landing-blue) !important;
}

.light-green {
  background: var(--landing-lgreen) !important;
}

.lpurple-color {
  color: var(--landing-purple) !important;
}

.light-green-color {
  color: #9ad3cc !important;
}

#landing-counter-section h2 {
  color: var(--landing-lgreen);
  margin-top: 20px;
  font-size: 3.5rem;
}

#landing-counter-section h2 span {
  color: var(--white);
  font-weight: 400;
  margin-top: 20px;
}

#landing-hero-section {
  width: 100%;
  height: 600px;
  background: var(--landing-grad), url("../img/hero/hero-banner.png");
  background-size: cover;
  background-position: center;
  position: relative;
}
.herotext {
  text-align: left;
  font-size: 18px !important;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5 !important;
  margin: 20px 0;
}
#landing-hero-section .section-title h2 {
  padding-bottom: 0;
  margin-bottom: 0;
}
/* #landing-hero-section::before{
    content: '';
    width: 100%;
    height: 100%;
    background: var(--landing-grad);
    opacity: 0.9;
    position: absolute;
} */

.svg-wrapper {
  width: 100%;
  position: absolute;
  bottom: -80px;
}

.svg-wrapper img {
  width: 100%;
}

.landing-logo-wrapper {
  height: 50px;
  margin-top: 30px;
  position: absolute;
}

.landing-logo-wrapper img {
  height: 100%;
  width: 200px;
}

#landing-hero-section .section-title h2 span {
  color: var(--orange);
  text-transform: capitalize;
}

#landing-hero-section .section-title h2,
#landing-hero-section .section-title h2 span {
  font-size: 45px;
  line-height: 60px;
  word-spacing: 5px;
}

#landing-hero-section .section-title h4 {
  line-height: 50px;
  font-size: 22px;
}

.hero-cta {
  width: 100%;
  text-align: left;
  margin-top: 20px;
}

.form-wrapper form * {
  width: 100%;
}

.form-wrapper form input,
.form-wrapper textarea {
  margin-bottom: 10px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  color: #fff;
  resize: none;
}

.form-wrapper form input::placeholder,
.form-wrapper textarea::placeholder {
  color: var(--white);
}

.form-wrapper {
  padding: 40px 35px;
  background: var(--landing-purple);
  border-radius: 30px;
  width: 70%;
  /* margin: 0 auto; */
}

.form-wrapper .button .btn {
  width: auto;
  background: #fff;
  color: var(--landing-purple);
  padding: 15px 50px;
  font-weight: 700;
}

#landing-counter-section .icon-a {
  background: transparent;
}

#landing-page-services .card {
  width: 100%;
  border-radius: 30px;
  padding-bottom: 0;
  margin: 0;
}

#landing-page-services a {
  width: 100%;
}

#landing-page-services a {
  width: 100%;
}

#landing-page-services .service-card-wraaper a span {
  width: 100%;
  background: var(--landing-blue);
  margin: 0;
  padding: 17px 20px;
  color: #fff;
  border-radius: 30px;
  border-radius: 30px;
  text-align: center;
  font-size: 700;
}

#landing-page-services .card .iconimg {
  display: none;
}

#landing-page-services .service-name h3 {
  text-align: left;
  padding: 0 40px;
}
.service-img-wrapper {
  width: 100%;
  /* float: right; */
  height: 200px;
  overflow: hidden;
}

.service-img-wrapper img {
  float: right;
  /* width: 70%; */
  /* width: 72%; */
  height: 100%;
  object-fit: contain;
}

.service-img-wrapper:last-child img {
  /* float: left; */
}

.service-name {
  margin-bottom: 0;
}

#landing-page-services .cir1 {
  background: var(--landing-lgreen);
}

#landing-page-services .cir2 {
  background: var(--white);
}

#landing-page-services .cir3 {
  background: var(--landing-purple);
}

.service-name .text-dark {
  color: #000000 !important;
}

.white-bg {
  background: var(--white);
}
#landing-page-banner p{
    font-size: 14px;
    margin-bottom: 18px;
    font-weight: 500;
}
#landing-page-banner .orangebtn {
  color: var(--landing-purple);
}
/*#landing-page-clientele{*/
/*background-color: #f6f9fc;*/
/*}*/
#landing-page-clientele .brand-list li {
  flex-basis: 25%;
}

#landing-page-clientele .brand-list li:nth-child(3) a {
  border-color: #eee;
}

#landing-about-section .home-ss-card {
  border-radius: 30px;
  background: var(--landing-purple);
  color: #fff;
  height: 220px;
  margin-bottom: 25px;
  position: relative;
}
#landing-about-section .home-ss-card li {
  font-size: 12px;
}
#landing-about-section .home-ss-card h3 a {
  color: #fff;
  font-weight: 700;
  margin: 0;
  margin-bottom: 15px;
  font-size: 14px;
}

#landing-about-section .single-service:hover::before {
  display: none;
}

#landing-about-section ul {
  list-style: disc;
}

#landing-about-section .home-ss-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#landing-about-section {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  /*margin-top: 100px;*/
  margin-bottom: 100px;
}

/*#landing-about-section::before{*/
/*    content:'';*/
/*    width: 80%;*/
/*    height: 100%;*/
/*    background: var(--landing-lgreen);*/
/*    position: absolute;*/

/*}*/

#landing-about-section .enuire-btn {
  padding: 10px 60px;
  background: var(--landing-purple);
  border-radius: 30px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 30px;
}

.landing-page .section-title span {
  font-size: 33px;
  color: var(--landing-orange);
  text-transform: capitalize!important;
}

.landing-page .section-title h2:before {
  display: none;
}

.read-less-btn {
  position: relative;
  z-index: 2;
}

.service-card-wraaper a:hover .read-more-btn {
  display: none;
}

.read-less-wrapper {
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 99;
  border-radius: 30px 30px 0 0;
}

.service-card-wraaper .read-less-wrapper {
  display: none;
}

.service-card-wraaper a .read-less-btn {
  background: var(--landing-lgreen) !important;
  border-radius: 0 0 30px 30px;
}

.service-card-wraaper a:hover .read-less-wrapper {
  display: block;
  z-index: 99;
}

.service-hover-text {
  width: 100%;
  height: 100%;
  background-color: var(--landing-blue);
  padding: 17px 30px;
  border-radius: 30px 30px 0 0;
  position: absolute;
  top: calc(100% - 60px);
  transition: top 0.6s ease-in;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.service-card-wraaper {
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.service-card-wraaper a {
  transition: top 0.6s ease-in;
  overflow: hidden;
  /* position: relative; */
  /* z-index: 9; */
}

.service-card-wraaper a:hover .service-hover-text {
  top: 0%;
  transition: top 0.6s ease-in;
  opacity: 1;
}

#landing-hero-section .form-group {
  margin-bottom: 0 !important;
}

.service-hover-text p {
    text-align: start;
}

/* ===========thankyou css start========= */

#thankyou-section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bluegrad);
}

#thankyou-section h1 {
  font-size: 5rem;
}

#thankyou-section p {
  font-size: 1.5rem;
}
#landing-page-banner .orangebtn:hover {
  color: white !important;
}

#landing-hero-section .section-title h2,
#landing-hero-section .section-title h2 span {
  font-family: "Livvic", sans-serif !important;
}
#contact-us {
  background-color: #f6f9fc;
}
.form-wrapper {
  background: var(--landing-grad-green);
}
.errormsg {
  color: #000;
  text-transform: none;
  font-size: 11px;
}
.navbar-area {
  position: relative;
}
#top-tech-section {
  background: #f5f8fb;
}
#landing-page-banner .orangebtn{
    text-transform: capitalize!important;
    background: var(--orange)!important;
    color: #ffffff!important;
}
.landing-page-banner .button a{
    background: var(--orange);
}
/* ===========thankyou css end========= */

@media (max-width: 500px) {
  #landing-hero-section {
    height: auto;
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover!important;
  }
  #landing-about-section .enuire-btn{
      margin-bottom:30px;
  }
#landing-hero-section .section-title{
    height: 300px!important;
}
#landing-hero-section .section-title .herotext {
    font-size: 14px !important;
}
  .section-heading {
    margin-bottom: 20px !important;
  }

  .landing-logo-wrapper img {
    width: 150px;
  }

  .svg-wrapper {
    display: none;
  }

  #landing-hero-section .section-title h2,
  #landing-hero-section .section-title h2 span {
    font-size: 24px;
    line-height: 35px;
    margin-bottom: 0;
  }

  .landing-logo-wrapper {
    margin-top: 0px;
    margin-bottom: 20px;
    position: relative;
  }

  #landing-hero-section .section-title h4 {
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
  }

  #landing-counter-section h2 {
    font-size: 2.5rem;
  }

  #landing-about-section::before {
    width: 100%;
  }

  #landing-about-section .home-ss-card {
    top: 0;
    margin: 10px 0;
  }

  #landing-about-section .container {
    padding: 50px 20px;
  }

  .section-heading {
    font-size: 25px !important;
  }
  .section-heading span {
    font-size: 25px !important;
  }

  #landing-page-clientele .brand-list li {
    flex-basis: 50%;
  }
    #landing-hero-section .form-wrapper {
    padding: 30px 20px;
    width: 100%;
    margin-bottom: 30px;
  }

  #landing-page-services .mb-80 {
    margin-bottom: 40px;
  }

  #landing-page-services {
    padding-bottom: 0 !important;
  }

  #landing-about-section {
    margin-bottom: 0;
  }

  #landing-page-clientele {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #top-tech-section .tech-icon-capt p {
    font-size: 16px;
  }

  #top-tech-section {
    margin-bottom: 0 !important;
    background: #f5f8fb;
  }
  .single-service{
      padding: 30px;
  }
  #landing-about-section .home-ss-card{
      height: 180px!important;
  }
  .countersection{
      margin:0;
  }
}


/*Custom autofill CSS*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #ffffff1a;
}