@media only screen and (max-width: 800px) {
    /* Global */
    body .wrapper {
        overflow-x: hidden;
    }

    .section1, .section2, .section4, .section9 p, .section10 p, .section11 p, ul, ol, p, h1 {
        text-align: left;
    }

    footer, tabel p {
        text-align: center !important;
    }

    .content-left, 
    .content-right {
        width: 100%;
    }

    /* Hero Section */
    .hero, .section1 {
        height: 600px;
    }

    #logo {
        width: 20vw;
        top: 40px;
    }

    .hero-content {
        flex-direction: column;
    }

    #content-right {
        height: 200px;
    }

    .hero-content .content-left, 
    .hero-content .content-right,
    .hero-content #heroLeft{
        width: 100%;
    }

    .hero-content h1 {
        font-size: 38px;
        line-height: 40px;
        padding-bottom: 20px;
    }

    .scroll-down img {
        width: 24px;
        height: auto;
    }
    
    .scroll-down p {
        padding-left: 10px;
        color: var(--black-color);
        font-size: 14px;
    }

    #heroLeft{
        padding-top: 50px;
        position:none;
    }

    #heroRight  {
        top: 90px;
        width: 80%;
    }

    #hero-clouds {
        right: 0;
        top: 80px;
        width: 80%;
    }

    #beachBg {
        visibility: hidden;
    }

    /* Reception Section */
    .section1 .container {
        flex-direction: column;
        width: 80%;
    }

    .section1 p {
        font-size: 16px;
        line-height: 18px;
    }

    #receptionRight {
        position: relative;
        width: 100%;
        height: 200px;
    }

    #receptionDesk {
        width: 200px;
        height: auto;
        left: 60.3px;
        bottom: 100px;
    }

    #receptionSanitiser {
        visibility: hidden;
        height: 10px;
        width: auto;
        right: 600px;
        bottom: 220px;
        z-index: 2;
    }

    #receptionPlant {
        height: 98px;
        width: auto;
        left: 40px;
        bottom: 100px;
        z-index: 3;
    }

    #receptionGuest {
        height: 200px;
        right: 6px;
        bottom: 80px;
        z-index: 4;
    }

    /* Volume Tabel Section */
    .section2 .container {
        padding: 50px 20px;
        width: 100%;
    }
    .section2 h2 {
        font-size: 28px;
    }
    
    .travel-vol {
        margin: 0;
        flex-direction: column;
    }
    
    .travel-vol-heading h3 {
        font-size: 20px;
    }

    /* Accommodation Tabel Section */
    .section3 {
        height: 1000px;
        width: 100%;
        flex-direction: column;
        padding: 0 20px 20px 20px;
    }

    .section3 .container {
        width: 100%;
    }

    .divider {
        display: none;
    }

    .section3 p {
        text-align: center;
        padding: 50px 0;
    }

    #sectionThree-text1, 
    #sectionThree-text2 {
        position: unset;
    }

    .accommodation {
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    /* Family Section */
    .section4 article {
        justify-content: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section4 .container {
        width: 80%;
        padding: 50px 0;
        justify-content: center;
        align-items: center;
    }

    .section4 .content-right, .section4 .content-left {
        width: 100%;
        padding: 10px 20px;
        display: unset;
    }

    .section4 .content-left {
        height: 700px;
    }

    .section4 .content-right {
        padding: 50px 0 0 0;
        margin: 50px 0 0 0;
    }

    .section4 .content-right, .section4 .full-section {
        height: auto;
    }

    #family {
        width: 70%;
        margin-left: -100px;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: unset;
    }

    /* Complex section Section */
    .section5 .container {
        width: 80%;
        padding: 50px 0 50px 0;
    }

    .stats-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .stats-content img { 
        width: 100%;
        padding-bottom: 40px;
        height: auto;
    }

    .section5 h2 {
        font-size: 28px;
    }

    .section5 h3 {
        font-size: 20px;
    }

    #digram-borders {
        display: none;
    }

    #noChildren {
        position: unset;
        top: 24px;
        left: 240px;
        width: 150px;
    }
    
    #fully-digital {
        position: unset;
        top: 45px;
        right: 210px;
        width: 300px;
    }

    #income {
        position: unset;
        top: 275px;
        left: 222px;
        width: 320px;
    }

    #trends {
        position: unset;
        top: 215px;
        right: 270px;
        width: 120px;
    }

    #degree {
        position: unset;
        top: 470px;
        left: 220px;
        width: 180px;
    }

    #research {
        position: unset;
        top: 510px;
        right: 240px;
        width: 180px;
    }

    #eighteen {
        position: unset;
        top: 650px;
        left: 345px;
        width: 180px;
    }

    #technology {
        position: unset;
        bottom: 100px;
        left: 210px;
        width: 180px;
    }

    #single {
        position: unset;
        bottom: 245px;
        right: 420px;
        width: 120px;
    }

    #digital-natives {
        position: unset;
        bottom: -50px;
        right: 230px;
        width: 330px;
    }

    .stats-content {
        padding: 100px 0 0 0;
        width: 100%;
    }

    /* Generation Z */
    .section6 {
        padding: 50px 0 50px 0;
    }

    .section6 .container{
        width: 80%;
    }

    .section6-compress {
        width: 100%;
        padding: 0;
    }

    .section6-content{
        flex-direction: column;
        flex-wrap: nowrap;
        text-align: center;
        margin-bottom: 0px;
    }

    .section6 p {
        text-align: center;
        padding: 0 0 50px 0;
    }

    .section6 .icon {
        padding-bottom: 20px;
    }

    /* TRAVEL BEHAVIOUR */
    .section7 h2 {
        font-size: 28px;
    }

    .section7 .container {
        width: 90%;
        flex-direction: column;
        padding: 50px 0 50px 0;
    }

    .section7 .content-right {
        padding-top: 10px;
    }

    /* Checklist Section */
    .section8 h3 {
        font-size: 20px;
    }

    .section8 {
        padding: 50px 0 50px 0;
    }

    .section8 .container {
        width: 80%;
    }

    #section8_heading {
        z-index: 10;
    }

    #checklist {
        width: 100%;
    }
    
    #pot-plant {
        right: 7px;
        bottom: 10px;
        height: 100px;
    }

    #checkBg1, #checkBg2, #checkBg3 {
        visibility: hidden;
    }

    /* How to engage Section */
    .section9 {
        height: auto;
        padding: 50px 0;
    }

    .section9 h3 {
        font-size: 20px;
    }

    .section9 .container {
        width: 90%;
        padding: 50px 0;
    }

    .section9-content {
        flex-direction: column;
        padding-top: 40px;
    }

    /* Communication Section */
    .section10 h2 {
        font-size: 28px;
    }

    .section10 h3 {
        font-size: 20px;
    }

    .section10 .container {
        flex-direction: column;
        padding: 50px 0 50px 0;
        width: 90%;
    }

    .section10 .content-left, .section10 .content-right {
        width:100%;
        padding:0;
    }

    .section10 h3 {
        width: 100%;
    }

    #contentleft {
        width: 100%;
    }

    div#contentleft {
        padding: 0 10px;
    }

    .section10 img {
        width: 100%;
        padding-top: 50px;
    }

    /* Key Takeaways Section */
    .section11 h2 {
        font-size: 28px;
    }

    .section11 {
        padding-top: 50px;
    }

    .section11 .heading-section {
        margin-bottom: 50px;
    }

    .section11 .full-section {
        height: auto;
    }

    .section11 .sm-copy {
        font-size: 18px;
        line-height: 24px;
    }

    .section11 .bold-span {
        font-size: 24px;
    }
    
    .section11 .number {
        font-family: var(--font-family);
        font-size: 38px;
        margin-right: 20px;
        margin-bottom: -5px;
    }

    .section11 .wrapper {
        position: unset;
        flex-direction: column;
        align-items: center;
        max-height: auto;
        height: 100%;
    }

    .section11 .content-left, .section11 .content-right {
        width: 100%;
        overflow: visible;
        padding-bottom: 20px;
    }

    .section11 .container {
        width: 80%;
    }

    #keyimg1-mobile{
        height: 220px;
        width: auto;
        position: unset;
        z-index: 8 !important;
    }

    .section11 article#section11two {
        flex-direction: column-reverse;
    }

    #section11five {
        flex-direction: column-reverse;
    }

    #keyimg2-mobile {
        height: 250px;
        width: auto;
        position: unset;
        z-index: 8 !important;
    }

    #keyimg4-mobile {
        height: 200px;
        position: unset;
    }

    #keyimg3-mobile {
        width: 90%;
        position: unset;
    }

    #keyimg5-mobile {
        width: 70%;
        position: unset;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
    }

    .content-left, .content-right {
        text-align: center;
        padding: 10px 0;
        width: 100%;
    }

    .footer-content img{
        width: 50px;
    }

    #keyTakeawaysBg-img1, #keyTakeawaysBg-img2, #keyTakeawaysBg-img3, #keyTakeawaysBg-img4, #keyTakeawaysBg-img5 {
        visibility: hidden;
    }
}

@media only screen and (max-width: 415px) {
    /* Global */
    body .wrapper {
        overflow-x: hidden;
    }

    .content-left, 
    .content-right {
        width: 100%;
    }

    /* Hero Section */
    .nav-bar {
        padding: 0 0 150px 0;
    }

    .hero, .section1 {
        height: 800px;
    }

    #logo {
        width: 20vw;
        top: 40px;
    }

    .hero-content {
        flex-direction: column;
        width: 415px;
        padding: 0;
    }

    #content-right {
        height: 200px;
    }

    .hero-content .content-left, 
    .hero-content .content-right,
    .hero-content #heroLeft{
        width: 100%;
    }

    .hero-content h1 {
        font-size: 38px;
        line-height: 40px;
        padding-bottom: 10px;
    }

    .scroll-down img {
        width: 24px;
        height: auto;
    }

    .scroll-down p {
        font-family: var(--secondary-font-family);
        font-weight: 500;
        padding-left: 10px;
        color: var(--black-color);
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons a {
        margin-bottom: 10px;
    }

    #heroLeft{
        position: unset !important;
        width: 100%;
        padding: 0 20px 0 20px;
    }

    .content-left p {
        font-family: var(--secondary-font-family);
        font-size: 1.5em;
        font-weight: 400;
        line-height: 1em;
    }

    #heroRight  {
        top: 90px;
        width: 90%;
    }

    #hero-sun {
        position: absolute;
        right: 38vw;
        top: 57vh;
        width: 25vw;
        height: auto;
        object-fit: contain;
        z-index: 1;
    }

    #hero-clouds {
        position: absolute;
        right: 12vw;
        top: 55vh;
        width: 80vw;
        height: auto;
        object-fit: contain;
        z-index: 1;
    }

    #beachBg {
        visibility: hidden;
    }

    #heroTraveler {
        position: absolute;
        right: 10vw;
        bottom: 4vh;
        height: 35vw;
        z-index: 2;
    }

    #ground {
        position: absolute;
        width: 98vw;
        height: auto;
        bottom: -0.1vh;
        right: -2.2vw;
        z-index: 1;
    }

    /* Intro Section */
    .section1 .container {
        flex-direction: column-reverse;
    }

    .section1 .content-right {
        width: 100%;
        padding-right: 0;
    }

    .section1 p {
        font-size: 16px;
        line-height: 18px;
    }

    #introCouch {
        width: 240px;
        height: auto;
        left: 20.3px;
        bottom: 302px;
        z-index: 2;
    }

    #introicon1 {
        width: 70px;
        left: -11px;
        top: 40px;
    }

    #introicon2 {
        width: 82px;
        left: 69px;
        top: -4px;
    }

    #introicon3 {
        width: 140px;
        left: 93px;
        top: 28px;
    }

    #introicon4 {
        width: 100px;
        left: 95px;
        top: 105px;
    }

    #introTable {
        height: auto;
        width: 96px;
        left: 59px;
        bottom: 325px;
        z-index: 2;
    }

    /* GREEN Section */
    .section2 .container {
        padding: 50px 20px;
        width: 100%;
    }
    .section2 h2 {
        font-size: 28px;
    }
    
    .section2-txt {
        font-size: 2em;
        padding: 50px 0;
        line-height: 1em;
    }

    /* Mental Health Section */
    .section3 {
        height: unset;
        width: 100%;
        flex-direction: column;
        padding: 80px 20px 150px 20px;
    }

    .section3 .container {
        width: 100%;
    }

    .section3 .heading-section {
        padding: 10px;
        width: unset;
    }

    .section3 .main-section {
        padding: 0;
        flex-direction: column;
    }

    .section3 .sub-section {
        flex-direction: column-reverse;
    }

    .section3 .content-left, 
    .section3 .content-right {
        width: 100%;
    }

    .section3 .content-left {
        padding: 10px 0 100px;
    }

    .section3 p {
        text-align: center;
        padding: 50px 0;
    }

    #sectionThree-text1, 
    #sectionThree-text2 {
        position: unset;
    }

    #mental-health-Character {
        position: absolute;
        height: 179px;
        bottom: -61px;
        right: 67px;
    }

    #mental-health-bg {
        position: absolute;
        height: 250px;
        bottom: -105px;
        right: 45px;
    }

    #mental-health-Character {
        position: absolute;
        height: 220px;
        bottom: -141px;
        right: 58px;
    }

    #mental-speech-bubble {
        position: absolute;
        width: 240px;
        height: auto;
        bottom: -12px;
        right: 66px;
    }

    #camping-Background {
        position: absolute;
        width: 300px;
        height: auto;
        bottom: 16px;
        left: 5px;
    }

    #camping-caravan {
        position: absolute;
        width: 163px;
        height: auto;
        bottom: 13px;
        left: 45px;
    }

    #camping-braai {
        position: absolute;
        width: 112px;
        height: auto;
        top: 359px;
        left: 55px;
    }

    #camping-female {
        position: absolute;
        width: 110px;
        height: auto;
        top: 414px;
        left: 157px;
    }

    #camping-Shadow {
        position: absolute;
        width: 290px;
        height: auto;
        top: 485px;
        left: 20px;
    }

    /* Impact of Tourism Section */
    .section4 {
        color: var(--black-color);
        padding: 20px 0 940px 0;
        height: unset;
    }

    .section4 article {
        justify-content: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section4-content {
        justify-content: space-evenly;
        flex-wrap: nowrap;
        text-align: center;
        margin-bottom: 0px;
        flex-direction: column;
    }

    .section4 .container {
        width: 80%;
        padding: 0px 0;
        justify-content: center;
        align-items: center;
    }

    .section4 .content-right, .section4 .content-left {
        width: 100%;
        padding: 10px 20px;
        display: unset;
        justify-content: center;
        align-items: center;
    }

    .section4 .content-left {
        height: 700px;
    }

    .section4 .content-right {
        padding: 50px 0 0 0;
        margin: 50px 0 0 0;
    }

    .section4 .content-right, .section4 .full-section {
        height: auto;
    }

    #family {
        width: 70%;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: unset;
    }

    /* Visiting friends Section */
    .section5 .container {
        width: 80%;
        padding: 50px 0 50px 0;
    }

    .section5 .character h3 {
        width: 100%;
    }

    .section5-content {
        flex-direction: column;
    }

    .stats-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .stats-content img { 
        width: 100%;
        padding-bottom: 40px;
        height: auto;
    }

    .section5 h2 {
        font-size: 28px;
    }

    .section5 h3 {
        font-size: 20px;
    }

    #digram-borders {
        display: none;
    }

    #noChildren {
        position: unset;
        top: 24px;
        left: 240px;
        width: 150px;
    }
    
    #fully-digital {
        position: unset;
        top: 45px;
        right: 210px;
        width: 300px;
    }

    #income {
        position: unset;
        top: 275px;
        left: 222px;
        width: 320px;
    }

    #trends {
        position: unset;
        top: 215px;
        right: 270px;
        width: 120px;
    }

    #degree {
        position: unset;
        top: 470px;
        left: 220px;
        width: 180px;
    }

    #research {
        position: unset;
        top: 510px;
        right: 240px;
        width: 180px;
    }

    #eighteen {
        position: unset;
        top: 650px;
        left: 345px;
        width: 180px;
    }

    #technology {
        position: unset;
        bottom: 100px;
        left: 210px;
        width: 180px;
    }

    #single {
        position: unset;
        bottom: 245px;
        right: 420px;
        width: 120px;
    }

    #digital-natives {
        position: unset;
        bottom: -50px;
        right: 230px;
        width: 330px;
    }

    .stats-content {
        padding: 100px 0 0 0;
        width: 100%;
    }

    /* Petrol */
    .section6 {
        padding: 50px 0 50px 0;
    }

    .section6 .container{
        width: 80%;
    }

    .section6-compress {
        width: 100%;
        padding: 0;
    }

    .section6-content{
        flex-direction: column;
        flex-wrap: nowrap;
        text-align: center;
        margin-bottom: 0px;
    }

    .section6 p {
        text-align: center;
        padding: 0 0 50px 0;
    }

    .section6 .icon {
        padding-bottom: 20px;
    }

    /* Petrol */
    .section7 h2 {
        font-size: 28px;
    }

    .section7 .heading-section {
        padding: 10px;
        width: 90%;
    }

    .section7 .main-section {
        flex-direction: column;
    }

    .section7 .container {
        width: 90%;
        flex-direction: column;
        padding: 50px 0 50px 0;
    }

    .section7 .content-left {
        width: 100%;
    }

    #section7Left {
        padding-right: 0px;
    }

    .section7 .content-left {
        padding: 20px 20px 100px 20px;
    }

    .section7 .content-left p {
        text-align: left;
    }

    .section7 .content-right {
        padding-top: 10px;
    }

    #petrol-car {
        position: absolute;
        height: 110px;
        bottom: -130px;
        right: 20px;
    }

    #petrol-character {
        position: absolute;
        height: 156px;
        width: auto;
        bottom: -122px;
        right: 220px;
    }

    #petrol-bg {
        position: absolute;
        width: 280px;
        height: auto;
        bottom: 105px;
        left: 400px;
    }

    /* Petrol price Increase Section */
    .section8 h3 {
        font-size: 20px;
    }

    .section8 {
        padding: 50px 0 50px 0;
    }

    .section8 .container {
        width: 80%;
    }

    #petrol-increase-bars {
        z-index: 4;
        right: 0px;
        bottom: 20px;
        height: 230px;
    }

    #petrol-pump {
        position: absolute;
        z-index: 4;
        left: 30px;
        bottom: 15px;
        height: 76px;
    }

    /* How to engage Section */
    .section9 {
        height: auto;
        padding: 50px 0;
    }
    .section9 h3 {
        font-size: 20px;
    }

    .section9 .container {
        width: 90%;
        padding: 50px 0;
    }

    .section9-content {
        flex-direction: column;
        padding-top: 40px;
    }

    /* Communication Section */
    .section10 {
        color: rgb(255, 255, 255);
        padding: 0px 0px 0px;
    }

    .section10 h2 {
        font-size: 28px;
    }

    .section10 h3 {
        font-size: 20px;
    }

    .section10 .container {
        flex-direction: column;
        padding: 40px 0px;
        width: 80%;
    }

    .section10-content {
        justify-content: space-evenly;
        flex-wrap: nowrap;
        text-align: center;
        margin-bottom: 0px;
        align-items: baseline;
        margin-top: 20px;
        flex-direction: column;
    }

    .section10 .content-left, .section10 .content-right {
        width:100%;
        padding:0;
    }

    .section10 h3 {
        width: 100%;
    }

    #contentleft {
        width: 100%;
    }

    .section10 img {
        width: 100%;
        padding-top: 50px;
    }

    .section10 .character p {
        color: var(--black-color);
        padding: 0px;
    }

    /* Impact of Tourism Section */
    .section12-content {
        justify-content: space-evenly;
        flex-wrap: nowrap;
        text-align: center;
        margin-bottom: 0px;
        flex-direction: column;
    }

    /* Key Takeaways Section */
    .section11 h2 {
        font-size: 28px;
    }

    .section11 h2 {
        font-size: 28px;
    }

    .section11 .wrapper {
        position: relative;
        flex-direction: column;
        align-items: center;
        max-height: unset;
        height: unset !important;
    }

    #section11one .container .content-right,
    #section11one .container .content-left,
    #section11two .container .content-left,
    #section11three .container .content-right,
    #section11four .container .content-left {
        width: 100%;
        text-align: left;
        padding-right: 0px;
    }

    #section11four .container .content-left {
        padding-left: 0px;
    }

    #keyimg1-mobile {
        height: auto;
        width: 300px;
    }

    #keyimg2-mobile {
        height: 250px;
        width: auto;
        margin-left: 30px;
        margin-bottom: 30px;
    }

    #keyimg4-mobile {
        margin-left: 40px;
        margin-bottom: 30px;
    }

    #section11two {
        flex-direction: column-reverse;
    }

    /* Scroll up section */
    .section13-content {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .section13-content p {
        margin-bottom: 20px;
    }

    .scroll-top img {
        width: 80%;
    }
}

@media only screen and (max-width: 390px) {
    /* Hero Section */
    .hero-content {
        flex-direction: column;
        width: 390px;
        padding: 0;
    }

    #hero-sun {
        position: absolute;
        right: 38vw;
        top: 63vh;
        width: 26vw;
        height: auto;
        object-fit: contain;
        z-index: 1;
    }

    #hero-clouds {
        position: absolute;
        right: 5vw;
        top: 62vh;
        width: 80vw;
        height: auto;
        object-fit: contain;
        z-index: 1;
    }
}