/**************************/
/* BELOW 1296px (Desktop) */
/**************************/

@media (max-width: 81em) {
  html {
    font-size: 55%;
  }
  .container {
    max-width: 110rem;
  }
  .hero-text .main-text {
    max-inline-size: 45rem;
  }
  .hero-title {
    font-size: 4.8rem;
  }
  h2 {
    font-size: 4.8rem !important;
  }
}

/**************************/
/* BELOW 1056px (Laptop) */
/**************************/

@media (max-width: 66em) {
  .main-header {
    position: sticky;
    overflow-y: auto;
    z-index: 99999;
    max-width: unset;
  }
  .nav-open {
    overflow-y: hidden;
  }
  .nav-open .main-header {
    height: 100dvh;
    background-color: #1f252c;
  }
  .navbar {
    display: grid;
    padding: 0;
  }
  .nav-topbar {
    margin: 0 2.4rem;
    position: sticky;
    top: 0;
    z-index: 99999;
  }
  .nav-open .nav-topbar {
  background-color: #1f252c;
  }
  .submenu {
    display: flex;
    gap: 4rem;
    transform: translateY(0);
    box-shadow: 0 0;
    border: 0;
  }
  .submenu--first-col,
  .submenu--second-col {
    flex: 1;
    background-color: #1f252c ;
  }
  .nav-links-sub {
    display: none;
    flex-direction: column;
    gap: 3.2rem ;
    align-items: flex-start;
    padding: 2.4rem;
  }
  .nav-link {
    font-size: 2rem;
  }
  .nav-open .nav-links-sub {
    display: flex;
  }
  .nav-link--dropdown {
    justify-content: space-between;
    width: 100%;
  }
  .nav--mobile {
    display: flex;
  }
  .nav-mobile--hidden { /* nav in desktop hidden in mobile*/
    display: none;
  }
  .nav-links-sub .submenu {
    opacity: 1;
    visibility: visible;
    position: unset;
  }
  .nav-link-li{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .submenu--first-col,
  .submenu--second-col {
    flex-grow: 0;
  }
  .submenu-platform .submenu--first-col,
  .submenu-platform .submenu--second-col {
    flex-grow: 1;
  }
  .submenu--links-col.developers {
    grid-template-columns: repeat(4, 1fr) ;
  }
  .main-btn.nav-btn {
    display: none;
    position:sticky;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .nav-open .nav-btn {
    display: inline-block;
  }
}

/**************************/
/* BELOW 944px (Landscape Tablet) */
/**************************/

@media (max-width: 59em) {
  .main-btn,
  .main-btn:link,
  .main-btn:visited,
  .sec-hero-btn:link,
  .sec-hero-btn:visited {
    font-size: 2rem;
  }
  .section--hero {
    gap: 4.8rem;
  }
  .platform--z-section,
  .platform--z-section.reverse {
    grid-template-columns: 1fr;
    padding: 2.4rem;
    gap: 2.4rem;
  }
  .platform--z-section img {
    order: 2;
    max-width: 50vw;
  }
  .aside-content {
    grid-template-columns: 1fr;
    height: max-content;
  }
  .aside-description,
  .aside--code-side {
    min-height: 60rem;
  }
}

/**************************/
/* BELOW 752px (Tablet) */
/**************************/

@media (max-width: 47em) {
  .submenu,
  .submenu-solutions {
    flex-direction: column;
  }
  .section--hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-img {
    align-self: center;
  }
  .main-text {
    max-inline-size: 60rem !important;
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .footer-col {
    border-bottom: 1px solid #e9ebed;
  }
  .footer-col-title {
    font-size: 2rem;
    align-items: center;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding: 3.2rem 0;
  }
  .footer-col-title::after {
    content: '';
    width: 2rem;
    height: 2rem;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%237e8792' stroke-linecap='round' stroke-linejoin='round' stroke-width='70' d='M112 184l144 144 144-144'/></svg>");
    pointer-events: auto;
  }
  .footer-col.active .footer-col-title::after {
    transform: rotate(180deg);
  }
  .footer-list {
    display: none;
    font-size: 1.8rem;
    gap: 2.4rem;
    padding-bottom: 2.4rem;
    margin-top: 0;
  }
  .footer-col.active .footer-list {
    display: flex;
  }
}

/**************************/
/* BELOW 560px (Mobile) */
/**************************/

@media (max-width: 35em) {
  html {
    font-size: 40%;
  }
}

@media (max-width: 24em) {
  html {
    font-size: 35%;
  }
  body {
    overflow-x: auto;
  }
  .submenu--links-col.developers {
    grid-template-columns: repeat(2, 1fr);
  }
  .cta--btns, 
  .hero-btns {
    flex-direction: column;
  }
  .hero-btns a.hero-btn,
  .hero-btns a.sec-hero-btn,
  .cta--btns a.main-btn, 
  .cta--btns a.request-btn {
    padding: 2rem 6rem;
    font-size: 2.4rem;
    text-align: center;
  }
  .hero-btn {
    align-self: unset;
  }
}

@media (max-width: 16em) {
  html {
    font-size: 20%;
  }
}