@layer layout {
  #decor-gradient {
    width: 100%;
    min-width: 300px;
    height: 2em;
    z-index: 40;
    position: absolute;
    background: linear-gradient(180deg, var(--primary), var(--transparent-dark));
    
  }

  #divider-1 {
    width: 100%;
    height: 2em;
    background-image: url('/src/assets/images/divider-1.svg');
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat; 
  }

  @media (max-width: 48em) {
    #divider-1 {
      height: 1em;
    }
  }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: auto;
    height: auto;
    min-height: auto;
    margin-top: 6em;
  }

  @media (max-width: 64em) {
    .hero {
      margin-top: 12vh;
      margin-bottom: var(--spacing-5em);
    }
  }

  @media (max-width: 60em) {
    .hero {
      margin-top: 12vh;
    }
  }

  @media (max-width: 48em) {
    .hero {
      margin-top: 14vh;
    }
  }

  @media (max-width: 27.5em) {
    .hero {
      margin-top: 24vh;
    }
  }

  @media (max-width: 24.375em) {
    .hero {
      margin-top: 20vh;
    }
  }

  .hero__image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero__image-container img {
    width: 100%;
    max-width: var(--container);
    height: auto;
    animation: pulse 15s linear infinite alternate;
  }

  @keyframes pulse {
    from {
        transform: scale(1);
      }
      to {
        transform: scale(1.1);
      }
  }

  .hero__paragraph {
    z-index: 1;
    position: absolute;
    display: block;
    width: 100%;
    min-width: auto;
    max-width: var(--container);
    height: auto;
    min-height: auto;
    color: var(--white);
  }

  @media (max-width: 64em) {
      .hero__paragraph {
        margin-bottom: var(--spacing-0);
      }
  }

  @media (max-width: 48em) {
    .hero__paragraph {
      position: unset;
    }
  }

  .hero__paragraph-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-2em);
  }

  @media (max-width: 64em) {
    .hero__paragraph-inner {
      margin-top: -8em;
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 60em) {
    .hero__paragraph-inner {
      margin-top: -4em;
    }
  }

  @media (max-width: 48em) {
    .hero__paragraph-inner {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: var(--spacing-2em);
      padding: var(--spacing-0) var(--spacing-1em);
    } 
  }

  @media (max-width: 30em) {
    .hero__paragraph-inner {
      display: flex;
      flex-direction: column;
      margin-top: var(--spacing-3em);
    }
  }

  .hero__paragraph h1 {
    width: 100%;
    max-width: 640px;
    text-shadow: 2px 4px 10px #000;
  }

  @media (max-width: 60em) {
    .hero__paragraph h1 {
      max-width: 480px;
    }
  }

  @media (max-width: 48em) {
    .hero__paragraph h1 {
      max-width: 400px;
    }
  }


@media (max-width: 48em) {
    .hero__paragraph-inner .primary-button {
      width: 100%;
      max-width: 160px;
      text-align: center;
    }
  }

@media (max-width: 30em) {
    .hero__paragraph-inner .primary-button {
      width: 100%;
      max-width: none;
      text-align: center;
    }
  }

  .partners {
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: center;
  }

  .partners__inner {
    width: 100%;
    max-width: var(--container);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--white);
    margin: var(--spacing-4em) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-2em);
  }

  @media (max-width: 64em) {
    .partners__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .partners__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .partners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    width: 100%;
  }

  @media (max-width: 48em) {
    .partners__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .partners__heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-3em);
  }

  .partners__heading p {
    max-width: 600px;
    text-align: center;
  }

  .partners__grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .partners__grid-cell img {
    width: 160px;
    height: auto;
  }

  @media (max-width: 48em) {
    .partners__grid-cell img {
      width: 120px;
    }
  }

  .advantages {
    width: 100%;
    max-width: var(--container);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background-image: url('/src/assets/images/kz-map.png');
    background-size: 60% auto;
    background-position: center;
    background-repeat: no-repeat; 
  }

  @media (max-width: 60em) {
    .advantages {
      background-size: 90% auto;
    }
  }

  .advantages__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-4em) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-3em);
  }

  @media (max-width: 64em) {
    .advantages__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 60em) {
    .advantages__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .advantages__inner__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap-1em);
    margin: var(--spacing-3em) var(--spacing-0);
  }

  .flexbox-1  {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-1em);
    column-gap: var(--spacing-1em);
  }

  @media (max-width: 60em) {
    .flexbox-1 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 27.5em) {
    .flexbox-1 {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-1em);
    }
  }

  @media (max-width: 20.625em) {
    .flexbox-1 {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .flexbox-2  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;
    gap: var(--spacing-1em);
    column-gap: var(--spacing-1em);
  }

  .flexbox-2 .info-group {
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 60em) {
    .flexbox-2 {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .company-does {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    background-image: url('/src/assets/images/bg-1.webp');
    background-position: center;
  }

  @media (max-width: 60em) {
    .company-does h3 {
      max-width: 480px;
    }
  }

  .company-does__inner {
    width: 100%;
    max-width: var(--container);
    display: block;
    margin: var(--spacing-6em) var(--spacing-0) var(--spacing-2em);
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-3em);
  }

  @media (max-width: 64em) {
    .company-does__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .company-does__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .company-does__content {
    width: 100%;
    display: flex;
    gap: var(--gap-2em);
  }

  @media (max-width: 60em) {
    .company-does__content {
      flex-direction: column-reverse;
    }
  }

  .cdc-column {
    display: flex;
    flex-direction: column;
    justify-content: start; 
    align-items: stretch;
    gap: var(--gap-2em);
  }

  .minislider {
    width: 100%;
    max-width: 610px;
    align-self: start;
  }

  @media (max-width: 80em) {
    .minislider {
      max-width: 480px;
    }
  }

  @media (max-width: 60em) {
    .minislider {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (max-width: 48em) {
    .minislider {
      max-width: none;
    }
  }

  .service {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    background-image: url('/src/assets/images/bg-1.webp');
    background-position: center;
  }

  .service__inner {
    width: 100%;
    max-width: var(--container);
    display: block;
    margin: var(--spacing-5em) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-3em);
  }

  @media (max-width: 64em) {
    .service__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .service__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .service__inner h2 {
    max-width: 640px;
  }

  @media (max-width: 48em) {
    .service__inner h2{
      max-width: 440px;
    }
  }

  .service__content {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--gap-2em);
  }

  @media (max-width: 60em) {
    .service__content {
      flex-direction: column;
    }
  }

  .projects {
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: center;
    background-color: var(--dark);
    background-image: url('/src/assets/images/bg5.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2680px auto;
  }

  .projects__inner {
    width: 100%;
    max-width: var(--container);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    margin: var(--spacing-5em) var(--spacing-0);
    padding: var(--spacing-4em) var(--spacing-3em);
    gap: var(--gap-5em);
  }

  @media (max-width: 64em) {
    .projects__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .projects__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .clients {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--white);
    background-image: url('/src/assets/images/bg3.webp');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 1440px auto;
  }

  @media (max-width: 27.5em) {
    .clients {
      background-size: 2000px auto;
      background-position: center center;
    }
  }

  .clients__inner {
    width: 100%;
    max-width: var(--container);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--dark);
    margin: var(--spacing-5em) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-3em);
  }

  @media (max-width: 64em) {
    .clients__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .clients__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .clients__heading h2 {
    text-align: center;
  }

  .clients__container {
    width: 100%;
    padding: var(--spacing-2em);
    background: var(--wrapper-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: var(--backdrop-blur-xxs);
    border-radius: var(--radius-card);
  }

  @media (max-width: 48em) {
    .clients__container {
      padding: var(--spacing-1em);
    }
  }

  .clients__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2em);
  }

  @media (max-width: 64em) {
    .clients__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 48em) {
    .clients__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap-1em);
    }
  }

  @media (max-width: 41.25em) {
    .clients__grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .clients__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-1em);
    padding: var(--spacing-2em) var(--spacing-1em);
    border: 1px solid var(--grey);
    border-radius: var(--radius-card);
    background-color: var(--white);
    text-decoration: none;
    color: var(--dark);
    transition: var(--transition);
  }

  .clients__card:hover {
    border-color: var(--secondary-blue);
  }

  .clients__card:focus {
    outline: none;
  }

  .clients__card:focus-visible {
    border-color: var(--secondary-blue);
  }

  .clients__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
  }

  .clients__logo img {
    max-width: 120px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .clients__logo img.logo-lg {
    max-width: 160px;
    max-height: 120px;
  }

  .clients__logo img.logo-xl {
    max-width: 180px;
    max-height: 130px;
  }

  .clients__card p {
    text-align: center;
    font-size: 0.875rem;
  }

  .licenses {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    background-image: url('/src/assets/images/bg4.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% auto;
  }

  @media (max-width: 48em) {
    .licenses {
      background-size: 100% auto;
    }
  }

  @media (min-width: 2080px) {
    .licenses {
      background-size: 56% auto;
    }
  }

  .licenses__inner {
    width: 100%;
    max-width: var(--container);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-5em) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-3em);
    gap: var(--gap-3em);
  }

  @media (max-width: 64em) {
    .licenses__inner {
      padding: var(--spacing-0) var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .licenses__inner {
      padding: var(--spacing-0) var(--spacing-1em);
    }
  }

  .licenses__inner .display__heading {
    text-align: center;
    margin-bottom: var(--gap-2em);
  }

  #video {
    width: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
  }

  #video video {
    aspect-ratio: 16 / 9;
  }
}