/* RESPONSIVE */
@media (max-width: 768px) {
  body {
    max-width: 100vw;
    padding: 0;
  }

  nav {
    display: none;
  }

  header button {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  .hero-text h1 {
    font-size: 3rem;
  }
  header {
    padding: 0 20px;
  }

  .hero {
    max-width: 100vw;
  }

  .hero .info .mobile {
    display: none;
  }

  /* SECTIONs */

  .section-heading h2 {
    margin-bottom: 0.25em;
  }

  .section-heading .brief {
    width: 100%;
  }

  /* ABOUT US SECTION */

  .about-us {
    flex-direction: column;
    padding: 2em 10vw;
  }

  .about-us .text-side,
  .about-us .img-side {
    width: 100%;
    padding: 1em;
  }

  .about-us .text-side h2 {
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 0.75em;
  }

  .about-us .img-side {
    padding: 0;
  }

  /* ABOUT US FULL STORY */

  .about-us.full-story .story-sections .section {
    flex-direction: column;
  }

  .about-us.full-story .story-sections .section.even {
    flex-direction: column;
  }

  .about-us.full-story .story-sections .section .highlight,
  .about-us.full-story .story-sections .section p {
    width: 100%;
  }

  /* SERVICES SECTION */

  .services {
    padding: 5vh 10vw;
  }

  .services .card-wrapper {
    flex-direction: column;
    padding: 0;
  }

  .services .wrapper {
    width: 100%;
  }

  .services .wrapper.centre .service-card:first-of-type {
    margin-top: 0;
  }

  /* WHY US SECTION */

  .why-us {
    flex-direction: column-reverse;
    padding: 2em 10vw;
  }

  .why-us .text-side,
  .why-us .img-side {
    width: 100%;
  }

  .why-us .text-side h2 {
    margin-bottom: 0.25em;
  }

  .why-us .text-side h2::before {
    left: -30%;
  }

  /* TESTIMONIALS SECTION */

  .testimonials {
    flex-direction: column;
    padding: 2em 10vw;
  }

  .testimonials .text-side,
  .testimonials .img-side {
    width: 100%;
  }

  .testimonials .text-side h2 {
    margin-bottom: 0.25em;
  }

  .testimonials .text-side .more-info {
    display: none;
  }

  .testimonials .img-side .testimon-card .circular {
    border-radius: 50%;
    height: 5em;
    width: 5em;
  }

  .testimonials .img-side .testimon-card .texter {
    font-size: 0.75em;
    display: flex;
    flex-direction: column;
    width: 50%;
  }

  /* CTA SECTION */

  .cta {
    height: auto;
    padding: 2em 10vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .cta .section-heading {
    width: 100%;
    gap: 0.5em;
  }

  .cta .cta-image {
    display: none;
  }

  .cta .subscribe {
    width: 10em;
    padding: 0.5em;
    font-size: 1.3em;
    border: none;
    background-color: #000;
    color: var(--my-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta .subscribe img {
    height: 2cap;
  }

  /* FOOTER SECTION */

  .footer {
    flex-direction: column;
    gap: 0.25em;
    padding: 2em 1em 3em 1em;
  }

  /* SERVICES PAGE */

  .svcs {
    max-width: 100vw;
    padding: 5vh 10vw;
  }

  .our-services {
    max-width: 100vw;
    padding: 1em 10vw;
    flex-direction: column;
  }

  .our-services.even {
    flex-direction: column;
    background-color: var(--my-orange);
  }

  .our-services .img-side,
  .our-services .txt-side {
    width: 100%;
  }

  .our-services .txt-side {
    padding: 1em;
    gap: 1em;
  }

  .our-services .txt-side h3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .our-services .txt-side h3 .icon {
    height: 4cap;
  }

  .our-services .txt-side button {
    font-size: 1.1em;
  }

  /* INDIVIDUAL SERVICE PAGES */

  .main-svc {
    padding: 13vh 0 1em 0;
    display: flex;
    flex-direction: column;
  }

  .main-svc .section-heading {
    padding: 0 10vw;
  }

  .main-svc .section-heading .brief {
    width: 100%;
  }

  .main-svc .card-wrapper {
    gap: 0.5em;
    margin: 1.5em 4vw;
  }

  .main-svc .wrapper {
    gap: 0.5em;
  }

  /* WHY CHOOSE US */

  .why-choose-us .card-wrapper {
    gap: 1em;
    margin-left: 2em;
  }

  .why-choose-us .wrapper {
    flex-direction: column;
    gap: 0.5em;
  }

  .why-choose-us .wrapper .ind-card {
    border: 1px solid var(--my-yellow);
    border-radius: 0;
  }

  .why-choose-us .wrapper .ind-card.middle {
    padding: 1em;
  }

  .why-choose-us .wrapper .ind-card .num {
    border-radius: 0.2em 0 0 0.2em;
  }

  .why-choose-us .wrapper .ind-card .num::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--my-yellow);
    right: 100%;
    bottom: 50%;
  }

  .why-choose-us .card-wrapper .ind-card h3 {
    font-size: 1.5em;
  }

  /* --- Our Team --- */

  .our-team {
    padding: 5vh 15vw 10vh 15vw;
  }

  .our-team .people {
    flex-direction: column;
  }

  .our-team .people .person-card {
    width: 100%;
  }

  /* --- Our Team exapanded --- */

  .team-expanded {
    padding: 5vh 0;
  }

  .team-expanded .cards {
    padding: 1em 0;
  }

  .team-expanded .cards .team-card {
    border-radius: 0;
  }

  .team-expanded .cards .team-card.even {
    background: white;
    border-radius: none;
  }

  .team-expanded .cards .team-card.even h2 {
    color: black;
  }

  .team-expanded .cards .team-card .title::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 1px;
    bottom: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    z-index: 4;
  }

  /* TRIPS */
  .events {
    max-width: 100vw;
    padding: 1em 10vw;
    flex-direction: column;
  }

  .events.even {
    flex-direction: column;
    background-color: var(--my-orange);
  }

  .events .img-side,
  .events .txt-side {
    width: 100%;
  }

  .events .txt-side {
    padding: 1em;
    gap: 1em;
  }

  .events .txt-side h3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .events .txt-side h3 .icon {
    height: 4cap;
  }

  .events .txt-side button {
    font-size: 1.1em;
  }

  /* THE END */
}