html {
    font-size: 62.5%;
}

body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

.resize-animation-stopper * {
animation: none !important;
transition: none !important;
}
  
a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style-type: none;
}

      /* 
/*      Opening Section      */ 
/*      Opening Section      */
/* Regular Section */ /* Regular Section */
/* Regular Section */


.logo_wrapper {
    margin-left: 8vw;
}

.company_logo, .logo_name_container {
    height: 3.8rem;
    margin-left: 3.6rem;
    display: block;
}

.logo_button {
    width: 1rem;
}

.logo_name_container {
    display: flex;
    flex-direction: row;
    justify-content: center;    
}


.nav-container {
    display: flex;
    flex-direction: row;
}

.logo-chi-tablet, .about-us-tablet {
    display: none;
}

.Goodwill-chi, .logo-chi-standard {
    font-weight: 550;
}

.opening-pictures {
    background-color: transparent;
    height: 30vh;
    background-position: bottom;
    background-size: cover;
    z-index: 6;
}




@media only screen and (max-width: 600px){
    .opening_section {
        height: 100vh;
    }
}



.opening-mobile {
    display: none;
}

.opening-bottom-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 8vh;
    background-color: rgba(241,241,241,255);
}

.opening-bottom-part {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -3vw;
    margin-top: -2vh;
}

.logo-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}


.opening-bottom-part {
    margin-top: -2vh;
    margin-left: -3vw;
}

.logo-chi-standard, .about-us-standard {
    display: none;
}

.logo-chi-tablet, .about-us-tablet {
    display: block;
}

.logo_wrapper {
    margin-left: 1.6rem;
    margin-top: .6rem;
}

.company_logo, .logo_name_container {
    height: 3.6rem;
    display: block;
}

.company_logo {
    padding-left: 2rem;
}

.logo_name_container {
    display: flex;
    flex-direction: row;
    justify-content: center;    
}

.logo_chi {
    font-family: Arial, Helvetica, sans-serif;
    color: yellow;
    font-weight: 550;
    margin-left: -.5rem;
    font-size: 2rem;
    margin-top: .4rem;
    width: 50rem;
}

.navbar {
    background-color: rgba(0,121,2,255);
    height: 13vh;
    min-height: 9rem;
    display: flex;
    flex-direction: row;
}

.opening-bottom-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 8vh;
    background-color: white;
}


.logo-year-text {
    font-size: 1.5rem;
    color: yellow;
    margin-top: 1.5rem;
} 



.Goodwill-chi {
    display: none;
}


@media only screen and (max-width: 599px){
    .logo-year-text {
        display: inline;
    }

    .Goodwill-chi {
        display: inline;
    }

    .opening-mobile {
        display: block;
    }

    .opening-standard {
        display: none;
    }

    .logo-chi-standard, .about-us-standard {
        display: none;
    }

    .logo-chi-tablet, .about-us-tablet {
        display: block;
    }

    .logo-chi-standard, .about-us-standard {
        display: none;
    }

    .logo-chi-tablet, .about-us-tablet {
        display: block;
    }
    

    .logo_wrapper {
        margin-left: -1.6rem;
    }
    
    
    .company_logo, .logo_name_container {
        height: 3.2rem;
        display: block;
    }

    .company_logo {
        padding-left: .3rem;
    }
    
    .logo_name_container {
        display: flex;
        flex-direction: row;
        justify-content: center;    
    }
    
    .logo_chi {
        font-family: Arial, Helvetica, sans-serif;
        color: yellow;
        font-weight: 550;
        margin-left: -1rem;
        font-size: 1.5rem;
        margin-top: .4rem;
        width: 96vw;
    }
    
    
    .opening-bottom-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 8vh;
        background-color: white;
    }

    .opening-bottom-part {
        margin-top: -2vh;
        padding-left: 3vw;
    }

    .logo-year-text {
        font-size: 1.2rem;
        color: yellow;
        margin-top: 1.8rem;
        margin-left: -.6rem;
    } 
}


.opening-bottom-section {
    width: 100vw;
    background-color: white;
}

.bottom-stuff {
    display: block;
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.lang-boxes {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;  
    gap: 1.6rem;
}

.lang-button {
    color: white;
    background-color: transparent;
    border: none;
    transition: .2s ease-out;
}

.lang-button:hover {
    transition: .2s ease-out;
    color: white;
    background-color: rgba(0,121,2,255);
    border-radius: .5rem;
}

.eng-button {
    padding-right: .8rem;
}

.lang-button-container {
    width: 12rem;
}

.lang-boxes {
    margin-left: -13vw;
}

.languages_container {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.Languages {
    background-color: transparent;
    position: absolute;
    margin: auto;
    bottom: 0;
    display: flex;
    height: 3.6rem;
    justify-content: space-evenly;
    padding-bottom: 6vh;
}

.lang-selection-container {
    display: none;
}


 @media only screen and (max-width: 599px){
    .lang-links {
        display: none;
    }

    .lang-selection-container {
        display: block;
        margin-left: -40vw;
    }

    .language-selection-button {
        color: white;
        background-color: transparent;
        border: none;
        font-size: 1.8rem;
        font-weight: 550;
        display: block;
        position: relative;
        transition: .2s ease-out;
        border-radius: .5rem;
    }

    .language-selection-button:hover {
        background-color: rgba(0,121,2,255);
    }

    .lang-button {
        font-size: 1.5rem;
        font-weight: bold;
    }


    .navbar-buttons-container {
        display: none;
    }

  }


.arrow {
    color: rgba(0,121,2,255);
    font-family: Arial, Helvetica, sans-serif;
    animation: floatArrow 2.5s infinite;
    font-size: 2.5rem;
    display: block;
    margin-top: -2vh;
}


@keyframes floatArrow {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(2vh);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


@media only screen and (max-width: 599px){
.arrow {
    display: none;
}
 }

 @media only screen and (min-width: 600px){
    .lang-boxes {
        gap: 1.8rem;
    }

    .lang-button {
        font-size: 1.7rem;
        font-weight: 550;
    }
    

    .lang-button:hover {
        font-size: 1.8rem;   
    }

    .eng-button {
        padding-right: 1rem;
        font-weight: bold;
    }

    .opening-bottom-section {
        width: 100vw;
    }
 }

 @media only screen and (max-width:899px) and (min-width: 600px) {
    .bottom-stuff {
        gap: 16vw;
    }

    .lang-boxes {
        margin-left: -16vw;
        gap: .3rem;
    }

    .arrow {
        font-size: 2.8rem;
    }
    
  }


  @media only screen and (max-width:1300px) and (min-width: 900px) {
    .bottom-stuff {
        gap: 24vw;
    }

    .lang-boxes {
        margin-left: -13vw;
    }

    .arrow {
        font-size: 2.8rem;
    }


  }

  @media only screen and (max-width: 1600px) and (min-width: 1301px) {
    .lang-boxes {
        gap: 4rem;
    }

    .eng-button {
        font-weight: bolder;
    }

    .lang-button {
        font-size: 2.1rem;
        font-weight: 550;
    }
    

    .lang-button:hover {
        font-size: 2.1em;   
    }
    
    .bottom-stuff {
        gap: 29vw;
    }

    .lang-boxes {
        margin-left: -16vw;
    }


    
    .arrow {
        font-size: 3.6rem;
    }

  }

  @media only screen and (min-width: 1601px){
    .lang-boxes {
        gap: 4rem;
    }

    .eng-button {
        font-weight: bolder;
    }

    .lang-button {
        font-size: 2.1rem;
        font-weight: 550;
    }
    

    .lang-button:hover {
        font-size: 2.1em;   
    }
    
    .bottom-stuff {
        gap: 29vw;
    }

    .lang-boxes {
        margin-left: -20vw;
    }

    .arrow {
        font-size: 3.2rem;
    }
   }


   @media only screen and (min-width: 1350px){
    .logo_wrapper {
        margin-left: 8vw;
    }

  }



.opening_video {
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
 }



.Languages {
    width: 26rem;
    bottom: 0;
    height: 3.6rem;
    margin-left: .4rem;
}

.language-boxes {
    font-size: 1.18rem;

}


/*      Sections Padding Separation      */ 
/*      Sections Padding Separation      */ 
/*      Sections Padding Separation      */ 

.service-cards-section {
    padding-bottom: 16vh;
}



.plastic-floor-section {
    padding-bottom: 12vh;
}

.school-hall-section {
    padding-bottom: 13vh;
}

.school-corridor-cleaning-section {
    padding-bottom: 10vh;
}

.sports-field-section {
    padding-bottom: 13vh;
}



.trash-bins-car-park-section {
    padding-bottom: 16vh;
}

@media only screen and (max-width: 600px){
    .trash-bins-car-park-section {
        padding-bottom: 12vh;
    } 
}

.insurance-section {
    padding-top: 8vh;
    padding-bottom: 10vh;
}



.belief-section {
    padding-bottom: 13vh;
}

.procedure-steps-section {
    padding-bottom: 16vh;
}

.contact-info-section {
    padding-bottom: 15vh;
}


@media (max-width: 900px) {   
    .service-cards-section {
        padding-bottom: 4vh;
    } 

    .green-arrow-GrandContainer {
        display: block;
        margin-bottom: 8vh;
    }
}
/*      Sections Padding Separation      */ 
/*      Sections Padding Separation      */ 












/*      Common Services Section      */ 
/*      Common Services Section      */
.common_services_section {
    padding-top: -3vh; 
    background-color: #f5f1e6;
}

body{
    background-color: #f5f1e6;
}

.commonIntro {
    color: black;
    padding-top: 1rem;
    text-align: center;
}

.commonIntro_Detail_container {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.commonIntro_Detail {
    text-align: center;
    padding-bottom: 8vh;
    color: black;
}


.client_kinds {
    font-weight: bold;
}

.common_detail_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.chi_fullstop {
    display: inline;
}

.our_clients {
    padding-top: 3vh;
    color: black;
}

.line1 {
    color: rgba(0,121,2,255);
}

.Eng-common-intro {
    color: rgb(117, 117, 117);
}

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

.eng-pri-sec-schools-br {
    display: none;
}

.commonIntro {
    font-size: 3.2rem;
    font-weight: 550;
}

.Eng-common-intro {
    text-align: left;
}

.commonIntro_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1rem;
}

.commonIntro_container_Eng {
    width: 80vw;
    margin-left: 6vw;
}


.commonIntro_Detail {
    font-size: 1.7rem;
    text-align: center;
    width: 92vw;
}


.common-detail2-Eng {
    width: 100vw;
}

.our-clients-Eng {
    padding-top: 5vh;
}


.common-detail2-Eng {
    padding-top: 4vh;
    padding-bottom: 10vh;
}

.our_clients {
    font-size: 1.8rem;
    text-align: center;
}

.chi_fullstop {
    display: none;
}

.Eng-common-intro, .our-clients-Eng, .common-detail2-Eng {
    text-align: left;
}

}



@media only screen and (max-width:899px) and (min-width: 600px) { 
    .commonIntro {
        font-size: 4rem;
        font-weight: 550;
    }
    
    .commonIntro_container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1rem;
    }
    
    .commonIntro_Detail {
        font-size: 1.9rem;
        text-align: center;
        width: 45rem;
    }

    .our-clients-Eng {
        padding-top: 6vh;
    }

    .common-detail2-Eng {
        padding-top: 5vh;
        padding-bottom: 10vh;
    }
    
    
    .our_clients {
        font-size: 1.9rem;
        text-align: center;
    }

    
}

@media only screen and (max-width:1450px) and (min-width: 900px) {
    .commonIntro {
        font-size: 4.1rem;
        font-weight: 550;
        margin-left: -1vw;
    }

    
    .commonIntro_container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1rem;
    }
    
    .commonIntro_Detail {
        font-size: 2.1rem;
        text-align: center;
        width: 72rem;
    }

    .our-clients-Eng {
        padding-top: 6vh;
    }

    .common-detail2-Eng {
        padding-top: 5vh;
        padding-bottom: 10vh;
    }
    
    .our_clients {
        font-size: 2.1rem;
        text-align: center;
    }
}

@media only screen and (min-width:1451px) {
    .commonIntro {
        font-size: 4.3rem;
        font-weight: 550;
    }
    
    .commonIntro_container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1.6rem;
    }


    .our-clients-Eng {
        padding-top: 5vh;
    }

    .common-detail2-Eng {
        padding-top: 4vh;
        padding-bottom: 10vh;
    }
    
    .commonIntro_Detail {
        font-size: 2.4rem;
        text-align: center;
        width: 76rem;
    }
    
    .our_clients {
        font-size: 2.5rem;
        text-align: center;
    }
 }





  



 @media only screen and (min-width: 600px){
    .main-content {
        width: 90vw;
        margin: 0 auto;
    }
  }
  
  @media only screen and (max-width: 600px){
    .main-content {
        width: 98vw;
        margin: 0 auto;
    }
  }
/* Centered content wrapper */




.service-card-individual-centered { 
    display: none;
}

/* Grid container: 3 columns above 800px, 2 columns below */
.service-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8vh 1rem;
    justify-items: center;
}

/* Flatten original row wrappers */
.service-cards-rows {
    display: contents;
}



/* Make each card image a perfect square filling its cell */
.service-card-individual {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0rem !important;
    filter: brightness(105%);
    border: gray .1px solid;
}

.service-card-name-container {
    background-color: transparent;
    color: rgba(0,121,2,255);
}

.service-card-name {
    font-size: 2.5vw;
    margin-left: 0vw;
    font-weight: 550;
}

.floor-name {
    font-size: 3vw;
}

.service-card-individual {
    max-width: 57rem;
}

.Eng-mid-card-br, .Eng-phone-card-br {
    display: none;
}


/* Responsive breakpoint: 2 cards per row under 800px */
@media (max-width: 900px) {
.Eng-mid-card-br {
    display: inline;
}

.large-br {
    display: none;
}

.service-cards-container {
    grid-template-columns: repeat(2, 1fr);
}

.service-card-name {
    font-size: 6vw;
    margin-left: 2vw;
    font-weight: 550;
    margin-top: .6rem;
}

.Eng-card-names {
    font-weight: 550;
}


}


@media (max-width: 600px) {
    .Eng-phone-card-br {
        display: inline;
    }

    .Eng-card-names {
        font-weight: 600;
    }
}    
@media only screen and (max-width: 900px) and (min-width: 600px) {
    .service-card-name {
        font-size: 4vw;
        margin-left: 2vw;
        font-weight: 550;
        margin-top: .6rem;
    }

    .Eng-card-names {
        font-size: 4vw;
        margin-left: 2vw;
    }

    .Eng-mid-card-br {
        display: inline;
    }


    
    .Eng-card-names {
        font-weight: bold;
    }
}

@media only screen and (max-width: 1100px) and (min-width: 901px) {
    .service-card-name {
        font-size: 3.2vw;
        margin-left: 2vw;
        font-weight: 550;
        margin-top: .6rem;
    }

    .Eng-card-names {
        font-size: 2.8vw;
        margin-left: 0vw;
    }

    .Eng-card-names {
        font-weight: 550;
    }
    
 }

.classroom-name {
    color: rgba(0,121,2,255);
}

.grn {
    color: rgba(0,121,2,255);
}

@media only screen and (max-width: 900px) and (min-width: 600px) {
.grn-mid {
    color: rgba(0,121,2,255);
}
}

.classroom-grn-name {
    color: black;
}



.carpark-three-pic {
    padding-top: 3vh;
}

.rectangular-pic {
    width: 90vw;
    filter: brightness(100%);
}


.more-services-title {
    font-size: 4rem;
    font-weight: 550;   
    padding-bottom: 2.6rem;
    margin-left: 4.8vw;
}

.plastic-floor-title {
    font-size: 4.5vw;
    font-weight: 550;   
    margin-top: -14.5vw;
    z-index: 10;
    color: white;
    position: relative;
    margin-left: 6vw;
}



.tablet-rectangular-pic, .mobile-rectangular-pic {
    display: none;
}


.plastic-tablet-mobile-br {
    display: none;
}


.service-card-ten {
    display: none;
}

.card-tenth-name {
    color: white;
}


@media only screen and (max-width: 600px){
    .service-card-ten {
        display: block;
    }
    
    .mobile-rectangular-pic, .plastic-tablet-mobile-br {
        display: block;
    }

    .tablet-rectangular-pic, .standard-rectangular-pic {
        display: none;
    }

    .plastic-floor-title {
        font-size: 7vw;
        font-weight: 550;   
        margin-top: -32vw;
        margin-left: 6vw;
    }

    .Eng-p-titles {
        padding-top: 16vh;
        padding-bottom: 1vh;
        color: black;
        font-size: 3vw;
        margin-left: 2vw;
        display: block;
    }

    
    .plastic-floor-cleaning-title {
        margin-top: -25vw;
    }

    .Eng-plastic-floor-cleaning-title {
        display: none;
    }
    


    .card-tenth-name {
        margin-top: -39vw;
        margin-left: 5vw;
        z-index: 20;
        position: absolute;
        color: black;
    }

    .Eng-card-tenth-name {
        margin-top: -43vw;
    }

    .transparent-image {
        opacity: 0;
    }

    .transparent-image-container {
        border: rgb(118, 118, 118) 1px solid;
    }

    .sports-field-title {
        font-size: 4rem;
    }
}



.actual-arrow {
    display: none;
}

.green-arrow-GrandContainer {
    display: none;
}

@media (max-width: 900px) {    
    .more-services-title-container {
        display: none;
    }


    .actual-arrow {
        display: block;
        width: 60vw;
        margin-left: 16vw;
        margin-top: -22vh;
    }
    
    .arrow22 {
        font-size: 13vw;
        font-weight: 150;
        margin-left: 10vw;
        animation: floatArrow2 1.5s infinite;

    }


    .green-arrow-GrandContainer {
        display: block;
        margin-bottom: 8vh;
    }

    .green-arrow-container {
        display: flex;
        justify-content: right;
    }

    .green-arrow-svg {
        width: 10vw;
        margin-right: 12vw;
    }
}    


@media only screen and (max-width: 900px) and (min-width: 601px) {
    .service-card-ten {
        display: block;
    }

    .standard-rectangular-pic {
        display: none;
    }

    .tablet-rectangular-pic, .plastic-tablet-mobile-br {
        display: block
    }

    .plastic-floor-title {
        font-size: 6vw;
        font-weight: 550;   
        margin-top: -22vw;
        margin-left: 6vw;
    }

    .plastic-floor-cleaning-title {
        margin-top: -22vw;
    }

    .mid-br-p-title {
        display: none;
    }
    .Eng-plastic-floor-cleaning-title {
        font-size: 4vw;
        font-weight: 550;   
        margin-top: 1vw;
        margin-left: 2vw;
        color: black;
    }

    .Eng-p-titles {
        display: none;
    }

    .card-tenth-name {
        margin-top: -34vw;
        margin-left: 2vw;
        z-index: 20;
        position: absolute;
        color: black;
    }

    .transparent-image {
        opacity: 0;
    }

    .transparent-image-container {
        border: gray .1px solid;
    }
}


@media only screen and (max-width: 1600px) and (min-width: 1200px) {
    .rectangular-element {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .rectangular-pic {
        width: 82vw;
        filter: brightness(100%);
    }
    
}

@media only screen and (min-width: 1601px){
    .rectangular-element {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .rectangular-pic {
        width: 70vw;
        filter: brightness(100%);
    }

    .plastic-floor-title {
        font-size: 4vw;
        font-weight: 550;   
        margin-top: -13vw;
        z-index: 10;
        color: white;
        position: relative;
        margin-left: 13vw;
    }


    .more-services-title {
        font-size: 4.5rem;
        font-weight: 550;   
        padding-bottom: 3rem;
        margin-left: 12vw;
    }
}


.school-corridor-cleaning-title {
    font-size: 4.5rem;
    font-weight: 550;  
}


.vertical-rectangular-elements, .square-elements {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
}

.vertical-rectangular-pic {
    width: 44.5vw;
    border: solid rgba(0,121,2,255) 1px;
}

@media only screen and (max-width: 600px){
    .vertical-rectangular-elements {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5vw;
    }

    .vertical-rectangular-pic {
        width: 90vw;
    }

    .school-corridor-cleaning-title {
        font-size: 3.8rem;
        font-weight: 550;  
    }
 }

@media only screen and (max-width: 860px) and (min-width: 601px) {
    .vertical-rectangular-elements {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2vw;
    }

    .vertical-rectangular-pic {
        width: 90vw;
    }
}



@media only screen and (max-width: 1199px) and (min-width: 1000px) {
    .vertical-rectangular-pic {
        width: 38vw;
    }

    .vertical-rectangular-elements {
        display: flex;
        flex-direction: row;
        justify-content: left;
        gap: 1vw;
    }
    
    .vertical-rectangular-elements, .school-corridor-cleaning-title {
        margin-left: 6vw;
    }
}



@media only screen and (max-width: 1600px) and (min-width: 1200px) {
    .vertical-rectangular-pic {
        width: 39vw;
    }

    .vertical-rectangular-elements {
        display: flex;
        flex-direction: row;
        justify-content: left;
        gap: .2vw;
    }
    
    .vertical-rectangular-elements, .school-corridor-cleaning-title {
        margin-left: 6.2vw;
    }

 }



 @media only screen and (min-width: 1601px){
    .vertical-rectangular-pic {
        width: 34.95vw;
        border: solid grey .2px ;
    }

    .vertical-rectangular-elements {
        display: flex;
        flex-direction: row;
        justify-content: left;
        gap: .1vw;
    }
    

    .vertical-rectangular-elements, .school-corridor-cleaning-title {
        margin-left: 10vw;
    }


    .school-corridor-cleaning-title {
        font-size: 5rem;
        margin-left: 13vw;
        padding-bottom: 1rem;
    }
  }




.square-elements {
    gap: .4vw;
}

.square-pics {
    width: 44.8vw;
    filter: brightness(86%);
}


.square-element-titles-container {
    display: flex;
    flex-direction: row;
    gap: 8.5vw;
}

.square-title1 {
    margin-left: 2vw;
    color: white;
}


.square-title2 {
    color: white;
    filter: brightness(120%);
}


.square-element-titles {
    font-size: 3.8vw;
    font-weight: 550;
    margin-top: -12vw;
    filter: brightness(100%);
}


.tablet-square-pics {
    display: none;
}


@media only screen and (max-width: 600px){
    .square-elements {
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }
    
    .square-pics {
        width: 90vw;
    }
    
    .standard-square-pics {
        display: block;
    }
    
    .tablet-square-pics {
        display: none;
    }
    
    
    .square-element-titles-container {
        display: flex;
        flex-direction: column;
        gap: 86vw;
    }
    

    .square-title1 {
        color: white;
        margin-left: 0vw;
        margin-top: -105vw;
    }
    
    
    .square-title2 {
        color: white;
        filter: brightness(120%);
    }
    
    
    .square-element-titles {
        font-size: 7vw;
        font-weight: bold;
        filter: brightness(100%);
        margin-left: 4.5vw;
    }
}


@media only screen and (max-width: 860px) and (min-width: 601px) {
    .square-elements {
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }

    .square-pics {
        width: 90vw;
    }

    .standard-square-pics {
        display: none;
    }

    .tablet-square-pics {
        display: block;
    }

    .square-element-titles-container {
        display: flex;
        flex-direction: column;
        gap: 65vw;
    }

    .square-title1 {
        color: white;
        margin-left: 0vw;
        margin-top: -84vw;
    }


    .square-title2 {
        color: white;
        filter: brightness(120%);
    }


    .square-element-titles {
        font-size: 5.6vw;
        font-weight: 550;
        filter: brightness(100%);
        margin-left: 5vw;
    }

}

@media only screen and (max-width: 1600px) and (min-width: 1200px) {
    .square-elements {
        gap: .2vw;
    }
    
    .square-pics {
        width: 40.9vw;
        filter: brightness(86%);
    }
    
    
    .square-element-titles-container {
        display: flex;
        flex-direction: row;
        gap: 8.5vw;
    }
    
    .square-title1 {
        margin-left: 8vw;
        color: white;
    }
    
    
    .square-title2 {
        color: white;
        filter: brightness(120%);
    }
    
    
    .square-element-titles {
        font-size: 3vw;
        font-weight: 550;
        margin-top: -10vw;
        filter: brightness(100%);
    }
 }


 @media only screen and (min-width: 1601px){
    .square-elements {
        gap: .2vw;
    }
    
    .square-pics {
        width: 34.9vw;
        filter: brightness(86%);
    }
    
    
    .square-element-titles-container {
        display: flex;
        flex-direction: row;
        gap: 8.5vw;
    }
    
    .square-title1 {
        margin-left: 11vw;
        color: white;
    }
    
    
    .square-title2 {
        color: white;
        filter: brightness(120%);
    }
    
    
    .square-element-titles {
        font-size: 2.8vw;
        font-weight: 550;
        margin-top: -9vw;
        filter: brightness(100%);
    }
 }



 
img {
    border-radius: .3rem;
}

.car-park-title {
    font-size: 3.3rem;
    font-weight: 550;   
    margin-left: 1vw;
    padding-bottom: 1rem;
}

.car-park-title-2 {
    font-size: 3.3rem;
    font-weight: 550;   
    margin-left: 1vw;
    margin-bottom: -2rem;
    margin-top: 2rem;
}

.car-park-pics {
    width: 90vw;
    border: none;
}

.tablet-car-park-pics, .mobile-car-park-pics {
    display: none;
}

.carpark-tablet-br {
    display: none;
}


 

@media only screen and (max-width: 600px){
    .car-park-title {
        font-size: 2.9rem;
        font-weight: 550;   
        padding-bottom: 1rem;
        margin-left: 1vw;
    }

    .car-park-title-2 {
        font-size: 2.9rem;
        font-weight: 550;   
        margin-left: 1vw;
        margin-top: 1rem;
    }
 }

@media only screen and (max-width: 600px){
    .mobile-car-park-pics {
        display: block;
    }

    .standard-car-park-pics {
        display: none;
    }



    .car-park-reference-text {
        font-size: 1.8rem;
        font-weight: 550;  
        margin-left: 9vw; 
        margin-top: -16vw;
    }

    
    .carpark-tablet-br {
        display: block;
    }
}



@media only screen and (max-width: 860px) and (min-width: 601px) {
    .standard-car-park-pics {
        display: none;
    }

    .tablet-car-park-pics {
        display: block;
    }

    .rectangular-pic {
        width: 90vw;
    }

    .carpark-tablet-br {
        display: block;
    }
}



@media only screen and (max-width: 900px) and (min-width: 601px) {
    .car-park-title {
        font-size: 3.1rem;
        font-weight: 550;   
        padding-bottom: .5rem;
        margin-left: 1vw;
    }
 }



@media only screen and (min-width: 1200px){ 
    .car-park-title {
        font-size: 3.6rem;
        font-weight: 550;   
        padding-bottom: .5rem;
        margin-left: 4.5vw;
    }

    .car-park-title-2 {
        font-size: 3.6rem;
        font-weight: 550;   
        margin-left: 4.5vw;
    }
    
}

@media only screen and (min-width: 1601px){ 
    .car-park-title {
        font-size: 4.3rem;
        margin-left: 11vw;
    }

    .car-park-title-2 {
        font-size: 4.3rem;
        margin-left: 11vw;
    }
    
}



@media only screen and (max-width: 600px){
    .insurance-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 83vw;
    }
    
    .insurance-title {
        font-size: 2.5rem;
        font-weight: 550;
    }

    
    .insurance-detail-container {
        padding-top: 8vh;
    }
    
    .insurance-detail-second {
        padding-top: 6vh;
    }

    .insurance-detail {
        font-size: 1.7rem;
        font-weight: 350;
        width: 78vw;
        color: rgb(118, 118, 118);
    }
 }




@media only screen and (max-width: 900px) and (min-width: 601px) {
    .insurance-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 88vw;
    }
    
    .insurance-title {
        font-size: 2.8rem;
        font-weight: 550;
    }

    .insurance-detail-container {
        padding-top: 5vh;
    }
    
    .insurance-detail-second {
        padding-top: 6vh;
    }

    .insurance-detail {
        font-size: 1.8rem;
        font-weight: 350;
        width: 63vw;
        color: rgb(118, 118, 118);
    }

}



@media only screen and (max-width: 1350px) and (min-width: 901px) {
    .insurance-section {
        padding-top: 6vh;
        padding-bottom: 10vh;
    }
    
    .insurance-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 86vw;
    }
    
    .insurance-title {
        font-size: 3.2rem;
        font-weight: 550;
    }

    .insurance-detail-container {
        padding-top: 5vh;
    }
    
    .insurance-detail-second {
        padding-top: 6vh;
    }

    .insurance-detail {
        font-size: 2rem;
        font-weight: 350;
        width: 50vw;
        color: rgb(118, 118, 118);
    }
 }





 @media only screen and (min-width: 1351px){
    .insurance-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 90vw;
    }
    
    .insurance-title {
        font-size: 3.6rem;
        font-weight: 550;
    }

    .insurance-detail-container {
        padding-top: 5vh;
    }
    
    .insurance-detail-second {
        padding-top: 6vh;
    }

    .insurance-detail {
        font-size: 2.2rem;
        font-weight: 350;
        width: 45vw;
        color: rgb(118, 118, 118);
    }
 }

 
 @media only screen and (min-width: 2000px){
    .insurance-section {
        display: flex;
        flex-direction: row;
        justify-content: left;
        margin-left: 33rem;
        width: 70vw;
        max-width: 150rem;
    }

    .insurance-detail {
        font-size: 2.8rem;
        font-weight: 350;
        width: 90rem;
    }
 }


/* Belief, Steps, Contact, Mobile Phone Screen */ 
/* Belief, Steps, Contact, Mobile Phone Screen */ 


 

 @media only screen and (max-width: 600px){
    .belief-content-container {
        display: flex;
        flex-direction: column;
        width: 90vw;
        gap: 3.6vw;
    }
 }


@media only screen and (max-width: 600px){
    .belief-pic {
        display: block;
        width: 90vw;
    }
    
    .belief-standard-br, .tablet-belief-pic {
        display: none;
    }

    .belief-text-content {
        width: 80vw;
    }

    .belief-title {
        font-size: 3.6rem;
        font-weight: 550;
        width: 90vw;
        margin-left: .6vw;
    }

    .belief-grn {
        color: rgba(0,121,2,255);
        font-weight: bold;
    }

    .Eng-belief {
        font-size: 2.8rem;
        font-weight: 650;
    }

    .belief-detail {
        margin-top: 2rem;
        font-size: 1.7rem;
        color: rgb(118, 118, 118);
        margin-left: 1vw;
    }
}







@media only screen and (max-width: 600px){
    .procedure-steps-section {
        display: flex;
        flex-direction: column;
        width: 90vw;
        gap: 8vw;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 12vw;
    }

    .individual-steps-container {
        width: 72vw;
        border-radius: 1.5rem;
        margin-left: 10vw;
        margin-top: 6vh;
    }

    .steps-title {
        font-size: 2.3rem;
    }

    .steps-detail {
        font-size: 1.6rem;
        color: rgb(118, 118, 118);
    }

}



@media only screen and (max-width: 600px){
    .contact-logo-pic {
        width: 13vw;
        margin-top: -2vh;
        margin-right: 5vw;
    }

    
    .WhatsApp-icon {
        margin-top: -1vh;
        width: 15vw;
        margin-right: 2.5vw;
    }

    .contact-main-content {
        margin-left: 6vw;
        display: inline-block;
    }

    .contact-main-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 24.5vw;
        padding-top: 12vh;
    }

    .contact_pic {
        display: block;
        width: 90vw;
    }

    .individual-contact-main-info-container {
        width: 73vw;
        border-radius: 1.5rem;
        margin-left: 10vw;
    }

    .contact-titles {
        font-size: 2.3rem;
    }

    .contact-details {
        font-size: 1.6rem;
    }

    .contact1-detail {
        margin-left: 16vw;
    }
}





/* Belief, Steps, Contact, Tablet Screen */ 
/* Belief, Steps, Contact, Tablet Screen */ 




@media only screen and (max-width: 900px) and (min-width: 601px) {
    .belief-content-container {
        display: flex;
        flex-direction: column;
        width: 90vw;
        gap: 3.6vw;
    }

    
    .belief-pic {
        display: block;
        width: 90vw;
    }

    .belief-standard-br {
        display: none;
    }

    .belief-text-content {
        width: 80vw;
    }

    .belief-title {
        font-size: 3.9rem;
        font-weight: 550;
        color: rgba(0,121,2,255);
        width: 90vw;
        margin-left: 5vw;
    }

    .belief-detail {
        margin-top: 2rem;
        font-size: 1.8rem;
        color: rgb(118, 118, 118);
        margin-left: 10vw;
    }

 }


@media only screen and (max-width: 900px) and (min-width: 601px) {
    .procedure-steps-section {
        display: flex;
        flex-direction: column;
        width: 90vw;
        gap: 8vw;
    }

    .steps-pic {
        display: block;
        width: 90vw;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 6vw;
    }

    .individual-steps-container {
        width: 65vw;
        border-radius: 1.5rem;
        margin-left: 10vw;
        margin-top: 5vh;
    }

    .steps-title {
        font-size: 2.3rem;
    }

    .steps-detail {
        font-size: 1.8rem;
        color: rgb(118, 118, 118);
    }

 }



@media only screen and (max-width: 900px) and (min-width: 601px) {
    .contact-logo-pic {
        width: 5.5rem;
        margin-top: -2rem;
        margin-right: 4rem;
    }


    .WhatsApp-icon {
        margin-top: -1rem;
        width: 7.5rem;
        margin-right: 2rem;
        margin-left: -.6rem;
    }

    .contact-main-content {
        margin-left: 6rem;
        display: inline-block;
    }

    .contact-main-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 12vw;
        padding-top: 16vh;
    }

    .contact_pic {
        display: block;
        width: 90vw;
    }

    .individual-contact-main-info-container {
        width: 65vw;
        border-radius: 1.5rem;
        margin-left: 10vw;
    }

    .contact-titles {
        font-size: 2.3rem;
    }

    .contact-details {
        font-size: 1.7rem;
    }

    .contact-sentence {
        font-weight: 350;
        margin-left: 6rem;
        padding-top: 3vh;
    }

 }


 .horizontal-lines {
    border: none;
    height: .1rem;
    background-color: black;  
}



/* Belief, Steps, Contact, Normal Standard Screen */ 
/* Belief, Steps, Contact, Normal Standard Screen */ 

 @media only screen and (max-width: 1350px) and (min-width: 901px) {
    .belief-content-container, .procedure-steps-section, .contact-info-container {
        display: flex;
        flex-direction: row;
        width: 90vw;
        gap: 3.6vw;
    }

    .belief-pic, .belief-standard-br {
        width: 43vw;
        min-width: 48rem;
    }

    .belief-text-content {
        width: 30vw;
        margin-top: 10vw;
    }

    .belief-title {
        font-size: 3.2rem;
        font-weight: 300;
        color: rgba(0,121,2,255);
        width: 40vw;
    }


    .Eng-belief {
        font-size: 4.5rem;
        font-weight: 550;
    }

    .belief-detail {
        font-size: 1.7rem;
        color: rgb(118, 118, 118);
        margin-top: 6vw;
        width: 26vw;
    }

}



 @media only screen and (max-width: 1350px) and (min-width: 901px) {
    .procedure-steps-section, .contact-info-container {
        display: flex;
        flex-direction: row;
        width: 90vw;
        gap: 3.6vw;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 5vw;
    }

    .individual-steps-container {
        width: 38vw;
        border-radius: 1.5rem;
    }

    .steps-title {
        font-size: 2.3rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .steps-detail {
        font-size: 1.7rem;
        color: rgb(118, 118, 118);
    }



    .steps-pic {
        width: 43vw;
        min-width: 48rem;
    }


}



 @media only screen and (max-width: 1350px) and (min-width: 901px) {

    .contact-logo-pic {
        width: 5rem;
        margin-top: -2rem;
        margin-right: 2rem;
    }

    .WhatsApp-icon {
        margin-top: -1rem;
        width: 7rem;
        margin-right: .5rem;
        margin-left: -.6rem;
    }

    .contact-main-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 6vw;
        padding-top: 1.6rem;
    }



    .individual-contact-main-info-container {
        width: 30vw;
    }

    .contact-titles {
        font-size: 2.3rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .contact-details {
        font-size: 1.7rem;
    }

    .contact-main-content {
        margin-left: 8rem;
        display: inline-block;
    }

    .contact2-detail, .contact3-detail {
        margin-left: 3vw;
    }
    
    .contact-sentence {
        width: 36vw;
        font-weight: 350;
    }

    .contact_pic {
        width: 43vw;
        min-width: 48rem;
    }

 }


 
 /* Belief, Steps, Contact, Large Screen */ 
 /* Belief, Steps, Contact, Large Screen */ 



 


@media only screen and (min-width: 1351px){
    .procedure-steps-section, .contact-info-container {
        display: flex;
        flex-direction: row;
        width: 90vw;
        gap: 2vw;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 2vw;
    }

    .individual-steps-container {
        width: 41rem;
    }

    .steps-title {
        font-size: 2.6rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .steps-detail {
        font-size: 2rem;
        color: rgb(118, 118, 118);
        width: 41rem;
    }



    .steps-pic {
        width: 38vw;
        max-width: 68rem;
        margin-left: 7vw;
    }


 }



 @media only screen and (min-width: 1351px){
    .contact-logo-pic {
        width: 6rem;
        margin-top: -2rem;
        margin-right: 2rem;
    }

    .WhatsApp-icon {
        margin-top: -1rem;
        width: 8rem;
        margin-right: .5rem;
        margin-left: -.6rem;
    }

    .contact-main-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 5vw;
        padding-top: 3vh;
    }



    .individual-contact-main-info-container {
        width: 48rem;
    }

    .contact-titles {
        font-size: 2.3rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .contact-details {
        font-size: 1.8rem;
        width: 48rem;
    }

    .address-detail {
        width: 30rem;
    }

    .contact-main-content {
        margin-left: 8rem;
        display: inline-block;
    }

    .contact-sentence {
        font-weight: 350;
        width: 43rem;
        margin-left: 8rem;
    }

    .contact_pic {
        width: 38vw;
        max-width: 68rem;
        margin-left: 7vw;
    }


 }



 @media only screen and (max-width: 1600px) and (min-width: 1351px) {
    .belief-pic, .steps-pic, .contact_pic {
        margin-left: 4vw;
    }
 }
 













 @media only screen and (min-width: 1351px){
    .belief-content-container {
        display: flex;
        flex-direction: column;
        max-width: 171rem;
        gap: 1rem;
    }


    
    .belief-pic {
        display: block;
        width: 80vw;
        max-width: 171rem;
    }

    .belief-standard-br {
        display: none;
    }

    .belief-text-content {
        max-width: 181rem;
    }


    .belief-title {
        font-size: 4.5rem;
        font-weight: 550;
        color: rgba(0,121,2,255);
        width: 90vw;
        margin-left: 10vw;
    }

    .belief-detail {
        margin-top: 2rem;
        font-size: 1.8rem;
        color: rgb(118, 118, 118);
        margin-left: 10vw;
    }

 }




 @media only screen and (min-width: 1601px){
    .belief-pic {
        display: block;
        width: 68vw;
        max-width: 171rem;
        margin-left: 10vw;
    }

    .belief-title {
        font-size: 5rem;
        font-weight: 550;
        color: rgba(0,121,2,255);
        width: 90vw;
        margin-left: 15vw;
    }
 }

 @media only screen and (min-width: 1800px){
    .belief-pic {
        display: block;
        width: 65vw;
        max-width: 171rem;
        margin-left: 12rem;
        margin-left: 11vw;
    }

    .belief-title {
        font-size: 5rem;
        font-weight: 550;
        color: rgba(0,121,2,255);
        width: 90vw;
        margin-left: 30rem;
    }
 }

 @media only screen and (min-width: 2000px){
    .belief-pic {
        display: block;
        width: 60vw;
        max-width: 151rem;
        margin-left: 10rem;
    }

    .belief-title {
        font-size: 5rem;
        font-weight: 550;
        color: rgba(0,121,2,255);
        width: 90vw;
        margin-left: 15rem;
    }


    .procedure-steps-section, .contact-info-container {
        display: flex;
        flex-direction: row;
        width: 90vw;
        gap: 2vw;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 2vw;
    }

    .individual-steps-container {
        width: 41rem;
    }

    .steps-title {
        font-size: 2.6rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .steps-detail {
        font-size: 2rem;
        color: rgb(118, 118, 118);
        width: 41rem;
    }



    .steps-pic {
        width: 43vw;
        max-width: 68rem;
        margin-left: 7vw;
    }


 }









 @media only screen and (min-width: 2000px){

    .contact-logo-pic {
        width: 6rem;
        margin-top: -2rem;
        margin-right: 2rem;
    }

    .WhatsApp-icon {
        width: 8rem;
        margin-top: -1rem;
    }


    .contact-main-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 12rem;
        padding-top: 4.5rem;
    }



    .individual-contact-main-info-container {
        width: 48rem;
    }

    .contact-titles {
        font-size: 2.3rem;
    }


    .horizontal-lines {
        border: none;
        height: .1rem;
        background-color: black;  
    }


    .contact-details {
        font-size: 1.8rem;
        width: 48rem;
    }


    .address-detail {
        width: 38rem;
    }

    
    .contact-main-content {
        margin-left: 8rem;
        display: inline-block;
    }

    .contact-sentence {
        font-weight: 350;
        width: 43rem;
        margin-left: 8rem;
    }

    .contact_pic {
        width: 43vw;
        max-width: 68rem;
        margin-left: 7vw;
    }
 }

 

/* Disclaimers and Company Marking */ 
.bottom_section {
    display: block;
}

.bottom_container {
    padding-top: 3vh;
    padding-bottom: 5vh;
}

.disclaimer_container {
    width: 90vw;
    margin: auto;
    font-size: 1.65vw;
    color: black;
}

.marking {
    padding-top: 12vh;
    text-align: center;
    font-size: 1.65vw;
    color: black;
    font-family: 'Times New Roman', Times, serif;
}



@media only screen and (max-width: 599px) {
    .disclaimer_container {
        font-size: 1.4rem;
        width: 80vw;
        text-align: left;
        }
        
    .marking {
        font-size: 1.5rem;
        }
 }

 @media only screen and (max-width: 912px) and (min-width: 600px) {
    .disclaimer_container {
        font-size: 1.6rem;
        width: 70vw;
        text-align: left;
        }
        
    .marking {
        font-size: 1.45rem;
        }
         
 }

 @media only screen and (min-width: 913px) {
    .disclaimer_container {
        font-size: 1.7rem;
        width: 80rem;
        text-align: left;
        }
        
    .marking {
        font-size: 1.6rem;
        }
  }

  @keyframes floatArrow2 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(2vh);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}



@media only screen and (max-width: 600px){
    .steps-pic {
        display: block;
        width: 90vw;
    }

    .service-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8vh .3rem;
    }

}


.mobile-br, .Eng-p-titles {
    display: none;
}

@media only screen and (max-width: 600px){
    .rectangular-element {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .rectangular-pic {
        width: 98vw;
    }
    .belief-pic, .steps-pic, .contact_pic {
        width: 98vw;
    }

    .plastic-floor-title {
        font-size: 9vw;
        font-weight: bold;
    }

    .Eng-p-titles {
        font-size: 7vw;
        display: block;
    }

    .green-arrow-container {
        margin-bottom: 10vh;
    }

    .plastic-floor-cleaning-title {
        margin-top: -33vw;
    }

    .vertical-rectangular-pic {
        width: 98vw;
    }

    .school-corridor-cleaning-title {
        margin-left: 2vw;
    }

    .square-pics {
        width: 98vw;
    }

    .square-elements {
        gap: 4vw;
    }

    .square-title1 {
        margin-top: -130vw;
    }

    .grey-text {
        color: rgb(117, 117, 117);
    }
    
    .rubbish-br {
        display: none;
    }

    .mobile-br {
        display: inline;
    }

    .square-element-titles {
        font-size: 9vw;
    }
    
    .car-park-title, .car-park-title-2 {
        font-size: 2.6rem;
    }
    .rectangular-pic {
        width: 98vw;
    }

    .insurance-section {
        width: 88vw;
        margin-left: 4vw;
        font-size: 2.45rem;
    }

    .insurance-detail-container {
        padding-top: 3vh;
    }
    
    .insurance-detail-second {
        padding-top: 6vh;
    }

    .insurance-detail {
        font-size: 1.7rem;
        font-weight: 350;
        width: 78vw;
        color: rgb(118, 118, 118);
    }

    .belief-title {
        font-size: 2.6rem;
        width: 88vw;
        margin-left: 5vw;
    }


    .common_services_section {
        margin-top: -2.5vh;
    }
  }

  .grey-text {
    color: rgb(117, 117, 117);
}
























































  





.opening_section {
    height: 100vh;
}
  

.image_slideshow {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: visible;
}


.slideshow_buttons_container {
    position: relative;
    left: 0;
    display: flex;
    z-index: 10;
    top: 81vh;
    transition: .3s ease;
    margin-left: 4vw;
    opacity: .6;
}

.next-button {
    margin-left: .8rem;
    margin-right: 50vw;
}

.test {
    display: inline-block;
    border: none;
    outline:none;
    background: rgba(0,121,2,255);
    border: none;
    color: yellow;
    padding-top: .8rem;
    padding-bottom: .6rem;
    padding-right: 2rem;
    padding-left: 2rem;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 6vw;
    margin-right: 1vw;
    opacity: 1;
}

.mobile-language-button {
    border: none;
    outline:none;
    cursor: pointer;
    background-color: transparent;
    margin-left:  -9vw;
}

.lang-button-text {
    font-size: 1.8rem;
    color: yellow;
    font-weight: 550;
}


@media only screen and (max-width: 750px) and (min-width: 600px) {
    .next-button {
        margin-right: 40vw;
    }

    .slideshow_buttons_container {
        margin-left: 2vw;
    }
}

.slideshow_buttons_container .button-slideshow {
    background: rgba(0,121,2,255);
    border: none;
    color: yellow;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: 1.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s;
    transition: .35s ease;
}

.slideshow_buttons_container .button-slideshow:disabled {
    opacity: 0.3;
    cursor: default;
    background: rgba(0, 0, 0, 0.5);
    color: black;
}


/* Standard Screen, including iPad Pro Horizontal and iPad mini Horizontal, 
Mac Mini Full-Folded height screen size*/
@media only screen and (max-width: 1300px) and (min-width: 600px) {
    .slide {
        background-color: transparent;
        position: absolute;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.6s ease;
        height: 70vh;
        z-index: 6;
        width: 100%;
    }
    
    .slide.active {
        opacity: 1;
    }
    
    .slide.slide1 {
        background-position: top;
        background-image: url('https://palasdwadmsc.online/sports3to2.webp');
    }
    
    .slide.slide2 {
        background-image: url('https://palasdwadmsc.online/stone2386.jpg');
    }
    
    

    .slide.slide3 {
        background-position: bottom;
        background-image: url('https://palasdwadmsc.online/window-bigger-3to2.jpg');
    }

    .slide1-image-container, .normal-slide1-image-container {
        display: none;
    }

    .slideshow_buttons_container {
        top: 70.6vh;
        
    }
 }


 
 /* Normal Computer, Large Screen*/
@media only screen and (max-width: 1500px) and (min-width: 1301px) {
    .slide {
        background-color: transparent;
        position: absolute;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.6s ease;
        height: 80vh;
        z-index: 6;
        width: 100%;
    }
    
    .slide.active {
        opacity: 1;
    }
    
    .slide1-image-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .slide1-image {
        width: 100%;
    }

    .slideshow_buttons_container {
        position: relative;
        left: 0;
        display: flex;
        z-index: 10;
        top: 40.5vw;
        transition: .3s ease;
        margin-left: 10vw;
        opacity: .6;
    }

    .slideshow_buttons_container .button-slideshow {
        font-size: 2rem;
    }

    .normal-slide1-image-container {
        display: none;
    }

    .next-button {
        margin-left: .8rem;
    }
}

.large-slide1-image-container {
    display: none;
}


@media only screen and (min-width: 1501px){
    .slide {
        background-color: transparent;
        position: absolute;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.6s ease;
        height: 80vh;
        z-index: 6;
        width: 100%;
    }
    
    .slide.active {
        opacity: 1;
    }
    
    .large-slide1-image-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .slide1-image-container {
        display: none;
    }

    .large-slide1-image {
        width: 100%;
    }

    .slide1-image {
        display: none;
    }
    
    .slideshow_buttons_container {
        position: relative;
        left: 0;
        display: flex;
        gap: 1em;
        z-index: 10;
        top: 33.8vw;
        transition: .3s ease;
        margin-left: 20vw;
        opacity: .6;
    }

    .slideshow_buttons_container .button-slideshow {
        font-size: 2rem;
    }

    .normal-slide1-image-container {
        display: none;
    }
}


/* ONLY, be aware, ONLY iPad Pro Vertical*/
/* ONLY, be aware, ONLY iPad Pro Vertical*/
@media only screen and (min-height: 1000px){
    .slide.slide1 {
        background-position: top;
        background-image: url('https://palasdwadmsc.online/Grand2-Sportsfield.jpg');
    }
}

.slide {
    -webkit-transition: opacity 0.6s ease;
    transition:         opacity 0.6s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
  }
  
  .slide.active {
    opacity: 1;
    visibility: visible;
}


.opening-pictures-section {
    display: none;
}

/* Mobile Phone Only*/
  @media only screen and (max-width: 600px){
    .opening-bottom-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 8vh;
        background-color: rgba(241,241,241,255);
    }
    
    .opening-pictures-section {
        display: block;
    }

    .opening-pic1 {
        height: 30vh;
        background-position: top;
        background-image: url('https://palasdwadmsc.online/sports3to2.webp');
    }

    .sports-opening-field-pic {
        height: 20vh;
        background-position: center;
        background-image: url('https://palasdwadmsc.online/floor3to2.webp');
    }

    .opening-pic3 {
        height: 28vh;
        background-position: bottom;
        background-image: url('https://palasdwadmsc.online/window16to9.webp');
    }

    .image_slideshow {
        display: none;
    }
}

/* iPad Mini Vertical 
+ Mac Mini Full-height to Folded, small screen, right after phone*/
@media only screen and (max-width: 800px) and (min-width: 601px) {
    .slide.slide1 {
        background-position: top;
        background-image: url('https://palasdwadmsc.online/sports1090.jpg');
    }

    .slide.slide3 {
        background-image: url('https://palasdwadmsc.online/opening-pic-window3to2.jpg');
    }

  }

  
/* Mac mini Full-height, be aware, Full-height and not including folded height, Large Screen */
/* Ultra Large Screen, including Big Screen Full Screen and 4k Screen */
  @media only screen and (min-width: 1300px) and (min-height: 800px) {
    .normal-slide1-image-container {
        display: none;
    }

    .slide1-image {
        display: none;
    }

    .slide.slide1 {
        background-position: top;
        background-image: url('https://palasdwadmsc.online/sports3to2.webp');
    }

    .slide.slide2 {
        background-image: url('https://palasdwadmsc.online/floor5to2.webp');
    }

    .slide.slide3 {
        background-position: bottom;
        background-image: url('https://palasdwadmsc.online/window-bigger-3to2.jpg');
    }

    .slideshow_buttons_container {
        position: relative;
        left: 0;
        display: flex;
        z-index: 10;
        top: 81vh;
        transition: .3s ease;
        margin-left: 8vw;
        opacity: .6;
    }

    .next-button {
        margin-left: .8rem;
    }

    .slideshow_buttons_container .button-slideshow {
        font-size: 2.3rem;
    }

    .lang-button-text {
        font-size: 2rem;
    }

    .slide1-image-container, .large-slide1-image-container {
        display: none;
    }
}


    
.menu-btn {
    background-color: transparent;
    color: black;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    width: auto;
    text-align: right;
}

.language-links {
    color: rgba(0,121,2,255);
    transition: 0.23s ease;
}

.language-links:hover {
    color: rgb(220, 166, 118);
    transition: 0.23s ease;
}

@media (max-width: 599px) {
    .language-links {
        font-size: 1.9rem;
    }

    .language-links:hover {
        font-size: 2.2rem;
    }
}

@media only screen and (max-width: 1299px) and (min-width: 600px) {
    
    .language-links {
        font-size: 1.9rem;
    }

    .language-links:hover {
        font-size: 2.2rem;
    }
}

@media (min-width: 1300px) {
    .language-links {
        font-size: 2.1rem;
    }

    .language-links:hover {
        font-size: 2.45rem;
    }
}

@media (min-width: 1600px) {
    .language-links {
        font-size: 2.35rem;
    }

    .language-links:hover {
        font-size: 2.65rem;
    }
}

@media (min-width: 1800px) {
    .language-links {
        font-size: 2.6rem;
    }

    .language-links:hover {
        font-size: 2.8rem;
    }
}


.backdrop3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1002; /* Layered above backdrop */
}


.backdrop3.show {
    opacity: 1;
    visibility: visible;
}


.language_page {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 66vw;
    background-color: #f5f1e6;
    box-shadow: -.2rem 0 .5rem rgba(0, 0, 0, 0.3);
    transform: translateX(100%); /* Initially hidden */
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 1003; /* Above backdrop2 */
    pointer-events: none;
}

.language_page {
    width: 36vw;
}

.language-content-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20vh;
}

.language-lists {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 45vh;
    margin-right: -2vw;
}

.language_page.open{
    transform: translateX(0); /* Slide in */
    opacity: 1;
    pointer-events: auto;
}


.lang-close-btn {
    font-size: 2.6rem; /* Bigger close button */
    font-weight: bold;
    color: #333;
    cursor: pointer;
    position: absolute;
    margin-top: 4vh;
    right: 5vw;
}


.mobile-language-button {
    display: none;
}


@media only screen and (max-width: 600px){
    .mobile-language-button {
        display: block;
        margin-left:  -14.5vw;
    }

    .mobile-lang-pic {
        width: 3.2rem;
        opacity: .8;
        margin-top: -3vh;
        padding: .3rem .3rem .3rem .3rem;
    }

    .language_page {
        width: 60vw;
    }
}

@media only screen and (max-width: 601px) and (min-width: 600px) {
    .mobile-language-button {
        margin-left:  -4vw;
    }

    .mobile-lang-pic {
        width: 9vw;
        opacity: .8;
    }
 }


 @media only screen and (max-width: 2000px) and (min-width: 1600px) {

    .navbar {
        background-color: rgba(0,121,2,255);
        height: 13vh;
        min-height: 9rem;
        display: flex;
        max-width: 138rem;
        margin-left: auto;
        margin-right: auto;
        left: .7rem;
    }

    .image_slideshow {
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .slide {
        max-width: 138rem;
    }

    .logo_wrapper {
        margin-left: 10rem;
    }


    .slideshow_buttons_container {
        position: relative;
        left: 0;
        display: flex;
        z-index: 10;
        top: 81vh;
        transition: .3s ease;
        margin-left: 20rem;
        opacity: .6;
        width: 138rem;
    }
    
    .next-button {
        margin-left: .8rem;
        margin-right: 76rem;
    }

    .test {
        margin-left: 1rem;
        margin-right: 1rem;
    }



    .service-card-individual {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0rem !important;
        filter: brightness(105%);
        border: gray .1px solid;
    }
    
    .service-card-individual {
        width: 45.5rem;
    }

    .service-cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        width: 138rem;
        margin: auto;
    }


    .service-cards-section {
        width: 90vw;
    }

    .service-card-name {
        font-size: 4rem;
        margin-left: 0rem;
        font-weight: 550;
        margin-top: .6rem;
    }


 }
 

 @media only screen and (min-width: 2000px){
    


    .navbar {
        background-color: rgba(0,121,2,255);
        height: 13vh;
        min-height: 9rem;
        display: flex;
        max-width: 181rem;
        margin-left: auto;
        margin-right: auto;
        left: .7rem;
    }

    .image_slideshow {
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .slide {
        max-width: 181rem;
    }

    .logo_wrapper {
        margin-left: 10rem;
    }


    .slideshow_buttons_container {
        position: relative;
        left: 0;
        display: flex;
        z-index: 10;
        top: 81vh;
        transition: .3s ease;
        margin-left: 20rem;
        opacity: .6;
        width: 181rem;
    }
    
    .next-button {
        margin-left: .8rem;
        margin-right: 120rem;
    }

    .test {
        margin-left: 3rem;
        margin-right: 1rem;
    }

    .main-content {
        max-width: 171rem;
    }

    .commonIntro {
        font-size: 4.8rem;
    }

    .our_clients {
        font-size: 2.8rem;
    }
    
    .commonIntro_Detail {
        font-size: 2.7rem;
        width: 80rem;
    }

    .service-cards-container {
        margin-right: -.7vw;
    }

    
    
    .service-card-name {
        font-size: 5rem;
        margin-left: 0rem;
        font-weight: 550;
        margin-top: .6rem;
    }

    .more-services-title {
        font-size: 5.5rem;
        font-weight: 550;   
        padding-bottom: 3rem;
        margin-left: 16rem;
    }

    .plastic-floor-title {
        font-size: 6rem;
        font-weight: 550;   
        margin-top: -23rem;
        z-index: 10;
        color: white;
        position: relative;
        margin-left: 16rem;
    }

    .rectangular-pic {
        max-width: 171rem;
    }



    .square-elements {
        gap: .2vw;
    }
    
    .square-pics {
        width: 34.9vw;
        filter: brightness(86%);
    }
    
    
    .square-element-titles-container {
        display: flex;
        flex-direction: row;
        gap: 8.5vw;
    }
    
    .square-title1 {
        margin-left: 8vw;
        color: white;
        margin-right: 2vw;
    }
    
    
    .square-title2 {
        color: white;
        filter: brightness(120%);
    }
    
    
    .square-element-titles {
        font-size: 5rem;
        font-weight: 550;
        margin-top: -9vw;
        filter: brightness(100%);
    }


 }

 

 @media only screen and (max-width: 2449px) and (min-width: 1915px) {
    .vertical-rectangular-pic {
        width: 30vw;
        max-width: 84.6rem;
        border: solid grey .2px ;
    }

    .vertical-rectangular-elements {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: .6rem;
        width: 171rem;
    }
    
    .school-corridor-cleaning-title {
        font-size: 5.5rem;
        margin-left: 30rem;
        padding-bottom: 1rem;
    }

    .vertical-rectangular-elements {
        margin-left: .6vw;
    }

    .car-park-title, .car-park-title-2 {
        font-size: 5rem;
        margin-left: 10vw;
    }
 }

 @media only screen and (min-width: 2450px){
    .vertical-rectangular-pic {
        max-width: 84.6rem;
        border: solid grey .2px ;
    }

    .vertical-rectangular-elements {
        display: flex;
        flex-direction: row;
        justify-content: left;
        gap: .6rem;
    }
    

    .vertical-rectangular-elements, .school-corridor-cleaning-title {
        margin-left: 0vw;
    }

    .school-corridor-cleaning-title {
        font-size: 5.5rem;
        margin-left: 2rem;
        padding-bottom: 1rem;
    }

    







    .square-elements {
        gap: .2vw;
    }
    
    .square-pics {
        max-width: 85.4rem;
        filter: brightness(86%);
    }
    
    
    .square-element-titles-container {
        display: flex;
        flex-direction: row;
        gap: .2rem;
    }
    
    .square-title1 {
        margin-left: 10rem;
        color: white;
        margin-right: 18rem;
    }
    
    
    .square-title2 {
        color: white;
        filter: brightness(120%);
    }
    
    
    .square-element-titles {
        font-size: 6rem;
        font-weight: 550;
        margin-top: -20rem;
        filter: brightness(100%);
    }

    .car-park-title, .car-park-title-2 {
        font-size: 5.2rem;
        margin-left: 8rem;
    }
 }
 


 .Eng-belief-title {
    color: rgb(117, 117, 117);
}