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

body{
    --s: 0.4em;    /* control the size */
    --c: #774F38; /* the color */
    --section-title-color: black;
    --section-tabs-color: black;

    /* Custom viewport size */
    --custom-width-xs: 43%;
    --custom-width-s: 55%;
    --custom-width-m: 65%;
    --custom-width-l: 89%;
    --custom-width-full: 100%;

    /* Custom viewport max size */
    --custom-maxWidth-xs: 843px;
    --custom-maxWidth-s: 1280px;
    --custom-maxWidth-m: 1440px;
    --custom-maxWidth-l: 1920px;
    --custom-maxWidth-popUp: 1720px;

    /* Custom Section Height */
    --custom-section-height-1: 700vh;

    /*C ustom Fontsize */
    --custom-fontsize-s: 0.95em; /*18pt*/
    --custom-fontsize-footer: 0.95em; /* footer */
    --custom-fontsize-m: 0.95em; /*20pt / paragraph*/
    --custom-fontsize-m-s: 1.1em; /*24pt*/
    --custom-fontsize-m-m: 1.49em; /*29.5pt*/
    --custom-fontsize-m-m-s: 1.3em; /*31.5pt*/
    --custom-fontsize-m-l: 1.4em; /*35pt*/
    --custom-fontsize-m-xl: 2em; /*40pt*/
    --custom-fontsize-l: 3em; /*60pt*/
    --custom-fontsize-l-xs: 4.3em; /*78pt*/
    --custom-fontsize-l-s: 3.4em; /*93pt*/
    --custom-fontsize-l-m: 5.8em; /* 123pt */
    --custom-fontsize-l-l: 6.2em; /* 140pt*/

    /* Custom Header Fontsize */
    --custom-fontsize-h1: 6em; /*123pt*/
    --custom-fontsize-h2: 3em; /*60pt*/
    --custom-fontsize-h3: 1.8em; /*40pt*/

    /* Custom Letter Spacing */
    --custom-letterspacing-s: 0.14em; /* Letter Spacing for tabs and buttons */
    --custom-letterspacing-m: 0.18em; /* Letter Spacing for h2 and sub-titles */
    --custom-letterspacing-l: 0.5em; /* Letter Spacing for custom h1 and titles */
    --custom-letterspacing-l-l: 0.6em; /* Letter Spacing for custom h1 and titles */
    --custom-letterspacing-h1: 0.4em;
    --custom-letterspacing-h2: 0.16em;
    --custom-letterspacing-h3: 0.1em;
    --custom-letterspacing-footer: 0.14em;

    /* Custom Line Height */
    --custom-lineheight-s: 1.67em; /* Line Height for tabs and buttons */
    --custom-lineheight-m: 1.9em; /* Line Height for Paragraph */
    --custom-lineheight-h1: 1.5em;
    --custom-lineheight-h2: 1.25em;
    --custom-lineheight-h3: 1.6em;

    /* Custom Colors */
    --jc-bg-color: #fffdde;
    --jc-blue: #0090d7;
    --jc-paleblue: #E8F4FA;
    --jc-red: #ff605c;
    --jc-green: #76b729;
    --jc-palegreen: #F2F8EB;
    --jc-lightgreen: #75c044;
    --jc-orange: #f7a600;
    --jc-paleorange: #FDF6E7;
    --jc-darkorange: #cd986c;
    --jc-brown: #736357;
    --jc-white: white;
    --jc-palegrey: #fefbf3;
    --jc-grey: #b3b3b3;

    /* Custom Margin */
    --custom-margin-s: 2em;
    --custom-margin-m: 4em; /* for sections/subsection top */
    --custom-margin-l: 10em;
    --custom-margin-h2: 1em;
    --custom-margin-h2-half: 2.8rem; /* Custom Margin for Panel Section Title and Number */
    --custom-margin-isSticky: 100vh;

    /* Custom Padding */
    --custom-padding-s: 2em;
    --custom-padding-m: 3em; /* for padding left/right */
    --custom-padding-l: 9em; /* for padding top/bottom */


    /* Custom Border Radius */
    --custom-panel-border-radius: 2em;

    /* JC Slides Size */
    --jc-slideContainerHeight: 680px;
    --jc-slideContainerWidth: 1820px;

    /* JC Popup Container Size */
    --jc-popUp-width: 1100px;
    --jc-popUp-height: 660px;
    --jc-popUp-padding: 6em 3em 4.5em;

    /* JC Bubble Sizes */
    --jc-bubble-size: 28em;
}

body{
    /*Base Font Size */
    font-size: 1em;
    font-weight: 100;
    line-height: 1em;
    letter-spacing: 0.1em;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: auto;
}

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

    body{
        --custom-fontsize-l-l: 5em;
    }

    section .page-wrapper{
        min-height: 900px;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 993px){
    body{
        font-size: 0.85em;

        /* --custom-fontsize-m: 0.75em; */
    }
}


@media only screen and (min-width: 1200px){
    body {
        /** Default Body Fontsize **/
        font-size: 1em;

        --jc-popUp-width: 1180px;
        --jc-popUp-height: 700px;
    }
}

@media only screen and (min-width: 1420px) {
    
    body {
        /** Default Body Fontsize **/
        font-size: 1.06em;
        --jc-popUp-width: 1420px;
        --jc-popUp-height: 770px;
    }
}

@media only screen and (min-width: 1680px){
    body{
        /** Default Body Fontsize **/
        font-size: 1.2em;

        --custom-fontsize-s: 0.9em;
        
        
        --jc-popUp-width: 1580px;
        --jc-popUp-height: 850px;
    }
    
}


/************* Panel 2 Slider Custom Css [Start] ***********************/

@media only screen and (min-width: 1080px){
    body{
        --jc-slideContainerWidth: 1420px;
        --jc-slideContainerHeight: 600px;

        --custom-fontsize-m-l: 1.3em;

        /* JC Bubble Sizes */
        --jc-bubble-size: 25em;
    }   
}

@media only screen and (min-width: 1420px){
    body{
        --jc-slideContainerWidth: 1680px;
        --jc-slideContainerHeight: 650px;
    }   
}

@media only screen and (min-width: 1680px) {
    body{
        --jc-slideContainerWidth: 100%;
        --jc-slideContainerHeight: 750px;
    }
}

/************* Panel 2 Slider Custom Css [End] ***********************/

@media only screen and (min-width: 992px) {
    .desktop-hidden{
        display: none !important;
    }
}


@media only screen and (max-width: 1100px){
    body{
        --custom-fontsize-m-l: 1.2em;
    }
}


@media only screen and (max-width: 992px) {
    /*** Default Base Font Size ****/
    body {
        font-size: 11.5px;
    }

    body{
        --custom-fontsize-s: 1em;
        --custom-fontsize-footer: 1em;
        --custom-fontsize-m: 1.1em;
        --custom-fontsize-m-s: 1.2em;
        --custom-fontsize-m-m-s: 1.1em;
        --custom-fontsize-m-l: 1.9em;
        --custom-fontsize-l: 6em;
        --custom-letterspacing-footer: 0.1em;
        /* JC Slides Size */
        --jc-slideContainerHeight: 500px;
        --jc-slideContainerWidth: 950px;
        /*** Custom Width ****/
        --custom-width-m: 85%;

        /* Custom Padding */
        --custom-padding-l: 6em;

        /* JC Popup Container Size */
        --jc-popUp-width: 900px;
        --jc-popUp-height: 100%;
    }

    .mobile-hidden{
        display: none !important;
    }
}


.fade-out.aos-animate {opacity: 0}

    [data-aos="fade-out"] {
      opacity: 1;
      transition-property: opacity;
    }
    [data-aos="fade-out"].aos-animate {
      opacity: 0;
    }

a{
    text-decoration: none;
    margin: 0;
    text-align: auto;
    color: black;
}

h1,h2,h3{
    font-family: "ZenMaruGothic-Medium";
}

h1,.jc-h1{
    font-size: var(--custom-fontsize-h1);
    letter-spacing: var(--custom-letterspacing-h1);
    line-height: var(--custom-lineheight-h1);
}

h2,.jc-h2{
    font-size: var(--custom-fontsize-h2);
    letter-spacing: var(--custom-letterspacing-h2);
    line-height: var(--custom-lineheight-h2);
}

h3,.jc-h3{
    font-size: var(--custom-fontsize-h3);
    letter-spacing: var(--custom-letterspacing-h3);
    line-height: var(--custom-lineheight-h3);
}

p, .jc-p{
    font-family: "MYuenHK-Medium";
    font-size: var(--custom-fontsize-m);
    letter-spacing: var(--custom-letterspacing-m);
    line-height: var(--custom-lineheight-m);
}

.jc-text-left{
    text-align: left;
}
.jc-text-right{
    text-align: right;
}

.district-text{
    font-family: "ZenMaruGothic-Bold";
    font-size: var(--custom-fontsize-l-s);
    letter-spacing: var(--custom-letterspacing-s);
    
}

.close-btn:after{
     display: inline-block;
     /* content: "\00d7"; */
     content: url("../img/white-close-btn.svg");
     display: inline-block;
     width: 1.3em;
     height: 1.3em;
     object-fit: contain;
}

.close-btn{
    position: absolute;
    right: 2.5em;
    top: 3em;
    z-index: 101;
    cursor: pointer;
}

.jc-cta{
    font-family: "ZenMaruGothic-Medium";
    font-size: var(--custom-fontsize-m-l);
    line-height: var(--custom-lineheight-s);
    letter-spacing: 0.26em;
    width: fit-content;
    cursor: pointer;
    color: var(--jc-orange);
    margin-bottom: 2em;
    position: relative;
    padding-left: 2.1em;
    padding-right: 0.9em;
    background-color: palegoldenrod;
    border-radius: 2em;
}

.jc-cta::before {
  content: url('../img/cta-arrow-orange.svg');
  width: 1.6em;
  height: 1.6em;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.jc-cta:hover,
.jc-cta.isActive{
    background-color: var(--jc-orange);
    color: white;
}

.green-buttons.jc-cta{
    color: var(--jc-green);
}

.green-buttons.jc-cta:hover,
.green-buttons.jc-cta.isActive{
    background-color: var(--jc-green);
    color: white;
}

.green-buttons.jc-cta::before {
  content: url('../img/cta-arrow-green.svg');
}

.color-white{
    color: white;
}
.color-black{
    color: black;
}
.color-orange{
    color: var(--jc-orange);
}
.color-darkorange{
    color: var(--jc-darkorange);
}
.color-red{
    color: var(--jc-red);
}
.color-blue{
    color: var(--jc-blue);
}
.color-green{
    color: var(--jc-green);
}

.bg-white{
    background-color: white;
}
.bg-orange{
    background-color: var(--jc-orange);
}
.bg-blue{
    background-color: var(--jc-blue);
}
.bg-green{
    background-color: var(--jc-green);
}
.bg-blue{
    background-color: var(--jc-blue);
}
.bg-default{
    background-color: var(--jc-bg-color);
}

h1.circle-bgs{
    font-family: "ZenMaruGothic-Bold";
    font-size: var(--custom-fontsize-l-l);
    height: fit-content;
    letter-spacing: 0;
    z-index: 2;
}

h2.circle-bgs{
    font-family: "ZenMaruGothic-Bold";
    font-size: var(--custom-fontsize-l-xs);
    height: fit-content;
    letter-spacing: 0;
    z-index: 2;
}

.circle-bgs{
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0.3em 0.55em 0.45em;
    margin: 0 -0.17em;
}


.circle-bg-1{
    background-image:url("../img/circle-bg-1.svg");
    color: var(--jc-green);
}
.circle-bg-2{
    background-image:url("../img/circle-bg-2.svg");
     color: var(--jc-orange);
}
.circle-bg-3{
    background-image:url("../img/circle-bg-3.svg");
     color: var(--jc-blue);
}
.circle-bg-4{
    background-image:url("../img/circle-bg-4.svg");
     color: var(--jc-orange);
}
.circle-bgs:nth-of-type(2n){
    margin-top: 0.2em;
    /* padding-bottom: 0; */
}

.green-underline{
    text-decoration: var(--jc-green) 0.2em underline;
    text-underline-position: under;
    text-underline-offset: -0.2em;
}

.colored-underline{
    text-decoration: var(--jc-orange) 0.2em underline;
    text-underline-position: under;
    text-underline-offset: -0.2em;
}


.fixed-top{
    position: fixed;
    top:0;
    left: 0px;
}

.fading-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14em;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 80%);
    background-color: var(--jc-bg-color);
    z-index: -1;

}

.menu-logo-text{
    font-family: 'MHeiHK-Medium';
    font-size: var(--custom-fontsize-logo, 1.7em);
    letter-spacing: var(--custom-letterspacing-logo, 0.6em);
    padding-left: 2.4em;
    padding-top: 1.5em;
}

.menu-logo-img{
    width: 25em;
    margin-top: 3em;
    margin-left: 4em;
}

.panelw-xs{
    width: var(--custom-width-xs);
    max-width: var(--custom-maxWidth-xs);
}
.panelw-s{
    width: var(--custom-width-s);
    max-width: var(--custom-maxWidth-s);
}
.panelw-m{
    width: var(--custom-width-m);
    max-width: var(--custom-maxWidth-m);
}
.panelw-l{
    width: var(--custom-width-full);
    max-width: var(--custom-maxWidth-l);
}

.flex-row{
    flex-direction: row !important;
}

.green-bubble{
    color: var(--jc-white);
    background-image: url(../img/green-bubble.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    width: 22em !important;
    height: 3em;
}

.blue-highlight{
    background-color: var(--jc-blue);
    border-radius: 2em;
    width: auto !important;
    padding: 0 0.5em 0 1em;
}

.small-text{
    font-size: var(--custom-fontsize-s);
}


section.panel .jc-childplay-img{
    position: absolute;
    width: 5.5em;
}

/* Animation */
@keyframes jc-fade-in{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@keyframes jc-scale-up{
    0% {
        scale: 0.7;
    }
    100% {
        scale: 1;
    }
}

section{
    /* display: flex;
    justify-content:center;
    align-items: center; */
    width:100%;
    height:100vh;
    z-index:1;
    position: relative;
    background-color: white;
}

section.autoHeight{
    height: auto;
}


section.panel-1 .mask-layer{
    width:100%;
    max-width: var(--custom-maxWidth-l);
    margin: 0 auto;
    height:100vh;
    background-color: var(--jc-bg-color);
    mask-image:url('../img/section1_clipImage_inverse.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    position:sticky;
    top:0;
    left: 0;
    z-index: 2;
}

#s1-masking-image{
    display:inline-block;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:2;
}

/* section.panel-1 .panel-wrapper{
    clip-path: path("M102.7,29c-.5-.2-.9-.3-1.4-.5s-.8-.6-1.3-.8c-.5-.2-1-.2-1.4-.4-.5-.2-.9-.4-1.4-.5-.5-.2-.9-.4-1.4-.6-.5-.2-.9-.4-1.4-.5-.5-.2-1,0-1.5-.3-.5-.2-1-.3-1.4-.5-.5-.2-1-.2-1.5-.3s-.9-.5-1.4-.6-.9-.6-1.3-.8c-.4-.2-1.1,0-1.6,0s-1-.2-1.5-.3-.8-.8-1.3-.9-1.1.2-1.6,0-1-.3-1.4-.4-.9-.5-1.4-.6-1,0-1.5,0-.9-.6-1.4-.7c-.5,0-1.1.2-1.6.1-.5,0-.9-.5-1.4-.6h-1.5c-.5,0-1-.2-1.5-.2h-1.5c-.5,0-1-.4-1.5-.4s-1,.2-1.5.2-1,0-1.5.2c-.5,0-1,0-1.5,0s-.9.6-1.4.7c-.5,0-1.1,0-1.5.2s-.9.5-1.3.8c-.4.2-.7.7-1.2,1-.4.3-1.1.2-1.5.5-.4.3-.8.6-1.2.9-.4.3-.7.8-1,1.2s-.3,1-.6,1.5c-.5,0-1.1-.2-1.6,0-.5,0-1,.3-1.5.4-.5,0-1,0-1.5.1l-1.5.3c-.5,0-1,0-1.5.2-.5.2-.9.5-1.4.6s-.9.3-1.4.5c-.5.2-1,.2-1.4.4-.4.2-1,.3-1.4.5-.4.2-.9.4-1.3.7-.4.2-.8.5-1.3.8-.5.3-1,.3-1.4.5-.4.3-.8.6-1.2.8-.4.3-.6.8-1,1.1-.4.3-.8.6-1.2.9-.4.3-.7.7-1.1,1-.4.4-.5.9-.9,1.2-.3.4-.9.5-1.2.9-.3.4-.6.8-.9,1.2s-.4,1-.6,1.4c-.3.4-.4.9-.6,1.3s-.9.7-1.1,1.1c-.2.4,0,1.1-.1,1.6-.2.5-.3.9-.4,1.4s-.4.9-.5,1.4-.1,1-.2,1.5-.4.9-.5,1.4,0,1,0,1.5-.2,1-.2,1.5.5,1,.6,1.5-.4,1-.3,1.5.4.9.5,1.4.1,1,.3,1.5c.1.5.4.9.6,1.4s.3.9.5,1.4.3.9.5,1.4.4.9.6,1.4.5.8.8,1.3.6.8.9,1.2c.3.4.3,1,.6,1.4.3.4.6.8.9,1.2.3.4.8.6,1.1,1,.3.4.4.9.7,1.2-.1.5.2.9,0,1.4,0,.5,0,1-.1,1.4,0,.5-.4,1-.5,1.4v1.5c0,.5.4,1,.4,1.4s-.1,1,0,1.5c0,.5.3,1,.4,1.4,0,.5.3.9.4,1.4.2.4.4.9.6,1.3.2.4.4.9.7,1.3.3.4.4.9.7,1.3.3.4.9.5,1.3.8.3.3.4,1,.8,1.3.4.3.9.5,1.3.7.4.3.8.5,1.2.8.4.2.9.3,1.4.5.5.2.8.6,1.3.7.5.2.9.3,1.4.5s1,0,1.5.2c.5,0,.9.5,1.4.5h3c.5,0,1-.3,1.4-.3s.9-.2,1.4-.3c.5,0,1,0,1.5,0,.3.4.4,1,.7,1.4.3.4.9.6,1.2.9.3.4.5.9.8,1.3.4.4.7.8,1,1.1.4.3,1,.4,1.4.6s.8.6,1.3.8c.5.2.9.3,1.4.4s1,0,1.5,0,1,.2,1.5.2h1.5c.5,0,1-.2,1.5-.3.5,0,.9-.3,1.5-.3s1,.2,1.5.1c.5,0,.9-.6,1.4-.7.5,0,.9-.2,1.5-.3h1.5c.5-.1.9-.4,1.4-.5.5,0,1-.1,1.5-.2s1.1.2,1.6,0c.5,0,1-.2,1.4-.3.4,0,.9-.4,1.4-.5.5,0,1,0,1.5-.2.5,0,.9-.4,1.4-.5.5,0,.9-.3,1.4-.4.5-.1,1-.2,1.4-.3.5,0,1,0,1.5,0,.5,0,.9-.3,1.4-.4.5,0,.9.3,1.4.4.5,0,1-.2,1.5-.2s.9.5,1.4.6c.5,0,1,0,1.5.1.5,0,1,0,1.5,0,.5,0,1,.2,1.4.3.5,0,.9.4,1.4.5.5,0,1,0,1.5.2.5,0,1,0,1.5,0,.5.1.9.4,1.4.5.5.1,1,.2,1.4.3.4,0,.9.5,1.4.6s1,0,1.5.2c.5,0,1,0,1.5.2.5.1,1,.2,1.4.3.5,0,.9.5,1.4.6s.9.3,1.4.5,1.1-.2,1.5,0,.9.6,1.3.7c.4,0,1.1-.1,1.5,0,.4,0,.8.7,1.3.8s1,.2,1.4.3c.4.1,1.1-.3,1.6-.2.5,0,.9.7,1.3.8.5,0,1,0,1.5.2.5,0,1,0,1.5,0,.5,0,1,0,1.5,0,.5,0,.9.6,1.4.6s1-.2,1.5-.2,1,.3,1.5.3,1-.4,1.4-.4,1,0,1.4-.2c.5,0,1,0,1.4-.3s.9-.5,1.3-.7c.4-.3.9-.4,1.3-.7.3-.3.5-.9.8-1.3.3-.4.8-.6,1.1-1,.2-.4.2-1,.5-1.4.2-.4.3-1.1.5-1.5h1.6c.5,0,1,0,1.5,0,.5,0,1-.2,1.4-.3.5,0,1-.2,1.5-.3.5,0,1,0,1.5-.2.5-.2.9-.5,1.3-.7.5-.2.9-.5,1.3-.7.4-.2.8-.6,1.2-.9.4-.3,1-.3,1.4-.6s.8-.6,1.1-1,.2-1.1.4-1.5c.3-.4.6-.8.8-1.2.2-.5.5-.9.6-1.3s0-1,0-1.5.4-1,.4-1.5-.4-1-.4-1.5v-1.5c0-.5-.3-.9-.4-1.4-.1-.5-.4-.9-.5-1.4-.2-.5-.4-.9-.5-1.4-.2-.5,0-1-.3-1.5-.2-.5-.6-.8-.8-1.3.5,0,1,0,1.5-.2.5,0,.9-.3,1.4-.5.4-.2.9-.5,1.3-.8.4-.3.9-.5,1.2-.9.3-.3.4-.9.8-1.3.3-.4.4-.9.7-1.4s.9-.6,1.1-1c.2-.4.1-1,.4-1.5.2-.5.4-.9.6-1.3.2-.5.7-.8.9-1.3s.4-.9.6-1.4,0-1,.2-1.5.2-1,.3-1.5v-1.5c0-.5.5-.9.5-1.4v-1.5c0-.5-.1-1-.1-1.5s.4-1,.4-1.5-.2-1-.3-1.5,0-1-.1-1.5-.5-.9-.7-1.4c-.1-.5-.2-1-.4-1.4s-.1-1.1-.3-1.5-.9-.7-1.1-1.1c-.2-.4-.3-1-.6-1.4s-.5-.9-.8-1.3c-.3-.4-.8-.6-1.2-1-.4-.4-.9-.4-1.3-.8s-.8-.6-1.2-.9c-.4-.3-.8-.6-1.2-.9-.4-.3-.7-.8-1.2-1-.5-.2-.9-.3-1.4-.5-.5-.2-1.2,0-1.6,0,.1-.5.7-1,.8-1.4.1-.6,0-1.1,0-1.5,0-.6-.1-1.2-.4-1.5-.2-.3-.8-.7-1.3-.8h-1.5c-.4,0-.9.4-1.4.5h-2.9c-.4,0-.9,0-1.4.2-.4,0-.9,0-1.4.2-.5,0-.9,0-1.4.2-.5,0-.9.6-1.4.7-.5,0-1-.3-1.5-.2-.5,0-.9.7-1.3.8-.5,0-1-.3-1.5-.2-.5,0-.9.2-1.4.3s-.9.4-1.4.5c-.5,0-1-.3-1.5-.2-.5,0-.9.1-1.4.2-.5,0-.9.5-1.4.5s-1-.3-1.5-.2c-.5,0-.9.4-1.4.5h-1.4c-.4-.4-.7-.8-1-1.1-.4-.4-.7-.7-1.1-1.1s-.8-.7-1.2-1c-.4-.3-.9-.3-1.4-.6-.4-.2-.8-.7-1.3-.8-.4,0-.9-.4-1.4-.5-.4,0-1-.2-1.5-.2h-3c-.5,0-1,.3-1.5.3h-3c-.5,0-1,.2-1.5.2h-4.5c-.5,0-1,0-1.5,0h-.3Z")
} */

section.panel-1{
    height: 100%;
    min-height: 100vh;
    background-color: var(--jc-bg-color);
}

section.panel-1 .outer-layer{
    position: absolute;
    height: var(--custom-section-height-1);
    width: var(--custom-width-full);
    max-width: var(--custom-maxWidth-l);
    margin-left:auto;
    margin-right:auto;  
    top: 0;
    /* left: 50%;
    transform: translate(-50%, 0%); */
    left: 0;
    right: 0;
    z-index: 3;
    overflow-x: hidden;
}

section.panel-1 .outer-layer.outer-layer-2,
section.panel-1 .outer-layer.outer-layer-3{
    height: 100vh;
    overflow: hidden;
}

section.panel-1 .outer-layer.outer-layer-2{
    width: var(--custom-width-l);
    height: 100vh;
    position: absolute;
    top: 0;
    opacity: 1;
    transition: opacity 1s ease-out;

}

.overlay-text-container{
    position: absolute;
    bottom: 5svw;
    right: 3svw;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-start;
}

.overlay-text{
    color: white;
    font-family: 'MYuenHK-Medium';
    font-size: var(--custom-fontsize-m-l);
    letter-spacing: var(--custom-letterspacing-l-l);
    line-height: 1em;
    margin-bottom: 1em;
    position: relative;
    height: fit-content;
    width: 100%;
}

.overlay-text:nth-of-type(2){
    margin-right: 0em;
    margin-top: 0.5em;
    margin-left: 2em;
}

.overlay-text .red-banner-1{
    background-image: url('../img/red-banner-bg-1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 2.5em;
    width: 7.7em;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-12%, -50%);
    z-index: -1;
}
.overlay-text .blue-banner-1{
    background-image: url('../img/blue-banner-bg-1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 2.5em;
    width: 8.7em;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-12%, -50%);
    z-index: -1;
}


.overlay-text .green-banner-1{
    background-image: url('../img/green-banner-bg-1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 5.7em;
    width: 12.5em;
    position: absolute;
    top: 46%;
    left: 0;
    transform: translate(-12%, -48%);
    z-index: -1;
}

section.panel-1 .outer-layer .floating-items{
    width: 15em;
    position: absolute;
}

section.panel-1 .outer-layer .floating-items.tire{
    top: 200vh;
    left: 5vw;
}
section.panel-1 .outer-layer .floating-items.rope{
    top: 400vh;
    left: 4vw;
}
section.panel-1 .outer-layer .floating-items.wood-board{
    top: 260vh;
    right: 5vw;
}
section.panel-1 .outer-layer .floating-items.cotton-cloth{
    top: 370vh;
    right: 9vw;
}



section.panel .panel-wrapper{
    z-index: 1;
    width: var(--custom-width-full);
    max-width: var(--custom-maxWidth-l, 76.19em);
    color: black;
    background-color: white;
    display: block;
    text-align: center;
    /* max-height: 90vh; */
    /* overflow-y: scroll; */
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    background-color: inherit;
    border-radius: inherit;
    /* margin-top: -100vh; */
}

section.pane-1 .panel-wrapper{
    scroll-snap-type: y mandatory;
}

section.panel-1 .panel-items{
    scroll-snap-align: start;
}

section.panel-1 .panel-wrapper .panel-item-1{
    margin-top: -100vh;
}

section.panel .panel-wrapper .panel-wrapper-inner{
    z-index: 1;
    width: var(--custom-width-m);
    height: 200vh;
    position: absolute;
    top: 0;
    /* left: 50%;
    transform: translate( -50% , 0%); */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
}

.char-img{
    position: absolute;
    top:10%;
    width: 8em;
    will-change: transform;
}

.word-P{
    top: 20%;
    left: 15%;
    width: 9em;
}

.word-L{
    top: 25%;
    left: 37%;
}
.word-A{
    top: 30%;
    left: 57%;
    width: 10em;
}
.word-Y{
    top: 23%;
    left: 74%;
    width: 9em;
}


section.panel .panel-wrapper::-webkit-scrollbar {
    display: none;
}

section.panel .panel-wrapper .panel-items{
    height: 100vh;
    background-color: var(--jc-orange);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        /* Remove on launch */
    /* border-top: 1px solid; */
    overflow: hidden;
    scroll-snap-align: start;

}

section.panel .panel-wrapper .panel-items-group{
    position: relative; 
    z-index: 1;
    overflow: hidden;
}

/* section.panel .panel-wrapper .panel-items-group .panel-items{

} */

section.panel-1 .panel-wrapper .panel-items .panel-item-content{
    width: 100%;
    max-width: var(--custom-maxWidth-s);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 6em;
    position: relative;
}


section.panel-1 .panel-item-content>*{
    display:block;
}

section.panel-1 .outer-layer .children-play,
section.panel-1 .panel-wrapper .panel-items .children-play{
    width: auto; */
    /* height: 100%; */
    position: absolute;
    bottom: 0;
    /* left: 0; */
    /* right: 0; */
    /* margin-left: auto;
    margin-right: auto; */
    /* width: 100vw; */
    height: 100vh;
    object-fit: contain;
}

/* section.panel-1 .outer-layer .children-play{
    transform: translate(-51.6%, 0);
} */

section.panel-1 .panel-wrapper .panel-items .jc-slogan{
    width: auto;
    height: 6em;
    margin-top: 4em;

}

section.panel .panel-wrapper .split-text{
    letter-spacing: var(--custom-letterspacing-l);
    position: absolute;
    width: auto;
}

section.panel .panel-wrapper .split-text:first-of-type{
    left: 22%;
    bottom: 50%;
}
section.panel .panel-wrapper .split-text:nth-of-type(2){
    right: 18%;
    bottom: 50%;    /* margin-right: calc(-1 * var(--custom-letterspacing-l)); */
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container{

    display: flex;
    justify-content: center;
    align-items: center;
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container .circle-bgs{
        margin: 0 0.3em;
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container .circle-bgs:nth-of-type(2n){
        margin-top: 0.3em;
}


section.panel-1 .panel-wrapper .panel-items-group .panel-item-text{
    margin-bottom: 6em;
}

section.panel .panel-wrapper .panel-items-group img.childrenWithBinoculars{
    width: 26em;
    max-width: 360px;
    position: absolute;
    /* bottom:90vh; */
    bottom: -5%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    /* left:50%;
    transform: translate(-50%, 0); */
    transform-origin: bottom center;
}

section.panel .panel-wrapper .panel-items .jc-h2{
    margin-bottom: var(--custom-margin-h2);
}

section.panel .panel-wrapper .panel-items .panel-item-content.flex-align-end{
    align-items: end;
}

section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-right{
    width: 45%;
    text-align: right;
}
section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-left{
    width: 45%;
}

section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-right .jc-image{
    width: 77%;
    height: auto;
}

section.panel-1 .panel-wrapper .panel-items .panel-item-content .panel-item-content-left .small-text{
    padding-left: 4em;
    text-align: justify;
    color: var(--jc-darkorange);
}

section.panel-1 .jc-childplay-img{
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
}



/* Homepage Banner */
.jc-banner-container{
    padding-bottom: 4%;
    /* background-color: var(--jc-bg-color); */
    background-color: transparent;
    padding-top: 4em;
    z-index: 1;
    position: relative;
    max-height: 950px;
}

.jc-banner-container .jc-banner-bg{
    position:absolute;
    background-color: var(--jc-bg-color);
    height:100%;
    width: 100%;
    bottom: 0;
    left:0;
    z-index: -1;
}

.jc-banner-container img{
    width: 100%;
}

/* Homepage Panel-2 */
section.panel-2{
    padding-bottom: 10%;
    /* max-height: 1200px;
    min-height: 38em; */
}


section.panel-2 .panel-wrapper{
    height: 100vh;
    max-width: initial;
    background-color: var(--jc-orange);
    border-top-left-radius: var(--custom-panel-border-radius);
    border-top-right-radius: var(--custom-panel-border-radius);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


section.panel-2 .jc-slides-container{
    position: relative;
    width: var(--jc-slideContainerWidth);
    height: var(--jc-slideContainerHeight);
    max-width: 2200px;
    max-height: 37em;
}

section.panel-2 .jc-slides-container .circle-bg-titles-container{
    display: flex;
    position: absolute;
    top: 3em;
    left: 2em;
    transform: scale(0.9);
    z-index: 1;
}

section.panel-2 .panel-text{
    color: white;
    width: 9em;
    position: absolute;
    bottom: -1.1em;
    right: 10%;
    font-size: var(--custom-fontsize-m-l);
    font-weight: 100;
    z-index:2;
}

section.panel-2 .panel-text.green-banner-2{
    background-image: url('../img/green-banner-bg-2.svg');
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 11em;
}

section.panel-2 .panel-text p{
    font-family: "MYuenHK-Medium";
    line-height: 1.6em;
    letter-spacing: var(--custom-letterspacing-l);
    color: white;
    font-size: 1.25em;
    padding-left: 0.5em;
}

.jc-slides-wrapper{
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translate(0,55%);
    width: var(--jc-slideContainerWidth);
    height: auto;
    -webkit-mask-image: url(../img/wave-clip.svg);
    mask-image: url(../img/wave-clip.svg);
    mask-repeat: repeat-x;
    mask-size: 100%;
    mask-origin: left;
    mask-position: center;
}

.jc-slides .jc-slide-img{
    width: 100%;
    height: var(--jc-slideContainerHeight);
    /* max-height: 38em; */
    object-fit: cover;
}

/* Homepage Video Section */
section.video-section{
    background-color: var(--jc-orange);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
    overflow: hidden;
    z-index: 1;
}

.jc-video-wrapper{
    position: relative;
}

.jc-video-player{
    width: var(--custom-width-m);
    max-width: var(--custom-maxWidth-l);
    border-radius: 2em;
    /* width: 100%; */
    aspect-ratio: 16 / 9; /* Sets the aspect ratio */
    height: auto;  
}

section.video-section .video-childplay-img-1{
    width: 6em;
    top: 0;
    left: 11vw;
}
section.video-section .video-childplay-img-2{
    width: 15em;
    bottom: -6%;
    right: 4vw;
}



/* Homepage Panel-3 */
section.panel-3{
    height: 100vh;
    transition: 0s; 
    background-color: var(--jc-orange);
    overflow: hidden;
}

section.panel-3 .panel-wrapper{
    border-top-left-radius: var(--custom-panel-border-radius);
    border-top-right-radius: var(--custom-panel-border-radius);
    background-color: var(--jc-bg-color);
    width: 100%;
    max-width: initial;
}

section.panel-3 .panel-wrapper .panel-content{
    display: flex;
    width: var(--custom-width-m);
    padding: 10em 0 0 0;
    margin: 0 auto;
    position: relative;
}

.panel-3 .panel-wrapper .panel-content .panel-content-left{
    width: 45%;
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    will-change: transform;
}
.panel-3 .panel-wrapper .panel-content .panel-content-right{
    width: 55%;
    will-change: transform;
    overflow-y: clip;
}

.panel-section-tabs{
    --section-tabs-color: var(--jc-orange);

    font-family: "ZenMaruGothic-Medium";
    font-size: var(--custom-fontsize-m-l);
    line-height: var(--custom-lineheight-s);
    margin: 1em 0;
    color: var(--section-tabs-color);
    border: 0.13em solid var( --section-tabs-color);
    border-radius: 2em; 
    width: fit-content;
    padding: 0 0.8em;
    cursor: pointer;
    background-color: white;
}

/* .panel-section-tabs:nth-of-type(1){
     --section-tabs-color: var(--jc-orange);
}
.panel-section-tabs:nth-of-type(2){
     --section-tabs-color: var(--jc-green);
}
.panel-section-tabs:nth-of-type(3){
     --section-tabs-color: var(--jc-blue);
}
.panel-section-tabs:nth-of-type(4){
     --section-tabs-color: var(--jc-red);
} */

.panel-section-tabs.isActive,
.panel-section-tabs:hover{
    background-color: var(--section-tabs-color);
    color: white;
}

.panel-section-tabs:first-of-type{
    margin-top: 0;
}

.panel-sections-container{
    /* overflow-y: scroll;
    height: 70vh; */
}

.panel-sections-container .panel-section-img{
    width: 100%;
    height: auto;
    padding-bottom: 3em;
    text-align: left;
    position: relative;
}

.panel-sections-container .panel-section-img img{
    display: block;
    width: 100%;
}

.panel-sections-container .panel-section-img.x2grid{
    text-wrap: nowrap;
}

.panel-sections-container .panel-section-img.x2grid img{
    display: inline-block;
    width: 47.5%;
    margin-right:4%
}

.panel-sections-container .panel-section-img.x2grid img:last-child{

    margin-right:0%
}

.panel-sections-container .panel-sections{
    padding: 0 0 3em 0;
}

.panel-sections-container .panel-sections:nth-of-type(2) .colored-underline{
        text-decoration: var(--jc-green) 0.2em underline;
}
.panel-sections-container .panel-sections:nth-of-type(3) .colored-underline{
        text-decoration: var(--jc-blue) 0.2em underline;
}
.panel-sections-container .panel-sections:nth-of-type(4) .colored-underline{
        text-decoration: var(--jc-orange) 0.2em underline;
}

.panel-sections-container .panel-section-mainTitle{
    color: var(--jc-brown);
    font-family: "ZenMaruGothic-Medium";
    margin-bottom: var(--custom-margin-h2-half);
    letter-spacing: var(--custom-letterspacing-s);
    text-align: left;
}

.panel-sections-container .panel-section-number,
.panel-sections-container .panel-section-title{
    font-family: "MYuenHK-Medium";
    margin-bottom: var(--custom-margin-h2-half);
    letter-spacing: var(--custom-letterspacing-m);
    text-align: left;
}

.panel-sections-container .panel-section-title{
    font-size: var(--custom-fontsize-m-xl);
    letter-spacing: var(--custom-letterspacing-s);
    color: var(--section-title-color);
    text-wrap: nowrap;
}

.panel-sections-container .panel-section-text{
    text-align: left;
    font-family: "MYuenHK-Medium";
    font-size: var(--custom-fontsize-m-s);
    padding-bottom: 2em;
}

.panel-sections-container .panel-section-number,
.panel-sections-container .panel-section-text{
    color: var(--jc-darkorange);
}


.rounded-dashes {
  --s: 0.45em;
  height: calc(var(--s) * 0.5);
  --_g: var(--s) top 50%,var(--c) calc(100% - 1px),#0000;
  background: 0/calc(4*var(--s)) space no-repeat;
  background-image: 
   radial-gradient(circle closest-side at left  var(--_g)),   
   radial-gradient(circle closest-side at right var(--_g)),   
   linear-gradient(90deg,#0000 25%,var(--c) 0 75%,#0000 0);
  margin: 0 0 6em 0;
}

.panel-3 .panel-sections:nth-of-type(1){
    --section-title-color: var(--jc-orange);
}
.panel-3 .panel-sections:nth-of-type(2){
    --c: var(--jc-green);
    --section-title-color: var(--jc-green);
}
.panel-3 .panel-sections:nth-of-type(3){
    --c: var(--jc-blue);
    --section-title-color: var(--jc-blue);
}
.panel-3 .panel-sections:nth-of-type(4){
    --c: var(--jc-orange);
    --section-title-color: var(--jc-orange);
}

/****** Popup Box ****/

.popUps-container{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 3em;
    height: 100vh;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    backdrop-filter: blur(4px) opacity(20%);
    opacity: 1;
    transition: opacity 1.5s ease-in;
    z-index: 2;
}

.popUps-container .popUp{
    display: flex;
    width: 100%;
    height: 100%;
    max-width: none;
    margin:0;
    justify-content: center;
    align-items: center;

}

.popUps-container .popUp .popUp-content{
    width: var(--jc-popUp-width);
    height: var(--jc-popUp-height);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content:start;
    align-items: start;
    /* max-width: var(--custom-maxWidth-popUp); */
    /* max-height: 850px; */
    padding: var(--jc-popUp-padding);
    margin: 0 auto;
    background-color: var(--jc-orange);
    overflow: hidden;
    border-radius: var(--custom-panel-border-radius);
    transition: background-color 1s ease;

}


.popUps-container .popUp-content .popUp-overlay-container{
    background-color: var(--jc-green);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em;
    overflow: hidden;
}

.popUp-overlay-title-container{
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.75);
}

.popUps-container .popUp-overlay-container .childplay-group-img{
    width: 33em;
    position: absolute;
    z-index: 3;
    bottom: 17%;
}

.popUps-container .indicator{
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    text-transform: uppercase;
    font-family: 'Avenir Black';
}

.popUps-container .popUp-overlay-container .popUp-overlay-text{
    width: 80%;
}

.popUps-container .popUp-overlay-container .popUp-overlay-text p{
    color: white;
    text-align: justify;
    text-align-last: center;
}

.popUps-container .indicator img{
    width: 7em;
}

.popUps-container .popUp .popUp-content.orange {
      background-color: var(--jc-orange);
}

.popUps-container .popUp .popUp-content.blue {
    background-color: var(--jc-blue);
}
.popUps-container .popUp .popUp-content.red {
    background-color: var(--jc-red);
}
.popUps-container .popUp .popUp-content.green {
    background-color: var(--jc-green);
}

.popUps-container .popUp-content-labels{
    width:10em;
    position: absolute;
}


.popUps-container .popUp-title{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    z-index:1;
    position: absolute;
    bottom: 10%;
    left: -3%;
    height: fit-content;
    transform: scale(0.7);
    transform-origin: bottom left;
}

.popUps-container .popUp-title .popUp-title-container{
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    flex-direction: row;
    position: relative;
    transform: none;
    margin-left: 9em;
    /* margin-bottom: -1.45em; */
}


/* section.panel.scrollCards .panel-wrapper .panel-items:nth-of-type(1){
    --jc-bg-color: var(--jc-green);
}
section.panel.scrollCards .panel-wrapper .panel-items:nth-of-type(2){
    --jc-bg-color: var(--jc-red);
}
section.panel.scrollCards .panel-wrapper .panel-items:nth-of-type(3){
    --jc-bg-color: var(--jc-blue);
}
section.panel.scrollCards .panel-wrapper .panel-items:nth-of-type(4){
    --jc-bg-color: var(--jc-orange);
} */

.bg-circle-orange{overflow: hidden;display: flex;justify-content: end;align-items: last baseline;flex-flow: column;height: 67.5%;aspect-ratio: 1;border-radius: 50%;background-color: var(--jc-orange);z-index: -1;width: auto;height: 62%;aspect-ratio: 1 / 1;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.bg-circle-orange img{
    width: 83%;
    margin-bottom: -10%;
    margin-right: 1%;
    z-index: 1;
}


.popUps-container .popUp-content-left{
    width: 28%;
}
.popUps-container .popUp-content-right{
    width: 72%;
    height: 100%;
    background-color: var(--jc-paleorange);
    border-radius: 23em;
    max-width: 1400px;
    position: relative;
    display: flex;
    justify-content:  center;
    align-items:  center;
}

.popUps-container .popUp-content-right.blue{
    background-color: var(--jc-paleblue);
}

.popUps-container .popUp-content-right.green{
    background-color: var(--jc-palegreen);
}

.popUps-container .popUp-content-right.orange{
    background-color: var(--jc-paleorange);
}

.popUps-container .popUp-content-left p{
    text-align: left;
    color: white;
    line-height: var(--custom-lineheight-s);
}

.popUps-container .popUp-content-right .popUp-slides-container{
    height: 100%;
}

.popUps-container .popUp-content-right .splide__pagination{
    position: absolute;
    bottom: -2em;
}

.popUps-container .popUp-content-right .splide__pagination li{
    padding: 0 0.2em;
}

.popUps-container .popUp-content-right .popUp-slides-container .popUp-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.popUps-container .popUp-content-right .popUp-slide-title-container{
    position: absolute;
    left: -2%;
    top: 0;
    display: flex;
    z-index: 2;
    width: 18em;
    align-items: center;
    justify-content: center;
}


.popUps-container .popUp-content-right h1.popUp-slide-title{
    font-size: calc(var(--custom-fontsize-l-xs) * 0.7);
    width: fit-content;
    letter-spacing: 0;
    line-height: 1em;
    color: white;
    padding: 0.35em;
    border-radius: 50%;
    margin-right: -0.3em;
}

.popUps-container .popUp .popUp-content-right h1.popUp-slide-title.special-char{
    font-family: "MYuenHK-Medium";
}

.popUps-container .popUp .popUp-content-right .popUp-slide h1.popUp-slide-title{
    background-color: var(--jc-green);
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-title-container.blue h1.popUp-slide-title{
    background-color: var(--jc-blue);
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-title-container.orange h1.popUp-slide-title{
    background-color: var(--jc-orange);
}


.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content{
    display: flex;
    flex-direction: row;
    margin-top: 0em;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.single-item .popUp-slide-items{
    display: flex;
    flex-direction: row;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items > div{
    margin-bottom: 1em;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-text{
    width: fit-content;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content:not(.overlapping-items) .popUp-slide-items .popUp-slide-text{
    margin-left: 2.5em;
    text-wrap: nowrap;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-text p{
    color: var(--jc-darkorange);
    font-size: var(--custom-fontsize-s);
    line-height: var(--custom-lineheight-s);
    text-align: left;
    width: fit-content;
    margin-bottom: 0;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-img img{
    width: 23vw;
    max-width: 450px;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-2 .popUp-slide-items{
    flex-direction: column;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-1 .popUp-slide-items .popUp-slide-img img{
    width: 14vw;
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-2 .popUp-slide-items .popUp-slide-img img{
    width: 35vw;
    max-width: 600px;
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-3 .popUp-slide-items .popUp-slide-img img{
    width: 18vw;
}





.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items:nth-of-type(1){
    z-index: 1;
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items:nth-of-type(2){
    z-index: 0;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items:nth-of-type(2){
    margin-left:-5%;
}

.popUps-container .splide__arrow{
    background:none;
}

.popUps-container .splide__arrow img{
    height: 2em;
}

.popUps-container .splide__arrow:disabled img{
    display: none;
}


.popUps-container .slide-childplay-decors{
    position: absolute;
    z-index: 2;
    width: 6em;
    bottom: 0;
    right: 0;
}

.popUps-container .slide-childplay-decor-1{
    bottom: 1em;
    right: 2em;
}
.popUps-container .slide-childplay-decor-2{
    bottom: 3em;
    right: 22em;
}
.popUps-container .slide-childplay-decor-3{
    bottom: 3em;
    right: 0;
}
.popUps-container .slide-childplay-decor-4{
    bottom: 3em;
    right: 0;
}
.popUps-container .slide-childplay-decor-5{
    bottom: 3em;
    right: 0;
}
.popUps-container .slide-childplay-decor-6{
    bottom: 3em;
    right: 0;
}
.popUps-container .slide-childplay-decor-7{
    bottom: 3em;
    right: 0;
}


/****** PopUp-container 1 *****/
#popUps-container-1 .popUp .popUp-content{
    padding: 0;
}

#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper{
    /* width: var(--jc-popUp-width); */
    width: 100%;
    height: var(--jc-popUp-height);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content:start;
    align-items: start;
    padding: var(--jc-popUp-padding);
    margin: 0 auto;
    background-color: var(--jc-orange);
    overflow: hidden;
    border-radius: var(--custom-panel-border-radius);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    /* transition: background-color 1s ease; */
}

#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper.popUp-content-card-2{
    z-index: 5;
    background-color: var(--jc-green);
}

#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper.popUp-content-card-3{
    z-index: 4;
    background-color: var(--jc-blue);
}
#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper.popUp-content-card-4{
    z-index: 3;
}
#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper.popUp-content-card-5{
    z-index: 2;
    background-color: var(--jc-green);
}
#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper.popUp-content-card-6{
    z-index: 1;
    background-color: var(--jc-blue);
}

/***** PopUp Container 2 *****/

#popUps-container-2 .popUp .popUp-content {
    overflow-y: hidden;
    background-color: #fefbf3;
    /* width: 100%; */
    padding-top: 5em;
    padding-bottom: 4em;
    padding-left: 4em;
    background-image: url("../img/gridlines-img.svg");
    background-position: center;
    background-size: 153.5%;
    /* height: 80vh; */
}

#popUps-container-2 .close-btn:after{
    content: url("../img/grey-close-btn.svg");
}

#popUps-container-2 .popUp-content-left{
    width: 60%;
    height: 100%;
}
#popUps-container-2 .popUp-content-right{
    width: 40%;
}

#popUps-container-2  h1,
#popUps-container-2  h2{
    color: var(--jc-orange);
    font-size: var(--custom-fontsize-l-xs);
    line-height: var(--custom-lineheight-h2);
    letter-spacing: vaR(--custom-letterspacing-h3);
    position: relative;
    padding-left: 0.3em;
    width: 70%;
    text-wrap: nowrap;
    background-color: white;
    text-align: left;
}

#popUps-container-2 h2{
    font-size: var(--custom-fontsize-h2);
    margin-bottom: 0.7em;
    padding-right: 0.3em;
    width: fit-content;
}

#popUps-container-2 .popUp-content-text p{
    color: var(--jc-blue);
    position: relative;
    padding-left: 1.2em;
    background-color: white;
    margin-bottom: 0.8em;
    width: fit-content;
}

#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper{
    position: relative;
}

#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-text{
    font-family: 'MYuenHK-Medium';
    font-size: var(--custom-fontsize-m-l);
    font-weight: 100;
    color: white;
    line-height: var(--custom-lineheight-s);
    text-align: center;
    padding: 0em 0;
    position: absolute;
    z-index: 1;
    transition: opacity 1s ease;
    right: 50%;
    top: 11%;
    transform: translate(50%, -1%);
    height: 58%;
    width: 70%;
    justify-content: center;
    display: flex;
    align-items: center;
    transition-behavior: normal;
}

#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-text:nth-of-type(4) {
    /* right: 23%; */
    /* top: 17%; */
}

#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-bg{
    width: 93%;
}


/* #popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-text.blue-bubbles:before{
    content: url('../img/blue-bubbles.svg');
    display: block;
    width: var(--jc-bubble-size);
    height: auto;
    display: block;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -40%);
}
#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-text.orange-bubbles:before{
    content: url('../img/orange-bubbles.svg');
    display: block;
    width: var(--jc-bubble-size);
    height: auto;
    display: block;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#popUps-container-2 .popUp-content-left .popUp-bubbles-wrapper .popUp-bubble-text.green-bubbles:before{
    content: url('../img/green-bubbles.svg');
    display: block;
    width: var(--jc-bubble-size);
    height: auto;
    display: block;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */


#popUps-container-2 .popUp-content-right{
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

#popUps-container-2 .popUp-img-container{
    position: relative;
}

#popUps-container-2 .popUp-content-img{
    width: 100%;
    transition: opacity 1s ease;
}

#popUps-container-2 .popUp-tabs-container{
    list-style: none;
    width: 100%;
    padding: 0;
    margin-top: 2em;
}

#popUps-container-2 .popUp-tabs-container .popUp-tabs{
    color: var(--jc-grey);
    font-family: 'MYuenHK-Medium';
    display: inline-block;
    width: 21%;
    margin-right: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 4px solid var(--jc-grey);
    cursor: pointer;
    text-align: center;
}

#popUps-container-2 .popUp-tabs-container .popUp-tabs:hover,
#popUps-container-2 .popUp-tabs-container .popUp-tabs.isActive{
    color: var(--jc-darkorange);
    border-bottom: 4px solid var(--jc-darkorange);
}


/* Homepage Panel 4 */
.panel-title{
    width: fit-content;
    text-align: left;
}

section.panel-4{
    padding: var(--custom-padding-l) 0;
}

section.panel-4 .panel-wrapper{
    width: var(--custom-width-l);
    max-width: var(--custom-maxWidth-l);
    background-color: var(--jc-bg-color);
    border-radius: 2em;
    padding: var(--custom-padding-l) var(--custom-padding-s);
}

.dev-map-container{
    width: 80%;
    max-width: var(--custom-maxWidth-s);
    margin: 0 auto;
}

.dev-map-container .dev-map-wrapper{
    position: relative;
}

.dev-map-container .dev-map-wrapper .dev-map{
    width: 100%;
    margin: 0 auto;
}

.dev-map-container .dev-map-wrapper .dev-map-pins{
    position: absolute;
    width: 3.2%;
}

.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-1{
    top: 3.7%;
    left: 50.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-2{
    top: 27%;
    left: 68%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-3{
    top: 30.8%;
    left: 36.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-4{
    top: 32.9%;
    left: 80.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-5{
    top: 39.5%;
    left: 24.7%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-6{
    top: 43.9%;
    left: 41.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-7{
    top: 47.5%;
    left: 50.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-8{
    top: 50.8%;
    left: 55.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-9{
    top: 49.8%;
    left: 69.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-10{
    top: 64.8%;
    left: 47.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-11{
    top: 63.8%;
    left: 59.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-12{
    top: 76.8%;
    left: 42.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-13{
    top: 77.8%;
    left: 65.1%;
}
.dev-map-container .dev-map-wrapper .dev-map-pins.dev-map-pin-14{
    top: 75.1%;
    left: 70.6%;
}

.phases-line-container{
    margin-top: var(--custom-margin-l);
    margin-bottom: calc(var(--custom-margin-l));
}


.phases-line-container .phases-line-wrapper{
    position: relative;
}

.phases-line-container .phases-line-wrapper .phases-line{
    width: 90%;
    margin: 0 auto;
}

.phases-line-container .phases-line-wrapper .phases-line-tags{
    position: absolute;
    width: 15%;
    top: -10%;
    left: 0;
    transition: opacity 0.2s ease;
    opacity: 0;
}

.phases-line-container .phases-line-wrapper .phases-line-tag-1{
    width: 15%;
    top: -95%;
    left: 10.7%;
}
.phases-line-container .phases-line-wrapper .phases-line-tag-2{
    width: 15%;
    top: -95%;
    left: 41.7%;
}
.phases-line-container .phases-line-wrapper .phases-line-tag-3{
    width: 22.2%;
    top: -106%;
    left: 72.7%;
}

.phases-line-container .phases-line-wrapper .phase-textBox{
    width: 79%;
    position: absolute;
    bottom: -110%;
    left: 10.2%;
    transition: opacity 0.2s ease;
    opacity: 0;
}

.phases-line-container .phases-line-wrapper .phase-textBox-1{
    width: 79%;
    position: absolute;
    bottom: -90%;
    left: 10%;
}
.phases-line-container .phases-line-wrapper .phase-textBox-2{
    width: 79%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    max-width: 1222px;
    transform: translate(-50%, 100%);
}
.phases-line-container .phases-line-wrapper .phase-textBox-3{
    width: 79%;
    position: absolute;
    bottom: -85%;
    left: 14.2%;
}

.phases-line-container .phases-labels{
    position: absolute;
    width: 12em;
}

.phases-line-container .phases-label-1{
    left: 11.7%;
    width: 11vw;
    top: 13%;
}

.phases-line-container .phases-label-2{
    left: 41%;
    width: 14vw;
    top: 2%;
}

.phases-line-container .phases-label-3{
    left: 71.4%;
    width: 15vw;
}




/* Homepage Panel 6 */
.panel-6 .panel-wrapper .panel-content{
    display: flex;
    flex-direction: row;
}
.panel-6 .panel-wrapper .panel-content .panel-content-left{
    width: 50%;
    position: relative;
    height: 100vh;
}
.panel-6 .panel-wrapper .panel-content .panel-content-right{
    width: 50%;
}

.horizontalScroll{
    overflow:hidden;
    position: relative;
    display: flex;
}

.horizontal-wrapper {
  display: flex;
  width: 300%; /* Total width based on the number of panels (3 * 100%) */
  height: 100vh;
}

.cards {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.card:first-of-type{
    margin-left: 10%;
}


/* Trial Horizontal Scroller */

#horizontal-scroll{
    position: relative;
    display: flex;
    width: 100%;
    /* height: 300vh; */
    z-index: 2;
    overflow-x: hidden;
}
.horizontal-container{
    display: flex;

}
#horizontal-scroll .content{
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 32px;
    text-transform: uppercase;
}


#horizontal-scroll .horizontal-container{
    display: flex;
}

#horizontal-scroll .content:nth-child(1){
    background: var(--jc-blue);
}
#horizontal-scroll .content:nth-child(2){
    background: var(--jc-red);
}
#horizontal-scroll .content:nth-child(3){
    background: var(--jc-orange);
}
#horizontal-scroll .content:nth-child(4){
    background: var(--jc-green);
}

/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section-slides {
  height: auto;
  margin-top: -1px;
  overflow: hidden;
}

.section-slides .slides-content{
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    margin-left: 5.5%;
}

.section-slides .slides-content p{
    position: relative;
    padding-left: 1.2em;
    color: white;
    margin-bottom: 1.4em;
}

.section-slides .slides-content h1{
    color: white;
    font-size: var(--custom-fontsize-l-xs);
    line-height: var(--custom-lineheight-h2);
    letter-spacing: vaR(--custom-letterspacing-h3);
    position: relative;
    padding-left: 0.3em;
    width: 70%;
    text-wrap: nowrap;
}

.section-slides .slides-content .banner-img{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section-slides .slides-content .orange-banner{
    background-image: url('../img/orange-banner-bg-1.svg');
    width: 7.5em;
    height: 117%;
    position: absolute;
    top: -0.1em;
    left: -0.1em;
    z-index: -1;
}

.section-slides .slides-content .green-banner-3{
    background-image: url('../img/green-banner-bg-3.svg');
    background-position: left;
    width: 30em;
    height: 172%;
    position: absolute;
    top: -0.7em;
    left: -0.1em;
    z-index: -1;
}
.section-slides .slides-content .green-banner-4{
    background-image: url('../img/green-banner-bg-4.svg');
    background-position: left;
    width: 35em;
    height: 172%;
    position: absolute;
    top: -0.7em;
    left: -0.1em;
    z-index: -1;
}

.section-slides .slides-content .slides-content-text{
    text-align: left;
    margin-top: 3.6em;
}

.slides-container{
    display: flex;
    height: auto;
    overflow: hidden;
    flex-direction: row;
    width: 50%;
    padding-left: 9em;
    mask-image: linear-gradient(to left, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 80%, transparent 100%);
    background-image: url("../img/gridlines-img.svg");
    background-position: center;
    background-size: 290%;
}

/* .slide:first-child{
  flex-shrink: 0;
} */

/* .slide:first-child{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fcbf49;
} */

.slides {
  display: flex;
  width: 100%;
  overflow:hidden;
}

.slide span{
    font-family: "MYuenHK-SemiBold";
    line-height: 0;
}

.slide figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    scale: 0.7;
    /* opacity: 0; */
    margin: 0;
    position: relative;
    width: 23vw;
    height: 100vh;
    transition: scale 0.2s ease-out;
    /* animation: jc-scale-up 1s reverse; */
}

.slide.isActive figure{
    opacity: 1;
    scale: 0.95;
    /* animation: jc-scale-up;
    animation-duration: 0.3s;
    animation-timing-function: ease-in; 
    animation-fill-mode: alternate; */
}

.slide img {
  width: 68%;
  object-fit: contain;
  margin-bottom: 1.5em;
}

.slide figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
}

.slide .caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.slide .caption > * {
  display: inline-block;
  padding: 5px 15px;
  font-weight: bold;
  text-align: center;
}

.slide .heading {
  margin-bottom: 0.7em;
  font-family: "ZenMaruGothic-Medium";
  font-weight: 100;
  font-size: var(--custom-fontsize-l);
  line-height: normal;
  color: white;
  background: var(--jc-green);
  padding: 0em 0.45em;
  padding-bottom: 0.05em;
  border-radius: 2em;
}

.slide:nth-of-type(2) .heading {
    background: var(--jc-red);
}
.slide:nth-of-type(3) .heading {
    background: var(--jc-blue);
}
.slide:nth-of-type(4) .heading {
    background: var(--jc-orange);
}

.slide .content {
    font-size: var(--custom-fontsize-m);
    opacity: 0;
    color: var(--jc-darkorange);
    line-height: var(--custom-lineheight-h3);
    margin: 0;
    transition: opacity 0.4s ease-in;
}

.slide.isActive .content {
    opacity: 1;
}

/* 

section.panel.scrollCards .panel-wrapper .scrollCards-container{
    width: 100%;
    height: 100%;
    max-width: inherit;
}

section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard{
    height:100vh;
    width:100%;
    display:flex;
    justify-self: center;
    align-items: center;
    border: 1px solid grey;
    background-color: lightgrey;

}

section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard h1,
section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard p{
    position:sticky;
    top:10%;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 50vh;

}



section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard{
    position: sticky;
    top:0;
}

section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard:nth-of-type(1){
    z-index: 1;
}
section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard:nth-of-type(2){
    z-index: 2;
}
section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard:nth-of-type(3){
    z-index: 3;
}
section.panel.scrollCards .panel-wrapper .scrollCards-container .scrollCard:nth-of-type(4){
    z-index: 4;
} */

.hidden{
    display: none !important;
    opacity: 0;
}



/*** OverWrite All Css ***/
.isSticky{
    position: sticky !important;
    top: 0;
    border-top-left-radius: var(--custom-panel-border-radius);
    border-top-right-radius: var(--custom-panel-border-radius);
}

.panel-2{
    margin-top: -10%;
    background-color: transparent;
    border-radius: 0;
}

.hideFromView{
    display: none;
    z-index: -3;
    opacity: 0;
}

.panel-sections-container .panel-section-img img.childplay-decors{
    position: absolute;
    width: 6em;
    bottom: 0;
    right: -2em;
}

.panel-sections-container .panel-section-img img.childplay-decor-1{
    width: 6.3em;
    bottom: 0;
    right: -2em;
}
.panel-sections-container .panel-section-img img.childplay-decor-2{
    width: 7em;
    bottom: 1em;
    right: auto;
    left: -2em;
}
.panel-sections-container .panel-section-img img.childplay-decor-3{
    width: 5em;
    bottom: 1em;
    right: auto;
    left: 1.5em;
}
.panel-sections-container .panel-section-img img.childplay-decor-4{
    width: 6em;
    bottom: 2em;
    left: 16em;
    right: auto;
}
.panel-sections-container .panel-section-img img.childplay-decor-5{
    width: 6em;
    bottom: 0;
    right: 1em;
}
.panel-sections-container .panel-section-img img.childplay-decor-6{
    width: 6em;
    bottom: 3em;
    right: -3em;
}