/************************/
/* Navigation bar */
/************************/

.main-header {
  position: sticky;
  top: 0;
  background-color: rgba(19, 25, 32, 0.95);
  backdrop-filter: blur(5px);
  padding: 0;
  z-index: 9999;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 2.4rem;
}

.nav-topbar {
  display: flex;
  justify-content: space-between;
}

.nav-img {
  height: 4.8rem;
  width: auto;
  margin: 1.2rem 2.8rem 1.2rem 0;
}

.nav--mobile {
  /* Shows by media queries */
  display: none;
  align-items: center;
  list-style: none;
  gap: 1.2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 1.6rem;
  list-style: none;
}

.nav-actions {
  flex-grow: 0;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  all: unset;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.25px;
  cursor: pointer;
}

.nav-link--dropdown {
  display: flex;
  cursor: default;
  gap: 0.5rem;
}

.nav-link--dropdown::after {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='70' d='M112 184l144 144 144-144'/></svg>");
  transition: 0.3s all ease;
  pointer-events: auto;
  align-self: center;
}

.nav-link--dropdown:hover::after {
  translate: 0 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%2332e6e2' stroke-linecap='round' stroke-linejoin='round' stroke-width='70' d='M112 184l144 144 144-144'/></svg>");
}

.nav-search {
  margin-inline-start: auto;
}

.nav-search button {
  all: unset;
  cursor: pointer;
}

.nav-search svg {
  width: 2.2rem;
  fill: #fff;
}

.nav-btn {
  margin-left: 1.8rem;
}

.menu-btn {
  /* in mobile sizes*/
  all: unset;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}

/******
Sub menu
************/

.nav-link--platform {
  position: relative;
}

.nav-link--platform:hover .submenu-platform {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.submenu {
  position: absolute;
  top: 150%;
  border-radius: 9px;
  border: 1px solid #272f38;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  /* transition */
  opacity: 0;
  visibility: hidden; /* new */
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 9999 !important;
}

.submenu-platform {
  display: flex;
}

.submenu--first-col {
  background-color: #1e242c;
  padding: 2.8rem 2.4rem;
}

.submenu--second-col {
  background-color: #12181f;
  border-left: 1px solid #272f38;
  padding: 2.8rem 2.4rem;
}

.submenu--third-col {
  margin: -2.8rem -2.4rem;
  padding: 2rem 0 2.4rem 2.4rem;
  margin-top: 2rem;
  border-top: 1px solid #272f38;
}

.submenu--title {
  display: block;
  font-family: 'MartianMono', 'Consolas', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #7e8792;
  margin-bottom: 2.4rem;
}

.submenu--text {
  font-size: 1.6rem;
  font-weight: 400;
  inline-size: 35rem;
  line-height: 1.6;
  margin-bottom: 2.8rem;
}

.submenu--link:link,
.submenu--link:visited {
  color: #fff;
  font-size: 1.6rem;
}

.submenu--link:hover,
.submenu--link:active {
  text-decoration: none;
}

.submenu--links {
  display: flex;
  gap: 3.2rem;
}

.submenu--links-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 15rem;
}

.nav-link--solutions:hover .submenu-solutions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-link--solutions {
  position: relative;
}

.submenu-solutions {
  top: 150%;
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.submenu-solutions .submenu--text {
  margin-bottom: 0;
}

.nav-link--developers {
  position: relative;
}

.submenu-developers {
  display: flex;
}

.submenu-developers .submenu--links {
  gap: 0;
}

.submenu--links-col.developers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4.8rem;
  list-style: none;
  margin-right: 3.2rem;
  width: unset;
}

.nav-link--developers:hover .submenu-developers {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.developers--link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.developers--logo {
  height: 1.6rem;
  width: 1.6rem;
}

.nav-link--resources {
  position: relative;
}
.nav-link--resources:hover .submenu-resources {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/************************/
/* Hero section */
/************************/

/*
_____DISCLAIMER */

.disclaimer {
  z-index: -9999;
}

.disclaimer-hero {
  position: absolute;
  top: 1px;
  width: 75vw;
}

.disclaimer-footer {
  position: absolute;
  top: 50px;
}
.disclaimer-footer .disclaimer-text {
  font-size: 1rem;
}

.disclaimer-text {
  color: rgba(255, 0, 0, 0.63);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  pointer-events: none;
  animation: disclaimer-fade 3s ease-in-out alternate infinite;
}

@keyframes disclaimer-fade {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.7);
  }
}

.section--hero {
  position: relative;
  display: flex;
  place-items: center;
  padding-top: 9.6rem;
  padding-bottom: 9.6rem;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.hero-title {
  font-size: 6.4rem;
  font-weight: 800;
  color: #e6ecf2;
  line-height: 1;
  letter-spacing: -0.25px;
  text-wrap: balance;
}

.hero-btns {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.hero-btn {
  align-self: flex-start;
}

.sec-hero-btn:link,
.sec-hero-btn:visited {
  text-decoration: none;
  color: #32e6e2;
  background-color: #292f35;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 28px;
  transition: 0.3s all;
}

.sec-hero-btn:hover,
.sec-hero-btn:active {
  background-color: #283a40;
}

/******************
/* illustrate animation
*****************************/

.ill-eye {
  animation: squeeze 4s infinite;
}

@keyframes squeeze {
  0%,
  85%,
  to {
    clip-path: inset(0% 0% 0% 0%);
    animation-timing-function: ease-in-out;
  }

  90% {
    clip-path: inset(20% 0 20% 0);
    animation-timing-function: ease-out;
  }

  95% {
    clip-path: inset(35% 0% 35% 0%);
    animation-timing-function: ease-in;
  }
}

.cloud-1 {
  animation: cloudfloat-1 5s infinite alternate;
}

@keyframes cloudfloat-1 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -2%;
  }
}

.cloud-2 {
  animation: cloudfloat-2 5s infinite alternate;
}

@keyframes cloudfloat-2 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -3%;
  }
}

.plane {
  animation: planejiggle 4s ease-in-out 0.1s infinite forwards;
}

@keyframes planejiggle {
  0%,
  100% {
    transform: translate(2px);
  }

  50% {
    transform: translate(6px, -2px);
  }
}

.star-1 {
  animation: starfade-1 4s ease-in-out 0.1s infinite alternate;
}

@keyframes starfade-1 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.1;
  }
}

.star-2 {
  animation: starfade-2 3s ease-in-out 0.1s infinite alternate;
}

@keyframes starfade-2 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.1;
  }
}

/************************/
/* Featured in section */
/************************/

.section--featured-in {
  position: relative;
  z-index: -1;
}

.featured-in--wrapper {
  display: flex;
  gap: 6.4rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}

.featured-in--imgs {
  display: flex;
  gap: 6.4rem;
  animation: scroll 50s infinite linear;
}

.featured-in--imgs img {
  flex: 0 0 5rem;
  filter: invert(0.9);
}

@keyframes scroll {
  from {
    translate: 0;
  }
  to {
    translate: calc(-100% - 6.4rem);
  }
}

/************************/
/* Platform section */
/************************/

.platform--z-section {
  display: grid;
  grid-template-columns: 3fr 2fr;
  padding: 0 2.4rem;
  margin-top: 6.4rem;
  border-radius: 7px;
  border: 1px solid rgba(222, 255, 254, 0.15);
  background: linear-gradient(to left, #0d1818, #0c2a2a);
}
.platform--z-section.reverse {
  grid-template-columns: 2fr 3fr;
}
.platform--z-text-side {
  padding: 3.2rem;
}

.platform--z-section img {
  place-self: center;
}

.platform--z-text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  max-inline-size: 40rem;
}

.platform--z-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.8rem;
  list-style: none;
}

.platform--z-list li {
  font-size: 1.6rem;
  font-weight: 400;
  padding: 2rem 1.2rem;
  background-color: #242f2f;
  border: 1px solid rgba(231, 232, 233, 0.2);
  border-radius: 5px;
}

.platform--z-link {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: #defffe;
  text-decoration-color: #32e6e2;
}

.platform--z-link::after {
  content: '';
  display: inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%2332e6e2'><path stroke-linecap='round' stroke-linejoin='round' d='m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25' /></svg>");
  height: 1.2rem;
  width: 1.2rem;
  margin-left: 2px;
  will-change: transform, opacity;
}

.platform--z-link:hover::after {
  animation: fly-out-in 0.4s ease;
}

@keyframes fly-out-in {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(6px, -6px);
    opacity: 0;
  }
  60% {
    transform: translate(-6px, 6px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/************************/
/* Primitives section */
/************************/

.section--primitives {
  margin-top: 8rem;
}

.primitives--aside {
  display: flex;
  margin-top: 6.4rem;
  flex-shrink: 0;
  overflow-x: auto;
}

.aside-title {
  display: flex;
  place-content: center;
  flex: 1 0 auto;
  font-size: 1.8rem;
  font-weight: 500;
  border: 1px solid #272f38;
  padding: 1.2rem 2.4rem;
  color: #defffe;
  background-color: inherit;
  cursor: pointer;
}

.aside-title::before {
  content: '';
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 1rem;
  align-self: center;
}

[data-tap='ai-gateway']::before {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='%2332e6e2' xmlns='http://www.w3.org/2000/svg' data-astro-cid-nnvx3qol='' > <path d='M5.35719 8.55288L4.1323 7.37465L4.11719 6.9591L5.3723 5.7518L5.8043 5.76634L7.02919 6.94457L7.04341 7.36011L5.78919 8.56656L5.35719 8.55288ZM10.2354 8.55288L9.01052 7.37465L8.9963 6.9591L10.2496 5.7518L10.6825 5.76634L11.9083 6.94457L11.9216 7.36011L10.6674 8.56656L10.2354 8.55288Z' fill='%2332e6e2' ></path> <path fill-rule='evenodd' clip-rule='evenodd' d='M9.14578 0.268479V1.67329H12.1733C13.1881 1.67329 14.1613 2.06098 14.8789 2.7511C15.5965 3.44122 15.9998 4.37725 16 5.35334V9.03338C16 10.0096 15.5968 10.9459 14.8792 11.6362C14.1616 12.3265 13.1882 12.7143 12.1733 12.7143H3.82667C2.81177 12.7143 1.83844 12.3265 1.1208 11.6362C0.403165 10.9459 0 10.0096 0 9.03338V5.35334C0.000235712 4.37725 0.403505 3.44122 1.12112 2.7511C1.83873 2.06098 2.81193 1.67329 3.82667 1.67329H7.05778V0.268479L7.31822 0H8.88356L9.14578 0.268479ZM3.82667 3.68005C2.86667 3.68005 2.08711 4.42991 2.08711 5.35334V9.03338C2.08711 9.95682 2.86578 10.7067 3.82667 10.7067H12.1733C13.1333 10.7067 13.9129 9.95767 13.9129 9.03338V5.35334C13.9129 4.42991 13.1342 3.68005 12.1733 3.68005H8.89067L8.88444 3.68689H7.32L7.31378 3.68005H3.82667Z' fill='%2332e6e2' ></path> </svg>");
}

[data-tap='serverless-functions']::before {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='%2332e6e2' xmlns='http://www.w3.org/2000/svg' > <path fill-rule='evenodd' clip-rule='evenodd' d='M3.25 6.28275L4.63284 4.8999H6.13215L6.54666 2.56384L8.78259 0.699951H11.9672L13.35 2.08279V3.91711L11.9172 5.34993L12.85 6.28275V8.11706L11.4672 9.4999H9.99688L9.31827 13.4571L7.15127 15.3H4.13284L2.75 13.9171V12.0828L4.13284 10.7H5.11755L5.32756 9.4999H4.63284L3.25 8.11706V6.28275ZM8.65895 8.15681L8.90521 7.9499H11.3V6.4499H9.25521L9.00895 6.15681L9.39394 3.95686L9.6402 3.74995H11.8V2.24995H8.89108L8.04553 2.96039L7.47107 6.243L7.22481 6.4499H4.8V7.9499H6.87481L7.12107 8.243L6.45606 12.043L6.2098 12.25H4.3V13.75H6.95892L7.80447 13.0395L8.65895 8.15681Z' fill='%2332e6e2' ></path> </svg>");
}

[data-tap='data&storage']::before {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='%2332e6e2' xmlns='http://www.w3.org/2000/svg' > <path d='M3.40039 3.7278L3.40043 4.67185L3.52839 4.79981L4.47244 4.79985L4.60039 4.67191L4.60035 3.72785L4.47239 3.5999L3.52834 3.59985L3.40039 3.7278Z' fill='%2332e6e2' ></path> <path fill-rule='evenodd' clip-rule='evenodd' d='M1 5.9364L2.21788 7.19995H13.7821L15 5.9364V2.46351L13.7821 1.19995H2.21788L1 2.46351V5.9364ZM2.85544 2.69995H5.14456L5.5 3.06872V5.33119L5.14456 5.69995H2.85544L2.5 5.33119V3.06872L2.85544 2.69995ZM7 2.69995V5.69995H13.1446L13.5 5.33119V3.06872L13.1446 2.69995H7Z' fill='%2332e6e2' ></path> <path d='M3.40039 11.3278L3.40043 12.2719L3.52839 12.3998L4.47244 12.3999L4.60039 12.2719L4.60035 11.3279L4.47239 11.1999L3.52834 11.1999L3.40039 11.3278Z' fill='%2332e6e2' ></path> <path fill-rule='evenodd' clip-rule='evenodd' d='M1 13.5364L2.21788 14.8H13.7821L15 13.5364V10.0635L13.7821 8.79995H2.21788L1 10.0635V13.5364ZM2.85544 10.3H5.14456L5.5 10.6687V12.9312L5.14456 13.3H2.85544L2.5 12.9312V10.6687L2.85544 10.3ZM7 10.3V13.3H13.1446L13.5 12.9312V10.6687L13.1446 10.3H7Z' fill='%2332e6e2' ></path> </svg>");
}

[data-tap='image-cdn']::before {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='%2332e6e2' xmlns='http://www.w3.org/2000/svg' > <path fill-rule='evenodd' clip-rule='evenodd' d='M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM6.09113 13.1597C5.31106 11.815 4.83018 10.3105 4.69 8.75H2.55071C2.82829 10.7858 4.21989 12.4672 6.09113 13.1597ZM2.55071 7.25H4.69C4.83018 5.68946 5.31106 4.18496 6.09113 2.84029C4.21989 3.53281 2.82829 5.21418 2.55071 7.25ZM13.4493 8.75C13.1717 10.786 11.7799 12.4674 9.90846 13.1599C10.6886 11.8152 11.1695 10.3106 11.3097 8.75H13.4493ZM13.4493 7.25C13.1717 5.21403 11.7799 3.53257 9.90846 2.84013C10.6886 4.18485 11.1695 5.6894 11.3097 7.25H13.4493ZM7.99984 13.3282C6.99464 11.9949 6.37093 10.4119 6.19703 8.75H9.80265C9.62875 10.4119 9.00503 11.9949 7.99984 13.3282ZM6.19703 7.25H9.80265C9.62875 5.58811 9.00503 4.00511 7.99984 2.67183C6.99464 4.00511 6.37093 5.58811 6.19703 7.25Z' fill='%2332e6e2' ></path> </svg>");
}

[data-tap='automatic-forms']::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' > <path fill-rule='evenodd' clip-rule='evenodd' d='M2.17772 0.75H3.81066L5 1.93934L6.18934 0.75H7.82228L8 0.934382V2.06562L7.82228 2.25H6.81066L5.75 3.31066V12.6893L6.81066 13.75H7.82228L8 13.9344V15.0656L7.82228 15.25H6.18934L5 14.0607L3.81066 15.25H2.17772L2 15.0656V13.9344L2.17772 13.75H3.18934L4.25 12.6893V12.25H1L0.25 11.5V4.5L1 3.75H4.25V3.31066L3.18934 2.25H2.17772L2 2.06562V0.934382L2.17772 0.75ZM4.25 10.75V5.25H1.75V10.75H4.25Z' fill='%2332e6e2' ></path> <path d='M14.25 10.75V5.25H7.95043L7.75 5.06249V3.93751L7.95043 3.75H15L15.75 4.5V11.5L15 12.25H7.95043L7.75 12.0625V10.9375L7.95043 10.75H14.25Z' fill='%2332e6e2' ></path> </svg>");
}

.aside-section {
  padding: 0;
}

.aside-content {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  color: #defffe;
  height: 85rem;
}

.aside-description {
  font-size: 1.5rem;
  padding: 4.7rem;
  background-color: #0c2a2a;
  border: 1px solid #32e6e2;
}

.aside-text {
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1.5;
  margin-bottom: 2.4rem;
}

.aside-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  list-style: none;
  line-height: 1.5;
}

.aside-list li {
  display: flex;
  align-items: center;
}

.aside-list li::before {
  content: '';
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.5rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'><path stroke='%2332e6e2' stroke-width='1.2' d='M15.407 2.925c.772.614.9 1.739.285 2.51l-6.965 8.752a2.978 2.978 0 0 1-4.291.387l-3.23-2.826a1.787 1.787 0 1 1 2.353-2.69l2.76 2.415 6.577-8.263a1.787 1.787 0 0 1 2.51-.285Z'/></svg>");
}

.aside-description .main-btn {
  margin-top: 2.4rem;
}

.code-side--title {
  display: block;
  font-size: 1.8rem;
  padding: 1.4rem;
  border-bottom: 1px solid #32e6e2;
  color: #9da7b2;
}

.aside--code-side {
  border: 1px solid #32e6e2;
  background-color: #060b10;
  min-width: 0;
}

.aside--code-side::-webkit-scrollbar {
  background: #2c2c2c;
}

.aside--code-side::-webkit-scrollbar-thumb {
  background: #9f9f9f;
  border-radius: 3px;
}

.aside--code-side::-webkit-scrollbar-thumb:hover {
  background: #d1d1d1;
}

.aside--code-side pre {
  padding-left: 1.8rem;
  padding-bottom: 2.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100% - 4.8rem);
}

.aside--code-side pre::-webkit-scrollbar {
  height: 1rem;
}
.aside--code-side pre::-webkit-scrollbar-track {
  background-color: #000;
}
.aside--code-side pre::-webkit-scrollbar-thumb {
  background-color: #434648;
  border-radius: 2px;
}
.aside--code-side pre::-webkit-scrollbar-thumb:hover {
  background-color: #4c4f52;
  border-radius: 2px;
}

.aside-code {
  font-family: 'Consolas', sans-serif;
  font-size: 2rem;
  line-height: 1.2;
  color: #e4f0fb;
}

[id='automatic-forms'] {
  text-wrap: balance;
}

/* The code preview css */

.kw {
  color: #7fdbca;
}
.type {
  color: #c792ea;
}
.text {
  color: #e4f0fb;
}
.str {
  color: #add7ff;
}
.var {
  color: #5de4c7;
}
.func {
  color: #5fb3ff;
}
.sym {
  color: #89ddff;
}
.comment {
  color: #a6accd;
  font-style: italic;
}
.attribute {
  color: #7fdbca;
  font-style: italic;
}

/***** Aside showing code *****/
.aside-title.active {
  color: #32e6e2;
  border: 1px solid #32e6e2;
}

.aside-content.active {
  display: grid;
}

/************************/
/* Call To Action section */
/************************/

.section--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12.8rem;
}

.cta--btns {
  display: flex;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

.cta--btns a:last-child {
  background-color: #0d1818;
  color: #32e6e2;
  border: 1px solid #32e6e2;
}

.request-btn:hover,
.request-btn:active {
  background-color: #202f35 !important;
}

/************************/
/* Footer */
/************************/

footer {
  top: 100vh;
  margin: 9.6rem auto;
}

.footer--first-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rem;
  margin-bottom: 6.4rem;
}

.footer--logo {
  width: 5rem;
  height: auto;
}

.social-icons {
  display: flex;
  gap: 2.4rem;
}

.social-icons img {
  filter: invert(0.8) opacity(0.6);
  height: 2.2rem;
  width: auto;
}

.footer-cols {
  display: grid;
  gap: 4.8rem;
  margin-inline: auto;
  max-inline-size: 100rem;
  grid-template-columns: repeat(4, 1fr);
}

.footer-col-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #7e8792;
}

.footer-list {
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  gap: 1rem;
  list-style: none;
  margin-top: 1.6rem;
}

.footer-list a:link,
.footer-list a:visited {
  color: #7e8792;
  font-weight: 400;
  letter-spacing: 0.025rem;
  text-decoration: none;
}

.footer-list a:hover,
.footer-list a:active {
  text-decoration: underline;
}

.footer-news-update {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6.4rem;
}

.footer-news-update p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #7e8792;
  margin-bottom: 1.5rem;
}

.subscribe-box {
  display: flex;
  gap: 1rem;
}

.input {
  width: 30rem;
  height: 4.2rem;
}

.footer-news-update--input {
  color: #fff;
  font-size: 1.6rem;
  width: 100%;
  height: 100%;
  background-color: #1e242c;
  border: 1px solid #3b434c;
  border-radius: 4px;
  padding: 0.5rem;
}

.footer-news-update--btn {
  all: unset;
  color: #444;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 1.2rem;
  border-radius: 7px;
  background-color: #32e6e2;
  cursor: pointer;
  transition: all 0.3s;
}

.footer-news-update--btn:hover {
  background-color: #8efbf7;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  margin-top: 6.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid #272f38;
  color: #7e8792;
  font-size: 1.4rem;
  font-weight: 500;
}

.footer-legal p {
  max-inline-size: 30vw;
}

.footer-legal--list {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

.footer-legal--list a:link,
.footer-legal--list a:visited {
  color: inherit;
  text-decoration: none;
}

.footer-legal--list a:hover,
.footer-legal--list a:active {
  text-decoration: underline;
}

.display-mode {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 1.2rem;
}

.display-mode select {
  font-family: inherit;
  font-size: 1.6rem;
  padding: 1rem 3.2rem 1rem 1rem;
  background-color: #1e242c;
  border: 1px solid #3b434c;
  border-radius: 4px;
  color: #fff;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='40' d='M112 184l144 144 144-144'/></svg>")
    no-repeat;
  background-size: 1.5rem;
  background-position: calc(100% - 1.6rem);
}

.display-mode option {
  background-color: #1e242c;
}