@font-face {
    font-family: 'ArialRounded';
    src: url('../fonts/arialrounded.ttf') format('truetype'),
}

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

body {
    font-family: 'Archivo', sans-serif;
    position: relative;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'ArialRounded', sans-serif;
}

/* animation */

#header {
    position: absolute;
    z-index: 10;
    width: 100%;
}

#animation1 {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: transparent;
}

.delay-1 {
    animation-delay: .25s;
}

.delay-2 {
    animation-delay: .5s;
}

.delay-3 {
    animation-delay: .75s;
}

.delay-4 {
    animation-delay: 1s;
}

.delay-5 {
    animation-delay: 1.5s;
}

.wrapperanim {
    position: relative;
    width: 100vw;
    padding: 1px;
    padding-bottom: 0px;
    background: linear-gradient(270deg, #2EBDC4 0%, #2DB9C2 20.27%, #2AB3BB 41.77%, #24A7AC 66.83%, #118A90 100%);
}

.banner-anim {
    margin-top: 100px;
}

.txt-a-2-lines {
    height: 120px;
}

.txt-a {
    height: 60px;
    padding-left: 8px;
}

.txt-b {
    height: 130px;
}

.txt-img {
    width: 100%;
}

.logoanim {
    width: 170px;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.imganim {
    width: 90%;
    margin-top: 50px;
}

.imganimfinish {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 0;

}

.sectionanim {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 48px);
    margin: 0 auto;
    height: 80vh;
    font-size: 60px;
    background: linear-gradient(270deg, #2EBDC4 0%, #2DB9C2 20.27%, #2AB3BB 41.77%, #24A7AC 66.83%, #118A90 100%);
    color: white;
}

#section1 {
    background: linear-gradient(270deg, #34B8BE 0%, #37C2C7 9.51%, #35BFC4 23.27%, #30BCBF 35.33%, #2DBAC2 46.41%, #2AB8BE 64.92%, #26B2BB 74.5%, #26B1B6 84.42%, #1CA3AA 100%);
    z-index: 10;
    height: 100vh;
    width: 100%;
}

#section2 {
    background: linear-gradient(270deg, #34B8BE 0%, #37C2C7 9.51%, #35BFC4 23.27%, #30BCBF 35.33%, #2DBAC2 46.41%, #2AB8BE 64.92%, #26B2BB 74.5%, #26B1B6 84.42%, #1CA3AA 100%);
    z-index: 11;
    width: 100%;
    height: 100vh;
}

#section3 {
    background: linear-gradient(270deg, #34B8BE 0%, #37C2C7 9.51%, #35BFC4 23.27%, #30BCBF 35.33%, #2DBAC2 46.41%, #2AB8BE 64.92%, #26B2BB 74.5%, #26B1B6 84.42%, #1CA3AA 100%);
    z-index: 12;
    width: 100%;
    height: 100vh;
}

#section4 {
    background: url(../images/healthyway/home-bg.png);
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position: bottom center;
    position: absolute;
    width: 100%;
    color: #fff;
    background-color: white;
    position: relative;
    /* z-index: 13; */
    min-height: 1250px;
    /* aspect-ratio: 1510 / 1507; */
    margin-bottom: 3rem;
    margin-top: -5px;
    z-index: 9;
}

.fixed {
    position: fixed;
    width: 100% !important;
}

.img1 {
    width: 80%;
    /* padding-top: 30px; */
}

.img2 {
    width: 70%;
}

.img3 {
    width: 60%;
}

.img4 {
    width: 100%;
}

.img5 {
    width: 100%;
}

/* endanimation */

.formula-slick img {
    width: 100%;
    height: fit-content;
}

.banner-promo {
    z-index: 9 !important;
    background-color: white;
    position: relative;
}

.products {
    z-index: 3 !important;
    background-color: white;
}

.biostime-journal {
    z-index: 3;
}

.section-title {
    font-family: 'ArialRounded';
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

b {
    font-weight: bold !important;
}

p {
    font-size: 14px !important;
	line-height: 1.25rem;
}

p.deskripsi {
    font-size: 14px !important;
}

a:hover {
    text-decoration: none;
}

.findus {
    list-style: none;
}

.findus li {
    background: #1BB3B8;
    line-height: 25px;
    padding: 45px 0px 45px 0px;
    margin-bottom: 25px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
	color: #fff;
}

.findus li:hover {
    background: #AF882D;
}

.findus li a {
    color: #ffffff;
    display: block;
}

.container-10vw {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #ffffff !important;
    width: 30px !important;
}

.txt-product {
    font-size: 18px !important;
}

.menu-bar {
    transform: translateZ(0);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1) 0ms, -webkit-transform .7s cubic-bezier(.19, 1, .22, 1) 0ms;
    z-index: 1;
}

.main-menu {
    background: #FFFFFF;
    width: 100%;
    position: fixed;
    z-index: 9999;
    height: 200px;
    border: 1px solid;
}

.close-menu {
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

.close-menu:hover {
    opacity: 1;
}

.close-menu:before,
.close-menu:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 5px;
    background-color: #333;
}

.close-menu:before {
    transform: rotate(45deg);
}

.close-menu:after {
    transform: rotate(-45deg);
}

.fs-12 {
    font-size: 12px;
}

.NewMenuContainer {
    /*background: radial-gradient(56.06% 104.59% at 50% -22.02%, #F3F087 0%, rgba(243, 240, 135, 0) 100%), #01A998;*/
    /*background: radial-gradient(56.06% 104.59% at 50% -22.02%, #DEFFFB 0%, rgba(243, 240, 135, 0) 100%), #1BB3B8;*/
    background: radial-gradient(56.06% 104.59% at 50% -22.02%, #A8FFEF 0%, rgba(243, 240, 135, 0) 100%), #1BB3B8;
}

.navigation {
    margin-top: 20px;
    text-align: center;
    /* height:600px; */
    color: #fff;
}

.navigation li {
    display: inline-block;
}

.navigation li a {
    color: #FFFFFF;
    margin: 0 5px;
    font-style: normal;
    font-weight: bold;
    font-size: clamp(0.813rem, 0.771rem + 0.19vw, 0.938rem);
}

.breadcrumb-nav {
    background: radial-gradient(67.89% 67.89% at 50% 18.35%, #F8C95C 0%, #AF882D 100%);
    height: 50px;
    padding-top: 15px;
    padding-left: 2rem;
}

.breadcrumb {
    background: none !important;
}

.breadcrumb a {
    color: #f5f5f5;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 150%;
}

.breadcrumb a:hover {
    color: #ffffff;
}

.breadcrumb-item::before {
    color: #ffffff !important;
}

.breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    padding-top: 2px;
}

.whyImg img {
    width: 100%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-color: #1BB3B8;
    border: 2px solid #1BB3B8;
    border-radius: 5px;
    width: 20px;
    height: 20px;
}

.custom-control-label::after {
    border: 2px solid #1BB3B8;
    border-radius: 5px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.grayScale {
    filter: grayscale(100%);
}

.error-text {
    color: red;
    translate: middle;
    font-size: 14px;
    margin-top: 15px;
}

/* Advance Kids */

.line1 {
    border: 2px solid #A86E2D;
    position: absolute;
    left: 14px;
    bottom: 215px;
    width: 10%;
}

.line2 {
    border: 2px solid #A86E2D;
    position: absolute;
    left: 235px;
    bottom: 215px;
    width: 150px;
}

.line3 {
    border: 2px solid #A86E2D;
    position: absolute;
    bottom: 215px;
    width: 14%;
}

.line4 {
    border: 2px solid;
    border-image: linear-gradient(to right, #A16D33, #6A6968) 1;
    position: absolute;
    right: 230px;
    bottom: 215px;
    width: 14%;
}

.line5 {
    border: 2px solid #6A6968;
    position: absolute;
    right: 15px;
    bottom: 215px;
    width: 10%;
}

.google {
    background: #EB4132;
    border: 1px solid #EB4132;
    width: 210px;
}

.google:hover {
    background: #bd4033;
    border-color: #bd4033;
}

.facebook {
    background: #1977F3;
    border: 1px solid #1977F3;
    width: 210px;
}

.facebook:hover {
    background: #2c6ad4;
    border-color: #2c6ad4;
}

.dropdown-menu {
    right: 0;
    left: auto;
}

.dropdown-item {
    color: #212529 !important;
}

.dropdown-toggle::after {
    display: none;
}


.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    color: #454545 !important;
    font-weight: 600 !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    color: #1BB3B8 !important;
    font-weight: 900 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    margin: 2px !important;
    border-radius: 5px !important;
    border: 1px solid #73FEFD !important;
    background: #D2FFF9 !important;
    text-align: center;
    font-size: 15px;
    width: 40px;
}

.ui-datepicker .ui-datepicker-title {
    color: white;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: none !important;
    border: none !important;
    cursor: pointer;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    border: none !important;
    border-radius: 4px !important;
    margin-left: 3px !important;
    padding: 5px;
    cursor: pointer;
}

.ui-widget.ui-widget-content {
    border: 1px solid #73FEFD !important;
    border-radius: 20px;
}

.ui-widget-header {
    border: none !important;
    margin: 5px;
    background: #1BB3B8 !important;
    color: white;
    font-weight: bold;
    border-radius: 15px !important;
}

.user-tool-bar .baby-photo {
    display: block;
    width: 150px;
    height: 150px;

}

.photouser {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 100%;
    width: 150px;
    height: 150px;
}

.upload-btn {
    border-radius: 20px;
    background-color: #D2FFF9;
    border: 1px solid #73FEFD;
    display: inline-block;
    padding: 12px 10px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    height: 50px;
}

.cardGold {
    background: linear-gradient(90deg, #A77737 -24.6%, #CE9941 24.79%, #D39C42 81.34%, #B5893B 128.34%);
    box-shadow: none;
    border: none;
    border-radius: 20px;
    vertical-align: baseline;
}

.cardGold img {
    color: white;
    fill: currentColor;
    width: 100px;
    margin: 10px;

}

.cardGold h4 {
    color: white;
    text-align: left;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.mainAdvanceInput {
    background: url('../images/advance-kids/bgAdvanceInput.png');
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

.cardBox {
    width: 100%;
    height: autodsfef;
    padding: 30px 50px 30px 50px;
    background-color: white;
    border-radius: 30px;
    border: 1px solid #D2FFF9;
    box-shadow: 0px 22px 23px #68D5CB;
}

.btnMan {

    border-radius: 20px !important;
    background-color: #D8EFFFBF;
    border: 1px solid #218CD9;
    color: #6F6F6F !important;
    margin: 10px;
    font-size: 16px !important;
    font-weight: 500;

    padding: 0 !important;
    height: 48px;
    width: 100%;
}

.btnMan:hover {
    background-color: #D8EFFFBF;
    border: 1px solid #218CD9;
    color: #6F6F6F;
}

.btnWoman {

    border-radius: 20px !important;
    background-color: #FFD0F2BF;
    border: 1px solid #FF67B6;
    color: #6F6F6F !important;
    margin: 10px;
    font-size: 16px !important;
    font-weight: 500;
    padding: 0 !important;
    height: 48px;
    width: 100%;
}

.btnWoman:hover {
    background-color: #FFD0F2BF;
    border: 2px solid #1BB3B8;
    color: #6F6F6F;
}


.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btnMan .btn-secondary.dropdown-toggle {
    border-radius: 20px;
    background-color: #D2FFF9;
    border: 2px solid #1BB3B8;
    color: #6F6F6F;
}

.inputLabel {
    font-size: 16px;
    font-weight: 700;
    color: #008477;
}

.inputData {
    border-radius: 10px !important;
    background-color: #FFF !important;
    border: 1px solid #008477 !important;
    height: 40px;
    min-height: 40px;
}

.btnSubmit {
    border-radius: 20px !important;
    background-color: #1BB3B8;
    color: white;
    padding: 16px 16px 16px 16px !important;
    border: none;
    font-size: 16px !important;
    margin-left: 2px;
}

.btnSubmit:hover {
    background-color: #199CA0;
}

/* End Advance Kids */

.chart-container {
    padding: 20px;
}

.chart-container small {
    font-size: 11px;
}

.chart-title {
    font-size: 20px;
    font-weight: 700;
    color: #6F6F6F;
}

.chart-area {
    background-color: #F6F6F6 !important;

}

.columnRiwayat {
    border: 2px solid #f2f2f2;
    text-align: center;
    background-color: #1BB3B8;
}

.table th,
.table td {
    vertical-align: middle;
}

.table tr th {
    border: none;
    background-color: #1BB3B8;
    color: white;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
}


.table tr td {
    border: 2px solid #f2f2f2;
    text-align: center;
}

th:first-child,
td:first-child {
    border-radius: 20px 0 0 20px;
}

th:last-child,
td:last-child {
    border-radius: 0 20px 20px 0;
}

.table {
    border-collapse: separate !important;
}

#inputUpload {
    display: none;
}

.custom-file-upload {
    cursor: pointer;
    font-size: inherit;
    color: #0c090d;
}

.custom-file-upload:hover {
    color: #1BB3B8;
}

.upload-file {
    color: white;
}


.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    border: none;
    margin-bottom: 1rem;
}

.nav-tabs .nav-link.active {
    border: none;
    position: relative;
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 30%;
    margin-left: 35px;
    bottom: 5px;
    background: var(--linear-gold);
    border: none;
}

a.nav-link {
    text-transform: none !important;
}

.modal-backdrop {
    opacity: 0.3 !important;
}

.modal-dialog {
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    width: 400px;
    border-radius: 20px;
    border: none;
}

.navGrowth span {
    color: #1BB3B8;
    font-size: 18px;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.navGrowth span:hover {
    color: #00575A;
}

.avatarImg {
    position: relative;
    padding-top: 20px;
    display: inline-block;
    cursor: pointer;
    margin: 10px;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: white;
}

.containerAvatar:hover .overlay {
    opacity: 80%;
}

.text {
    color: #00575A;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.settingIcon {
    position: absolute;
    right: -20px;
    top: 150px;
    color: white;
    padding: 0px 20px;
    cursor: pointer;
}

.sizeCard {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.statusGiziLebih {
    border-radius: 20px;
    background-color: #CD8D10;
    color: white;
    padding: 3px 10px 5px 10px;
    font-size: 16px;
    border: none;
    margin-left: 2px;
    font-weight: bold;
}

.statusNormal {
    border-radius: 20px;
    background-color: #1BB87F;
    color: white;
    padding: 3px 10px 5px 10px;
    font-size: 16px;
    border: none;
    margin-left: 2px;
    font-weight: bold;
}

.statusGiziLebihTbl {
    border-radius: 20px;
    background-color: #CD8D10;
    color: white;
    padding: 4px 10px 4px 10px;
    width: max-content;
    font-size: 16px;
    border: none;
    margin-left: 2px;
    font-weight: bold;
}

.statusNormalTbl {
    border-radius: 20px;
    background-color: #1BB87F;
    color: white;
    padding: 4px 10px 4px 10px;
    width: max-content;
    font-size: 16px;
    border: none;
    margin-left: 2px;
    font-weight: bold;
}

.mainGrowth {
    background: url('../images/advance-kids/bgGrowth.png');
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* End Growth */


/* SUERVEY */

/*.form-container {
	margin: 100px;
}*/


.ui-datepicker .ui-datepicker-prev span {
    content: url('../images/left-arrow.png');
    width: 10px;
    padding-top: 3px;
}

.ui-datepicker .ui-datepicker-next span {
    content: url('../images/right-arrow.png');
    width: 10px;
    padding-top: 3px;
}


.text-form {
    font-size: 26px;
}

.survey-main {

    /*background: url('../images/bg-shield-new.png');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1511 / 890;
    color: #fff;
    position: relative;*/


    background: url('../images/survey-main-new.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    aspect-ratio: 1511 / 722;
}

.survey-caption {
    font-family: 'Arial Rounded MT Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 37px;

    /* or 168% */
    display: block;
    align-items: center;
    text-align: center;

    color: #FAFDEB;

    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    width: 600px;
    margin-top: 250px;
}

.survey-text-form {
    height: 40px;
    min-height: 40px;
    margin-top: -5px;
    border: 2px solid #C2C2C2;
    border-radius: 30px;
    font-size: 18px;
}

.survey-form-label {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: auto;

    /* identical to box height, or 187% */

    color: #878787;


}

.survey-form-radio-label {
    font-style: normal;
    font-weight: 400;
    font-size: 23px;

    /* identical to box height, or 187% */

    color: #878787;


}

.form-check-label {
    width: 150px;
}

.survey-footer {
    background: url('../images/survey-footer-img.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    aspect-ratio: 1511 / 704;
    margin-bottom: -90px;
    margin-top: 40px;
}

.sk-footer {
    background: url('../images/footer-s-k.png');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    aspect-ratio: 1511 / 704;
    margin-bottom: -180px;
    margin-top: 40px;
}

.sk-title {
    background: linear-gradient(180deg, #EADA5F 0%, #BB9200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-align: center;
}

.sk-text {
    color: #40A399;
    font-size: 18px;
}

.sk-number {
    color: #40A399;
    font-size: 18px;
    margin-right: 18px;
}

.bg-terms {
    background: linear-gradient(180deg, #1BB3B8 0%, rgba(27, 179, 184, 0) 61.98%);
    height: 300px;
}


/* WHERE TO BUY */

.liNavItem {
    margin: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #b7b7b7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
}

.frameShop {
    background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 4px) no-repeat,
        linear-gradient(90deg, #ad6639 0%, #d9a445 49%, #b8753c 100%);
    border-radius: 0px;
    padding: 8px;
    box-sizing: content-box;
    margin: 5px;
}

.maps {
    margin-bottom: 2rem;
}

.carousel-control-prev {
    position: absolute;
    top: 40%;
    left: -5%;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    vertical-align: middle !important;
    background: linear-gradient(180deg, #C48926 0%, #F3D346 100%) !important;
	z-index: 10;
}

.carousel-control-next {
    position: absolute;
    top: 40%;
    right: -5%;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    vertical-align: middle !important;
    background: linear-gradient(180deg, #C48926 0%, #F3D346 100%) !important;
	z-index: 10;
}

/* END WHERE TO BUY */

.btn {
    font-family: 'ArialRounded', sans-serif;
    font-size: .8rem;
}

.bottom-line {
    position: relative;
    margin-bottom: 2rem !important;
}

.bottom-line::after {
    content: '';
    position: absolute;
    height: 5px;
    width: 15%;
    bottom: -1rem;
    left: 0;
    background: var(--linear-gold);
}

.gold-line {
    position: relative;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
}

.gold-line::after {
    content: '';
    position: absolute;
    height: 5px;
    width: 25%;
    bottom: -1rem;
    left: 0;
    background-color: #AF882D;
}

.small-gold-line {
    position: relative;
    margin-bottom: 3rem;
}

.small-gold-line::after {
    content: '';
    position: absolute;
    width: 71px;
    height: 7px;
    bottom: -1rem;
    left: 0;
    background: linear-gradient(89.3deg, #AF882D -69.02%, #FFE047 114.62%);
}

.width-max-content {
    width: max-content;
}

.white-line {
    position: relative;
    margin-bottom: 3rem;
}

.white-line::after {
    content: '';
    position: absolute;
    height: 5px;
    width: 25%;
    bottom: -0.8rem;
    left: 0;
    background-color: #FFFFFF;
}

.gold-text {
    color: #AF882D;
}

.blue-text {
    color: #AF882D;
}

a {
    color: #046C67;
}

a.nav-link {
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    /* margin-left: 20px; */
}

.nav-line {
    border-bottom: 2px solid #000;
    width: 80%;
    position: absolute;
    top: 40px;
    right: 40px;
}

.list-product {
    padding-top: 2rem;
    position: relative;
}

.lustrous {
    color: #D82D27;
    margin-top: 100px;
}


.tosca {
    color: #008477;
}

.text-green {
    color: #00575A;
}

h2 {
    font-family: 'ArialRounded';
}

h2.tosca {
    font-family: 'ArialRounded';
}

h4.main-title {
    font-family: 'ArialRounded';
    /*font-size: 60px;
    line-height: 1em;*/
    text-decoration: underline;
    font-weight: normal;
}

h5.main-title {
    font-family: 'ArialRounded';
    font-size: 20px;
    font-weight: normal;
}

h5.product-title {
    font-family: 'ArialRounded';
    font-size: 25px;
    font-weight: normal;
    margin: auto;
}

.rev-title {
    font-family: 'ArialRounded';
    font-weight: normal;
    font-size: 50px;
}

.logo-biostime-nav {
    margin-right: 70px;
}

/* HOME */

.home {
    background: #fff;
    margin: 20px 40px;
    padding: 20px;
    padding-bottom: 35px;
    position: relative;
    isolation: isolate;
}

.promo-container {
    width: 1390px;
    margin: 0 auto;
}

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

@media (min-width:1280px) and (max-width:1440px) {

    .shield {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: min(-20px, 5vw);
    }
}

.left-botom-ornament {
    position: absolute;
    bottom: 20%;
}

.shield img {
    height: auto;
    width: 32vw;
    margin-top: -15%;
    margin-left: 290px;
}

.home .frame-box {
    aspect-ratio: 1/1;
}

.half-bg::after {
    content: '';
    position: absolute;
    top: 0;
    width: calc(100% + 40px);
    left: -20px;
    height: 70%;
    background-color: #BD3439;
    z-index: -1;
}

.homeslider {
    background: #fff;
    margin: 20px;
    padding: 20px;
    padding-bottom: 0;
}

.youtube-frame {
    border-bottom: 7px solid #C68B28;
    border-left: 7px solid #C68B28;
    border-radius: 15px;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.biostime-slider1 {
    background: url('../images/healthyway/home-bg.png');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1510 / 1507;
    color: #fff;
    position: relative;
    z-index: 3;
}

.biostime-slider1 p {
    font-weight: 300;
    font-size: clamp(0.75rem, 0.679rem + 0.36vw, 1rem);
}

.biostime-slider1 .slider-text {
    width: clamp(30ch, 28.571ch + 7.14vw, 35ch);
    padding-top: 10rem;
}

.why {
    /*margin-top: 4rem !important; */
    position: absolute;
    bottom: 18%;
}

.home-box {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top right !important;
    width: 100%;
    height: 400px;
    padding: 40px;
    position: relative;
}

.home-box-small {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 280px;
    padding: 40px;
    position: relative;
}

.btn-relative {
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 10px auto !important;
    position: relative !important;
}

.btn-journal {
    width: 250px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 3px;
}

.btn-add-child-profile {
    width: 190px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 20px !important;
}

.btn-journal-add {
    width: 180px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 20px !important;
}

.btn-journal-download {
    width: 180px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: #1BB3B8;
    border-radius: 20px !important;
}

.btn-journal-add-foto {
    width: 150px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 20px !important;
}

.btn-journal-edit-foto {
    width: 150px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: #069398;
    border-radius: 20px !important;
}

.btn-journal-delete-foto {
    width: 150px;
    padding: auto 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: #B81B1B;
    border-radius: 20px !important;
}

.biostime-pages-header {
    background: radial-gradient(56.06% 104.59% at 50% -22.02%, #DEFFFB 0%, rgba(243, 240, 135, 0) 100%), #1BB3B8;
    width: 100%;
    padding-top: 120px;
    position: relative;
    padding-left: 2rem;
}

.biostime-pages-header .deskripsi {
    margin-top: 2rem;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pages-title {
    margin: 0;
    position: absolute;
    bottom: -15%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-detail-produk {
    width: 100%;
    height: 43px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 3px;
}

.photo-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-grid {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    transition: all 500ms;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    max-width: 340px;
}

.card-wide {
    grid-column: span 2 / auto;
}

.card-tall {
    grid-row: span 3 / auto;
    order: unset;
}

.boxshadow-black {
    box-shadow: -2px 43px 58px 29px rgba(0, 0, 0, 0.72);
    -webkit-box-shadow: -2px 43px 58px 29px rgba(0, 0, 0, 0.72);
    -moz-box-shadow: -2px 43px 58px 29px rgba(0, 0, 0, 0.72);
}

.photo-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-grid .artikel__media {
    height: 300px;
}

.artikel__date {
    font-size: 1.1rem;
}

.artikel__media {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.object-fit-fill {
    object-fit: fill;
}

.media__link-text {
    height: 100%;
    color: #444;
}

.media__link {
    height: 100%;
    color: #444;
}

.media__link:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
}

.img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out 0s;
    object-position: top center;
}

.artikel__text {
    width: 100%;
}

.select-article {
    list-style: none;
    text-align: center;
    margin-top: 40px;
}

.select-article li {
    display: inline;
    margin-right: 20px;
}

.articlePage {
    /* background-image: url('../images/web-footer-background-rev1.png'), url('../images/BG-ARTICLE.png'); */
    /* background: linear-gradient(180deg, #1FB6A4 0%, #9EE8DB 37.27%); */
    /* background-repeat: no-repeat, repeat;
    background-size: contain, auto;
    background-position: center 1400px, center; */
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 50px;
}

.article-list {
    margin-bottom: 60px;
}

.article_title {
    font-style: normal;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2;
    /*color: #C39A3A;*/
    color: #008384;
}

.article_description {
    font-size: .9rem;
}

.article-read {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    /* identical to box height, or 187% */
    display: flex;
    align-items: center;
    color: #008477;
}


.videoPage {
	background: #9bd8ac;
    background-image: url('../images/healthyway/bg-hwk-video-shorts_D.jpg?v=1.11');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 100%;
    height: auto;
	min-height: 800px;
	position: relative;
}

.videoPage .wrapper{
	padding-top: 12em;
}

.videoPage .cartoon_video{
	position: absolute;
	z-index: 10;
	top: 140px;
    right: 15px;
}

.videoPage .cartoon_video img{
	width: 80px;
}

.videoPage .cartoon_big{
	position: absolute;
	z-index: 10;
	bottom: 40px;
    left: -30px;
}

.videoPage .cartoon_big img{
	width: 165px;
}

.videoPage .cartoon_small{
	position: absolute;
	z-index: 10;
	bottom: 40px;
	right: 0px;
}

.videoPage .cartoon_small img{
	width: 100px;
}


.wysiwyg li {
    margin-left: 15px;
    font-size: 16px;
}

.wysiwyg h2 {
    font-size: 1.2rem;
}

.wysiwyg h3 {
    font-size: 1rem;
}

.btn-gold {
    width: 100%;
    height: 43px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    bottom: 10%;
    white-space: normal;
    background: linear-gradient(90deg, #A77636 3.5%, #D39C42 49.24%, #B18639 99.5%);
    border-radius: 3px;
}

.btn-home {
    border: 2px solid #000;
    padding: 10px;
    text-align: left;
    color: #000;
    border-radius: 0;
    position: absolute;
    bottom: 10%;
    white-space: normal;
    width: 120px;
    background: #fff;
}

.btn-home-red {
    border: 2px solid #D82D27 !important;
    color: #D82D27 !important;
}

.btn-home-wider {
    width: 250px !important;
}

.btn-home-red:hover,
.btn-home-red:active,
.btn-home-red:focus {
    background-color: #ea0000;
    color: #fff !important;
    border: 2px solid #ea0000;
}

.btn-red:hover,
.btn-red:active,
.btn-red:focus {
    background-color: #ea0000;
    color: #fff !important;
    border: 2px solid #ea0000;
}

.btn-white:hover,
.btn-white:active,
.btn-white:focus {
    background-color: #ffffff;
    color: #000 !important;
    border: 2px solid #ffffff;
}

.home-box .btn-home h4,
.home-box-small .btn-home h4 {
    font-family: 'ArialRounded';
    font-weight: bold;
    font-size: 32px;
    text-align: left;
}

.btn-home .icon-btn-bottom {
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.btn-home .icon-btn-middle {
    position: absolute;
    right: 5%;
    bottom: 50%;
    transform: translateY(50%);
}

.chat {
    margin-top: 10px;
    position: relative;
}

.btn-chat {
    border: 2px solid #000;
    padding: 10px 30px;
    color: #000 !important;
    border-radius: 0;
    white-space: normal;
    width: 500px;
    height: 120px;
    margin-left: 100px;
    position: absolute;
    top: -10px;
    text-align: right;
}

.btn-chat i {
    vertical-align: middle;
    margin-right: 20px;
    margin-top: -10px;
}

.btn-chat h4 {
    font-family: 'ArialRounded';
    font-weight: bold;
    font-size: 40px;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
}

.btn-chat span {
    font-family: 'ArialRounded';
    font-weight: bold;
    font-size: 70px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
    width: 50px;
}

.frame-box {
    width: 100%;
    padding: 5vw 3vw;
    position: relative;
}

.frame-box .embed-youtube {
    width: 39vw !important;
    height: 23vw !important;
    position: relative;
    z-index: 10;
    border-radius: 20px;
    border: 2px solid black;
    border-bottom: 20px solid black;
}

.frame-box-modal .embed-youtube {
    width: 70vw !important;
    height: 40vw !important;
    position: relative;
    z-index: 10;
}

.frame-border {
    border: 2px solid #000;
    width: 550px;
    height: 300px;
    position: absolute;
}

.slider-banner .slick-prev {
    left: auto;
    right: 4rem;
    top: auto;
    bottom: -50px;
    cursor: pointer;
    z-index: 99;
}

.slider-banner .slick-prev:hover::before {
    color: #ea0000;
}

.slider-banner .slick-prev::before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f177";
    font-size: 2rem;
}

.slider-banner .slick-next {
    left: auto;
    right: 1rem;
    top: auto;
    bottom: -50px;
    cursor: pointer;
    z-index: 99;
}

.slider-banner .slick-next:hover::before {
    color: #ea0000;
}

.slider-banner .slick-next::before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f178";
    font-size: 2rem;
}

.biostime-journal {
    background: url('../images/bg-journal-new.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    min-height: 680px;
    /* height: 200vh; */
    padding: 30px 0;
    position: relative;
    z-index: 5;
}

.biostime-journal-page {
    background: url('../images/advanced-kids-bg-new.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1700 / 1080;
    padding: 30px 0;
    z-index: 9999;
    justify-items: center;
    align-content: center;
}

.biostime-journal-page .slider-text {
    margin-left: auto;
    margin-top: 16rem;
    width: 45%;
}

.biostime-journal-benefit {
    position: relative;
    z-index: 5;
}

.biostime-journal-benefit .ornament-l1 {
    position: absolute;
    top: -50px;
    left: 0;
}

.biostime-journal-benefit .ornament-l2 {
    position: absolute;
    bottom: 0;
    left: 0;
}

.biostime-journal-benefit .ornament-r {
    position: absolute;
    top: 450px;
    right: 0;
}

.modalRegisterJournal .modal-content {
    background: #fff url('../images/advance-kids/REGISTRATION-BG.png');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
}


.modalUpdateAnak .modal-content {
    background: #fff url('../images/advance-kids/REGISTRATION-BG.png');
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.form-control::placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.grey-text {
    color: #6F6F6F;
}

.tgl-lahir {
    background: url('../images/advance-kids/age.png') no-repeat right !important;
    background-position-x: calc(97%) !important;
    border-radius: 20px !important;
    background-color: #D2FFF9 !important;
    border: 1px solid #73FEFD !important;
}

.length {
    background: url('../images/advance-kids/cm.png') no-repeat right !important;
    background-position-x: calc(97%) !important;
    border-radius: 20px !important;
    background-color: #D2FFF9 !important;
    border: 1px solid #73FEFD !important;
}

.weight {
    background: url('../images/advance-kids/kg.png') no-repeat right !important;
    background-position-x: calc(97%) !important;
    border-radius: 20px !important;
    background-color: #D2FFF9 !important;
    border: 1px solid #73FEFD !important;
}

.registration-form {
    margin-top: 120px;
}

.registration-opening-text {
    float: right;
    display: block;
    padding-top: 30px;
    padding-right: 10px;
}

.monitor-description {
    padding-top: 140px;
}

.imunisasi-description {
    padding-top: 140px;
}

.benefit-2 {
    margin-top: 100px;
}

.biostime-journal .slider-text {
    margin-left: auto;
    margin-top: 16rem;
    width: 35%;
}

.user-dashboard {
    background: #fff url('../images/advance-kids/bg-user-dashboard-2.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1510 / 1820;
    padding: 30px 0;
    position: relative;
}

.user-dashboard1 {
    background: #2EBEB4 url('../images/advance-kids/bg-user-dashboard1.jpg');
    background-color: #2EBEB4;
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    padding: 30px 0;
}

.user-dashboard2 {
    background: linear-gradient(180deg, #30C0B6 7.81%, #2EBEB4 10.78%, #2EBEB4 42.11%, #2EBEB5 71.56%, #FFF 100%);
    width: 100%;
    height: 600px;
    padding: 30px 0;
    margin-top: -5px;
    margin-bottom: -33px;
    position: relative;
}

.graph-dashboard {
    background: #fff url('../images/advance-kids/bg-view-graph.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1511 / 4070;
    padding: 30px 0;
    position: relative;
}

.user-tool-bar {
    margin-top: 50px;
    width: 100%;
    height: 210px;
    background: #FFFFFF;
    border: 1px solid #D2FFF9;
    border-radius: 30px;
    padding: 30px;
}

.graph-container {
    width: 100%;
    min-height: 480px;
    background: #F6F6F6;
    margin-top: -1px;
    border-radius: 30px;
    position: relative;
}

.keterangan-pertumbuhan {
    width: 100%;
    margin-top: 40px;
    background: #FFFFFF;
    border-radius: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;

}

.tambah-data-imunisasi {
    width: 100%;
    margin-bottom: 50px;
    background: #FFFFFF;
    border-radius: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;

}

.tambah-data-perkembangan {
    width: 100%;
    background: #FFFFFF;
    border-radius: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;

}

.step-perkembangan {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 50px;
    background: #F4F4F4;
    border-radius: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-perkembangan {
    padding-bottom: 10px;
}

.dropdown-perkembangan .dropdown-toggle {
    background: url('../images/advance-kids/perkembangan/dropdown-icon.png') no-repeat right !important;
    background-position-x: calc(95%) !important;
    width: 50%;
    height: 50px;
    margin: 10px 0px 10px 0px;
    border-radius: 20px !important;
    background-color: white;
    border: 1px solid #1BB3B8 !important;
    padding-top: 10px;
    font-weight: 600;
    padding-left: 15px;
    color: #1BB3B8 !important;
    cursor: pointer;
}

.dropdown-perkembangan .dropdown-menu {
    width: 40%;
    margin: 10px 0px 10px 0px;
    border-radius: 20px !important;
    background-color: white;
    border: 1px solid #1BB3B8 !important;
}

.dropdown-perkembangan .dropdown-menu .dropdown-item {
    font-size: 20px;
    font-weight: 600;
    color: #1BB3B8 !important;
}

.category-perkembangan {
    padding: 30px;
    width: 90%;
    display: block;
    margin: auto;
}

.category-perkembangan p {
    color: #989898;
    font-size: 20px;
}

.category-content img {
    width: 40px;
    display: block;
    margin: auto;
    margin-left: 15px;
    margin-top: 35px;
}

.category-content h2 {
    font-size: 22px;
    color: #6B6B6B;
}

.category-content p {
    font-size: 14px;
    color: #6B6B6B;
}

.imun-user-toolbar {
    background: #FBFBFB;

}

.nav-imun {
    height: 59px;
    background: #EDEDED;
    border-radius: 20px;
    padding-top: 20px;
}

.nav-title {
    font-style: normal;
    font-weight: 900;
    font-size: 17px;
    line-height: 17px;
    text-align: center;

    color: #070707;


}

.vaccine-detail {
    padding-top: 10px;
}

.vaccine-detail p {
    padding-top: 5px;
    color: #989898;
}

.vaccine-name {
    font-style: normal;
    font-weight: 900;
    font-size: 17px;
    line-height: 17px;
    color: #070707;
}

.detail-growth {
    background: linear-gradient(180deg, #D1FFF9 0%, #B6FFF5 100%);
    border-radius: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.detail-growth p {
    color: #202020;
    margin-top: 30px;
}

.latest-growth {
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 40px;
    text-align: center;

    color: #1BB3B8;
}

.growth-number {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
}

.imun-description {
    padding-top: 55px;
}

.perkembangan-description {
    padding-top: 55px;
}

.modal-perkembangan {
    background: url('../images/advance-kids/perkembangan/modal-bg.png');
    display: block;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.growth-description {
    padding-top: 55px;
}

.growth-milestone {
    width: 850px;
    margin: 0 auto;
    float: left;
    display: block;
}

.top-left-radius {
    border-top-left-radius: 30px 30px;
}

.top-right-radius {
    border-top-right-radius: 30px 30px;
}

.dashed {
    width: 95%;
    border: 1px dashed #D3D3D3;
    margin: 0 auto;
}

.graph-nav {
    background: #ffffff;
    height: 133px;
    width: 25%;
    float: left;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: #1BB3B8;
    padding-top: 30px;
    border-bottom: 1px solid rgba(163, 163, 163, 0.7);
}

.graph-nav:hover {
    color: #097C85;
}

.graph-nav.active {
    color: #097C85;

}

.graph-nav.active::after {
    content: '';
    height: 4px;
    width: 35px;
    display: block;
    background: linear-gradient(89.3deg, #AF882D -69.02%, #FFE047 114.62%);
    margin-top: 10px;
    margin: 0 auto;
    margin-top: 8px;

}



.nav-border-right {
    border-right: 1px solid rgba(163, 163, 163, 0.7);

}

.child-info {
    margin-top: 18px;
}

.child-name {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #6F6F6F;
}

.child-age {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    color: #6F6F6F;
}

.info-name {
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    color: #6F6F6F;
}

.child-info-buttons {
    margin-top: 12px;
    text-align: right;
}

.dashboard-opening-text {
    float: right;
    display: block;
    padding-top: 95px;
}

.product-display {
    background: #ffffff;
}

.journal {
    margin-top: -4rem;
}

.icon-img img {
    max-height: 40px;
    width: auto;
}

.tanya-pakar {
    width: 100%;
    background-image: url('../images/tanya-pakar-bg-dr-putri-with-name.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    padding-top: 20vw;
    padding-bottom: 20vw;
    position: relative;
}

.form-title {
    font-size: 1.5rem;
    color: var(--main-color);
    line-height: 1.5rem;
    font-weight: 700;
}

.form-control {
    font-size: 14px !important;
    font-family: 'ArialRounded', sans-serif !important;
}

.alert {
    font-size: 14px;
}

.tanya-pakar-form {
    z-index: 3;
}

.tanya-pakar-form .alert {
    font-size: 14px;
}

.tanya-pakar-form label {
    color: var(--main-color);
    font-size: 16px;
}

.tanya-pakar-form .form-control {
    border-radius: 25px;
    border-color: var(--main-color);
    min-height: 35px;
}

.tanya-pakar-qna {
    width: 100%;
    background-image: url('../images/tanya-pakar-qna-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    padding-top: 16%;
    padding-bottom: 3rem;
    position: relative;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.tanya-pakar-qna .card {
    background-color: transparent;
    border-radius: 30px;
    border-color: white;
}

.tanya-pakar-qna .card-body {
    padding: 0.35rem;
}

.tanya-pakar-qna .card-title {
    font-weight: 600;
}

.tanya-pakar-qna a {
    color: white;
}

.tanya-pakar-qna .answer-box {
    background: linear-gradient(180deg, rgba(12, 137, 144, 0.3) 0%, rgba(4, 88, 90, 0.3) 100%);
    border-radius: 0px 0px 30px 30px;
}

.inside-biostime {
    background: url('../images/inside-biostime.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    padding-top: 100px;
    position: relative;
}

.top-right-ornament {
    position: absolute;
    top: 0;
    right: 0;
}

.bottom-left-ornament {
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-right-ornament {
    position: absolute;
    bottom: 0;
    right: 0;
}

.new {
    color: #ff0000;
}

.revlon90 {
    color: #ff0000;
    font-size: 40px;
    font-family: 'ArialRounded', serif;
    font-weight: 300;
}

h5.main-title.roboto {
    font-family: 'Roboto';
    max-width: 40ch;
    margin-left: auto;
}

.btn-home {
    border: 2px solid #EA4335;
    padding: 10px;
    text-align: left;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 10%;
    white-space: normal;
    width: 135px;
    background-color: #EA4335;
}

.btn-home:hover,
.btn-home:active,
.btn-home:focus {
    background-color: #ea0000;
    color: #fff !important;
    border: 2px solid #ea0000;
}

.products-of-the-month {
    width: 90%;
    height: auto;
    margin: auto auto 1.5rem;
    aspect-ratio: 1/1;
    position: relative;
    border-bottom: 3px solid black;
}


.products {
    position: relative;
}

.why-biostime {
    position: relative;
    background: url('../images/why-biostime-bg-new.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1512 / 1538;
    padding: 7rem 0rem 2rem 0rem;
}

.flavour-container {
    width: 170;
    float: left;
}

.flavour-label {
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 10px;
}

.flavour {
    aspect-ratio: 167 / 112;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.flavour:hover {
    border: 2px solid #B18639
}

.flavour.active {
    border: 2px solid #B18639
}

.honey {
    background: url('../images/flavour-madu-rev1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
}

.vanilla {
    background: url('../images/flavour-vanila-rev1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
}

.product-size {
    float: left;
    width: 60px;
    height: 30px;
    border: 1px solid #000000;
    border-radius: 7px;
    margin-right: 20px;
    text-align: center;
    padding-top: 5px;
    font-size: 14px;
}

.product-detail {
    margin-top: 50px;
}

.product-detail img {
    width: inherit;
}

.formula-middle-align {
    padding-bottom: 200px;
}

.bottom-left-product-ornament {
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-right-ornament {
    position: absolute;
    bottom: -167px;
    right: 0;
}


.right-product-ornament-btm {
    position: absolute;
    bottom: 300px;
    right: 0;
}

.left-product-ornament-btm {
    position: absolute;
    bottom: 0;
    left: 0;
}

.left-product-ornament {
    position: absolute;
    top: 0;
    left: 0;
}

.right-product-ornament {
    position: absolute;
    top: 0;
    right: 0;
}

.product-thumbnail {
    float: left;
    width: 280px;
    margin-right: 20px;
}

.product-thumbnail .items {
    background: url('../images/bg-product.png');
    background-repeat: repeat-x;
    height: 500px;
    display: grid;
}

.items img {
    padding-top: 60px;
    margin: 0 auto;
}

.slider-product .slick-next,
.slider-product .slick-prev {
    font-size: 25px;
    color: black;
}

.panel-promo {
    display: none;
}

.logo-store {
    height: 40px;
}

.produk h2 {
    text-transform: uppercase;
    color: #AF882D;
}

.select-ecom {
    list-style: none;
    margin-top: 20px;
    text-align: center;
}

.select-ecom li {
    display: inline-flex;
    height: 60px;
    width: 115px;
    margin: 5px;
	justify-content: center;
    align-items: center;
    /* border: 2px solid #D08F19; */
}

.max-content {
    width: max-content;
}

.sidescroll {
    overflow: auto;
    white-space: nowrap;
}

.growthscroll {
    overflow: auto;
}


.sidescroll .product-anchor {
    position: relative;
    display: inline-block;
    text-align: left;
    text-decoration: none;
    /*width: 25%;*/
    width: 260px;
    margin-right: 2rem;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar {
    height: 12px;
    margin: 2px auto;
    background-color: #0AAB96;
}

.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #ffffff;
    height: 12px;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
    height: 12px;
    margin: 2px auto;
    background-color: #0AAB96;
}

.product-list {
    text-align: center;
}

.sidescroll .product-anchor .product-frame {
    width: 250px;
}

.search-bar {
    width: 100%;
    max-width: 400px;
    background: transparent;
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 6px 20px;
    border: 2px solid #fff;
}

.search-bar input {
    background: transparent;
    flex: 1;
    border: 0;
    outline: none;
    padding-right: 20px;
    font-size: 12px;
    color: white;
}

.search-bar input::placeholder {
    color: white;
}

.search-bar button {
    background: transparent;
    border: 0;
}

.search-bar button i {
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    color: white;
}

.sidescroll .product-anchor .product-frame img {
    /* padding: 50px 31px; */
    width: inherit;
}

.sidescroll .product-anchor:last-child {
    margin-right: 0;
}

.sidescroll .product-anchor .captionText {
    color: #000;
}

.sidescroll .product-anchor .captionText p {
    white-space: break-spaces;
    height: 75px;
    font-size: 12px;
    margin-top: 10px;
}

.footer {
    background: #097C85 !important;
    position: relative;
    z-index: 6;
    padding: 3rem 0;
}

.new-footer {
    background: linear-gradient(180deg, #FFF 0%, #38B9AB 36.09%, #129FA0 65.50%, #0A878E 100%);

    height: auto;
    position: relative;
    z-index: 6;
    padding: 3rem 0;


}

.home-footer {
    background: #fff url('../images/home-footer.png');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1512 / 812;
    color: #fff;


    width: 100%;
    position: relative;
    z-index: -5;
    padding: 3rem 0;
    margin-top: -470px;
}

.new-footer .footer-nav {
    margin-top: 150px;
}

.new-footer .icon-img {
    margin-top: 150px;
}

.new-footer .footer-nav li a {
    color: #fff;
    margin-right:30px;
    font-style: normal;
    font-family: 'ArialRounded', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    ;
}

.home-footer .footer-nav {
    margin-top: 650px;
}

.home-footer .icon-img {
    margin-top: 650px;
}

.home-footer .footer-nav a {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    color: #FFFFFF;
}

.footer-image {
    background: url('../images/web-footer-background-rev1.png');
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position: top center;
    width: 100%;
    height: auto;
    z-index: 5;
}

.footer-copyright {
    font-size: 11px;
    text-align: right;
}


.footer-nav {
    list-style: none;
    width: 82% !important;
}

.footer-nav li {
    display: inline-block;
}

.footer-nav li a {
    color: #fff;
    margin-right: 30px;
    font-style: normal;
    font-family: 'ArialRounded', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.tab-pane small,
.small {
    font-size: 14px !important;
}

.benefit-1 .monitor-description {
    text-align: right;
}

.benefit-1 .monitor-description .gold-line::after {
    right: 0 !important;
    left: auto !important;
}

@media (min-width: 1440px) {
    .video-otm {
        padding-top: 8rem;
    }
}

@media (min-width: 1600px) {
    .video-otm {
        padding-top: 12rem;
    }
}

@media (min-width: 1920px) {
    .video-otm {
        padding-top: 18rem;
    }
}

.video-otm {
    margin-top: 190px !important;
}



/* TOP SPENDER PAGE */

.topspender{
	background:#92e2d5;	
}

.topspender-form{
	background:#d8f6f1; 
	border-radius:25px; 
	color:#008477;
	margin: 50px;
	padding: 50px;
}

.topspender-form .form-group{
	margin: 1rem;
}

.topspender-form .btnSubmit{
	font-size: 20px !important;
    color: #fff;
    border-radius: 25px !important;
    padding: 10px 25px !important;
	background: rgb(0, 132, 119);
	background: linear-gradient(0deg, rgba(0, 132, 119, 1) 0%, rgba(8, 174, 158, 1) 35%, rgb(164 237 225) 100%);
	box-shadow: none;
	margin: 20px auto;
}

.inputerror {
    border: 1px solid red !important;
}

.message_error {
    font-size: 12px;
    color: red;
	margin-top: 5px;
}


@media (max-width: 767px) {
	.topspender-form {
		margin: 20px;
		padding: 20px;
	}

	.topspender-form h4{
		font-size:16px;
	}
	
	.topspender-form .form-group {
		margin: 0.5rem;
	}
}

/* TOP SPENDER PAGE */


/* SPLIDE ARROW */

.splide__arrow {
	background: transparent !important;
}

.splide__arrow svg {
    fill: transparent !important;
}
	
.splide__arrow--next {
    right: -50px !important;
	background-image: url('../images/healthyway/green-arrow-next.png') !important;
	width: 40px !important;
    height: 40px !important;
	color: transparent !important;
	background-size: cover !important;
}

.splide__arrow--prev {
    left: -50px !important;
	background-image: url('../images/healthyway/green-arrow-prev.png') !important;
	width: 40px !important;
    height: 40px !important;
	color: transparent !important;
	background-size: cover !important;
}

/* SPLIDE ARROW */

/* dropzone file upload */
.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}
.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}
.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.dropzone-wrapper {
  border: 2px dashed #008477;
  color: #008477;
  position: relative;
  min-height: 150px;
  background: #fff;
  border-radius: 10px;
  font-weight: bold;
}
.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 50px;
  font-size: 16px;
}
.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  min-height: 150px;
  cursor: pointer;
  opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #fff;
}
.preview-zone {
  text-align: center;
}
.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
	.dropzone-desc {
		width: 100%;
		top: 25%;
	}		
}
/* End dropzone file upload */


/* responsive */

@media (max-width: 767px) {

    .banner-anim {
        margin: 50px 20px 0px 20px;
    }

    .txt-img {
        margin-top: 0px;
    }

    .logoanim {
        position: relative;
        width: 110px;
        display: block;
        margin: 0 auto;
        padding: 10px;
        top: auto;
    }

    .txt-a-2-lines {
        margin-top: 30px;
        height: 50px;
    }

    .txt-a {
        height: 25px;
    }

    .txt-b {
        height: 65px;
        margin-bottom: 40px;
    }

    .sectionanim {
        display: block;
    }

    .main {
        background: #fff;
    }

    .imganimfinish {
        width: 90%;
        margin-bottom: 0px;
    }

    .imganimfinish-mobile {
        width: 90%;
        margin-bottom: 0px;
    }

    .img1 {
        display: block;
        margin: 0 auto;
        padding-top: 30px;
        width: 80%;
    }

    .img2,
    .img3,
    .img4,
    .img5 {
        display: block;
        margin: 0 auto;
    }

    .img5 {
        display: block;
        margin: 0 auto;
        width: 60%;
    }


    #section4 {
        background-position: center;
        min-height: 1190px;
    }

    .formula-slick p {
        text-align: center;
    }

    .biostime-pages-header .deskripsi {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .biostime-pages-header .deskripsi br {
        display: none;
    }

    .products {
        position: relative;
    }

    .footer-nav {
        list-style: none;
        width: 100% !important;
        text-align: center;
    }

    .footer-nav h5 {
        text-align: center;
    }

    .footer-nav p {
        text-align: center;
    }

    .nav-link {
        padding: 0px !important;
    }

    .new-footer .footer-nav {
        margin-top: 50px;
    }

    .new-footer .icon-img {
        margin-top: 50px;
    }

    .why-biostime {
        padding-top: 5rem;
    }

    .journal {
        margin-top: -6rem;
        margin-bottom: 1rem;
    }

    .label-baru {
        text-align: center;
    }

    .video-otm {
        margin-top: 0px !important;
    }

    .our-product-txt {
        margin-top: 28px;
    }

    .btn-group>.btn:first-child {
        display: block;
        margin: 0 auto;
    }

    .navigation {
        margin-top: 50px;
        margin-bottom: 35px;
    }

    .photouser {
        display: block;
        margin: 0 auto;
    }

    .modal-perkembangan {
        padding: 0px;
    }

    .modal-perkembangan img {
        float: none !important;
        margin: 0 auto;
        display: block;
    }

    .modal-perkembangan .section-title {
        text-align: center;
        font-family: 'ArialRounded';
    }

    .category-img {
        width: 80px;
    }

    .category-content img {
        margin: 0 auto;
        margin-top: 10px;
    }

    .category-content h2 {
        font-size: 18px;
    }

    .category-perkembangan {
        text-align: center;
        margin-bottom: 0px !important;
        padding: 0px;
    }

    .step-perkembangan {
        padding-top: 20px;
        padding-bottom: 5px;
        margin-bottom: 0px;
        margin-top: 0px !important;
        ;
    }

    .dropdown-perkembangan p {
        font-size: 16px;
    }

    .dropdown-perkembangan .dropdown-toggle {
        width: 70%;
        text-align: left;
    }

    .update-vaksin {
        display: block;
    }

    .form-imunisasi .form-group {
        margin: 0px 30px 0px 30px;
    }

    .vaccine-detail p {
        margin: 0 auto;
    }

    .growth-milestone {
        width: 100%;
		margin-bottom: 50px;
    }

    .growth-milestone img {
        width: 50%;
    }

    .growth-milestone .growth-description {
        width: 95%;
        padding-top: 20px;
    }


    .tambah-data-imun a {
        display: block;
    }

    .vaccine-name {
        text-align: center;
    }

    .user-dashboard2 .dashboard-opening-text {
        padding-left: 0px !important;
    }

    .chartjs-render-monitor {
        height: auto !important;
        width: 100% !important;
    }

    .graph-nav,
    span {
        line-height: 1.2;
        font-size: 16px;
    }
	
	.chart-area{
		height: 350px;
	}

    .registration-form {
        margin-top: 5px;
    }

    .registration-opening-text {
        float: none;
        display: block;
        padding-top: 0px;
        padding-right: 0px;
    }

    .registration-opening-text .section-title {
        color: #1BB3B8 !important;
        margin-top: 120px;
        text-align: center;
        font-family: 'ArialRounded';
    }

    .registration-opening-text .deskripsi {
        color: #6F6F6F !important;
    }

    .modalUpdateAnak .modal-content {
        background-size: contain;
    }

    .products .section-title {
        text-align: center;
        font-family: 'ArialRounded';
        font-size: 20px;
        display: block;
        margin: 0 auto;
        padding-top: 20px;
        margin-bottom: 40px;
    }

    .products .deskripsi {
        text-align: center;
        margin-top: 28px;
    }

    .articlePage .deskripsi {
        text-align: center;
    }

    .journal .deskripsi {
        text-align: center;
    }

    .video-otm .deskripsi {
        text-align: center;
    }

    .user-dashboard1 {
        padding: 30px 0;
    }

    .user-dashboard2 {
        margin-top: -40px;
    }

    .dashboard-opening-text {
        text-align: center;
    }

    .dashboard-opening-text p.deskripsi {
        text-align: center;
    }

    .dashboard-opening-text {
        padding-top: 10px;
    }

    .baby-photo {
        width: 150px;
        height: 150px;
        display: block;
    }

    .child-info {
        text-align: center;
    }

    .child-info-buttons {
        text-align: center;
    }

    .user-tool-bar {
        height: auto;
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .user-tool-bar .baby-photo {
        display: block;
        width: 150px;
        height: 150px;
    }

    .user-tool-bar .info-name {
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .dashed {
        width: 0;
    }

    .tab-pane small,
    .small {
        font-size: 14px !important;
    }

    .biostime-journal-page {
        background-position: right center;
        padding: 30px;
        height: 70vh;
    }

    .biostime-journal-page .slider-text {
        margin-left: 0;
        margin-top: 0;
        width: auto;
        padding-top: 50px;
    }

    .biostime-journal-page .slider-text p {
        text-align: center;
    }

    .small-gold-line::after {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 30px;
    }

    .growth-milestone,
    p {
        font-size: 12px;
    }

    .latest-growth b {
        color: #1BB3B8 !important;
    }


    .benefit-1 .monitor-description {
        text-align: center !important;
    }

    .benefit-1 .monitor-description .gold-line::after {
        left: 50% !important;
        margin-top: 50px;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .benefit-1 {
        flex-direction: column-reverse;
    }

    .benefit-1 {
        text-align: center !important;
        flex-direction: column-reverse;
    }

    .benefit-1 .monitor-description {
        padding-top: 50px;
    }

    .benefit-2 {
        text-align: center;
    }

    .benefit-2 .imunisasi-description {
        padding-top: 50px;
    }



    .title-form {
        text-align: center;
        padding-top: 0px !important;
    }

    .bottom-line::after {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .gold-line::after {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .slider-text h2 {
        text-align: center;
    }

    .cardGold {
        width: 70%;
    }

    .text-hero {
        margin-top: 200px;
    }



    .line1,
    .line2,
    .line3,
    .line4,
    .line5 {
        display: none;
    }

    .modal-content {
        width: 330px;
        border-radius: 20px;
        border: none;
        padding: 20px;
        margin: 10px;
    }

    .modal-content p {
        text-align: center;
    }

    .modal-body {
        padding: 0px;
    }

    .avatarImg {
        padding-top: 0px;
        margin: 30px;
    }

    .cardBox {
        width: 100%;
        height: autodsfef;
        padding: 20px 30px 20px 30px;
        background-color: white;
        border-radius: 30px;
        border: 1px solid #D2FFF9;
        box-shadow: 0px 22px 23px #68D5CB;
        margin-bottom: 15px;
    }

    .keterangan-pertumbuhan {
        padding: 15px;
        text-align: center;
    }

    .imun-description {
        padding-top: 5px;
        text-align: center;
    }

    .perkembangan-description {
        padding: 0px;
        text-align: center;
    }

    .carousel-control-prev {
        top: 40%;
        left: -7%;
        width: 30px;
        height: 30px;
    }

    .carousel-control-next {
        top: 40%;
        right: -7%;
        width: 30px;
        height: 30px;
    }

    .biostime-pages-header {
        padding-left: 0;
    }

    .breadcrumb {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: scroll;
    }

    .logo-biostime-nav {
        width: 100%;
        position: relative;
        margin-right: 0;
    }

    .logo-biostime-nav .navbar-brand {
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 40%;
        transform: translateX(-50%);
    }

    .navbar-brand img {
        width: 30px;
    }

    .navbar-collapse {
        background: #fff;
        padding: 5px 15px 5px 0;
    }

    a.nav-link {
        color: #000;
    }

    .footer .navbar-brand {
        margin-right: 0;
    }

    .nav-line {
        width: 100%;
        top: 50px;
        right: 0;
    }

    .sidescroll .product-anchor .captionText p {
        display: none;
    }

    .sidescroll .product-anchor {
        width: 140px;
    }

    .sidescroll .main-tittle {
        font-size: .8rem;
    }

    .sidescroll .product-anchor {
        margin-right: 1.5rem;
    }

    .product-size {
        width: auto;
        height: auto;
        padding: 5px 10px;
        font-size: 16px;
        margin-right: 5px;
    }

    .slick-next {
        right: 0;
    }

    .slick-prev {
        left: 0;
    }

    .rev-title {
        font-size: 30px;
    }

    .tanya-pakar-form {
        background-color: #fff;
    }

    .tanya-pakar-qna {
        margin-top: -70%;
        padding-top: 100%;
    }

    /* HOME */
    .home {
        padding: 0;
    }

    .homeslider {
        padding: 0;
        margin: 0;
    }

    .navbar-brand .logo-brand {
        width: 110px;
    }

    .breadcrumb-nav {
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 0;
    }

    .breadcrumb .breadcrumb-item.active a {
        font-size: 12px;
        padding-top: 4px;
    }

    .breadcrumb .breadcrumb-item a {
        font-size: 10px;
    }

    .articlePage {
        background: #fff;
    }

    .biostime-slider1 {
        background: url('../images/bg-shield-new-mobile.png');
        aspect-ratio: 390 / 1303;
        background-size: contain;
    }

    .biostime-slider1 .slider-text {
        width: 100%;
        padding-top: 23rem;
    }

    .biostime-journal {
        background: url('../images/bg-journal-new-mobile.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 50px;
    }

    .white-line {
        margin-bottom: 2rem;
    }

    .biostime-journal .slider-text {
        margin-left: auto;
        margin-top: 10rem;
        width: 100%;
    }

    .sidescroll .product-anchor .product-frame {
        width: 150px;
        margin: auto;
    }

    .mCustomScrollbar {
        touch-action: inherit !important;
    }

    .sidescroll {
        margin-right: 5vw;
    }

    .tanya-pakar {
        padding-top: 20px;
    }

    .btn-journal {
        width: 80%;
        padding: 4px 8px;
        margin-top: 290px;
        display: block;
    }

    .btn-share {
        display: block;
        margin: 0 auto;
    }

    .btn-sm-block {
        width: 100%;
    }

    .shield img {
        width: auto;
    }

    /* .formula-slick img {
        width: 32%;
    } */

    .section-title {
        font-size: 20px;
        line-height: 26px;
        font-family: 'ArialRounded';
        margin-top: 0;
        text-align: center;
    }

    .txt-product {
        font-size: 11px !important;
        white-space: normal;
        text-align: center;
    }

    .label-baru {
        font-size: 12px;
        line-height: 26px;
        margin-bottom: 0;
        display: block;
    }

    .lustrous {
        color: #D82D27;
        margin-top: 70px;
        font-size: 34px !important;
    }

    .product-detail {
        margin-top: 0;
    }

    h4.main-title {
        font-size: 36px;
        width: 70%;
    }

    h5.main-title {
        width: 50%;
    }

    .home-box {
        height: 400px;
        padding: 20px;
        background-size: contain !important;
    }

    .home-box-small {
        height: 320px;
        padding: 0;
        background-size: contain !important;
    }

    .btn-home {
        bottom: 5%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .btn-chat {
        width: 70%;
        height: 85px;
        margin-left: 30%;
        padding: 20px;
    }

    .chat img {
        width: 150px;
    }

    .btn-chat i {
        font-size: 2em;
        margin-right: 10px;
    }

    .btn-chat h4 {
        font-size: 20px;
    }

    .btn-chat span {
        font-size: 35px;
        margin-left: 10px;
        margin-top: -5px;
        width: 20px;
    }

    .frame-box {
        width: 100%;
        padding: 0;
        height: auto;
        position: relative;
    }

    .frame-box iframe {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
        border-radius: 15px;
    }

    .frame-border {
        display: none;
    }

    .formula-middle-align {
        padding-bottom: 0;
    }

    .modal-dialog {
        max-width: 100%;
    }

    .inside-biostime {
        /* aspect-ratio: auto; */
        /* min-height: 1100px; */
        padding-top: 50px;
    }

    .inside-biostime img {
        width: 90%;
        padding-bottom: 30px;
    }

    .frame-box .embed-youtube {
        width: 80% !important;
        height: 200px !important;
        margin: 13% auto;
        border-radius: 20px;
        border: 2px solid black;
        border-bottom: 10px solid black;
    }

    .frame-box-modal .embed-youtube {
        width: 100% !important;
        height: 200px !important;
        margin: auto;
    }

    .slider-banner {
        margin-bottom: 4rem !important;
    }

    .slider-banner .slick-prev {
        left: 20px;
    }

    .slider-banner .slick-next {
        right: 20px;
    }

    .footer {
        padding: 2rem 0;
        /* margin-top: 1rem; */
    }

    .footer-logo {
        text-align: center;
    }

    .footer img {
        width: 30px;
        /* margin: 0 1rem; */
        height: auto;
    }

    .footer-copyright {
        text-align: center;
    }

    .footer-copyright p {
        font-size: 10px;
    }

    .select-ecom li {
        border: none;
    }

    .tanya-pakar-form label {
        font-size: 16px;
    }

    .form-control {
        min-height: 30px !important;
    }
	
	.splide__arrows {
		display: none;
	}
	
	.videoPage {
		background-image: url('../images/healthyway/bg-hwk-video-shorts_M.jpg?v=1.11');
	}
	
	.videoPage .wrapper {
		padding-top: 8em;
	}
	
	.videoPage iframe{
		width: 65%;
		margin: 70px auto;
	}
	
	.videoPage .splide__arrows{
		display: block;
	}
	
	.videoPage .splide__arrow--prev{
		left: 10px !important;
	}
	
	.videoPage .splide__arrow--next{
		right: 10px !important;
	}
	
	.videoPage .cartoon_video {
		top: 200px;
		right: 35px;
	}
	
	.videoPage .cartoon_video img{
		width: 60px;
	}
	
	.videoPage .cartoon_big{
		bottom: 40px;
		left: -15px;
	}

	.videoPage .cartoon_big img{
		width: 120px;
	}

	.videoPage .cartoon_small{
		bottom: 60px;
		right: 20px;
	}

	.videoPage .cartoon_small img{
		width: 80px;
	}

}



@media (max-width: 600px) {

    .white-line::after {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .btn-detail-produk {
        width: 60%;
        height: 25px;
        padding: 0px;
        margin: 10px auto;
        display: block;
    }

    .btn-detail-produk span {
        font-size: 11px;
    }

    .photouser {
        display: block;
        margin: 0 auto;
    }

    .survey-main {
        background: url('../images/survey-main-mobile.png');
        background-size: cover;
        background-repeat: no-repeat !important;
        width: 100%;
        height: 965px;
    }

    .survey-caption {
        margin-top: 30px;
        background: none;
    }

    .survey-footer {
        background: url('../images/survey-footer-img-mobile.png');
        background-size: cover !important;
        width: 100%;
        height: 730px;
    }

    .sk-footer {
        margin-bottom: -45px !important;
    }

    .btn-survey {
        width: 172px !important;
        height: 40px;
        padding-top: 6px !important;
        font-size: 18px;
        border-radius: 15px;
    }

    .bg-terms {
        height: 100px;
    }

    .sk-title {
        font-size: 20px;
    }

    .sk-text {
        color: #40A399;
        font-size: 16px;
    }

    .sk-number {
        color: #40A399;
        font-size: 16px;
    }

}

@media (max-width: 576px) {
    .modalUpdateAnak .modal-content {
        width: 100%;
        background-position: right top;
    }

    .btnWoman {
        margin: 0px 0px 0px 10px !important;
    }

    .modalUpdateAnak .modal-dialog {
        max-width: none !important;
    }
}

@media (max-width: 375px) {
    .biostime-slider1 .slider-text {
        padding-top: 20rem;
    }
}

:root {
    --main-color: #14B4A2;
    --secondary-color: #C4C4C4;
    --linear-gold: linear-gradient(89.3deg, #AF882D -69.02%, #FFE047 114.62%);
}


.btn-group-toggle>.btn input[type="radio"] {
    position: relative;
    clip: auto;
    pointer-events: none;
}


.overlay-container{
	display: none; 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	z-index: 10000; 
	overflow: auto; 
}

#mftfFloatBanner{
	position: fixed; 
	bottom: 20px; 
	left: 0; 
	right: 0; 
	margin: 0 auto; 
	width: 98%; 
	padding-left: 10px;
}