@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

h2 {
    font-family: 'Damion', cursive;
    font-weight: 400;
    color: #0FBFEB;
    font-size: 35px;
    text-align: center;
    position: relative;
}
h2:before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 22px;
    background: #0FBFEB;
    height: 1px;
}
h2 i {
    font-style: normal;
    background: #fff;
    position: relative;
    padding: 10px;
}
:focus{outline: none;}

/* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: #333;  box-sizing: border-box; letter-spacing: 1px;}

:focus{outline: none;}

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333;  box-sizing: border-box; letter-spacing: 1px;}

.effect-1, 
.effect-2, 
.effect-3{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #0FBFEB; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}

/*INPUT*/



.horizontal-align-text{
margin: auto!important;
width: 100%;
padding: 10px;
}

.register-image {
  background: url("./assets/signUp_Background.png") center no-repeat;
  display: inline-block;
  width: 100%;
  height:938px;
  padding-right: 20px;
}



/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: hsl(0, 0%, 100%);
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;  color: hsl(230, 7%, 23%);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
}


ol, ul, menu {
  list-style: none;
}
/*FOOTER*/


h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}



/* variables */
:root {
  /* colors */
  --me6-color-primary-hsl: 250, 84%, 54%;
  --me6-color-bg-hsl: 0, 0%, 100%;
  --me6-color-contrast-high-hsl: 230, 7%, 23%;
  --me6-color-contrast-higher-hsl: 230, 13%, 9%;
  --me6-color-contrast-medium-hsl: 225, 4%, 47%;
  --me6-color-contrast-lower-hsl: 240, 4%, 85%;

  /* spacing */
  --me6-space-xs: 0.5rem;
  --me6-space-sm: 0.75rem;
  --me6-space-md: 1.25rem;
  --me6-space-lg: 2rem;
  --me6-space-xl: 3.25rem;

  /* typography */
  --me6-text-base: 1rem;
  --me6-text-sm: 0.833rem;
  --me6-text-xs: 0.694rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --me6-space-xs: 0.75rem;
    --me6-space-sm: 1.125rem;
    --me6-space-md: 2rem;
    --me6-space-lg: 3.125rem;
    --me6-space-xl: 5.125rem;

    /* typography */
    --me6-text-base: 1.25rem;
    --me6-text-sm: 1rem;
    --me6-text-xs: 0.8rem;
  }
}

/* icons */
.me6-icon {
  height: var(--me6-size, 1em);
  width: var(--me6-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
.main-footer__logo {
  display: inline-block;
}
.main-footer__logo svg, .main-footer__logo img {
  display: block;
}

.main-footer__link {
  color: hsl(var(--me6-color-contrast-medium-hsl));
  text-decoration: none;
}
.main-footer__link:hover {
  color: hsl(var(--me6-color-contrast-high-hsl));
  text-decoration: underline;
}

.main-footer__social {
  text-decoration: none;
  display: inline-block;
  color: hsl(var(--me6-color-contrast-medium-hsl));
}
.main-footer__social:hover {
  color: hsl(var(--me6-color-contrast-high-hsl));
}
.main-footer__social .me6-icon {
  font-size: 1.2em;
}



@media (min-width: 64rem) {
  .main-footer__social .me6-icon {
    font-size: 1em;
  }
}

/* utility classes */
.me6-block {
  display: block;
}

.me6-gap-xs {
  gap: var(--me6-space-xs);
}

.me6-items-center {
  align-items: center;
}

.me6-flex {
  display: flex;
}

.me6-color-contrast-high {
  --me6-color-o: 1;
  color: hsla(var(--me6-color-contrast-high-hsl), var(--me6-color-o, 1));
}

.me6-flex-wrap {
  flex-wrap: wrap;
}

.me6-color-contrast-medium {
  --me6-color-o: 1;
  color: hsla(var(--me6-color-contrast-medium-hsl), var(--me6-color-o, 1));
}

.me6-text-sm {
  font-size: var(--me6-text-sm);
}

.me6-margin-bottom-sm {
  margin-bottom: var(--me6-space-sm);
}

.me6-margin-top-lg {
  margin-top: var(--me6-space-lg);
}

.me6-padding-y-xs {
  padding-top: var(--me6-space-xs);
  padding-bottom: var(--me6-space-xs);
}

.me6-border-top {
  --me6-border-o: 1;
  border-top: var(--me6-border-width, 1px) var(--me6-border-style, solid) hsla(var(--me6-color-contrast-lower-hsl), var(--me6-border-o, 1));
}

.me6-flex-column {
  flex-direction: column;
}

.me6-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.me6-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.me6-gap-y-lg {
  row-gap: var(--me6-space-lg);
}

.me6-max-width-lg {
  max-width: 80rem;
}

.me6-container {
  width: calc(100% - 2*var(--me6-space-md));
  margin-left: auto;
  margin-right: auto;
}

.me6-padding-top-xl {
  padding-top: var(--me6-space-xl);
}

.me6-z-index-1 {
  z-index: 1;
}

.me6-position-relative {
  position: relative;
}

@media(min-width: 32rem){
  .me6-gap-lg\@xs {
    gap: var(--me6-space-lg);
  }

  .me6-col-6\@xs {
    grid-column-end: span 6;
  }
}

@media(min-width: 64rem){
  .me6-text-xs\@md {
    font-size: var(--me6-text-xs);
  }

  .me6-margin-bottom-0\@md {
    margin-bottom: 0;
  }

  .me6-items-center\@md {
    align-items: center;
  }

  .me6-justify-between\@md {
    justify-content: space-between;
  }

  .me6-flex-row\@md {
    flex-direction: row;
  }

  .me6-text-sm\@md {
    font-size: var(--me6-text-sm);
  }

  .me6-text-base\@md {
    font-size: var(--me6-text-base);
  }

  .me6-col-3\@md {
    grid-column-end: span 3;
  }
}

@media(min-width: 80rem){
  .me6-order-1\@lg {
    order: 1;
  }

  .me6-text-right\@lg {
    text-align: right;
  }

  .me6-order-2\@lg {
    order: 2;
  }

  .me6-gap-lg\@lg {
    gap: var(--me6-space-lg);
  }

  .me6-col-3\@lg {
    grid-column-end: span 3;
  }

  .me6-col-9\@lg {
    grid-column-end: span 9;
  }
}
/*FAQ Accirdion*/

.accordion .accordion-item {
  padding: 0px 15px;
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #03b5d2;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}


/*SECTION 4 */

/* -------------------------------- 

Icons 

-------------------------------- */

.cd-icon {
  --size: 1em;
  font-size: var(--size);
  height: 1em;
  width: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.cd-icon--is-spinning { /* rotate the icon infinitely */
  animation: cd-icon-spin 1s infinite linear;
}

@keyframes cd-icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cd-icon use { /* SVG symbols - enable icon color corrections */
  color: inherit;
  fill: currentColor;
}
/*Price CARD*/



@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --pd6-color-primary-hsl: 250, 84%, 54%;
  --pd6-color-bg-hsl: 0, 0%, 100%;
  --pd6-color-contrast-high-hsl: 230, 7%, 23%;
  --pd6-color-contrast-higher-hsl: 230, 13%, 9%;
  --pd6-color-contrast-low-hsl: 240, 4%, 65%;
  --pd6-color-bg-dark-hsl: 240, 4%, 95%;
  --pd6-color-bg-light-hsl: 0, 0%, 100%;
  --pd6-color-white-hsl: 0, 0%, 100%;
  --pd6-color-primary-darker-hsl: 250, 84%, 38%;
  --pd6-color-primary-light-hsl: 250, 84%, 60%;
  --pd6-color-bg-lighter-hsl: 0, 0%, 100%;
  --pd6-color-black-hsl: 230, 13%, 9%;

  /* spacing */
  --pd6-space-3xs: 0.25rem;
  --pd6-space-2xs: 0.375rem;
  --pd6-space-xs: 0.5rem;
  --pd6-space-sm: 0.75rem;
  --pd6-space-md: 1.25rem;

  /* typography */
  --pd6-text-3xl: 2.488rem;
  --pd6-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --pd6-space-3xs: 0.375rem;
    --pd6-space-2xs: 0.5625rem;
    --pd6-space-xs: 0.75rem;
    --pd6-space-sm: 1.125rem;
    --pd6-space-md: 2rem;

    /* typography */
    --pd6-text-3xl: 3.815rem;
    --pd6-text-sm: 1rem;
  }
}

/* buttons */
.pd6-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: none;
  background: hsl(var(--pd6-color-bg-dark-hsl));
  color: hsl(var(--pd6-color-contrast-higher-hsl));
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
  padding: var(--pd6-space-2xs) var(--pd6-space-sm);
  border-radius: 0.25em;
}

.pd6-btn:focus-visible {
  box-shadow: 0px 0px 0px 2px hsl(var(--pd6-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--pd6-color-contrast-higher-hsl), 0.15);
  outline: none;
}

.pd6-btn:active {
  transform: translateY(2px);
}

.pd6-btn--primary {
  background: hsl(var(--pd6-color-primary-hsl));
  color: hsl(var(--pd6-color-white-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--pd6-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--pd6-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--pd6-color-primary-darker-hsl), 0.25);
}

.pd6-btn--primary:hover {
  background: hsl(var(--pd6-color-primary-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--pd6-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--pd6-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--pd6-color-primary-darker-hsl), 0.25);
}

.pd6-btn--primary:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--pd6-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--pd6-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--pd6-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--pd6-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--pd6-color-primary-hsl));
}

.pd6-btn--subtle {
  background: hsl(var(--pd6-color-bg-lighter-hsl));
  color: hsl(var(--pd6-color-contrast-higher-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--pd6-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--pd6-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
}

.pd6-btn--subtle:hover {
  background: hsl(var(--pd6-color-bg-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--pd6-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--pd6-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
}

.pd6-btn--subtle:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--pd6-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--pd6-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--pd6-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--pd6-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--pd6-color-contrast-high-hsl));
}

.pd6-btn--md {
  font-size: 1.2em;
}

/* component */
.p-table__item {
  background-color: hsl(var(--pd6-color-bg-dark-hsl));
  border-radius: 0.5em;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
  padding: var(--pd6-space-md);
  display: flex;
  flex-direction: column;
}

.p-table__item--popular {
  background-color: hsl(var(--pd6-color-bg-light-hsl));
  box-shadow: 0 0 0 2px hsl(var(--pd6-color-primary-hsl)), 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}

.p-table__badge {
  font-size: var(--pd6-text-sm);
  background-color: hsl(var(--pd6-color-contrast-high-hsl));
  color: hsl(var(--pd6-color-bg-hsl));
  padding: var(--pd6-space-3xs) var(--pd6-space-2xs);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  border-radius: 0.25em;
}

.p-table__price span {
  font-size: var(--pd6-text-3xl);
  font-weight: bold;
}
.p-table__price i {
  color: hsl(var(--pd6-color-contrast-low-hsl));
}

.p-table__features li {
  margin-bottom: var(--pd6-space-xs);
}

.p-table__switch {
  display: none;
}

.p-table--has-switch .p-table__price-wrapper {
  position: relative;
  overflow: hidden;
}
.p-table--has-switch .p-table__price {
  will-change: transform;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-table--has-switch .p-table__price[data-transition-delay="2nd"] {
  transition-delay: 0.1s;
}
.p-table--has-switch .p-table__price[data-transition-delay="3rd"] {
  transition-delay: 0.2s;
}
.p-table--has-switch .p-table__price--month {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.p-table--has-switch .p-table__price--year {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.p-table--yearly .p-table__price--month {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.p-table--yearly .p-table__price--year {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* utility classes */
.pd6-width-100\% {
  width: 100%;
}

.pd6-margin-top-auto {
  margin-top: auto;
}

.pd6-margin-bottom-md {
  margin-bottom: var(--pd6-space-md);
}

.pd6-margin-bottom-sm {
  margin-bottom: var(--pd6-space-sm);
}

.pd6-margin-bottom-2xs {
  margin-bottom: var(--pd6-space-2xs);
}

.pd6-items-center {
  align-items: center;
}

.pd6-justify-between {
  justify-content: space-between;
}

.pd6-flex {
  display: flex;
}

.pd6-gap-sm {
  gap: var(--pd6-space-sm);
}

.pd6-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.pd6-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.pd6-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.pd6-justify-center {
  justify-content: center;
}

@media(min-width: 64rem){
  .pd6-col-4\@md {
    grid-column-end: span 4;
    border: 1px solid black;
  }
}

/* --------------------------------

Component 

-------------------------------- */

.feature-v20 {
  position: relative;
  z-index: 1;
}

.feature-v20__list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2rem;
}

.feature-v20__list > * {
  min-width: 0;
}

.feature-v20__item {
  grid-column-end: span 12;
}

@media (min-width: 48rem) {
  .feature-v20__item {
    grid-column-end: span 6;
  }  
}

@media (min-width: 64rem) {
  .feature-v20__item {
    grid-column-end: span 3;
  }
}

.feature-v20__item-title {
  transition: color 0.3s;
}

.feature-v20__icon-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: hsl(250, 84%, 54%); /* icon color */
  transition: color 0.3s;
}
.feature-v20__icon-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05);
  z-index: -1;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.3s;
}

.feature-v20__icon {
  --size: 24px;
  z-index: 2;
}

.feature-v20__paragraph {
  color: hsl(240, 4%, 65%);
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-container {
  width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
}

.cd-max-width-sm {
  max-width: 48rem;
}

.cd-max-width-adaptive-lg {
  max-width: 32rem;
}

@media (min-width: 48rem) {
  .cd-max-width-adaptive-lg {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .cd-max-width-adaptive-lg {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .cd-max-width-adaptive-lg {
    max-width: 80rem;
  }
}

.cd-padding-y-xl {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.cd-margin-bottom-xl {
  margin-bottom: 4.5rem;
}

.cd-margin-bottom-2xs {
  margin-bottom: 0.75rem;
}

.cd-text-center {
  text-align: center;
}
/* -------------------------------- 

FLEX BOXES

-------------------------------- */
.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

/* -------------------------------- 

FLEX BOXES END


/* -------------------------------- 

Buttons 

-------------------------------- */

.cd-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375em;
  font-size: 1em;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: 0.2s;
  will-change: transform;
}

.cd-btn:focus-visible {
  outline: none;
}

.cd-btn:active {
  transform: translateY(2px);
}

.cd-btn--primary {
  background:#0FBFEB;
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
              0 1px 3px hsla(250, 84%, 38%, 0.25), 
              0 2px 6px hsla(250, 84%, 38%, 0.1), 
              0 6px 10px -2px hsla(250, 84%, 38%, 0.25);
  color: hsl(0, 0%, 100%);
}

.cd-btn--primary:hover {
  background: white;
  color:#0FBFEB ;
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
              0 1px 2px hsla(250, 84%, 38%, 0.25), 
              0 1px 4px hsla(250, 84%, 38%, 0.1), 
              0 3px 6px -2px hsla(250, 84%, 38%, 0.25);
}

.cd-btn--primary:focus-visible {
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
              0 1px 2px hsla(250, 84%, 38%, 0.25), 
              0 1px 4px hsla(250, 84%, 38%, 0.1), 
              0 3px 6px -2px hsla(250, 84%, 38%, 0.25), 
              0 0 0 2px hsl(0, 0%, 100%), 
              0 0 0 4px hsl(250, 84%, 54%);
}

/* -------------------------------- 

Component 

-------------------------------- */

.cta-banner {
  background-color: hsl(0, 0%, 100%);
  border-radius: 0.75em;
  box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
              0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
              0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
              0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  overflow: hidden;
}

.cta-banner__grid {
  display : grid;
  align-items: center;
  gap: 1.5rem;
}

.cta-banner__grid > * {
  min-width: 0;
}

.cta-banner__content {
  text-align: center;
  display: grid;
  gap: 0.75rem;
}

.cta-banner__title {
  font-size: 1.50rem;
}

.cta-banner__description {
  font-size: 0.9375rem;
  color: hsl(225, 4%, 47%);
}

.cta-banner__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cta-banner__img {
  width: 100%;
}

@media (min-width: 64rem) {
  .cta-banner__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner__description {
    font-size: 1.125rem;
  }

  .cta-banner:not(.cta-banner--text-center\@md) .cta-banner__content {
    padding-left: 1.5rem;
    text-align: left;
  }

  .cta-banner:not(.cta-banner--text-center\@md) .cta-banner__btns {
    justify-content: start;
  }
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-padding-sm {
  padding: 1.5rem;
}

.cd-radius-md {
  border-radius: 0.375em;
}

.cd-link {
  color: hsl(250, 84%, 54%);
  text-decoration: none;
  background-image: linear-gradient(to right, hsl(250, 84%, 54%) 50%, hsla(250, 84%, 54%, 0.2) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.2s;
}

.cd-link:hover {
  background-position: 0% 100%;
}

.cd-link--contrast-higher {
  color: hsl(230, 13%, 9%);
  background-image: linear-gradient(to right, hsl(230, 13%, 9%) 50%, hsla(230, 13%, 9%, 0.1) 50%);
}
/*CARD END*/
:root {
  --diagonal-section-offset: 50px;
}


.cd-padding-y-3xl {
  padding-top: 10.75rem;
  padding-bottom: 4.75rem;
}

.cd-margin-bottom-sm {
  margin-bottom: 1.5rem;
}

.cd-text-center {
  text-align: center;
}

/*NAVBAR START*/

ol, ul, menu {
  list-style: none;
}

button, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}



img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --mf1-color-primary-hsl: 250, 84%, 54%;
  --mf1-color-bg-hsl: 0, 0%, 100%;
  --mf1-color-contrast-high-hsl: 230, 7%, 23%;
  --mf1-color-contrast-higher-hsl: 230, 13%, 9%;
  --mf1-color-contrast-lower-hsl: 240, 4%, 85%;
  --mf1-color-contrast-medium-hsl: 225, 4%, 47%;
  --mf1-color-bg-dark-hsl: 240, 4%, 95%;
  --mf1-color-white-hsl: 0, 0%, 100%;
  --mf1-color-primary-darker-hsl: 250, 84%, 38%;
  --mf1-color-primary-light-hsl: 250, 84%, 60%;
  --mf1-color-bg-lighter-hsl: 0, 0%, 100%;
  --mf1-color-black-hsl: 230, 13%, 9%;
  --mf1-color-bg-light-hsl: 0, 0%, 100%;

  /* spacing */
  --mf1-space-2xs: 0.375rem;
  --mf1-space-sm: 0.75rem;
  --mf1-space-md: 1.25rem;

  /* typography */
  --mf1-text-lg: 1.25rem;
  --mf1-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --mf1-space-2xs: 0.5625rem;
    --mf1-space-sm: 1.125rem;
    --mf1-space-md: 2rem;

    /* typography */
    --mf1-text-lg: 1.75rem;
    --mf1-text-sm: 1rem;
  }
}

/* buttons */
.mf1-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: none;
  background: hsl(var(--mf1-color-bg-dark-hsl));
  color: hsl(var(--mf1-color-contrast-higher-hsl));
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
  padding: var(--mf1-space-2xs) var(--mf1-space-sm);
  border-radius: 0.25em;
}

.mf1-btn:focus-visible {
  box-shadow: 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--mf1-color-contrast-higher-hsl), 0.15);
  outline: none;
}

.mf1-btn:active {
  transform: translateY(2px);
}

.mf1-btn--primary {
  background:#0FBFEB;
  color:white;
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--mf1-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--mf1-color-primary-darker-hsl), 0.25);
}

.mf1-btn--primary:hover {
  background: transparent;
  color: #0FBFEB;
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--mf1-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--mf1-color-primary-darker-hsl), 0.25);
}

.mf1-btn--primary:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--mf1-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--mf1-color-primary-hsl));
}

.mf1-btn--subtle {
  background: hsl(var(--mf1-color-bg-lighter-hsl));
  color: hsl(var(--mf1-color-contrast-higher-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
}

.mf1-btn--subtle:hover {
  background: hsl(var(--mf1-color-bg-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
}

.mf1-btn--subtle:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--mf1-color-contrast-high-hsl));
}

/* component */
:root {
  --header-height: 50px;
}
@media (min-width: 64rem) {
  :root {
    --header-height: 70px;
  }
}

.header {
  height: var(--header-height);
  width: 100%;
  background-color: hsl(var(--mf1-color-bg-hsl));
  z-index: 3;
}

.header__container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-top: 30px;
  padding-top: 30px;
}
.header__logo a, .header__logo svg, .header__logo img {
  display: block;
}

.header__nav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100vh;
  background-color: hsl(var(--mf1-color-bg-hsl));
  box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  overflow: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.header__nav::before {
  content: "";
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: inherit;
  border-bottom: 1px solid hsl(var(--mf1-color-contrast-lower-hsl));
}

.header__nav--is-visible {
  display: block;
}

.header__nav-inner {
  padding: var(--mf1-space-md);
}

.header__label {
  font-size: var(--mf1-text-sm);
  color: hsl(var(--mf1-color-contrast-medium-hsl));
  margin-bottom: var(--mf1-space-sm);
}

.header__item {
  margin-bottom: var(--mf1-space-sm);
}

.header__link {
  font-size: var(--mf1-text-lg);
  color: hsl(var(--mf1-color-contrast-higher-hsl));
  text-decoration: none;
}
.header__link:hover, .header__link[aria-current] {
  color: hsl(var(--mf1-color-primary-hsl));
}

.header__nav-btn {
  font-size: var(--mf1-text-lg);
  width: 100%;
}

.header__item--divider {
  height: 1px;
  width: 100%;
  background-color: hsl(var(--mf1-color-contrast-lower-hsl));
}

.header__trigger {
  position: relative;
  z-index: 2;
}

.header__trigger-icon {
  position: relative;
  display: block;
  height: 2px;
  width: 1em;
  background-color: currentColor;
  margin-right: var(--mf1-space-2xs);
  transition: 0.2s;
}
.header__trigger-icon::before, .header__trigger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  background-color: currentColor;
  transition: 0.2s;
}
.header__trigger-icon::before {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}
.header__trigger-icon::after {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

.header__trigger[aria-expanded=true] .header__trigger-icon {
  background-color: transparent;
}
.header__trigger[aria-expanded=true] .header__trigger-icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.header__trigger[aria-expanded=true] .header__trigger-icon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media only screen and (min-width: 600px) {
  .formspacing {
margin-top: 64px;  }
}

@media only screen and (max-width: 600px) {
  .formspacing {
margin-top: 0px;  }
}


@media (min-width: 64rem) {
  .header__nav {
    position: static;
    background-color: transparent;
    width: auto;
    max-height: none;
    box-shadow: none;
    overflow: visible;
    -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
    display: block;
  }
  .header__nav::before {
    display: none;
  }

  .header__nav-inner {
    padding: 0;
  }

  .header__label {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
  }

  .header__list {
    display: flex;
    align-items: center;
  }

  .header__item {
    display: inline-block;
    margin-bottom: 0;
    margin-left: var(--mf1-space-md);
  }

  .header__link, .header__nav-btn {
    font-size: 1.125rem;
  }

  .header__item--divider {
    height: 1em;
    width: 1px;
  }

  .header__trigger {
    display: none;
  }
}


/* -------------------------------- 

Forms 

-------------------------------- */

.cd-form-control {
  background: hsl(240, 4%, 95%);
  box-shadow: inset 0 0 0 1px hsl(240, 4%, 85%);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375em;
  font-size: 1em;
  line-height: 1.2;
  transition: 0.2s;
}

.cd-form-control::placeholder {
  opacity: 1;  
  color: hsl(240, 4%, 65%);
}

.cd-form-control:focus, .cd-form-control:focus-within {
  background: hsl(0, 0%, 100%);
  outline: none;
  box-shadow: inset 0 0 0 1px hsla(240, 4%, 85%, 0), 
              0 0 0 2px hsl(250, 84%, 54%), 
              0 0.3px 0.4px hsla(230, 13%, 9%, 0.025),
              0 0.9px 1.5px hsla(230, 13%, 9%, 0.05), 
              0 3.5px 6px hsla(230, 13%, 9%, 0.1);
}

/* -------------------------------- 

Icons 

-------------------------------- */

.cd-icon {
  --size: 1em;
  font-size: var(--size);
  height: 1em;
  width: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.cd-icon--is-spinning { /* rotate the icon infinitely */
  animation: cd-icon-spin 1s infinite linear;
}

@keyframes cd-icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cd-icon use { /* SVG symbols - enable icon color corrections */
  color: inherit;
  fill: currentColor;
}

/* --------------------------------

Component 

-------------------------------- */

.floating-label-grid {
  display: grid;
  gap: 1rem;
}

.floating-label {
  background: hsl(0, 0%, 100%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375em;
  line-height: 1;
  font-size: 0.9375rem;
  color: hsl(240, 4%, 65%);
  position: absolute;
  top: 0;
  left: calc(1rem - 0.5rem); /* calc((floating-label-control left padding) - (floating-label left padding)) */
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.2s;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
}

.floating-label-control {
  background-color: hsl(0, 0%, 100%);
  padding: 0.75rem calc(1rem + 24px) 0.75rem 1rem;
}

.floating-label-control:placeholder-shown { /* input with no content */
  background-color: hsl(240, 4%, 95%);
}

.floating-label-control:placeholder-shown + .floating-label { /* floating label state A - not visible */
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  transform: translateY(-25%);
}

.floating-label-control ~ .cd-icon {
  color: hsl(225, 4%, 47%);
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
}

/* focus */
.floating-label-control:focus {
  background-color: hsl(0, 0%, 100%);
}
.floating-label-control:focus ~ .cd-icon {
  color: hsl(250, 84%, 54%);
}
.floating-label-control:focus + .floating-label {
  color: hsl(250, 84%, 54%);
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-width-100\% {
  width: 100%;
}

.cd-position-relative {
  position: relative;
}
/* utility classes */
.mf1-max-width-lg {
  max-width: 80rem;
}

.mf1-container {
  width: calc(100% - 2*var(--mf1-space-md));
  margin-left: auto;
  margin-right: auto;
}

.mf1-position-relative {
  position: relative;
}



body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button,  textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* utility classes */
.fu0-position-relative {
  position: relative;
}

.fu0-z-index-1 {
  z-index: 1;
}

.fu0-padding-y-lg {
  padding-top: var(--fu0-space-lg);
  padding-bottom: var(--fu0-space-lg);
}

.fu0-container {
  width: calc(100% - 2*var(--fu0-space-md));
  margin-left: auto;
  margin-right: auto;
}

.fu0-max-width-adaptive-md {
  max-width: 32rem;
}

@media(min-width: 48rem) {
  .fu0-max-width-adaptive-md {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .fu0-max-width-adaptive-md {
    max-width: 64rem;
  }
}

.fu0-text-center {
  text-align: center;
}

.fu0-margin-bottom-lg {
  margin-bottom: var(--fu0-space-lg);
}

/*TOASTER*/

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #57c84d;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}