@font-face {
    font-family: "MADE Tommy Soft Bold";
    src: url("../font/made_tommy_soft/MADE\ Tommy\ Soft\ Bold\ PERSONAL\ USE.otf");

}

@font-face {
    font-family: "MADE Tommy Soft Light";
    src: url("../font/made_tommy_soft/MADE\ Tommy\ Soft\ Light\ PERSONAL\ USE.otf");
}

@font-face {
    font-family: "MADE Tommy Soft Reguler";
    src: url("../font/made_tommy_soft/MADE\ Tommy\ Soft\ Regular\ PERSONAL\ USE.otf");
}

@font-face {
    font-family: "MADE Tommy Soft Medium";
    src: url("../font/made_tommy_soft/MADE\ Tommy\ Soft\ Medium\ PERSONAL\ USE.otf");
}

:root{
    --subtitle-title-xss: 12px;
    --subtitle-title-xs: 18px;
    --subtitle-title-sm: 22px;
    --subtitle-title-md: 28px;
    --subtitle-title-lg: 34px;
    --subtitle-title-xl: 40px;


    --size-text-border-xsss: 9px; /*< - */
    --size-text-border-xss: 12px; /*< 576 */
    --size-text-border-xs: 14px; /* 576 */
    --size-text-border-sm: 24px; /* 768 */
    --size-text-border-md: 26px; /* 992 */
    --size-text-border-lg: 30px; /* 1200 */
    --size-text-border-xl: 34px; /* 1400*/

    --padding-text-border-xsss: 3px 10px; 
    --padding-text-border-xss: 3px 20px; 
    --padding-text-border-xs: 5px 28px;
    --padding-text-border-sm: 5px 30px;
    --padding-text-border-md: 6px 34px;
    --padding-text-border-lg: 6px 38px;
    --padding-text-border-xl: 6px 40px;

    --title-section-xss: 18px;
    --title-section-xs: 24px; 
    --title-section-sm: 30px; 
    --title-section-md: 40px; 
    --title-section-lg: 45px; 
    --title-section-xl: 50px; 

    --subtitle-section-xsss: 12px;
    --subtitle-section-xss: 14px;
    --subtitle-section-xs: 18px;
    --subtitle-section-sm: 22px;
    --subtitle-section-md: 20px;
    --subtitle-section-lg: 22px;
    --subtitle-section-xl: 26px;

    --subtitle-section-cs-xsss: 8px;
    --subtitle-section-cs-xss: 12px;
    --subtitle-section-cs-xs: 14px;
    --subtitle-section-cs-sm: 18px;
    --subtitle-section-cs-md: 24px;
    --subtitle-section-cs-lg: 26px;
    --subtitle-section-cs-xl: 30px;

    --checklist-icon-xsss: 10px;
    --checklist-icon-xss: 14px;
    --checklist-icon-xs: 20px;
    --checklist-icon-sm: 22px;
    --checklist-icon-md: 24px;
    --checklist-icon-lg: 26px;
    --checklist-icon-xl: 26px;

    --checklist-title-xss: 14px;
    --checklist-title-xs: 20px;
    --checklist-title-sm: 22px;
    --checklist-title-md: 24px; 
    --checklist-title-lg: 26px; 
    --checklist-title-xl: 26px; 

    --checklist-subtitle-xsss: 10px; 
    --checklist-subtitle-xss: 14px; 
    --checklist-subtitle-xs: 20px; 
    --checklist-subtitle-sm: 22px; 
    --checklist-subtitle-md: 24px; 
    --checklist-subtitle-lg: 26px; 
    --checklist-subtitle-xl: 26px;

    --checklist-subtitle-kkal-du-xss: 6px;
    --checklist-subtitle-kkal-du-xs: 12px;
    --checklist-subtitle-kkal-du-sm: 16px;
    --checklist-subtitle-kkal-du-md: 18px;
    --checklist-subtitle-kkal-du-lg: 24px;
    --checklist-subtitle-kkal-du-xl: 28px;

    --button-text-xss: 22px;
    --button-text-xs: 24px;
    --button-text-sm: 26px;
    --button-text-md: 32px;
    --button-text-lg: 34px;
    --button-text-xl: 34px;

    --button-padding-xss: 3px 24px; 
    --button-padding-xs: 3px 28px; 
    --button-padding-sm: 3px 30px; 
    --button-padding-md: 4px 35px; 
    --button-padding-lg: 3px 40px; 
    --button-padding-xl: 3px 40px; 

    --color-blue: #0156B9;
    --color-orange: #e7a61a;
    --color-light: #FFFFFF;
    --color-dark: #000000;

    --text-light: "MADE Tommy Soft Light";
    --text-reguler: "MADE Tommy Soft Reguler";
    --text-medium: "MADE Tommy Soft Medium";
    --text-bold: "MADE Tommy Soft Bold";

    --icon-jempol-xsss: 12px;
    --icon-jempol-xss: 20px;
    --icon-jempol-xs: 35px;
    --icon-jempol-sm: 40px;
    --icon-jempol-md: 45px;
    --icon-jempol-lg: 50px;
    --icon-jempol-xl: 60px;

    --radius-text-border:  60px 60px 60px 60px;

    --title-section-6-xsss: 10px;
    --title-section-6-xss: 12px;
    --title-section-6-xs: 14px;
    --title-section-6-sm: 18px;
    --title-section-6-md: 22px;
    --title-section-6-lg: 24px;
    --title-section-6-xl: 30px;

    --subtitle-section-6-xsss: 8px;
    --subtitle-section-6-xss: 12px;
    --subtitle-section-6-xs: 14px;
    --subtitle-section-6-sm: 16px;
    --subtitle-section-6-md: 20px;
    --subtitle-section-6-lg: 22px;
    --subtitle-section-6-xl: 26px;

    --icon-section-6-xsss: 24px;
    --icon-section-6-xss: 30px;
    --icon-section-6-xs: 26%;
    --icon-section-6-sm: 24%;
    --icon-section-6-md: 20%;
    --icon-section-6-lg: 18%;
    --icon-section-6-xl: 18%;

    --text-logo-6-xsss: 16px;
    --text-logo-6-xss: 18px;
    --text-logo-6-xs: 20px;
    --text-logo-6-sm: 22px;
    --text-logo-6-md: 26px;
    --text-logo-6-lg: 32px;
    --text-logo-6-xl: 40px;

    --h-icon-section-6-xsss: 30px;
    --h-icon-section-6-xss: 32px;
    --h-icon-section-6-xs: 34px;
    --h-icon-section-6-sm: 36px;
    --h-icon-section-6-md: 38px;
    --h-icon-section-6-lg: 40px;
    --h-icon-section-6-xl: 44px;

    --btn-join-title-xsss: 12px;
    --btn-join-title-xss: 18px;
    --btn-join-title-xs: 20px;
    --btn-join-title-sm: 22px;
    --btn-join-title-md: 24px;
    --btn-join-title-lg: 26px;
    --btn-join-title-xl: 28px;

    --btn-join-p-xsss: 3px 26px;
    --btn-join-p-xss: 3px 28px;
    --btn-join-p-xs: 3px 30px;
    --btn-join-p-sm: 3px 32px;
    --btn-join-p-md: 4px 35px;
    --btn-join-p-lg: 5px 35px;
    --btn-join-p-xl: 5px 36px;

    --cs-chevron-xsss: 16px;
    --cs-chevron-xss: 18px;
    --cs-chevron-xs: 20px;
    --cs-chevron-sm: 24px;
    --cs-chevron-md: 26px;
    --cs-chevron-lg: 30px;
    --cs-chevron-xl: 35px;

    --text-border-w-xsss: 1px;
    --text-border-w-xss: 2px;
    --text-border-w-xs: 3px;
    --text-border-w-sm: 3px;
    --text-border-w-md: 3px;
    --text-border-w-lg: 4px;
    --text-border-w-xl: 4px;

    --cs-p-giminori-xsss: 1.5rem;
    --cs-p-giminori-xss: 3rem;
    --cs-p-giminori-xs: 3.3rem;
    --cs-p-giminori-sm: 2.4rem;
    --cs-p-giminori-md: 5.2rem;
    --cs-p-giminori-lg: 7.6rem;
    --cs-p-giminori-xl: 10rem;

}

/* ================================================== */
/* content 1 */
.text-bawah-logo {
    font-size: var(--subtitle-title-xss);
    color: var(--color-blue);
    font-family: var(--text-reguler);
}
.text-border {
    display: inline-block;
    border-radius: var(--radius-text-border);
    -moz-border-radius: var(--radius-text-border);
    -webkit-border-radius: var(--radius-text-border);
    border: 3px solid var(--color-orange);
    background-color: var(--color-light);
    text-align: center;
    color: var(--color-blue);
    padding: var(--padding-text-border-xsss);
    border-width: var(--text-border-w-xsss);
    font-size: var(--size-text-border-xsss);
    font-family: var(--text-light);
    /* letter-spacing: 1.4px;  text jadi rusak*/
    letter-spacing: 1.2px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-blue);
}
.banner1 {
    background-image: url(../img/bg1.png);
    background-size: cover;
    background-position: center;
}
.image-content-yum {
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-icon-checked{
    font-size: var(--checklist-icon-xsss);
    color: var(--color-blue);
}
.checklist-title{
    font-size: var(--checklist-title-xss);
    font-family: var(--text-reguler);
    color: var(--color-blue);
    white-space: pre-line;
    -webkit-text-stroke-width: 0;
}
.checklist-subtitle{
    font-size: var(--checklist-subtitle-xsss);
    font-family: var(--text-light);
    color: var(--color-blue);
}
h5.checklist-subtitle { line-height: 33px; }
.v-mobile{
    font-size: 10px !important;
    font-family: var(--text-light);
    color: var(--color-blue);
}
.img-product-1{
    max-width: 90%; 
    height: auto; 
    object-fit: cover;
    display: flex;
    margin: 0 auto;
}

/* content-2 */
.title-section{
    font-size: var(--title-section-xss);
    color: var(--color-blue);
    font-family: var(--text-reguler);
    -webkit-text-stroke-width: 0.5px;
}
.subtitle-section{
    color: var(--color-blue);
    font-size: var(--subtitle-section-xsss);
    font-family: var(--text-reguler);
    margin: 1% 0;
}
.subtitle-section-cs{
    color: var(--color-blue);
    font-size: var(--subtitle-section-cs-xsss);
    font-family: var(--text-reguler);
    color: var(--color-blue);
}
.icon-jempol{
    color: var(--color-blue);
    max-width: var(--icon-jempol-xsss);
}
.gambar-content-2 {
    max-width: 180%;
    top: 50%;
    left: 40%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.section-2{
    padding-top: 2em;
}
.content-3_3-penataan{
    padding-top: 1rem;
    padding-bottom: 1.2rem;
}

/* content 3 */
.gambar-content-3 {
    max-width: 130%;
    top:50%;
    left: 40%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(10deg);
}
.custom-padding{
    padding-top: 0.1rem;
}
.checklist-title-popcorn{
    color: var(--color-blue);
    font-family: var(--text-reguler);
    font-size: var(--title-popcorn-xss);
}
.gambar-content-4 {
    max-width: 130%;
    top: 62%;
    left: 60%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(5deg);
}
.content-3{
    padding-top: 2em;
}
.rounded-card {
    border-radius: 25px !important;
}
.banner2 {
    background-image: url(../img/n_023_06_ASSET_WEB.webp);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top;
    background-size: cover;
}
.gambar-content-8 {
    position: absolute;
    width: 25%;
    bottom: 10%;
    right: -3%;
    transform: rotate(25deg);
}
.cs-product-giminori{
    width: 65%;
    z-index: 1;
    top: 2%;
    position: absolute;
    right: -4%;  
}
/* content 3 */

.custom-padding-kkal-du{
    margin-top: 1rem;
}
.cs-text-padding{
    padding-top: 0.5rem;
}
.text-padding-kkal-du{
    padding-top: 1rem;
    font-family: MADE Tommy Soft Reguler;
}

.banner-section-3{
    padding-top: 1em; 
    max-width: 70%;
    margin-top: 1.5em;
}
.banner3 {
    background-image: url(../img/background-03.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: bottom;
    max-height: 360vh;
    padding-bottom: 2rem;
}
.cs-wrapper-people-banner-3{
    position: absolute;
    top: 5%;
    left: -7%;
}
.cs-people-banner-3{
    max-width: 35%;
}
.cs-padding-banner-3{
    padding-top: 3rem;
}
.title-banner-3{
    color: var(--color-orange);
    font-size: var(--title-section-6-xsss);
    font-family: var(--text-reguler);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 30px;
    margin: 4px 0 0;
    font-weight: 400;
    margin-top: 10px;
}
.subtitle-banner-3{
    padding-top: 4px;
    color: var(--color-blue);
    font-size: var(--subtitle-section-6-xsss);
    font-family: var(--text-light);
}
.icon-banner-3{
    width: auto;
    height: var(--h-icon-section-6-xsss);
    color: var(--color-blue);
}

.wrapper-card-banner-3{
    padding-top: 1.5rem;
}

.banner-join{
    background-image: url(../img/SL-031821-41530-36.webp);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top;
    padding-bottom: 1.5rem;
    background-size: cover;
}

.cs-text-yuk-cuan-bareng{
    max-width: 100%;
}

.cs-btn-join{
    font-size: var(--btn-join-title-xsss);
    font-family: var(--text-light);
    display: inline-block;
    border-radius: var(--radius-text-border);
    -moz-border-radius: var(--radius-text-border);
    -webkit-border-radius: var(--radius-text-border);
    background-color: var(--color-blue);
    text-align: center;
    color: var(--color-light);
    padding: var(--btn-join-p-xsss);
}

.banner5 {
    background-image: url(../img/bg1.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover;
    padding-bottom: 1rem;
}
.cs-content-produk-andalan{
    color: var(--color-blue);
    margin-top: 1rem; 
    font-family: var(--text-reguler);
}

.text-logo-6 {
    font-size: var(--text-logo-6-xsss);
    color: #5CA7DE;
    font-family: var(--text-medium);
}

.iframe-container {
    position: relative;
    margin: 0;
    width: 10em;
    display: inline-block;
    margin-top: 2rem;
    width: 70%;
    padding: 0 0 35%;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cs-star-right{
    right: 7%;
    bottom: 9%;
}
.cs-star-left{
    left: 6%;
    top: 55%;
}

.banner6{
    background-image: url(../img/bg1.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover;
    padding-bottom: 2rem;
}
.rs-p-banner-6{
    padding-top: 1.2em;
}
.cs-content-faq-title{
    font-size: 22px; 
    color: #0156B9; 
    font-family: "MADE Tommy Soft Reguler";
}
.cs-content-faq-subtitle{
    padding-left: 1.5em; 
    font-size: 16px;
    color: #0156B9; 
    font-family: "MADE Tommy Soft Light";
}

.banner7 {
    background-image: url(../img/SL-031821-41530-36.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* height: 60vh; */
    padding-bottom: 3rem;
    position: relative;
}

.cs-gradient-card{
    background: hsla(207, 79%, 95%, 1);
    background: linear-gradient(45deg, hsla(207, 79%, 95%, 1) 0%, hsla(210, 75%, 98%, 1) 35%, hsla(0, 0%, 100%, 1) 100%);
    background: -moz-linear-gradient(45deg, hsla(207, 79%, 95%, 1) 0%, hsla(210, 75%, 98%, 1) 35%, hsla(0, 0%, 100%, 1) 100%);
    background: -webkit-linear-gradient(45deg, hsla(207, 79%, 95%, 1) 0%, hsla(210, 75%, 98%, 1) 35%, hsla(0, 0%, 100%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#E6F2FC", endColorstr="#F8FBFE", GradientType=1 );    
}

.cs-max-width-product{
    max-width: 75%;
}
.cs-max-width-kkal-du{
    max-width: 110%;
}

.banner4 {
    background-image: url(../img/SL-031821-41530-36.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    height: 40vh;
}

.text-kkaldu{
    color: #0156B9; 
    font-size: 32px; 
    padding-top: 2em; 
    font-family: "MADE Tommy Soft Reguler";
}
.text-taburan{
    font-size: 20px; 
    color: #0156B9; 
    font-family: "MADE Tommy Soft Reguler";
}
.cs-cs-text-kkal-du{
    font-size: 16px;
}
.text-md-start{
    font-size: 16px;
    color: #0156B9;
}

.custom-p-popcorn{
    margin-top: 1.5rem;
}
.custom-p-kkal-du{
    margin-top: 2rem;
}
.content-5 {
    padding-top: 4em;
    padding-bottom: 2.5rem;
}
.checklist-subtitle-kkal-du{
    color: var(--color-blue);
    font-family: var(--text-reguler);
    font-size: var(--checklist-subtitle-kkal-du-xss);
}
.custom-padding-content-4{
    margin-top: 11rem;
}
.gambar-content-5{
    max-width: 90%;
    position: absolute;
    top: -16%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cs-chevron{
    color: var(--color-orange); 
    font-size: var(--cs-chevron-xsss);
}
.cs-p-faq{
    padding-top: 1.5em;
}
.content-8-penataan{
    padding-top: 2em;
}

.cs-p-checklist{
    padding-top: 0.2em;
}
.cs-p-checklist-1{
    padding-top: 0.4em;
}
.cs-p-checklist-2{
    padding-top: 0.2em;
}
.cs-p-checklist-4{
    padding-top: 0.2em;
}

/* padding-left: 2.3rem;
padding-left: 2.3rem; 481
padding-left: 3rem; 57
padding-left: 1.8rem; 375
padding-left: 2.6rem; 1400 */

.cs-p-giminori{
    padding-left: var(--cs-p-giminori-xsss);
}
.rs-p-banner-9{
    padding-top: 1.75em;
}
.rs-p-banner-2{
    padding-top: 1.4em;
}

.rs-p-varian-giminori{
    padding-bottom: 0.7em;
    margin-bottom: 0.1em;
}
@media (min-width: 481px){
    .cs-p-checklist-2{
        padding-top: 0.2em;
    }
    .cs-p-checklist-1{
        padding-top: 0.3em;
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-xss);
    }
    .cs-p-checklist{
        padding-top: 0.3rem;
    }
    .cs-p-checklist-3{
        padding-top: 1.5rem;
    }
    .cs-product-giminori{
        top:-1%;
        right: -4%;  
    }
    .content-8-penataan{
        padding-top: 2em;
    }
    .cs-p-faq{
        padding-top: 1.5em;
    }
    .cs-content-produk-andalan{
        margin-top: 1rem; 
    }
    .cs-chevron{
        font-size: var(--cs-chevron-xss);
    }
    .v-mobile{
        font-size: initial;
    }
    .cs-btn-join{
        font-size: var(--btn-join-title-xss);
        padding: var(--btn-join-p-xss);
    }
    .cs-text-padding{
        padding-top: 0;
    }

    .text-logo-6 {
        font-size: var(--text-logo-6-xss);
        color: #5CA7DE;
        font-family: var(--text-medium);
    }
    .banner-section-3{
        padding-top: 3em; 
        max-width: 70%;
    }
    .cs-wrapper-people-banner-3{
        top: 6.5%;
        left: -8%;
        position: absolute;
    }
    .cs-people-banner-3{
        max-width: 45%;
    }
    .cs-padding-banner-3{
        padding-top: 5.5rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-xss);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 30px;
    }
    .subtitle-banner-3{
        font-size: var(--subtitle-section-6-xss);
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-xss);
    }
    .wrapper-card-banner-3{
        padding-top: 1.5rem;
    }

    .gambar-content-8 {
        position: absolute;
        width: 25%;
        bottom: 8%;
        right: -1%;
        transform: rotate(25deg);
    }
    .gambar-content-5{
        max-width: 90%;
        position: absolute;
        top: -3%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .custom-p-kkal-du{
        margin-top: 7rem;
    }
    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-xss);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-xss);
        border-width: var(--text-border-w-xss);
        font-size: var(--size-text-border-xss);
        font-family: var(--text-light);
        letter-spacing: 0;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    .image-content-yum {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-xss);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-xss);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-xss);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 90%; 
        height: auto; 
        object-fit: cover;
        display: flex;
        margin: 0 auto;
    }

    /* content-2 */
    .title-section{
        font-size: var(--title-section-xs);
        color: var(--color-blue);
        font-family: var(--text-medium);
        -webkit-text-stroke-width: 0;
    }
    .subtitle-section{
        color: var(--color-blue);
        font-size: var(--subtitle-section-xs);
        font-family: var(--text-reguler);
        margin: 1% 0;
        /* display: flex;
        white-space: nowrap; */
    }
    .subtitle-section-cs{
        color: var(--color-blue);
        font-size: var(--subtitle-section-cs-xs);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .icon-jempol{
        color: var(--color-blue);
        max-width: var(--icon-jempol-xss);
    }
    .gambar-content-2 {
        max-width: 160%;
        top: 50%;
        left: 32%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .section-2{
        padding-top: 4em;
    }

    /* content 3 */
    .gambar-content-3 {
        max-width: 100%;
        top: 50%;
        left: 45%;
        position: relative;
        transform: translate(-50%, -50%) rotate(10deg);
    }
    .custom-padding{
        padding-top: 0;
    }
    .checklist-title-popcorn{
        color: var(--color-blue);
        font-family: var(--text-reguler);
        font-size: var(--title-popcorn-xs);
    }
    .gambar-content-4 {
        max-width: 110%;
        top: 65%;
        left: 55%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .content-3{
        padding-top: 4em;
    }

    .content-5 {
        margin-top: 1rem;
        padding-top: 5em;
        padding-bottom: 4rem;
    }
    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-xs);
    }
    .custom-padding-content-4{
        margin-top: 11rem;
    }
}

@media (min-width: 576px) {
    .rs-p-varian-giminori{
        padding-bottom: 1em;
        margin-bottom: 0.5em;
    }
    .cs-p-checklist-4{
        padding-top: 0.3em;
    }
    .rs-p-banner-2{
        padding-top: 2.5em;
    }
    .rs-p-banner-9{
        padding-top: 3.5em;
    }
    .cs-p-checklist-2{
        padding-top: 0.3em;
    }
    .cs-p-checklist{
        padding-top: 0.3em;
    }
    .cs-p-checklist-1{
        padding-top: 0.3em;
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-xs);
    }
    .content-5 {
        margin-top: 4rem;
    }
    .content-8-penataan{
        padding-top: 2em;
    }
    .cs-p-faq{
        padding-top: 1.5em;
    }
    .cs-content-produk-andalan{
        margin-top: 1rem; 
    }
    .cs-chevron{
        font-size: var(--cs-chevron-xs);
    }
    .banner-section-3{
        padding-top: 3em; 
        max-width: 75%;
    }
    .cs-wrapper-people-banner-3{
        position: absolute;
        top: 5%;
        left: -8%;
        width: 60%;
    }
    .cs-people-banner-3{
        max-width: 40%;
    }
    .cs-padding-banner-3{
        padding-top: 6rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-xs);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 40px;
    }
    .subtitle-banner-3{
        font-size: var(--subtitle-section-6-xs);
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-xs);
    }

    .gambar-content-8{
        bottom: 7%;
        right: -1%;
        transform: rotate(25deg);
    }
    .custom-p-kkal-du{
        margin-top: 10rem;
    }
    .text-kkaldu{
        font-size: 34px; 
        padding-top: 2.5em;
    }
    .text-taburan{
        font-size: 22px;
    }
    .cs-cs-text-kkal-du{
        font-size: 18px;
    }
    .text-md-start{
        font-size: 18px;
    }
    .cs-cs-title{
        width: 140%;
        left: 0;
        position: absolute;
    }
    .content-3_3-penataan{
        padding-top: 2rem;
    }
    .gambar-content-4 {
        max-width: 110%;
        top: 65%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .text-taburan{
        font-size: 30px;
    }
    .subtitle-crunchy{
        font-size: 16px;
    }
    .text-crunchy{
        font-size: 20px;
    }
    
    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-xs);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-xs);
        border-width: var(--text-border-w-xss);
        font-size: var(--size-text-border-xs);
        font-family: var(--text-light);
        letter-spacing: 0;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    
    .image-content-yum {
        margin-top: 2%;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-xs);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-xs);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-xs);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 100%; 
        height: auto; 
        object-fit: cover;
    }

    /* ===================== */
    .cs-btn-join{
        font-size: var(--btn-join-title-xs);
        padding: var(--btn-join-p-xs);
    }
    /* ===================== */

    /* content-2 */
    .title-section{
        font-size: var(--title-section-sm);
        color: var(--color-blue);
        font-family: var(--text-medium);
    }
    .subtitle-section{
        color: var(--color-blue);
        font-size: var(--subtitle-section-sm);
        font-family: var(--text-reguler);
        margin: 3% 0;
    }
    .subtitle-section-cs{
        color: var(--color-blue);
        font-size: var(--subtitle-section-cs-sm);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .icon-jempol{
        color: var(--color-blue);
        max-width: var(--icon-jempol-xs);
    }
    .gambar-content-2 {
        max-width: 165%;
        top: 50%;
        left: 38%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .section-2{
        padding-top: 4em;
    }

    /* content 3 */
    .gambar-content-3 {
        max-width: 120%;
        top: 15%;
        left: 36%;
        position: relative;
        transform: translate(-50%, -50%) rotate(10deg);
    }
    .custom-padding{
        padding-top: 0;
    }
    .gambar-content-4 {
        max-width: 120%;
        top: 75%;
        left: 57%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .content-3{
        padding-top: 4rem;
    }

    .gambar-content-5{
        max-width: 90%;
        position: absolute;
        top: -3%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-sm);
    }
    .custom-padding-content-4{
        margin-top: 14rem;
    }
    .cs-people-banner-3{
        max-width: 70%;
    }
    
    .banner5 {
        /* height: 170vh; */
        padding-bottom: 1rem;
        /* border: 2px solid saddlebrown; */
    }
    .iframe-container{
        margin-top: 3rem;
    }
    .text-logo-6 {
        font-size: var(--text-logo-6-xs);
        color: #5CA7DE;
        font-family: var(--text-medium);
    }
    .cs-star-right{
        right: 7%;
        bottom: 2%;
    }
    .cs-star-left{
        left: 6%;
        top: 55%;
    }

    .banner6{
        /* height: 240vh; */
        padding-bottom: 4rem;
    }

    .cs-content-faq-title{
        font-size: 24px;
    }
    .cs-content-faq-subtitle{
        padding-left: 1.5em; 
        font-size: 18px;
    }
    .cs-max-width-product{
        max-width: 75%;
    }
    .cs-product-giminori{
        max-width: 70%;
        top: -5%;
        right: -2%; 
    }
    .cs-max-width-kkal-du{
        max-width: 80%;
    }
    .banner7 {
        padding-bottom: 4rem;
    }
    .banner-join{
        padding-bottom: 3rem;
    }
}

@media (min-width: 768px) {
    .rs-p-varian-giminori{
        padding-bottom: 1em;
        margin-bottom: 1.5em;
    }
    .cs-p-checklist-4{
        padding-top: 0.4em;
    }
    .rs-p-banner-9{
        padding-top: 3.5em;
    }
    .rs-p-banner-6{
        padding-top: 3em;
        /* padding-top: 1.2em; */
    }
    .cs-p-checklist-2{
        padding-top: 0.4em;
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-sm);
    }
    .content-8-penataan{
        padding-top: 2.5em;
    }
    .cs-p-faq{
        padding-top: 1.75em;
    }
    .cs-content-produk-andalan{
        margin-top: 2rem; 
    }
    .cs-chevron{
        font-size: var(--cs-chevron-sm);
    }
    .banner-section-3{
        padding-top: 3em; 
        max-width: 75%;
    }
    .cs-wrapper-people-banner-3{
        top: 7%;
        left: -8%;
    }
    .cs-people-banner-3{
        max-width: 65%;
    }
    .cs-padding-banner-3{
        padding-top: 8rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-sm);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 48px;
    }
    .subtitle-banner-3{
        font-size: var(--subtitle-section-6-sm);
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-sm);
    }

    .custom-p-kkal-du{
        margin-top: 8rem;
    }
    .text-kkaldu{
        font-size: 38px; 
        padding-top: 2.3em;
    }
    .text-taburan{
        font-size: 26px; 
    }
    .cs-cs-text-kkal-du{
        font-size: 20px;
    }
    .text-md-start{
        font-size: 20px;
    }
    .cs-cs-title{
        width: 100%;
        left: 0;
        position: absolute;
    }
    .content-3_3-penataan{
        padding-top: 3rem;
    }
    .gambar-content-4 {
        max-width: 120%;
        top: 65%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .subtitle-crunchy{
        font-size: 18px;
    }
    .text-crunchy{
        font-size: 24px;
    }
    
    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-sm);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-sm);
        border-width: var(--text-border-w-sm);
        font-size: var(--size-text-border-sm);
        font-family: var(--text-light);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    
    .image-content-yum {
        margin-top: 0;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-sm);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-sm);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-sm);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 95%; 
        height: auto; 
        object-fit: cover;
        margin: 0 auto;
        display: flex;
    }

    /* content-2 */
    .title-section{
        font-size: var(--title-section-md);
        color: var(--color-blue);
        font-family: var(--text-medium);
    }
    .subtitle-section{
        color: var(--color-blue);
        font-size: var(--subtitle-section-md);
        font-family: var(--text-reguler);
        margin: 6% 0;
    }
    .subtitle-section-cs{
        color: var(--color-blue);
        font-size: var(--subtitle-section-cs-md);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .icon-jempol{
        color: var(--color-blue);
        max-width: var(--icon-jempol-sm);
    }
    .gambar-content-2 {
        max-width: 165%;
        top: 26%;
        left: 40%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .section-2{
        padding-top: 5em;
    }

    /* content 3 */
    .gambar-content-3 {
        max-width: 140%;
        top: 24%;
        left: 35%;
        position: relative;
        transform: translate(-50%, -50%) rotate(10deg);
    }
    .custom-padding{
        padding-top: 0;
    }
    .checklist-title-popcorn{
        color: var(--color-blue);
        font-family: var(--text-reguler);
        font-size: var(--title-popcorn-sm);
    }
    .gambar-content-4 {
        z-index: 1;
        max-width: 140%;
        top: 75%;
        left: 48%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .content-3{
        padding-top: 5rem;
    }

    .gambar-content-5{
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-md);
    }
    .custom-padding-content-4{
        margin-top: 14rem;
    }
    
    .custom-padding-content-4{
        margin-top: 22rem;
    }
    
    .banner5 {
        /* height: 180vh; */
        padding-bottom: 1rem;
        /* border: 2px solid red; */
    }
    .iframe-container{
        margin-top: 4rem;
    }
    .text-logo-6 {
        font-size: var(--text-logo-6-sm);
        color: #5CA7DE;
    }

    .cs-star-right{
        right: 7%;
        bottom: 0%;
    }
    .cs-star-left{
        left: 6%;
        top: 45%;
    }
    .banner6{
        /* height: 230vh; */
        padding-bottom: 4rem;
    }

    .cs-content-faq-title{
        font-size: 26px;
    }
    .cs-content-faq-subtitle{
        padding-left: 1.5em; 
        font-size: 21px;
    }
    .cs-max-width-product{
        max-width: 90%;
    }
    .cs-product-giminori{
        max-width: 65%;
        top: -5%;
        right: -2%;  
    }
    .cs-max-width-kkal-du{
        max-width: 80%;
    }
    .content-5 {
        margin-top: 3rem;
        padding-top: 7em;
        padding-bottom: 6rem;
    }
    .cs-btn-join{
        font-size: var(--btn-join-title-sm);
        padding: var(--btn-join-p-sm);
    }
}
  
@media (min-width: 992px) {
    .rs-p-varian-giminori{
        padding-bottom: 2.2em;
        margin-bottom: 0.6em;
    }
    .rs-p-banner-2{
        padding-top: 3.5em;
    }
    .rs-p-banner-9{
        padding-top: 3.75em;
    }
    .cs-p-checklist-2{
        padding-top: 0.5em;
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-md);
    }
    .content-8-penataan{
        padding-top: 3em;
    }
    .cs-p-faq{
        padding-top: 2em;
    }
    .cs-content-produk-andalan{
        margin-top: 3rem;
    }
    .cs-chevron{
        font-size: var(--cs-chevron-md);
    }
    .banner-section-3{
        padding-top: 3em; 
        max-width: 70%;
    }
    .cs-wrapper-people-banner-3{
        top: 5%;
        left: -8%;
        width: 52%;
    }
    .cs-people-banner-3{
        max-width: 80%;
    }
    .cs-padding-banner-3{
        padding-top: 12rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-lg);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 66px;
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-md);
    }

    .gambar-content-8{
        bottom: 6%;
        right: -2%;
    }
    .text-kkaldu{
        font-size: 40px; 
        padding-top: 2.5em;
    }
    .text-taburan{
        font-size: 28px; 
    }
    .cs-cs-text-kkal-du{
        font-size: 20px;
    }
    .text-md-start{
        font-size: 20px;
    }
    .cs-cs-title{
        width: 100%;
        position: relative;
    }
    .content-3_3-penataan{
        padding-top: 4rem;
    }
    .gambar-content-4 {
        max-width: 120%;
        top: 60%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .subtitle-crunchy{
        font-size: 20px;
    }
    .text-crunchy{
        font-size: 28px;
    }
    .cs-cs-checklist{
        padding-top: 0;
    }

    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-md);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-md);
        border-width: var(--text-border-w-md);
        font-size: var(--size-text-border-md);
        font-family: var(--text-light);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    
    .image-content-yum {
        margin-top: 0;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-md);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-md);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-md);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 95%;
        height: auto; 
        object-fit: cover;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .cs-btn-join{
        font-size: var(--btn-join-title-md);
        padding: var(--btn-join-p-md);
    }
    
    /* content-2 */
    .title-section{
        font-size: var(--title-section-lg);
        color: var(--color-blue);
        font-family: var(--text-medium);
    }
    .subtitle-section{
        color: var(--color-blue);
        font-size: var(--subtitle-section-lg);
        font-family: var(--text-reguler);
        margin: 2% 0;
    }
    .subtitle-section-cs{
        color: var(--color-blue);
        font-size: var(--subtitle-section-cs-lg);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .icon-jempol{
        color: var(--color-blue);
        max-width: var(--icon-jempol-md);
    }
    .gambar-content-2 {
        max-width: 140%;
        top: 26%;
        left: 36%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .section-2{
        padding-top: 6em;
    }

    /* content 3 */
    .gambar-content-3 {
        max-width: 130%;
        top: 20%;
        left: 40%;
        position: relative;
        transform: translate(-50%, -50%) rotate(10deg);
    }
    .checklist-title-popcorn{
        color: var(--color-blue);
        font-family: var(--text-reguler);
        font-size: var(--title-popcorn-lg);
    }
    .gambar-content-4 {
        overflow-clip-margin: content-box;
        overflow: clip;
        z-index: 1;
        max-width: 130%;
        top: 70%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .content-3{
        padding-top: 8rem;
    }
    .custom-p-popcorn{
        margin-top: 3rem;
    }

    .gambar-content-5{
        position: absolute;
        top: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .content-5 {
        margin-top: 3rem;
        padding-top: 13em;
        padding-bottom: 6rem;
    }
    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-lg);
    }
    .custom-padding-content-4{
        margin-top: 14rem;
    }
    
    .custom-padding-content-4{
        margin-top: 32rem;
    }

    .banner5 {
        /* height: 200vh; */
        padding-bottom: 2rem;
        /* border: 2px solid greenyellow; */
    }
    .iframe-container{
        margin-top: 5rem;
    }

    .text-logo-6 {
        font-size: var(--text-logo-6-md);
    }

    .cs-star-right{
        right: 9%;
        bottom: 0%;
    }
    .cs-star-left{
        left: 6%;
        top: 40%;
    }
    .banner6{
        /* height: 210vh; */
        padding-bottom: 5rem;
    }

    .cs-content-faq-title{
        font-size: 28px;
    }
    .cs-content-faq-subtitle{
        padding-left: 1.5em; 
        font-size: 23px;
    }
    .cs-max-width-product{
        max-width: 80%;
    }
    .cs-product-giminori{
        max-width: 65%;
        top: 1%;
        right: -2%; 
    }
    .cs-max-width-kkal-du{
        max-width: 90%;
    }
    .banner7 {
        padding-bottom: 5rem;
    }
    .banner-join{
        padding-bottom: 4rem;
    }
}
  
@media (min-width: 1200px) { 
    .rs-p-varian-giminori{
        padding-bottom: 2.2em;
        margin-bottom: 0.8em;
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-lg);
    }
    .content-8-penataan{
        padding-top: 4em;
    }
    .cs-p-faq{
        padding-top: 2em;
    }
    .cs-chevron{
        font-size: var(--cs-chevron-lg);
    }
    .banner-section-3{
        padding-top: 4em; 
        max-width: 75%;
    }
    .cs-wrapper-people-banner-3{
        top: 4.5%;
        left: -6%;
    }
    .cs-people-banner-3{
        max-width: 80%;
    }
    .cs-padding-banner-3{
        padding-top: 12.5rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-lg);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 68px;
    }
    .subtitle-banner-3{
        font-size: var(--subtitle-section-6-lg);
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-lg);
    }

    .gambar-content-8{
        bottom: 6%;
        right: -3%;
    }
    .text-kkaldu{
        font-size: 42px; 
        padding-top: 2.5em;
    }
    .text-taburan{
        font-size: 26px; 
    }
    .cs-cs-text-kkal-du{
        font-size: 20px;
    }
    .text-md-start{
        font-size: 20px;
    }
    .cs-cs-title{
        width: 100%;
        position: relative;
    }
    .content-3_3-penataan{
        padding-top: 4rem;
    }
    .gambar-content-4 {
        max-width: 120%;
        top: 60%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .subtitle-crunchy{
        font-size: 20px;
    }
    .text-crunchy{
        font-size: 30px;
    }

    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-lg);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-lg);
        border-width: var(--text-border-w-lg);
        font-family: var(--text-light);
        font-size: var(--size-text-border-lg);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    
    .image-content-yum {
        margin-top: 0;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-lg);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-lg);
        font-family: var(--text-medium);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-lg);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 100%;
        height: auto; 
        object-fit: cover;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    
    /* content-2 */
    .title-section{
        font-size: var(--title-section-xl);
        color: var(--color-blue);
        font-family: var(--text-medium);
    }
    .subtitle-section{
        color: var(--color-blue);
        font-size: var(--subtitle-section-xl);
        font-family: var(--text-reguler);
    }
    .subtitle-section-cs{
        color: var(--color-blue);
        font-size: var(--subtitle-section-cs-xl);
        font-family: var(--text-reguler);
        color: var(--color-blue);
    }
    .icon-jempol{
        color: var(--color-blue);
        max-width: var(--icon-jempol-lg);
    }
    .gambar-content-2 {
        max-width: 155%;
        top: 44%;
        left: 38%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .section-2{
        padding-top: 8em;
    }

    /* content 3 */
    .gambar-content-3 {
        max-width: 126%;
        top: 45%;
        left: 36%;
        position: absolute;
        transform: translate(-50%, -50%) rotate(10deg);
    }
    .checklist-title-popcorn{
        color: var(--color-blue);
        font-family: var(--text-reguler);
        font-size: var(--title-popcorn-xl);
    }
    .gambar-content-4 {
        max-width: 110%;
        top: 70%;
        left: 55%;
        position: relative;
        transform: translate(-50%, -50%) rotate(5deg);
    }
    .content-3{
        padding-top: 8rem;
    }
    .custom-p-popcorn{
        margin-top: 7rem;
    }

    .gambar-content-5{
        position: absolute;
        top: -24%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .content-5 {
        padding-top: 14em;
        padding-bottom: 6rem;
    }
    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-lg);
    }
    .custom-padding-content-4{
        margin-top: 14rem;
    }

    
    .custom-padding-content-4{
        margin-top: 38rem;
    }
    .custom-padding-kkal-du{
        margin-top: 0;
    }
    .text-padding-kkal-du{
        padding-top: 1rem; 
        padding-left: 2rem; 
        font-family: MADE Tommy Soft Reguler;
    }

    .text-logo-6 {
        font-size: var(--text-logo-6-lg);
    }
    .banner5 {
        /* height: 210vh; */
        padding-bottom: 2rem;
        /* border: 2px solid black; */
    }
    .iframe-container{
        margin-top: 7rem;
    }

    .cs-star-right{
        right: 7%;
        bottom: 2%;
    }
    .cs-star-left{
        left: 5%;
        top: 45%;
    }
    .banner6{
        /* height: 210vh; */
        padding-bottom: 5rem;
    }

    .cs-content-faq-title{
        font-size: 30px;
    }
    .cs-content-faq-subtitle{
        padding-left: 1.5em; 
        font-size: 25px;
    }
    .cs-max-width-product{
        max-width: 75%;
    }
    .cs-product-giminori{
        max-width: 70%;
        top: -4%;
    }
    .cs-max-width-kkal-du{
        max-width: 110%;
    }
    .banner7 {
        padding-bottom: 5rem;
    }
    .banner-join{
        padding-bottom: 4rem;
    }
    .cs-btn-join{
        font-size: var(--btn-join-title-lg);
        padding: var(--btn-join-p-lg);
    }
}

@media (min-width: 1400px){
    .gambar-content-2 {
        max-width: 130%;
        top: 44%;
        left: 30%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .cs-p-giminori{
        padding-left: var(--cs-p-giminori-xl);
    }
    .content-8-penataan{
        padding-top: 4em;
    }
    .cs-p-faq{
        padding-top: 2em;
    }
    .cs-chevron{
        font-size: var(--cs-chevron-xl);
    }
    .text-logo-6 {
        font-size: var(--text-logo-6-xl);
    }
    .banner-section-3{
        padding-top: 3em; 
        max-width: 80%;
    }
    .cs-wrapper-people-banner-3{
        top: 6%;
        left: -6%;
    }
    .cs-people-banner-3{
        max-width: 80%;
    }
    .cs-padding-banner-3{
        padding-top:6.2rem;
    }
    .title-banner-3{
        font-size: var(--title-section-6-lg);
    }
    .subtitle-banner-3{
        font-size: var(--subtitle-section-6-lg);
    }
    .icon-banner-3{
        width: auto;
        height: var(--h-icon-section-6-xl);
    }

    .gambar-content-8{
        bottom: 3%;
        right: -3%;
        width: 20%;
    }
    /* content-1 */
    .text-bawah-logo {
        font-size: var(--subtitle-title-xl);
        color: var(--color-blue);
        font-family: var(--text-reguler);
    }
    
    .text-border {
        display: inline-block;
        border-radius: var(--radius-text-border);
        -moz-border-radius: var(--radius-text-border);
        -webkit-border-radius: var(--radius-text-border);
        border: 3px solid var(--color-orange);
        background-color: var(--color-light);
        text-align: center;
        color: var(--color-blue);
        padding: var(--padding-text-border-xl);
        border-width: var(--text-border-w-xl);
        font-family: var(--text-light);
        font-size: var(--size-text-border-xl);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--color-blue);
    }
    
    .image-content-yum {
        margin-top: 0;
    }
    .custom-icon-checked{
        font-size: var(--checklist-icon-xl);
        color: var(--color-blue);
    }
    .checklist-title{
        font-size: var(--checklist-title-xl);
        font-family: var(--text-medium);
        color: var(--color-blue);
    }
    .checklist-subtitle{
        font-size: var(--checklist-subtitle-xl);
        font-family: var(--text-light);
        color: var(--color-blue);
    }
    .img-product-1{
        max-width: 100%;
        height: auto; 
        object-fit: cover;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .custom-p-popcorn{
        margin-top: 10rem;
    }

    .checklist-subtitle-kkal-du{
        font-size: var(--checklist-subtitle-kkal-du-xl);
    }
    .custom-padding-content-4{
        margin-top: 14rem;
    }
    .content-5 {
        padding-top: 16em;
        padding-bottom: 6rem;
    }

    .subtitle-crunchy{
        font-size: 20px;
    }
    .text-crunchy{
        font-size: 40px;
    }
    .ukuran-text-border{
        max-width: auto;
    }
    .cs-cs-checklist{
        padding-top: 0;
    }
    .banner5 {
        /* height: 210vh; */
        padding-bottom: 3rem;
        /* border: 2px solid hotpink; */
    }
    .banner6{
        /* height: 200vh; */
        padding-bottom: 5rem;
    }
    .cs-max-width-product{
        max-width: 85%;
    }
    .cs-product-giminori{
        max-width: 75%;
        top: -5%;
    }
    .cs-max-width-kkal-du{
        max-width: 120%;
    }
    .custom-padding-content-4{
        margin-top: 44rem;
    }
    .banner7 {
        padding-bottom: 5rem;
    }
    .banner-join{
        padding-bottom: 4rem;
    }
    .cs-btn-join{
        font-size: var(--btn-join-title-xl);
        padding: var(--btn-join-p-xl);
    }
}
.wa-logo {
    bottom: 20px;
    right: 20px;
    animation: wa 1.5s ease-in-out infinite alternate;
}
@keyframes wa {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}