@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

@import url('./onv/onv-shadow.css');
@import url('./onv/onv.animasi.css');
@import url('./onv/onv-containers.css');
@import url('./onv/onv-root.css');
@import url('./onv/onv-badge.css');
@import url('./onv/loading-skeleton.css');

.f-montserrat {
    font-family: 'Montserrat';
}

a {
    text-decoration: none;
}

p {
    margin: 0;
}

h1 {
    font-size: 18px;
    margin: 0;
    padding: 0;

}

h2 {
    font-size: 14px;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins';
    /* background-color: #eceffb; */
    background-color: #f8f8f8;
    font-size: 14px;
    overflow-x: hidden;
}


/* start button */
.btn-viva {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ec631d;
    --bs-btn-border-color: #ec631d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d74d07;
    --bs-btn-hover-border-color: #ec6a2a;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ec6a2a;
    --bs-btn-active-border-color: #ec631d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ec631d;
    --bs-btn-disabled-border-color: #ec631d;
}

.btn-whatshapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: #008069;
    --bs-btn-border-color: #008069;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #098f3b;
    --bs-btn-hover-border-color: #098f3b;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #098f3b;
    --bs-btn-active-border-color: #008069;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #008069;
    --bs-btn-disabled-border-color: #008069;
}

.btn-outline-viva {
    margin-right: 5px;
    --bs-btn-color: #ec631d;
    --bs-btn-bg: #f7f7f7;
    --bs-btn-border-color: #ec631d;
    --bs-btn-hover-color: #ec631d;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ec6a2a;
    --bs-btn-active-border-color: #ec631d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ec631d;
    --bs-btn-disabled-border-color: #ec631d;
}

.btn-outline-whatshapp {
    margin-right: 5px;
    --bs-btn-color: #008069;
    --bs-btn-bg: #f7f7f7;
    --bs-btn-border-color: #008069;
    --bs-btn-hover-color: #008069;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ec6a2a;
    --bs-btn-active-border-color: #008069;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #008069;
    --bs-btn-disabled-border-color: #008069;
}


/* utilities */
.width-100 {
    width: 100%;
}

.width-75 {
    width: 75%;
}

.width-50 {
    width: 50%;
}

.onv-mr-1 {
    margin-right: 2px;
}

.onv-mr-2 {
    margin-right: 5px;
}

.onv-mr-3 {
    margin-right: 8px;
}

.onv-mr-4 {
    margin-right: 10px;
}

.onv-mr-5 {
    margin-right: 20px;
}

.onv-ml-1 {
    margin-left: 2px;
}

.onv-ml-2 {
    margin-left: 5px;
}

.onv-ml-3 {
    margin-left: 8px;
}

.onv-ml-4 {
    margin-left: 10px;
}

.onv-ml-5 {
    margin-left: 20px;
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* START TITEL */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

.text-title {
    font-family: 'Montserrat';
    color: #ec631d;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.text-title-sub {
    margin: 0;
    font-size: 14px;
}

/* RESPONSIVE */
@media only screen and (max-width: 480px) {
    .text-title {
        font-size: 16px;
    }

    .text-title-sub {
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .text-title {
        font-size: 16px;
    }

    .text-title-sub {
        font-size: 12px;
    }
}

/* CSS untuk layar dengan lebar minimum 1025px (desktop) */
@media only screen and (max-width: 991px) {
    /* CODE */
}

/* CSS untuk layar dengan lebar minimum 1025px (desktop) */
@media only screen and (min-width: 1025px) {
    /* code */
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* END TITEL */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* # START CARD PACKAGE */
/* --------------------------------------------------------------------------------------------------------------------------------------- */
.onv-grid-package {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

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

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

/* CSS untuk layar dengan lebar maksimum 480px (ponsel) */
@media only screen and (max-width: 480px) {
    .onv-grid-package {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .onv-grid-package {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CSS untuk layar dengan lebar minimum 768px dan maksimum 1024px (tablet) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .onv-grid-package {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    /* code */
}

/* CSS untuk layar dengan lebar minimum 1024px (desktop) */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    /* code */
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* # END CARD PACKAGE */
/* --------------------------------------------------------------------------------------------------------------------------------------- */

#qontak-webchat-widget {
    bottom: 30px !important;
    right: -10px !important;
}