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

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-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.5);
}

.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;
}

.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-underline {
  position: absolute;
  content: "";
  width: 100px;
  height: 2px;
  background-color: var(--cta);
}

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

.li-contact:hover::after {
  width: 0;
  opacity: 0;
}

.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: 850px;
}

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

.hero-text {
  grid-area: hero-text;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 200;
  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: #FFD700;
  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: 170px;
  background-image: url("compressed/Blue-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-220%, 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;
  gap: 50px;
  justify-content: center;
}

.about-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 27px;
  width: 442px;
  height: 442px;
}

.about-photos .front-rectangle {
  object-fit: cover;
  border: 1px solid rgb(234, 234, 234);
  border-radius: 24px;
  background-image: url('compressed/UXUI-Isometric.webp');
  background-size: 884px 442px;
  background-repeat: no-repeat;
}

.front-rectangle:nth-child(1) {
  height: 200px;
  width: 207px;
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
  background-position: 0 0;
}

.front-rectangle:nth-child(2) {
  height: 200px;
  width: 207px;
  background-position: -207px 0;
}

.front-rectangle:nth-child(3) {
  height: 300px;
  width: 207px;
  grid-column: 2;
  grid-row: 1/5;
  align-self: center;
  background-position: -414px 0;
}

.dots-decoration {
  grid-area: dots-decoration;
  position: absolute;
  width: 62px;
  height: 130px;
  align-self: flex-end;
  margin: 0 0 -29px -39px;
  z-index: -1;
}

tr {
  line-height: 10px;
}

td {
  font-size: 2rem;
  color: var(--blue);
  padding: 3px;
}

.about-text {
  display: flex;
  flex-direction: column;
  align-self: center;
  height: 311px;
  width: 704px;
}

.second-section-header {
  grid-area: second-section-header;
  font-size: 2.6rem;
  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;
}

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

.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;
  margin-top: 35px;
  font-size: 1.05rem;
  margin-left: -20px;
  background-color: var(--white);
  margin-bottom: 30px;
}

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

.fullservice-img {
  height: 100%;
  max-width: 730px;
  max-height: 450px;
  margin-top: auto;
}

.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: 220px;
  background-image: url("compressed/Blue-Long-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-180%, 150%);
}

.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-block;
  background-color: rgb(194, 194, 194);
  border-radius: 50%;
  width: 20px;
  text-align: center;
  transform: translate(185px, -4px);
}

.features-p-tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  font-size: 0.8rem;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  margin-top: 10px;
  transition: opacity 0.3s;
}

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

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

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

.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: 170px;
  background-image: url("compressed/Blue-Long-Underline.webp");
  background-repeat: no-repeat;
  transform: translate(-150%, 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(-230%, 130%);
}

.form-contact-div {
    grid-area: form-contact-div;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1.5rem;
    justify-self: center;
}

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

.form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1131px;
  height: 776px;
  margin-top: 100px;
  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-surname"
  "form-email form-phone"
  "form-topic form-topic"
  "form-other-topic form-other-topic"
  "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;
}

.input-div {
  grid-area: form-phone;
  display: flex;
  padding-left: 0;
}

.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;
}

.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-social-icons {
  margin-left: auto;
  display: flex;
  gap: 40px;
}

.footer-social-icons img:hover {
  cursor: pointer;
}

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

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

@media only screen and (max-width: 1200px) {
  .hero-background {
    height: 795px;
  }
  .hero-heading {
    font-size: 4rem;
    max-width: 600px;
  }
  .hero-heading::after {
    width: 280px;
    transform: translate(-105%, 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: 240px;
  }
  .about-photos {
    gap: 20px;
    width: fit-content;
    height: fit-content;
  }
  .front-rectangle:nth-child(1) {
    align-self: flex-end;
    justify-self: end;
    height: 150px;
    width: 150px;
  }
  .front-rectangle:nth-child(2) {
    align-self: start;
    justify-self: end;
    height: 150px;
    width: 150px;
  }
  .front-rectangle:nth-child(3) {
    justify-self: start;
    height: 250px;
    width: 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: 2.2rem;
  }
  .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 only screen and (max-width: 990px) {
  .pricing-cards {
    flex-wrap: wrap;
  }
  .pricing-card {
    margin: 0 10vw;
  }
}
@media only screen and (max-width: 768px) {
  .hero-background {
    height: 700px;
  }
  .nav-ul {
    display: none;
  }
  .nav-hamburger {
    display: block;
  }
  .li-contact::after {
    width: 88px;
    transform: translate(-88px, 20px);
  }
  .hero-heading {
    font-size: 3rem;
    max-width: 500px;
  }
  .hero-heading::after {
    width: 280px;
    transform: translate(-105%, 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;
  }
  .second-section-header {
    font-size: 2rem;
  }
  .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: 200px;
    transform: translate(-150%, 130%);
  }
  .features-card h1 {
    font-size: 1.5rem;
  }
  .features-card p {
    font-size: 1rem;
  }
  .features-p-tooltip {
    transform: translate(180px, -2px);
  }
  .communication-dots {
    display: none;
  }
  .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: 280px;
    transform: translate(-120%, 130%);
  }
  .form {
    height: 910px;
  }
  .form-padding {
    display: flex;
    flex-direction: column;
    height: 820px;
  }
  .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-social-icons {
    flex-direction: column;
  }
  .footer-background {
    height: 1600px;
  }
}
@media only screen and (max-width: 590px) {
  .container {
    column-gap: 15px;
    padding: 26px;
  }
  .hero-heading {
    margin-top: 100px;
  }
  .hero-heading::after {
    width: 280px;
    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-header::after {
    width: 150px;
    transform: translate(-120%, 100%);
  }
  .first-section-about {
    text-align: left;
    width: 100%;
  }
  .second-section-header::after {
    display: none;
  }
  .elfsight-app-79f3d923-434d-44fe-a820-2cb7137853cc {
    margin-top: 150px;
  }
  .front-rectangle:nth-child(1) {
    height: 100px;
    width: 100px;
  }
  .front-rectangle:nth-child(2) {
    height: 100px;
    width: 100px;
  }
  .front-rectangle:nth-child(3) {
    height: 180px;
    width: 100px;
  }
  .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;
  }
  .features-second-heading {
    width: auto;
    line-height: 30px;
    margin-top: 20px;
  }
  .features-second-heading::after {
    width: 150px;
    transform: translate(-90%, 80%);
  }
  .features-card {
    min-width: 215px;
  }
  .features-p-tooltip {
    transform: translate(230px, -2px);
  }
  .features-p-tooltiptext {
    position: absolute;
    width: 180px;
    transform: translate(-100px, -4px);
  }
  .features-p-tooltip .features-p-tooltiptext::after {
    margin-left: 65px;
  }
  .pricing-heading-container {
    flex-direction: column;
  }
  .faq-card-heading {
    font-size: 1.1rem;
  }
  .faq-card-heading {
    line-height: 30px;
  }
  .form {
    height: 950px;
  }
  .form-padding {
    height: 900px;
    padding: 0;
    max-width: unset;
  }
  .form-header::after {
    width: 200px;
    transform: translate(-90%, 100%);
  }
  .footer-first-row {
    flex-direction: column;
  }
  .footer-logo {
    align-self: flex-start;
  }
  .footer-third-row {
    flex-direction: column;
    gap: 20px;
  }
  .footer-social-icons {
    margin-left: 0;
  }
  .footer-third-row img {
    height: 100px;
    width: 200px;
  }
  .footer-background {
    height: 1900px;
  }
}
@media only screen and (max-width: 393px) {
  .hero-heading::after {
    width: 200px;
    transform: translate(-65%, 150%);
  }
}