@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Labrada:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

body{
  background-color: #F0F6FF;
  color: #0F1324;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
}

.lock-scroll{
  overflow: hidden;
}

.logo{
  z-index: 9999;
}

@media(max-width: 767px){
  header,
  .container{
    padding-left: 24px;
    padding-right: 24px;
  }

  #button-header{
    /* position: fixed;
    bottom: 32px;
    left: 24px;
    right: 24px; */
    justify-content: center;
  }

  .button .arrows{
    animation: move-arrow 1.8s ease-in-out infinite;
  }
}

header{
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-style: normal;
  align-items: center;
  padding-top: 32px;
}

.button{
  display: inline-flex;
  gap: 8px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  background-color: #FFCF02;
  font-size: 18px;
  font-weight: 600;
  color: #0F1324;
  align-items: center;
  border-radius: 16px;
  line-height: 36px;
}

.button:hover .arrows{
  animation: move-arrow 1.4s ease-in-out infinite;
}

.wrap-svg{
  display: flex;
  justify-content: right;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.arrows{
  flex: none;
}

@keyframes move-arrow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(75px);
  }
}

.container{
  max-width: 792px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-top: 4em;
  padding-bottom: 4em;
}

.wrap-text{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  position: relative;
}

h1{
  font-weight: 500;
  font-size: 4em;
  line-height: 100%;
}

P{
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
}

span.text{
  font-size: 32px;
  font-weight: 400;
}


.tagline{
  width: fit-content;
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: #3462AC;
  padding: 8px 16px;
  border: 1px solid #3462AC;
  border-radius: 999px;
  margin: auto;
}

.highlights{
  position: relative;
}

.highlights::after{
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2251%22%20viewBox%3D%220%200%2038%2051%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.3267%201.3273C19.6745%201.01094%2020.1507%200.875366%2020.6128%200.962067C23.2227%201.45175%2026.7489%202.77192%2029.9292%204.46597C33.056%206.13151%2036.1596%208.3209%2037.6304%2010.6955L35.0796%2012.2755C34.0528%2010.6177%2031.5672%208.73705%2028.5191%207.11343C27.1181%206.36721%2025.6642%205.71093%2024.2857%205.17984C27.351%2010.6175%2028.7495%2018.9415%2025.3999%2030.132C21.154%2044.317%208.06996%2049.3603%202.03861%2050.131C1.21687%2050.236%200.464887%2049.6549%200.359904%2048.8332C0.254946%2048.0115%200.836209%2047.2606%201.65776%2047.1554C7.02618%2046.4696%2018.7469%2041.8968%2022.5259%2029.2726C25.3679%2019.7782%2024.5114%2012.7975%2022.4078%208.11929C22.3945%2011.2227%2021.5842%2014.925%2018.2017%2018.6076L15.9927%2016.5773C20.8678%2011.2693%2019.191%206.39932%2018.8423%202.57242C18.7998%202.10438%2018.9791%201.64358%2019.3267%201.3273Z%22%20fill%3D%22%23F4B43F%22%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  top: 0;
  left: 90%;
}

.word-map{
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  margin: auto;
}

#modal{
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 999;
  top: 0;
  right: 0;
  padding: 32px 24px;
  transform: translateX(100%);
  transition: .3s ease-in-out;
}

#modal.active{
  transform: translateX(0%);
  transition: .4s ease-in-out;
}

#modal.active .content-modal{
  transform: translateX(0);
  opacity: 1;
  transition: 1s ease-in-out;
  animation-delay: 1s;
}

@media(min-width: 500px){
  #modal{
    width: 600px;
    display: flex;
    justify-content: center;
  }
  .content-modal{
    max-width: 400px;
  }
}

#modal .content-modal{
  transform: translateX(16px);
  opacity: 0;
  transition: .2s ease-in-out;
}

#modal .content-modal a{
  display: block;
  text-align: right;
  color: #250300;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  /* margin-bottom: 112px; */
  margin-bottom: 64px;
}

#modal .content-modal p{
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #250300;
  margin-bottom: 48px;
  text-align: center;
}

#modal .content-modal form{
  background: #0e1324;
  border-radius: 16px;
  padding: 16px;
}

#modal .content-modal form .input-form{
  display: flex;
  flex-direction: column;
  height: 82px;
  padding: 12px 16px;
  background-color: #fff;
}

#modal .content-modal form .input-form{
  border-bottom: 2px solid #0d1324;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#modal .content-modal form .input-form label{
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
}

#modal .content-modal form .input-form input{
  border: none;
  width: 100%;
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  color: #250300;
}

#modal .content-modal form .input-form input::placeholder{
  color: #949494;
  font-size: 28px;
}

#modal .content-modal form .input-form input:active,
#modal .content-modal form .input-form input:focus{
  outline: none;
}

.wrap-button{
  padding: 32px 16px 16px 16px;
}

.wrap-button .button{
  border: none;
  width: 100%;
  font-size: 24px;
  justify-content: center;
}

.illustration{
  position: absolute;
  top: 24px;
  right: 24px;
  top: -5px;
  right: 0;
  z-index: -1;
}

@media (max-width: 767px) {
  .illustration{
    top: 35vh;
    right: -6vw;
    z-index: -1;
    width: 160px;
  }
}