@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
  color-scheme: only light;
}

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

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

input:focus {
    outline: none;
}
  
body {
    background-color: #F6F6F6;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    overflow-x: hidden;
}

ul {
    list-style: none;
}
  
.text-center {
    text-align: center;
}
  
.p-relative {
    position: relative;
}
  
.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}
  
.align-center {
    align-items: center;
}

.m-horizontal-auto {
    margin: 0 auto;
}

.justify-content-space-between {
    justify-content: space-between;
}

.wrapper {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}

.bg-logo {
    position: absolute;
    z-index: 0;
}

.bg-spiral {
    position: absolute;
    z-index: 0;
    height: auto;
}












/* ========== NAVBAR ========== */

nav {
    padding: 12px;
    background-color: #F9FBFD;
    position: fixed;
    z-index: 50;
    width: 100%;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
    top: 0px;
    transition: 0.6s;
}

.nav-logo,
.nav-logo img {
    width: 102px;
    height: 66.27px;
}

nav ul {
    display: flex;
    align-items: center;
    gap: 60px;
}

nav ul li {
    font-size: 16px;
    list-style: none;
    white-space: nowrap;
}

nav ul li p {
    color: #5F6D7E;
    position: relative;
}

.nav-inactive::before {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #08739C;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: right;
}

.nav-items > a:hover .nav-inactive::before {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-active {
    color: #08739C;
    font-weight: bold;
}

.nav-btn-wa {
    background-color: #08739C;
    border: 1.67px solid #08739C;
    border-radius: 25px;
    padding: 3.75px 10.17px 3.33px 10.83px;
    transition: transform 0.25s ease-in-out;
}

.nav-btn-wa:hover {
    transform: translateY(-3.33px);
    box-shadow: 0 3.33px 3.33px 0 rgba(0, 0, 0, 0.25);
}

.nav-btn-wa img {
    width: 16.58px;
    height: 16.67px; 
    margin-top:1.71px;
    /* #FFF */
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(136deg) brightness(109%) contrast(101%);
}

.nav-btn-wa p {
    font-size: 12.5px;
    color: #ffffff;
    font-weight: bold;
    vertical-align: middle;
}

.nav-hamburger {
    display: none;
    width: 31px;
    height: 18.5px;
    position: relative;
    cursor: pointer;
}

.nav-hamburger .hamburger {
    position: absolute;

    width: 31px;
    height: 2.5px;
    background-color: #2c2c2c;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.nav-hamburger .hamburger.top {
    top: 0;
    left: 0;
}
.nav-hamburger .hamburger.mid {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.nav-hamburger .hamburger.bot {
    top: 16px;
    left: 0;
}

.nav-right.open .hamburger.top {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-right.open .hamburger.mid {
    width: 0;
    transform-origin: center;
}

.nav-right.open .hamburger.bot {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
}




/* === HOME NAVBAR === */

nav.home {
    padding: 30px 12px;
    background-color: transparent;
    color: #fff;
    box-shadow: none;
}

nav.home ul li p {
    color: #fff;
}

nav.home .hamburger {
    background-color: #fff;
}













/* === FOOTER === */

footer {
    width: 100%;
    background-image: url("/assets/image/bg-footer.png");
    background-size: cover;
    background-position-x: center;
    padding: 79px 0px 41px 0px;
    z-index: 1;
    position: relative;
}

/* Footer Profile */

footer a {
    color: #FFF;
}

footer h5 {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 163%; /* 25.6px */
    letter-spacing: 0.16px;
    margin-bottom: 25px;
    white-space: nowrap;
}

footer ul li {
    list-style: none;
    margin-top: 8px;
    height: 26px;
    white-space: nowrap;
    color: #FFF;
    font-weight: 300;
}

.footer-profile img {
    width: 116.974px;
    height: 76px;
    flex-shrink: 0; 
}

.footer-profile h4 {
    margin-top: 11px;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.footer-profile p {
    margin-top: 5px;
    width: 206px;
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.14px;
}

.footer-contacts table {
    max-width: 300px;
}

.footer-contacts img {
    width: 23.29px;
    object-fit: none;
}

.footer-contacts tr {
    margin-top: 8px;
}

.footer-contacts p {
    margin-left: 12.71px;
    color: #FFF;
    font-weight: 300;
}


/* Footer Lower Part */

footer hr {
    width: 100%;
    height: 3px;
    margin: 39px auto 20px auto;
    background-color: rgba(255, 255, 255, 0.5);
}

.footer-copyright {
    width: fit-content;
    color: #FFF;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}










/* =========== HOME PAGE =========== */

.header-home {
    width: 100%;
    height: 735px;
    background-image: url("/assets/image/bg-header-home.png");
    background-size: 100% 652px;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 191px;
    overflow-x: hidden;
}

.header-home h6 {
    color: #FFF;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
}

.header-home h6 .animated-text {
    position: relative;
    margin-left: 5px;
}
.header-home h6 .animated-text span {
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(255, 255, 255, 0);
    visibility: hidden;
    white-space: nowrap;

    -moz-animation: baseText 6s infinite;
    -webkit-animation: baseText 6s infinite;
    animation: baseText 6s infinite;

    -o-animation-delay: calc(3s * var(--index));
    -webkit-animation-delay: calc(3s * var(--index));
    animation-delay: calc(3s * var(--index));
    -moz-animation-delay: calc(3s * var(--index));;
}
.header-home h6 .animated-text span::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    color: #14b6f5;
    border-right: 2px solid #14b6f5;
    filter: drop-shadow(0 0 4px #14b6f5) drop-shadow(0 0 0px #14b6f5);
    animation: autoText 3s linear infinite;
    white-space: nowrap;
}

@keyframes baseText {
    0% {
        visibility: visible;
    }
    50%, 100% {
        visibility: hidden;
    }
}
@keyframes autoText {
    0%, 10%, 100% {
        width: 0;
    }
    60%, 83% {
        width: 100%;
    }
    85%, 90% {
        width: calc(100% - 5.2px);
    }
}

.header-home h1 {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 2.4px;
    margin-top: 5px;
}

.header-home > .wrapper p {
    width: 515px;
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.8px;
    margin-top: 15px;
    
    position: relative;
}

.bg-nurse {
    position: absolute;
    top: -89px;
    right: -76.61px;
    width: 629.61px;
    height: 538.44px;
    z-index: 0;
}

.img-nurse {
    position: absolute;
    top: -88px;
    right: -45px;
    width: 542px;
    height: 481.5px;
    z-index: 1;
}

.home-statistic {
    width: 100%;
    height: fit-content;
    max-width: 1060px;
    bottom: -63px;
    margin: 167px auto 0 auto;
    box-shadow: 0 2px 20px 0 rgba(74, 74, 74, 0.2);
    z-index: 2;
}

.home-statistic-item {
    width: calc(100%/3);
    height: 170px;
}

.home-statistic-item:nth-of-type(1) {
    background-color: #fff;
}

.home-statistic-item:nth-of-type(1) img {
    margin: 24px auto 0 auto;
    display: block;
    filter: drop-shadow(0 3.65px 2px rgba(0, 0, 0, 0.25));
}

.home-statistic-item:nth-of-type(1) svg {
    margin: 24px auto 0 auto;
    display: block;
}

.home-statistic-item:nth-of-type(1) h5 {
    margin: -3px auto 0 auto;
    width: fit-content;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
}

.home-statistic-item:nth-of-type(1) p {
    margin: -9px auto 0 auto;
    width: fit-content;
    color: #08739C;
    font-size: 20px;
    font-weight: 400;
}

.home-statistic-item:nth-of-type(2) {
    background-color: #e4e4e4;
}

.home-statistic-item:nth-of-type(2) img {
    margin: 28.83px auto 0 auto;
    display: block;
    filter: drop-shadow(0 3px 1.5px rgba(0, 0, 0, 0.25));
}
.home-statistic-item:nth-of-type(2) svg {
    margin: 28.83px auto 0 auto;
    display: block;
}

.home-statistic-item:nth-of-type(2) h5 {
    margin: -7px auto 0 auto;
    width: fit-content;
    color: #2C2C2C;
    font-size: 32px;
    font-weight: 600;
}

.home-statistic-item:nth-of-type(2) p {
    margin: -9px auto 0 auto;
    width: fit-content;
    color: #2C2C2C;
    font-size: 20px;
    font-weight: 400;
}

.home-statistic-item:nth-of-type(3) {
    background-color: #08739C;
}

.home-statistic-item:nth-of-type(3) img {
    margin: 25px auto 0 auto;
    display: block;
}
.home-statistic-item:nth-of-type(3) svg {
    margin: 25px auto 0 auto;
    display: block;
}

.home-statistic-item:nth-of-type(3) h5 {
    margin: -9px auto 0 auto;
    width: fit-content;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
}

.home-statistic-item:nth-of-type(3) p {
    margin: -9px auto 0 auto;
    width: fit-content;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

/* Home About */

.home-about {
    margin-top: 92px;
    margin-bottom: 129.99px;
}

.home-about-imgs {
    background-image: url("/assets/svg/bg-home_about.svg");
    width: 438px;
    height: 585.01px;
    position: relative;
}

.home-about-imgs img:nth-of-type(1) {
    width: 337px;
    height: 245px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 0.841px solid #FFF;
    z-index: 1;
    object-fit: cover;
    object-position: 0 -49px;

    position: absolute;
    top: 300px;
    right: 0px;
}

.home-about-imgs img:nth-of-type(2) {
    width: 292px;
    height: 393px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 0.841px solid #FFF; 
    z-index: 0;
    object-fit: cover;

    position: absolute;
    top: 44px;
    left: 0px;
}

.home-about-imgs img:nth-of-type(3) {
    width: 108px;
    height: 49.5px;
    flex-shrink: 0;
    z-index: 2;

    position: absolute;
    top: 276px;
    right: 60px;
}

.home-about-content span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.home-about-content h6 {
    width: fit-content;
    display: inline-block;
    margin-top: 5px;
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
}

.home-about-content h2 {
    width: 530px;
    margin-top: 7px;
    color: #08739C;
    font-size: 31px;
    font-weight: 600;
}

.home-about-content p {
    width: 530px;
    margin-top: 12px;
    margin-bottom: 16px; 
    color: #535353;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.home-about-content li {
    width: 530px;
    color: #535353;
    font-size: 16px;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 0.64px;
    list-style: none;
    background: url("/assets/svg/bullet-home_about.svg") no-repeat 0 0;
    background-position-y: 4.5px;
    padding-left: 29px;
}

.home-about-content a {
    margin-top: 16px;
    width: fit-content;
    color: #08739C;
    font-size: 14px;
    font-weight: 600;

    display: block;
    padding: 5px 19.23px 5.91px 19px;
    border-radius: 41.667px;
    border: 1.667px solid #08739C;
    background: #FFF;
    box-shadow: 0px 3.333px 3.333px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.home-about-content a:hover {
    background-color: #08739C;
    color: #fff;
}





/* STRENGTH */

.home-strength {
    width: 100%;
    background-image: url("/assets/image/bg-home_strength.png");
    background-size: cover;
    padding: 83px 0;
}

.home-strength-content span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.home-strength-content h6 {
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
    display: inline-block;
}

.home-strength-content h2 {
    margin-top: 7px;
    margin-bottom: 49px;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
}

.strength-item {
    width: 321px;
    height: 273px;
    position: relative;
}

.strength-container {
    width: 321px;
    height: 273px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.strength-container .circle {
    width: 99px;
    height: 99px;
    margin: 0 auto;
    background-color: #fff;
    z-index: 0;
    position: relative;
    border-radius: 99px;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.strength-container .rect {
    width: 100%;
    height: 222px;
    position: absolute;
    top: 51px;
    left: 0;
    border-radius: 5px;
    background-color: #fff;
    z-index: 0;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.strength-container+div {
    width: 60.44px;
    height: 60.44px;
    border-radius: 60.44px;
    background-color: #08739C;
    margin: 19.78px auto 19.78px auto;
    display: block;
    position: relative;
    padding-top: 13px;
}

.strength-item:nth-of-type(2) .strength-container + div > img {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    margin: 0 auto;
    display: block;
    filter: invert(100%) sepia(6%) saturate(25%) hue-rotate(310deg) brightness(109%) contrast(106%);
}

.strength-item:nth-of-type(3) .strength-container + div > img {
    width: 35.83px;
    height: 32.25px;
    flex-shrink: 0;
    margin: .37px auto 0 auto;
    display: block;
    filter: invert(100%) sepia(6%) saturate(25%) hue-rotate(310deg) brightness(109%) contrast(106%);
}

.strength-item:nth-of-type(1) img {
    width: 60.44px;
    height: 60.44px;
    filter: invert(23%) sepia(92%) saturate(1795%) hue-rotate(175deg) brightness(98%) contrast(94%);
    position: relative;
    margin: 19.78px auto 19.78px auto;
    display: block;
}

.strength-item h3 {
    width: 225px;
    color: #353535;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    margin: 0 auto;
}

.strength-item p {
    width: 258px;
    color: #353535;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    position: relative;
    margin: 14px auto 0 auto;
}

.strength-item:nth-of-type(3) p {
    position: relative;
    margin: 8px auto 0 auto;
}

.strength-item:hover .circle,
.strength-item:hover .rect {
    background-color: #2c2c2c;
}

.strength-item:hover h3,
.strength-item:hover p {
    color: #fff;
}

.strength-item:hover .strength-container + div {
    background-color: #fff;
}

.strength-item:hover .strength-container + div > img {
    filter: invert(15%) sepia(0%) saturate(460%) hue-rotate(222deg) brightness(95%) contrast(92%);
}

.strength-item:nth-of-type(1):hover img {
    filter: invert(100%) sepia(6%) saturate(25%) hue-rotate(310deg) brightness(109%) contrast(106%);
}






/* Home Products */

.home-products {
    width: 100%;
    height: 846px;
    background-image: linear-gradient(white, white);
    position: relative;

    background-size: 100% 761px;
    background-color: #E4E4E4;
    background-repeat: no-repeat;
    padding-top: 58px;
}

.home-products .bg-spiral:nth-of-type(1) {
    width: 437px;
    top: 60px;
    right: 49px;
}
.home-products .bg-spiral:nth-of-type(2) {
    width: 363px;
    top: 269px;
    left: 72px;
}

.home-products-container .container > span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.home-products-container h6 {
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
    display: inline-block;
}

.home-products-container > h2 {
    margin: 7px auto 60px auto;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
}

.home-products-item {
    width: 246px;
    height: 320px;
    flex-shrink: 0;
    border-radius: 10.21px;
    background-color: #fff;
    position: relative;
    display: block;
    filter: drop-shadow(0 2.98px 2.98px rgba(0, 0, 0, 0.25));
}

.home-products-item:hover {
    background-color: #2C2C2C;
}

.home-products-item > img:nth-of-type(1) {
    width: 237.74px;
    height: 98.88px; 
    margin-top: 37.12px;
    margin-left: 5.02px;
    display: block;
}

.home-products-item > img:nth-of-type(2) {
    position: absolute;
    top: 0;
    right: -0.5px;
    width: 65.2px;
    height: 65.2px;
    display: block;
    z-index: 2;
    filter: drop-shadow(0 4.01px 4.01px rgba(0, 0, 0, 0.25));
}

/* CHANGES ==> */
/* HAPUS IKI */
/* .home-products-item > img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 247px;
    height: 12px;
    display: block;
    z-index: 1;
} */

.home-products-item .category-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    height: 12px;
    background-color: #08739C;
    border-radius: 0 0 10.21px 10.21px;
}
/* <== CHANGES */

.home-products-item .category-lock {
    position: absolute;
    top: 19.06px;
    right: 24.61px;
    width: 42.13px;
    height: 42.13px;
    border-radius: 42.13px;
    background-color: #2c2c2c;
    z-index: 1;
}

.home-products-item:hover .category-lock {
    background-color: #fff;
}

.home-products-item .category-lock img {
    width: 19.97px;
    height: 25.02px;
    margin-top: 7.02px;
    margin-left: 11.03px;
    display: block;
    filter: brightness(0) invert(1);
}

.home-products-item:hover .category-lock img {
    filter: invert(16%) sepia(0%) saturate(1%) hue-rotate(95deg) brightness(97%) contrast(95%);
}

.home-products-item h3 {
    margin: 11.46px auto 2.21px auto;
    width: 196.244px;
    color: #2C2C2C;
    text-align: center;
    font-size: 20.063px;
    font-weight: 700;
    line-height: 160%; /* 32.1px */
    letter-spacing: 0.201px;
}

.home-products-item:hover h3 {
    color: #fff;
}

.home-products-item p {
    margin: 0 auto;
    width: 181.225px;
    color: #2C2C2C;
    text-align: center;
    font-size: 15.047px;
    font-weight: 400;
    line-height: 160%; /* 24.075px */
    letter-spacing: 0.15px;
}

.home-products-item:hover p {
    color: #fff;
}

.home-products-container > a {
    width: fit-content;
    margin: 60px auto 0 auto;
    display: block;

    border-radius: 41.667px;
    border: 1.667px solid #08739C;
    background: #FFF;
    filter: drop-shadow(0px 3.333px 3.333px rgba(0, 0, 0, 0.25));
    
    color: #08739C;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 19.23px 5.91px 19px;
    white-space: nowrap;
}

.home-products-container > a:hover {
    color: #fff;
    background-color: #08739C;
}

.home-products .product-tip {
    width: 100%;
    height: 170px;
    background-color: #2c2c2c;
    margin: 69px auto 0 auto;
    position: relative;
}

.product-tip .section-title {
    width: 267px;
    background-color: #08739C;
    padding: 41px 44px 42px 45px;
}

.product-tip .section-title span {
    width: 12px;
    height: 87px;
    background-color: #fff;
    float: left;
    margin-right: 12px;
}

.product-tip .section-title h3 {
    color: #FFF;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.75px;
}

.product-tip .section-title h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 19.5px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2.2px;
}

.product-tip .section-title h2 {
    margin-top: -12px;
    color: #FFF;
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.8px;
}

.product-tip > img {
    width: 53.83px;
    height: 53.45px;
    transform: rotate(-21.58deg);
    filter: drop-shadow(0 7.64px 7.64px rgba(0, 0, 0, 0.25));

    position: absolute;
    top: 11.16px;
    left: 235.94px;
}

.product-tip > p {
    width: 712px;
    height: fit-content;
    margin: 0 38px 0 43px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
}

.product-tip > p span {
    font-weight: 700;
}



/* Home Testimonial */


.home-testi {
    width: 100%;
    background-color: #E4E4E4;
    padding: 67px 0 73px 0;
    position: relative;
}

.home-testi .wrapper > img:nth-of-type(1) {
    position: absolute;
    width: 382.58px;
    height: 417.54px;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.home-testi .wrapper > img:nth-of-type(2) {
    position: absolute;
    top: 35.31px;
    left: 48.55px;
    border-radius: 12.54px;
    width: 292.19px;
    height: 334.65px;
    z-index: 1;
}

.home-testi .wrapper > img:nth-of-type(3) {
    position: absolute;
    width: 94.31px;
    height: auto;
    top: 63px;
    right: 57.69px;
    z-index: 0;
}

.home-testi-content {
    padding-top: 53px;
    margin-left: 458px;
}

.home-testi-content .container span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.home-testi-content h3 {
    width: fit-content;
    display: inline-block;
    margin-top: 5px;
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
    position: relative;
}

.home-testi-content h2 {
    margin-top: 7px;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
    position: relative;
}

.testi-container {
    margin-top: 45px;
    width: 652px;
    overflow-x: hidden;
}

.testi-item {
    transition: all 0.8s ease-in-out;
    margin-right: 50px;
}

.testi-item > img {
    width: 56px;
    height: 56px;
    border-radius: 56px;
    float: left;
    margin-right: 20px;
    object-fit: cover;
    object-position: top;
}

.testi-item h5 {
    margin-top: 5px;
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.testi-item h6 {
    margin-top: -2px;
    color: #2C2C2C;
    font-size: 14px;
    font-weight: 300;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.14px;
}

.testi-item p {
    margin-top: 12px;
    width: 602px;
    color: #2C2C2C;
    text-align: justify;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.testi-stars {
    margin-top: 29px;
    padding-left: 3px;
    width: fit-content;
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.testi-stars img {
    width: 20px;
    height: 19px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    display: block;
}

.testi-stars .partial-star {
    width: calc(var(--partial) * 20px);
    display: inline-block;
    overflow: hidden;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.partial-star img {
    filter: none;
}

.testi-slider {
    margin: 95px auto 0 auto;
    width: fit-content;
    gap: 4px;
}

.testi-slider .slide {
    width: 24px;
    height: 8px;
    border-radius: 5.82px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.testi-slider .slide.active {
    width: 44px;
    background-color: #B8B8B8;
    cursor: default;
}

/* Home Gallery */


.home-gallery {
    background-image: url("/assets/image/bg-home_gallery.png");
    background-size: cover;
    width: 100%;
    height: 695px;
    padding-top: 59px;
    position: relative;
}

.home-gallery-content span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.home-gallery-content h3 {
    width: fit-content;
    display: inline-block;
    margin-top: 5px;
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
}

.home-gallery-content > h2 {
    width: 530px;
    margin-top: 7px;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
}

.home-gallery-content .arrow-prev {
    position: absolute;
    width: 33px;
    height: 33px;
    top: 322px;
    left: 0;
    background-color: #fff;
    border-radius: 50px;
    z-index: 2;
}
.home-gallery-content .arrow-next {
    position: absolute;
    width: 33px;
    height: 33px;
    top: 322px;
    right: 0;
    background-color: #fff;
    border-radius: 50px;
    z-index: 2;
}
.home-gallery-content .arrow {
    filter: invert(19%) sepia(99%) saturate(2565%) hue-rotate(180deg) brightness(97%) contrast(94%);
    cursor: pointer;
}

.gallery-container {
    margin: 40px auto 0 auto;
    width: 936.19px;
    height: 438px;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.gallery-item {
    object-fit: cover;
    object-position: center;
    transition: all 0.6s ease-in-out;
    cursor: pointer;

    position: absolute;
    top: 97.29px;
    right: -118.54px;
    width: 148.27px;
    height: 238.42px;
    border: 2px solid white;
    border-radius: 8.2px;
    z-index: 0;
    display: block;
    
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes gallery-slip-in {
    from {
        transform: translateX(-449.55px);
        z-index: 5;
    }
    66.66% {
        transform: translateX(-721.42px);
        z-index: 5;
    }
    67% {
        z-index: 3;
    }
    to {
        transform: translateX(-671.42px);
        z-index: 3;
    }
}
@keyframes gallery-slip-in-right {
    from {
        transform: translateX(-449.55px);
        z-index: 5;
    }
    66.66% {
        transform: translateX(-213.42px);
        z-index: 5;
    }
    67% {
        z-index: 3;
    }
    to {
        transform: translateX(-264.52px);
        z-index: 3;
    }
}

.gallery-item.pos0 {
    display: block;
    transform: translateX(-1024.73px);
    z-index: 1;
}

.gallery-item.pos1 {
    display: block;
    width: 187.19px;
    height: 301px;
    border-radius: 10.35px;
    z-index: 2;
    top: 69px;
    transform: translateX(-867.54px);
}

.gallery-item.pos2 {
    display: block;
    width: 236.31px;
    height: 379.99px;
    border-radius: 13.07px;
    z-index: 3;
    top: 26.06px;

    /* animation: gallery-slip-in 1.6s ease-in-out; */
    transform: translateX(-671.42px);
}

.gallery-item.pos3 {
    display: block;
    width: 272.38px;
    height: 438px;
    border-radius: 15.07px;
    z-index: 4;
    top: 0;
    transform: translateX(-449.55px);
}

.gallery-item.pos4 {
    display: block;
    width: 236.31px;
    height: 379.99px;
    border-radius: 13.07px;
    z-index: 3;
    top: 26.06px;
    transform: translateX(-264.52px);
}

.gallery-item.pos5 {
    display: block;
    width: 187.19px;
    height: 301px;
    border-radius: 10.35px;
    z-index: 2;
    top: 69px;
    transform: translateX(-118.54px);
}

.gallery-item.pos6 {
    z-index: 1;
}

/* Gallery Detail */

.gallery-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 780px;
}

.gallery-detail .bg-dark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 780px;
    background-color: rgba(44, 44, 44, 0.8);
    cursor: zoom-out;
}

.gallery-detail-container {
    width: 625.17px;
    height: 437px;
    border-radius: 15.07px;
    z-index: 6;
    background-color: #08739C;
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    cursor: default;
}

.gallery-detail .detail-pic {
    width: 356.28px;
    height: 424px;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 7;
    border-radius: 15.07px 0 0 0;
}

.gallery-detail .bg-gallery-detail {
    width: 393.3px;
    height: 424px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    object-fit: cover;
    border-radius: 0 15.07px 0 0;
}

.gallery-detail .title {
    position: absolute;
    top: 68px;
    right: 71.17px;
    width: 224px;
    height: 47px;
    z-index: 9;
}

.gallery-detail .title h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle;
    
    color: #FFF;
    font-size: 16.452px;
    font-weight: 700;
    z-index: 9;
}

.gallery-detail p {
    position: absolute;
    top: 162px;
    right: 43.8px;
    width: 224.372px;
    z-index: 9;

    color: #535353;
    font-size: 14.395px;
    font-weight: 300;
    line-height: 160%; /* 23.032px */
    letter-spacing: 0.144px;
    text-align: justify;
}





/* Home Partners */

.home-partners {
    width: 100%;
    height: 555px;
    background-image: url("/assets/image/bg-home_partners.png");
    background-size: 100% 470px;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-color: #fff;
}

.manuf-partners {
    width: 1060px;
    height: 170px;
    background-color: #2c2c2c;
}

.manuf-partners .section-title {
    width: 341px;
    height: 170px;
    background-color: #08739C;
    padding: 49px 32.5px 0 32.5px;
}

.manuf-partners .section-title span {
    width: 12px;
    height: 76px;
    background-color: #fff;
    float: left;
    margin-right: 12px;
}

.manuf-partners .section-title h3 {
    color: #FFF;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.75px;
}

.manuf-partners .section-title h1 {
    margin-top: -13px;
    color: #FFF;
    font-family: Poppins;
    /* font-size: 36px; */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.manuf-partners .section-title h2 {
    margin-top: -16px;
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2.7px;
}

.manuf-partners .manufacturers {
    margin: 31px 44px 31px 53px;
    width: 670px;
}

.manufacturers .manufacturer h6 {
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.manufacturers .manufacturer p {
    width: 165px;
    margin: 6px auto 0 auto;
    color: #FFF;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-align: center;
}

.hospital-partners .section-title {
    margin: 82px auto 45px auto;
    width: fit-content;
    text-align: center;
}

.hospital-partners .section-title span {
    margin: 0 5px 2px 0;
    width: 25px;
    height: 5px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
    display: inline-block;
    vertical-align: middle;
}

.hospital-partners .section-title h3 {
    width: fit-content;
    display: inline-block;
    margin-top: 5px;
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.56px;
}

.hospital-partners .section-title h2 {
    margin-top: 7px;
    color: #08739C;
    font-size: 32px;
    font-weight: 600;
}

.hospital-scroller {
    max-width: 1060px;
}

.hospital-scroller .inner-scroller {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hospital-scroller[data-animated="true"] {
    overflow: hidden;
    /* -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 6%,
        white 94%,
        transparent
    );
    mask: linear-gradient(
        90deg, transparent, white 6%, white 94%, transparent
    ); */
}

@keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

.hospital-scroller[data-animated="true"] .inner-scroller {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }
  

.hospital-scroller .scroller-item {
    width: 160px;
    height: 80px;
    border-radius: 8px;
    background-color: #fff;
    position: relative;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.hospital-scroller .scroller-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}















/* === CSR PAGE === */

.header-csr {
    width: 100%;
    height: 316px;
    margin-top: 91px;
    background-image: url("/assets/image/bg-header-csr.png");
    background-size: cover;
    padding-top: 62px;
    /* CHANGE */background-position-x: center;
}

.header-csr h1 {
    color: #FFF;
    text-align: center;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 3.2px;
}

/* CSR LIST */

.container-csr-list {
    margin-top: 109px;
    margin-bottom: 135px;
}

.csr-item {
    margin-bottom: 88px;
}

.csr-item-date {
    margin-top: 78px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    color: #767676;
}

.csr-item-title {
    color: #08739C;
    font-size: 32px;
    font-weight: bold;
    line-height: 41.60px;
    letter-spacing: 0.64px;
}

.csr-item-desc {
    margin-top: 20px;
    color: #535353;
    font-size: 16px;
    font-weight: 300;
    line-height: 155%; /* 31px */
    letter-spacing: 0.2px; 
}

.btn-csr-detail {
    margin-top: 30px;
    background-color: #F6F6F6;
    border: 2px solid #08739C;
    box-shadow: 0 3.33px 3.33px 0 rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    padding: 4.25px 20px;
    width: fit-content;
}

.btn-csr-detail p {
    color: #08739C;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-csr-detail:hover {
    background-color: #08739C;
}

.btn-csr-detail:hover p {
    color: #F6F6F6;
}

.csr-item-img-r {
    width: 382px;
    min-width: 382px;
    height: 438px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 20px 20px 27px;
    background-color: #5F6D7E;
    box-shadow: 20px 20px 0px 0px #08739C;
}

.csr-item-img-l {
    width: 382px;
    min-width: 382px;
    height: 438px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 54px 20px 20px;
    background-color: #5F6D7E;
    box-shadow: -20px 20px 0px 0px #08739C;
}

.container-future-project {
    background-image: url("/assets/image/coming-soon.png");
    background-size: cover;
    height: 316px;
    width: 100%;
    background-position-x: center;
    margin-bottom: 93px;
}

.future-project-content {
    text-align: center;
    height: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container-future-project h1 {
    color: #FFF;
    text-align: center;
    font-size: 64px;
    font-weight: 700;
    line-height: 130%; /* 83.2px */
    letter-spacing: 3.2px;
}

.container-future-project p {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
}

/* CSR DETAIL */

.container-csr-detail {
    margin-top: 168px;
    margin-bottom: 76px;
}

.csr-detail-date {
    color: #767676;
    font-size: 16px;
    font-weight: 300;
}

.csr-detail-title {
    margin-top: 12px;
    color: #08739C;
    font-size: 32px;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.64px;
    max-width: 535px;
}

.csr-detail img {
    display: block;
    margin-top: 42px;
    width: 538.986px;
    height: 618px;
    flex-shrink: 0;
    border-radius: 21.16px;
    object-fit: cover;
    background-color: #535353;
}

.csr-detail-desc {
    margin-top: 42px;
    max-width: 630px;
    color: #535353;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.csr-others p {
    color: #606060;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20.17px;
}

.csr-others-item {
    width: 357px;
    padding: 16.83px 18px 17.79px 18px;
    margin-bottom: 20.54px;
    background-color: #fff;
    border-radius: 7.78px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

.csr-others-item img {
    display: block;
    width: 131.227px;
    height: 191.674px;
    border-radius: 7.251px;
    border: 0.405px solid #F0F5FF;
    object-fit: cover;
    background-color: #535353;
    flex-shrink: 0; 
}

.csr-others-item-summary {
    margin-top: 24px;
    margin-left: 23.77px;
}

.csr-others-item-summary h3 {
    color: #08739C;
    font-size: 16px;
    font-weight: 600;
}

.csr-others-item-summary p {
    margin-top: 7px;
    color: #535353;
    font-size: 12px;
    font-weight: 300;
    line-height: 160%; /* 19.2px */
    letter-spacing: 0.12px;
}

.btn-csr-others-more {
    margin-top: 14px;
    display: block;
    width: fit-content;
    padding: 3.33px 16px 3.67px 16px;
    border-radius: 33.333px;
    border: 1.333px solid #08739C;
    background: #FFF;
    color: #08739C;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 2.67px 2.67px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
}


.btn-csr-others-more:hover {
    background-color: #08739C;
    color: #fff;
}













/* ============= ABOUT US PAGE ========== */

.header-about-us {
    margin-top: 91px;
    width: 100%;
    height: 316px;
    background-image: url("/assets/image/bg-header-about-us.png");
    background-size: cover;
    background-position-x: center;
}

.header-about-us h1 {
    color: #FFF;
    width: fit-content;
    margin: 0 auto;
    font-size: 64px;
    font-weight: 700;
    line-height: 130%; /* 83.2px */
    letter-spacing: 3.2px;
    line-height: 316px;
}

.about-desc {
    padding-top: 111px;
    padding-bottom: 111px;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}
.about-desc .bg-spiral:nth-of-type(1) {
    width: 212px;
    top: 133px;
    right: 229px;
}
.about-desc .bg-spiral:nth-of-type(2) {
    width: 259px;
    top: 374px;
    right: -30px;
}

.about-company-pics {
    position: relative;
    width: 330.38px;
    height: 464px;
}

.about-company-pics .decor {
    width: 386.82px;
    height: 488px;
    position: absolute;
    top: 0;
    left: -29px;
    z-index: 0;
}

.rear-company-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 207px;
    height: 391px;
    display: block;
    border-radius: 15.067px;
    border: 0.841px solid #FFF;
    z-index: 1;
    object-fit: cover;
}

.front-company-pic {
    position: absolute;
    top: 26px;
    left: 58px;
    width: 272.384px;
    height: 438px;
    flex-shrink: 0;
    border-radius: 15.067px;
    border: 0.841px solid #FFF;
    z-index: 2;
    object-fit: cover;
}

@keyframes front-pic-hover {
    50% {
        transform: translate(74.5px, 30px);
    }
}

@keyframes front-pic-out {
    50% {
        transform: translate(74.5px, 30px);
    }
}

@keyframes rear-pic-hover {
    from {
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        transform: translate(-74.5px, -30px);
        z-index: 3;
    }
}

@keyframes rear-pic-out {
    from {
        z-index: 3;
    }
    49% {
        z-index: 3;
    }

    50% {
        transform: translate(-74.5px, -30px);
        z-index: 1;
    }
}

.front-company-pic.inactive {
    animation: front-pic-out 0.8s ease-in-out;
}

.rear-company-pic.inactive {
    animation: rear-pic-out 0.8s ease-in-out;
}

.about-company-pics .front-company-pic.active {
    animation: front-pic-hover 0.8s ease-in-out;
}

.about-company-pics .rear-company-pic.active {
    animation: rear-pic-hover 0.8s ease-in-out;
    z-index: 3;
}

.company-desc {
    margin: 38px 0 0 95.62px;
}

.company-desc-vertical-line {
    height: 42px;
    width: 8px;
    background-color: rgba(8, 115, 156, 0.8);
}

.company-desc-top h6 {
    margin: 3px 0 3px 12px;
    color: #767676;
    font-size: 24px;
    font-weight: 400;
}

.company-desc h1 {
    margin-top: 16px;
    color: #08739C;
    font-size: 36px;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.72px;
}

.company-desc p {
    max-width: 634px;
    color: #535353;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.about-prakata {
    background-image: url("/assets/image/bg-prakata.png");
    background-size: cover;
    width: 100%;
    height: 295px;
    position: relative;
    padding: 48.5px 139px;
    margin: 138px auto 0 auto;
    border-radius: 20px;
    background-position-x: center;
}

.about-prakata .pic-komisaris {
    width: 290px;
    height: 425px;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    right: 112px;
}

.about-prakata > img:nth-of-type(1),
.about-prakata > img:nth-of-type(2) {
    width: 29.63px;
    height: 25px;
    position: absolute;
}

.about-prakata > img:nth-of-type(1) {
    top: 41px;
    left: 91px;
    transform: scaleX(-1);
}

.about-prakata > img:nth-of-type(2) {
    top: 192px;
    right: 524.37px;
}

.about-prakata p {
    width: 529px;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
}

.about-prakata h6 {
    margin-top: 18px;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
}





/* VISION & MISSION */

.vimi {
    width: 100%;
    background-image: url("/assets/image/bg-vimi.png");
    background-size: cover;
    background-position-x: center;
    padding: 45px 0;
    position: relative;
}

.vimi-container {
    position: relative;
    height: 472.81px;
}

.vimi-card {
    width: 618px;
    height: 265.81px;
    flex-shrink: 0;
    border-radius: 32.979px;
    background: linear-gradient(111deg, rgba(255, 255, 255, 0.36) 1.21%, rgba(196, 196, 196, 0.06) 100%);
    backdrop-filter: blur(8.8336820602417px);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* ========================== */

.visi img {
    width: 350px;
    position: absolute;
    left: -50px;
    top: 70px;
    transform: translateX(-300px);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.misi img {
    width: 350px;
    position: absolute;
    left: -50px;
    top: 70px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 0;
}

.vimi-card:hover img {
    transform: translateX(0px);
    transition: all 0.4s ease-in-out;
    opacity: 1;
}

.vimi-card-container {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.vimi-card:hover {
    scale: 1.1;
    background-color: #f6f6f6;
    z-index: 2;
}

.vimi-card:hover h1,
.vimi-card:hover p,
.vimi-card:hover li {
    color: #535353;
}

.vimi h1 {
    width: fit-content;
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 2px;
    transition: transform 0.4s ease-in-out;
}

.visi h1 {
    transform: translateY(100px);
}

.misi h1 {
    transform: translateY(126px);
}

.vimi h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
    transition-delay: 0.6s;
}

.vimi-card:hover h1::before {
    background: #535353;
    transform: scaleX(0);
    transform-origin: left;
    transition-delay: 0s;
}

.vimi-card:hover h1 {
    transform: translateY(0px);
    transition: transform 0.4s ease-in-out;
}

.vimi-card:hover p,
.vimi-card:hover li {
    transform: translateY(0px);
    transition: transform 0.4s ease-in-out;

}

.vimi p,
.vimi li {
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.16px;
    transition: transform 0.4s ease-in-out;
}

.visi {
    position: relative;
    padding: 55px 71px;
    z-index: 0;
}

.visi p {
    transform: translateY(100px);
}

.misi li {
    transform: translateY(150px);
}

.misi {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    padding: 29px 72px;
}

/* .vimi h1 {
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 2px;
}

.vimi p,
.vimi li {
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: 0.16px;
}

.visi {
    position: relative;
    padding: 55px 71px;
    z-index: 0;
}

.misi {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    padding: 29px 72px;
} */

.misi li {
    margin-left: 16px;
    list-style: disc;
}





/* COMPANY LICENSES */

.licenses {
    width: 100%;
    height: 541px;
    background-image: url("/assets/svg/background-logo.svg");
    background-size: 747px 485.34px;
    background-position: left -26px top 136px;
    background-repeat: no-repeat;
    padding-top: 86px;
}

.licenses h1 {
    width: fit-content;
    color: #535353;
    font-size: 32px;
    font-weight: 600;
    margin: 0 auto;
}

.license-line {
    margin: 2px auto 0 auto;
    width: 152px;
    height: 8px;
    flex-shrink: 0;
    background: rgba(8, 115, 156, 0.80);
}


.container-licenses {
    /* background-image: url("/assets/image/frame-licenses.png");
    background-position-x: center; */

    margin: 55px auto 0 auto;
    width: 100%;
    height: 256px;
    padding: 59px 72px;

    background: #fff;
    border-radius: 40px;
    position: relative;
    transition: 0.5s;
    overflow: hidden;
}

.container-licenses::before {
    content: '';
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    background: radial-gradient(#08739C, transparent, transparent);
    width: 600px;
    height: 600px;
    opacity: 0;
    transition: 0.5s, top 0s, left 0s;
}

.container-licenses:hover::before {
    opacity: 1;
}

.container-licenses::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 40px;
}

.license-l {
    margin-bottom: 7px;
}

.license-l:nth-last-of-type(1) {
    margin-bottom: 0;
}

.license-dot {
    width: 16px;
    height: 16px;
    background-color: #08739C;
    border-radius: 50%;
    margin-top: 2px;
    margin-right: 15.09px;
    display: block;
}

.license-l p {
    color: #535353;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.32px;
}

.akta h6 {
    color: #535353;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.32px;
}

.akta p {
    margin-top: 11px;
    color: #535353;
    font-size: 16px;
    font-weight: 300;
    line-height: 155%; /* 24.8px */
    letter-spacing: 0.48px;
}













/* ========= PRODUCTS PAGE ========== */

.header-products {
    margin-top: 91px;
    padding-top: 98px;
    width: 100%;
    height: 316px;
    background-image: url("/assets/image/bg-header-products.png");
    background-size: cover;
    background-position-x: center;
}

.header-products h1 {
    color: #FFF;
    width: fit-content;
    margin: 0 auto;
    font-size: 40px;
    font-weight: 700;
}

.searchbar {
    margin: 8px auto 0 auto;
    width: fit-content;
    background-color: #fff;
    border-radius: 50px;
    border: 2px solid #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    cursor: text;
    position: relative;

    transition: all 0.4s ease-in-out;
}

.searchbar input {
    font-family: "Poppins";
    width: 195px;
    height: 40px;
    color: rgba(95, 109, 126, 0.5);
    background-color: rgba(255, 255, 255, 0);
    font-size: 16px;
    font-weight: 400;
    border: none;
    border-radius: 50px;
    padding-left: 24px;
    padding-right: 50px;

    transition: all 0.4s ease-in-out;
    z-index: 3;
}

.btn-searchbar-remove {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 13px;
    right: 75px;
    transform: rotate(0deg);
    transition: all .4s ease-in-out;
    cursor: pointer;
}

.icon-remove {
    position: absolute;
    width: 13px;
    height: 13px;
    transform: scale(0);
    transition: all .5s ease-in-out;
}

.searchbar .btn-search {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    transition: transform .4s ease-in-out;
}

.btn-search img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.searchbar:focus-within input {
    width: 460px;
    padding-right: 97px;
    z-index: 0;
}

.searchbar:focus-within .btn-searchbar-remove {
    transform: rotate(720deg);
    transition: all .4s ease-in-out;
}

.searchbar:focus-within .icon-remove {
    transition-delay: 0s;
    transform: scale(1);
    transition: all .3s ease-in-out;
    /* cursor: pointer; */
}

.searchbar:focus-within .btn-search {
    transform: translate(-15px -50%);
    cursor: pointer;
}


/* PRODUCT LIST */

.products {
    margin-top: 67px;
    margin-bottom: 85.9px;
}

.products select {
    font-family: "Poppins";
    width: 340px;
    color: rgba(83, 83, 83, 0.8);
    font-size: 16px;
    font-weight: 400;
    padding: 8px 20px;
    background-color: #FFF;
    border-radius: 10px;
    border: 1.5px solid rgba(83, 83, 83, 0.8);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);

    appearance: none;
    background-image: url("/assets/svg/arrow.svg");
    background-repeat: no-repeat;
    background-position: top 14px right 20.67px;
}
/* CHANGES (BUKAN DI MEDIA) ==> */
.products select:focus {
    outline: none;
}
/* <== CHANGES */

.products select option {
    font-family: "Poppins";
    color: rgba(83, 83, 83, 0.50);
    font-size: 16px;
    font-weight: 400;
}

.products-list {
    display: grid;
    /* grid-template: 272px 272px 272px / 250px 250px 250px 250px; */
    gap: 50px 20px;
    margin: 85px auto 0 auto;
    width: fit-content;
    grid-template-columns: repeat(4, 1fr);
}

.products-list .product {
    width: fit-content;
    background-image: url("/assets/svg/bg-product-item.svg");
    background-position-y: top;
    background-size: 250px 192px;
    background-repeat: no-repeat;
}

.product .product-frame {
    display: block;
    width: 250px;
    height: 192px;
    position: relative;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    border-radius: 14.53px;
}

.product img {
    max-width: 170px;
    max-height: 152px;
    flex-shrink: 0;
    border-radius: 16px;
    object-fit: cover;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product p {
    margin: 20px auto 0 auto;
    width: 236px;
    height: 60px;
    flex-shrink: 0;
    color: #535353;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.products-not-found {
    margin: 100px auto 200px auto;
    width: fit-content;
}

.products-not-found img {
    margin-left: 160px;
    width: 224.49px;
    height: 206px;
    display: block;
}

.products-not-found h2 {
    margin-top: 14px;
    color: #2C2C2C;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}

.products-not-found p {
    margin-top: 8px;
    width: 500px;
    color: #353535;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}



.products-pagination {
    margin: 41px auto 0 auto;
    width: fit-content;
    gap: 15px;
}

.products-pagination .navigation {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    background-color: #535353;
    stroke-width: 1.382px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

.products-pagination .navigation.inactive {
    background-color: #B8B8B8;
    cursor: default;
}

.products-pagination .navigation.prev img {
    width: 5.25px;
    height: 10.5px;
    position: absolute;
    top: 5.25px;
    left: 7.44px;
}

.products-pagination .navigation.next img {
    width: 5.25px;
    height: 10.5px;
    position: absolute;
    top: 5.25px;
    right: 7.44px;
    transform: scaleX(-1);
}








/* CATALOG */

.catalog {
    width: 100%;
    height: 316px; 
    background-image: url("/assets/image/bg-catalog.png");
    background-size: cover;
    background-position: center;
    padding-top: 93px;
    margin-bottom: 93px;
}

.catalog h1 {
    width: 667px;
    display: block;
    margin: 0 auto;
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 130%; /* 39px */
    letter-spacing: 1.5px;
}

.catalog a {
    margin: 21px auto 0 auto;
    width: fit-content;
    padding: 6px 25px;
    display: block;

    color: #08739C;
    font-family: Poppins;
    font-size: 12.5px;
    font-weight: 600;

    border-radius: 41.667px;
    border: 1.667px solid #08739C;
    background-color: #FFF;
    box-shadow: 0 3.33px 3.33px rgba(0, 0, 0, 0.25);
}

.catalog a:hover {
    background-color: #08739C;
    color: #fff;
}













/* PRODUCT DETAIL PAGE */

.detail {
    margin-top: 187px;
}

.detail-preview {
    padding: 0 16.5px;
    width: 481px;
    position: relative;
}

.detail-imgs {
    height: 378.52px;
    flex-shrink: 0;
    overflow-x: hidden;
}

.detail-preview .arrow-prev {
    position: absolute;
    width: 33px;
    height: 33px;
    top: 172px;
    left: 0;
    background-color: #fff;
    border-radius: 50px;
    z-index: 2;
}

.detail-preview .arrow-next {
    position: absolute;
    width: 33px;
    height: 33px;
    top: 172px;
    right: 0;
    background-color: #fff;
    border-radius: 50px;
    z-index: 2;
}

.detail-preview .arrow {
    width: inherit;
    height: inherit;
    filter: invert(19%) sepia(99%) saturate(2565%) hue-rotate(180deg) brightness(97%) contrast(94%);
    cursor: pointer;
    transition: all 0.8s ease-in-out;
}

.detail-preview .arrow.inactive {
    filter: invert(80%) sepia(13%) saturate(181%) hue-rotate(174deg) brightness(90%) contrast(88%);
    cursor: default;
}

.detail-img {
    width: 448px;
    min-width: 448px;
    height: 378.52px;
    display: block;
    border-radius: 25px;
    transition: all 0.8s ease-in-out;
    position: relative;
}
.detail-img img {
    object-fit: cover;
    max-width: 448px;
    max-height: 378.52px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detail-thumbnail {
    margin-top: 49.48px;
    width: 100%;
}

.product-thumbnail {
    width: 123px;
    height: 94px;
    border-radius: 7.87px;
    cursor: pointer;
    object-fit: cover;
    margin-right: 40px;
}

.product-thumbnail:last-of-type {
    margin-right: 0;
}



.details h1 {
    width: 466px;
    color: #08739C;
    font-size: 32px;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.64px;
}

.details > p {
    color: #535353;
    font-size: 14px;
    font-weight: 300;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.14px;
}

.details > hr {
    width: 100%;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    margin: 12.51px 0 17.49px 0;

}

.details > h5 {
    color: #535353;
    font-size: 16px;
    font-weight: 500;
    line-height: 160%; /* 25.6px */
    letter-spacing: 1.28px;
    margin-bottom: 7px;
}

.details td {
    color: #535353;
    font-size: 16px;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 0.64px;
    border-right: 5px solid rgba(0, 0, 0, 0);
}

.details tr td:nth-last-of-type(1) {
    color: #535353;
    font-size: 16px;
    font-weight: 300;
    line-height: 180%;
    letter-spacing: 0.64px;
    border-right: 0;
}

.btn-contact-us {
    margin-top: 31px;
    width: fit-content;
    padding: 4px 21.16px 5px 21.18px;
    border-radius: 41.667px;
    border: 1.667px solid #08739C;
    background: #FFF;
    box-shadow: 0 3.33px 3.33px rgba(0, 0, 0, 0.25);
}

.btn-contact-us:hover {
    background-color: #08739C;
}

.btn-contact-us:hover img {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(136deg) brightness(109%) contrast(101%);
}

.btn-contact-us:hover p {
    color: #fff;
}

.btn-contact-us img {
    width: 14.5px;
    height: 14.5px;
    flex-shrink: 0;
    margin-top: 3px;
    /* #08739C */
    filter: invert(19%) sepia(99%) saturate(2565%) hue-rotate(180deg) brightness(97%) contrast(94%);
}


.btn-contact-us p {
    margin-left: 2px;
    color: #08739C;
    font-size: 12.5px;
    font-weight: 600;
}

.catalog-book {
    width: 466px;
    height: 332.35px;
    margin-top: 38px;
    background-position: center;
    background-size: cover;
    position: relative;
}
.catalog-book svg {
    width: inherit;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.catalog-book h1 {
    width: 218px;
    position: absolute;
    top: 122px;
    right: 28px;

    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.8px;
}

.catalog-book a {
    width: fit-content;
    position: absolute;
    top: 212px;
    right: 62px;
    border-radius: 34.57px;
    border: 1.383px solid #08739C;
    background-color: #FFF;
    box-shadow: 0 2.77px 2.77px rgba(0, 0, 0, 0.25);
    padding: 4.98px 23.26px 4.74px 17.74px;


    color: #08739C;
    text-align: center;
    font-size: 10.371px;
    font-weight: 600;
}

.catalog-book a:hover {
    background-color: #08739C;
    color: #fff;
}

/* RELATED PRODUCTS */

.related-products {
    margin: 69.85px auto 75px auto;
}

.related-products hr {
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 39px;
}

.related-products h1 {
    width: fit-content;
    margin-bottom: 50px;
    color: #535353;
    font-size: 24px;
    font-weight: 700;
    line-height: 160%; /* 38.4px */
    letter-spacing: 1.2px;
}

.related-product .product-frame {
    width: 250px;
    height: 192px;
    flex-shrink: 0;
    border-radius: 16px;
    position: relative;
}
.related-product .product-frame img {
    object-fit: cover;
    max-width: 250px;
    max-height: 192px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.related-product p {
    margin: 20px auto 0 auto;
    width: 236px;
    color: #535353;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}











@media (max-width: 1200px) {
    * {
        text-size-adjust: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
    }
    
    .wrapper {
        max-width: 960px;
    }
    
    
    
    
    
    /* ========== HOME PAGE ========== */

    /* === HEADER === */

    .home-statistic {
        margin: 0 auto;
        position: absolute;
        top: 544px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .home-statistic-item {
        height: 171px;
    }



    /* === ABOUT === */

    .home-about-imgs {
        background-size: cover;
        width: 404px;
        height: 539px;
    }
    .home-about-imgs img:nth-of-type(1) {
        width: 293px;
        height: 213px;
    }



    /* === STRENGTHS === */

    .strength-item,
    .strength-container {
        width: 300px;
    }
    


    /* === CATEGORY === */

    .home-products-item {
        width: 220px;
        height: 286px;
    }
    .home-products-item > img:nth-of-type(1) {
        width: 208.7px;
        height: 87px;
    }
    .home-products-item > img:nth-of-type(2) {
        width: 55px;
        height: 55px;
    }
    .home-products-item .category-lock {
        top: 16.1px;
        right: 15.6px;
    }
    .home-products-item h3 {
        font-size: 18px;
    }
    .home-products-item p {
        width: 167px;
        font-size: 14px;
    }
    
    .product-tip .section-title > h3 {
        margin-top: 4px;
        font-size: 14px;
    }
    .product-tip .section-title > h1 {
        font-size: 16.5px;
    }
    .product-tip .section-title > h2 {
        margin-top: -11px;
        font-size: 33px;
    }
    .product-tip > p {
        font-size: 14px;
    }
    
    
    
    /* === TESTI === */

    .home-testi .wrapper > img:nth-of-type(3) {
        width: 64.3px;
        top: 85px;
    }

    .home-testi-content {
        margin-left: 433px;
    }
    .testi-container {
        width: 527px;
    }
    .testi-item p {
        width: 477px;
    }


    /* === PARTNERS === */

    .manuf-partners .section-title h3 {
        padding-top: 3px;
    }
    .manuf-partners .section-title h1 {
        font-size: 29px;
    }



















    /* ========== ABOUT PAGE ========== */

    .about-prakata {
        padding-left: 96px;
    }
    .about-prakata .pic-komisaris {
        right: 66px;
    }
    .about-prakata > img:nth-of-type(1) {
        left: 51px;
    }
    .about-prakata > img:nth-of-type(2) {
        right: 474.4px;
    }



















    /* ========== PRODUCTS PAGE ========== */

    .products-list {
        grid-template-columns: repeat(3, 1fr);
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* ========== PRODUCT DETAIL PAGE ========== */

    .related-product .product-frame {
        width: 240px;
        height: 184px;
    }    
    
    .related-product .product-frame img {
        max-width: 220px;
        max-height: 169px;
    }
}











@media (max-width: 576px) {
    .wrapper {
        max-width: 370px;
    }




    /* ======== NAVBAR ========= */

    nav {
        padding: 12px;
    }

    .nav-logo,
    .nav-logo img {
        width: 55.41px;
        height: 36px;
    }

    .nav-hamburger {
        display: block;
    }

    .nav-items {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        
        top: 60px;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        gap: 0;
        transition: 0.6s;
        box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.25);
    }

    nav.home .nav-items {
        top: 96px;
    }

    .nav-right .nav-items > a {
        width: 100%;
        margin: 0;
        padding: 10.5px;
        text-align: center;
        border-top: 1px solid #E2E2E2;
        position: relative;
    }
    .nav-items p {
        width: fit-content;
        margin: 0 auto;
    }

    .nav-right .nav-items > li {
        width: 100%;
        height: 86px;
        position: relative;
        border-top: 1px solid #E2E2E2;
    }

    .nav-right .nav-btn-wa {
        width: fit-content;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .nav-right.open .nav-items {
        opacity: 1;
        visibility: visible;
    }





    /* ============ FOOTER ============== */

    footer {
        padding: 70px 0 22.5px 0;
    }

    .footer-content {
        flex-direction: column;
        gap: 55px;
    }

    .footer-services,
    .footer-categories,
    .footer-contacts {
        margin: 0;
    }

    footer hr {
        width: 100%;
        max-width: 370px;
        margin: 55px auto 20.5px auto;
    }





    /* ========== HOME PAGE ============ */

    /* ------ HEADER ------ */

    .header-home {
        height: 720px;
        background-size: auto 666px;
        padding-top: 94px;
        overflow-x: hidden;
    }

    .header-home h6 {
        font-size: 16px;
        letter-spacing: 0.8px;
    }

    .header-home h1 {
        margin-top: 6px;
        font-size: 32px;
        letter-spacing: 1.92px;
    }

    .header-home .wrapper p {
        width: 100%;
        margin-top: 9px;
        font-size: 14px;
        letter-spacing: 0.7px;
    }

    .bg-nurse {
        width: 100%;
        height: auto;
        right: 0;
        top: 205.98px;
    }

    .img-nurse {
        width: 395.13px;
        height: 350.98px;
        right: 0;
        left: 50%;
        top: 219.73px;
        transform: translateX(-50%);
    }

    /* CHANGES ==> */
    .home-statistic {
        max-width: 370px;
        height: 67px;
        margin-top: 0;
        position: absolute;
        top: 634px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

    .home-statistic-item {
        height: 67px;
    }

    .home-statistic-item:nth-of-type(1) {
        background-color: #fff;
    }
    .home-statistic-item:nth-of-type(2) {
        background-color: #e4e4e4;
    }
    .home-statistic-item:nth-of-type(3) {
        background-color: #08739C;
    }

    .home-statistic-item:nth-of-type(1) img {
        margin-top: 8.72px;
        width: 16.75px;
        height: auto;
        filter: drop-shadow(0 1.27px 0.7px rgba(0, 0, 0, 0.25));
    }
    
    .home-statistic-item:nth-of-type(1) svg {
        margin-top: 8.72px;
        width: 16.75px;
        height: auto;
    }
    .home-statistic-item:nth-of-type(1) h5 {
        margin-top: -0.86px;
        font-size: 12px;
    }
    .home-statistic-item:nth-of-type(1) p {
        margin-top: 0;
        font-size: 10px;
    }

    .home-statistic-item:nth-of-type(2) img {
        margin-top: 10.06px;
        width: 26.877px;
        height: auto;
    }
    .home-statistic-item:nth-of-type(2) svg {
        margin-top: 10.06px;
        width: 26.877px;
        height: auto;
    }
    .home-statistic-item:nth-of-type(2) h5 {
        margin-top: -2.88px;
        font-size: 12px;
    }
    .home-statistic-item:nth-of-type(2) p {
        margin-top: -3px;
        font-size: 10px;
    }

    .home-statistic-item:nth-of-type(3) img {
        margin-top: 10.09px;
        width: 20.94px;
        height: auto;
    }
    .home-statistic-item:nth-of-type(3) svg {
        margin-top: 10.09px;
        width: 20.94px;
        height: auto;
    }
    /* <== CHANGES */
    .home-statistic-item:nth-of-type(3) h5 {
        margin-top: -3.13px;
        font-size: 12px;
    }
    .home-statistic-item:nth-of-type(3) p {
        margin-top: -4px;
        font-size: 10px;
    }



    /* ------ HOME ABOUT ----- */
    .home-about {
        margin-top: 19px;
        margin-bottom: 36.38px;
        flex-direction: column-reverse;
    }

    .home-about-imgs {
        margin-top: 36.58px;
        width: 100%;
        height: 494.19px;
        background-size: cover;
    }

    .home-about-imgs img:nth-of-type(1) {
        width: 284.68px;
        height: 206.96px;
        top: 253.42px;
        object-position: 0 -44px;
    }

    .home-about-imgs img:nth-of-type(2) {
        width: 246.67px;
        height: auto;
        top: 37.17px;
    }

    .home-about-imgs img:nth-of-type(3) {
        width: 91.23px;
        height: auto;
        top: 233.15px;
    }

    .home-about-content .container {
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    .home-about-content span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
    }

    .home-about-content h6 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 24px;
        vertical-align: top;
    }

    .home-about-content h2 {
        width: 100%;
        font-size: 22.279px;
        margin-top: 4.73px;
        text-align: center;
    }

    .home-about-content p {
        width: 100%;
        font-size: 13px;
        letter-spacing: 0.13px;
    }

    .home-about-content li {
        max-width: 100%;
        background-size: 12.54px auto;
        font-size: 13px;
        letter-spacing: 0.52px;
        padding-left: 20.19px;
    }

    .home-about-content a {
        margin: 26px auto 0 auto;
        font-size: 9.774px;
        padding: 3.49px 13.42px 4.12px 13.27px;
        box-shadow: 0 2.327px 2.327px 0 rgba(0, 0, 0, 0.25);
    }





    /* ----- HOME STRENGTH ----- */

    .home-strength {
        padding: 63px 0 70px 0;
    }
    
    .home-strength-content .container {
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    .home-strength-content span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
    }

    .home-strength-content h6 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 24px;
        vertical-align: top;
    }

    .home-strength-content h2 {
        width: 100%;
        font-size: 22.279px;
        margin-top: 4.73px;
        text-align: center;
    }

    .strengths {
        flex-direction: column;
        gap: 30px;
    }

    .strength-item {
        width: 100%;
        height: 184px;
    }

    .strength-container {
        width: 100%;
        height: 184px;
    }

    .strength-container .circle {
        width: 72px;
        height: 72px;
        box-shadow: 0px 3.5px 3.5px 0 rgba(0, 0, 0, 0.25);
    }

    .strength-container .rect {
        width: 100%;
        height: 146px;
        box-shadow: 0px 3.5px 3.5px 0 rgba(0, 0, 0, 0.25);
        top: 38px;
    }

    .strength-item:nth-of-type(1) img {
        width: 43.96px;
        height: 43.96px;
        margin: 14px auto;
    }

    .strength-container+div {
        width: 43.96px;
        height: 43.96px;
        margin: 14px auto 19px auto;
        padding-top: 10px;
    }

    .strength-item:nth-of-type(2) .strength-container + div > img {
        width: 26.36px;
        height: 26.36px;
    }

    .strength-item:nth-of-type(3) .strength-container + div > img {
        width: 24px;
        height: 21.6px;
    }

    .strength-item h3 {
        width: 297px;
        font-size: 16px;
    }

    .strength-item p {
        width: 297px;
        margin-top: 5px;
        font-size: 13px;
    }




    /* ----- HOME PRODUCTS ----- */

    .home-products {
        height: 1184px;
        background-size: 100% 1017px;
        overflow-x: hidden;
    }

    .home-products .bg-spiral:nth-of-type(1) {
        width: 332.01px;
        top: 58px;
        right: -114px;
    }

    .home-products .bg-spiral:nth-of-type(2) {
        width: 268px;
        top: 485px;
        left: -54px;
    }

    .home-products-container .container {
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    .home-products-container .container span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
    }

    .home-products-container h6 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 24px;
        vertical-align: top;
    }

    .home-products-container > h2 {
        font-size: 22px;
        margin: 4.64px auto 48.36px auto;
        text-align: center;
    }

    .home-products-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35.94px 17.92px;
    }

    .home-products-item {
        width: 176.04px;
        height: 228.71px;
        border-radius: 7.3px;
    }

    .home-products-item > img:nth-of-type(1) {
        width: 169.92px;
        height: 70.67px;
        margin-top: 26.53px;
        margin-left: 3.59px;
    }
    .home-products-item > img:nth-of-type(2) {
        width: 48.04px;
        height: 46.6px;
        filter: drop-shadow(0 2.87px 2.87px rgba(0, 0, 0, 0.25));
    }

    .home-products-item .category-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 176.04px;
        height: 8.58px;
        background-color: #08739C;
        border-radius: 0 0 7.3px 7.3px;
    }
    

    .home-products-item .category-lock {
        top: 13.62px;
        right: 17.59px;
        width: 30.11px;
        height: 30.11px;
    }
    .home-products-item .category-lock img {
        margin-top: 5.68px;
        margin-left: 8.18px;
        width: 14.28px;
        height: 17.88px;
    }

    .home-products-item h3 {
        width: 163px;
        font-size: 15px;
        letter-spacing: 0.15px;
        margin: 3.8px auto 0 auto;
    }

    .home-products-item p {
        width: 155px;
        font-size: 12px;
        letter-spacing: 0.12px;
    }

    .home-products-container > a {
        margin-top: 50px;
        font-size: 12.55px;
        padding: 4.48px 17.23px 5.3px 17.03px;
    }

    .home-products .product-tip {
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-top: 53.76px;
        border-radius: 5px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    }

    .product-tip .section-title {
        width: 100%;
        height: 136px;
        border-radius: 5px;
        padding: 29px 0 0 70px;
    }

    .product-tip .section-title span {
        margin-top: 6px;
        width: 7.14px;
        height: 69px;
    }

    .product-tip .section-title h3 {
        font-size: 13px;
        letter-spacing: 0.65px;
    }
    .product-tip .section-title h1 {
        margin-top: 1px;
        font-size: 16px;
        letter-spacing: 1.76px;
    }
    .product-tip .section-title h2 {
        margin-top: -7px;
        font-size: 32px;
        letter-spacing: 1.6px;
    }

    .product-tip > img {
        width: 46.09px;
        height: 45.76px;
        top: 101px;
        left: 259.8px;
        filter: drop-shadow(0 6.54px 6.54px rgba(0, 0, 0, 0.25));
    }

    .product-tip > p {
        width: 258px;
        margin: 29px auto;
        text-align: justify;
        font-size: 12.9px;
        line-height: 23px;
        
        top: unset;
        transform: unset;
    }





    /* ----- HOME TESTIMONIAL ----- */

    .home-testi {
        padding: 51px 0 48.9px 0;
    }

    .home-testi .wrapper > img:nth-of-type(1),
    .home-testi .wrapper > img:nth-of-type(2) {
        display: none;
    }
    .home-testi .wrapper > img:nth-of-type(3) {
        top: 59px;
        right: 0;
        width: 43px;
    }

    .home-testi-content {
        padding-top: 0;
        margin: 0 auto;
    }

    .home-testi-content .container {
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    .home-testi-content .container span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
    }

    .home-testi-content h3 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 24px;
        vertical-align: top;
    }

    .home-testi-content h2 {
        margin-top: 4.64px;
        font-size: 22.34px;
        text-align: center;
    }

    .testi-container {
        margin-top: 27.36px;
        width: 100%;
    }

    .testi-item {
        margin-right: 40px;
    }
    .testi-item > img {
        width: 57px;
        height: 57px;
        margin-top: 3px;
        margin-right: 16px;
    }
    .testi-item h5 {
        font-size: 14px;
        letter-spacing: 0.14px;
    }
    .testi-item h6 {
        height: 38px;
        font-size: 12px;
        letter-spacing: 0.12px;
    }
    .testi-item p {
        width: 370px;
        margin-top: 16px;
        font-size: 13px;
    }

    .testi-stars {
        margin-top: 17px;
    }
    .testi-stars img {
        width: 13.79px;
        height: 13.1px;
        filter: drop-shadow(0 1.38px 2.76px rgba(0, 0, 0, 0.25));
    }
    .testi-stars .partial-star {
        width: calc(var(--partial) * 13.79px);
    }
    .partial-star img {
        filter: none;
    }

    .testi-slider {
        margin-top: 33px;
        gap: 4px;
    }
    .testi-slider .slide {
        width: 15px;
        height: 6px;
    }
    .testi-slider .slide.active {
        width: 30px;
    }




    /* ----- HOME GALLERY ----- */

    .home-gallery {
        height: 656px;
        padding-top: 61px;
    }

    .home-gallery-content .container {
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    .home-gallery-content .container span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
    }

    .home-gallery-content .container h3 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 24px;
        vertical-align: top;
    }

    .home-gallery-content > h2 {
        width: 100%;
        margin-top: 4.64px;
        font-size: 22.34px;
        text-align: center;
    }

    /* CHANGE ==> */
    .home-gallery-content .arrow-prev,
    .home-gallery-content .arrow-next {
        display: none;
    }
    /* <== CHANGE */

    .gallery-container {
        width: 370px;

    }
    .gallery-item.pos1 {
        transform: translateX(-350.35px);
    }
    .gallery-item.pos2 {
        transform: translateX(-252.23px);
        animation: none;
    }
    .gallery-item.pos3 {
        transform: translateX(-166.455px);
    }
    .gallery-item.pos4 {
        transform: translateX(-118.54px);
    }

    /* --- GALLERY DETAIL --- */

    .gallery-detail-container {
        width: 274px;
        height: 438px;
        top: 160px;
        pointer-events: none;
    }

    .gallery-detail .detail-pic {
        display: none;
    }

    .gallery-detail .bg-gallery-detail {
        width: 274px;
        height: 438px;
    }

    .gallery-detail .title {
        top: 69px;
        right: 32px;
        width: 175px;
        height: 36px;
    }

    .gallery-detail .title h2 {
        font-size: 12px;
    }

    .gallery-detail p {
        top: 150px;
        right: 32px;
        width: 152px;
        font-size: 12px;
        letter-spacing: 0.12px;
    }






    /* ----- HOME PARTNERS ----- */

    .home-partners {
        height: 955px;
        background-image: linear-gradient(#e4e4e4, #e4e4e4);
        background-size: 100% 608px;
    }

    .manuf-partners {
        width: 100%;
        height: 617px;
        flex-direction: column;
        border-radius: 5px;
    }
    .manuf-partners .section-title {
        width: 100%;
        height: 136px;
        padding: 30px 47px;
        border-radius: 5px;
    }
    .manuf-partners .section-title .span {
        width: 12px;
        height: 76px;
    }
    .manuf-partners .section-title h1 {
        margin-top: -14px;
    }
    .manuf-partners .manufacturers {
        flex-direction: column;
        margin: 0;
        width: 100%;
        gap: 2px;
    }
    .manufacturers .manufacturer {
        width: 100%;
        height: 159px;
        padding: 25.5px 0;
        border-bottom: 1px solid #fff;
    }
    .manufacturers .manufacturer:nth-of-type(3) {
        border: none;
    }

    .hospital-partners .section-title {
        margin: 61px auto 37.36px auto;
        font-size: 0;
    }
    .hospital-partners .section-title span {
        width: 17.45px;
        height: 3.49px;
        margin-right: 3.49px;
        margin-top: 6.98px;
    }
    .hospital-partners .section-title h3 {
        margin: 0;
        font-size: 11.17px;
        letter-spacing: 1.787px;
        line-height: 17px;
        vertical-align: top;
    }
    .hospital-partners .section-title h2 {
        width: 100%;
        margin-top: 4.64px;
        font-size: 22.34px;
        text-align: center;
    }

    .hospital-scroller {
        max-width: 370px;
    }
    .hospital-scroller .inner-scroller {
        gap: 14.23px;
    }
    .hospital-scroller .scroller-item {
        width: 113.85px;
        height: 56.92px;
    }
    .hospital-scroller .scroller-item img {
        max-width: 110px;
        max-height: 50px;
    }













    /* ====== PRODUCTS PAGE ====== */

    .header-products {
        margin-top: 61px;
        padding-top: 52px;
        height: 197px;
    }
    .header-products h1 {
        font-size: 26.26px;
    }

    .searchbar {
        margin-top: 5.65px;
    }
    .searchbar input {
        width: 130px;
        height: 26.26px;
        font-size: 10.51px;
        padding-left: 15px;
        padding-right: auto;
    }
    .searchbar:focus-within input {
        width: 302.04px;
        padding-right: 65px;
    }
    
    .btn-searchbar-remove {
        width: 26px;
        height: 26px;
        top: 0;
        right: 40px;
    }
    .btn-searchbar-remove .icon-remove {
        width: 10px;
        height: 10px;
        top: 50%;
        left: 50%;
        transform: scale(0) translate(-50%, -50%);
    }
    .searchbar:focus-within .icon-remove {
        transform: scale(1) translate(-50%, -50%);
    }

    .searchbar .btn-search {
        width: 26px;
        height: 26px;
        right: 9px;
    }
    .searchbar .btn-search img {
        width: 12px;
        height: 12px;
    }




    /* ----- PRODUCT LIST ----- */

    .products {
        margin-top: 40px;
        margin-bottom: 51.9px;
    }

    .products select {
        width: 238px;
        font-size: 10.99px;
        padding: 5.7px 13.73px;
        box-shadow: 0 2.06px 4.12px rgba(0, 0, 0, 0.25);

        background-size: 13px 9px;
        background-position: top 10px right 16.69px;
    }

    .products select option {
        font-size: 10.99px;
    }

    .products-list {
        margin-top: 39.53px;
        gap: 18px 8.91px;
        grid-template-columns: repeat(3, 1fr);
    }
    .products-list .product {
        background-size: 117.09px 89.92px;
    }
    .product .product-frame {
        width: 117.09px;
        height: 89.92px;
        border-radius: 6.8px;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
    }
    .product img {
        max-width: 80px;
        max-height: 70px;
    }
    .product p {
        margin-top: 9.08px;
        width: 117.09px;
        height: 45px;
        font-size: 10px;
    }

    .products-pagination {
        margin-top: 38.3px;
    }
    .products-pagination .navigation {
        width: 15px;
        height: 15px;
        stroke-width: 0.96px;
    }
    .products-pagination .navigation.prev img,
    .products-pagination .navigation.next img {
        width: 4px;
        height: 8px;
        top: 3.5px;
        left: 5.5px;
    }

    .products-not-found {
        margin-top: 73.53px;
        margin-bottom: 57.98px;
    }
    .products-not-found img {
        margin-left: 124px;
        width: 142.15px;
        height: 130.44px;
    }
    .products-not-found h2 {
        margin-top: 10.36px;
        font-size: 20px;
    }
    .products-not-found p {
        width: 100%;
        margin-top: 9.22px;
        font-size: 13px;
    }




    /* ----- PRODUCT CATALOG ----- */

    .catalog {
        height: 197px;
        padding-top: 68px;
        margin-bottom: 52px;
    }
    .catalog h1 {
        width: 100%;
        font-size: 15px;
        letter-spacing: 0.75px;
    }
    .catalog a {
        margin-top: 20px;
        padding: 4px 16.21px;
        font-size: 8.065px;
        border: 1.075px solid #08739C;
    }






    /* ====== PRODUCT DETAIL PAGE ====== */

    .detail {
        margin-top: 93.54px;
        flex-direction: column;
    }

    .detail-preview {
        width: 100%;
        padding: 0 13.15px;
        margin-right: 0;
        margin-bottom: 51px;
    }

    .detail-preview .arrow-prev,
    .detail-preview .arrow-next {
        width: 25.32px;
        height: 25.32px;
        top: 131.95px;
    }

    .detail-imgs {
        width: 343.68px;
        height: 290.38px;
    }
    .detail-img {
        min-width: 343.68px;
        width: 343.68px;
        height: 290.38px;
    }

    .detail-thumbnail {
        margin-top: 37.96px;
    }
    .product-thumbnail {
        width: 94.36px;
        height: 72.11px;
        margin-right: 30.69px;
    }
    .product-thumbnail:last-of-type {
        margin-right: 0;
    }


    .details h1 {
        width: 100%;
        font-size: 25.35px;
        letter-spacing: 0.507px;
    }
    .details > p {
        font-size: 11.09px;
        letter-spacing: 0.111px;
    }
    .details > hr {
        margin: 9.34px 0 13.86px 0;
    }
    .details > h5 {
        font-size: 12.677px;
        letter-spacing: 1.014px;
        margin-bottom: 6.15px;
    }
    .details td {
        font-size: 12.677px;
        letter-spacing: 0.507px; 
    }

    .btn-contact-us {
        margin-top: 24.51px;
        padding: 2.87px 20.05px 4.32px 20.21px;
    }
    .btn-contact-us img {
        width: 11.5px;
        height: 11.5px;
        margin-top: 2px;
    }
    .btn-contact-us p {
        margin-left: 1.77px;
        font-size: 9.9px;
    }


    .catalog-book {
        width: 100%;
        height: 255.61px;
    }
    .catalog-book h1 {
        width: 172.72px;
        top: 96.66px;
        right: 22.18px;
        font-size: 12.677px; 
        letter-spacing: 0.634px; 
    }
    .catalog-book a {
        top: 167.96px;
        right: 49.12px;
        padding: 3.95px 16.08px 4.43px 15.55px;
        font-size: 8.22px;
    }




    /* ----- RELATED PRODUCTS ----- */

    .related-products {
        margin: 27.69px auto 51.46px auto;
        overflow-x: hidden;
    }
    .related-products hr {
        display: none;
    }
    .related-products h1 {
        font-size: 20px;
        letter-spacing: 1px;
    }
    .related-products-container {
        gap: 14px;
    }
    .related-product {
        width: calc((100% - 14px) / 2);
    }
    .related-product .product-frame {
        width: 100%;
        height: 136.7px;
    }
    .related-product .product-frame img {
        max-width: 100%;
        max-height: 100%;
    }
    .related-product p {
        margin-top: 14.23px;
        width: calc(100% - 10px);
        font-size: 11px;
    }
    .related-product:nth-of-type(3),
    .related-product:nth-of-type(4) {
        display: none;
    }










    /* ====== ABOUT US PAGE ====== */

    .header-about-us {
        margin-top: 60px;
        height: 197px;
    }
    .header-about-us h1 {
        font-size: 26.26px;
        letter-spacing: 0;
        line-height: 197px;
    }

    .about-desc {
        padding-top: 106px;
        padding-bottom: 80px;
        overflow-x: hidden;
    }
    .about-desc .bg-spiral:nth-of-type(1) {
        width: 259px;
        top: 611px;
        right: -78px;
    }
    .about-desc .bg-spiral:nth-of-type(2) {
        display: none;
    }
    .about-desc .wrapper {
        flex-direction: column;
    }

    .about-company-pics {
        width: 253.29px;
        height: 355.73px;
        margin: 0 auto;
    }
    .about-company-pics .decor {
        width: 296.57px;
        height: 374.13px;
        left: -22.23px;
    }
    .rear-company-pic {
        width: 158.7px;
        height: 299.76px;
    }
    .front-company-pic {
        width: 208.83px;
        height: 335.8px;
        top: 19.93px;
        left: 44.46px;
    }

    .company-desc {
        margin: 56.27px 0 52px 0;
        position: relative;
    }

    .company-desc-top {
        position: absolute;
        top: -460px;
        left: 0;
    }
    .company-desc-vertical-line {
        height: 24.44px;
        width: 4.67px;
        margin-right: 8.33px
    }
    .company-desc-top h6 {
        margin: 0;
        font-size: 16px;
    }

    .company-desc h1 {
        margin-top: 0;
        font-size: 22.28px;
        letter-spacing: 0.446px; 
    }
    .company-desc p {
        max-width: 370px;
        margin-top: 7px;
        font-size: 13px;
        letter-spacing: 0.13px; 
    }

    .about-prakata {
        background-image: url("/assets/image/bg-prakata-mobile.png");
        height: 519px;
        padding: 41px 40px 0 64px;
        margin-top: 0;
    }
    .about-prakata .pic-komisaris {
        width: 167.18px;
        height: 245px;
        right: 17.82px;
    }
    .about-prakata > img:nth-of-type(1),
    .about-prakata > img:nth-of-type(2) {
        width: 26.07px;
        height: 22px;
    }
    .about-prakata > img:nth-of-type(1) {
        top: 35px;
        left: 26px;
    }
    .about-prakata > img:nth-of-type(2) {
        top: 229px;
        right: 26.93px;
    }
    .about-prakata p {
        width: 266px;
        font-size: 13px;
        letter-spacing: 0.13px;
    }
    .about-prakata h6 {
        margin-top: 22px;
        font-size: 14px;
        letter-spacing: 0.7px;
    }






    /* ----- VISION & MISSION ----- */

    .vimi {
        background-position-x: right;
        padding: 40px 29px;
    }
    .vimi-container {
        height: 257px;
    }
    .vimi-card {
        width: 272px;
        height: 145px;
        border-radius: 13.39px;
    }
    .vimi-card img {
        display: none;
    }
    .vimi h1 {
        font-size: 16.246px; 
        letter-spacing: 0.812px;
        transform: none;
    }
    .vimi h1::before {
        transform: none;
        width: 0;
        height: 0;
    }
    .vimi-card:hover h1::before {
        transform: none;
    }
    .vimi p,
    .vimi li {
        font-size: 9px;
        letter-spacing: 0.09px;
    }
    
    .visi {
        padding: 20px 26.58px 0 32px;
    }
    .visi p {
        transform: none;
        margin-top: 1.72px;
    }

    .misi {
        padding: 13px 15px 0 14px;
    }
    .misi li {
        transform: none;
        margin-left: 8px;
    }





    /* ----- COMPANY LICENSES ----- */

    .licenses {
        width: 100%;
        height: 528px;
        background-size: 409.41px 266px;
        background-position: left -43px top 52px;
        padding-top: 64px;
    }
    .licenses h1 {
        font-size: 20px;
    }
    .license-line {
        width: 95px;
        height: 5px;
    }

    .container-licenses {
        margin-top: 39px;
        height: 324px;
        padding: 26px 18px 0 24px;
        flex-direction: column;
        justify-content: initial;
    }

    .license-l {
        margin-bottom: 0px;
    }

    .license-dot {
        width: 13.47px;
        min-width: 13.47px;
        height: 13.47px;
        margin-right: 10px;
        margin-top: 4.5px;
    }

    .license-l p {
        font-size: 13px;
        letter-spacing: 0.26px;
        line-height: 22px;
        margin-bottom: 8px;
    }

    .akta h6 {
        font-size: 13px;
        letter-spacing: 0.26px;
        line-height: 22px;
    }
    .akta p {
        margin-top: 1px;
        font-size: 13px;
        letter-spacing: 0.39px;
    }










    /* ====== CSR PAGE ====== */

    .header-csr {
        height: 197px;
        margin-top: 60px;
        padding-top: 60px;
    }
    .header-csr h1 {
        width: 100%;
        max-width: 370px;
        font-size: 26.26px;
        letter-spacing: normal;
    }




    /* ----- CSR LIST ----- */

    .container-csr-list {
        margin: 68px auto;
    }

    .csr-item {
        width: 100%;
        margin: 0 auto 55px auto;
        display: block;
        position: relative;

        padding-top: 375px;
        padding-bottom: 55px;
        border-bottom: 1px solid #E2E2E2;
        
    }

    .csr-item img {
        width: 285.22px;
        min-width: 285.22px;
        height: 326.11px;

        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);

    }
    .csr-item-img-r {
        margin: 0 0 0 -7px;
        box-shadow: 15px 15px 0 0 #08739C;
    }
    .csr-item-img-l {
        margin: 0 0 0 7px;
        box-shadow: -15px 15px 0 0 #08739C;
    }

    .csr-item-date {
        margin: 0 0 9px 1px;
        font-size: 15px;
    }
    .csr-item-title {
        font-size: 24px;
        letter-spacing: 0.48px; 
    }
    .csr-item-desc {
        margin-top: 9px;
        font-size: 13px;
        letter-spacing: 0.52px; 
    }

    .btn-csr-detail {
        margin-top: 21px;
        border: 1.5px solid #08739C;
        padding: 4px 19px;
    }
    .btn-csr-detail p {
        font-size: 11.82px;
    }




    .container-future-project {
        height: 126px;
        margin-bottom: 55px;
    }

    .container-future-project h1 {
        font-size: 24px;
        letter-spacing: 1.2px;
    }
    .container-future-project p {
        font-size: 10px;
    }










    /* ====== CSR DETAIL PAGE ====== */

    .container-csr-detail {
        margin-top: 91px;
        margin-bottom: 87.98px;
        flex-direction: column;
    }

    .csr-detail-date {
        font-size: 13px;
    }
    .csr-detail-title {
        width: 100%;
        margin-top: 4.9px;
        font-size: 24px;
        letter-spacing: 0.48px;
    }
    .csr-detail img {
        margin-top: 27.6px;
        width: 100%;
        height: auto;
    }
    .csr-detail-desc {
        margin-top: 27.76px;
        font-size: 13px;
        letter-spacing: 0.13px;
    }


    .csr-others p {
        margin-top: 51px;
        margin-bottom: 19px;
    }

    .csr-others-item {
        width: 100%;
        height: 234.53px;
        padding: 17.44px 18.65px 0 18.65px;
        margin-bottom: 19.47px;
    }
    .csr-others-item img {
        max-width: 136.01px;
        max-height: 198.65px;
    }

    .csr-others-item-summary {
        margin-top: 25.06px;
        margin-left: 24.64px;
    }
    .csr-others-item-summary h3 {
        font-size: 16.58px;
    }
    .csr-others-item-summary p {
        margin-top: 6.94px;
        font-size: 12px;
        letter-spacing: 0.12px;
    }

    .btn-csr-others-more {
        margin-top: 17.28px;
    }
}
















@media (max-width: 370px) {
    .wrapper {
        max-width: 320px;    
    }











    /* ===== HOME PAGE ===== */

    /* HOME ABOUT */

    .home-about-imgs {
        height: calc(min(100vw, 320px) * 1.3356);
    }
    .home-about-imgs img:nth-of-type(1) {
        width: calc(min(100vw, 320px) * 0.7694);
        height: calc((min(100vw, 320px) * 0.7694) * 0.727);
        object-position: 0 calc(((min(100vw, 320px) * 1.3356) * 0.22) * -0.3837);
        top: calc((min(100vw, 320px) * 1.3356) * 0.5128);
    }
    .home-about-imgs img:nth-of-type(2) {
        width: calc(min(100vw, 320px) * 0.6667);
        top: calc((min(100vw, 320px) * 1.3356) * 0.1);
    }
    .home-about-imgs img:nth-of-type(3) {
        width: calc(min(100vw, 320px) * 0.2466);
        top: calc((min(100vw, 320px) * 1.3356) * 0.4718);
    }

    /* HOME PRODUCT */

    .home-products {
        height: 1747px;
        background-size: 100% 1540px;
    }

    .home-products .bg-spiral:nth-of-type(2) {
        top: 799px;
    }

    .home-products-content {
        grid-template-columns: repeat(1, 1fr);
    }
    .home-products-item {
        margin: 0 auto;
    }

    .product-tip .section-title {
        padding-left: 50px;
    }


    /* HOME TESTI */

    .home-testi .wrapper > img:nth-of-type(3) {
        top: 60px;
        width: 36px;
    }

    .testi-item h5 {
        font-size: 12px;
        line-height: 130%;
    }
    .testi-item h6 {
        font-size: 11.5px;
    }
    .testi-item p {
        width: calc(min(100vw, 320px));
    }


    /* HOME GALLERY */

    .gallery-container {
        left: 50%;
        transform: translateX(-50%) scale(0.8649);
    }


    /* HOME PARTNERS */

    .manuf-partners .section-title h3 {
        padding-top: 6px;
        font-size: 14px;
    }
    .manuf-partners .section-title h1 {
        font-size: 28px;
    }
    .manuf-partners .section-title h2 {
        font-size: 17px;
    }










    /*  ===== PRODUCT PAGE ===== */

    .products-list {
        width: fit-content;
        margin: 30px auto 0 auto;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 32px;
    }

    .products-not-found img {
        margin-left: 105px;
    }

    .catalog h1 {
        font-size: 14px;
    }









    /* ===== PRODUCT DETAIL PAGE */

    .detail-imgs {
        width: calc(min(100vw, 320px) * 0.929);
        height: calc(min(100vw, 320px) * 0.785);
    }
    .detail-img {
        width: inherit;
        height: inherit;
        min-width: calc(min(100vw, 320px) * 0.929);
    }

    .catalog-book h1 {
        right: 2px;
        font-size: 12px;
    }
    .catalog-book a {
        right: 26.6px;
    }










    /* ===== ABOUT PAGE ===== */

    .about-prakata {
        height: calc(min(100vw, 320px) * 1.4027);
        padding: 41px 15px 0 44px;
    }
    .about-prakata > img:nth-of-type(1) {
        left: 9px;
    }
    .about-prakata > img:nth-of-type(2) {
        top: 236px;
        right: 9px;
    }
    .about-prakata .pic-komisaris {
        width: 128.2px;
        height: auto;
        right: 6.82px;
    }
    .about-prakata p {
        text-align: justify;
    }

    .vimi {
        padding: 30px 14px;
    }
    .vimi-container {
        height: 266px;
    }
    .vimi-card {
        width: 255px;
    }
    .vimi-card.misi {
        padding: 13px 15px 0 20px;
    }









    /* ===== CSR PAGE ===== */

    .future-project-content p {
        width: 200px;
        margin: auto;
    }

    .csr-others-item-summary {
        margin-left: 18px;
        margin-top: 12px;
    }
}