@import url(./global.css);
@import url(./app.css);
@import url(../font/amsi-pro/condensed/stylesheet.css);
@import url(../font/mundo-sans/stylesheet.css);

/* Hero */
.hero {
    background: var(--secondary-color);
}

#logo {
    position: absolute;
    top: 10vh;
    left: 5vw;
    width: 10vw;
    height: auto;
}

.hero-content h1 {
    padding-bottom: 10px;
    text-transform: uppercase;
}

.hero-buttons {
    padding-top: 30px;
}

.hero-buttons a {
    border: 2px solid #000;
    color: #000;
    font-family: var(--font-family);
    text-transform: uppercase;
    font-size: 1.1em;
    padding: 10px 40px;
    border-radius: 50px;
    margin-right: 20px;
}

#heroLeft {
    position: absolute;
    width: 600px;
    top: 40vh;
    left: 5vw;
    width: 50vw;
    z-index: 2;
}

#heroLeft p {
    font-family: var(--secondary-font-family);
    font-weight: 400;
}

.content-left p {
    font-size: 2.2em;
    font-weight: 400;
}

#hero-clouds {
    position: absolute;
    right: 1vw;
    top: 15%;
    width: 45vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

#hero-sun {
    position: absolute;
    right: 22vw;
    top: 12%;
    width: 18vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

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

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

.nav-bar {
    padding: 100px 0;
}

.scroll-down {
    position: absolute;
    bottom: -30vh;
    align-items: center;
}

.scroll-down img {
    width: 4vw;
    height: auto;
}

.scroll-down p {
    font-family: var(--secondary-font-family);
    font-weight: 500;
    padding-left: 1.2vw;
    color: var(--black-color);
    font-size: 1.8vw;
}

/* Section 1 Start */
.section1, 
.section4{
    display: flex;
    align-items: center;
    overflow: hidden;
}

.section1 article, 
.section4 article {
    max-height: 600px;
    height: 100%;
    position: relative;
    flex-direction: row;
    align-items: center;
}

.intro-text p {
    z-index: 5 !important;
}

.section1 p {
    font-family: var(--secondary-font-family);
    font-size: 1.5em;
    line-height: 1.3em;
    padding-right: 40px;
}

.section1 .content-left {
    width: 50%;
}

.section1 .content-right {
    width: 50%;
    padding-right: 10vw;
}

#intro img{
    position: absolute;
}

#introCouch {
    width: 433px;
    height: auto;
    left: 60.3px;
    bottom: 70px;
    z-index: 2;
}

#introTable {
    height: auto;
    width: 170px;
    left: 120px;
    bottom: 82px;
    z-index: 2;
}

#introicon1 {
    width: 100px;
    left: 30px;
    top: 90px;
}

#introicon2 {
    width: 120px;
    left: 140px;
    top: 20px;
}

#introicon3 {
    width: 220px;
    left: 180px;
    top: 60px;
}

#introicon4 {
    width: 170px;
    left: 195px;
    top: 185px;
}

.section1 {
    background-image: url(../img/svg/setion1-bg.svg);
    background-repeat: no-repeat;
    background-position: 270% -20%;
}

.section1 #intro #introBg1 {
    width: 80vw;
    bottom: -50vh;
    left: -30vw;
}

.section1  #intro #introBg2 {
    width: 170%;
    bottom: -50%;
    right: -95%;
}
/* Section 1 End */

/* Serction 2 */
.section2-txt {
    font-family: var(--font-family);
    font-size: 2em;
    text-align: center;
    font-weight: 300;
    color: var(--white-color);
    padding: 100px 0;
}

.section2 .container {
    width: 800px;
}

/* Serction 3 Start */
.section3 {
    padding: 100px 0 100px 0;
    background: url(../img/svg/mental-health-bg.svg);
    background-repeat: no-repeat;
    background-position: 50% -20%;
    background-size: 170%;
}

.section3 .container {
    width: 850px;
}

.section3 .main-section {
    padding: 180px 0 0 0;
}

.section3 .sub-section {
    margin-top: 180px;
}

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

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

.section3 h3 {
    color:var(--red-color);
    font-size: 2.2em;
}

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

#mental-health-Character {
    position: absolute;
    height: 300px;
    bottom: 42px;
    right: 17px;
}

#mental-health-bg {
    position: absolute;
    height: 360px;
    bottom: 92px;
    right: -7px;
}

#mental-speech-bubble {
    position: absolute;
    width: 360px;
    height: auto;
    bottom: 220px;
    right: 19px;
}

#camping-Background {
    position: absolute;
    width: 580px;
    height: auto;
    bottom: 118px;
    left: -115px;
}

#camping-caravan {
    position: absolute;
    width: 317px;
    height: auto;
    bottom: 118px;
    left: -71px;
}

#camping-braai {
    position: absolute;
    width: 220px;
    height: auto;
    top: -9px;
    left: -58px;
}

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

#camping-Shadow {
    position: absolute;
    width: 509px;
    height: auto;
    top: 227px;
    left: -94px;
}

.main-section,
.sub-section {
    position: relative;
}

.sub-section .content-left {
    width: 65%;
}

.sub-section .content-right {
    width: 35%;
}

.sub-section .content-right p {
    padding-right: 0px !important;
}

#section3Right {
    text-align: right;
}

.section3 p{
    font-family: var(--secondary-font-family);
    font-size: 1.5em;
    line-height: 1.3em;
    padding-right: 40px;
}

#section3Bg-img1 {
    position: absolute;
    width: 40vw;
    right: -20vw;
    top: -10vh;
    z-index: 1;
}

#section3Bg-img2 {
    position: absolute;
    width: 62vw;
    right: -30vw;
    top: -40vh;
    z-index: 0;
}

#section3Bg-img3 {
    position: absolute;
    width: 62vw;
    left: -30vw;
    bottom: -40vh;
    z-index: 0;
}
/* Serction 3 End */

/* Serction 4 Start */
.section4 {
    color: var(--black-color);
    padding: 100px 0 100px 0;
}

.section4 .container{
    width: 1200px;
}

.section4, .section9-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section4 p {
    text-align: center;
    padding: 0 0 80px 0;
}

.section4 h3 {
    color: var(--red-color);
}

.section4-compress {
    width: 600px;
}

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

.section4-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.section4-content img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.section4 .vl::after {
    color: var(--red-color);
}
/* Serction 4 End */

/* Serction 5 Start */
.section5 .container{
    align-items: center;
    flex-direction: column;
    padding: 80px 0 100px 0;
}

.section5-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.character {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.section5 .character h3 {
    width: 450px;
    color: var(--red-color);
}

.section5 p {
    text-align: center;
    padding: 0 0 80px 0;
}

#digram-borders {
    width: 800px;
    height: auto;
}

.section5-content img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.section5 .icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.section5 .vl::after {
    color: var(--red-color);
}
/* Serction 5 End */

/* Serction 6 Start */
.section6 {
    color: var(--black-color);
    padding: 100px 0 180px 0;
}

.section6 .container{
    width: 1200px;
}

.section6, .section9-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.section6 h3 {
    color: var(--red-color);
}

.section6-compress {
    width: 600px;
}

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

.section6-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.section6-content img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.section6 .vl::after {
    color: var(--red-color);
}

/* Serction 7 */
.section7 {
    padding: 100px 0 100px 0;
    background: #f0f0f0;
}

.section7 .container {
    width: 850px;
}

.section7 .main-section {
    padding: 20px 0 0 0;
}

.section7 .sub-section {
    margin-top: 180px;
}

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

.section7 .content-right {
    width: 60%;
}

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

.section7 .content-left p {
    font-family: var(--secondary-font-family);
    font-weight: 400;
    font-size: 1.3em;
    text-align: right;
}

#section7Left {
    padding-right: 40px;
}

.section7 h3 {
    color:var(--green-color);
    font-size: 2.2em;
}

.section7 .heading-section {
    padding: 10px;
    width: 20vw;
}

#petrol-car {
    position: absolute;
    height: 210px;
    bottom: 96px;
    right: -108px;
}

#petrol-character {
    position: absolute;
    height: 296px;
    width: auto;
    bottom: 112px;
    right: 275px;
}

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

.main-section,
.sub-section {
    position: relative;
}

.sub-section .content-left {
    width: 65%;
}

.sub-section .content-right {
    width: 35%;
}

.sub-section .content-right p {
    padding-right: 0px !important;
}

#section3Right {
    text-align: right;
}

.section3 p{
    font-family: var(--secondary-font-family);
    font-size: 1.5em;
    line-height: 1.3em;
    padding-right: 40px;
}

#section3Bg-img1 {
    position: absolute;
    width: 40vw;
    right: -20vw;
    top: -10vh;
    z-index: 1;
}

#section7Bg-img2 {
    position: absolute;
    width: 62vw;
    right: -30vw;
    top: -40vh;
    z-index: 0;
}

#section7Bg-img3 {
    position: absolute;
    width: 62vw;
    left: -30vw;
    bottom: -40vh;
    z-index: 0;
}

/* Section 8 */
.section8 {
    padding: 100px 0 100px 0;
    background: #f0f0f0;
}

.section8 h3 {
    color: var(--green-color);
}

.section8-content {
    justify-content: center;
    padding: 80px 0 0 0;
}
.section8-content .main-img {
    width: 60%;
}

#petrol-increase-percent {
    position: absolute;
    z-index: 3;
    width: 102px;
    top: 40px;
    right: 373px;
}

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

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

.section8 .vl {
    border-color: var(--green-color);
}

.section8 .vl::after {
    color: var(--green-color);
}

/* Serction 9 */
.section9 {
    color: #fff;
    padding: 100px 0 80px 0;
}

.section9 .container{
    width: 1200px;
}

.section9, .section9-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.section9 p {
    text-align: center;
    padding: 0 0 80px 0;
}

.section9 h3 {
    color: #fff;
}

.section9-compress {
    width: 600px;
}

.section9-content{
    justify-content: space-evenly;
    flex-wrap: nowrap;
    text-align: center;
    margin-bottom: 0px;
    align-items: start;
    margin-top: 50px;
}

.section9 .heading-section {
    border-color: var(--white-color);
}

.section9-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.section9-content img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.section9 .vl::after {
    color: var(--white-color);
}

/* Serction 10 */
.section10 {
    color: #fff;
    padding: 100px 0 80px 0;
}

.section10 .container{
    width: 1200px;
}

.section10 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section10 p {
    text-align: center;
    padding: 0 0 80px 0;
}

.section10 h3 {
    color: var(--primary-color);
    margin-bottom: 40px;
}

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

.section10-compress {
    width: 600px;
}

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

.section10 .heading-section {
    border-color: var(--primary-color);
}

.section10-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.section10-content img {
    width: 270px;
    height: auto;
    object-fit: contain;
}

.section10-notice {
    color: var(--red-color);
    font-size: 2em;
}

.icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

/* Section 11 */
.section11 {
    background-color: #f0f0f0;
    padding: 100px 0 0 0;
}

.section11 .heading-section {
    position: relative;
    z-index: 5;
    padding: 0;
}

.section11 .heading-section h3 {
    padding: 30px;
}

.section11 .character {
    margin-bottom: 0;
}

.section11 article {
    align-items: center;
}

.section11 .wrapper {
    position: relative;
    flex-direction: row;
    align-items: center;
    max-height: 350px;
    height: 100%;
}

#section11one .container .content-left {
    width: 70%;
}

#section11one .container .content-right {
    width: 30%;
    padding-right: 40px;
}

#section11two .container .content-left {
    width: 40%;
    text-align: right;
    padding-right: 50px;
}

#section11two .container .content-right {
    width: 60%;
    padding-right: 40px;
}

#section11three .container .content-left {
    width: 70%;
}

#section11three .container .content-right {
    width: 30%;
    padding-right: 40px;
}

#section11four .container .content-left {
    width: 40%;
    text-align: right;
    padding-right: 50px;
    padding-left: 40px;
}

#section11four .container .content-right {
    width: 60%;
    padding-right: 40px;
}

.section11 img {
    position: absolute;
}

#keyimg1-bg{
    width: 750px;
    left: 62px;
    bottom: 203px;
    z-index: 0;
}

#keyimg1-tent {
    height: 214px;
    left: 242px;
    bottom: 114px;
    z-index: 2;
}

#keyimg1-plants {
    height: 113px;
    z-index: 2;
    left: 187px;
    bottom: 105px;
}

#keyimg1-character1 {
    height: 180px;
    left: 160px;
    bottom: 10px;
    z-index: 3;
}

#keyimg1-character2 {
    width: 313px;
    left: 469px;
    bottom: 34px;
    z-index: 3;
}

#keyimg1-fire {
    z-index: 4;
    width: 95px;
    left: 385px;
    bottom:10px;
}

#keyimg1-shadow {
    width: 666px;
    left: 120px;
    bottom: -6px;
    z-index: 0;
}

#keyimg2-bg {
    height: 380px;
    top: 10px;
    right: 281px;
    z-index: 2;
}

#keyimg2-character {
    height: 260px;
    bottom: -74px;
    right: 360px;
    z-index: 6;
}

#keyimg2-mobile {
    height: 357px;
    bottom: -40px;
    right: 256px;
    z-index: 5;
}

#img3-stop {
    height: 340px;
    bottom: 11px;
    left: 570px;
}

#keyimg3-character {
    height: 360px;
    left: 150px;
    bottom: -7px;
}

#keyimg3-shadow{
    width: 230px;
    left: 185px;
    bottom: -25px;
}

#keyimg3-plant {
    width: 85px;
    left: 152px;
    bottom: 12px;
}

#keyimg3-bg {
    width: 565px;
    left: 130px;
    bottom: 70px;
}

#keyimg3-covid {
    width: 55px;
    bottom: 233px;
    left: 216px;
}

#keyimg4-bg {
    width: 500px;
    right: 90px;
    bottom: -35px;
}

#keyimg4-Character2 {
    height: 300px;
    bottom: -24px;
    right: 134px;
}

#keyimg4-Character1 {
    height: 300px;
    bottom: -24px;
    right: 463px;
}

#keyimg4-map{
    width: 280px;
    top: 31px;
    right: 205px;
}

.section11 .content-left, .section11 .content-right {
    justify-content: center;
    width: 80%;
}

.section11 .sm-copy {
    font-size: 1.5em;
    line-height: 1.5em;
}

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

/* Serction 12 Start */
.section12 {
    color: var(--black-color);
    padding: 100px 0 100px 0;
}

.section12 .container{
    width: 1200px;
}

.section12 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section12 p {
    text-align: center;
    padding: 0 0 20px 0;
}

.section12 h3 {
    color: var(--primary-color);
}

.section12-compress {
    width: 600px;
}

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

.section12-content .icon {
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    margin: 0 20px;
    padding: 0 20px;
    flex: 1;
}

.section12-content img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.icon-container {
    border-radius: 100px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.section12 .vl::after {
    color: var(--primary-color);
}
/* Serction 12 End */

/* Section 13 Start */
.section13  {
    padding: 50px 0;
}

.section13 {
    background-color: #f0f0f0;
}

.section13 p {
    font-family: var(--secondary-font-family);
}

.section13-content {
    justify-content: space-between;
    align-items: center;
}
/* Section 13 End */

/* Footer */
.footer {
    background-color: #2F2F2F;
    font-family: var(--font-family);
    text-align: right;
}

.footer-content{
    align-items: center;
    color: var(--white-color);
    font-size: 24px;
}

.content-left, .content-right {
    padding: 20px 10px;
}

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