/* @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); */

.hero-banner-main-wrapper .hero-banner-inner-block {
  position: relative;
}

.hero-banner-inner-block .icon-1 {
  position: absolute;
  width: 60px !important;
  height: 60px !important;
  top: 8%;
  right: 14%;
}

.hero-banner-inner-block .icon-2 {
  position: absolute;
  bottom: 10%;
  left: 6%;
  width: 108px !important;
  height: 108px !important;
}

.hero-banner-inner-block .icon-3 {
  position: absolute;
  bottom: -8%;
  right: 14%;
  width: 86px !important;
  height: 86px !important;
}

.hero-banner-inner-block .icon-4 {
  position: absolute;
  bottom: -36%;
  left: 29%;
  width: 86px !important;
  height: 86px !important;
}

.form-main-wrapper .form-label {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #365649;
}

.form-main-wrapper .form-group {
  margin: 0 0 16px 0;
}

.form-main-wrapper .form-control {
  border: 1px solid #e0e0e0;
  font-size: 18px;
  line-height: 100%;
  color: rgba(100, 101, 100, 0.5);
  padding: 20px 30px;
  border-radius: 24px;
}

.form-main-wrapper .form-control::placeholder {
  color: rgba(100, 101, 100, 0.5);
}

.form-main-wrapper textarea {
  min-height: 121px;
  resize: none;
}

.zi-contact-form .wpcf7-not-valid-tip,
.zi-contact-form .wpcf7-response-output {
  font-family: "Manrope";
}
.zi-contact-form .wpcf7-response-output {
  border: 0px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zi-contact-form.invalid .wpcf7-response-output,
.zi-contact-form.failed .wpcf7-response-output {
  color: #dc3232;
}
.zi-contact-form.sent .wpcf7-response-output {
  color: #0fbd27;
}
.zi-contact-form .wpcf7-spinner {
  margin-top: 7px;
  position: absolute;
}
.form-main-wrapper .submit-btn {
  padding: 6px 4px 6px 18px;
  font-family: "Inter";
  font-weight: 500;
  border-radius: 50px;
  background: #365649;
  border-color: #365649;
  color: #fff;
  column-gap: 40px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* important for animation */
  z-index: 1;
}

.zi-contact-form .form-main-wrapper .submit-button-icon {
  background: #fff;
  height: 44px;
  width: 44px;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  z-index: 1;
}

.form-main-wrapper .submit-button-icon svg {
  transition: 0.4s;
}

.form-main-wrapper .submit-btn:hover {
  color: #fff;
  background: #365649;
}

.form-main-wrapper .submit-btn:hover .submit-button-icon svg {
  transform: rotate(45deg);
}

.form-main-wrapper .submit-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border-color: #222725;
  background: #222725;

  /* z-index: -1; */
  z-index: -1;
  transform-origin: left;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transition: transform 0.5s ease;
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  border-radius: inherit;
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  -ms-border-radius: inherit;
  -o-border-radius: inherit;
}
.form-main-wrapper .submit-btn:hover::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
}


.social-link {
    margin: 0 40px 40px 0;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
}
.social-link a{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: max-content;
    margin-left: auto;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    border: 1px solid transparent;
}
.social-link a:hover {

  transform: scale(0.9);
  -webkit-transform: scale(0.);
  -moz-transform: scale(0.);
  -ms-transform: scale(0.);
  -o-transform: scale(0.);
}
.social-link a img {
    width: 56px;
    height: 56px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.hero-banner-inner-block .service-banner-icon1 { height: 90px !important; width: 90px !important; top: -22%; bottom: unset; }
.hero-banner-inner-block .service-banner-icon2 { bottom: -40%; right: 15%; }

@media (max-width: 1366px) {
  .hero-banner-inner-block .service-banner-icon1 { top: -20%; bottom: unset; }
}

@media (max-width: 1200px) {
  .hero-banner-inner-block .icon-3 {
    right: 16%;
    width: 70px !important;
    height: 70px !important;
  }

  .hero-banner-inner-block .icon-2 {
    bottom: 20%;
    left: 5%;
    width: 80px !important;
    height: 80px !important;
  }

  .hero-banner-inner-block .icon-4 {
    bottom: -22%;
    left: 29%;
    width: 70px !important;
    height: 70px !important;
  }

  .form-main-wrapper .form-control {
    padding: 10px 12px;
    border-radius: 15px;
    font-size: 17px;
  }
  .zi-contact-form .form-main-wrapper .submit-button-icon {
    height: 36px;
    width: 36px;
  }
  .form-main-wrapper .submit-btn {
    column-gap: 23px;
  }
  .form-main-wrapper .form-label {
    font-size: 16px;
    margin-bottom: 7px;
  }

  .social-link a img {
    width: 45px;
    height: 45px;
  }
  .social-link {
    margin: 0 20px 20px 0;
  }

  .hero-banner-inner-block .service-banner-icon1 { top: -15%; bottom: unset; }
  .hero-banner-inner-block .service-banner-icon2 { bottom: -30%; right: 10%; }

}

@media (max-width: 1024px) {
  .hero-banner-inner-block .icon-1 {
    width: 54px !important;
    height: 54px !important;
    top: 6%;
    right: 10%;
  }

  .hero-banner-inner-block .icon-2 {
    bottom: 56%;
    left: 2%;
    width: 70px !important;
    height: 70px !important;
  }

  .hero-banner-inner-block .icon-3 {
    right: 16%;
    width: 60px !important;
    height: 60px !important;
  }

  .hero-banner-inner-block .icon-4 {
    bottom: -16%;
    left: 20%;
    width: 60px !important;
    height: 60px !important;
  }

  .social-whatsapp {
    width:53px !important;
    border-radius: 0 10px 0 0 !important;
  }
      .social-link a {
      padding: 7px;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
}
  .social-link a img {
    width: 45px;
    height: 45px;
  }
  .social-link {
    margin: 0 20px 20px 0;
  }

  .hero-banner-inner-block .service-banner-icon2 { bottom: -30%; right: 10%; }
}
@media (max-width: 991px) { 
    .social-link a img {
    width: 35px;
    height: 35px;
  }
  .social-link {
    margin: 0 20px 20px 0;
  }

  .hero-banner-inner-block .service-banner-icon1 { top: -10%; bottom: unset; }
  .hero-banner-inner-block .service-banner-icon2 { bottom: -30%; right: 10%; }
}
@media (max-width: 768px) {
  .hero-banner-inner-block .icon-1 {
    width: 48px !important;
    height: 48px !important;
    top: 6%;
    right: 2%;
    padding: 12px !important;
  }

  .hero-banner-inner-block .icon-2 {
    bottom: 54%;
    left: 0%;
    width: 60px !important;
    height: 60px !important;
    padding: 12px !important;
  }

  .hero-banner-inner-block .icon-4 {
    bottom: -15%;
    left: 15%;
    width: 50px !important;
    height: 50px !important;
    padding: 12px !important;
  }

  .hero-banner-inner-block .icon-3 {
    right: 12%;
    width: 50px !important;
    height: 50px !important;
    padding: 12px !important;
  }

      .social-link a {
      padding: 5px;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
}
  .social-link a img {
    width: 30px;
    height: 30px;
  }
  .social-link {
    margin: 0 15px 15px 0;
  }

  .hero-banner-inner-block .service-banner-icon2 { bottom: -30%; right: 5%; }

}

@media (max-width: 575px) {
  .hero-banner-inner-block .icon-1 {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-banner-inner-block .icon-2 {
    bottom: 54%;
    left: -2%;
    width: 50px !important;
    height: 50px !important;
  }

  .hero-banner-inner-block .icon-4 {
    bottom: -8%;
    left: 3%;
    width: 45px !important;
    height: 45px !important;
  }

  .hero-banner-inner-block .icon-3 {
    right: 5%;
    width: 45px !important;
    height: 45px !important;
  }

  .hero-banner-inner-block .service-banner-icon1 { top: 20%; left: -2%; bottom: unset; }
  .hero-banner-inner-block .service-banner-icon2 { bottom: -20%; right: 0; top: unset; }

}