:root {
  --blue: #2966CC;
  --cta: #ffb50d;
  --white: white;
  --black: #000000;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.8s ease-out forwards;
}

.first-section-header,
.second-section-header,
.faq-first-header,
.faq-second-header,
.faq-third-header,
.fullservice-header,
.features-first-heading,
.features-second-heading,
.communication-header,
.form-header,
.hero-heading {
  opacity: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
}

button, input, textarea {
  border: none;
  font-family: "Outfit", sans-serif;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1240px;
  padding: 0 52px;
  display: grid;
  margin: auto;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  grid-template-rows: auto;
  column-gap: 32px;
  grid-template-areas:
  "nav nav nav nav nav nav nav nav nav nav nav nav"
  "hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading hero-heading"
  "hero-text hero-text hero-text hero-text hero-text hero-text hero-text hero-text hero-text hero-text hero-text hero-text"
  "hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons hero-buttons"
  "cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle cta-circle"
  "first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header first-section-header"
  "first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about first-section-about"
  "about-container about-container about-container about-container about-container about-container about-container about-container about-container about-container about-container about-container"
  "embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag embedsocial-hashtag"
  "fullservice fullservice fullservice fullservice fullservice fullservice fullservice fullservice fullservice fullservice fullservice fullservice"
  "features features features features features features features features features features features features"
  "portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio"
  "communication communication communication communication communication communication communication communication communication communication communication communication"
  "stats-container stats-container stats-container stats-container stats-container stats-container stats-container stats-container stats-container stats-container stats-container stats-container"
  "pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container pricing-heading-container"
  "pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards pricing-cards"
  "faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header faq-first-header"
  "faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header faq-second-header"
  "faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header faq-third-header"
  "faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards"
  "faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards"
  "faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards faq-cards"
  "form-header form-header form-header form-header form-header form-header form-header form-header form-header form-header form-header form-header"
  "form-text form-text form-text form-text form-text form-text form-text form-text form-text form-text form-text form-text"
  "form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div form-contact-div"
  "form form form form form form form form form form form form"
  "footer footer footer footer footer footer footer footer footer footer footer footer"
}

.hero-background {
  position: absolute;
  width: 100vw;
  height: 895px;
  z-index: -1;
  border-radius: 0 0 15vw 15vw;
  object-fit: cover;
  filter: brightness(0.4);
}

.nav-background {
  position: fixed;
  background-color: var(--black);
  width: 100vw;
  top: 0;
  height: 107px;
  z-index: 2;
  transition: ease-in-out 0.3s;
  transform: translateY(-100%);
}

nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--white);
  top: 0;
  height: 107px;
  width: 100%;
  z-index: 2;
  transition: ease-in-out 0.3s;
}

.nav-logo {
  height: 57px;
  margin-right: 20px;
}

.nav-logo:hover {
  cursor: pointer;
}

.nav-logo-text {
  margin-right: auto;
  max-height: 40px;
}

.nav-logo-text:hover {
  cursor: pointer;
}

.call-sticky {
  display: none;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 70px;
  background-color: black;
  opacity: 80%;
  color: white;
  justify-content: center;
  align-content: center;
  text-align: center;
  z-index: 5;
}

.call-sticky a {
  font-size: 21px;
  text-decoration: underline var(--cta);
}

.call-sticky img {
    height: 30px;
    margin-right: 5px;
  transform: translateY(5px);
}

.nav-ul {
  list-style-type: none;
  display: flex;
  color: var(--white);
  padding: 0;
  height: 107px;
  width: max-content;
  gap: 50px;
}

.nav-ul li {
  display: flex;
  flex: 1;
  flex-basis: content;
  align-items: center;
  line-height: 1.6em;
  justify-content: right;
}

.nav-ul li:hover {
  color: #c5c5c5;
  cursor: pointer;
}

.li-call:nth-child(1):hover {
  color: white;
  cursor: default;
}

.li-call::after {
  position: absolute;
  content: "";
  width: 155px;
  margin: auto;
  height: 2px;
  transform: translateY(15px);
  background-color: var(--cta);
  transition: all ease-in-out 0.4s;
  opacity: 1;
}

.nav-hamburger {
  display: none;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.nav-hamburger input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

.nav-hamburger span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: var(--white);
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  opacity 0.55s ease;
}

.nav-hamburger span:first-child
{
  transform-origin: 0 0;
}

.nav-hamburger span:nth-last-child(2)
{
  transform-origin: 0 100%;
}

.nav-hamburger input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--white);
}

.nav-hamburger input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.nav-hamburger input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

.menu
{
  display: none;
  position: absolute;
  width: 150px;
  margin-top: -90px;
  right: -100px;
  padding: 100px 0 40px;
  background: black;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0 0;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  border-radius: 0 0 0 10px;
}

.menu li
{
  padding: 10px 0;
  color: var(--white);
  text-align: right;
  margin-right: 50px;
  font-size: 0.9rem;
}

.menu li:hover {
  color: #c5c5c5;
  cursor: pointer;
}

.nav-hamburger input:checked ~ ul
{
  transform: translateX(-50%);
}

.nav-hamburger input:checked ~ .menu
{
  display: block;
}

.hero-heading {
  grid-area: hero-heading;
  justify-self: center;
  text-align: center;
  font-size: 5.2rem;
  font-weight: 600;
  line-height: 100%;
  color: var(--white);
  margin: 172px 0 0;
  max-width: 950px;
}

.hero-heading::after {
  content: "";
  position: absolute;
  height: 30px;
  background-repeat: no-repeat;
  width: 358px;
  transform: translate(-100%, 300%);
  background-image: url("compressed/Yellow-Underline.webp");
}

.hero-text {
  grid-area: hero-text;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--white);
  margin: 38px 0 0;
  line-height: 1.6em;
}

.hero-buttons {
  grid-area: hero-buttons;
  width: 430px;
  display: flex;
  justify-self: center;
  justify-content: space-between;
}

.cta-hero {
  grid-area: cta-hero;
  border-radius: 20px;
  background-color: var(--cta);
  color: black;
  font-size: 1.25rem;
  height: 72px;
  width: 210px;
  font-weight: 500;
  justify-self: right;
  line-height: 1.6em;
  margin-top: 91px;
}

.cta-hero:hover {
  background-color: #ffdf00;
  cursor: pointer;
}

.services-hero {
  grid-area: services-hero;
  border-radius: 20px;
  font-size: 1.25rem;
  background-color: transparent;
  color: var(--white);
  width: 210px;
  height: 72px;
  font-weight: 300;
  justify-self: left;
  line-height: 1.6em;
  margin-top: 91px;
}

.services-hero:hover {
  background-color: var(--white);
  color: black;
  cursor: pointer;
  font-weight: 400;
}

.cta-circle {
  grid-area: cta-circle;
  position: relative;
  text-align: center;
  align-content: center;
  margin: 200px auto 0;
  font-size: 4rem;
  font-weight: 200;
  height: 97px;
  width: 97px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid lightgray;
  color: var(--blue);
  user-select: none;
}

.cta-circle:hover {
  color: #d7a520;
  cursor: pointer;
}

.first-section-header {
  grid-area: first-section-header;
  font-size: 2.6rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.6em;
  margin: 85px 0 0;
}

.first-section-header::after {
  content: "";
  position: absolute;
  height: 50px;
  width: 150px;
  background-image: url("compressed/Blue-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-290%, 120%);
}

.first-section-about {
  grid-area: first-section-about;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 400;
  line-height: 1.6em;
  margin: 30px 0 0;
}

.about-container {
  grid-area: about-container;
  display: flex;
  flex-wrap: wrap;
  margin-top: 140px;
  margin-bottom: 50px;
  gap: 50px;
  justify-content: center;
}

.about-photos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.about-text {
  display: flex;
  flex-direction: column;
  align-self: center;
  height: auto;
  width: 100%;
}

.second-section-header {
  grid-area: second-section-header;
  font-size: 2rem;
  font-weight: 600;
  text-align: left;
  margin: 0;
}

.elfsight-app-79f3d923-434d-44fe-a820-2cb7137853cc {
  grid-area: embedsocial-hashtag;
  margin-top: 90px;
}

.elfsight-app-79f3d923-434d-44fe-a820-2cb7137853cc a[href*="elfsight.com"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: none !important;
  border: none !important;
  position: absolute !important;
  z-index: -999 !important;
}

.glow-decoration {
  position: absolute;
  overflow: hidden;
  z-index: -1;
  right: -500px;
  margin-top: -800px;
  height: 1538px;
  width: 1538px;
  background-image: url('compressed/Blue-Circle-Gradient.webp');
}

.second-section-about {
  grid-area: second-section-about;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 32px;
  margin: 34px 0 0;
}

.fullservice {
  grid-area: fullservice;
  display: flex;
  flex-direction: column;
  background-color: var(--blue);
  border-radius: 70px;
  justify-self: center;
  width: calc(100% + 70px);
  max-width: 1310px;
  height: auto;
  background-image: url('compressed/Rounded-Lines-Transparent.webp');
  margin-top: 132px;
  overflow: hidden;
}

.fullservice::before {
  position: relative;
  margin: auto auto -57px;
  content: "";
  background-color: var(--blue);
  opacity: 30%;
  border-radius: 70px;
  width: calc(100% - 162px);
  min-height: 100px;
  z-index: -1;
  transform: translateY(-25%);
}

.fullservice-label {
  display: flex;
  background-color: rgba(255, 188, 153, 0.2);
  width: 200px;
  border-radius: 50px;
  color: var(--cta);
  justify-content: center;
  margin: 30px 0 0 80px;
}

.fullservice-label p {
  margin: 0;
  height: 40px;
  line-height: 40px;
  letter-spacing: -0.01em;
}

.fullservice-header {
  font-size: 4.3rem;
  font-weight: 500;
  margin: 28px 0 0 80px;
  color: var(--white);
  line-height: 72px;
  letter-spacing: -0.03em;
}

.fullservice-text {
  color: var(--white);
  font-weight: 300;
  line-height: 35px;
  max-width: 1025px;
  font-size: 1.25rem;
  margin: 24px 0 0 80px;
}

.fullservice-second-section {
  display: flex;
  margin-top: 20px;
  gap: 54px;
  height: 100%;
}

.fullservice-list {
  color: var(--white);
  font-weight: 300;
  margin: 0 0 30px 128px;
  line-height: 35px;
  font-size: 1.25rem;
  min-width: 420px;
}

.fullservice-ul {
  padding: 0;
}

.fullservice-ul li {
  margin: 10px 0;
}

.fullservice-button {
  border-radius: 15px;
  width: 175px;
  height: 48px;
  color: var(--blue);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  margin-left: -20px;
  background-color: var(--white);
  margin-bottom: 30px;
}

.fullservice-button:hover {
  cursor: pointer;
  background-color: #ddd;
}

.fullservice-img {
  max-width: 730px;
  max-height: 650px;
  margin-top: auto;
  border-radius: 20px;
}

.fullservice-care-p {
  margin-top: 135px;
  max-width: max-content;
  font-weight: 400;
  text-decoration: underline 1px;
}

.features {
  grid-area: features;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  width: 100%;
  max-width: 1240px;
  column-gap: 32px;
  margin: 177px -35px 0;
  grid-template-areas:
  "features-img features-img features-img features-img features-img features-first-heading features-first-heading features-first-heading features-first-heading features-first-heading features-first-heading features-first-heading"
  "features-img features-img features-img features-img features-img features-second-heading features-second-heading features-second-heading features-second-heading features-second-heading features-second-heading features-second-heading"
  "features-img features-img features-img features-img features-img cards cards cards cards cards cards cards"
  "features-img features-img features-img features-img features-img cards cards cards cards cards cards cards"
}

.features-img {
  grid-area: features-img;
  width: 100%;
  max-width: 700px;
  height: 100%;
  max-height: 565px;
  grid-column: 1/6;
  grid-row: 1/10;
  border-radius: 124px;
}

.features-img-inner {
  border-radius: 124px;
  width: 100%;
}

.features-img::after {
  content: '';
  display: block;
  position: absolute;
  background-image: url('compressed/Dots-Circle.webp');
  height: 170px;
  width: 226px;
  z-index: -1;
  margin: 25px 25px 0 0;
  transform: translate(210px, -105px);
}

.features-first-heading {
  grid-area: features-first-heading;
  font-size: 1.5rem;
  color: var(--blue);
  grid-row: 1;
  line-height: 24px;
  letter-spacing: 0.1em;
  margin: 0;
}

.features-second-heading {
  grid-area: features-second-heading;
  font-size: 3rem;
  grid-row: 2;
  line-height: 72px;
  letter-spacing: -0.03em;
  margin: 10px 0 0;
  width: max-content;
}

.features-second-heading::after {
  content: "";
  position: absolute;
  height: 50px;
  width: 200px;
  background-image: url("compressed/Blue-Long-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-285%, 130%);
}

.features-cards {
  grid-area: cards;
  display: flex;
  flex-wrap: wrap;
  gap: 65px;
  margin: 62px 0 0;
}

.features-card {
  flex: 1;
  display: grid;
  min-width: 295px;
  width: 100%;
  max-width: 330px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
  "card-img card-h1 card-h1"
  "card-img card-p card-p"
  ". card-p card-p";
}

.features-card h1 {
  grid-area: card-h1;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  color: #555;
}

.features-card p {
  grid-area: card-p;
  letter-spacing: -0.03em;
  line-height: 1.6em;
  margin: 0;
  color: #555;
}

.features-p-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background-color: rgb(194, 194, 194);
  color: #333;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
  cursor: help;
  flex: 0 0 auto;
}

.features-p-tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: min(240px, calc(100vw - 32px));
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 10px 12px;
  position: absolute;
  font-size: 0.85rem;
  line-height: 1.45;
  z-index: 1;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.25s ease, visibility 0.25s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  white-space: normal;
  overflow-wrap: anywhere;
}

.features-p-tooltip .features-p-tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.features-p-tooltip:hover .features-p-tooltiptext,
.features-p-tooltip:focus .features-p-tooltiptext,
.features-p-tooltip:focus-visible .features-p-tooltiptext {
  visibility: visible;
  opacity: 1;
}

.features-p-tooltip:hover {
  cursor: pointer;
  background-color: rgb(148, 148, 148);
}

.features-p-tooltip:focus,
.features-p-tooltip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.cloudflare-inline {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.portfolio {
  grid-area: portfolio;
  background-color: var(--black);
  margin-top: 250px;
  width: 100vw;
  justify-self: center;
  height: 250px;
}

.portfolio-header {
  color: var(--white);
  font-size: 4rem;
  margin: 20px 0 0 100px;
}

.portfolio-text {
  color: var(--white);
  font-size: 1.5rem;
  margin-left: 100px;
}

.card-img {
  grid-area: card-img;
  width: 72px;
  height: 72px;
}

.communication-container {
  grid-area: communication;
  display: flex;
  align-items: center;
  margin-top: 100px;
}

.communication-img {
  max-width: 400px;
  width: 100%;
  height: 100%;
  margin-left: 100px;
}

.communication-dots {
  z-index: -1;
  transform: translate(1040px, 230px);
  position: absolute;
}
.communication-header {
  font-size: 3rem;
  font-weight: 600;
}

.communication-header::after {
  position: absolute;
  content: "";
  height: 50px;
  width: 100px;
  background-image: url("compressed/Blue-Long-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-660%, 110%);
}

.communication-text {
  font-size: 1.3rem;
}

.stats-container {
  grid-area: stats-container;
  background-color: var(--black);
  width: 100vw;
  justify-self: center;
  height: 700px;
  margin-top: 200px;
  display: flex;
  justify-content: center;
}

.left-column-stats {
  margin: 0 0 0 100px;
}

.right-column-stats {
  margin: 0 100px 0 0;
}

.left-column-stats, .right-column-stats {
  display: flex;
  flex-direction: column;
  width: 400px;
  justify-content: center;
}

.left-column-stats *, .right-column-stats *{
  flex: 1;
}

.pricing-heading-container {
  grid-area: pricing-heading-container;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
}

.pricing-heading {
  font-size: 2.6rem;
  line-height: 1.6em;
  justify-self: center;
}

.pricing-toggle {
  margin-top: 5px;
}

.toggleContainer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 3px solid black;
  border-radius: 20px;
  background: black;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.toggleContainer::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  border-radius:20px;
  background: white;
  transition: all 0.3s;
}
.toggleCheckbox:checked + .toggleContainer::before {
  left: 50%;
}

.toggleContainer div {
  padding: 6px;
  text-align: center;
  z-index: 1;
}
.toggleCheckbox {
  display: none;
}
.toggleCheckbox:checked + .toggleContainer div:first-child{
  color: white;
  transition: color 0.3s;
}
.toggleCheckbox:checked + .toggleContainer div:last-child{
  color: black;
  transition: color 0.3s;
}
.toggleCheckbox + .toggleContainer div:first-child{
  color: black;
  transition: color 0.3s;
}
.toggleCheckbox + .toggleContainer div:last-child{
  color: white;
  transition: color 0.3s;
}

.pricing-cards {
  grid-area: pricing-cards;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 75px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  height: auto;
  padding: 0 50px;
  background-color: transparent;
  perspective: 1000px;
  -webkit-box-shadow: 8px 24px 50px 0 rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 8px 24px 50px 0 rgba(0, 0, 0, 0.07);
  box-shadow: 8px 24px 50px 0 rgba(0, 0, 0, 0.07);
  border-radius: 15px;
}

.pricing-card:nth-child(2) {
  transform: translateY(-50px);
  border: 2px solid whitesmoke;
}

.pricing-card-name {
  font-size: 1.5rem;
  text-align: center;
  margin: 47px 0 0;
  color: var(--blue);
}

.pricing-card-price {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  width: 208px;
  align-self: center;
  margin: 25px 0 0;
}

.pricing-card-text {
  font-size: 1.1rem;
  text-align: center;
  margin: 37px 0 20px;
  min-height: 90px;
  height: auto;
}

.pricing-card ul {
  list-style: none;
  margin: 0 0 20px;
}

.pricing-card li::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('compressed/Check_circle.webp');
  background-size: cover;
}

.pricing-card li {
  margin: 15px;
  justify-content: center;
  position: relative;
  font-size: 0.875rem;
}

.faq-first-header {
  grid-area: faq-first-header;
  letter-spacing: 0.02em;
  color: var(--blue);
  font-size: 0.87rem;
  margin: 125px 0 0;
}

.faq-second-header {
  grid-area: faq-second-header;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  margin: 12px 0 0 -30px;
}

.faq-third-header {
  grid-area: faq-third-header;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5em;
  letter-spacing: 0.01em;
  opacity: 60%;
  margin: 21px 0 0;
}

.faq-cards {
  grid-area: faq-cards;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 59px auto 0;
  height: 100%;
}

.faq-cards-left-column, .faq-cards-right-column{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  margin: 0 30px;
}

.faq-card {
  position: relative;
  padding: 25px;
  display: flex;
  min-height: 55px;
  flex-direction: column;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(238, 238, 238, 0.5);
  max-width: 550px;
  width: 100%;
}

.faq-card::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  border-radius: 16px;
}

.faq-card-active .faq-card-text {
  display: flex;
}

.faq-card-active.faq-card {
  border: 1px solid transparent;
}

.faq-card-active.faq-card::before {
  background: linear-gradient(90deg, rgba(255, 183, 0, 0.5) 0%, rgba(35, 83, 156, 0.5) 100%);
  -webkit-box-shadow: 72px 24px 120px 0 rgba(66, 68, 90, 0.07);
  -moz-box-shadow: 72px 24px 120px 0 rgba(66, 68, 90, 0.07);
  box-shadow: 72px 24px 120px 0 rgba(66, 68, 90, 0.07);
}

.faq-card-active .faq-horizontal-line, .faq-card-active .faq-vertical-line {
  background-color: var(--white);
}

.faq-card-active .faq-card-button {
  background-color: var(--blue);
}

.faq-card-active .faq-card-button:hover {
  background-color: #0f45a3;
}

.faq-card-front {
  display: flex;
}

.faq-card-heading {
  font-size: 1.375rem;
  line-height: 50px;
  font-weight: 600;
  width: 100%;
  max-width: 512px;
  margin: 0;
}

.faq-card-button {
  min-width: 41px;
  height: 41px;
  border-radius: 8px;
  color: var(--blue);
  font-size: 2rem;
  font-weight: 300;
  align-self: center;
  line-height: 41px;
  margin-left: 20px;

}

.faq-card-button p {
  margin: auto;
  justify-content: center;
}

.faq-horizontal-line {
  height: 2px;
  width: 16px;
  background-color: var(--blue);
  position: relative;
  margin: auto;
  top: 9px;
  border-radius: 15px;
}

.faq-vertical-line {
  height: 16px;
  width: 2px;
  background-color: var(--blue);
  position: relative;
  margin: auto;
  border-radius: 15px;
}

.faq-card-button:hover {
  background-color: var(--blue);
  cursor: pointer;
}

.faq-card-button:hover .faq-horizontal-line, .faq-card-button:hover .faq-vertical-line {
  background-color: var(--white);
}

.faq-card-text {
  font-size: 1.1rem;
  color: var(--blue);
  line-height: 30px;
  margin: 13px 0 0;
  max-width: 430px;
  display: none;
}

.form-header {
  grid-area: form-header;
  font-size: 2.625rem;
  line-height: 1.6em;
  justify-self: center;
  text-align: center;
  margin-top: 200px;
}

.form-header::after {
  content: "";
  position: absolute;
  height: 50px;
  width: 170px;
  background-image: url("compressed/Blue-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-200%, 130%);
}

.form-text {
  grid-area: form-text;
  color: gray;
  font-size: 1.25rem;
  justify-self: center;
  text-align: center;
  margin: 0;
}
.form-contact-div {
    grid-area: form-contact-div;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1.5rem;
    justify-self: center;
  margin-top: 30px;
}

.form-phone-heading, .form-email-heading {
  margin: 0;
}
.form-phone-contact, .form-email-contact {
  margin: 0 20px;
  text-align: center;
}

.form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1131px;
  height: 776px;
  margin-top: 30px;
  border-radius: 40px;
  justify-self: center;
  align-items: center;
  -webkit-box-shadow: 72px 24px 25120px 0 rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 72px 24px 25120px 0 rgba(0, 0, 0, 0.07);
  box-shadow: 72px 24px 25120px 0 rgba(0, 0, 0, 0.07);
}

.form-padding {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  grid-template-areas:
  "form-name form-name"
  "form-phone form-phone"
  "form-email form-email"
  "form-content form-content"
  "form-checkbox form-captcha"
  "form-submit form-submit";
  height: 686px;
  width: 100%;
  max-width: calc(100% - 80px);
  padding: 40px 40px 0 40px;
}

.form label {
  font-size: 0.875rem;
  line-height: 1.5em;
  font-weight: 500;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form input, select, textarea, .form-submit, .input-div {
  outline: none;
  height: 50px;
  max-width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  font-size: 0.75rem;
  padding-left: 20px;
}

.form input:focus, textarea:focus {
  outline: none;
  border: 1px solid var(--blue);
}

.input-div input {
  width: 100%;
}

.form-name {
  grid-area: form-name;
}

.form-surname {
  grid-area: form-surname;
}

.form-email {
  grid-area: form-email;
}

.form-phone {
  grid-area: form-phone;
}

.input-div input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.input-div img {
  width: 54px;
  height: 23px;
  align-self: center;
  margin-left: 20px;
}

.input-div input {
  height: 48px;
  border: 1px solid transparent;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-topic {
  grid-area: form-topic;
}

#other-topic-label {
  display: none;
  grid-area: form-other-topic;
}

.form-content {
  grid-area: form-content;
}

.form-content textarea {
  resize: none;
}

.form-content textarea {
  height: 160px;
  padding-top: 20px;
}

label[for="form-checkbox"] {
  grid-area: form-checkbox;
  align-self: center;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  height: 20px;
}

.cf-turnstile {
  grid-area: form-captcha;
  justify-self: end;
  min-height: 65px;
  min-width: 300px;
}

.form-submit {
  grid-area: form-submit;
  font-size: 1rem;
  line-height: 1.5em;
  margin-bottom: 0;
  font-weight: 500;
  color: var(--white);
  background-color: var(--blue);
  border-radius: 15px 15px 30px 30px;
  width: 100%;
}

.form-submit:hover {
  background-color: #0f45a3;
  cursor: pointer;
}

footer {
  grid-area: footer;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 100px;
}


.footer-first-row {
  display: flex;
  width: 100%;
  margin: 20px auto 0 auto;
  border-bottom: 2px solid #363D49;
  padding-bottom: 20px;
}

.footer-logo {
    display: flex;
}

.footer-logo-img {
  height: 57px;
  align-self: center;
}

.footer-logo-text {
  max-height: 40px;
  align-self: center;
  margin-left: 20px;
}

.footer-inner-image {
  border-radius: 5px;
  margin-left: auto;
}

.footer-second-row {
  display: flex;
  margin-top: 42px;
  width: 100%;
}

.footer-second-row h1 {
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: -1px;
  font-weight: 300;
  opacity: 50%;
}

footer p, a {
  font-size: 1rem;
  line-height: 24px;
  font-weight: 200;
}

.footer-inner-column {
  display: flex;
  flex-direction: column;
  color: var(--white);
  flex: 1;
  align-items: flex-start;
  margin-left: 30px;
}

.footer-inner-column * {
  height: 24px;
  margin: 10px 0;
  width: max-content;
}

.footer-inner-column p:first-child::before {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  transform: translateX(-30px);
  background-image: url('compressed/Location-Icon.webp');
}

.footer-inner-column a:nth-child(5)::before {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  transform: translateX(-30px);
  background-image: url('compressed/Phone-Icon.webp');
}

.footer-inner-column a:nth-child(6)::before {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  transform: translateX(-30px);
  background-image: url('compressed/Mail-Icon.webp');
}

.footer-inner-column:nth-child(2) p:hover,  .footer-inner-column:nth-child(3) p:hover, .footer-inner-column:nth-child(4) p:hover{
  cursor: pointer;
  color: rgb(160, 160, 160);
}

.footer-inner-column:nth-child(2) h1:hover,  .footer-inner-column:nth-child(3) h1:hover, .footer-inner-column:nth-child(4) h1:hover{
  cursor: pointer;
  color: rgb(160, 160, 160);
}

.footer-inner-column:first-child {
  flex: 3;
  align-items: flex-start;
}

.footer-third-row {
  display: flex;
  margin-top: 42px;
  width: 100%;
  gap: 40px;
  color: whitesmoke;
}

.footer-third-row a:nth-child(1) {
  opacity: 50%;
}

.footer-third-row a:nth-child(2n) {
  opacity: 50%;
}
.footer-third-row p:nth-child(1) {
  color: var(--cta);
}
.footer-third-row a {
  font-size: 0.875rem;
  line-height: 24px;
  color: white;
  font-weight: 200;
}

.footer-third-row img {
  height: 50px;
  width: 100px;
}

.footer-background {
  position: absolute;
  background-color: black;
  width: 100vw;
  height: 720px;
  margin: 0 auto;
  z-index: -1;
}

.footer-copyright {
  color: white;
  font-size: 17px;
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
}

.footer-copyright svg {
    height: 15px;
    width: auto;
    margin: auto 5px;
}

#current-year {
  margin-left: 5px;
}

@media screen and (max-width: 1200px) {
  .hero-background {
    height: 795px;
  }
  .hero-heading {
    font-size: 4rem;
    max-width: 700px;
  }
  .hero-heading::after {
    width: 280px;
    transform: translate(-100%, 225%);
  }
  .hero-text {
    font-size: 1.5rem;
  }
  .cta-circle {
    margin: 70px auto 0;
  }
  .first-section-header {
    font-size: 2.2rem;
  }
  .first-section-about {
    font-size: 1.3rem;
  }
  .about-container {
    margin-top: 150px;
  }
  .dots-decoration {
    margin: 0 0 -20px -40px;
  }
  .glow-decoration {
    display: none;
  }
  .fullservice::before {
    transform: translate(0, -20%);
  }
  .second-section-header {
    text-align: center;
    font-size: 1.6rem;
  }
  .second-section-header::after {
    width: 280px;
    transform: translate(-100%, 85%);
  }
  .second-section-about {
    font-size: 1.1rem;
  }
  .fullservice-label {
    margin-top: 10px;
  }
  .fullservice-header {
    font-size: 3.5rem;
  }
  .fullservice-text {
    font-size: 1.1rem;
  }
  .fullservice-second-section {
    margin-top: 0;
  }
  .fullservice-list {
    font-size: 1.1rem;
    min-width: 250px;
  }
  .fullservice-button {
    margin-left: -50px;
    margin-top: 0;
  }
  .fullservice-img {
    height: 400px;

  }
  .features {
    grid-area: features;
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 850px;
  }
  .features-first-heading {
    text-align: center;
    font-size: 1rem;
  }
  .features-second-heading {
    text-align: center;
    align-self: center;
    font-size: 3rem;
  }
  .features-img {
    margin: auto;
  }
  .features-img::after {
    display: none;
  }
  .features-cards {
    justify-content: center;
  }
  .communication-container {
    flex-direction: column;
  }
  .communication-img {
    margin: auto auto 50px;
  }
  .communication-dots {
    transform: translate(100px, 350px);
  }
  .faq-first-header {
    margin-top: 225px;
  }
  .faq-second-header{
    margin-left: 0;
  }
  .pricing-card:nth-child(2) {
    transform: translateY(0);
    border: none;
  }
  .faq-first-header, .faq-second-header, .faq-third-header {
    text-align: center;
  }
  .form-contact-div {
    font-size: 1.3rem;
  }
  footer p {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 990px) {
  .call-sticky {
    display: block;
  }
  .nav-ul {
    display: none;
  }
  .menu {
    right: -127px;
  }
  .nav-hamburger {
    display: block;
  }
  .li-contact::after {
    position: absolute;
    content: "";
    width: 88px;
    margin: auto;
    height: 2px;
    transform: translate(-88px, 20px);
    background-color: var(--cta);
    transition: all ease-in-out 0.4s;
    opacity: 1;
  }
  .li-contact:hover::after {
    width: 0;
    opacity: 0;
  }
  .pricing-cards {
    flex-wrap: wrap;
  }
  .pricing-card {
    margin: 0 10vw;
  }
}
@media screen and (max-width: 768px) {
  .hero-background {
    height: 700px;
  }
  .hero-heading {
    font-size: 3rem;
    max-width: 500px;
  }
  .hero-heading::after {
    width: 200px;
    transform: translate(-100%, 175%);
  }
  .hero-text {
    font-size: 1.2rem;
    min-height: 45px;
  }
  .cta-hero, .services-hero {
    font-size: 1rem;
    height: 62px;
    width: 190px;
    margin-top: 30px ;
  }
  .cta-circle {
    margin: 33px auto 0;
  }
  .first-section-header::after {
    width: 150px;
    transform: translate(-250%, 100%);
  }
  .second-section-header {
    font-size: 1.4rem;
  }
  .second-section-about {
    font-size: 1.3rem;
  }
  .fullservice-label {
    margin-top: 0;
  }
  .fullservice-header {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 15px;
  }
  .fullservice-text {
    font-size: 1rem;
    margin-top: 0;
  }
  .fullservice-list {
    margin-left: 100px;
  }
  .fullservice-ul {
    font-size: 1rem;
  }
  .fullservice-button {
    margin-top: 20px;
  }
  .features-first-heading {
    font-size: 1.3rem;
  }
  .features-second-heading {
    font-size: 2.1rem;
    margin-top: 0;
  }
  .features-second-heading::after {
    width: 150px;
    transform: translate(-270%, 110%);
  }
  .features-card h1 {
    font-size: 1.5rem;
  }
  .features-card p {
    font-size: 1rem;
  }
  .features-p-tooltip {
    transform: translateY(-1px);
  }
  .communication-dots {
    display: none;
  }
  .communication-header::after {
    width: 100px;
    transform: translate(-170%, -10%);
  }
  .faq-second-header {
    font-size: 2.5rem;
  }
  .faq-third-header {
    font-size: 1.1rem;
  }
  .faq-card-text {
    font-size: 0.9rem;
  }
  .faq-cards {
    gap: 0;
  }
  .faq-card {
    padding: 15px;
    min-width: 200px;
  }
  .faq-card:hover {
    cursor: pointer;
  }
  .form-header {
    font-size: 2.1rem;
  }
  .form-header::after {
    width: 130px;
    transform: translate(-210%, 100%);
  }
  .form {
    height: 710px;
  }
  .form-padding {
    display: flex;
    flex-direction: column;
    height: 620px;
  }
  .footer-first-row {
    flex-direction: column;
  }
  .footer-inner-image {
    margin: 20px auto 0 0;
  }
  .footer-second-row {
    display: flex;
    flex-direction: column;
  }
  .footer-inner-column {
    margin-top: 50px;
  }
  .footer-inner-column:nth-child(2), .footer-inner-column:nth-child(3), .footer-inner-column:nth-child(4) {
    margin-left: 0;
  }
  .footer-background {
    height: 1520px;
  }
}
@media screen and (max-width: 635px) {
  .form-header::after {
    width: 110px;
    transform: translate(10%, -10%);
  }
}
@media screen and (max-width: 590px) {
  .container {
    column-gap: 15px;
    padding: 26px;
  }
  .call-sticky {
    text-align: left;
  }
  .menu {
    right: -101px;
  }
  .hero-heading {
    margin-top: 100px;
  }
  .hero-heading::after {
    width: 170px;
    transform: translate(-100%, 155%);
  }
  .hero-text {
    font-size: 1.3rem;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 20px;
    width: unset;
  }
  .cta-hero, .services-hero {
    font-size: 1.2rem;
    margin-top: 20px;
  }
  .services-hero {
    margin-top: 0;
  }
  .cta-circle {
    margin: 10px auto 0;
    z-index: -1;
  }
  .first-section-about {
    text-align: left;
    width: 100%;
  }
  .second-section-header::after {
    display: none;
  }
  .elfsight-app-79f3d923-434d-44fe-a820-2cb7137853cc {
    margin-top: 150px;
  }
  .fullservice {
    width: calc(100% + 18px);
  }
  .fullservice-label{
    margin-left: 50px;
    font-size: 1rem;
  }
  .fullservice-header {
    font-size: 2.5rem;
    margin-left: 50px;
  }
  .fullservice-text {
    font-size: 1.2rem;
    margin-left: 50px;
    max-width: 70%;
  }
  .fullservice-list {
    margin-left: 70px;
    height: 100%;
  }
  .fullservice-ul {
    font-size: 1.2rem;
    margin-right: 50px;
    margin-top: 50px;
  }
  .fullservice-button {
    margin-left: 0;
  }
  .fullservice-img {
    display: none;
  }
  .fullservice-care-p {
    max-width: 350px;
  }
  .features-second-heading {
    width: auto;
    line-height: 40px;
    margin-top: 20px;
  }
  .features-second-heading::after {
    width: 140px;
    transform: translate(-90%, -10%);
  }
  .features-card {
    min-width: 215px;
  }
  .features-p-tooltip {
    transform: translateY(-1px);
  }
  .features-p-tooltiptext {
    max-width: min(200px, calc(100vw - 24px));
    font-size: 0.8rem;
    padding: 9px 11px;
  }
  .features-p-tooltip .features-p-tooltiptext::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .pricing-heading-container {
    flex-direction: column;
  }
  .communication-header {
    max-width: 480px;
  }
  .communication-header::after {
    width: 100px;
    transform: translate(-170%, -130%);
  }
  .faq-card-heading {
    font-size: 1.1rem;
  }
  .faq-card-heading {
    line-height: 30px;
  }
  .form {
    height: 650px;
  }
  .form-padding {
    height: 650px;
    padding: 0;
    max-width: unset;
  }
  .form-header {
    max-width: 530px;
  }
  .form-header::after {
    width: 120px;
    transform: translate(0%, -10%);
  }
  .footer-first-row {
    flex-direction: column;
  }
  .footer-logo {
    align-self: flex-start;
  }
  .footer-third-row {
    flex-direction: column;
    gap: 20px;
  }
  .footer-third-row img {
    height: 100px;
    width: 200px;
  }
  .footer-background {
    height: 1550px;
  }
}
@media screen and (max-width: 518px) {
  .first-section-header::after {
    transform: translate(-110%, 0%);
  }
  .form-header {
    max-width: 380px;
  }
  .form-header::after {
    width: 120px;
    transform: translate(-210%, 100%);
  }
}
@media screen and (max-width: 420px) {
  .hero-background {
    height: 750px;
  }
  .fullservice-header {
    max-width: 300px;
  }

  .fullservice-care-p {
    max-width: 240px;
  }
}
@media screen and (max-width: 393px) {
  .hero-heading::after {
    width: 200px;
    transform: translate(-85%, -20%);
  }
}