@layer page {
  h2 {
    margin-top: 0;
    font-size: 1.6rem;
  }

  /* =============================================
   HERO SECTION
   ============================================= */

  .hero-wrapper {
    background-image: url(/images/mesh-gradient.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* border-bottom: 1px solid var(--color-border); */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
  }

  .hero-section {
    padding: 5rem 0 7rem;
  }

  .hero-content {
    display: flex;
    align-items: center;
    gap: 6.5rem;

    .social-action {
      text-decoration: none;
      color: var(--whatsapp-color);
      display: flex;
      gap: 0.5rem;
      border: 2px solid var(--whatsapp-color);
      max-width: fit-content;
      padding: 0.5rem 1rem;
      border-radius: 0.8rem;
      margin-top: 2rem;
      transition:
        background-color 0.3s,
        color 0.3s;

      .whatsapp-icon {
        --site-icon-color: var(--whatsapp-color);
        transition:
          background-color 0.3s,
          color 0.3s;
      }

      &:hover {
        background-color: var(--whatsapp-color);
        color: var(--whatsapp-text-color);

        .whatsapp-icon {
          --site-icon-color: var(--whatsapp-text-color);
        }
      }
    }
  }

  .hero-text {
    flex: 0 0 55%;
  }

  .hero-text h1 {
    margin-top: 0;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.2rem;
  }

  .hero-text .hero-subtitle {
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    line-height: 2.4rem;

    .highlighted {
      font-weight: bold;
      color: var(--color-accent);
    }
  }

  .hero-text .hero-description {
    color: var(--color-primary);
  }

  .hero-image {
    flex: 1;
    min-height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;

    & > img {
      /* border: 2px solid #d6d9de; */
      border-radius: 1rem;
      box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    }
  }

  .hero-image img {
    max-width: 100%;
    height: auto;
  }

  .image-placeholder {
    width: 100%;
    min-height: 17.5rem;
    background: #f4f4f4;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
  }

  /* =============================================
   ABOUT SECTION
   ============================================= */

  .about-section {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .about-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  .about-text {
    flex: 1;
    flex-grow: 2;
  }

  .about-text p:last-child {
    margin-bottom: 0;
  }

  .about-equipment {
    flex: 1;
    max-width: 28.75rem;
  }

  .image-wrapper {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8eaed;
    border-radius: 1rem;
    border: 1px solid #c5cacf;

    .equipment-image {
      width: 90%;
    }
  }

  .equipment-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
  }

  .equipment-caption {
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: #6a7073;
    font-size: 0.8rem;
    line-height: 1.1rem;
    padding: 0 1.4rem;
  }

  /* =============================================
   CAPABILITIES SECTION
   ============================================= */

  .capabilities-section {
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--color-bg-gray);
    /* background: linear-gradient(135deg, #ffffff, #fdfcfc, #fcf9f8, #fbf6f4, #fcf1ee, #fdede8); */
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    /* background-image: url(/images/mesh-gradient-2.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; */

    .content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 7rem;
      align-items: center;

      .certificate {
        text-align: center;

        h3 {
          margin-top: 0;
          margin-bottom: 1rem;
        }

        img.certificate-image {
          width: 100%;
          height: auto;
          border-radius: 0.375rem;
          border: 1px solid var(--color-border);
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }
      }
    }

    .capability h3 {
      margin-bottom: 0;
    }
  }

  .section-subtitle {
    margin-bottom: 2.5rem;
  }

  .capability {
    margin-bottom: 2rem;
  }

  /* =============================================
   CURRENT TOPICS SECTION
   ============================================= */

  .current-section {
    margin-top: 5rem;
    margin-bottom: 5rem;

    & > .container {
      padding: 1rem 2rem;
      border: 1px solid var(--color-border);
      /* background-color: var(--color-bg-gray); */
      border-radius: 1rem 16px;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      border-top: 2px solid var(--color-accent);
    }
  }

  .current-list {
    padding-left: 1.5rem;

    li {
      margin-top: 0.6rem;
      margin-bottom: 0.6rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--color-border);
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }

  /* =============================================
   EXAMPLES SECTION
   ============================================= */

  .examples-section {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }

  .examples-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  .examples-reports {
  }

  .examples-link {
    display: block;
    margin-top: 1.25rem;
  }

  .example-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.2rem;

    .example-image {
      border: 1px solid var(--color-border);
      border-radius: 0.8rem;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }
  }

  /* =============================================
   GROUND PROFILE SECTION
   ============================================= */

  .profile-section {
    background-color: #001524;
    padding: 3.75rem 0 5rem;
  }

  .profile-section .profile-heading {
    color: #f2f7ff;
    margin-bottom: 4rem;
    text-align: center;
    font-weight: 300;
    font-size: 2.2rem;
  }

  .profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    color: #f2f7ff;

    img.example-image {
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      margin: 0.2rem 0;
    }
  }
}