@import url(./styles.css);
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
@use "sass:math";
@keyframes scaleAnimation {
  0% {
    transform: translate(-50%, -50%) scale(1); }
  50% {
    transform: translate(-50%, -50%) scale(1.2); }
  100% {
    transform: translate(-50%, -50%) scale(1); } }
body:not(i), *:not(i) {
  font-family: 'Manrope', sans-serif !important; }

.btn-get-started,
.custom-btn {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.3s;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  background-color: transparent;
  border: unset;
  z-index: 1;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out; }
  .btn-get-started::before,
  .custom-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 35px #4045D2;
    transform: scale3d(0.9, 0.9, 1);
    transition: box-shadow 0.3s, transform 0.3s; }
  .btn-get-started:hover,
  .custom-btn:hover {
    color: #EA1D24; }
    .btn-get-started:hover::before,
    .custom-btn:hover::before {
      box-shadow: inset 0 0 0 2px #EA1D24;
      transform: scale3d(1, 1, 1); }
  .btn-get-started.white,
  .custom-btn.white {
    color: #ffffff; }
    .btn-get-started.white:hover,
    .custom-btn.white:hover {
      color: #ffffff; }
      .btn-get-started.white:hover::before,
      .custom-btn.white:hover::before {
        box-shadow: inset 0 0 0 2px #ffffff;
        transform: scale3d(1, 1, 1); }

.footer-social-icon a i {
  overflow: hidden;
  position: relative;
  background-color: transparent;
  border: unset;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out; }
  .footer-social-icon a i::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 35px #4045D2;
    transform: scale3d(0.9, 0.9, 1);
    transition: box-shadow 0.3s, transform 0.3s; }
  .footer-social-icon a i:hover {
    color: #EA1D24; }
    .footer-social-icon a i:hover::after {
      box-shadow: inset 0 0 0 2px #EA1D24;
      transform: scale3d(1, 1, 1); }

.top-icon-box .icon-box {
  position: relative;
  overflow: hidden;
  background: url(../images/cta-bg-semi.png) 50% 50%;
  padding: 50px 30px;
  border-radius: 15px;
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 50px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .top-icon-box .icon-box .title a {
    color: #4045D2; }
  .top-icon-box .icon-box .icon {
    margin-bottom: 20px;
    padding-top: 10px;
    width: 60px;
    display: inline-block;
    font-size: 77px;
    line-height: 1;
    fill: #4045D2;
    color: rgba(0, 0, 0, 0.6);
    background: radial-gradient(circle, #4045D2 0%, #EA1D24 100%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #ffffff; }
  .top-icon-box .icon-box h4 a,
  .top-icon-box .icon-box p {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
  .top-icon-box .icon-box svg,
  .top-icon-box .icon-box h4,
  .top-icon-box .icon-box p {
    position: relative;
    z-index: 1; }
  .top-icon-box .icon-box img {
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    filter: brightness(0) saturate(100%) invert(33%) sepia(22%) saturate(2971%) hue-rotate(161deg) brightness(88%) contrast(87%); }
  .top-icon-box .icon-box:hover {
    background: url(../images/cta-bg-semi.png) 55% 55%; }
    .top-icon-box .icon-box:hover img {
      position: relative;
      z-index: 10;
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7487%) hue-rotate(53deg) brightness(100%) contrast(95%); }
    .top-icon-box .icon-box:hover::before {
      opacity: 1;
      transform: scale(4) rotate(180deg); }
  .top-icon-box .icon-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    background: linear-gradient(180deg, rgba(16, 105, 137, 0.926) 0%, rgba(36, 178, 229, 0.828) 100%); }
.top-icon-box .matchHeight {
  display: flex; }
  .top-icon-box .matchHeight .icon-box {
    flex-grow: 1; }

.p-60 {
  padding: 60px 0; }

.mb-20 {
  margin-bottom: 25px; }

.hero .caption.image-wrapper {
  position: relative; }
  .hero .caption.image-wrapper::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: #75d4f74e;
    z-index: 0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scaleAnimation 10s linear infinite; }
  .hero .caption.image-wrapper img {
    position: relative;
    z-index: 10; }
.hero .caption:hover img {
  transform: skewX(20%); }

/**************************************
  Contact
 **************************************/
.contact-information-box-3 {
  position: relative;
  overflow: hidden;
  background: url(../images/cta-bg.jpg) center center;
  padding: 25px 20px;
  border-radius: 15px;
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .contact-information-box-3 .single-contact-info-box {
    position: relative;
    z-index: 1;
    padding: 10px 10px;
    display: block;
    border-radius: 3px;
    text-align: left;
    margin-bottom: 10px;
    overflow: hidden; }
    .contact-information-box-3 .single-contact-info-box .contact-info-bg-icon {
      color: #f44336;
      opacity: 0.2;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -25px;
      margin: 0 auto;
      z-index: -1;
      -webkit-transition: 0.5s;
      transition: 0.5s; }
      .contact-information-box-3 .single-contact-info-box .contact-info-bg-icon i {
        font-size: 100px; }
  .contact-information-box-3 .contact-info {
    position: relative;
    z-index: 1; }
    .contact-information-box-3 .contact-info h6 {
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      margin-bottom: 7px;
      text-transform: capitalize; }
    .contact-information-box-3 .contact-info p {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      margin: 0; }
    .contact-information-box-3 .contact-info .link {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .contact-information-box-3 .contact-info .link a {
        text-decoration: underline;
        color: #ffffff;
        font-weight: 400;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
      .contact-information-box-3 .contact-info .link:hover {
        color: #222222; }
        .contact-information-box-3 .contact-info .link:hover a {
          color: #222222; }
  .contact-information-box-3:hover {
    background: url(../images/cta-bg.jpg) 50% 55%; }
    .contact-information-box-3:hover::before {
      transform: scale(2) skewX(40deg); }
  .contact-information-box-3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(180deg, rgba(16, 105, 137, 0.926) 0%, rgba(36, 178, 229, 0.828) 100%); }

/**************************************
  FAQ
 **************************************/
.faq button::after {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

@media all and (max-width: 767px) {
  .hero .hero-flipped {
    flex-direction: column-reverse; }
  .hero .caption {
    height: 300px;
    padding-top: 0px; }
    .hero .caption.image-wrapper::after {
      width: 200px;
      height: 200px; } }

/*# sourceMappingURL=KNS.css.map */
