/*

--01 TYPOGRAPHY SYSTEM

/*

FONT SIZE SYSTEM (px)
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 / 110 / 122

 - Font weights

 - Line heights
  Default: 1

 --- 02 COLORS

MAIN COLOR: #20c997
TINTS: 
#e6fcf5
#c3fae8
#12b886


SHADES:
ACCENTS: 
GREYS: #333



--- 05 SHADOWS

box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075)

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
 
*/

/* MEDIA QUERIES */

/* laptops up to 1104px (1104/16 = 72em) */

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

  .heading-primary {
    font-size: 4.4rem;
  }

  .heading-tertiary {
    font-size: 2.4rem;
  }

  .hero-description {
    font-size: 1.8rem;
  }

  .CTA-form {
    font-size: 1.4rem;
  padding: 2.4rem 0rem 2.4rem 2.4rem;
  margin-left: 4.8rem;
  }

  .list-item {
    margin-bottom:4.8rem;
  }

  .paslaugos-text-box {
    padding: 2.4rem;
  }

  .grid {
    row-gap: 0;
  }

  .section-paslaugos {
    padding: 3.6rem 0;
  }
 
  
}

/* Large tablets - up to 912px (912/16 = 57em) */

@media (max-width: 57em) {
  .heading-primary {
    font-size: 3.6rem;
  }

  .hero-description {
    font-size: 1.6rem;
  }

  .heading-secondary {
    font-size: 3rem;
    margin-bottom: 1.2rem;
  }

  .grid {
    row-gap: 0;
  }

  .section-paslaugos {
    padding: 3.6rem 0;
  }

  .CTA-form {
    font-size: 1.4rem;
    padding: 1.2rem 0rem 1.2rem 1.2rem;
    margin-left: 2.4rem;
   }

   .CTA-form input {
    padding: 0.8rem;
   }

  .btn.btn--form {
    font-size: 1.4rem;
    padding: 1rem 1.6rem;
  }

  .list-item {
    margin-bottom:4.8rem;
  }

  .kontaktai {
    padding: 2.4rem;
  }

  .footer-grid:not(:last-child) {
    padding-left: 2.4rem;
  }

  .footer-grid:last-child {
    padding-right: 2.4rem;
  }

  .footer-logo {
    gap: 6rem;
  }

  .footer-email {
    justify-self: center;
  }

  .footer-text {
    justify-self: center;
  }
}

/* Tablets up to 816px (816/16 = 51em)
The navigation bar in the header started to break that's why the gap since the last query is so low */

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

  .heading-secondary {
    margin-bottom: 6.4rem;
  }

  .list-icon {
    height: 3rem;
    width: 3rem;
  }

  .paslaugos-text-box {
    padding:0 0 4.8rem 2.4rem;
  }

  .kontaktai-container {
    padding: 2.4rem 2.4rem 2.4rem 4.8rem;
  }

  .kontaktai {
    padding: 2.4rem 2.4rem 2.4rem 6rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 0.5fr 0.5fr;
    padding-left: 3.6rem;
  }

  .footer-grid:not(:last-child) {
    padding-left: 0.1rem;
  }

  .footer-logo {
    gap: 12rem;
  }


  /* Smaller tabets 768px/16 = 48em */
  @media (max-width: 48em) {
    .section-paslaugos {
      padding: 3.6rem 0 4.8rem 0;
    }

    .btn.btn--outline {
      font-size: 1.8rem;
    }

  }

  /* Small Small tablets */
  /* Screen up to 678px/16 = 43em */

  @media (max-width: 43em) {
    .heading-primary {
      font-size: 3rem;
    }

    .heading-secondary {
      font-size: 2.4rem;
    }

    .subheading {
      font-size: 1.2rem;
    }

    .paslaugos-description {
      font-size: 1.6rem;
    }

    .btn.btn--outline {
      font-size: 1.6rem;
    }

    .footer-logo {
      gap: 6.8rem;
    }

    .list-item {
      font-size: 1.4rem;
    }

    /* Stack the contact form and contact info on small screens */
    .kontaktai-container.grid.grid--2-cols {
      grid-template-columns: 1fr;
      row-gap: 1.6rem;
    }

    .heading-tertiary.cta-heading {
      font-size: 1.8rem;
    }

    .cta-form label {
      font-size: 1.4rem;
    }
    .cta-form input {
      font-size: 1.2rem;
    }

    .main-nav {
      background-color: rgba(230, 252, 245, 0.87);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      transform: translateX(100%);

      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s ease-in;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .nav-open .main-nav {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: translateX(0);
      z-index: 999999;
    }

    .nav-open .icon-mobile-nav[name="close-outline"] {
      display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"] {
      display: none;
    }

    .main-nav-list {
      flex-direction: column;
      gap: 4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
      font-size: 3rem;
    }

    .btn-mobile-nav {
      display: block;
      z-index: 99999999;
    }

    .icon-mobile-nav[name="close-outline"] {
      display: none;
    }

    .subheading {
      overflow-y: hidden;
    }

    .section-paslaugos {
      padding: 2.4rem 0 3.6rem 0;
    }
    .paslaugos-text-box {
      padding: 0 2.4rem 1.2rem 1.2rem;
    }
  }

  @media (max-width: 30em) {
    .grid {
      row-gap: 3.2rem;
      column-gap: 3.2rem;
    }

    .hero {
      gap: 4.8rem;
    }

    .section-hero {
      padding: 3.2rem 0;
    }

    .heading-primary {
      font-size: 2rem;
    }

    .hero-description {
      font-size: 1.2rem;
    }

    .btn.btn--outline {
      font-size: 1.2rem;
      padding: 1rem 1.6rem;
    }

    .container {
      padding: 0 1.6rem;
    }

    .container.grid.grid--2-cols.grid--center-v {
      grid-template-columns: 1fr;
    }

    .heading-tertiary {
      font-size: 2rem;
    }

    .paslaugos-text-box {
      padding: 3.2rem;
    }

    .paslaugos-description {
      font-size: 1.4rem;
    }

    .nuotraukos-img-box:nth-child(4) {
      grid-row: 3;
    }

    .nuotraukos-img-box:nth-child(8) {
      grid-row: 7;
    }

    .nuotraukos-img {
      width: 45%;
    }

    .box-left::before {
      display: none;
    }

    .nuotraukos-img-box::before {
      display: none;
    }

    .kontaktai-container.grid.grid--2-cols {
      grid-template-columns: 1fr;
      row-gap: 1.6rem;
    }
    .kontaktai-container {
      padding:1.2rem;
    }

    .kontaktai {
      padding: 2.4rem 2.4rem 2.4rem 1.2rem;
    }
    .heading-tertiary.cta-heading {
      font-size: 1.6rem;
    }

    .CTA-form {
      padding: 3.2rem 1.8rem;
    }
    /* px on purpose: rem is scaled down here and inputs under 16px
       trigger auto-zoom on iPhones */
    .cta-form label {
      font-size: 13px;
    }

    .cta-form input,
    #contactform-textarea {
      font-size: 16px;
    }

    .list-item {
      font-size: 14px;
    }

    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
      padding-left: 1.6rem;
  }

  .footer-logo {
    gap: 2.4rem;
  }

  .btn.btn--form {
    font-size: 1.2rem;
    padding: 1rem 1.6rem;
  }
}
}

/* Mobile phones */

@media (max-width: 24em) {

  .header {
    padding: 0 1.6rem;
    }

  .logo {
    height: 9.6rem;
  }

  .hero {
    padding: 0 1.6rem;
    gap: 3.2rem;
  }

  .heading-secondary {
    font-size: 1.8rem;
  }

  .heading-tertiary {
    font-size: 1.6rem;
  }

  .container-paslaugos {
    margin-left: 2.4rem;
  }
  
  .section-paslaugos {
    padding: 3.2rem 0 2.4rem 0;
  }

  .paslaugos-desciption {
    font-size: 1.2rem;
  }

  .kontaktai-container.grid.grid--2-cols {
    column-gap: 1.6rem;
  }

  .CTA-form {
    padding: 1.6rem 1.6rem;
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    padding-left: 1.2rem;
  }

  .footer-logo {
     gap: 1.8rem;
  }
}