/* this page contains code from the training page folder */

/* order of arrangemnt of the css files:=
0-training--header.css
1-training--hero.css
2-training--benefits.css
3-training--testimonials.css
4-training--cta.css
5-training--focus.css
6-training--form.css
*/


/*   */
/*   */
/*   */
/*   */
/* START OF 0-training--header.css  */
/* contains style for header for the training section */

.training__header__section {
  /* outline: 4px solid blue; */

  width: 100%;
  /* max-width: var(--width__1440px);
  margin: 0 auto; */
  padding: 0;
  background-color: var(--clr-gen-website-bckgrd-svg1);

  position: fixed;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;

  /* Initially hide the header */
  height: 0;
  overflow: hidden;
}

.training__header__section.scrolled {
  /* Add styles for the header when the page is scrolled */
  height: auto;
  padding: 0.2rem 0;
  transition: height, padding 1s ease-in;
}

.training__header__container {
  /* outline: 4px solid green; */

  width: 100%;
  max-width: var(--width__1440px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.training__header__picture__link {
  /* outline: 2px solid red; */

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  /* //////////////// */
  @media screen and (width <=500px) {
    width: 140px;
  }

  /* //////////////// */
  @media screen and (width > 500px) and (width <=875px) {
    width: 180px;
  }

  /* //////////////// */
  @media screen and (width > 875px) {
    width: 230px;
  }
}

.training__header__picture {
  /* outline: 2px solid orange; */

  width: 100%;

  /* Initially hide the header */
  height: 0;
  overflow: hidden;
}

.training__header__picture.scrolled {
  /* Add styles for the header picture when the page is scrolled */
  height: auto;
  transition: height 0.2s ease-in;
}
/* END OF 0-training--header.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 1-training--hero.csss  */
/* contains styles for: Hero section of training webpage*/
.training-hero__section {
  /* outline: 4px solid yellowgreen; */

  width: 100%;
  /* max-width: var(--width__1440px);
  margin: 0 auto; */
}

.training-hero__container {
  /* outline: 4px solid black; */

  width: 100%;
  /* max-width: var(--width__1440px);
  margin: 0 auto; */

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .training-hero__section {
    /* outline: 4px solid yellowgreen; */

    margin-bottom: 8rem;
    /* margin-top: 40px; */
    height: 95dvh;
    max-height: 750px;
    min-height: 400px;
  }

  .training-hero__container {
    /* outline: 4px solid black; */

    height: inherit;
    max-height: inherit;
    min-height: inherit;
    padding: 0rem 0.5rem 0.5rem 0.5rem;

    justify-content: center;
    align-items: center;

    /* background-color: var(--clr-primary-200);
    background-image: linear-gradient(45deg,
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100)); */

    background-image: url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.jpeg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* //////////////// */
    @media screen and (width <=350px) {
      background-image: url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.jpeg);
      background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));
      background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));
    }
  }

  .training-hero__txt-content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    height: inherit;
    max-height: inherit;
    min-height: inherit;
    position: relative;

    /* display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    row-gap: 2rem; */
  }

  .training-hero__txt-content-header {
    /* outline: 2px solid green; */

    width: 100%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    text-transform: none;
    color: var(--clr-secondary-650);
    text-align: center;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.1rem;

    /* /////////////// */
    .hero__txt-content-header__part-1 {
      /* outline: 2px solid greenyellow; */

      text-shadow: -2px 0px 2px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;

      /* ///////////////// */
      @media screen and (width <=250px) {
        /* font-size: 1.3rem; */
      }

      /* ////////////// */
      @media screen and (width > 250px) and (width <=300px) {
        /* font-size: 1.4rem; */
      }

      /* ////////////// */
      @media screen and (width > 300px) and (width <=350px) {
        /* font-size: 1.5rem; */
      }

      /* ////////////// */
      @media screen and (width > 350px) and (width <=400px) {
        font-size: 2rem;
      }

      /* ////////////// */
      @media screen and (width > 400px) {
        font-size: 2.4rem;
      }
    }

    /* //////////////// */
    .hero__txt-content-header__part-2 {
      /* outline: 2px solid greenyellow; */

      filter: brightness(135%);

      text-shadow: -1px 0px black,
        1px 0px black,
        0px -1px black,
        0px 1.5px 1px black;

      /* ///////////////// */
      @media screen and (width <=285px) {
        /* font-size: 1.6rem; */
        font-size: 2.0rem;
      }

      /* ////////////// */
      @media screen and (width > 285px) and (width <=316px) {
        /* font-size: 1.8rem; */
        font-size: 2.0rem;
      }

      /* ////////////// */
      @media screen and (width > 316px) and (width <=350px) {
        /* outline: 2px solid red; */

        font-size: 2.0rem;
      }

      /* ////////////// */
      @media screen and (width > 350px) and (width <=400px) {
        /* outline: 2px solid red; */

        font-size: 2.2rem;
      }

      /* ////////////// */
      @media screen and (width > 400px) {
        /* outline: 2px solid red; */

        font-size: 2.5rem;
      }
    }

    /* //////////////// */
    .hero__txt-content-header__part-x {
      /* outline: 2px solid greenyellow; */

      display: block;
      filter: brightness(65%);

      text-shadow: -1px 0px black,
        1px 0px black,
        0px -1px black,
        0px 2px 2px black;

      /* ///////////////// */
      @media screen and (width <=250px) {
        /* font-size: 1.3rem; */
      }

      /* ////////////// */
      @media screen and (width > 250px) and (width <=300px) {
        /* font-size: 1.4rem; */
      }

      /* ////////////// */
      @media screen and (width > 300px) and (width <=350px) {
        /* font-size: 1.5rem; */
      }

      /* ////////////// */
      @media screen and (width > 350px) and (width <=400px) {
        font-size: 2rem;
      }

      /* ////////////// */
      @media screen and (width > 400px) {
        font-size: 2.4rem;
      }
    }

    /* ////////////////// */
    .hero__txt-content-header__part-3 {
      /* outline: 2px solid greenyellow; */

      text-shadow: -1px 0px black,
        1px 0px black,
        0px -1px black,
        0px 2px 2px black;

      /* ///////////////// */
      @media screen and (width <=250px) {
        /* font-size: 1.3rem; */
      }

      /* ////////////// */
      @media screen and (width > 250px) and (width <=300px) {
        /* font-size: 1.4rem; */
      }

      /* ////////////// */
      @media screen and (width > 300px) and (width <=350px) {
        /* font-size: 1.5rem; */
      }

      /* ////////////// */
      @media screen and (width > 350px) and (width <=400px) {
        font-size: 2rem;
      }

      /* ////////////// */
      @media screen and (width > 400px) {
        font-size: 2.4rem;
      }
    }
  }

  .training-hero__txt-content-subhead {
    /* outline: 2px solid skyblue; */

    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    text-transform: none;
    text-align: center;
    color: white;
    filter: brightness(200%);

    /* ///////////////// */
    @media screen and (width <=250px) {
      font-size: var(--fs-800);
      /* top: 70%; */
    }

    /* ////////////// */
    @media screen and (width > 250px) and (width <=331px) {
      font-size: var(--fs-800);
      /* top: 70%; */
    }

    /* ////////////// */
    @media screen and (width > 330px) and (width <=350px) {
      /* top: 63%; */
    }

    /* ////////////// */
    @media screen and (width > 350px) and (width <=400px) {
      /* top: 63%; */
    }

    /* ////////////// */
    @media screen and (width > 400px) {
      /* top: 75%; */
    }
  }

  .hero__cred {
    /* outline: 2px solid indigo; */

    position: absolute;
    bottom: 19%;
    left: 50%;
    transform: translateX(-50%);

    /* /////////// */
    .hero__cred__text-1 {
      color: white;
      font-family: var(--ff-primary);
      font-size: var(--fs-800);
      font-weight: var(--fw-bold);
      line-height: 1.5;

      text-align: center;
      padding: 0 0 0.2rem 0;
      white-space: nowrap;
    }

    /* ////////////// */
    .hero__cred__text-2 {
      /* outline: 2px solid maroon; */

      color: var(--clr-secondary-650);
      font-family: var(--ff-primary);
      font-size: var(--fs-800);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      white-space: nowrap;
      text-align: center;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .training-hero__section {
    /* outline: 4px solid yellowgreen; */

    margin-bottom: 10rem;
    /* margin-top: 45px; */
    height: 100vh;
    max-height: 800px;
  }

  .training-hero__container {
    /* outline: 4px solid red; */

    padding: 0rem 0rem 2rem 2rem;
    height: 100vh;
    max-height: 700px;

    /* background-color: var(--clr-primary-200);
    background-image: linear-gradient(45deg,
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100)); */

    background-image: url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.jpeg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-land-875-490.webp));

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* //////////////// */
    @media screen and (width > 500px) and (width <=650px) {
      background-image: url(/questergatecapital/public/img/images/fin-market-2-Tablet-potrait-650-364.jpeg);
      background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-potrait-650-364.webp));
      background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Tablet-potrait-650-364.webp));
    }
  }

  .training-hero__txt-content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    height: inherit;
    max-height: inherit;
    position: relative;
  }

  .training-hero__txt-content-header {
    /* outline: 2px solid green; */

    width: 100%;

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: none;
    text-align: left;

    position: absolute;
    top: 2%;
    left: 0%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.2rem;

    /* /////////////// */
    /* Go from */
    .hero__txt-content-header__part-1 {
      /* outline: 2px solid greenyellow; */

      color: var(--clr-secondary-650);

      text-shadow: -2px 0px 2px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;

      /* ///////////////// */
      @media screen and (width > 500px) and (width <=575px) {
        font-size: 2.5rem;
      }

      /* ///////////////// */
      @media screen and (width > 575px) and (width <=650px) {
        font-size: 3rem;
      }

      /* ////////////// */
      @media screen and (width > 650px) {
        font-size: 3.5rem;
      }
    }

    /* //////////////// */
    /* Beginner Profitable trader */
    .hero__txt-content-header__part-2 {
      /* outline: 2px solid greenyellow; */

      color: var(--clr-secondary-650);
      filter: brightness(125%);

      text-shadow: -1px 0px 1px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;

      /* ///////////////// */
      @media screen and (width > 500px) and (width <=575px) {
        font-size: 3rem;
        filter: brightness(120%);
      }

      /* ///////////////// */
      @media screen and (width > 575px) and (width <=650px) {
        font-size: 3.5rem;
        filter: brightness(120%);
      }

      /* ////////////// */
      @media screen and (width > 650px) {
        font-size: 4rem;
      }
    }

    /* //////////////// */
    /* to */
    .hero__txt-content-header__part-x {
      /* outline: 2px solid greenyellow; */

      color: var(--clr-secondary-650);
      filter: brightness(75%);

      text-shadow: -1px 0px 1px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;
      /* font-size: 3rem; */

      /* ///////////////// */
      @media screen and (width > 500px) and (width <=575px) {
        font-size: 2.5rem;
      }

      /* ///////////////// */
      @media screen and (width > 575px) and (width <=650px) {
        font-size: 3rem;
      }

      /* ////////////// */
      @media screen and (width > 650px) {
        font-size: 3.5rem;
      }
    }

    /* ////////////////// */
    /* in 3 months */
    .hero__txt-content-header__part-3 {
      /* outline: 2px solid greenyellow; */

      color: var(--clr-secondary-650);

      text-shadow: -1px 0px black,
        1px 0px black,
        0px -1px black,
        0px 3px 3px black;

      /* ///////////////// */
      @media screen and (width > 500px) and (width <=575px) {
        font-size: 2.5rem;
      }

      /* ///////////////// */
      @media screen and (width > 575px) and (width <=650px) {
        font-size: 3rem;
      }

      /* ////////////// */
      @media screen and (width > 650px) {
        font-size: 3.5rem;
      }
    }
  }

  .training-hero__txt-content-subhead {
    /* outline: 2px solid skyblue; */

    width: 100%;
    position: absolute;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    text-transform: none;
    color: white;
    filter: brightness(200%);

    /* ///////////////// */
    @media screen and (width > 500px) and (width <=700px) {
      right: 1%;
      bottom: 2%;
      max-width: 339px;
      font-size: var(--fs-700);
      text-align: right;
    }

    /* ////////////// */
    @media screen and (width > 700px) {
      right: 0%;
      bottom: 2%;
      max-width: 400px;
      font-size: var(--fs-600);
      text-align: left;
    }
  }

  .hero__cred {
    /* outline: 2px solid indigo; */

    position: absolute;

    /* ///////////////// */
    @media screen and (width > 500px) and (width <=575px) {
      right: 2%;
      bottom: 12%;
    }

    /* ///////////////// */
    @media screen and (width > 575px) and (width <=650px) {
      right: 2%;
      bottom: 12%;
    }

    /* ////////////// */
    @media screen and (width > 650px) {
      left: 0%;
      bottom: 2%;
    }

    /* heights */
    /* @media screen and (height <= 400px) {
      outline: 2px solid blue;

      top: 90%;
    }

    @media screen and (height > 400px) and (height <= 550px) {
      outline: 2px solid green;

      margin-top: 5rem;
      top: 45%;
    }

    @media screen and (height > 550px) {
      outline: 2px solid red;

      margin-top: 5rem;
      top: 40%;
    } */

    /* /////////// */
    .hero__cred__text-1 {
      color: white;
      font-family: var(--ff-primary);
      font-size: var(--fs-700);
      font-weight: var(--fw-semi-bold);
      line-height: 1.5;

      text-align: left;
      padding: 0 0 0.2rem 0;
      white-space: nowrap;

      /* ////////////// */
      @media screen and (width > 500px) and (width <=700px) {
        font-size: var(--fs-800);
        font-weight: var(--fw-bold);
      }
    }

    /* ////////////// */
    .hero__cred__text-2 {
      /* outline: 2px solid maroon; */

      color: var(--clr-secondary-650);
      font-family: var(--ff-primary);
      font-size: var(--fs-700);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      white-space: nowrap;
      text-align: left;

      /* ////////////// */
      @media screen and (width > 500px) and (width <=700px) {
        font-size: var(--fs-800);
        font-weight: var(--fw-bold);
      }
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .training-hero__section {
    /* outline: 4px solid yellowgreen; */

    margin-bottom: 12rem;
    /* margin-top: 50px; */
    height: 100vh;
    max-height: 800px;
  }

  .training-hero__container {
    /* outline: 4px solid black; */

    height: inherit;
    max-height: inherit;
    padding: 0rem 0rem 2rem 0rem;


    /* background-color: var(--clr-primary-200);
    background-image: linear-gradient(45deg,
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100),
        var(--clr-primary-200),
        var(--clr-primary-100),
        var(--clr-primary-100)); */

    background-image: url(/questergatecapital/public/img/images/fin-market-2-Laptop-Large-1440-807.jpeg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Laptop-Large-1440-807.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Laptop-Large-1440-807.webp));

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* //////////////// */
    @media screen and (width > 875px) and (width <=1200px) {

      background-image: url(/questergatecapital/public/img/images/fin-market-2-Laptop-small-1000-560.jpeg);
      background-image: -webkit-image-set(url(/questergatecapital/public/img/images/fin-market-2-Laptop-small-1000-560.webp));
      background-image: image-set(url(/questergatecapital/public/img/images/fin-market-2-Laptop-small-1000-560.webp));
    }
  }

  .training-hero__txt-content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    height: inherit;
    max-height: inherit;
    position: relative;
  }

  .training-hero__txt-content-header {
    /* outline: 2px solid green; */

    width: fit-content;

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: none;
    text-align: left;

    position: absolute;
    top: 3%;
    left: 5%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.1rem;


    /* /////////////// */
    @media screen and (width > 1200px) {
      left: 8%;
    }

    /* /////////////// */
    /* Go from */
    .hero__txt-content-header__part-1 {
      /* outline: 2px solid greenyellow; */

      font-size: var(--fs-100);
      color: var(--clr-secondary-650);
      text-shadow: -2px 0px 2px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;
    }

    /* //////////////// */
    /* beginner profitable trader */
    .hero__txt-content-header__part-2 {
      /* outline: 2px solid greenyellow; */

      font-size: 5rem;
      color: var(--clr-secondary-650);
      filter: brightness(125%);

      text-shadow: -2px 0px 2px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;
    }

    /* //////////////// */
    /* to */
    .hero__txt-content-header__part-x {
      /* outline: 2px solid greenyellow; */

      font-size: var(--fs-100);
      filter: brightness(75%);

      text-shadow: -2px 0px 2px black,
        1px 0px black,
        0px -1px black,
        0px 1px black;
    }

    /* ////////////////// */
    /* in 3 months */
    .hero__txt-content-header__part-3 {
      /* outline: 2px solid greenyellow; */

      font-size: var(--fs-100);
      color: var(--clr-secondary-650);

      text-shadow: -1px 0px black,
        1px 0px black,
        0px -1px black,
        0px 3px 3px black;
    }
  }

  .training-hero__txt-content-subhead {
    /* outline: 2px solid skyblue; */

    width: 100%;
    max-width: 400px;

    position: absolute;
    bottom: 2%;
    right: 1%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.5;
    text-transform: none;
    text-align: left;
    color: white;
    filter: brightness(200%);

    /* text-shadow: -1px 0px black,
      1px 0px black,
      0px -1px black,
      0px 3px 3px black; */

    /* /////////////// */
    @media screen and (width > 1200px) {
      right: 5%;
      max-width: 450px;
      font-size: var(--fs-550);
    }
  }

  .hero__cred {
    /* outline: 2px solid indigo; */

    position: absolute;
    bottom: 3%;
    left: 5%;

    /* /////////////// */
    @media screen and (width > 1200px) {
      left: 8%;
    }

    /* /////////// */
    .hero__cred__text-1 {
      color: white;
      font-family: var(--ff-primary);
      font-size: var(--fs-700);
      font-weight: var(--fw-semi-bold);
      line-height: 1.5;

      text-align: left;
      padding: 0 0 0.5rem 0;
      white-space: nowrap;

      /* /////////////// */
      @media screen and (width > 1200px) {
        font-size: var(--fs-600);
      }
    }

    /* ////////////// */
    .hero__cred__text-2 {
      /* outline: 2px solid maroon; */

      color: var(--clr-secondary-650);
      font-family: var(--ff-primary);
      font-size: var(--fs-700);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      white-space: nowrap;
      text-align: left;

      /* /////////////// */
      @media screen and (width > 1200px) {
        font-size: var(--fs-600);
      }
    }
  }
}
/* END OF 1-training--hero.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 2-training--benefits.css  */
/* contains styles for: benefit section of training webpage */



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .training__benefit-for-you__section {
    /* outline: 4px solid goldenrod; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 8rem;
  }

  .training__benefit-for-you__container {
    /* outline: 4px solid black; */

    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__header {
    /* outline: 2px solid skyblue; */

    padding-bottom: 1rem;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.5;
    letter-spacing: -3%;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);

    /* /////////////// */
    .training__benefit__header-span2 {
      white-space: nowrap;
    }

    /* /////////////// */
    @media screen and (width <=350px) {
      width: 100%;
      padding: 0 1rem 1rem 1rem;
      font-size: var(--fs-700);
    }
  }

  .training__benefit-card__container {
    /* outline: 2px solid greenyellow; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__content__container {
    /* outline: 2px solid crimson; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__list {
    /* outline: 2px solid lightslategray; */

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
  }

  .training__benefit-card__list-items {
    /* outline: 2px solid purple; */

    /* width: 230px; */
    max-width: 230px;
    margin: 0 auto;
    height: 150px;
    list-style: none;
    padding: 0rem 2rem;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    border-radius: 12px;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .training__benefit-for-you__section {
    /* outline: 4px solid goldenrod; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 10rem;
  }

  .training__benefit-for-you__container {
    /* outline: 4px solid black; */

    width: 95%;
    max-width: 700px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__header {
    /* outline: 2px solid skyblue; */

    padding-bottom: 1rem;
    width: 75%;
    max-width: 500px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-550);
    line-height: 1.5;
    letter-spacing: -3%;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);

    /* /////////////// */
    .training__benefit__header-span2 {
      white-space: nowrap;
    }

    /* /////////////// */
    @media screen and (width > 500px) and (width <=560px) {
      font-size: var(--fs-600);
    }
  }

  .training__benefit-card__container {
    /* outline: 2px solid greenyellow; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__content__container {
    /* outline: 2px solid crimson; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__list {
    /* outline: 2px solid lightslategray; */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;

    /* /////////////// */
    @media screen and (width > 500px) and (width <=600px) {
      flex-wrap: wrap;
      column-gap: 2.5rem;
      row-gap: 2.5rem;
    }
  }

  .training__benefit-card__list-items {
    /* outline: 2px solid purple; */

    flex-basis: 100%;

    list-style: none;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    border-radius: 12px;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    /* display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center; */

    /* /////////////// */
    @media screen and (width > 500px) and (width <=600px) {
      font-size: var(--fs-800);
      padding: 2rem 0.5rem;
      height: 150px;
      flex-basis: 40%;
    }

    /* /////////////// */
    @media screen and (width > 600px) and (width <=665px) {
      font-size: var(--fs-800);
      padding: 2.2rem 0.5rem;
      height: 150px;
    }

    /* /////////////// */
    @media screen and (width > 665px) and (width <=700px) {
      height: 160px;
      font-size: var(--fs-800);
      padding: 2.5rem 1rem;
    }

    /* /////////////// */
    @media screen and (width > 700px) and (width <=846px) {
      height: 200px;
      padding: 2.2rem 1rem;
    }

    /* /////////////// */
    @media screen and (width > 846px) and (width <=875px) {
      height: 200px;
      padding: 2.2rem 1.5rem;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .training__benefit-for-you__section {
    /* outline: 4px solid goldenrod; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 12rem;
  }

  .training__benefit-for-you__container {
    /* outline: 4px solid black; */

    width: 95%;
    max-width: 800px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__header {
    /* outline: 2px solid skyblue; */

    padding-bottom: 1rem;
    width: 50%;
    max-width: 500px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-550);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-primary-650);

    /* /////////////// */
    .training__benefit__header-span2 {
      white-space: nowrap;
    }
  }

  .training__benefit-card__container {
    /* outline: 2px solid greenyellow; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__content__container {
    /* outline: 2px solid crimson; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training__benefit-card__list {
    /* outline: 2px solid lightslategray; */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
  }

  .training__benefit-card__list-items {
    /* outline: 2px solid purple; */

    flex-basis: 100%;
    height: 200px;

    list-style: none;
    padding: 2rem;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);
    /* color: black; */

    border-radius: 12px;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}
/* END OF 2-training--benefits.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 3-training--testimonials.css  */
/* this file contains code that style the testimonial section of the homepage of the website */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {

	/* ///////////// */
	:root {
		--m-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--m-width__testimonial-card: 25.8rem;
		/* 413px */

		--m-fs-testimonial-client-words: var(--fs-800);
		--m-ls__testimonial-client-words: calc(0.02 * var(--m-fs-testimonial-client-words));
		/* 2% --used fs*/

		--m-fs-testimonial-client-name: var(--fs-700);
		--m-ls__testimonial-client-name: calc(0.02 * var(--m-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* //////////////// */
	.testimonial__section {
		/* outline: 4px solid gold; */

		width: 100%;
		padding-bottom: 1rem;
	}

	.testimonial__container {
		/* outline: 3px solid green; */

		width: 100%;
		max-width: var(--width__1200px);
		margin: 0 auto;
		padding: 2rem 0;
		background-image: linear-gradient(-45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0 1rem 1rem 1rem;
		width: 100%;
		max-width: 350px;
		margin: 0 auto;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-600);
		line-height: 1.5;
		letter-spacing: -3%;
		text-transform: none;
		text-align: center;
		color: var(--clr-secondary-650);

		/* /////////////// */
		@media screen and (width <=350px) {
			width: 100%;
			padding: 0 1rem 1rem 1rem;
			font-size: var(--fs-700);
		}
	}

	/* ////////////////////////// */
	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;

		position: relative;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		/* not needed cos the arrows are positioned */
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			right: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			left: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;

			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 3px dashed gray; */

		width: 100%;
		margin: 0 auto;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.testimonial-carousel {
		/* outline: 2px dashed lightsalmon; */

		transition: margin-left 1500ms ease-in-out;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 1rem;

		/** to ensure there is a full testimonial always in view */
		margin-left: 440px;

		/* //////////// */
		@media screen and (width <=345px) {
			/* margin-left: calc(2 * (10dvw / 1 - (30dvw * 0.9 + 1 * 1rem)) + 20dvw / -1 + (30dvw * 0.9 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 4;
			margin-left: 310px;
		}

		/* //////////// */
		@media screen and (width > 345px) and (width <=450px) {
			/* margin-left: calc(2 * (5dvw / 1 - (80dvw * 0.9 + 1 * 1rem)) + 90dvw / -1 + (80dvw * 0.77 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 2;
			margin-left: 310px;
		}

		/* //////////// */
		@media screen and (width > 450px) and (width <=500px) {
			/* margin-left: calc(2 * (5dvw / 1 - (80dvw * 0.9 + 1 * 1rem)) + 60dvw / -1 + (80dvw * 0.77 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 0;
			margin-left: 430px;
		}
	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-in-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		/* max-width: 35%; */

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--m-background-clr__testimonial-card);

		max-width: var(--m-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--m-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--m-ls__testimonial-client-words);
			text-align: center;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			justify-content: center;
			align-items: center;
			column-gap: 0.8rem;
			row-gap: 0.3rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 70px;
					height: 70px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--m-fs-testimonial-client-name);
				line-height: var(--lh-500);
				line-height: normal;
				text-align: center;
				color: var(--clr-secondary-650);
			}
		}
	}
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {

	/* ///////////// */
	:root {
		--t-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--t-width__testimonial-card: 25.8rem;
		/* 413px */

		--t-fs-testimonial-client-words: var(--fs-700);
		--t-ls__testimonial-client-words: calc(0.02 * var(--t-fs-testimonial-client-words));
		/* 2% --used fs*/

		--t-fs-testimonial-client-name: var(--fs-500);
		--t-ls__testimonial-client-name: calc(0.02 * var(--t-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* //////////////// */
	.testimonial__section {
		/* outline: 4px solid gold; */

		width: 100%;
		padding-bottom: 1rem;
	}

	.testimonial__container {
		/* outline: 3px solid green; */

		width: 100%;
		max-width: var(--width__1200px);
		margin: 0 auto;
		padding: 4rem 0;
		background-image: linear-gradient(45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0;
		width: 75%;
		max-width: 500px;
		margin: 0 auto;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-550);
		line-height: 1.5;
		letter-spacing: -3%;
		text-align: center;
		color: var(--clr-secondary-650);
		text-transform: none;
	}

	/* ////////////////////////// */
	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;

		position: relative;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		/* not needed cos the arrows are positioned */
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 50px;
			width: 50px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			right: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			left: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;

			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 3px dashed gray; */

		width: 100%;
		max-width: 100vw;
		margin: 0 auto;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.testimonial-carousel {
		/* outline: 4px solid lightsalmon; */

		flex-grow: 0;
		flex-shrink: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/** to ensure there is a full testimonial always in view */
		/* //////////// */
		@media screen and (width > 500px) and (width <=650px) {
			/* margin-left: calc(2 * (25dvw / 2 - (95dvw * 0.7 + 2 * 2rem)) + 95dvw / -2 + (95dvw * 0.55 + 2 * 2rem) / -1); */
			margin-left: 445px;
		}

		/* //////////// */
		@media screen and (width > 650px) and (width <=875px) {
			/* margin-left: calc(2 * (70dvw / 2 - (95dvw * 0.7 + 2 * 2rem)) + 95dvw / -2 + (95dvw * 0.55 + 2 * 2rem) / -1); */
			margin-left: 445px;
		}

		transition: margin-left 1500ms ease-in-out;

	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-in-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		max-width: 35%;

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--t-background-clr__testimonial-card);

		max-width: var(--t-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--t-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--t-ls__testimonial-client-words);
			text-align: left;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			column-gap: 0.8rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 70px;
					height: 70px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--t-fs-testimonial-client-name);
				line-height: var(--lh-500);
				line-height: normal;
				text-align: left;
				color: var(--clr-secondary-650);
			}
		}
	}
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {

	/* ///////////// */
	:root {
		--d-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--d-width__testimonial-card: 25.8rem;
		/* 413px */

		--d-fs-testimonial-client-words: var(--fs-700);
		--d-ls__testimonial-client-words: calc(0.02 * var(--d-fs-testimonial-client-words));
		/* 2% --used fs*/

		--d-fs-testimonial-client-name: var(--fs-500);
		--d-ls__testimonial-client-name: calc(0.02 * var(--d-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* //////////////// */

	.testimonial__section {
		/* outline: 4px solid gold; */

		width: var(--width__always-fill);
		max-width: var(--width__1440px);
		margin: 0 auto;
		padding-bottom: 2rem;

	}

	.testimonial__container {
		/* outline: 4px solid green; */

		width: var(--width__always-fill);
		padding: 4rem 0;
		background-image: linear-gradient(45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0;
		width: 100%;
		max-width: 500px;
		margin: 0 auto;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-500);
		line-height: 1.3;
		letter-spacing: -3%;
		text-align: center;
		color: var(--clr-secondary-650);
		text-transform: none;
	}

	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	/* ////////////////////////// */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;
		overflow: hidden;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		padding: 1rem 0 0rem 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 50px;
			width: 50px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-neutral-white-2);
					/* border-width: 3px; */
				}
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-neutral-white-2);
					border-width: 3px;
				}
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 2px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 2px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;


			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 4px dotted gray; */

		width: 100%;
		/* max-width: 1300px; */
		max-width: 80vw;
		margin: 0 auto;
		border-radius: 0 0.625rem 0.625rem 0;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;


		@media screen and (width >=1300px) {
			border-radius: 0.625rem;
		}
	}

	.testimonial-carousel {
		/* outline: 4px solid lightsalmon; */

		flex-grow: 0;
		flex-shrink: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;
		width: 100%;

		/* margin-left: calc(2 * (60dvw / 2 - (80dvw * 0.28 + 2 * 2rem)) + 80dvw / -2 + (80dvw * 0.28 + 2 * 2rem) / -1); */
		margin-left: 2px;

		/* //////////// */
		@media screen and (width > 875px) and (width <=1270px) {
			margin-left: 481px;
		}

		/* //////////// */
		@media screen and (width > 1270px) {
			margin-left: 2px;
		}

		transition: margin-left 1500ms ease-in-out;
	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		max-width: 35%;
		min-width: 450px;

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--d-background-clr__testimonial-card);

		max-width: var(--d-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--d-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--d-ls__testimonial-client-words);
			text-align: left;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			column-gap: 0.8rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 100px;
					height: 100px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--d-fs-testimonial-client-name);
				line-height: var(--lh-500);
				text-align: left;
				color: var(--clr-secondary-650);
			}
		}
	}
}
/* END OF 3-training--testimonials.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 4-training--cta.css  */
/* contains styles for: all the CTA sections (cta__1, cta__2, cta)`  of the training webpage*/



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .training__cta__1__section {
    /* outline: 4px solid green; */

    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding-bottom: 8rem;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* ////////////// */
    .training__cta__button {
      /* outline: 2px solid black; */

      display: block;
      text-align: center;
      text-decoration: none;
      margin-top: 1rem;
    }
  }

  /* to serve as arrival point for when cta__1 is clicked */
  .training__cta__2__section {
    /* outline wont show cos no content */
    /* outline-color: 2px solid purple; */

    width: 100%;
    margin: 0 auto;
    margin-bottom: 5rem;
  }

  .training__cta__section {
    /* outline: 4px solid gold; */

    width: 100%;
    margin: 0 auto;
    padding-bottom: 0rem;
  }

  .training__cta__container {
    /* outline: 4px solid black; */

    width: 100%;
  }

  .training__cta__content__container {
    /* outline: 2px solid red; */

    width: 100%;
    margin: 0 auto;
    /* padding: 0 0.5rem; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.5rem;
  }

  .training__cta__content {
    /* outline: 2px solid green; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);

    /* //////////////// */
    @media screen and (width <=310px) {
      font-size: var(--fs-800);
    }
  }

  .training__cta__button {
    /* outline: 2px solid pink; */

    width: 80%;
    max-width: 350px;
    min-width: 200px;
    margin: 0 auto;

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    /* ////////////// */
    &:hover {
      color: black;
      transition: all 300ms ease-in-out;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .training__cta__1__section {
    /* outline: 4px solid green; */

    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding-bottom: 8rem;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* ////////////// */
    .training__cta__button {
      /* outline: 2px solid black; */

      display: block;
      text-align: center;
      text-decoration: none;
      margin-top: 1rem;
    }
  }

  /* to serve as arrival point for when cta__1 is clicked */
  .training__cta__2__section {
    /* outline wont show cos no content */
    /* outline-color: 2px solid purple; */

    width: 100%;
    margin: 0 auto;
    margin-bottom: 5rem;
  }


  .training__cta__section {
    /* outline: 4px solid gold; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 0rem;
  }

  .training__cta__container {
    /* outline: 4px solid black; */

    width: 100%;
  }

  .training__cta__content__container {
    /* outline: 2px solid red; */

    width: 50%;
    max-width: 800px;
    min-width: 500px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.5rem;
  }

  .training__cta__content {
    /* outline: 2px solid green; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);
  }

  .training__cta__button {
    /* outline: 2px solid pink; */

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    transition: all 500ms ease-in-out;


    /* ////////////// */
    &:hover {
      color: black;
      /* transition: all 300ms ease-in-out; */
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .training__cta__1__section {
    /* outline: 4px solid green; */

    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding-bottom: 8rem;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* ////////////// */
    .training__cta__button {
      /* outline: 2px solid black; */

      display: block;
      text-align: center;
      text-decoration: none;
      margin-top: 1rem;
    }
  }

  /* to serve as arrival point for when cta__1 is clicked */
  .training__cta__2__section {
    /* outline wont show cos no content */
    /* outline-color: 2px solid purple; */

    width: 100%;
    margin: 0 auto;
    margin-bottom: 5rem;
  }

  .training__cta__section {
    /* outline: 4px solid gold; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    /* padding: 0 because of FORM dropdown */
    padding-bottom: 0rem;
  }

  .training__cta__container {
    /* outline: 4px solid black; */

    width: 100%;
  }

  .training__cta__content__container {
    /* outline: 2px solid red; */

    width: 50%;
    max-width: 800px;
    min-width: 500px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.5rem;
  }

  .training__cta__content {
    /* outline: 2px solid green; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);
  }

  .training__cta__button {
    /* outline: 2px solid pink; */

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    transition: all 500ms ease-in-out;

    /* ////////////// */
    &:hover {
      color: black;
      /* transition: all 300ms ease-in-out; */
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}
/* END OF 4-training--cta.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 5-training--focus.css  */
/* contains styles for: training-focus section of the training webpage */



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .training__focus__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 6rem;
  }

  .training__focus__main-container {
    width: 95%;
    margin: 0 auto;
  }

  /* first half of the card */
  .training__focus__container {
    /* outline: 4px solid black; */

    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 0 0;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
  }

  .training__focus__header {
    /* outline: 2px solid purple; */

    padding-bottom: 3rem;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.5;
    letter-spacing: -3%;
    text-transform: none;
    text-align: center;
    color: var(--clr-secondary-650);

    /* /////////////// */
    @media screen and (width <=350px) {
      width: 100%;
      padding: 0 1rem 1rem 1rem;
      font-size: var(--fs-00);
    }
  }

  .training__focus-card__container {
    /* outline: 2px solid blue; */

    width: 90%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
  }

  .training__focus-card__list {
    /* outline: 2px solid pink; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;

    /* due to the arrow div that already added height */
    padding-bottom: 1rem;
  }

  .training__focus-card__list-items {
    /* outline: 2px solid green; */

    /* height: 200px; */
    width: 100%;
    padding: 0 2rem;
    list-style: none;

    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: black;

    /* /////////////// */
    @media screen and (width <=350px) {
      padding: 0 1rem;
    }
  }

  /* kinda-middle of the card */
  /* drawing the downward arrow */
  .drawing-an-arrow {
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border: none;
    background-color: hsl(206, 5%, 90%, 1);

    rotate: 45deg;
    translate: 0 12.5px;
  }

  /* second half of the card */
  .training__features-card__container {
    /* outline: 2px solid indianred; */

    width: 100%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: white;
    padding-bottom: 2rem;
  }

  .training__features-card__list {
    /* outline: 2px solid lightsalmon; */

    padding-top: 2rem;
  }

  .training__features-card__list-items {
    /* outline: 2px solid gray; */

    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    color: var(--clr-secondary-650);
    padding-bottom: 1rem;

    /* ///////////////////// */
    @media screen and (width < 400px) {
      font-size: var(--fs-800);
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .training__focus__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 8rem;
  }

  .training__focus__main-container {
    width: 95%;
    margin: 0 auto;
  }

  /* first half of the card */
  .training__focus__container {
    /* outline: 4px solid black; */

    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 0 0;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
  }

  .training__focus__header {
    /* outline: 2px solid purple; */

    padding-bottom: 3rem;
    width: 75%;
    max-width: 500px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-550);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: none;
    text-align: center;
    color: var(--clr-secondary-650);
  }

  .training__focus-card__container {
    /* outline: 2px solid blue; */

    width: 90%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
  }

  .training__focus-card__list {
    /* outline: 2px solid pink; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;

    /* due to the arrow div that already added height */
    padding-bottom: 1rem;
  }

  .training__focus-card__list-items {
    /* outline: 2px solid green; */

    /* height: 200px; */
    width: 100%;
    list-style: none;

    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);
  }

  /* kinda-middle of the card */
  /* drawing the downward arrow */
  .drawing-an-arrow {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border: none;
    background-color: hsl(206, 5%, 90%, 1);

    rotate: 45deg;
    translate: 0 15px;
  }

  /* second half of the card */
  .training__features-card__container {
    /* outline: 2px solid indianred; */

    width: 100%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: white;
    padding-bottom: 2rem;
  }

  .training__features-card__list {
    /* outline: 2px solid lightsalmon; */

    padding-top: 3rem;
  }

  .training__features-card__list-items {
    /* outline: 2px solid gray; */

    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    color: var(--clr-secondary-650);
    padding-bottom: 1rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .training__focus__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 8rem;
  }

  .training__focus__main-container {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
  }

  /* first half of the card */
  .training__focus__container {
    /* outline: 4px solid black; */

    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 0 0;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
  }

  .training__focus__header {
    /* outline: 2px solid purple; */

    padding-bottom: 3rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-550);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: none;
    text-align: center;
    color: var(--clr-secondary-650);
  }

  .training__focus-card__container {
    /* outline: 2px solid blue; */

    width: 100%;
    margin: 0 auto;
  }

  .training__focus-card__list {
    /* outline: 2px solid pink; */

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;

    /* due to the arrow div that already added height */
    padding-bottom: 0rem;
  }

  .training__focus-card__list-items {
    /* outline: 2px solid green; */

    width: 100%;
    list-style: none;

    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--clr-primary-650);
  }

  /* kinda-middle of the card */
  /* drawing the downward arrow */
  .drawing-an-arrow {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: none;
    background-color: hsl(206, 5%, 90%, 1);

    rotate: 45deg;
    translate: 0 20px;
  }

  /* second half of the card */
  .training__features-card__container {
    /* outline: 2px solid indianred; */

    width: 100%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: white;
    padding-bottom: 2rem;
  }

  .training__features-card__list {
    /* outline: 2px solid lightsalmon; */

    padding-top: 3rem;
  }

  .training__features-card__list-items {
    /* outline: 2px solid gray; */

    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-700);
    color: var(--clr-secondary-650);
    padding-bottom: 1rem;
  }
}


/*        */
/*        */
/*        */
/*        */
/*        */
/** ---ANIMATION--- */
.drawing-an-arrow {
  /* name of animation */
  animation-name: focus--div_arrow_color_change;

  /* how long the animation will last */
  animation-duration: 10s;

  /* how long b4 animation starts */
  animation-delay: 0ms;

  /* how many times the animation will run */
  animation-iteration-count: infinite;

  /* should it be played normal/reverse/alternate/alternate-reverse */
  animation-direction: normal;

  /* speed curve of animation */
  animation-timing-function: ease-in-out;

  /* the styles animation will apply when b4 it start/after it ends/both  */
  animation-fill-mode: none;
}

@keyframes focus--div_arrow_color_change {
  0% {
    background-color: transparent;
    border-top: 0px;
    border-right: 0;
    border-bottom: 0px;
    border-left: 0px;
  }

  20% {
    background-color: hsl(206, 5%, 90%, 1);
    border-top: 0px;
    border-right: 1px solid var(--clr-secondary-650);
    border-bottom: 0px;
    border-left: 0px;
  }

  40% {
    background-color: hsl(206, 5%, 90%, 1);
    border-top: 0px;
    border-right: 1px solid var(--clr-secondary-650);
    border-bottom: 1px solid var(--clr-secondary-650);
    border-left: 0px;
  }


  50% {
    background-color: transparent;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
  }

  60% {
    background-color: white;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid var(--clr-secondary-650);
  }

  80% {
    background-color: white;
    border-top: 1px solid var(--clr-secondary-650);
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid var(--clr-secondary-650);
  }

  96% {
    background-color: white;
    border-top: 1px solid var(--clr-secondary-650);
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid var(--clr-secondary-650);
  }

  100% {
    background-color: transparent;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
  }
}

.training__focus__section:hover {
  /* this pause or play animation. you can use JS to do this or hover */
  animation-play-state: paused;
}
/* END OF 5-training--focus.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF 6-training--form.css  */
/* contains styles for: form section of the training webpage */



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .training-form__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    margin-top: 2rem;
    padding-bottom: 8rem;
  }

  .training-form__container {
    /* outline: 4px solid black; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training-form__header {
    /* outline: 2px solid blue; */

    padding-bottom: 0.1rem;
    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-primary-650);

    position: relative;
    background-color: var(--clr-gen-website-bckgrd-svg1);

    /* ////////////////// */
    &::after {
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background-color: var(--clr-secondary-650);

      position: absolute;
      top: 45%;
      left: 46.7%;
      transform: rotate(45deg);
      z-index: -1;

    }
  }

  /* start of form form elements styling */
  .training-form {
    /* outline: 2px solid red; */

    width: 100%;
    margin: 2rem auto 0 auto;
    padding: 2rem 0.5rem;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    background-color: var(--color-white-200);
  }

  .training-form__elements__container {
    /* outline: 2px solid magenta; */

    width: 100%;
    padding-bottom: 1.5rem;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.3rem;
  }

  .training-form__elements__container label {
    /* outline: 2px solid grey; */

    min-width: 150px;
    max-width: 260px;
    text-align: center;
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--clr-primary-650);
  }

  .training-form__elements__container input,
  .training-form__elements__container select,
  .training-form__elements__container select option {
    /* outline: 2px solid green; */

    width: 70%;
    min-width: 200px;
    height: 35px;
    padding-left: 0.4rem;
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-800);
    line-height: 1.5;
    border-radius: 6px;
    border: none;
    text-align: left;

    /* /////////// */
    &:active,
    &:focus {
      outline: 1px solid var(--clr-primary-650);
    }
  }

  .training-form__elements__container select option {

    font-weight: var(--fw-semi-bold);
    text-transform: capitalize;
    color: var(--clr-primary-650);
  }

  .training__confirm-age .trading__confirm-age__inputbox {
    /* outline: 2px solid brown; */

    min-width: unset;
    width: 20px;
    height: 20px;

    /* /////////// */
    &:active,
    &:focus {
      outline: none;
    }
  }

  .training-form .training-form__submit-button {
    /* outline: 2px solid skyblue; */

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-neutral-white-2);

    background-color: var(--clr-secondary-650);
    border-radius: 10px;
    padding: 0.8rem 3rem;
    margin-top: 1rem;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    /* ////////////// */
    &:hover {
      color: black;
      transition: all 300ms ease-in-out;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }

  /* ////////////////////////////////// */
  /* ///////////////////////////////////// */
  /* *start of After-Form-Submit styling */
  .training-form__after-submit__container {
    /* outline: 2px dashed pink; */

    width: 90%;
    max-width: 400px;
    padding: 2rem 0.8rem 0.5rem 0.8rem;
    margin: 2rem 0.8rem 0 0.8rem;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
  }

  .training-form__after-submit__text-1,
  .training-form__after-submit__text-2,
  .training-form__after-submit__text-3 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: black;
    padding-bottom: 2rem;
  }

  .training-form__after-submit__text-1 {
    color: var(--clr-secondary-650);
    font-weight: var(--fw-bold);
  }

  .training-start-date {
    display: block;
    text-align: center;
    font-weight: var(--fw-bold);
  }

  .training-whatsapp-link__container {
    display: block;
    text-align: center;
  }

  .training-whatsapp-link {
    text-decoration: none;
    font-weight: var(--fw-bold);

    /* /////////////// */
    &:hover {
      text-decoration: underline;
    }
  }


  /* ////////////////// */
  /* *Training Form Error Message */
  /* styles.css */

  /* Add your styles for error messages here */
  .error-message {
    /* outline: 2px solid red; */

    color: red;
    font-size: 1rem;
  }

  .training-form__after-submit__container {
    display: none;
  }

  .training-form__success {
    display: block;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .training-form__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    margin-top: 1.5rem;
    padding-bottom: 10rem;
  }

  .training-form__container {
    /* outline: 4px solid black; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training-form__header {
    /* outline: 2px solid blue; */

    padding-bottom: 0.1rem;
    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-primary-650);

    position: relative;
    background-color: var(--clr-gen-website-bckgrd-svg1);

    /* ////////////////// */
    &::after {
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background-color: var(--clr-secondary-650);

      position: absolute;
      top: 45%;
      left: 47.7%;
      transform: rotate(45deg);
      z-index: -1;
    }
  }

  /* start of form elements styling */
  .training-form {
    /* outline: 2px solid red; */

    width: 100%;
    max-width: 600px;
    margin: 2rem auto 0 auto;
    padding: 2rem 2rem;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    background-color: var(--color-white-200);
  }

  .training-form__elements__container {
    /* outline: 2px solid magenta; */

    width: 100%;
    padding-right: 2rem;
    padding-bottom: 2rem;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;

    position: relative;
  }

  .training-form__elements__container label {
    /* outline: 2px solid grey; */

    margin-right: 2rem;
    text-align: right;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--clr-primary-650);

    /* ////////////////// */
    @media screen and (width > 500px) and (width <=620px) {
      font-size: var(--fs-800);
    }
  }

  .training-form__elements__container input,
  .training-form__elements__container select,
  .training-form__elements__container select option {
    /* outline: 2px solid green; */

    width: 250px;
    height: 35px;
    padding-left: 0.4rem;
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-800);
    line-height: 1.5;
    border-radius: 6px;
    border: none;

    /* /////////// */
    &:active,
    &:focus {
      outline: 1px solid var(--clr-primary-650);
    }
  }

  .training-form__elements__container select option {

    font-weight: var(--fw-semi-bold);
    text-transform: capitalize;
    color: var(--clr-primary-650);
  }

  .training__confirm-age {
    /* outline: 2px dotted black; */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  .training__confirm-age .trading__confirm-age__label {
    /* outline: 2px solid pink; */

    display: inline-block;
    text-align: left;
  }

  .training__confirm-age .trading__confirm-age__inputbox {
    /* outline: 2px solid brown; */

    min-width: unset;
    width: 20px;
    height: 20px;

    /* /////////// */
    &:active,
    &:focus {
      outline: none;
    }
  }

  .training-form__elements__container .trading-knowledge-level {
    /* outline: 2px solid red; */

    min-width: 150px;
    max-width: 250px;
  }

  .training-form .training-form__submit-button {
    /* outline: 2px solid skyblue; */


    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-neutral-white-2);

    background-color: var(--clr-secondary-650);
    border-radius: 10px;
    padding: 0.8rem 3rem;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    /* ////////////// */
    &:hover {
      color: black;
      transition: all 300ms ease-in-out;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }

  /* ////////////////////////////////// */
  /* ///////////////////////////////////// */
  /* *start of After-Form-Submit styling */
  .training-form__after-submit__container {
    /* outline: 2px dashed pink; */

    width: 100%;
    max-width: 400px;
    padding: 2rem 1rem 0.5rem 1rem;
    margin-top: 2rem;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
  }

  .training-form__after-submit__text-1,
  .training-form__after-submit__text-2,
  .training-form__after-submit__text-3 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: black;
    padding-bottom: 2rem;
  }

  .training-form__after-submit__text-1 {
    color: var(--clr-secondary-650);
    font-weight: var(--fw-bold);
  }

  .training-start-date {
    display: block;
    text-align: center;
    font-weight: var(--fw-bold);
  }

  .training-whatsapp-link__container {
    display: block;
    text-align: center;
  }

  .training-whatsapp-link {
    text-decoration: none;
    font-weight: var(--fw-bold);

    /* /////////////// */
    &:hover {
      text-decoration: underline;
    }
  }

  /* ////////////////// */
  /* *Training Form Error Message */
  /* styles.css */

  /* Add your styles for error messages here */
  .error-message {
    /* outline: 2px solid red; */

    position: absolute;
    bottom: 20%;
    left: 52%;
    color: red;
    font-size: 1rem;

    /* //////// */
    @media screen and (width > 500px) and (width <=560px) {
      left: 42%;

    }

    /* //////// */
    @media screen and (width > 560px) and (width < 600px) {
      left: 46%;

    }
  }

  .training-form__after-submit__container {
    display: none;
  }

  .training-form__success {
    display: block;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .training-form__section {
    /* outline: 4px solid goldenrod; */

    width: var(--width__always-fill);
    max-width: var(--width__1440px);
    margin: 0 auto;
    margin-top: 1.5rem;
    padding-bottom: 12rem;
  }

  .training-form__container {
    /* outline: 4px solid black; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .training-form__header {
    /* outline: 2px solid blue; */

    padding-bottom: 0.1rem;
    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-primary-650);

    position: relative;
    background-color: var(--clr-gen-website-bckgrd-svg1);

    /* ////////////////// */
    &::after {
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background-color: var(--clr-secondary-650);

      position: absolute;
      top: 45%;
      left: 48.9%;
      transform: rotate(45deg);
      z-index: -1;

    }
  }

  /* start of form form elements styling */
  .training-form {
    /* outline: 2px solid red; */

    width: 100%;
    max-width: 600px;
    margin: 2rem auto 0 auto;
    padding: 2rem 2rem;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    background-color: var(--color-white-200);
  }

  .training-form__elements__container {
    /* outline: 2px solid magenta; */

    width: 100%;
    padding-bottom: 2rem;
    padding-right: 0rem;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;

    position: relative;
  }

  .training-form__elements__container label {
    /* outline: 2px solid grey; */

    width: 150px;
    margin-right: 2rem;
    text-align: right;

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--clr-primary-650);
  }

  .training-form__elements__container input {
    /* outline: 2px solid mediumseagreen; */

    width: 100%;
    max-width: 300px;
    height: 35px;
    padding-left: 0.4rem;
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 6px;
    border: none;

    /* /////////// */
    &:active,
    &:focus {
      outline: 1px solid var(--clr-primary-650);
    }
  }

  .training-form__elements__container select,
  .training-form__elements__container select option {

    width: 100%;
    max-width: 250px;
    height: 35px;
    padding-left: 0.4rem;
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 6px;
    border: none;

    /* /////////// */
    &:active,
    &:focus {
      outline: 1px solid var(--clr-primary-650);
    }
  }

  .training-form__elements__container select option {

    font-weight: var(--fw-semi-bold);
    text-transform: capitalize;
    color: var(--clr-primary-650);
  }

  .training__confirm-age {
    /* outline: 2px dotted black; */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  .training__confirm-age .trading__confirm-age__label {
    /* outline: 2px solid pink; */

    display: inline-block;
    width: 80%;
    text-align: center;
    margin-right: 0;
  }

  .training__confirm-age .trading__confirm-age__inputbox {
    /* outline: 2px solid brown; */

    min-width: unset;
    width: 20px;
    height: 20px;

    /* /////////// */
    &:active,
    &:focus {
      outline: none;
    }
  }

  .training-form__elements__container .trading-knowledge-level {
    /* outline: 2px solid red; */

    min-width: 200px;
  }

  .training-form .training-form__submit-button {
    /* outline: 2px solid skyblue; */


    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-neutral-white-2);

    background-color: var(--clr-secondary-650);
    border-radius: 10px;
    padding: 1rem 6rem;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    /* ////////////// */
    &:hover {
      color: black;
      transition: all 300ms ease-in-out;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }

  /* ////////////////////////////////// */
  /* ///////////////////////////////////// */
  /* *start of After-Form-Submit styling */
  .training-form__after-submit__container {
    /* outline: 2px dashed pink; */

    width: 100%;
    max-width: 400px;
    padding: 2rem 1rem 0.5rem 1rem;
    margin-top: 2rem;

    border-radius: 12px;
    border: 0.1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(hsl(206, 5%, 90%, 1));
    background-image: linear-gradient(150deg,
        hsla(0, 0%, 100%, 1),
        hsla(0, 0%, 100%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1),
        hsl(206, 5%, 90%, 1));

    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1.5rem;
  }

  .training-form__after-submit__text-1,
  .training-form__after-submit__text-2,
  .training-form__after-submit__text-3 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: black;
    padding-bottom: 2rem;
  }

  .training-form__after-submit__text-1 {
    color: var(--clr-secondary-650);
    font-weight: var(--fw-bold);
  }

  .training-start-date {
    display: block;
    text-align: center;
    font-weight: var(--fw-bold);
  }

  .training-whatsapp-link__container {
    display: block;
    text-align: center;
  }

  .training-whatsapp-link {
    text-decoration: none;
    font-weight: var(--fw-bold);

    /* /////////////// */
    &:hover {
      text-decoration: underline;
    }
  }

  /* ////////////////// */
  /* *Training Form Error Message */
  /* styles.css */

  /* Add your styles for error messages here */
  .error-message {
    /* outline: 2px solid red; */

    position: absolute;
    bottom: 15%;
    left: 45%;
    color: red;
    font-size: 1rem;
  }

  .training-form__after-submit__container {
    display: none;
  }

  .training-form__success {
    display: block;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */
/* *GENERAL STYLE FOR CALC ACCORDION BUTTON open&close FUNCTIONALITY */
/* ///////////////////////// */
/** WHEN CLOSED */
/* ///////////////////////// */
/* makes the height of the accordion Item to be 0 so it is not visible */
.training-form__container__forAccordion,
.training-form__container__forAccordion-1 {
  /* outline: 2px dashed violet; */

  /* when button accordion is closed */
  /* max-height: 0;-- this is set by Javascript */
  max-height: 0;

  /* keeps the content from showing beneath the accordion-item when closed */
  overflow: hidden;

  /* controls the transition when closing-->going to this style */
  transition: max-height 1200ms ease-in-out;
}

/* /////////////////////// */
/** WHEN OPEN */
/* ///////////////////// */
/* style the button when it is open */
.training__cta__content__container__forAccordion button[aria-expanded="true"],
.training__cta__content__container__forAccordion-1 button[aria-expanded="true"] {
  /* * other styles for this button can be found in css file training--cta.css */

  background-color: var(--clr-primary-200);
  background-image: linear-gradient(150deg,
      var(--clr-primary-650),
      var(--clr-primary-200),
      var(--clr-primary-200),
      var(--clr-primary-200),
      var(--clr-primary-200));

  /* ////////////// */
  &:hover {
    color: white;
    transition: all 300ms ease-in-out;
  }

  /* /////////// */
  &:active {
    transform: translateY(8px);

    box-shadow: none;

    background-image: linear-gradient(150deg,
        var(--clr-primary-200));

    transition: all 150ms ease-in-out;
  }
}
/* END OF 6-training--form.css  */

/*   */
/*   */
/*   */
/*   */
/* START OF   */

/* END OF   */