:root {
      --color-light-green: #B0C834;
      --color-medium-green: #7FA23C;
      --color-dark-green: #638C45;
      --color-light-turquoise: #4AC3C4;
      --color-dark-turquoise: #1E9C9D;
      --color-salmon-pink: #D486BE;
      --color-dark-gray: #6A6665;
      --color-light-gray: #F0F0ED;
      --color-black: #101010;
      --color-white: #FFFFFF;

      --padding-inner: 24px;
      --padding-double-inner: 48px;
      --padding-x: 44px;
      --padding-y: 84px;
      --gap-l: 18px;
      --gap-m: 16px;
      --gap-s: 8px;
      --gap-xs: 4px;

      --title-xl: 44px;
      --title-l: 36px;
      --title-m: 28px;
      --title-s: 24px;
      --title-xs: 20px;
      --body-l: 18px;
      --body-m: 16px;
      --highlight: 42px;
      --line-height-title-xl: 52px;
      --line-height-title-l: 44px;
      --line-height-title-m: 36px;
      --line-height-title-s: 32px;
      --line-height-title-xs: 28px;
      --line-height-body-l: 26px;
      --line-height-body-m: 24px;
      --line-height-highlight: 50px;

      --max-width: 1280px;
    }

    .no-scroll {
      height: 100vh;
    }

    body {
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: var(--color-black);
      background: var(--color-light-gray);
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 44px;
      border-bottom: 2px solid var(--color-black);
    }

    .header img {
      width: 142px;
    }

    .button-lp {
      padding: 6px 12px 6px 16px;
      background: var(--color-light-turquoise);
      color: var(--color-black);
      border: none;
      border-left: 4px solid var(--color-black);
      cursor: pointer;
      text-transform: uppercase;
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      font-weight: 700;
      text-decoration: none;
    }

    .hero {
      background: var(--color-medium-green);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .hero-text {
      max-width: 720px;
      color: var(--color-black);
      padding: var(--padding-inner);
      padding-left: var(--padding-double-inner);
      background-color: var(--color-light-gray);
      border-left: 24px solid var(--color-dark-green);
      text-align: left;
      display: grid;
      gap: 24px;
      position: absolute;
    }

    .hero h1 {
      font-size: var(--title-l);
      line-height: var(--line-height-title-l);
      margin: 0;
    }

    .hero p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;
    }

    #circle {
      margin-left: -10%;
    }

    .topics {
      padding: 84px 44px;
      gap: 44px;
      display: grid;
    }

    .topics-text {
      display: grid;
      gap: 44px;
      border-bottom: 2px solid var(--color-black);
      grid-template-columns: auto 1fr;
    }

    .topics h2 {
      font-size: var(--title-xl);
      line-height: var(--line-height-title-xl);
      padding: 16px 0 40px 0;
      margin: 0;
    }

    .topics-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 44px;
    }

    .topic-item {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    .topic-item-text {
      display: grid;
      gap: 4px;
    }

    .topic-item-text h3 {
      font-size: var(--title-xs);
      line-height: var(--line-height-title-xs);
      color: var(--color-dark-turquoise);
      text-transform: uppercase;
      margin: 0;
    }

    .topic-item-text p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;

    }

    .section-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-l);
      padding: var(--padding-l) 0;
    }

    .section-text {
      display: grid;
      gap: 18px;
    }

    .section-text span {
      color: var(--color-light-gray);
      background: var(--color-dark-turquoise)
    }

    .section-text h2 {
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      margin: 14px 0 0 0 ;
      padding: 0;
    }

     .section-text p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;
    }

    .turquoise-box {
      background: var(--color-light-turquoise);
      padding: var(--padding-inner);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;

      position: relative;  
    }

    .turquoise-box::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 64px;          
      height: 100%;

      background: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 12px,
       var(--color-black) 12px, 
       var(--color-black) 16px 
      );
    }

    .turquoise-icons {
      display: flex;
      flex-direction: column;
      gap: var(--gap-m);
    }

    .turquoise-icons div {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--gap-s);
      align-items: center;
    }

    .turquoise-icons img {
      width: 64px;
      height: 64px;
      grid-row: span 2;
    }

    .turquoise-box h3 {
      font-size: var(--title-xs);
      line-height: var(--line-height-title-xs);
      margin: 0;
      padding-bottom: 8px;
    }

    .turquoise-box p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;
    }

    .turquoise-box .number {
      font-size: var(--body-l);
      line-height: var(--line-height-body-l);
      font-weight: 700;
      grid-column: 2;
    }

    .turquoise-box .big-number {
      font-size: var(--highlight);
      line-height: var(--line-height-highlight);
      font-weight: 300;
      padding-top: 8px;
    }

    .big-number {
      font-size: 40px !important
    }
    
    .turquoise-icons span {
      grid-column: 2;
    }
    
    .new-code {
      display: flex;
      padding: 0 44px;
    }

    .new-code img {
      height: 376px;
    }

    .new-code div {
      padding: var(--padding-double-inner);
      background-color: var(--color-salmon-pink);
      position: relative;
 
    } 

    .new-code div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
        width: 80px;    
        height: 112px;   

      background: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 12px,
        #000 12px,
        #000 16px
      );
      mask: linear-gradient(135deg, black 0 40%, transparent 40%);
    }

    .new-code h2 {
      font-size: var(--title-l);
      line-height: var(--line-height-title-l);
      margin: 0;
      padding-bottom: 24px;
    }

    .new-code p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;
    }

    .guide-section {
      padding: 84px 44px;
    }

    .guide-content{
      display: grid;
      grid-template-columns: 1.5fr 0.5fr;
      gap: var(--gap-l);
      align-items: center;
    }

    #guide-img {
      max-width: 300px;
    }

    .guide-section p {
      font-size: var(--title-s);
      line-height: var(--line-height-title-s);
      font-weight: 700;
      margin: 0 0 24px 0;
    }

    .section-green {
      margin: 0 var(--padding-x);
      background-color: var(--color-light-green);
    }

    .green-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      justify-items: end;
    }

    #green-image {
      width: 100%;
    }

    .green-container > div {
      padding: 84px 44px 52px 44px;
      background-color: var(--color-light-green);
      display: grid;
      gap: 24px;
      position: relative;
    }

    .green-container h2 {
      font-size: var(--title-s);
      line-height: var(--line-height-title-s);
      font-weight: 700;
      color: var(--color-white);
      margin: 0;
      padding: 16px 24px;
      background-color: var(--color-black);
      position: absolute;
      margin-top: -14px;
      margin-left: 44px;
      z-index: 10;
    }

    .green-container h2::after {
      content: "";
      position: absolute;
      bottom: -10px; 
      left: 28px;  
      width: 0;
      height: 0;
      border-left: 10px solid transparent; 
      border-right: 10px solid transparent;
      border-top: 10px solid var(--color-black); 
}

    .green-container h3 {
      font-size: var(--title-xs);
      line-height: var(--line-height-title-xs);
      margin: 0;
      padding-bottom: 4px;
    }

    .green-container p {
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      margin: 0;
    }

    #green-border {
      width: 100%;
    }

    .footer {
      color: white;
      text-align: center;
      margin-top: 84px; 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--color-dark-gray);
    }

    .gray-footer {
      background: var(--color-dark-gray);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 44px;
      max-width:var(--max-width);
      width: 100%;
      box-sizing: border-box;
    }

    #footer-logo {
      height: 112px;
    }

    .contact-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    } 

    .contact-container p {
      color: var(--color-white);
      text-decoration: none;
    }

    .contact {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .contact p {
      margin: 0;
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
    }

    .logos-container {
      display: flex;
      align-items: center;
      gap: 24px;
      padding-top: 12px;
    }
    
    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 44px 0;
      gap: 12px;
      background: var(--color-black);
      width: 100%;
    }

    .footer-content p {
      margin: 0;
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
    }

    #laboota {
      font-size: 10px;
      line-height: 14px;
      font-weight: 400;
    }

    @media (max-width: 1279px) {
      :root {
        --title-xl: 36px;
        --title-l: 36px;
        --title-m: 24px;
        --title-s: 24px;
        --title-xs: 18px;
        --body-l: 18px;
        --body-m: 16px;
        --highlight: 42px;
        --line-height-title-xl: 44px;
        --line-height-title-l: 44px;
        --line-height-title-m: 32px;
        --line-height-title-s: 32px;
        --line-height-title-xs: 26px;
        --line-height-body-l: 26px;
        --line-height-body-m: 24px;
        --line-height-highlight: 50px;
        --max-width: 1071px;
        --x-padding: 32px;
        --y-padding: 84px;
        --inner-padding: 24px;
        --inner-padding-double: 48px;
        --inner-spacing: 40px;
      }

      .header {
          padding: 8px 32px;
      }
      .hero {
        overflow: hidden;
      }

      .hero-text {
        margin: 0 56px;
      }

      .image-text,
      .guide-section,
      .green-container,
      .section-split,
      .topics-grid{
        grid-template-columns: 1fr;
      }

      .new-code {
        flex-direction: column;
        padding: 0 32px;
      }

      .topics {
        padding: 84px 32px;
        gap: 40px;
      }

      .topics-text {
        gap: 32px;
      }

      .topic-item {
        align-items: center;
      }

      .topics-text h2 {
        padding: 0 0 24px 0;
      }

      .section-text img {
        width: 100%;
      }

      .section-split {
        gap: 40px;
      }

      .guide-section {
        padding: 84px 32px;
      }

      .guide-section > img {
        width: 100%;
        height: 12px;
      }

      .guide-content {
        margin-top: 28px;
      }

      .section-green {
        margin: 0 32px;
      }

      .green-container h2 {
        margin-left: 40px;
      }
    }

    @media (max-width: 736px) {
      :root {
      --title-xl: 28px;
      --title-l: 20px;
      --title-m: 20px;
      --title-s: 20px;
      --title-xs: 16px;
      --body-l: 16px;
      --body-m: 14px;
      --highlight: 32px;
      --line-height-title-xl: 36px;
      --line-height-title-l: 28px;
      --line-height-title-m: 28px;
      --line-height-title-s: 28px;
      --line-height-title-xs: 24px;
      --line-height-body-l: 24px;
      --line-height-body-m: 22px;
      --line-height-highlight: 40px;
      --max-width: 736px;
      --x-padding: 16px;
      --y-padding: 72px;
      --inner-padding: 16px;
      --inner-padding-double: 32px;
      --inner-spacing: 36px;
    }
      .header {
        padding: 8px 16px;
      }

      .topic-item img {
        width: 96px;
        height: 96px;
      }

      .hero-text {
        padding: 16px;
        border-left: 16px solid var(--color-dark-green);
        margin: 0 16px;
      }

      .topics {
        padding: 72px 16px;
      }

      .topics h2 {
        padding: 0 0 16px 0;
      }

      .topics-text {
        flex-direction: column;
        gap: 16px
      }

      .topics-text img {
        max-width: 120px;
      }

      .turquoise-box p {
        max-width: 90%;
      }

      .new-code div {
        padding: 32px;
      }

      .new-code {
        padding: 0 16px;
      } 

      .section-green {
        margin: 0 16px;
      }

      .new-code h2 {
        padding-bottom: 16px;
      }

      .guide-content, 
      .turquoise-box {
        grid-template-columns: 1fr;
      }

      .guide-section {
        padding: 72px 16px;
      }

       .guide-content {
        margin-top: 24px;
        gap: 24px
      }

      .green-container > div {
        padding: 72px 16px 32px 16px;
      }

      .guide-section p {
        margin-bottom: 16px;
      }

      .green-container h2 {
        margin-left: 16px;
      }

      .gray-footer {
       flex-direction: column;
       align-items: center;
       padding: 36px;
       gap: 36px
      }

      .contact {
        justify-content: center;
      }

      #footer-logo {
      height: 56px;
    }
  }