@media (max-width: 83em) {
  .hero {
    max-width: 120rem;
  }

  .hero-text {
    font-size: 3rem;
  }

  .hero-text-p {
    font-size: 2.4rem;
  }

}

/* tablet landscape */
@media (max-width: 75em) {

  .hero-text-p {
    font-size: 2.2rem;
  }

  .iframes {
    height: 60%;
  }

  .book-wrapper {
    grid-template-columns: 1fr;
  }

  .book-wrapper p {
    font-size: 3rem;
  }

  /* 9px /16 px */
  html {
    font-size: 56.25%;
  }

  .hero {
    column-gap: 1rem;
  }

  .hero-img {
    margin-left: 1rem;
  }

  .hero-text {
    font-size: 2.8rem;
  }

  .hero-text-h3 {
    font-size: 2.4rem;
  }

  .cta-text-wrap h2 {
    font-size: 4.4rem;
  }

  .grid {
    column-gap: 4.8rem;
    row-gap: 6.4rem;
  }

  .title,
  .context {
    text-align: justify;
    line-height: normal;
  }

  .box2-title {
    /* transform: translateX(0); */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mentor {
    grid-template-columns: 50% 50%;
    column-gap: 0rem;
  }

  .collgue-wrap iframe {
    /* width: ; */
    height: 19.8rem !important;
  }

  .cta-wrap {
    margin: 6.4rem 2.4rem;
  }
}

/* tablet */
@media (max-width: 59em) {

  .hero-text-p {
    font-size: 2.2rem;
  }

  .iframes {
    height: 60%;
  }

  html {
    font-size: 50%;
  }

  .nav-header {
    padding: 0 4.4rem;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: 0rem;
  }

  .hero-text {
    margin-bottom: 4.4rem;
    padding: 0 5.2rem;
  }

  .hero-img {
    width: 60%;
  }

  .featured-wrap img {
    height: 8.6rem;
  }

  .logo:before,
  .logo:after {
    width: 10rem;
    height: 9.8rem;
  }

  .logos:before,
  .logos:after {
    width: 4rem;
    height: 35rem;
  }

  .collgue-wrap iframe {
    width: 100%;
    height: 17.8rem !important;
  }

  .mentor-text p {
    font-size: 1.8rem;
    padding: 1.6rem;
  }

  .title {
    text-align: start;
  }

  .carousel-sec {
    margin: auto 1.6rem;
  }

  .client-video-wrap iframe,
  .client-video-wrap video {
    /* width: 60rem;
    height: 30rem; */
    /* change here */
    width: 100%;
  }

  .cta-text-wrap p {
    text-align: start;
  }

  .client-text {
    row-gap: 3.4rem;
  }

  .client-text p {
    /* font-size: ; */
    width: 75%;
  }

  .cta-grid-wrap {
    padding: auto 1.2rem;
    gap: 0;
  }

  .cta-text-wrap h2 {
    font-size: 3.4rem;
  }

  .cta-text-wrap p {
    font-size: 2rem;
  }

  .btn {
    font-size: 2rem;
    padding: 1.4rem;
  }

  /* mobile navigation */
  .mobile-btn {
    display: block;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .nav-par {
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translate(0);
    border: none;
    font-size: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.5s ease-in;
    /* display: none; */
  }

  .nav-icon {
    width: 4.8rem;
    height: 4.8em;
    color: #333;
  }

  .hidden {
    display: none;
  }

  /* client story */
  .carousel {
    /* flex-direction: column; */
    grid-template-columns: 1fr;
    row-gap: 8rem;
  }

  .client-text {
    align-items: center;
    gap: 1.6rem;
  }

  .client-text h1 {
    font-size: 3rem;
    align-self: center;
  }

  .client-text p {
    width: 100%;
  }

  .iframess iframe {
    width: 400 !important;
    height: 100 !important;
    object-fit: cover;
  }

  /* book */
  /* .book-title {
    font-size: 2rem !important;
    padding-right: 2rem !important;
  } */

  .book-wrapper p {
    font-size: 2rem;
  }

}

/* smaller tablet */
@media (max-width: 44em) {

  .iframes {
    height: 90%;
  }

  .wrapper-box {
    padding: 4.8rem 4rem;
  }

  .box2-wrapper {
    padding: 3.2rem 3.2rem;
  }

  .context {
    text-align: left;
  }

  .collgue-wrap iframe {
    /* width: 10rem !important; */
  }

  .collgue-wrap iframe {
    /* margin: 0 6.4  rem; */
    /* width: 680 !important;
    height: 30rem !important; */
  }

  .photo-wrap {
    display: flex;
  }

  .client-video-wrap iframe,
  .client-video-wrap video {
    width: 680 !important;
    height: 30rem !important;
    /* height: 20rem; */
  }

  .client-text {
    margin: 0;
  }

  .client-text p {
    width: 80%;
    text-align: start;
  }

  .carousel {
    padding: 4.4rem 1rem;
  }

  .carousel-sec {
    margin: auto;
    padding-right: 0.8rem;
  }

  .nav-header img {
    width: 10%;
    height: 6.4rem;
    /* height: 3rem; */
  }
}

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

  .grid--columns--2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid--columns--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mentor {
    grid-template-columns: 1fr;
    border-right: block;
    row-gap: 1.2rem;
  }

  .dd {
    margin: 2rem;
  }

  .mentor-text p {
    /* padding: 1rem; */
    text-align: start;
  }

  .mentor img {
    width: 100%;
  }

  .ser {
    grid-template-columns: 1fr;
  }

  .box1 p {
    font-size: 1.6rem;
    line-height: normal;
    text-align: start;
  }

  .box2-wrap {
    row-gap: 4rem;
  }

  .box2-text-wrap {
    grid-row: 1;
  }

  .cta-grid-wrap {
    row-gap: 1.6rem;
  }

  .cta-text-wrap {
    grid-row: 1;
  }

  .cta-text-wrap p {
    text-align: center;
  }

  .why {
    row-gap: 1rem;
  }

  .why-title p {
    margin: 4.4rem auto 2rem;
    padding: 2rem;
  }

  .why-wrap {
    text-align: center;
  }

  .client-title h1 {
    font-size: 3.6rem;
  }

  .service {
    padding: 1rem;
  }

  .service,
  .service-wrap {
    row-gap: 2rem;
  }

  .service-wrap {
    padding: 2rem;
    margin: auto 2rem;
  }

  .service p,
  .service-js-p {
    text-align: start;
  }

  .footer-text {
    grid-column: 1/-1;
    justify-self: center;
  }

  .cta-grid-wrap {
    padding: 3.2rem 1.4rem;
  }

  .cta input,
  .cta textarea {
    width: 100%;
  }

  .button-wrap-cta {
    text-align: center;
  }

  /* logo */
  /* hero */
  .hero {
    margin-top: 2rem;
    row-gap: 1.4rem;
  }

  .hero-text {
    margin-bottom: 0rem;
    padding: 0;
    font-size: 2.3rem;
  }

  .hero-text {
    padding: auto;
  }

  .hero-img {
    width: 80%;
  }

  .hero-text-h3 {
    font-size: 2rem;
  }

  .cta input,
  .cta textarea {
    height: 5.2rem;
  }

  .box1-highlight,
  .high {
    font-size: 2.6rem !important;
  }

  .box1 {
    margin-left: 1.6rem;
  }

  .wrapper-box {
    /* padding: 0 !important; */
    padding: 4.2rem 0rem;
    text-align: start;
  }

  .box1 h1 {
    font-size: 3.6rem;
  }

  .p-text {
    letter-spacing: -1px;
    font-size: 1.8rem;
    /* text-align: center; */
  }

  .featured-wrap img {
    height: 7.2rem;
    margin: 1rem 1.8rem;
  }

  .cta-text-wrap {
    /* padding: 0rem 4rem; */
  }

  .embed {
    width: 100%;
  }

  .iframess iframe {
    width: 100% !important;
    height: 30rem !important;
  }

  .nav-header img {
    width: 40%;
    height: 10 rem;
    /* height: 3rem; */
  }

  /* book */
  .book-title {
    font-size: 2.4rem !important;
    text-align: center;
    margin: 2rem !important;
  }

  .book-title p {
    /* text-align: justify !important; */
  }

  .book-parah {
    font-size: 1.6rem;
    line-height: normal;
    text-align: start;
    padding: 2rem;
  }

  .iframes {
    width: 100%;
    height: 100% !important;
  }
}

/*  SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 /32 / 48 / 64 / 80 / 96 / 128
FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62
 / 74 / 86 / 98 */