.form-area .form-thumb:before,
.form-area .form-thumb:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%
}

.form-area .form-thumb:before {
    background: var(--bs-secondary);
    width: 408px;
    height: 408px;
    top: -10%;
    right: -30%;
}

.form-area .form-thumb:after {
    background: var(--bs-primary);
    width: 270px;
    height: 270px;
    left: -10%;
    bottom: -77px;
}

.smile-bar:before,
.smile-bar:after {
    content: "";
    background-image: url("../media/logos/smile-color.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
}

.smile-bar:before {
    width: 150px;
    height: 150px;
    top: 15%;
    right: -10%;
}

.smile-bar:after {
    width: 150px;
    height: 150px;
    left: -5%;
    bottom: 15%;
    opacity: 0.3;
}

.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media (min-width: 1399.98px) {
    .py-lg-150 {
      padding-top: 100px;
      padding-bottom: 100px;
    }
    
    .smile-bar:before {
        width: 408px;
        height: 408px;
        top: 0;
        right: -10%;
    }

    .smile-bar:after {
        width: 270px;
        height: 270px;
        left: -5%;
        bottom: 0;
        opacity: 0.3;
    }

}

@media (min-width: 1699.98px) {
    .py-lg-150 {
      padding-top: 150px;
      padding-bottom: 150px;
    }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated-element {
  opacity: 0;
}

.animate-fade-in-up {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.animate-fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}