html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

:root {
    --text-color: #333;
    --space-color: #bdbdbd;
}

* {
    box-sizing: border-box;
}

body {
    background-color: white;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
    
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    overflow-x: hidden;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #bdbdbd3b;
    max-width: 1400px !important;
}

header i {
    font-size: 1.2rem;
    cursor: pointer;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    text-align: center;
    flex-basis: 100%;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease-in-out;
}
.row {
    display: flex;
    gap: 1rem;
}

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

.button, button {
    background-color: black;
    color: white;
    padding: .8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: .8rem;
    display: inline-block;
    outline: 1px solid black;
    font-family: inherit;
}

.secondary {
    background-color: white;
    color: inherit;
    outline: 1px solid var(--space-color);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    padding: 0;
    margin: 0;
}

section {
  scroll-margin: 130px;
}
section, header {
    max-width: 1280px;
    margin: 0 auto;
    width: calc(100% - 40px);
}

.modal-active {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.2);
  display: none;
  justify-content: center;
  align-items: center;
  animation-name: animateModal;
  animation-duration: .3s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-visible {
  display: flex;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow: auto;
  animation-name: animateModalContent;
  animation-duration: .3s;
  box-sizing: border-box;
  padding: 20px;
}

.modal-close {
  display: flex;
justify-content: right;
}

.modal-close > span {
  cursor: pointer;
  padding: 10px
}


@keyframes animateModal {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes animateModalContent {
  from {transform: translateY(40px); opacity: 0}
  to {transform: translateY(0); opacity: 1}
}

input, select {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--space-color);
  width: 100%;
  color: inherit;
  transition: border .1s ease;
  box-sizing: border-box;
  font-size: inherit
}

input.invalid {
border-color: red;
}
input.invalid:focus {
outline-color: red;
outline-style: solid;
}


.hero {
    /*
    background-color: #e4e4e42e;
    background-color: #ffffff;
    background-size: 456px 40px;
    background-image: repeating-linear-gradient(-5deg, #bdbdbd3b 0, #bdbdbd3b 1px, #fff 0, #fff 50%);
    padding: 10px 0;
    */
        /* https://www.magicpattern.design/tools/css-backgrounds */
    /*
    background-color: #ffffff;
    background-image: radial-gradient(#bdbdbd57 2px, #ffffff 2px);
    background-size: 40px 40px;
    */
    background-color: white;
    position: relative;
    overflow: hidden;
    animation: fade;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    isolation: isolate;
}
.hero > div {
  background: linear-gradient(180deg, rgb(255, 255, 255) 30%, rgba(255, 255, 255, .6) 100%);
  padding-top: 3rem;
}
@keyframes fade {
  0% {
    background-color: #0280fb;
  }
  50% {
    background-color: #fd009b;
  }
  100% {
    background-color: #fe6b01;
  }
}

.hero section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5rem 0;
    margin-bottom: 10rem;

    background-image: url('/assets/confetti.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 1;
    position: relative;
}

.cta-banner {
      background-image: url(/assets/confetti.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 6rem 0;
}

.hero h1, .cta-banner h2 {
    font-size: 2.7rem;
    line-height: 3.8rem;
    margin-bottom: 1rem;
}

#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button-large {
  padding: 1rem 2rem;
  font-size: 15px;
}

.demo {
  display: flex;
  gap: 1rem;
  height: 200px;
  margin-top: 50px;
  justify-content: center;
}
.demo img {
  width: 200px;
  height: auto;
  z-index: 1;
  position: relative;
}
.logo {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
.steps {
    background-color: #fbfbfb;
}
.steps section {
    border-top: 1px solid #bdbdbd3b;
    padding: 2rem 0;
}
.steps h2 {
    font-size: 2rem;
    margin-bottom: 4rem;
}
.steps .button {
    padding: .5rem 1.5rem;
}
.steps p {
   margin: .5rem 0 1rem 0;
}

.image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
}

.steps .image {
    height: 170px;
  margin-bottom: 2rem;
}

.speical-gift {
    text-align: left;
}
.speical-gift img {
    height: 300px;
  margin: 0 auto;
  display: block;
  border-radius: 21px;
  width: auto;
}
.speical-gift p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.2rem;
}

.templatesDemo {
    display: flex;
    gap: 1rem;
    margin-top: 50px;
    flex-direction: column;
    color: white;
}
.templatesDemo > div {
    background-color: #ff8800;
    min-height: 250px;
    border-radius: 12px;
}
.templatesDemo .secondary {
  background-color: transparent;
  border: 1px solid white;
}
.templatesDemo .row:not(.buttons) {
  gap: 3rem;
}
.templatesDemo .row-4 {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
}
.templatesDemo .row-8 {
  display: flex;
    align-items: flex-end;
}
.templatesDemo img {
  width: calc(100% - 4rem);
    height: auto;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin: 2rem 2rem 0 2rem;
}

footer {
  margin-top: 10rem;
    background-color: #f5f5f5;
    padding: 4rem 0;
    color: 
color-mix(in srgb, var(--text-color), white 20%);
}
footer ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  padding: 0;
  margin: 0;
}
footer .row-8 {
  display: flex;
  justify-content: right;
}
footer hr {
  margin: 40px 0;
  opacity: .4;
}
footer i {
  font-size: 1.2rem;
}
footer a {
  cursor: pointer;
}

.messages {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
}

.messages-content > div {
margin-top: 10px;
padding: 10px 20px;
width: 300px;
background: rgb(219, 219, 219);
box-shadow: 2px 4px 12px rgba(0,0,0,.08);
  border-radius: 12px;
  animation: animateMessage;
  animation-duration: .1s;
}

.messages-content > div.error {
  background: rgb(255, 204, 204);
  color: red;
}

@keyframes animateMessage {
  from {transform: translateX(calc(-100% - 20px));}
  to {transform: translateX(0);}
}

.hidden {
  display: none;
}

.legal p {
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: 1.3rem;
}

a[onclick] {
  text-decoration: underline;
}

.row-1 {
    flex-basis:8.33333%;
    max-width:8.33333% 
  }
  .row-2 {
    flex-basis:16.66667%;
    max-width:16.66667% 
  }
  .row-3 {
    flex-basis:25%;
    max-width:25% 
  }
  .row-4 {
    flex-basis:33.33333%;
    max-width:33.33333% 
  }
  .row-5 {
    flex-basis:41.66667%;
    max-width:41.66667% 
  }
  .row-6 {
    flex-basis:50%;
    max-width:50% 
  }
  .row-7 {
    flex-basis:58.33333%;
    max-width:58.33333% 
  }
  .row-8 {
    flex-basis:66.66667%;
    max-width:66.66667%;
  }
  .row-9 {
    flex-basis:75%;
    max-width:75% 
  }
  .row-10 {
    flex-basis:83.33333%;
    max-width:83.33333% 
  }
  .row-11 {
    flex-basis:91.66667%;
    max-width:91.66667% 
  }
  .row-12 {
    flex-basis:100%;
    max-width:100% 
  }
  .row-centered {
    margin-left:auto;
    margin-right:auto 
  }
  .row-uncentered {
    margin-left:0;
    margin-right:0 
  }
  .row-last {
    margin-left:auto 
  }
  .row-first {
  margin-right:auto 
  }
  .row-notlast {
    margin-left:0 
  }
  .row-grow {
    flex:auto;
    max-width:none 
  }
  .row-ungrow {
    flex:initial;
    max-width:none 
  }


  .form {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    margin-top: 1rem;
    text-align: left;
}


.wrap-collabsible {
  border-bottom: 1px solid var(--space-color);
  text-align: left;
}

#faq {
  max-width: 800px;
}

.wrap-collabsible input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: 7px;
  user-select: none;
  padding: 27px 0;
}

.lbl-toggle i {
  /*
  transition: transform .5s;
  */
}

.toggle:checked + .lbl-toggle i {
  transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  /*
  transition: max-height .5s ease-in-out;
  */
}

.discount-code {
  color: var(--color-primary);
  background-color: #ebf2fd;
  padding: 3px 7px;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.collapsible-content p {
  margin: 0 0 27px 0;
}

.tooltip {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
[data-tooltip] {
  position: relative;
  z-index: 10;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
}
[data-tooltip]::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 8px));
  background-color: var(--space-color);
  padding: 10px 20px;
  min-width: 130px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--text-color);
}


@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      background-color: #ffffffdb;
      padding: 2rem;
      bottom: 0;
      z-index: 1;
      backdrop-filter: blur(3px);
      border-right: 1px solid var(--space-color);
      transform: translateX(-100%);
      transition: transform .3s ease-in-out;
      width: 160px;
    }
    .nav-visible nav {
      transform: translateX(0);
    }
    .nav-visible .page {
      transform: translateX(160px);
    }
    nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    section > .row {
        flex-direction: column;
   }
    .row > div {
        flex-basis: unset;
        max-width: unset;
   }
   .arrow {
       display: none;
   }

   .pricing .row-4:first-of-type {
     transform: translateX(0px) !important; 
     margin: 0 0 2rem 0 !important;
   }
   .mobile-visible i {
    font-size: 22px;
   }

   header .secondary {
       display: none;
   }

   .templatesDemo > .row {
        flex-direction: column-reverse;
   }

   .hero section {
    padding-top: 0;
    background-image: unset;
    padding: 2rem 0;
    margin-bottom: 0rem;
   }

  .templatesDemo > .row {
    gap: 0 !important;
  }
   .templatesDemo img {
    margin: 0 1rem 0 1rem;
    width: calc(100% - 2rem);
   }

   .site-overview > div {
    width: 100%;
   }

   .cta-banner {
    background-size: 530px;
   }
}

@media (min-width: 768px) {
    .mobile-visible {
        display: none;
    }
}