p,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
}

.demo>.slick-dots {
    bottom: 40px;
}

.demo>.slick-dots li.slick-active button::before {
    color: #FFD43C;
}

.demo>.slick-dots li button::before {
    color: #ffffff;
}

.demo>.slick-prev {
    left: 31px;
    width: 60px;
    height: 60px;
}

.demo>.slick-next {
    right: 62px;
    width: 60px;
    height: 60px;
}

.demo>.slick-prev::before,
.demo>.slick-next::before {
    font-size: 31px;
    background: #ffffff;
    padding: 8px;
    border-radius: 100%;
    line-height: 0;
}

.catatanSobat.slick-dotted.slick-slider,
.demo.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.demo>.slick-list {
    margin-top: 64px;
}

.pt-212 {
    padding-top: 184px;
}

.pb-188 {
    padding-bottom: 188px;
}

.bg-head {
    background: linear-gradient(322.99deg, rgba(5, 176, 130, 0.2) 1.58%, rgba(111, 208, 167, 0) 38.28%), linear-gradient(64.79deg, #16B588 10.86%, #34BE92 46.17%, #B7E3BE 107.81%, #FFFCEA 116.24%, #FFFFFF 158.67%), #FFFFFF;
}

.bg-footer {
    background: linear-gradient(76.57deg, #0A6B54 6.76%, #208E6F 50.89%, #00AF81 107.63%);
}

.copyright-text {
    border-top: 2px solid #ffffff;
}

.footer-social-icon>a>i {
    border: none;
    font-size: 24px !important;
}

.footer-social-icon>a>img {
    border: none;
}

.footer-social-icon>a>i:hover {
    background: transparent;
    color: #fff;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    background: #FBFDFF;
}

.marquee img {
    display: inline-block;
    height: calc(50%/3);
    width: calc(30%/3);
    animation: marquee 20s linear infinite;
    padding-top: 10px;
    padding-bottom: 10px;
}

.grid-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.grid-lip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}

.grid-custom>.card,
.card-article {
    background: #FFFFFF;
    box-shadow: 0px 4px 16px rgba(112, 144, 176, 0.15);
    border-radius: 16px;
    border: none;
}

.grid-custom>.card>.card-footer {
    border-top: none;
    background: #ffffff;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
}

.grid-custom>.card>.card-header {
    border-bottom: none;
    background: #ffffff;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
}

.grid-custom>.card>.card-body {
    padding: 24px;
    padding-top: 0px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-13 {
    margin-top: 13px;
}

.py-75 {
    padding-top: 75px;
    padding-bottom: 75px;
}

.shadow-cs {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
}

.hidden {
    display: none;
}

.bg-grey {
    background: linear-gradient(99.69deg, #FEFEFE 0.69%, #EFEFEF 105.62%, #E7E7E7 209.62%);
}

.h-testimoni {
    height: 35rem !important;
}

.catatanSobat>.slick-dots {
    bottom: 24px;
    width: auto;
    margin-left: 24px;
}

.catatanSobat>.slick-prev {
    left: -20px;
}

.catatanSobat>.slick-next {
    right: -10px;
}

.bottom-24 {
    bottom: 24px;
}

.end-24 {
    right: 24px;
}

.bg-green-pill {
    width: max-content;
    background: rgba(205, 240, 234, 0.8);
    border-radius: 24px;
    padding: 8px;
}

.nav-pills .nav-link {
    background: transparent;
    border: none;
    font-size: 14px;
    color: #606060;
    font-weight: 600;
    border-radius: 0px;
    padding: 20px;
}

.nav-pills .nav-link.active {
    background: linear-gradient(90deg, #00AF81 0%, #42CDA1 100%);
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    padding: 20px;
}

.nav-pills .nav-link:hover {
    background: linear-gradient(90deg, #00AF81 0%, #42CDA1 100%);
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    padding: 20px;
}

.border-left-50 {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.border-right-50 {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.menu-apps {
    background: linear-gradient(90deg, #FDFBFB 0%, #EBEDEE 100%);
    border-radius: 100px;
}

.h-60 {
    height: 80px;
}

.tab-content>.tab-pane {
    position: absolute;
    left: 0;
    opacity: 0;
    animation: slide 0.3s ease-out forwards;
}

.tab-content>.active {
    position: relative;
    opacity: 1;
}

.features-list {
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(216, 255, 218, 1) 100%);
    width: max-content;
}

.border-24 {
    border-radius: 24px;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, #00AF81 0%, #42CDA1 100%) !important;
    border: 0 !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) !important;
    color: #ffffff !important;
}

.accordion-button {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: black !important;
}

.accordion-button:not(.collapsed)::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    margin-top: 3px;
    margin-right: -5px;
    background-image: none;
}

.accordion-button.collapsed::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    margin-top: 3px;
    margin-right: -10px;
    background-image: none;
}

.accordion-button::after {
    background-image: none;
}

.accordion-button:hover,
.accordion-button:focus {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn-hotspot {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    border: none;
    padding: 8px 24px;
}

.hotspot-content {
    box-shadow: -4px 4px 32px 2px rgba(112, 144, 176, 0.35);
    border-radius: 16px;
    margin-top: -45px !important;
    padding: 32px;
    min-width: 18rem;
}

.hotspot-1 {
    top: 60%;
    left: 5.5%;
}

.hotspot-2 {
    top: 55%;
    left: 30%;
}

.hotspot-3 {
    top: 48%;
    right: 38%;
}

.hotspot-4 {
    top: 65%;
    right: 28%;
}

.hotspot-5 {
    top: 26%;
    right: 7%;
}

.owl-carousel {
    display: block;
}

.bg-header-0 {
    background: transparent url('../../design_v2/images/home_v2/heroslide2pameranfull_homenew.webp') no-repeat center;
    background-size: cover;
}

.bg-header-1 {
    background: transparent url('../../design_v2/images/home_v2/heroslide1_homenew.webp') no-repeat center;
    background-size: cover;
}

.bg-header-2 {
    background: transparent url('../../design_v2/images/home_v2/heroslide2_homenew.webp') no-repeat center;
    background-size: cover;
}

.bg-header-3 {
    background: transparent url('../../design_v2/images/home_v2/hardwareslide3_homenew.webp') no-repeat center;
    background-size: cover;
}

.bg-header-4 {
    /* background: transparent url('../../design_v2/images/home_v2/heroslidenowdays2025_homenew.webp') no-repeat center; */
    background-size: cover;
}

.bg-campaign {
    background: transparent url('../../design_v2/images/home_v2/heroslidenowdays2025_homenew.webp') no-repeat center;
    background-size: cover;
}

.fade-up {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease-in-out, transform 0.7s ease-in-out;
}

.fade-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.button-white-green:hover {
    background: #ffffff !important;
}

.owl-carousel .owl-item img {
    width: 100%;
}

.shadow-cs-2 {
    box-shadow: 0px 4px 24px 1px rgba(112, 144, 176, 0.15);
}

.button-white-green:hover {
    background: #FBAE17 !important;
    color: black !important;
}

.padding-top-2 {
    padding-top: 2rem;
}

.c-head {
    min-height: 95vh;
}

.c-head-2 {
    min-height: 75vh;
}

.slick-dots li button::before {
    font-size: 12px !important;
}

.lazyloaded {
    height: auto;
}

.h-44 {
    height: 44px;
}

@keyframes fade-up-animation {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-500%);
    }
}

@media screen and (min-width: 768px) and (max-width: 996px) {
    .c-head {
        min-height: 75vh;
    }
}

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

    .demo>.slick-prev::before,
    .demo>.slick-next::before {
        line-height: 16;
    }

    .btn-w-head,
    .btn-w-head:hover,
    .btn-w-head:focus {
        width: 45%;
    }

    .font-48-eb {
        font-size: 32px;
    }

    .font-16-sb {
        font-size: 14px;
        font-weight: 500;
    }

    .font-18-b {
        font-size: 14px;
    }

    .font-32-b {
        font-size: 24px;
    }

    .grid-custom,
    .grid-lip {
        grid-template-columns: repeat(2, 1fr);
    }

    .flex-d-column {
        flex-direction: column;
    }

    .margin-bottom-mobile {
        margin-bottom: 20px;
    }

    .font-24-b,
    .font-20-m {
        font-size: 16px;
    }

    .line-break::before {
        content: "\a";
        white-space: pre;
    }

    .hotspot-content {
        padding: 20px;
    }

    .h-48 {
        line-height: 2.4;
    }
}

@media screen and (min-width: 1280px) {
    .flex-items-center-v {
        align-items: center;
    }
}

@media screen and (min-width: 1500px) {
    .c-head {
        max-width: 100%;
        padding-right: var(--bs-gutter-x, 2.75rem);
        padding-left: var(--bs-gutter-x, 8.75rem);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .pt-212 {
        padding-top: 10%;
    }

    .navbar>.container {
        margin-left: 4rem;
    }
}

@media screen and (min-width: 1301px) and (max-width: 1366px) {
    .pt-212 {
        padding-top: 12%;
    }
}

@media screen and (min-width: 767px) and (max-width: 1366px) {
    .c-head {
        max-width: 100%;
        padding-right: var(--bs-gutter-x, 2.75rem);
        padding-left: var(--bs-gutter-x, 2.75rem);
    }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {
    .footer-social-icon {
        text-align: center;
        margin-bottom: 20px;
    }

    .padd-tabs {
        padding-right: 6rem;
        padding-left: 6rem;
    }

    .h-testimoni {
        height: 30rem !important;
    }

    .bg-header-0 {
        background: transparent url('../../design_v2/images/home_v2/slide1mobilepameran_tablet.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-1 {
        background: transparent url('../../design_v2/images/home_v2/slide1mobile_tablet.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-2 {
        background: transparent url('../../design_v2/images/home_v2/slide3mobile_tablet.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-3 {
        background: transparent url('../../design_v2/images/home_v2/slide2mobile_tablet.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-4 {
        background: transparent url('../../design_v2/images/home_v2/slide1tabletnowdays_tablet.webp') no-repeat center;
        background-size: cover;
    }

    .bg-campaign {
        background: none;
        background-size: cover;
    }

    .hotspot-1 {
        left: 3%;
    }

    .hotspot-2 {
        top: 10%;
        left: 25%;
    }

    .hotspot-3 {
        top: 53%;
        right: 30%;
    }

    .hotspot-4 {
        top: 73%;
        right: 25%;
    }

    .hotspot-5 {
        top: 20%;
        right: 2%;
    }

    .font-m-bold {
        font-weight: 700;
    }

    .pb-0-m {
        padding-bottom: 0;
    }
    .marquee img {
        height: calc(100%/3);
        width: calc(50%/3);
    }
}

@media screen and (max-width: 767px) {
    .marquee img {
        height: calc(100%/3);
        width: calc(100%/3);
    }
    .font-1 {
        font-size: 1rem;
    }

    .font-1-5 {
        font-size: 1.5rem;
    }

    .bg-size-1800 {
        background-size: 1800px !important;
    }

    .btn-w-head,
    .btn-w-head:hover,
    .btn-w-head:focus {
        width: 100%;
    }

    .mobile-margin-top {
        margin-top: 24px;
    }

    .pt-212 {
        padding-top: 64px;
    }

    .pt-222 {
        padding-top: 45vh;
    }

    .pb-188 {
        padding-bottom: 200px;
    }

    .grid-custom {
        grid-template-columns: repeat(1, 1fr);
    }

    .margin-top-phone {
        margin-top: 20px;
    }

    .h-testimoni {
        height: 27rem !important;
    }

    .hotspot-1 {
        left: 25%;
    }

    .hotspot-2 {
        left: 20%;
    }

    .hotspot-3 {
        top: 50%;
    }

    .hotspot-4 {
        top: 68%;
    }

    .hotspot-5 {
        right: 20%;
    }

    .hotspot-content {
        padding: 16px;
    }

    .bg-header-0 {
        background: transparent url('../../design_v2/images/home_v2/slide1mobilepameran_homenew.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-1 {
        background: transparent url('../../design_v2/images/home_v2/slide1mobile_homenew.png') no-repeat center;
        background-size: cover;
    }

    .bg-header-2 {
        background: transparent url('../../design_v2/images/home_v2/slide2mobile_homenew.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-3 {
        background: transparent url('../../design_v2/images/home_v2/slide3mobile_homenew.webp') no-repeat center;
        background-size: cover;
    }

    .bg-header-4 {
        background: transparent url('../../design_v2/images/home_v2/slide1mobilenowdays2025_homenew.webp') no-repeat center;
        background-size: cover;
    }

    .bg-campaign {
        background: none;
        background-size: cover;
    }

    .hotspot-content {
        min-width: 16rem;
    }

    .demo>.slick-next {
        right: 30px;
        top: 88%;
        width: auto;
        height: auto;
    }

    .demo>.slick-prev {
        left: 30px;
        top: 88%;
        width: auto;
        height: auto;
    }

    .font-20-r {
        font-size: 1rem;
        font-weight: 500;
    }

    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
        background: #00AF81;
    }

    .font-m-bold {
        font-weight: 700;
    }

    .pb-0-m {
        padding-bottom: 0;
    }

    .title-campaign {
        font-size: 24px;
        line-height: 1.2;
    }

    .my-campaign {
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
    }

    .mb-campaign {
        margin-bottom: 10px !important;
    }

    .justify-center-campaign {
        justify-content: center;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .demo>.slick-prev {
        left: 20px;
    }

    .demo>.slick-next {
        right: 40px;
    }

    .c-head {
        padding-left: var(--bs-gutter-x, 5.75rem);
    }

    .h-testimoni {
        height: 35rem !important;
    }
}

@media (min-width: 1400px) and (max-width: 1500px) {
    .ml-1440 {
        margin-left: 6rem;
    }
}