#home .section {
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
}

#banner {
    background-color: var(--green);
}

#banner .banner {
    width: 100vw;
    display: flex;
    position: absolute;
    height: 100vh;
    top: 0px
}

#banner .banner img {
    margin: auto;
    max-width: 90vw;
    height: 85vh;
}

.banner-title {
    font-size: 30px;
    color: white;
    font-weight: 300;
    position: absolute;
    top: 50px;
    left: 165px;
    border-left: 1px solid white;
    padding-left: 20px;
}

.banner-footer {
    font-size: 70px;
    color: white;
    font-weight: 300;
    position: absolute;
    left: 20px;
    letter-spacing: 1px;
    top: calc(100vh - 200px); 
}

.banner-title p {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -10px;
    margin-bottom: 0px;
}

.banner-footer p {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -45px;
    margin-bottom: 0px;
}

.scroll-down {
    font-size: 12px;
    color: white;
    font-weight: 400;
    position: relative;
    top: calc(100vh - 130px);
    text-align: center;
    letter-spacing: 1px;
}

.scroll-down img {
    margin-top: 2px;
    height: 24px;
    position: absolute;
    margin-left: -40px;
}

.scroll-down p {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
}

.scroll-down p {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
}

#section1 {
    background: url(../images/section_1.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

.section1-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: calc(50vh + 50px);
    left: calc(20vw - 27.5px);
}

.section1-title {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    position: absolute;
    top: calc(50vh - 52px);
    left: calc(20vw - 85px);
}

.section1-title p {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -20px;
    margin-bottom: 0px;
}

#section2 {
    background-color: var(--green)
}

.map {
    text-align: right;
    width: calc(100% - 40px);
    background-color: rgba(223, 223, 223, 0.3);
    position: absolute;
    left: 20px;
    height: 75vh;
    margin-top: 7.5vh;
    display: flex;
}

.map .map-img {
    max-width: 805px;
    height: auto;
    position: absolute;
    right: 20px;
    top: 5%;
}

.section2-text {
    text-align: center;
    position: absolute;
    left: 40px;
    margin-top: 27vh;
}

.section2-text .title {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
}

.section2-text .text {
    font-size: 20px;
    color: white;
    padding: 0px;
    margin: 0px;
}

.section2-separator {
    border-bottom: 3px solid white;
    width: 160px;
    margin: auto;
    padding-top: 10px;
    margin-bottom: 30px;
}

.section2-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    padding-left: 0px;
    position: absolute;
    right: 0px;
    padding-right: 5px;
}

#section2 .gggi_btn {
    position: absolute;
    bottom: 20px;
    right: 20vw;
}

.legend {
    text-align: left;
    font-size: 11px;
    color: white;
    font-weight: bold;
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.legend2 {
    width: 200px;
    text-align: left;
    font-size: 11px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 20px;
    bottom: 20px;
}

.legend img {
    margin-right: 5px;
    width: 12px;
}

#section3 {
    background: url(../images/section_3.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

.mask {
    background: rgb(21,175,151);
    background: linear-gradient(90deg, rgba(21,175,151,1) 0%, rgba(21,175,151,0) 100%, rgba(21,175,151,1) 100%);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
}

.mask img {
    position: absolute;
    bottom: 40px;
    left: 20px;
    width: 53vw;
}

.section3-text p {
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
}

.section3-text {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    position: absolute;
    top: 25vh;
    left: calc(29vw - 270px);
}

.section3-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: calc(25vh + 105px);
    left: calc(29vw - 27px);
}

#section4 {
    background: url(../images/section_4.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

#section5 {
    background: url(../images/section_5.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

.section5-text p {
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
    line-height: 50px;
}

.section5-text {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    position: absolute;
    top: calc(50vh - 90px);
    left: calc(20vw - 240px);
    width: 480px;
}

.section5-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: calc(50vh + 100px);
    left: calc(20vw - 30px);
}

#section6 {
    background: url(../images/section_6.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

.section6-text p {
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
    line-height: 50px;
}

.section6-text {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    position: absolute;
    top: calc(50vh - 50px);
    left: calc(20vw - 200px);
    width: 400px;
}

.section6-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: calc(50vh + 40px);
    left: calc(20vw - 30px);
}

#section7 {
    background: url(../images/section_7.png) no-repeat center center;
    background-size: cover;
    background-position: bottom;
    background-position-y: 0px;
    background-position-x: 0px;
    position: relative;
}

.section7-text p {
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
}

.section7-text {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    position: absolute;
    top: calc(50vh - 65px);
    left: calc(25vw - 106px);
}

.section7-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: calc(50vh - 65px + 96px);
    left: calc(25vw - 27.5px);
}

#slider1.splide, 
#slider3.splide {
    position: absolute;
    width: 42vw;
    top: 20vh; 
}

#slider1.splide {
    right: 0px;
}

#slider3.splide {
    right: 28px;
}

#slider2.splide,
#slider6.splide  {
    position: absolute;
    width: 60vw;
    top: 20vh; 
    right: 28px;
}

#slider2 .col-7,
#slider6 .col-7 {
    margin: auto;
}

#slider4.splide,
#slider7.splide {
    position: absolute;
    width: calc(100vw - 16px);
    top: 20vh;
    left: 0px;
    right: 0px;
}

#slider5.splide {
    position: absolute;
    width: 60vw;
    top: 20vh; 
    right: 28px;
}

#slider1 .splide__slide, 
#slider3 .splide__slide {
    background-color: white;
    width: 42vw; 
    height: 70vh;
    margin-left: 10px;
    margin-right: 10px;
}

#slider2 .splide__slide,
#slider6 .splide__slide {
    background-color: white;
    width: 50vw; 
    height: 70vh;
    margin-left: 10px;
    margin-right: 10px;
}

#slider4 .splide__slide,
#slider7 .splide__slide {
    background-color: white;
    height: 70vh;
    margin-right: 10px;
    margin-left: 10px;
}

#slider5 .splide__slide {
    background-color: white;
    width: 50vw; 
    height: 70vh;
}

#slider1 .slide-banner, 
#slider3 .slide-banner,
#slider4 .slide-banner,
#slider5 .slide-banner,
#slider7 .slide-banner  {
    background-color: var(--light-gray);
    height: 25vh;
    margin: 20px;
}

#slider2 .slide-banner,
#slider6 .slide-banner {
    background-color: var(--light-gray);
    height: calc(70vh - 40px);
    margin: 20px;
}

.slide-banner img {
    object-fit: cover;
}

#slider1 .slide-banner img, 
#slider3 .slide-banner img,
#slider4 .slide-banner img,
#slider5 .slide-banner img,
#slider7 .slide-banner img {
    width: 100%;
    height: 25vh;
}

#slider2 .slide-banner img,
#slider6 .slide-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slider1 .slide-title, 
#slider3 .slide-title,
#slider4 .slide-title,
#slider5 .slide-title,
#slider7 .slide-title {
    text-transform: uppercase;
    color: var(--green);
    font-size: 1.5rem;
    text-align: center;
    margin: auto;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

#slider4 .slide-title,
#slider7 .slide-title {
    font-size: 1.5rem;
}

#slider2 .slide-title,
#slider6 .slide-title {
    color: var(--green);
    font-size: 35px;
    text-align: center;
    width: 200px;
    margin: auto;
    font-weight: 900;
    padding-top: 10px;
}

.slide-separator{
    border-bottom: 4px solid var(--green);
    width: 30%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 0px;
}

#slider1 .slide-text,
#slider5 .slide-text {
    color: var(--green);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    word-spacing: 2px;
}


#slider7 .slide-text {
    color: var(--green);
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    word-spacing: 2px;
}

#slider4 .slide-text,
#slider3 .slide-text {
    color: var(--green);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 400;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    word-spacing: 2px;
}

#slider2 .slide-text1,
#slider6 .slide-text1 {
    color: var(--green);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    padding-top: 20px;
    padding-right: 40px;
    word-spacing: 2px;
}

#slider5 .slide-text1 {
    color: var(--green);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    padding-top: 20px;
    padding-right: 50px;
    padding-left: 40px;
    word-spacing: 2px;
}

#slider2 .slide-text1, 
#slider6 .slide-text1 {
    max-height: 22vh;
    overflow: auto;
}

#slider2 .slide-text2,
#slider6 .slide-text2  {
    max-height: 31vh;
    overflow:auto;
}

#slider5 .slide-text1 {
    max-height: 15vh;
    overflow: auto;
}

#slider5 .slide-text3 {
    max-height: 13vh;
    overflow: auto;
}

#slider2 .slide-text2,
#slider6 .slide-text2 {
    color: var(--green);
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    padding-top: 20px;
    padding-right: 40px;
    word-spacing: 2px;
}

#slider5 .slide-text3 {
    color: var(--green);
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    padding-top: 20px;
    padding-right: 50px;
    padding-left: 40px;
    word-spacing: 2px;
}

.slide-text .gggi_btn,
.slide-text1 .gggi_btn{
    bottom: 20px;
    margin: auto;
}

.slide-text2 .gggi_btn {
    position: absolute;
    left: calc(70% - 95px);
    bottom: 20px;
}

.slide-text3 .gggi_btn {
    position: absolute;
    left: calc(50% - 95px);
    bottom: 20px;
}

.slide-text .gggi_btn img, 
.slide-text1 .gggi_btn img, 
.slide-text2 .gggi_btn img,
.slide-text3 .gggi_btn img{
    transform: rotate(180deg);
    margin-bottom: 4px;
    margin-left: 5px;
}

#slider4 .slide-text .gggi_btn img,
#slider7 .slide-text .gggi_btn img,
#slider8 .slide-text .gggi_btn img {
    transform: rotate(180deg);
    margin-bottom: 7px;
    margin-left: 5px;
}

#slider1 .slide-text .gggi_btn img, #slider3 .slide-text .gggi_btn img  {
    margin-bottom: 7px !important;
}

.slide-icons {
    background-color: var(--dark-green);
    cursor: pointer;
    width: 55px;
    padding-top: 4px;
    padding-bottom: 6px;
    position: absolute;
    padding-left: 7px;
    top: 0px;
    right: 0px; 
}

.slider-btn-div {
    width: 100%;
    position: absolute;
    bottom: 40px;
    height: 20px;
    left: 0px;
}


.sentence::-webkit-scrollbar {
    width: 5px;
}

.slide-text::-webkit-scrollbar, 
.slide-text1::-webkit-scrollbar,
.slide-text2::-webkit-scrollbar,
.slide-text3::-webkit-scrollbar,
.slide-text::-webkit-scrollbar{
    width: 0px;
}
   
.slide-text1::-webkit-scrollbar-track, 
.slide-text2::-webkit-scrollbar-track, 
.slide-text3::-webkit-scrollbar-track, 
.slide-text::-webkit-scrollbar-track, 
.sentence::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
   
.slide-text1::-webkit-scrollbar-thumb, 
.slide-text2::-webkit-scrollbar-thumb, 
.slide-text3::-webkit-scrollbar-thumb, 
.slide-text::-webkit-scrollbar-thumb, 
.sentence::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.slide-text {
    overflow: auto !important;
    height: 18vh !important;
}

@media screen and (min-width: 1400px) {
    .map-img {
        max-width: inherit !important;
        height: 67vh !important;
    } 
}

@media screen and (max-width: 1368px) {
    #slider1 .slide-text, #slider3 .slide-text, #slider5 .slide-text3, #slider7 .slide-text {
        font-size: 0.8rem !important;
    }

    #slider2 .slide-text1, #slider6 .slide-text1{
        font-size: 1.1rem !important;
    }

    #slider2 .slide-text2, #slider6 .slide-text2 {
        font-size: 1.1rem !important;
    }

    #slider5 .slide-text1, #slider5 .slide-text1  {
        font-size: 0.9rem;
    }

    #slider4 .slide-title, #slider7 .slide-title {
        font-size: 1.2rem !important;
    }
}

@media screen and (max-width: 1024px) {

    .section1-title,  .section3-text, .section6-text {
        font-size: 40px;
    }

    .section5-text {
        font-size: 25px;
    }

    .section1-title {
        top: 20px;
        left: inherit;
        left: calc(50vw - 70px) !important;
    }

    .section3-text {
        top: 20px;
        left: inherit;
        left: calc(50vw - 143.5px) !important;
    }

    .section5-text {
        top: 20px;
        left: inherit;
        left: calc(50vw - 240px) !important;
    }

    .section6-text {
        top: 20px;
        left: inherit;
        left: calc(50vw - 200px) !important;
    }

    .section1-icons, .section3-icons, .section5-icons, .section6-icons {
        top: 105px;
        left: calc(50vw - 27.5px) !important;
    }

    .mask img {
        width: 75vw !important;
    }

    .map-img {
        max-width: 500px !important;
        height: auto !important;
        top: 5vh !important;
        left: calc(50% - 250px) !important;
    } 

    .section2-text {
        margin-top: 50vh !important;
        left: calc(50% - 213px);
    }

    #section2 .gggi_btn {
        right: 20px !important
    }

    #slider1.splide, #slider3.splide {
        width: 60vw;
    }

    #slider2.splide, #slider6.splide {
        width: 80vw;
    }

    #slider4.splide, #slider7.splide {
        width: 100vw;
    }
}

@media screen and (max-width: 768px) {

    #slider6 .col-7 {
        margin: inherit;
    }

    #banner .banner img {
        margin: auto;
        max-width: 50vw;
        height: auto;
    }

    .map-img {
        max-width: 90% !important;
        height: auto !important;
        top: 5vh !important;
        left: 5% !important;
    } 

    #slider1.splide, #slider3.splide {
        width: 95vw;
        left: 2.5vw;
    }

    #slider5.splide {
        width: 95vw;
        left: 2.5vw;
        right: 0px
    }

    #slider2.splide, #slider6.splide {
        width: 95vw;
        margin-right: 2.5vw;
        right: 0px
    }

    #slider4.splide, #slider7.splide {
        width: 97.5vw;
        right: 2.5vw;
    }
}

@media screen and (max-width: 600px) {
    .map {
        margin-top: 12vh !important;
    }

    .section2-text {
        margin-top: 45vh !important;
        left: calc(50% - 156px);
    }

    .section7-text {
        left: calc(25vw - 85px) !important;
    }

    .section7-icons {
        left: calc(25vw - 7.5px);
    }

    .section2-text .title {
        font-size: 30px !important;
        margin-top: -15px !important;
    }

    .section2-text .text {
        font-size: 16px !important;
    }

    #section2 .gggi_btn {
        bottom: 40px !important;
    }
    #slider1.splide, #slider3.splide {
        width: 95vw;
    }

    #slider1 .splide__slide,
    #slider2 .splide__slide,
    #slider3 .splide__slide,
    #slider4 .splide__slide,
    #slider5 .splide__slide,
    #slider6 .splide__slide,
    #slider7 .splide__slide {
        height: 70vh;
        margin-top: 30px;
    }

    #slider1 .slide-title, #slider3 .slide-title, #slider4 .slide-title, #slider5 .slide-title, #slider7 .slide-title {
        font-size: 25px !important;
    }

    #slider1 .slide-text, #slider3 .slide-text, #slider5 .slide-text {
        font-size: 0.8rem !important;
    }

    #slider2 .slide-text1, #slider6 .slide-text1, #slider2 .slide-text2, #slider6 .slide-text2 {
        padding-right: 30px;
        font-size: 0.8rem !important;
    }

    #slider2-track .col-7 {
        margin: 0px !important;
        padding: 0px !important;
    }

    #slider2-track .col-5 {
        margin-right: 0px !important;
        padding-right: 0px !important;
    }
    
    #slider1 .slide-title, #slider3 .slide-title, #slider4 .slide-title, #slider5 .slide-title, #slider7 .slide-title {
        font-size: 1rem !important;
    }

    #slider4 .slide-text, #slider7 .slide-text {
        font-size: 0.8rem !important;
    }
}