/* *************************************************** */
/* **************************** MAX WIDTH - 500px */
/***************************************************** */
@media (max-width: 500px) {
  body,
  html {
    overflow-x: hidden;
  }

  /* -------------------------------- HEADER SECTION */
  #header {
    height: 4rem;
  }

  .nav-list {
    gap: 1.2rem;
  }

  .contact-info {
    margin-left: 1rem;
  }
  .nav-contact {
    gap: 0.7rem;
  }
  .contact-link {
    font-size: 0.8rem;
  }

  .nav-icon {
    width: 0.8rem;
    height: 0.8rem;
  }

  .nav-link:link,
  .nav-link:visited,
  .nav-link:active,
  .nav-link:hover,
  .cta:link,
  .cta:visited,
  .cta:active,
  .cta:hover {
    font-size: 1.2rem;
  }

  .cta:link,
  .cta:visited,
  .cta:active,
  .cta:hover {
    padding: 0.3rem 1.2rem;
  }

  /* -------------------------------- MAIN SECTION */
  #main {
    height: 28rem;
    width: 100%;
  }

  video {
    height: 100%;
    width: 50rem;
    object-fit: cover;
    object-position: center;
  }

  .main-content {
    width: 90%;
  }

  #main-logo {
    width: 10rem;
  }

  .main-title {
    font-size: 1.8rem;
    letter-spacing: 2.2px;
  }

  .title-support {
    font-size: 0.73rem;
    letter-spacing: 1px;
  }

  ion-icon[name="chevron-down-outline"] {
    width: 2rem;
    height: 2rem;
  }

  /* -------------------------------- ABOUT SECTION */
  #about {
    width: 80% !important;
  }

  .about-top,
  .atop-header {
    max-width: 100% !important;
  }

  /* -------------------------------- CTE SECTION */
  .commitment-content {
    max-width: 80% !important;
  }
  .accolade {
    height: 20rem;
  }

  .acco-heading h4 {
    font-size: 1.6rem;
  }

  .acco-overlay {
    padding: 2rem;
  }

  .acco-overlay-heading {
    font-size: 1.4rem;
  }
  .acco-icon {
    width: 2rem;
    height: 2rem;
  }

  .acco-description {
    font-size: 1rem;
  }

  /* -------------------------------- PROJECTS SECTION */
  .project-section {
    width: 80% !important;
  }
  .project {
    height: 18rem !important;
  }

  .address-link {
    display: none !important;
    visibility: hidden !important;
  }

  /* -------------------------------- REVIEWS SECTION */
  .review-container {
    height: 26rem;
  }

  .dm,
  .r2,
  .pr {
    height: 12rem;
  }

  .review-image {
    height: 10rem;
  }

  .rev-img {
    width: 10rem;
    height: 10rem;
  }

  .review-text {
    gap: 1rem;
  }

  .review {
    font-size: 0.8rem;
  }

  /*  ************************************  */
  /*  * * * * * ABOUT PAGE * * * * * * * *  */
  /*  ************************************  */
  .about-left-side {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
  .about-right-side {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  #about-con-container {
    padding: 1.8rem;
  }

  /*  ************************************  */
  /*  * * * * * POJECTS PAGE * * * * * * * *  */
  /*  ************************************  */

  .p-main-content {
    max-width: 80vw;
  }

  .history-title {
    font-size: 2.4rem;
  }

  .project-timeline-nav {
    display: none;
  }
}