:root {
  --viewportWidth: calc(100vw - var(--scrollbarWidth));
}

body {
  font-family: "Mulish", sans-serif;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
}

.font-title {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}

.text-primary {
  color: #ff5955;
}

.text-secondary {
  color: #28405b;
}

.bg-primary {
  background-color: #ff5955;
}

.bg-secondary {
  background-color: #28405b;
}

.bg-light-secondary {
  background-color: rgba(109, 212, 0, 0.18);
}

.bg-grey-242 {
  background-color: #f2f2f2;
}

.border-primary {
  border-color: #ff5955;
}

.text-grey-38 {
  color: rgba(0, 0, 0, 0.38);
}

.bg-white-242 {
  background-color: rgba(242, 242, 242);
}

.steps {
  background: url(../img/steps-bg.png) rgba(242, 242, 242);
  background-position: center center;
  background-size: cover;
}

.form .message {
  display: none;
}

.form.submitted input,
form.submitted button,
form.submitted .cta-input-wrapper {
  display: none;
}

.form.submitted .message {
  display: block;
}

.form input {
  display: flex;
}

/* .play-badge {
  height: 68px;
} */

.text-highlight {
  position: relative;
}

.text-highlight:after {
  content: " ";
  width: 100%;
  height: 12px;
  position: absolute;
  bottom: -6px;
  left: 0;
  background-image: url("../img/highlighter.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

h1 .text-highlight:after {
  bottom: -2px;
}

.text-highlight.black:after {
  background-image: url("../img/highlighter-black.svg");
}

.promo-video-container {
  position: relative;
}

.promo-video-container::before {
  content: " ";
  background-image: url("../img/doodles/promo-video-left.svg");
  position: absolute;
  z-index: -1;
  width: 80px;
  height: 100%;
  left: -12px;
  bottom: -16px;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
}

.promo-video-container::after {
  content: " ";
  background-image: url("../img/doodles/promo-video-left.svg");
  position: absolute;
  z-index: -1;
  width: 80px;
  height: 100%;
  right: -12px;
  bottom: -24px;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  transform: rotateY(180deg);
}

.promo-video {
  border-radius: 20px;
  background-color: white;
  min-height: 580px;
}

.get-started {
  margin-top: -220px;
  /* background-image: url("../img/doodles/get-started.svg"); */
  background-repeat: no-repeat;
  background-position: bottom left;
}

.store-preview img {
  max-width: 216px;
  border-radius: 12px;
  border: 3px solid black;
  filter: drop-shadow(0px 2px 40px rgba(0, 0, 0, 0.24));
}

.creator-doogle-right {
  transform: rotateY(180deg);
}

.testimonial-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.testimonial-container .span-2-row {
  grid-row: 2 span;
}

.pricing {
  background-color: black;
  background-image: url("../img/doodles/pricing-bg.png");
  background-size: cover;
}

h2.font-title {
  line-height: 1.4;
}

.mobile-container::before,
.mobile-container::after {
  z-index: 0;
  width: 160px;
  height: 100%;
  bottom: 0;
  background-repeat: no-repeat;
  content: " ";
  position: absolute;
  background-position: bottom left;
  display: none;
}

.mobile-container::before {
  background-image: url("../img/doodles/mobile-left.svg");
  left: 0;
}

.mobile-container::after {
  background-image: url("../img/doodles/mobile-right.svg");
  right: -136px;
  background-repeat: no-repeat;
}

.devices-container::after {
  content: " ";
  background-image: url("../img/doodles/devices-right.svg");
  position: absolute;
  z-index: 1;
  width: 40px;
  background-size: contain;
  height: 88px;
  top: -32px;
  right: -8px;
  background-repeat: no-repeat;
}

.more-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  column-gap: 24px;
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  column-gap: 82px;
}

.footer-container .links li {
  margin-bottom: 4px;
  padding-left: 20px;
}

.footer-container .links.social li {
  margin-bottom: 8px;
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.12);
}

footer {
  background-image: url("../img/doodles/footer.svg");
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: left;
  background-size: 200vw;
}

.w-screen {
  width: var(--viewportWidth);
}

.whatsapp-container {
  bottom: 16px;
  right: 8px;
}

@media (min-width: 640px) {
  .sm\:w-screen {
    width: var(--viewportWidth);
  } 
  .promo-video {
    min-width: 320px;
    min-height: 628.5px;
  }
}

@media screen and (min-width: 768px) {
  .get-started {
    background-image: url("../img/doodles/get-started.svg");
  }

  .md\:w-screen {
    width: var(--viewportWidth);
  }

  .more-grid {
    grid-template-columns: 1fr 1fr;
  }

  .promo-video-container::before {
    left: -58px;
    width: 100px;
  }

  .promo-video-container::after {
    right: -58px;
    width: 100px;
    background-image: url("../img/doodles/promo-video-right.svg");
    transform: rotateY(0);
  }

  .testimonial-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  .mobile-container::before,
  .mobile-container::after {
    display: inline-block;
  }

  .mobile-container::before {
    left: -136px;
  }

  .devices-container::after {
    width: 64px;
    top: -56px;
    right: -24px;
  }

  footer {
    background-position-x: center;
    background-size: auto;
  }

  .whatsapp-container {
    bottom: 24px;
    right: 16px;
  }

  .md\:bg-grey-242{
    background-color: #f2f2f2;
  }

  .email-cta {
    background-image: url("../img/doodles/email.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
  }
  
}

@media (min-width: 1024px) {
  .lg\:w-screen {
    width: var(--viewportWidth);
  }

  .email .input {
    flex-grow: 1;
  }

  .cta-input-wrapper {
    flex-grow: 1;
  }

  .hero h1 {
    /* font-size: 56px; */
    line-height: 56px;
  }

  .get-started-wrapper {
    height: 420px;
  }

  .promo-video-wrapper {
    top: 80px;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-container::before {
    left: 0;
  }

  .email-cta {
    border-radius: 24px;
  }
}

@media (min-width: 1280px) {
  .xl\:w-screen {
    width: var(--viewportWidth);
  }
}