html {
    font-size: 16px;
}

  body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #fdfdfd;
  }

   .btn-link {
    display: inline-block;
    background-color: black;
    color: white;
    width: 100%;
    max-width: 7rem;
    padding: 1px 6px;
    text-align: center;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .btn-link-text {
    display: inline-block;
    padding: 0.5rem 0rem;
  }
  
  a.corridor-Expalnation-box-button {
    width: 100%;
    max-width: 20rem !important;
  }

  .btn-link:hover {
      background-color: gray;
  }

  /*************************************************/
  /* 0 */
    ._0-main-container {
        display: flex;
        flex-direction: column;
        --maximum-width: 100%;
        width: var(--maximum-width);
        align-items: center;
        /* min-height: 100vh;
        min-width: 100vh; */
        box-sizing: border-box;
      }
      
/*************************************************/
/* 1 */
  ._1-corridor-sec {
    width: var(--maximum-width);
    align-items: center;
  }
    .corridor-text {
      display: block;
      justify-self: center;
      text-align: center;
      font-size: 3rem;
      font-weight: bold;
      color: #333;
    }
    img.corridor-img {
      display: block;
      justify-self: center;
      width: 100%;
      max-width: calc(0.6 * var(--maximum-width));
      aspect-ratio: 1.7777777777777777 / 1;
      border-radius: 1.2rem;
    }
    .corridor-Expalnation-box {
      justify-items: center;
    }
      .corridor-Expalnation-box-text{
        width: 100%;
        max-width: 50%;
        text-align: center;
      }

/*************************************************/
/* 2 */
    .links-box {
      width: 100%;
      max-width: calc(1 * var(--maximum-width));
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      row-gap: 1rem;
      margin: 4rem;
      justify-self: center;
    }
      .links-box a {
        font-size: 2rem;
        text-decoration: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        color: #999999;
      }
        .links-box span {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 1rem;
        }

/*************************************************/
/* 3 */
    ._3-Eng-and-Web-sec {
      width: 100%;
      max-width: var(--maximum-width);
      /* max-width: calc(0.75 * var(--maximum-width)); */
      background-color: #f0f0f0;
    }
      .Eng-and-Web-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
      }
      .Eng-and-Web-box img {
        height: 20rem;
        aspect-ratio: 1.4 / 1;
        border-radius: 1rem;
      }
      .Eng-and-Web-box-info-box {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 20rem;
        /* width: 100%; */
        width: calc(0.45 * var(--maximum-width));
      }
        .Eng-and-Web-box-eng {
          display: flex;
          flex-direction: row;
          width: 80%;
          justify-content: space-evenly;
          gap: 1rem;
        }
        .Eng-and-Web-box-web {
          display: flex;
          flex-direction: row-reverse;
          width: 80%;
          justify-content: space-evenly;
          gap: 1rem;
        }
        .the-title {
          text-align: center;
          font-size: 2.5rem;
          font-weight: bold;
          margin: 0rem;
        }
        .the-brief {
          font-size: 1rem;
        }

/*************************************************/
/* 4 */
    ._4-FAQ {
        display: flex;
        flex-direction: column;
        --container-max-width: calc(0.75 * var(--maximum-width));
        --hr-offset: calc(0.05 * var(--maximum-width));
        width: 100%;
        max-width: var(--container-max-width);
      }
      .FAQ-text {
        align-self: center;
        font-size: 2.5rem;
        font-weight: bold;
      }
      .FAQ-accardion {
        width: 100%;
        /* max-width: var(--container-max-widt  h); */
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 1rem 1rem 0rem 0rem;
        background-color: #f0f0f0;
      }
      hr {
        width: 90%;
        /* max-width: calc(var(--container-max-width) - var(--hr-offset)); */
        transition: width 0.3s ease;
        color: #333;
      }
      .FAQ-accordion-button{
        width: 100%;
        max-width: 10rem;
        /* max-width: calc(0.2 * var(--maximum-width)); */
        align-self: center;
        margin: 3rem;
      }
      .FAQ-accordion-box {
        border: none;
      }
      .FAQ-accordion-box-q {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .FAQ-accordion-box-q-icon {
        width: 100%;
        max-width: 1.5rem;
        padding: 0.5rem;
        vertical-align: middle;
      }
      .FAQ-accordion-box-q-text {
        padding: 0.5rem;
        vertical-align: middle;
      }
      .FAQ-accordion-a {
        display: none;
        margin-left: 2rem;
      }
      .FAQ-accordion.open .FAQ-accordion-a {
        display: block;
      }
      .FAQ-accordion-box-q-icon {
        transition: transform 0.3s ease;
      }
      
      /* Rotated when open */
      .FAQ-accordion.open .FAQ-accordion-box-q-icon {
        transform: rotate(45deg);
      }
      
      /* Fix pointer style */
      .FAQ-accordion-box-q-text {
        cursor: default;
        user-select: none;   /* optional: prevent text selection */
      }

/*************************************************/
/* 5 */
  ._5-subscription {
    width: 100%;
    /* max-width: calc(0.75 * var(--maximum-width)); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: 2.5rem;
    font-weight: bold;
    background-color: #f0f0f0;
  }

  a.subscription-box-button {
    display: block;
    align-self: center !important;
    justify-self: center;
    margin-bottom: 3rem;
    font-weight: normal;
  }

  .subscription-box-text {
    text-align: center;
  }

/*************************************************/
/* 6 */
  ._6-footer {
    width: 100%;
    /* max-width: calc(0.75 * var(--maximum-width)); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: black;
    color: white;
  }
    .footer-connection {
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }
    ._6-footer a{
      text-decoration: none;
    }

/*************************************************/
/* moble responsive */
      @media (max-width: 768px) {
        html {
          font-size: 14px;
        }
      
        .corridor-img img{
          justify-self: center;
          width: 90%;
        }
      
        .corridor-text {
          font-size: 2rem;
          padding: 1rem;
        }
      
        .corridor-Expalnation-box-text {
          width: 90%;
        }
      
        .corridor-Expalnation-box-button {
          width: 100%;
        }
      
        .links-box {
          flex-direction: column;
          width: 90%;
          margin: 2rem auto;
          align-items: center;
          gap: 1rem;
        }
      
        .links-box a {
          font-size: 1.5rem;
        }
      
        ._3-Eng-and-Web-sec,
        .subscription-box,
        ._6-footer {
          width: 100%;
          padding: 1rem;
          box-sizing: border-box;
        }
      
        .Eng-and-Web-box-eng,
        .Eng-and-Web-box-web {
          flex-direction: column;
          align-items: center;
        }
      
        .Eng-and-Web-box-info-box {
          width: 90%;
          height: auto;
        }
      
        .Eng-and-Web-box img {
          height: auto;
          width: 90%;
          justify-self: center;
        }

        .the-brief {
          text-align: center;;
        }
        .btn-link {
          align-self: center;
        }
      
        .FAQ-accardion {
          --container-width: 90%;
          margin: 1rem auto;
        }
      
        hr {
          width: calc(90% - var(--hr-offset));
        }
      
        .FAQ-text,
        .the-title {
          font-size: 2rem;
          text-align: center;
        }
      
        .FAQ-accordion-button {
          width: 80%;
        }
      
        .subscription-box {
          font-size: 1.8rem;
        }
      
        ._6-footer {
          flex-direction: column;
          gap: 1rem;
        }
      
        .footer-connection {
          flex-direction: row;
          gap: 0.5rem;
        }
      
        a.corridor-Expalnation-box-button {
          width: 100%;
          max-width: 20rem;
        }
      }