/* ---------------- */
/* BELOW 1344px (Smaller desktops) */
/* ---------------- */
@media (max-width: 84em) {
  html {
    font-size: 56.25%;
  }
  body {
    max-width: 100%;
  }

  .section-special img {
    width: 80%;
  }
}

/* ---------------- */
/* BELOW 1200px (Landscape Tablets) */
/* ---------------- */
@media (max-width: 75em) {
  .heading-primary {
    font-size: 9.8rem;
  }

  .container {
    max-width: 95rem;
  }
  .about-me-text-paragraphs p {
    font-size: 1.8rem;
  }
  .about-me-purple {
    display: inline-block;
    height: 2rem;
    width: 28%;
    left: 65%;
    transform: translateY(4rem);
  }
  .my-work-blue {
    display: inline-block;
    height: 2rem;
    width: 29%;
    /* left: 49%; */
    transform: translateY(4rem);
  }
  .contact-orange {
    width: 66%;
  }

  .rose-circle--1 {
    top: -35%;
    right: -60%;
  }

  .orange-circle--1 {
    top: -25%;
    left: -10%;
  }

  .section-mistakes-grid {
    display: flex;
    flex-direction: column;
    /* grid-template-columns: 1fr; */
  }

  .section-mistakes-grid img {
    height: 60rem;
    object-fit: cover;
    object-position: top;
  }

  .text-wrapper {
    padding: 0 3.2rem;
  }
}

/* ---------------- */
/* BELOW 944px (Tablets) */
/* ---------------- */

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }
  .container {
    max-width: 80rem;
  }
  .heading-secondary {
    font-size: 6.2rem;
  }
  .expertise-item {
    padding: 3.2rem 1.6rem;
  }
  .section-end-figure {
    height: 10rem;
    transform: scale(0.5);
  }
  .about-me-purple {
    display: inline-block;
    height: 2rem;
    width: 31%;
    left: 67%;
    transform: translateY(3rem);
  }
  .my-work-blue {
    display: inline-block;
    height: 2rem;
    width: 29%;
    /* left: 49%; */
    transform: translateY(3rem);
  }
  .contact-orange {
    transform: translateY(3rem);
    width: 66%;
  }
  .section-my-work .grid {
    gap: 4.8rem;
  }
  .section-my-work .paragraph {
    font-size: 1.8rem;
  }
  .project {
    padding: 2.4rem;
  }
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.4rem;
    column-gap: 4.8rem;
  }
  .footer-container {
    gap: 2.4rem;
  }
  .about-me-photos:nth-child(1) {
    top: 9%;
  }
  .about-me-photos:nth-child(4) {
    top: 60%;
  }
  .section-leader-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- */
/* BELOW 704px (Smaller Tablets) */
/* ---------------- */

@media (max-width: 44em) {
  .container {
    max-width: 65rem;
  }
  .heading-primary {
    font-size: 7.4rem;
  }
  .subheading {
    font-size: 2.4rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 2.4rem;
  }
  .expertise-item:nth-child(2),
  .expertise-item:nth-child(3) {
    width: 60%;
    height: 100%;
    display: flex;
    /* flex-direction: column; */
    /* align-items: center; */
  }

  .expertise-item:nth-child(2),
  .expertise-item:nth-child(3) {
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .paragraph {
    font-size: 1.8rem;
  }
  .expertise-orange {
    transform: translateY(0rem);
  }
  .block--purple {
    transform: translateY(0rem);
  }
  .about-me-purple {
    width: 15.5%;
    left: 35%;
  }
  .section-about-me .grid {
    gap: 4.8rem;
  }
  .my-work-blue {
    width: 15.5%;
  }
  .section-my-work .paragraph {
    font-size: 1.8rem;
    /* width: 50%; */
  }
  .grid-my-work {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-work-picture {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .project:nth-child(6) {
    grid-column: 1/3;
    /* grid-row: 2/4; */
  }
  .footer-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-orange {
    width: 38%;
  }
  .footer-image img {
    width: 100%;
  }
  .footer-container .grid {
    row-gap: 4.8rem !important;
  }

  .rose-circle--1 {
    top: -25%;
    right: -120%;
  }

  .orange-circle--1 {
    top: -35%;
    left: -30%;
  }

  .about-me-photos:nth-child(2) {
    top: 70%;
  }

  .orange-circle--2 {
    left: -65%;
  }
  .rose-circle--2 {
    right: -60%;
  }
}

/* ---------------- */
/* BELOW 544px (Phone) */
/* ---------------- */

@media (max-width: 34em) {
  .expertise-item:nth-child(2),
  .expertise-item:nth-child(3) {
    width: 70%;
  }
  .about-me-purple {
    width: 24%;
    left: 53%;
  }
  .container {
    padding: 0 3.2rem;
  }
  .my-work-blue {
    width: 22%;
  }
  .grid-my-work {
    grid-template-columns: repeat(1, 1fr);
  }
  .section-testimonials .heading-secondary {
    font-size: 5.2rem;
  }
  .grid--4-cols {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 8rem;
  }
  .testimonial {
    padding: 0 3.2rem;
  }

  .btn:link,
  .btn:visited {
    padding: 1.2rem 1.2rem;
  }

  .about-me-photos:nth-child(1) {
    top: -3%;
    left: -8%;
  }

  .about-me-photos:nth-child(2) {
    top: 75%;
    left: 5%;
  }

  .about-me-photos:nth-child(3) {
    left: 68%;
  }

  .about-me-photos:nth-child(4) {
    top: 65%;
    left: 78%;
  }

  .orange-circle--1 {
    top: -40%;
    left: -50%;
  }

  .rose-circle--1 {
    top: -35%;
    right: -180%;
  }

  .orange-circle--2 {
    left: -85%;
    z-index: 0;
  }

  .rose-circle--2 {
    bottom: 5%;
    right: -120%;
  }

  .section-special h2 {
    top: 25%;
    font-size: 2.4rem;
  }

  .section-special .container img {
    transform: scale(1.4);
  }

  .subheading--orange,
  .subheading--rose .subheading--upper,
  .big-subheading {
    font-size: 2rem !important;
  }

  .section-doctor-grid {
    grid-template-columns: 1fr;
  }

  .section-sport-grid {
    grid-template-columns: 1fr;
  }

  .section-leader .paragraph {
    font-size: 2rem;
  }

  .section-thank-you .paragraph {
    font-size: 2rem;
  }
}