:root {
  --padding: 0 1rem;
  --padding-big-screens: 0 4rem;
  --font: 'Roboto', sans-serif;
  --color-white: #ffffff;
  --color1: #111111;
  --color2: #3b75fc;
  --color3: #eaeaea;
  --color4: #fff1ed;
  --pText: 1rem;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

input,
select {
  font-family: var(--font);
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  color: #111111;
  font-size: 0.9rem;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.8rem;
}

h2 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

@media (min-width: 768px) {
  h2 {
    font-size: 3.5rem;
  }
}

h3 {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.2px;
}

h4 {
  font-weight: 300;
}

h5 {
  font-size: 0.8rem;
}

h6 {
  font-size: 0.67rem;
}

p {
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: 300;
  margin-top: 0.5rem;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color2);
  font-weight: 500;
}

hr {
  height: 1px;
  background-color: var(--color3);
  border: 0;
}

.consent {
  padding: 1rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--color3);
  z-index: 200;
}

.consent p {
  font-size: 0.9rem;
  margin: unset;
}

.consent button {
  color: var(--color1);
  background: var(--color3);
  border-radius: 50%;
  border: unset;
  font: var(--font);
  cursor: pointer;
  padding: 3px;
}
.consent button img {
  display: block;
  width: 25px;
}

.consent section {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .consent {
    padding: 1rem 4rem;
  }
}

.modal {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 17, 17, 0.4);
}

.modal-content {
  position: absolute;
  background-color: var(--color-white);
  overflow: auto;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
}

.modal-content .actions {
  position: sticky;
  bottom: 0;
}

.modal-content .close {
  position: sticky;
  top: 0;
  text-align: right;
  background-color: var(--color-white);
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--color3);
  z-index: 150;
}

.modal-content .actions {
  display: grid;
  z-index: 150;
  background-color: var(--color-white);
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--color3);
}

@media (min-width: 768px) {
  .modal-content .actions {
    padding: 2rem;
  }
}

.modal-content .actions button {
  padding: 1rem;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 400;
}

.modal-content .actions .btn-gray {
  background-color: var(--color3);
  color: #11111196;
}

.modal-content .actions .btn-update {
  background-color: var(--color1);
  color: #fff;
}

.modal-content .close button {
  width: 40px;
  height: 40px;
  border: none;
  background-image: url(/assets/img/close.svg);
  background-color: #fff;
  cursor: pointer;
}

.modal-content .radios {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .modal-language {
    min-height: 300px;
    max-height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.modal-content .modal-cookies {
  display: grid;
  gap: 2rem;
  padding: 2rem;
}

.modal-content .modal-cookies h1 {
  font-size: 1.8rem;
  margin-bottom: unset;
}

.modal-content .modal-cookies h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: unset;
}

.modal-content .modal-cookies p {
  font-size: var(--pText);
  font-weight: 300;
}

@media (min-width: 768px) {
  .modal-content {
    min-width: 750px;
    max-width: 750px;
    margin: 0 auto;
  }
}

.modal-content .continents-countries {
  display: grid;
  min-height: inherit;
  gap: 1rem;
  padding: 0 2rem;
}

.modal-content .continents-countries ul li {
  margin-bottom: 0.5rem;
}

.modal-content .continents-countries ul li a {
  font-weight: 400;
}

@media (min-width: 768px) {
  .modal-content .continents-countries {
    grid-template-columns: 1fr 3fr;
  }

  .modal-content .continents-countries div:first-child {
    border-right: 1px solid #eaeaea;
  }
}

.modal-content .continents-countries div {
  padding-top: 2rem;
}

.modal-content .continents-countries .continents ul li {
  cursor: pointer;
}

.modal-content .current-continent {
  font-weight: 500 !important;
  color: var(--color1);
}

.date {
  color: #1111116e;
  font-size: 0.8rem;
}

.btn-primary {
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  background: unset;
  border: 1px solid var(--color2);
  color: var(--color2);
  border-radius: 4rem;
}

.btn-more {
  border: 1px solid var(--color1);
  border-radius: 5px;
  color: var(--color1);
  padding: 0.8rem 1.5rem;
  display: inline-block;
}

.logo {
  background: url(/assets/img/logo.svg);
  width: 77px;
  height: 29.3px;
  display: block;
  background-size: cover;
}

.logo-white {
  background: url(/assets/img/uailu-white.svg);
  width: 77px;
  height: 29.3px;
  display: block;
  background-size: cover;
}
.back {
  background: #0000000f;
  font-size: 2.5rem;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  position: fixed;
  width: 100%;
  background: var(--color-white);
  border-bottom: 1px solid var(--color3);
  top: 0;
  z-index: 100;
}

header .small-screens {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

header a {
  font-size: 0.95rem;
  color: #111111;
  font-weight: 400;
}

header .small-screens .menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

header .small-screens .menu button {
  background: unset;
  border: unset;
}

header .small-screens .menu svg path:last-child {
  fill: #111111;
}

.special-header .small-screens .menu svg path:last-child {
  fill: rgba(255, 255, 255, 1) !important;
}

header .big-screens {
  display: none;
}

@media (min-width: 1024px) {
  header .big-screens {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  header .small-screens {
    display: none;
  }
}

header .signup {
  display: none;
}

@media (min-width: 1024px) {
  header {
    padding: 0.8rem 4rem;
    justify-content: space-between;
    display: flex;
    gap: 1rem;
    position: fixed;
    top: 0;
  }

  header .signup {
    display: block;
  }

  header .logo-menu {
    display: flex;
    align-items: center;
    gap: 4rem;
  }

  header .logo-menu .menu {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  header .signin-create {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
}

header .btn-action {
  font-size: 1rem;
  padding: 0.7rem 1rem;
  background: unset;
  border: 1px solid var(--color2);
  color: var(--color2);
  font-weight: 500;
}

.menu-small-screens {
  position: fixed;
  background: var(--color1);
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 150;
  padding: 1rem;
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.menu-small-screens .menu {
  display: grid;
  height: inherit;
}

.menu-small-screens .menu div {
  margin: 0 auto;
}

.menu-small-screens ul {
  margin-top: 2rem;
}

.menu-small-screens ul li {
  margin-bottom: 1.5rem;
}

.menu-small-screens ul li a {
  color: var(--color-white);
  font-size: 1.8rem;
  text-align: center;
}

.menu-small-screens .close {
  text-align: right;
  margin-top: 1rem;
}

.menu-small-screens .close button {
  background: unset;
  border: unset;
}

.btn-action-black {
  color: #fff;
  border: 1px solid var(--color1);
  padding: 0.5rem 1rem;
  background: var(--color1);
  border-radius: 3px;
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
}

.btn-mini-black {
  display: inline-block;
  padding: 1rem 4em;
  border-radius: 24px;
  color: var(--color-white);
  background: var(--color1);
  font-size: 1rem;
}

.btn-mini-white {
  display: block;
  padding: 1rem 4em;
  border-radius: 24px;
  color: var(--color-white);
  background: var(--color1);
  font-size: 1rem;
}

/* CUSTOM RADIO */

.custom-radio {
  display: flex;
  position: relative;
  padding-left: 33px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 25px;
  align-items: center;
}

.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eaeaea;
  border-radius: 50%;
}

.custom-radio input:checked ~ .radio-mark {
  background-color: var(--color1);
}

.radio-mark:after {
  content: '';
  position: absolute;
  display: none;
}

.custom-radio input:checked ~ .radio-mark:after {
  display: block;
}

.custom-radio .radio-mark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

main {
  margin-top: 68px;
}

@media (min-width: 768px) {
  main {
    padding: 2rem 4rem;
  }
}

.home {
  padding: unset;
  display: grid;
  gap: 5rem;
}

@media (min-width: 768px) {
  .home {
    gap: 7rem;
  }
}

.home h2 {
  font-size: 2.2rem;
}

.highlight {
  display: grid;
  gap: 1rem;
  grid-auto-rows: max-content;
  margin: 0 1rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .highlight {
    max-width: 1100px;
    margin: 0 auto;
    gap: 2rem;
    padding-top: 3rem;
  }
}

.highlight h1 {
  text-align: center;
  margin-bottom: unset;
  font-size: 2.5rem;
}

.highlight .action {
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}

@media (min-width: 550px) {
  .highlight h1 {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .highlight h1 {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .highlight h1 {
    font-size: 6rem;
  }
}

.highlight p {
  text-align: center;
  margin: unset;
}

@media (min-width: 1024px) {
  .highlight p {
    max-width: 800px;
    margin: 0 auto;
  }
}

.why-uailu {
  background-color: var(--color4);
  margin: 0 1rem;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem;
}

@media (min-width: 1024px) {
  .why-uailu {
    margin: 0 4rem;
  }
}

@media (min-width: 1024px) {
  .why-uailu .phase {
    max-width: 500px;
  }
}

.why-uailu .phase h2 {
  font-weight: 700;
  margin: unset;
}

@media (min-width: 550px) {
  .why-uailu .phase h2 {
    font-size: 2.9rem;
  }
}

@media (min-width: 768px) {
  .why-uailu .phase h2 {
    font-size: 3.4rem;
  }
}

@media (min-width: 1024px) {
  .why-uailu .phase h2 {
    font-size: 5.5rem;
  }
}

@media (min-width: 1024px) {
  .why-uailu .phase h2 {
    font-size: 5rem;
  }
}
.why-uailu .reasons {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .why-uailu .reasons {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .why-uailu .reasons {
    grid-template-columns: unset;
  }
}

.why-uailu .reasons .reason {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .why-uailu .reasons .reason {
    max-width: 340px;
  }
}

.why-uailu .reasons .reason p {
  margin-top: unset;
}

.why-uailu .reasons .reason span {
  width: 55px;
  height: 55px;
  display: block;
}

.why-uailu .reasons .reason h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

.btn-action {
  background: var(--color2);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  border-radius: 30px;
  width: max-content;
  display: grid;
  justify-self: center;
  font-size: 1.3rem;
}

.website {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .website {
    grid-template-columns: 1fr 1fr;
    padding: 0 4rem;
  }
}

.website-more .screenshot {
  position: relative;
  order: 1;
  height: 460px;
  max-width: 570px;
}

@media (min-width: 1024px) {
  .website-more .screenshot {
    max-width: 650px;
  }
}

.website-more .screenshot .mobile {
  position: absolute;
  top: 5rem;
  left: 2rem;
  width: 220px;
}

@media (min-width: 1024px) {
  .website-more .screenshot .mobile {
    left: -3rem;
  }
}

.website-more .screenshot .mobile img {
  height: auto;
  border-radius: 9px;
}

.website .screenshot-effects {
  position: relative;
  width: 320px;
  height: 394px;
  margin: 0 auto;
}

@media (min-width: 425px) {
  .website .screenshot-effects {
    height: 513px;
    width: 425px;
  }
}

@media (min-width: 768px) {
  .website .screenshot-effects {
    height: 447px;
    width: 364px;
  }
}

@media (min-width: 1024px) {
  .website .screenshot-effects {
    height: 569px;
    width: 492px;
  }
}

@media (min-width: 1366px) {
  .website .screenshot-effects {
    height: 659px;
    width: 640px;
  }
}

.website .screenshot-effects .screenshot {
  position: absolute;
  height: 340px;
  width: 206px;
  max-width: 345px;
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);
  border-radius: 2.2rem;
  margin: 0 auto;
  z-index: 80;
  left: 0;
  right: 0;
}

.website .screenshot-effects .screenshot img {
  border-radius: 2.2rem;
  width: 100%;
}

@media (min-width: 425px) {
  .website .screenshot-effects .screenshot {
    height: 432px;
    width: 254px;
  }
}

@media (min-width: 768px) {
  .website .screenshot-effects .screenshot {
    height: 402px;
    width: 244px;
  }
}

@media (min-width: 1024px) {
  .website .screenshot-effects .screenshot {
    height: 520px;
    width: 312px;
  }
}

@media (min-width: 1366px) {
  .website .screenshot-effects .screenshot {
    height: 603px;
    width: 373px;
  }
}

.website .screenshot-effects .effect {
  position: absolute;
  height: 294px;
  width: 194px;
  border-radius: 2rem;
  background-image: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
  z-index: 70;
  left: 23px;
  top: 100px;
}

@media (min-width: 425px) {
  .website .screenshot-effects .effect {
    height: 413px;
    width: 251px;
    left: 35px;
  }
}

@media (min-width: 768px) {
  .website .screenshot-effects .effect {
    height: 347px;
    width: 251px;
    left: 19px;
  }
}

@media (min-width: 1024px) {
  .website .screenshot-effects .effect {
    height: 468px;
    width: 303px;
    left: 26px;
  }
}

@media (min-width: 1366px) {
  .website .screenshot-effects .effect {
    height: 559px;
    width: 303px;
    left: 60px;
  }
}

.website .screenshot-effects .effect-two {
  position: absolute;
  height: 231px;
  width: 150px;
  border-radius: 2rem;
  background-color: #fff1ed;
  z-index: 70;
  right: 18px;
  top: 100px;
}

@media (min-width: 425px) {
  .website .screenshot-effects .effect-two {
    height: 314px;
  }
}

@media (min-width: 768px) {
  .website .screenshot-effects .effect-two {
    height: 252px;
    right: 0;
  }
}

@media (min-width: 1024px) {
  .website .screenshot-effects .effect-two {
    height: 350px;
    right: 0;
  }
}

@media (min-width: 1366px) {
  .website .screenshot-effects .effect-two {
    height: 380px;
    right: 50px;
  }
}

.website .apresentation {
  margin: 0 1rem;
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
}

.website .apresentation .contrast {
  margin-bottom: 0.5rem;
}

.website .apresentation .button {
  margin-top: 2rem;
}

.website .apresentation .button a {
  font-size: 1.2rem;
}

.contrast {
  font-weight: 600;
  color: #111111a8;
  letter-spacing: 2px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.website-more {
  align-items: center;
  display: grid;
  gap: 5rem;
  padding: 0 1rem;
  justify-items: center;
}

.website-more .more .area .icon {
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff1ed;
  border-radius: 50%;
}

.website-more .more .area .icon svg {
  margin-top: -2rem;
}

.website-more .screenshot img {
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);
  width: 100%;
  border-radius: 9px 0 0 9px;
  text-align: right;
}

@media (min-width: 970px) {
  .website-more {
    grid-template-columns: 1fr 1.2fr;
    padding: 0 4rem;
  }
}

.website-more .more {
  display: grid;
  gap: 4rem;
  order: 2;
}

@media (min-width: 1024px) {
  .website-more .more {
    order: 1;
  }
}

@media (min-width: 1024px) {
  .website-more .more {
    grid-template-columns: unset;
  }
}

.website-more .more .area {
  display: flex;
  gap: 2rem;
  flex-flow: wrap;
}

.website-more .more .area h3 {
  font-size: 2rem;
  font-weight: 500;
}

.blog {
  display: grid;
  gap: 2.5rem;
  margin: 0 1rem;
  justify-items: center;
}

@media (min-width: 1024px) {
  .blog {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    margin: 0 4rem;
  }
}

.blog .apresentation {
  display: grid;
  gap: 1.5rem;
  grid-auto-rows: max-content;
  align-content: center;
}

.blog .image-icons {
  position: relative;
}

.blog .image-icons div {
  gap: 1rem;
  display: grid;
}

.blog .image-icons div:first-child {
  text-align: right;
  justify-content: right;
}

.blog .image-icons {
  max-width: 570px;
}

.blog .image-icons img {
  max-width: 100%;
  border-radius: 5px;
}

.blog .image-icons .icons {
  position: absolute;
  display: flex;
  gap: 0.9rem;
  flex-flow: wrap;
  bottom: 1rem;
}

@media (min-width: 768px) {
  .blog .image-icons .icons {
    left: -2rem;
  }
}

.blog .image-icons .icons span {
  background-color: #111111;
  width: 60px;
  height: 50px;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .blog .image-icons .icons span {
    width: 80px;
    height: 56px;
  }
}

.blog .image-icons .phrase {
  left: 0;
  bottom: -4rem;
  position: absolute;
  gap: unset;
  display: unset;
}

.post {
  position: absolute;
  top: 2rem;
  left: 1rem;
  border-top: 7px solid #eaeaea4d;
  border-radius: 5px;
  box-shadow: rgb(0 0 0 / 5%) 1px 3px 11px 0px;
  padding: 1rem;
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .post {
    top: 7rem;
    left: 4rem;
    right: -1rem;
  }
}

.blog .image-icons .phrase .line {
  width: 2px;
  height: 35px;
  display: block;
  background-color: #f9e0d9;
  margin: 0 auto;
}

.blog .image-icons .phrase .line::after {
  display: block;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: -1px;
  background: #e4cbc4;
}

.blog .image-icons .phrase p {
  font-size: 0.9rem;
  background-color: #f9e0d9;
  border-radius: 5px;
  padding: 0.5rem 0.8rem;
  color: #755e57;
}

.bio-link {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  position: relative;
  width: 100%;
  padding: 0 1rem;
}

.bio-link h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: transparent;
  background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  background-size: 1000px 100%;
  animation: title-effect 50s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

@media (min-width: 768px) {
  .bio-link h2 {
    font-size: 3.5rem;
  }
}

@keyframes title-effect {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 10000px;
  }
}

.bio-link p {
  font-weight: 300;
  text-align: center;
  max-width: 550px;
  margin: 0 auto;
}

.bio-link .phone {
  width: 287px;
  border-radius: 2.2rem;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: rgb(0 0 0 / 8%) -2px -3px 96px 0;
  border: 7px solid #0e0e0e;
}

.bio-link .phone img {
  width: 100%;
  display: block;
}

@media (min-width: 1024px) {
  .bio-link .phone {
    margin-top: 3rem;
    height: 557px;
  }
}

@media (min-width: 375px) {
  .bio-link .phone {
    width: auto;
    height: auto;
    display: inline-flex;
  }
  .bio-link .phone img {
    width: 320px;
    height: 603px;
  }
}

.bio-link .phone ul {
  display: grid;
  height: max-content;
  gap: 1rem;
  margin: 2rem;
}

.bio-link .phone li {
  border: 2px solid var(--color-white);
  border-radius: 10px;
  padding: 1rem 2rem;
  color: var(--color-white);
}

.bio-link .phone .photo {
  margin: 0 auto;
  text-align: center;
  margin-top: 2rem;
}

.bio-link .phone .photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/* EFEITO */

.effect-icons {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  align-items: center;
  position: absolute;
  box-shadow: 4px -1px 14px 0 rgb(0 0 0 / 15%);
}

@media (min-width: 1024px) {
  .effect-icons {
    width: 62px;
    height: 62px;
    box-shadow: unset;
  }
}

.effect-icons:nth-child(8) {
  top: 78%;
  left: 12%;
  background-color: #1da1f2;
  transform: rotate(341deg);
}

.effect-icons:nth-child(9) {
  top: 57%;
  left: 75%;
  background-color: #2196f3;
  transform: rotate(222deg);
}

.effect-icons:nth-child(3) {
  top: 40%;
  left: 75%;
  background-color: #ffb319;
  transform: rotate(80deg);
}

.effect-icons:nth-child(4) {
  display: none;
}

.effect-icons:nth-child(5) {
  display: none;
}

.effect-icons:nth-child(6) {
  display: none;
}

.effect-icons:nth-child(7) {
  top: 48%;
  left: 4%;
  background-color: #ff0000;
  transform: rotate(12deg);
}

.effect-icons:nth-child(10) {
  top: 93%;
  left: 81%;
  background-color: #000000;
  transform: rotate(100deg);
}

.effect-icons:nth-child(11) {
  display: none;
}

@media (min-width: 1024px) {
  .effect-icons:nth-child(8) {
    display: grid;
    top: 22%;
    left: 20%;
  }

  .effect-icons:nth-child(9) {
    display: grid;
    top: 30%;
    left: 70%;
  }

  .effect-icons:nth-child(3) {
    display: grid;
    top: 40%;
  }

  .effect-icons:nth-child(4) {
    display: grid;
    background-color: #ffdb00;
    transform: rotate(290deg);
    top: 60%;
    left: 85%;
  }

  .effect-icons:nth-child(5) {
    display: grid;
    transform: rotate(68deg);
    background-color: #b82a29;
    top: 45%;
    left: 15%;
  }

  .effect-icons:nth-child(6) {
    display: grid;
    background-color: #60d17f;
    transform: rotate(333deg);
    top: 80%;
    left: 90%;
  }

  .effect-icons:nth-child(7) {
    display: grid;
    top: 47%;
    left: 75%;
  }

  .effect-icons:nth-child(10) {
    display: grid;
    top: 95%;
    left: 12%;
  }

  .effect-icons:nth-child(11) {
    display: grid;
    background-color: #50b0fa;
    transform: rotate(120deg);
    top: 55%;
    left: 33%;
  }
}

@media (min-width: 1366px) {
  .effect-icons:nth-child(11) {
    left: 35%;
    box-shadow: 4px -1px 14px 0 rgb(0 0 0 / 15%);
  }
}

/* Benefits */

.benefits {
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .benefits {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas:
      'title content'
      'pagination content';
    padding: 0 4rem;
  }
}

@media (min-width: 1024px) {
  .benefits .title {
    grid-area: title;
  }
}

.line {
  margin: 1rem 0;
  display: block;
  width: 75px;
  height: 5px;
  background-color: var(--color4);
  border-radius: 56px;
}

@media (min-width: 1024px) {
  .benefits .line {
    grid-area: line;
  }
}

.benefits .pagination {
  display: flex;
  flex-wrap: wrap;
  margin: 3rem 0;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .benefits .pagination {
    grid-area: pagination;
    margin: unset;
    display: grid;
    height: max-content;
    gap: 1.7rem;
  }
}

.pagination span {
  margin-right: 20px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: #8d91a3;
  font-size: 1rem;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .pagination span {
    margin-bottom: unset;
  }
}

.pagination .select {
  color: var(--color1);
}

.benefits .content {
  width: 100%;
  border-radius: 24px;
  background: var(--color1);
}

@media (min-width: 1024px) {
  .benefits .content {
    display: grid;
    grid-area: content;
    gap: 10rem;
  }
}

.benefits .content .hidden {
  display: none;
  opacity: 0;
}

.benefits .content h3 {
  color: var(--color-white);
  font-size: 1.5rem;
  display: flex;
  align-self: center;
  gap: 1rem;
  font-weight: 500;
  padding: 2rem;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .benefits .content h3 {
    font-size: 2rem;
  }
}
.benefits .content h4 {
  color: var(--color-white);
  font-weight: 600;
  font-size: 1.2rem;
}

@media (min-width: 1024px) {
  .benefits .content h4 {
    font-size: 2rem;
    font-weight: 500;
  }
}

.benefits .content .emphasis {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .benefits .content .emphasis {
    font-size: 1.5rem;
  }
}

.benefits .content p {
  color: var(--color-white);
}

.benefits .content .text {
  display: grid;
  gap: 1rem;
  padding: 0 2rem;
  height: max-content;
}

.benefits .content .screen {
  background: #fff;
  margin: 0 auto;
  border-radius: 23px;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .benefits .content .text-screen {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    padding-top: 4rem;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .benefits .content .screen {
    width: 100%;
    height: auto;
    border-radius: unset;
    margin-bottom: unset;
    background: #111111;
    height: 380px;
  }
}

/* Section Pricing */

.pricing {
  margin: 10rem 0;
}

.pricing .apresentation {
  margin-bottom: 4rem;
}

.pricing .apresentation .contrast {
  font-weight: 600;
  color: #e63802;
  letter-spacing: 2px;
  font-size: 0.85rem;
  text-transform: uppercase;
  display: block;
  text-align: center;
}

.pricing h2 {
  text-align: center;
  margin: 0.8rem 0;
}

.pricing p {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.pricing .price {
  font-weight: 300;
  font-size: 2.8rem;
  text-align: center;
  display: block;
}

.pricing .slide {
  max-width: 600px;
  margin: 1.5rem auto;
}

.pricing .slide input[type='range'] {
  height: 35px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background-color: unset;
}

.pricing .slide input[type='range']:focus {
  outline: none;
}
.pricing .slide input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #eaeaea;
  border-radius: 8px;
  border: 0px solid #000000;
}

.pricing .slide input[type='range']::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 5px solid #3160cc;
  height: 35px;
  width: 35px;
  border-radius: 20px;
  background: var(--color-white);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

.pricing .slide input[type='range']:focus::-webkit-slider-runnable-track {
  background: #eaeaea;
}
.pricing .slide input[type='range']::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: var(--color2);
  border-radius: 8px;
  border: 0px solid #000000;
}

.pricing .slide input[type='range']::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid var(--color2);
  height: 23px;
  width: 23px;
  border-radius: 20px;
  background: #a1d0ff;
  cursor: pointer;
}

.pricing .slide input[type='range']::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.pricing .slide input[type='range']::-ms-fill-lower {
  background: var(--color2);
  border: 0px solid #000000;
  border-radius: 16px;
  box-shadow: 0px 0px 0px #000000;
}

.pricing .slide input[type='range']::-ms-fill-upper {
  background: var(--color2);
  border: 0px solid #000000;
  border-radius: 16px;
  box-shadow: 0px 0px 0px #000000;
}

.pricing .slide input[type='range']::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid var(--color2);
  height: 23px;
  width: 23px;
  border-radius: 20px;
  background: #a1d0ff;
  cursor: pointer;
}

.pricing .slide input[type='range']:focus::-ms-fill-lower {
  background: var(--color2);
}

.pricing .slide input[type='range']:focus::-ms-fill-upper {
  background: var(--color2);
}

.pricing .page-views {
  display: flex;
  font-size: 1.2rem;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.pricing .bio-link-free {
  margin: 1rem 0;
  text-align: center;
}

.pricing .bio-link-free p {
  font-size: 1rem;
  background-color: #3b75fc17;
  border-radius: 5px;
  padding: 0.5rem 0.8rem;
  color: #111111b8;
  display: inline-flex;
  line-height: 1;
  align-items: center;
  gap: 0.5rem;
}

/* this emoji designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0 */

.pricing .bio-link-free p svg {
  height: 20px;
}

.pricing .actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  margin-top: 4rem;
}

.inspiration {
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .inspiration {
    padding: 0 4rem;
  }
}

.inspiration img {
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);
  width: 100%;
  border-radius: 9px;
}

.inspiration h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.inspiration p {
  font-weight: 300;
  text-align: center;
  max-width: 550px;
  margin: 0 auto;
}

.inspiration .list {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.inspiration .list .desktop {
  width: 100%;
}

@media (min-width: 425px) {
  .inspiration .list .desktop {
    width: 393px;
  }
}

.inspiration .list .mobile {
  width: 200px;
}

@media (min-width: 425px) {
  .inspiration .list .mobile {
    width: 161px;
  }
}

.why {
  background-color: #000000;
  display: grid;
  gap: 2rem;
  padding: 5rem 1rem;
}

.why .contrast {
  color: #ffffffa3;
}

.why .content {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .why {
    grid-template-columns: 1fr 1fr;
    padding: 7rem 5rem;
    gap: 8rem;
  }
}

.why h2 {
  color: var(--color-white);
  font-size: 3.5rem;
  font-weight: 700;
  max-width: 700px;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .why h2 {
    font-size: 5rem;
  }
}

.why h3 {
  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: 500;
}

.why p {
  color: var(--color-white);
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: 300;
}

.testimonial {
}

.testimonial .player {
  background-color: #000000;
}

.testimonial .content {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 1rem;
}

@media (min-width: 1024px) {
  .testimonial .content {
    width: 62%;
    margin: 0 auto;
    padding: 7rem 0;
  }
}

.testimonial h3 {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 100;
}

.testimonial .content blockquote p {
  text-align: center;
  font-size: 2.2rem;
  color: #111111;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .testimonial .content blockquote p {
    font-size: 3.3rem;
  }
}

.testimonial .content figcaption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .testimonial {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.faq {
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .faq {
    padding: 0 4rem;
  }
}

.faq .questions {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .faq .questions {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    margin-top: 4rem;
  }
}

.faq .questions h3 {
  font-weight: 500;
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .faq .questions h3 {
    min-height: 56px;
  }
}

.faq .questions p {
  font-size: var(--pText);
}

.banner {
  margin: 0 1rem;
  background-image: url("/assets/img/background-index.svg");
  border-radius: 10px;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
  gap: 1rem;
  background-color: rgb(59, 117, 252);
}

@media (min-width: 768px) {
  .banner {
    margin: 0 4rem;
  }
}

.banner p {
  color: #fff;
  max-width: 930px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .banner {
    margin: 0 4rem;
  }
}

.banner h4 {
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: 500;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .banner h4 {
    font-size: 3.2rem;
  }
}

.banner a {
  display: inline-block;
  padding: 1rem 3rem;
  border-radius: 24px;
  color: var(--color2);
  background: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
}

footer {
  padding: 0 1rem;
  margin-top: 5rem;
}

@media (min-width: 768px) {
  footer {
    padding: 0 4rem;
    margin-top: 7rem;
  }
}

footer .menu {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (min-width: 425px) {
  footer .menu {
    display: flex;
  }
}

footer .menu div {
  display: grid;
  height: min-content;
}

footer .menu div h4 {
  margin-bottom: 0.8rem;
  font-weight: 500;
}

footer .menu div a {
  width: max-content;
  margin-bottom: 15px;
  color: var(--color1);
  font-size: 0.95rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  footer .menu div a {
    margin-bottom: 8px;
  }
}

footer .menu div button {
  width: max-content;
  margin-bottom: 8px;
  color: var(--color1);
  font-size: 0.95rem;
  font-weight: 400;
  background: unset;
  border: unset;
  font-family: var(--font);
  cursor: pointer;
  outline: unset;
}

footer .social-oss {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eaeaea;
  padding: 2rem 0;
  flex-flow: wrap;
  gap: 2rem;
}

footer .social-oss .oss {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

footer .social-oss .oss a {
  color: var(--color1);
  font-weight: 400;
}

/* GITHUB HOVER */
footer .social-oss .oss a svg path:last-child {
  fill: rgba(196, 196, 196);
}

footer .social-oss .oss a:hover svg path:last-child {
  fill: #24292f;
}

footer .social {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

footer .social a svg path:last-child {
  fill: rgba(196, 196, 196);
}

/* INSTAGRAM HOVER */
footer .social a:nth-child(1):hover svg path:last-child {
  fill: red;
}

footer .social a:nth-child(2):hover svg path:last-child {
  fill: red;
}

/* FACEBOOK HOVER */
footer .social a:nth-child(3):hover svg path:last-child {
  fill: #1877f2;
}

/* TWITTER HOVER */
footer .social a:nth-child(4):hover svg path:last-child {
  fill: #1d9bf0;
}

/* LINKEDIN HOVER */
footer .social a:nth-child(5):hover svg path:last-child {
  fill: #0966c2;
}

/* PINTEREST HOVER */
footer .social a:nth-child(6):hover svg path:last-child {
  fill: #e84430;
}

/* TIKTOK HOVER AND CORRECTION */
footer .social a:nth-child(7) {
  margin-top: 2px;
}

footer .social a:nth-child(7):hover svg path:last-child {
  fill: #000000;
}

/* REDDIT HOVER */
footer .social a:nth-child(8):hover svg path:last-child {
  fill: #f04732;
}

footer .copyright-language {
  display: grid;
  gap: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 425px) {
  footer .copyright-language {
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e8efff;
  }
}

footer .copyright-language .language {
  background-color: #e8efff;
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  grid-row: 1;
  max-width: fit-content;
}

/* LEGAL */

.legal {
  padding: 2rem 1rem 0 1rem;
}

.legal #manage button {
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .legal {
    display: flex;
    flex-flow: row-reverse;
    gap: 5rem;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .legal {
    padding: 2rem 4rem 0 4rem;
  }
}

.legal .content {
  display: grid;
  gap: 2rem;
}

.legal h2 {
  font-size: 2rem;
  font-weight: 500;
}

.legal h4 {
  font-weight: 500;
  font-size: 1.2rem;
}

.legal .types {
  display: grid;
  gap: 1.5rem;
}

.legal .content {
  counter-reset: section;
}

.legal .content ol {
  max-width: 650px;
}

.legal .content ol li {
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: 300;
  margin-top: 2rem;
  position: relative;
}

.legal .content ol li p {
  font-size: 1.2rem;
}

.legal .content .list {
  margin-left: 2rem;
}

.legal .content .ball li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background-color: #eaeaea;
  margin-top: 10px;
}

.legal .location p {
  margin: unset;
}

.delete-cookies {
  margin-top: 2rem;
}

.legal .responsive-table {
  overflow-x: auto;
}

.delete-cookies ul {
  display: grid;
  gap: 1rem;
}

.delete-cookies ul li {
  list-style-type: circle;
  margin-left: 1rem;
}

.delete-cookies ul li a {
  font-size: 1rem;
}

.cookies-table {
  border-collapse: collapse;
  width: 99%;
  margin-top: 0.8rem;
}

.cookies-table td,
.cookies-table th {
  border: 1px solid #eaeaea;
  padding: 1.5rem;
  font-size: 0.9rem;
}

.cookies-table tr:nth-child(even) {
  background-color: #edf2fe;
}

.cookies-table tr:hover {
  background-color: #ddd;
}

.cookies-table th {
  padding: 1rem;
  text-align: left;
  background-color: var(--color1);
  color: white;
  font-size: 1.3rem;
  font-weight: 400;
  border: unset;
}

/* CONTACT */

.contact {
  padding: 2rem 1rem 0 1rem;
  display: grid;
  gap: 5rem;
}

@media (min-width: 1024px) {
  .contact {
    padding: 2rem 4rem 0 4rem;
  }
}

.contact .title-back {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.contact p {
  max-width: 700px;
}

.type-contact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.type-contact div {
  border: 1px solid var(--color3);
  border-radius: 2px;
  padding: 2rem;
  display: grid;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.type-contact div p {
  font-size: var(--pText);
}

.type-contact div a {
  width: max-content;
}

.type-contact h3 {
  font-weight: 400;
}

.contact .type-contact .business a {
  padding: 1rem 2rem;
}

/* REPORT */

.report {
  padding: 2rem 1rem 0 1rem;
  display: grid;
  gap: 5rem;
}

@media (min-width: 1024px) {
  .report {
    padding: 2rem 4rem 0 4rem;
  }
}

.report .notice {
  font-size: 0.9rem;
  background-color: #3b75fc17;
  border-radius: 5px;
  padding: 0.5rem 0.8rem;
  color: #111111b8;
}

@media (min-width: 1024px) {
  .report-info {
    grid-template-columns: 1fr 1fr;
  }
}

.report .title-back {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.report p {
  max-width: 700px;
}

.type-report {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.report .government {
  overflow-wrap: anywhere;
  background: #e8efff;
  width: fit-content;
  padding: 1.5rem;
  border-radius: 5px;
  display: grid;
  gap: 0.8rem;
}

.report .government .btn-mini-black {
  padding: 1rem 3rem;
}

.type-report div {
  border: 1px solid var(--color3);
  border-radius: 2px;
  padding: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.type-report div p {
  font-size: var(--pText);
}

.type-report div a {
  display: inline-block;
}

.report h3 {
  font-weight: 400;
}

.form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form {
  display: grid;
  gap: 1.5rem;
  box-shadow: -2px -1px 14px 0 rgb(0 0 0 / 5%);
  padding: 2rem;
}

.form input,
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.5rem;
  font-size: 0.9rem;
  border-radius: 3px;
  border: 1px solid var(--color3);
  color: var(--color1);
  resize: none;
}

.form select {
  background-color: var(--color3);
}

.form textarea:focus {
  border: 1px solid var(--color1);
  outline: none;
}

.form input:focus {
  border: 1px solid var(--color1);
  outline: none;
}

.container {
  display: grid !important;
  position: relative;
  align-items: center;
  padding-left: 35px;
  min-height: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #eaeaea;
  border-radius: 3px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--color1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* BRAND */

.brand {
  padding: unset;
  margin: unset;
  display: grid;
  gap: 5rem;
}

.brand .hero {
  background-color: var(--color1);
  padding: 5rem 1rem;
}

@media (min-width: 1024px) {
  .brand .hero {
    padding: 0 4rem;
    padding-top: 8rem;
    padding-bottom: 2rem;
  }
}

.brand .rules {
  padding: 0 1rem;
}

.brand .rules ol {
  padding-top: 0.5rem;
}

.brand .rules li {
  display: flex;
  font-size: 1.3rem;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: 300;
}

.brand .rules div {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color3);
  margin-right: 0.5rem;
  display: grid;
  align-items: center;
  justify-items: center;
}

.brand .rules span {
  margin-right: 4px;
  font-weight: 500;
  color: #a33038;
}

@media (min-width: 1024px) {
  .brand .rules {
    padding: 0 4rem;
  }

  .brand .colors {
    padding: 0 4rem;
  }
}

.brand .hero h1 {
  color: var(--color-white);
}

.brand .hero p {
  color: var(--color-white);
}

.brand p {
  max-width: 700px;
}

.brand h2 {
  font-size: 2.5rem;
}

.brand .colors .list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3rem;
  margin: 2rem 0;
}

.brand .colors .list div {
  height: 200px;
  border-radius: 10px;
  display: grid;
  align-items: center;
}

.brand .colors .list div span {
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.5rem;
  font-size: 0.8rem;
}

.brand .colors .list .primary {
  background-color: var(--color1);
}

.brand .colors .list .secondary {
  background-color: var(--color2);
}

.brand .colors .list .tertiary {
  background-color: #fff1ed;
}

.brand .colors .list .tertiary span {
  color: #9a9a9a;
}

.brand .colors .list .quaternary {
  background-color: #3b75fc17;
}

.brand .colors .list .quaternary span {
  color: #9a9a9a;
}

.brand .colors .list .quinary {
  background-color: #eaeaea;
}

.brand .colors .list .quinary span {
  color: #9a9a9a;
}

.brand .logos {
  padding: 0 1rem;
}

.brand .colors {
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .brand .logos {
    padding: 0 4rem;
  }
  .brand .colors {
    padding: 0 4rem;
  }
}

.brand .logos .list {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.brand .logos .background {
  padding: 2rem;
  background-color: var(--color-white);
  background-image: linear-gradient(
      45deg,
      #f6f6f6 25%,
      transparent 0,
      transparent 75%,
      #f6f6f6 0,
      #f6f6f6
    ),
    linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6);
}

.brand .logos .pattern {
  padding: 1.5rem;
  padding-bottom: 3rem;
  min-width: 200px;
  justify-items: center;
  position: relative;
  display: grid;
  align-content: center;
  background-size: 30px 30px;
  background-position: 0 0, 45px 45px;
}

@media (min-width: 768px) {
  .brand .logos .pattern {
    padding: 3rem;
  }
}

.brand .logos .download {
  position: absolute;
  bottom: 0.5rem;
  display: flex;
  gap: 0.8rem;
}

.brand .logos .download a {
  font-weight: 400;
}

.brand .logos .background-shadow {
  background-color: #111111d1;
  background-image: linear-gradient(
      45deg,
      #222427 25%,
      transparent 0,
      transparent 75%,
      #222427 0,
      #222427
    ),
    linear-gradient(45deg, #222427 25%, transparent 0, transparent 75%, #222427 0, #222427);
}
.brand .logo .uailu-logo {
  width: 150px;
}

.ball li {
  line-height: 1.5;
  font-size: 1.3rem;
  font-weight: 300;
  margin-top: 1rem;
  padding-left: 1.2rem;
  position: relative;
}

.ball li:before {
  position: absolute;
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background-color: #eaeaea;
  margin-top: 10px;
  left: 0;
}

.regulations {
  padding: 2rem 1rem 0 1rem;
}

@media (min-width: 1024px) {
  .regulations {
    padding: 2rem 4rem 0 4rem;
  }
}

/* ASIDE */
aside a {
  color: var(--color1);
  font-weight: 400;
  font-size: 0.9rem;
}

aside .current {
  font-weight: 500;
  color: var(--color2);
}

aside {
  background-color: #e8efff;
  padding: 1rem;
  border-radius: 5px;
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 300px;
}

@media (min-width: 1024px) {
  aside {
    position: sticky;
    align-self: flex-start;
    top: 5rem;
    overflow-x: auto;
    min-width: 300px;
  }
}

aside span {
  font-size: 1.5rem;
}

aside li {
  padding-bottom: 0.9rem;
}

@media (min-width: 1024px) {
  aside li {
    padding-bottom: 0.7rem;
  }
}

/* END ASIDE */

@media (min-width: 1024px) {
  .regulations {
    display: flex;
    flex-flow: row-reverse;
    gap: 5rem;
  }
}

.regulations .content {
  display: grid;
  gap: 2rem;
}

.regulations h2 {
  font-size: 2rem;
  font-weight: 500;
}

/* MANIFEST */

.manifest {
  padding: 2rem 1rem;
}

.manifest .content {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .manifest {
    padding: 2rem 4rem;
    display: flex;
    justify-content: space-between;
    gap: 5rem;
  }
}

.manifest h1 {
  margin-bottom: 1rem;
}

.manifest h2 {
  font-size: 1.5rem;
}

.manifest p {
  max-width: 650px;
  margin: 1rem 0;
}

.manifest .mission {
  display: none;
}

@media (min-width: 1024px) {
  .manifest .mission {
    display: grid;
    gap: 1rem;
    position: sticky;
    align-self: flex-start;
    min-width: 235px;
    top: 8rem;
    overflow-x: auto;
    text-align: center;
  }
}

.manifest .mission div {
  text-align: center;
}

.manifest .mission span {
  font-size: 3rem;
  font-weight: 500;
}

.manifest .signatures {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 650px;
}

.manifest .signatures p {
  margin: 0.2rem 0;
}

.manifest .signatures .signature {
  display: grid;
  place-self: flex-end;
  gap: 0.2rem;
}

.manifest .signatures .signature .position {
  margin: 1rem 0;
}

.manifest .signatures span {
  font-size: 1.3rem;
  font-weight: 600;
}

/* PRESS */

.press {
  padding: unset;
  margin: unset;
  display: grid;
  gap: 5rem;
}

.press .hero {
  padding: 1rem;
  padding-top: 7rem;
  padding-bottom: 5rem;
  background-image: url(/assets/img/press.png);
  background-size: cover;
  background-position: bottom;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 55%);
}

@media (min-width: 1024px) {
  .press .hero {
    padding: 4rem;
    padding-top: 8rem;
  }
}

.press .hero p {
  color: var(--color-white);
}

.press .hero h1 {
  color: var(--color-white);
}

.press .more {
  margin-top: 2rem;
}

.press .release {
  padding: 0 1rem;
}

.press .coverage {
  padding: 0 1rem;
}

.press .need-brand-assets {
  padding: 0 1rem;
}

.press .need-brand-assets .anchor {
  margin-top: 0.8rem;
}

@media (min-width: 1024px) {
  .press .release {
    padding: 0 4rem;
  }

  .press .coverage {
    padding: 0 4rem;
  }

  .press .need-brand-assets {
    padding: 0 4rem;
  }
}

.press .contact {
  background: #fff1ed;
  border-radius: 10px;
  display: grid;
  padding: 2rem;
  margin: 0 1rem;
  gap: 2rem;
  justify-items: center;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .press .contact {
    margin: 0 4rem;
    padding: 4rem;
  }
}

.press .release p {
  font-size: var(--pText);
}

.press h2 {
  font-size: 2.5rem;
}

.press .contact p {
  text-align: center;
  max-width: 500px;
}

.press .contact h4 {
  color: var(--color1);
  font-size: 3.2rem;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto;
}

.press .contact a {
  display: block;
  padding: 1rem 3em;
  border-radius: 24px;
  color: var(--color-white);
  background: var(--color1);
  font-size: 1rem;
}

.press .release ul {
  display: grid;
  width: 100%;
  gap: 1rem;
}

@media (min-width: 375px) {
  .press .release ul {
    grid-template-columns: repeat(auto-fit, minmax(350px, 350px));
  }
}

.press .release li {
  border-radius: 5px;
  padding: 1rem;
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);
}

.press .release ul li h4 {
  font-size: 1.3rem;
  color: #111111;
  font-weight: 400;
}

.press .release ul li a {
  color: #111111;
  display: grid;
  gap: 1rem;
}

.press .coverage ul {
  display: grid;
  width: 100%;
  gap: 1rem;
  padding-top: 0.5rem;
}

@media (min-width: 375px) {
  .press .coverage ul {
    grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
  }
}

.press .coverage ul li a {
  border: 1px solid var(--color3);
  border-left: 4px solid var(--color3);
  border-radius: 5px;
  display: grid;
  padding: 1rem;
  gap: 2rem;
  color: var(--color1);
}

.press .coverage ul li a h4 {
  font-size: var(--pText);
  font-weight: 400;
}

.release-notes {
  padding: 0 1rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .release-notes {
    padding: 0 4rem;
    padding-top: 2rem;
  }
}

.release-notes .title-search {
  display: grid;
  align-items: center;
  gap: 2rem;
}

.release-notes .title-search h1 {
  margin-bottom: unset;
}

.release-notes .title-search .search input {
  background-color: var(--color-white);
  border-radius: 30px;
  border: 1px solid #eaeaea;
  color: var(--color1);
  width: 100%;
  outline: none;
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  padding-right: 4rem;
  padding-left: 1.5rem;
}

.release-notes .title-search .search {
  position: relative;
}

@media (min-width: 1024px) {
  .release-notes .title-search .search {
    min-width: 300px;
    grid-row: unset;
  }
}

.release-notes .title-search .search span {
  position: absolute;
  right: 1.5rem;
  top: 15px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .release-notes .title-search {
    grid-template-columns: 4fr 1fr;
    gap: 5rem;
  }
}

.release-notes ul {
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .release-notes ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
  }
}

.release-notes li:first-child {
  position: relative;
}

.release-notes li:first-child .recent {
  background: var(--color1);
  color: var(--color-white);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  width: max-content;
}

@media (min-width: 768px) {
  .release-notes li:first-child .recent {
    position: absolute;
    left: -2rem;
    top: 1px;
    background: var(--color1);
    color: var(--color-white);
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 15px;
    transform: rotate(330deg);
    font-size: 0.8rem;
  }
}

.release-notes li {
  max-width: 1024px;
  color: var(--color1);
  border-radius: 5px;
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);
}

.release-notes li a {
  display: grid;
  gap: 1rem;
  color: var(--color1);
  padding: 1rem;
}

@media (min-width: 1024px) {
  .release-notes li a {
    padding: 2rem;
  }
}

.release-notes li p {
  max-width: 768px;
  color: var(--color1);
}

.release-notes li h2 {
  max-width: 768px;
}

.release-notes li img {
  width: 100%;
}

.release-notes li h2 {
  font-size: 2.2em;
  margin-bottom: unset;
}

.note {
  display: grid;
  padding: 0 1rem;
  padding-top: 1rem;
}

.note img {
  width: 100%;
  margin-top: 0.8rem;
}

@media (min-width: 1024px) {
  .note {
    display: grid;
    gap: 5rem;
    grid-template-columns: 4fr 1fr;
    padding: 0 4rem;
    padding-top: 2rem;
  }
}

.note .title-back {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .note .title-back {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

.note .date {
  margin-left: 4rem;
}

.transparency {
  padding: 2rem 4rem;
}

.transparency p {
  max-width: 650px;
}

.page-pricing {
  padding: unset;
  padding-top: 2rem;
  display: grid;
  gap: 5rem;
}

.page-pricing h2 {
  font-size: 2.5rem;
}

.page-pricing .apresentation p {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  font-size: 1.5rem;
}

.page-pricing .apresentation-pricing {
  padding: 0 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.page-pricing .coin-one {
  display: none;
}

@media (min-width: 1024px) {
  .page-pricing .coin-one {
    display: block;
    position: absolute;
    top: 50%;
    right: 15%;
  }
}

.page-pricing .coin-one svg {
  width: 70px;
  transform: rotate(16deg);
  opacity: 0.8;
}

@media (min-width: 768px) {
  .page-pricing .apresentation-pricing {
    padding: 0 4rem;
    padding-bottom: 4rem;
  }
}
.page-pricing .pricing {
  margin: 0;
  margin-top: 3rem;
}
.page-pricing h1 {
  text-align: center;
}

@media (min-width: 768px) {
  .page-pricing h1 {
    font-size: 4.5rem;
  }
}

.page-pricing .banner {
  background: var(--color1);
}
.page-pricing .banner a {
  color: var(--color1);
}

.pricing-faq {
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .pricing-faq {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8rem;
    padding: 0 4rem;
  }
}

.pricing-faq .questions {
  display: grid;
  gap: 3rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .pricing-faq .questions {
    margin-top: unset;
  }
}

.pricing-faq .questions div p {
  font-size: var(--pText);
}

.pricing-faq .questions h3 {
  font-weight: 500;
  font-size: 1.5rem;
}

.help {
  padding: unset;
  margin: unset;
  display: grid;
  gap: 5rem;
}

.help h1 {
  color: var(--color-white);
  text-align: center;
  margin: 0;
}
.help p {
  color: var(--color-white);
  max-width: 700px;
  margin: 0 auto;
}

.help .hero {
  background-color: var(--color1);
  padding: 0 1rem;
  padding-top: 8rem;
  padding-bottom: 3rem;
  display: grid;
  align-content: center;
  gap: 1rem;
}

.help .categories {
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .help .categories {
    padding: 0 4rem;
  }
}

.help .categories .category {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .help .categories .category {
    gap: 2rem;
  }
}

.help .hero .search {
  margin: 0 auto;
  position: relative;
}

@media (min-width: 1024px) {
  .help .hero .search {
    width: 650px;
  }
}

.help .search-input {
  background-color: var(--color-white);
  border-radius: 30px;
  position: relative;
}

#search-results {
  position: absolute;
  background: var(--color-white);
  width: inherit;
  margin-top: 0.5rem;
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 8px 14px 0 rgb(0 0 0 / 8%);
  z-index: 100;
}

#search-results ul {
  display: grid;
  gap: 1rem;
}

#search-results li a {
  color: var(--color1);
  font-size: 0.95rem;
  font-weight: 400;
}

#search-results h5 {
  font-size: var(--pText);
  font-weight: 100;
  text-align: center;
}

.help .hero .search span {
  position: absolute;
  right: 2rem;
  top: 19px;
  cursor: pointer;
}

.help .hero input {
  background: var(--color-white);
  color: var(--color1);
  width: 100%;
  border: unset;
  outline: none;
  font-family: var(--font);
  font-size: 1rem;
  padding: 1.5rem;
  padding-right: 4rem;
  border-radius: 2rem;
}

@media (min-width: 768px) {
  .help .category {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
}
.help .category li {
  border: 1px solid #eaeaea;
  padding: 2rem;
  border-radius: 3px;
  display: grid;
  gap: 0.8rem;
}

.help .category li a {
  width: fit-content;
}

.help .category li p {
  color: var(--color1);
  text-align: left;
}

.help .category li span svg {
  width: 45px;
}

.help .category li h3 {
  font-size: 2rem;
  font-weight: 500;
  text-align: left;
}

.help .category .questions {
  display: grid;
  gap: 0.8rem;
}

.help .category .questions li {
  box-shadow: unset;
  border: unset;
  padding: unset;
}

.help .category .questions li a {
  color: var(--color1);
  font-weight: 300;
  font-size: 1rem;
}

.help .articles-highlight {
  padding: 0 1rem;
}

.help .articles-highlight h2 {
  font-size: 2rem;
}

.help .articles-highlight ul li {
  padding: 1rem 0;
}

@media (min-width: 768px) {
  .help .articles-highlight ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .help .articles-highlight ul li {
    width: 33%;
    padding-right: 5rem;
  }
}

.help .articles-highlight ul li a {
  color: var(--color1);
  font-size: 0.95rem;
  font-weight: 400;
}

.help .articles-highlight ul li:nth-child(3n) {
  padding-right: 0;
}

.help .support {
  overflow-wrap: anywhere;
  background: #e8efff;
  width: fit-content;
  padding: 2.5rem;
  border-radius: 5px;
  display: grid;
  gap: 0.8rem;
  margin: 0 1rem;
}

.help .support h3 {
  font-size: 2rem;
  font-weight: 500;
}

.help .support p {
  color: var(--color1);
}

@media (min-width: 1024px) {
  .help .support {
    margin: 0 4rem;
  }
}

@media (min-width: 1024px) {
  .help .articles-highlight {
    padding: 0 4rem;
  }
}

.help-request {
  padding: unset;
  margin: unset;
  display: grid;
  margin-top: 69px;
}

.help-request .form {
  box-shadow: unset;
  padding: 0 1rem;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .help-request {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .help-request {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.help-request .image {
  background-image: url(/assets/img/manworking.jpg);
  background-size: cover;
  background-position: center;
}

.help-category {
  display: grid;
  gap: 4rem;
  padding: 0 1rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .help-category {
    grid-template-columns: max-content 1fr;
    padding: 0 4rem;
    gap: 5rem;
  }
}

.help-category h1 {
  font-weight: 500;
}

.help-category aside {
  background: unset;
  padding: unset;
  min-width: unset;
  position: unset;
  align-self: unset;
  margin-bottom: unset;
  grid-row: 2;
  padding-top: 4rem;
  border-top: 1px solid #eaeaea;
  border-radius: unset;
  height: min-content;
  max-width: unset;
}

@media (min-width: 1024px) {
  .help-category aside {
    grid-row: 1;
    margin-top: 2rem;
    padding-top: unset;
    border-top: unset;
    max-width: 300px;
  }
}

.help-category aside ul {
  display: grid;
  gap: 1rem;
}

.help-category aside ul li {
  padding: unset;
}

.help-category aside a {
  font-size: var(--pText);
}

@media (min-width: 1024px) {
  .help-category section {
    padding-top: 2rem;
    border-left: 1px solid #eaeaea;
    padding-left: 5rem;
  }
}

.help-category section ul {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

.help-category section li a {
  color: var(--color1);
  font-size: 0.95rem;
  font-weight: 400;
}

.help-category .current {
  font-weight: 500;
  color: #3b75fc;
}

.article {
  padding: 2rem 1rem;
}

.article h1 {
  font-size: 2.5rem;
}

@media (min-width: 1024px) {
  .article h1 {
    font-size: 2.8rem;
  }
}

@media (min-width: 1024px) {
  .article {
    padding: 2rem 4rem;
  }
}

.content-section {
  display: grid;
  gap: 2rem;
}

.article p {
  margin: 1rem 0;
}

.article p:first-child {
  margin: 0;
}

.article p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .article .content-section {
    display: grid;
    gap: 5rem;
    grid-template-columns: 4fr 1fr;
  }
}

.article .title {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .article .title {
    grid-template-columns: 4fr 1fr;
    gap: 5rem;
  }
}

.article .title .search {
  position: relative;
  grid-row: 1;
}

@media (min-width: 1024px) {
  .article .title .search {
    min-width: 300px;
    grid-row: unset;
  }
}

.article .title .search input {
  background-color: var(--color-white);
  border-radius: 30px;
  border: 1px solid #eaeaea;
  color: var(--color1);
  width: 100%;
  outline: none;
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  padding-right: 4rem;
  padding-left: 1.5rem;
}

.article .title .search span {
  position: absolute;
  right: 1.5rem;
  top: 15px;
  cursor: pointer;
}

.article aside {
  top: 5rem;
  overflow-x: auto;
  background-color: #e8efff;
  padding: 1rem;
  border-radius: 5px;
  grid-row: 1;
  margin-bottom: unset;
}

@media (min-width: 1024px) {
  .article aside {
    grid-row: unset;
    position: sticky;
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {
  .article aside {
    min-width: 300px;
  }
}

.article aside span {
  font-size: 1.5rem;
}

.article aside ol {
  margin-top: 1rem;
}

.article .date {
  display: block;
  margin-bottom: 2rem;
}

.about-us {
  padding: unset;
  margin: unset;
  display: grid;
  gap: 5rem;
}

.about-us h2 {
  font-size: 2.5rem;
}

.about-us .hero {
  background-color: var(--color1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .about-us .hero {
    padding-left: 4rem;
    padding-right: 4rem;
    position: relative;
    min-height: 450px;
  }
}

.about-us .hero .apresentation {
  max-width: 750px;
}

.about-us .hero-manifest {
  background: #e8efff;
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .about-us .hero-manifest {
    position: absolute;
    right: 5%;
    left: 5%;
  }
}

.about-us .hero-manifest .founders-manifest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: wrap;
  gap: 2rem;
}

.about-us .hero-manifest .founders-manifest .funders {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.about-us .hero-manifest .founders-manifest .funders img {
  width: 100px;
  border-radius: 50%;
}

.about-us .hero-manifest .founders-manifest .funders .name-ceo {
  display: grid;
  gap: 0.5rem;
}

.about-us .hero-manifest .founders-manifest .funders .name-ceo span {
  font-size: 1rem;
  color: var(--color1);
}

.about-us .hero-manifest .founders-manifest a {
  display: block;
  padding: 1rem 4em;
  border-radius: 24px;
  color: var(--color-white);
  background: var(--color1);
  font-size: 1rem;
}

.about-us .hero-manifest p {
  font-weight: 400;
}

.about-us .hero h1 {
  color: var(--color-white);
  line-height: 1.2;
}

.special-header {
  background: unset;
  border: unset;
}

.special-header a {
  color: var(--color-white);
}

.special-header .btn-action {
  background: var(--color-white);
  color: var(--color1);
  border: 1px solid var(--color-white);
}

.special-header .logo {
  background: url(/assets/brand/svg/uailu-logo-white.svg);
}

.about-us .about-us-press {
  background: #fff1ed;
  border-radius: 10px;
  display: grid;
  gap: 2rem;
  justify-items: center;
  padding: 1rem;
  margin: 0 1rem;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .about-us .about-us-press {
    padding: 4rem;
    margin: 0 4rem;
  }
}

.about-us .about-us-press .actions {
  display: flex;
  gap: 2rem;
  flex-flow: wrap;
  justify-content: center;
}

.about-us .about-us-press .actions .btn-mini-black {
  min-width: 100%;
  text-align: center;
  min-width: 200px;
}

.about-us .about-us-press h4 {
  color: var(--color1);
  font-size: 3.2rem;
  font-weight: 400;
}

.about-us .history {
  display: grid;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .about-us .history {
    padding: 0 4rem;
  }
}

@media (min-width: 1024px) {
  .about-us .history {
    margin-top: 8rem;
  }
}

.about-us .history .apresentation {
  display: grid;
  gap: 0.8rem;
  height: min-content;
}

@media (min-width: 768px) {
  .about-us .history {
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
  }
}

.about-us .world {
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .about-us .world {
    padding: 0 4rem;
  }
}

.about-us .world h2 {
  text-align: center;
}

.about-us .world p {
  text-align: center;
}

.about-us .world-info {
  display: grid;
}

@media (min-width: 1024px) {
  .about-us .world-info {
    grid-template-columns: 2.5fr 1fr;
    gap: 5rem;
  }
}

.about-us .world-info div:first-child {
  display: none;
}

@media (min-width: 1024px) {
  .about-us .world-info div:first-child {
    display: block;
  }
}

.about-us .world-info svg path {
  fill: var(--color-white);
  stroke: var(--color2);
}

.about-us .world-info .present {
  fill: #e8efff;
  cursor: pointer;
}

.about-us .world-info .info {
  overflow-x: auto;
  background-color: #e8efff;
  padding: 1rem;
  border-radius: 5px;
  margin-top: 3rem;
  height: min-content;
}

@media (min-width: 425px) {
  .about-us .world-info .info {
    min-width: 300px;
  }
}

.about-us .world-info .info select {
  background: #dce5f9;
  border: none;
  padding: 0.8rem 1rem;
  outline: none;
  margin-bottom: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.about-us .world-info .info h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.about-us .world-info .info .info-text {
  margin-bottom: 1rem;
}
.about-us .world-info .info .info-text p {
  font-size: 0.9rem;
  margin-bottom: unset;
  text-align: left;
  margin-top: 5px;
}

.about-us .world-info svg {
  width: 100%;
}

.security {
  padding: unset;
  margin: unset;
  display: grid;
  gap: 5rem;
}

@media (min-width: 1024px) {
  .security {
    gap: 7rem;
  }
}

.security .hero {
  padding: 1rem;
  padding-top: 8rem;
  padding-bottom: 5rem;
  background-color: var(--color1);
}
@media (min-width: 768px) {
  .security .hero {
    padding: 4rem;
    padding-top: 8rem;
  }
}
.security .hero h1 {
  color: #ffffff;
  font-size: 2.8rem;
}
.security h2 {
  font-size: 2.5rem;
}
.security .hero p {
  color: #ffffff;
  max-width: 700px;
}
.security .legal-liability {
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .security .legal-liability {
    padding: 0 4rem;
  }
}

.security .legal-liability .legal-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.security .legal-liability .legal-terms a {
  width: max-content;
}

.security .legal-liability .legal-terms h3 {
  font-weight: 500;
}

.security .legal-liability .legal-terms div {
  border: 1px solid var(--color3);
  border-radius: 2px;
  padding: 1rem;
  display: grid;
  align-items: center;
  gap: 0.8rem;
}

@media (min-width: 768px) {
  .security .legal-liability .legal-terms div {
    padding: 2rem;
  }
}

.security .legal-liability .legal-terms div p {
  font-size: var(--pText);
  min-height: 80px;
}

.security .information {
  margin: 0 1rem;
}

@media (min-width: 768px) {
  .security .information {
    margin: 0 4rem;
  }
}

.security .information .text-image {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .security .information .text-image {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
  }

  .security .information .text-image div:first-child {
    width: 90%;
  }
}

.security .information .text-image .image {
  position: relative;
  margin-bottom: 1rem;
  height: fit-content;
  text-align: center;
}

.security .information .text-image .image img {
  max-width: 478px;
}

.security .information .text-image .image .icons {
  position: absolute;
  display: flex;
  gap: 0.9rem;
  flex-flow: wrap;
  bottom: -1rem;
}

@media (min-width: 768px) {
  .security .information .text-image .image .icons {
    left: -3rem;
    bottom: -1rem;
  }
}

.security .information .text-image .image .icons span {
  background-color: #111111;
  width: 80px;
  height: 56px;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
}

.security .physical-security {
  padding: 0 1rem;
}

.security .physical-security .more-information {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .security .physical-security {
    padding: 0 4rem;
  }
}

.security .banner {
  background: var(--color1);
}

.security .banner a {
  color: var(--color1);
}

/* BLOG */
.blog-recents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2rem;
}

@media (min-width: 1024px) {
  .blog-recents {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.blog-recents article {
  /*box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);*/
}

.blog-recents article a {
  display: grid;
  gap: 1rem;
  color: (var(--color1));
}

.blog-recents figure img {
  width: 100%;
  border-radius: 6px;
}

.blog-recents article h3 {
  font-weight: 500;
  font-size: 1.5rem;
}

.blog-recents article a .author {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-recents article a .author span {
  font-weight: 400;
}

.blog-recents article a .author-date {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-recents article a .author-date time {
  font-weight: 400;
}

.blog-recents article a .author img {
  border-radius: 50%;
}



/* RECENTS */
.blog-recents-resume {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .blog-recents-resume article {
    display: grid;
  }

  .blog-recents-resume article a {
    grid-template-columns: 1fr 3fr;
  }
}

.blog-recents-resume article {
  /*box-shadow: 0 8px 14px 0 rgb(0 0 0 / 5%);*/
}

.blog-recents-resume article a {
  display: grid;
  gap: 1rem;
  color: (var(--color1));
}

.blog-recents-resume figure img {
  width: 100%;
  border-radius: 6px;
}

.blog-recents-resume article h3 {
  font-weight: 500;
  font-size: 1.5rem;
}

.blog-recents-resume article a .author {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-recents-resume article a .author span {
  font-weight: 400;
}

.blog-recents-resume article a .author-date {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-recents-resume article a .author-date time {
  font-weight: 400;
}

.blog-recents-resume article a .author img {
  border-radius: 50%;
}

.blog-recents-display {
  display: grid;
  gap: 3rem
}

@media (min-width: 1024px) {
  .blog-recents-display {
    grid-template-columns: 2.5fr 1fr;
  }
}

/* BLOG */

.blog-featured article {
  display: grid;
  background-color: #FFF1ED;
}

.blog-featured .description {
  padding: 1rem;
}

@media (min-width: 1024px) {
  .blog-featured article:first-child a {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .blog-featured article:first-child .description {
    order: 1
  }

  .blog-featured article:first-child figure {
    order: 2
  }
}

.blog-featured article a {
  display: grid;
  gap: 1rem;
  padding: 0;
  color: (var(--color1));
}

@media (min-width: 1024px) {
  .blog-featured article a {
    padding-left: 1rem;
  }
}

.blog-featured figure img {
  width: 100%;
  display: block
}

.blog-featured article h3 {
  font-weight: 700;
  font-size: 2.8rem;
}

.blog-featured article a .author {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-featured article a .author span {
  font-weight: 400;
}

.blog-featured article a .author-date {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-featured article a .author-date time {
  font-weight: 400;
}

.blog-featured article a .author img {
  border-radius: 50%;
}

.blog-newsletter {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(222, 97%, 61%, 1)'/><path d='M19.95-15.33L18.32-.68 16.7 13.97l13.5-5.92 13.5-5.91L31.82-6.6zM62 68.18l21.15-23.32 9.62 29.98zm2.64-.85l26.08 5.64-8.15-25.4zm-44.7 17.42l-1.63 14.64-1.63 14.66 13.5-5.92 13.5-5.92-11.87-8.73z'  stroke-width='1' stroke='none' fill='hsla(259, 0%, 100%, 0.03)'/><path d='M96.78 82.3a3.74 3.74 0 104.93-5.65 3.74 3.74 0 00-5.3.37 3.76 3.76 0 00.37 5.28zm-47.2-69.69l3.44-.23-.23-3.45-3.44.24zm-3.37 45.7a1.5 1.5 0 002.1-.15 1.5 1.5 0 00-.14-2.1 1.5 1.5 0 00-2.1.15 1.5 1.5 0 00.14 2.1zm24.66-45.06A8.5 8.5 0 1082.07.43a8.5 8.5 0 10-11.2 12.82zM-3.3 82.3a3.74 3.74 0 104.93-5.65 3.74 3.74 0 00-5.29.37 3.76 3.76 0 00.36 5.28zm74.17 31.03a8.5 8.5 0 1011.2-12.82 8.5 8.5 0 10-11.2 12.82zm6.34-78.02c-2.44.5-5.05-.5-7.13-2.7-.28-.3-.43-.68-.41-1.1a1.5 1.5 0 011.56-1.46c.4 0 .78.17 1.06.47 1.37 1.45 2.9 2.1 4.33 1.8 1.41-.28 2.58-1.47 3.28-3.35 1.06-2.84 3.08-4.77 5.52-5.26 2.44-.5 5.05.5 7.13 2.7.54.57.56 1.43.06 2.02l-.12.13c-.6.57-1.57.54-2.14-.07-1.37-1.45-2.9-2.1-4.32-1.8-1.42.28-2.6 1.47-3.29 3.35-.92 2.46-2.54 4.22-4.55 4.97-.32.14-.64.24-.98.3zm8.64-9.5c1.73-.34 3.56.4 5.15 2.08a.63.63 0 00.94-.03c.2-.24.2-.6-.03-.83-1.87-1.98-4.17-2.87-6.3-2.43-2.14.43-3.91 2.15-4.86 4.7-.82 2.17-2.22 3.55-3.95 3.91-1.73.35-3.56-.38-5.15-2.07a.62.62 0 00-1.08.41c-.01.17.05.32.17.45 1.87 1.98 4.17 2.87 6.3 2.43 2.14-.43 3.91-2.15 4.87-4.7.7-1.89 1.85-3.18 3.28-3.72.2-.08.43-.15.66-.2zM39.33 79.5c.54 0 1-.4 1.07-.96.32-2.86-.55-5.34-2.39-6.8-1.83-1.45-4.44-1.72-7.15-.74-2.03.73-3.84.58-5.11-.41-1.26-1-1.82-2.73-1.58-4.87a1.08 1.08 0 00-.94-1.2 1.08 1.08 0 00-1.19.95c-.32 2.87.54 5.35 2.38 6.8 1.84 1.45 4.44 1.72 7.15.75 2.04-.73 3.85-.58 5.12.41 1.25 1 1.82 2.73 1.57 4.87a1.08 1.08 0 001.07 1.2z'  stroke-width='1' stroke='none' fill='hsla(259, 0%, 100%, 0.03)'/><path d='M6.7 27.57l18.65-5.83 5.84 18.64-18.65 5.84zm17.68-3.97l-15.8 4.96 4.94 15.8 15.81-4.95zm78.1-33.38l-9.04 3.62 3.62 9.05 9.04-3.62zm3.68 67.2l-9.67 2.99.57 1.86 9.67-3zM55.35 89.61l.7 1.74 12.14-4.87-.7-1.74zm5.28-48.27l1.32-.91-12.24-17.66-1.32.92zM2.4-9.78l-9.04 3.62 3.62 9.04L6.02-.74zm3.68 67.2l-9.67 3 .57 1.85 9.67-2.99zm96.4 32.88l-9.05 3.62 3.62 9.04 9.04-3.62zM2.4 90.3l-9.05 3.62 3.63 9.04 9.04-3.62z'   stroke-width='1' stroke='none' fill='hsla(259, 0%, 100%, 0.03)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  border-radius: 10px;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
  gap: 1rem;
}


.blog-newsletter p {
  color: #fff;
  max-width: 930px;
  margin: 0 auto;
}


.blog-newsletter h4 {
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: 500;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .blog-newsletter h4 {
    font-size: 3.2rem;
  }
}

.blog-newsletter a {
  display: inline-block;
  padding: 1rem 3rem;
  border-radius: 24px;
  color: #000000;
  background: #ffffff;
  font-size: 1rem;
  font-weight: 500;
}

.blog-footer {
  background-color: var(--color1);
  margin-top: 0;
  padding: 2rem 1rem;
  display: grid;
  gap: 2rem;
}

.blog-home {
  display: grid;
  gap: 6rem;
  margin-top: unset;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

@media (min-width: 1024px) {
  .blog-home {
    padding: 4rem 0;
  }
}

.blog-header {
  position: unset;
  padding: 1rem 0;
  margin: 0 auto;
  border: unset;
}

@media (min-width: 1024px) {
  .blog-header {
    border-bottom: 1px solid var(--color3);
  }
}



.blog-header .header-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "logo-title action hamburguer"
    "search search search";
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .blog-header .header-container {
    grid-template-areas: "logo-title nav search action"
  }

  .blog-header .hamburguer {
    display: none;
  }

}

.blog-header .search {
  border-top: 1px solid var(--color3);
  margin-top: 1rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

@media (min-width: 1024px) {
  .blog-header .search {
    border: none;
    margin: 0;
    padding: 0;
  }
}

.blog-header .search span {
  position: absolute;
  right: 2.5rem;
  top: 31px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .blog-header .search span {
    right: 1.5rem;
    top: 15px;
  }
}

.blog-header #search-input {
  background-color: var(--color-white);
  border-radius: 30px;
  border: 1px solid #eaeaea;
  color: var(--color1);
  width: 100%;
  outline: none;
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  padding-right: 4rem;
  padding-left: 1.5rem;
}

.blog-action-more-posts {
  display: grid;
  justify-content: center;
  margin-top: 1rem;
}

.blog-action-more-posts a {
  background-color: var(--color1);
  border-radius: 6px;
  padding: 13px;
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  gap: 5px;
  display: flex;
  align-items: center;
}


.ads-uailu-01 {
  padding: 3rem;
  display: grid;
  gap: 2rem;
  max-width: 350px;
  margin: 0 auto;
  background-color: #b50507;
  border-radius: 10px;
}

@media (min-width: 1024px) {
  .ads-uailu-01 {
    padding: 52px
  }
}

.ads-uailu-01 img {
  width: 100%;
}

.ads-uailu-01 .title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .ads-uailu-01 .title {
    font-size: 3.5rem;
  }
}

.ads-uailu-01 .action {
  display: grid;
  gap: 0.7rem
}

.ads-uailu-01 .action a {
  background: var(--color1);
  border-radius: 42px;
  color: #fff;
  padding: 12px 17px;
  font-size: 1.2rem;
  display: block;
  width: fit-content;
}

.ads-uailu-01 .action span {
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 500;
}

.blog-header .logo-title {
  display: flex;
  gap: 6px;
  grid-area: logo-title;
}

.blog-header .logo-title span {
  font-size: 2rem;
  color: var(--color1);
  font-weight: 300;
}

.blog-header .search {
  grid-area: search;
}

.blog-header nav {
  display: none;
  grid-area: nav;
}

@media (min-width: 1024px) {
  .blog-header nav {
    display: flex;
    gap: 1rem
  }
}

.blog-header .action {
  grid-area: action;
}

.blog-header .action a {
  background: #2d31fa;
  border-radius: 42px;
  color: rgb(255, 255, 255);
  padding: 12px 17px;
  font-size: 1.1rem;
  display: block;
  width: fit-content;
  font-weight: 500;
  cursor: pointer;
}

.blog-header .hamburguer {
  grid-area: hamburguer;
}

.blog-home article a .date-read {
  display: flex;
  gap: 6px
}

.blog-home article a .date-read span {
  font-weight: 400;
}

.blog-home .description {
  display: grid;
  gap: 0.5rem;
}

.blog-home .description p {
  margin-top: unset;
}

.blog-footer .logo-title {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.blog-footer .logo-title span {
  font-size: 2rem;
  color: var(--color-white);
  font-weight: 300;
}

.blog-footer .urls {
  display: grid;
  justify-content: center;
  gap: 0.5rem;
}

.blog-footer .urls a {
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 400;
}

.blog-footer {
  color: var(--color-white);
}

.blog-footer .cookies {
  order: 1;
  text-align: center;
}

.blog-footer .cookies svg {
  width: 17px;
}

.blog-footer .language-cookies {
  display: grid;
  gap: 2rem;
}

.blog-footer .language {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #ffffff;
  padding: 2px 2px;
  order: 2;
  justify-self: center;
}

.blog-footer .cookies button {
  background-color: unset;
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 400;
  border: unset;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-footer svg {
  fill: rgb(255, 255, 255)
}

.blog-footer .social a svg path:last-child {
  fill: #ffffff;
}