#header {
    min-height: 700px !important;
}
/* .btn-hosting-cpanel {
    scroll-behavior: smooth;
} */

.section-header-hosting-cpanel {
    position: absolute;
    top: 200px;
    right: 0;
    left: 0;
}
.title-header-hosting-cpanel {
    color: #ffff;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
}
.p-header-hosting-cpanel {
    color: #ffff !important;
    font-size: 18px;
    margin-bottom: 20px;
}
.screen-header-sm {
    display: none;
}
.btn-hosting-cpanel {
    color: #ffff;
    border: 2px solid #ff7034;
    padding: 7px 15px;
    border-radius: 36px;
    font-size: 14px;
    background: linear-gradient(45deg, #ff1d1d, #ff7034);
    text-decoration: none;
}
.btn-hosting-cpanel:hover {
    background: #ffff;
    color: #ff7034;
    border: 2px solid #ff7034;
}
.img-cpanel {
    width: 100%;
    position: relative;
    animation: mymove 3s infinite;
    animation-direction: alternate;
}
@keyframes mymove {
    0% {
        top: 20px;
        top: 0px;
    }
    100% {
        top: 0px;
        top: 20px;
    }
}
.section-icon {
    padding: 30px;
    background-color: #f7f7f9;
}
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}
.img-icon-cpanels {
    margin: 30px;
}
.section-kulik {
    padding: 30px;
    background-color: #f7f7f9;
}
.title-kulik {
    color: #041e8e;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
}
.p-kulik {
    font-size: 17px;
    color: #8a8a8a !important;
    text-align: justify;
}
.img-kulik {
    width: 100%;
}
.section-pilih-hosting {
    padding: 30px;
}
.title-header-pilih-hosting {
    color: #041e8e;
    font-size: 30px;
    font-weight: 600;
}
.p-header-pilih-hosting {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 40px;
}
#btn-change {
    background-color: #e7e7e7;
    padding: 3px 6px;
    width: 375px;
    height: 40px;
    /* border: 2px solid; */
    border-radius: 15px;
    margin-bottom: 40px;
}
.btn-bulanan {
    background: #ffff;
    color: #041e8e;
    padding-right: 30px;
    border-radius: 15px;
    border: unset;
    padding: 5px 19px;
    cursor: pointer;
    margin-bottom: 10px;
}
.btn-tahunan {
    background: #ffff;
    color: #041e8e;
    border-radius: 15px;
    border: unset;
    padding: 5px 19px;
    cursor: pointer;
    margin-bottom: 10px;
}
.btn-3bulanan {
    background: #ffff;
    color: #041e8e;
    border-radius: 15px;
    border: unset;
    padding: 5px 19px;
    cursor: pointer;
    margin-bottom: 10px;
}
.btn-bulanan:hover {
    background: linear-gradient(45deg, #041e8ea3, #148b00c9);
    color: #ffff;
}
.btn-3bulanan:hover {
    background: linear-gradient(45deg, #041e8ea3, #148b00c9);
    color: #ffff;
}
.btn-tahunan:hover {
    background: linear-gradient(45deg, #041e8ea3, #148b00c9);
    color: #ffff;
}
.btn-bulanan:focus {
    outline: unset;
}
.btn-3bulanan:focus {
    outline: unset;
}
.btn-tahunan:focus {
    outline: unset;
}

.btn-table {
    background: linear-gradient(45deg, #000c90, #0057ff);
    color: #ffff;
    border-radius: 15px;
    border: 2px solid #ffff;
}
.btn-table:hover {
    border: 2px solid #041e8e;
    background: #ffff;
    color: #041e8e;
    border-radius: 15px;
}
table.table.table-hover.table-bordered.table-daftar {
    font-weight: 500;
    font-size: 15px;
}
table thead th.th-indo {
    vertical-align: bottom;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
}
.number-table {
    padding-right: 0px;
    padding-left: 74px;
    width: 130px;
    border-radius: 34px;
    font-size: 18px;
    font-weight: 500;
    color: rgb(33 37 41);
    margin-left: -98px;
}
.number-table:hover {
    color: #ffff;
    background: linear-gradient(45deg, #000c90, #0057ff);
}

.detail-table {
    background-color: rgb(63 81 181);
    padding: 2px 20px;
    color: #ffff;
    border-radius: 40px;
}
.detail-table:hover {
    background-color: rgb(83 97 176);
    color: rgb(185, 185, 185);
}
.table-color {
    background: linear-gradient(45deg, #000c90, #0057ff);
}
.tbody-color {
    background-color: #fff;
}
.termurah {
    background: #00bfa6;
}
.as-termurah {
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px 2px 2px 4px;
    color: #fff;
    display: inline-block;
    height: 32px;
    position: relative;
    padding: 8px 20px 8px 10px;
}
.as-termurah:after {
    border-left: 15px solid #00bfa6;
}
.termurah:after {
    border-bottom: 16px solid transparent;
    border-top: 16px solid transparent;
    content: "";
    margin-right: -14px;
    margin-top: -8px;
    position: absolute;
    right: 0;
}
.as-discon {
    color: #29384e;
    font-size: clamp(0.875rem, 5vw, 0.875rem);
    font-weight: 700;
    opacity: 0.8;
    padding-left: 1.5rem;
    padding-top: 0.5rem;
    text-decoration: line-through;
}
.as-table-termurah {
    color: #29384e;
    font-size: 15px;
    font-weight: 700;
    opacity: 0.8;
    padding-left: 1.5rem;
    padding-top: 0.5rem;
}
.as-table-discon {
    color: #29384e;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.8;
    text-decoration: line-through;
}
.td-table-murah {
    color: #29384e;
    font-size: 16px;
    font-weight: 700;
    opacity: 0.8;
    vertical-align: middle;
}
.table td,
.table th {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: unset;
}
.table-bordered td,
.table-bordered th {
    border: none;
}
.btn-lihat {
    padding: 5;
}
.btn-lihat:hover {
    background-color: #ebeaea;
}
.btn-tutup {
    padding: 5;
}
.btn-tutup:hover {
    background-color: #ebeaea;
}
i.fas.fa-caret-down {
    color: #5c73ce;
    font-size: 20px;
}
i.fas.fa-caret-up {
    color: #5c73ce;
    font-size: 20px;
}
.ul-content-pilih {
    padding: 0;
    text-align: left;
}
.li-content-pilih {
    display: block;
}
.img-icon-paket {
    height: 20px;
    float: none;
}
.title-pilih-hosting {
    color: #636363;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
    text-decoration: underline;
}
.position-img-fitur {
    text-align: center;
    margin-bottom: 10px;
}
.img-fitur {
    width: 400px;
}
thead.table-color-fitur {
    background-color: #ececec;
}
td.td-fitur {
    font-size: 15px;
    border: 1px solid #dedede;
    padding: 5px;
}
td.td-fitur-s {
    font-size: 15px;
    border: 1px solid #dedede;
    padding: 5px;
    text-align: left;
}
td.td-fitur-x {
    font-size: 15px;
    border: 1px solid #dedede;
    padding: 5px;
    text-decoration: line-through;
    text-align: left;
}
td.td-fitur-xs {
    font-size: 15px;
    border: 1px solid #dedede;
    padding: 5px;
    text-decoration: line-through;
}
.content-pilih {
    font-size: 13px;
    color: #8a8a8a !important;
}
.content-pilih-x {
    font-size: 13px;
    color: #8a8a8a !important;
    text-decoration: line-through;
}
td.td-table-murah {
    border-bottom: unset;
    border-top: unset;
}
.card-pilih-hosting {
    background-color: #ffff;
    padding: 10px;
    box-shadow: -2px 0 14px 4px rgb(0 0 0 / 13%);
}
span.span-segitiga {
    background-color: #ffff;
    padding: 15px;
    content: " ";
    width: 80px;
    transform: rotate(316deg);
    position: absolute;
    right: 153px;
}
.card-header-pilih-hosting {
    border-bottom: 1px solid #e9ecef;
}
.modal-title-pilih-hosting {
    font-size: 25px;
    padding-top: 7px;
    font-weight: 600;
    height: 45px;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(45deg, #00ff1f, #0037ff);
}
.modal-title-pilih-hosting-terpopuler {
    font-size: 25px;
    padding-top: 7px;
    font-weight: 600;
    height: 45px;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(45deg, #ff0000, #6aff00);
}
.btn-pilih-hosting-close {
    color: #ffff;
    border: 2px solid #ff4545;
    padding: 7px 15px;
    border-radius: 36px;
    font-size: 14px;
    background-color: #ff4545;
    text-decoration: none;
}
.btn-pilih-hosting-close:hover {
    background-color: #ffff;
    color: #ff4545;
    border: 2px solid #ff4545;
}
#mikro {
    background-color: #c1c1c159;
}
#kecil {
    background-color: #c1c1c159;
}
#sedang {
    background-color: #c1c1c159;
}
#besar {
    background-color: #c1c1c159;
}
#super {
    background-color: #c1c1c159;
}
#mega {
    background-color: #c1c1c159;
}
#power {
    background-color: #c1c1c159;
}
.section-kenapa {
    padding: 30px;
    background-color: #f7f7f9;
}
.title-header-kenapa {
    color: #041e8e;
    font-size: 30px;
    font-weight: 600;
}
.p-header-kenapa {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 40px;
}
.card-kenapa {
    border-radius: 10px 10px 0px 0px;
    min-height: 250px;
    margin-bottom: 10px;
    box-shadow: -2px 0 14px 4px rgb(0 0 0 / 13%);
    padding: 35px 10px 10px 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    background-color: #ffff;
}
.card-kenapa:hover {
    transform: scale(1.07);
}
.jarak-kenapa {
    padding: 0;
}
.bg-bulet {
    position: absolute;
    top: -82px;
    right: -30px;
    background-color: #e3e5ff21;
    width: 200px;
    height: 200px;
    padding: 16px 18px;
    border-radius: 25px;
    transform: rotate(9deg);
    text-align: center;
    font-size: 130px;
    color: #b4efac3b;
}
.title-kenapa {
    color: #041e8e;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
}
.p-kenapa {
    font-size: 17px;
    color: #8a8a8a !important;
    text-align: justify;
}
.section-menarik {
    padding: 30px;
}
.screen-lg-menarik {
    display: none;
}
.screen-md-and-sm {
    display: none;
}
.title-header-menarik {
    color: #041e8e;
    font-size: 30px;
    font-weight: 600;
}
.p-header-menarik {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 40px;
}
.card-menarik {
    border-radius: 10px 10px 0px 0px;
    padding: 15px 15px 15px 15px;
    min-height: 330px;
    margin-bottom: 20px;
    box-shadow: -2px 0 14px 4px rgb(0 0 0 / 13%);
    transition: all 0.3s ease-in-out;
    background-color: #ffff;
}
.card-menarik:hover {
    transform: scale(1.05);
}
.title-menarik {
    color: #041e8e;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
.p-menarik {
    font-size: 17px;
    color: #8a8a8a !important;
    text-align: justify;
}
.position-icon-menarik {
    text-align: center;
    margin-bottom: 10px;
}
.img-icon-menarik {
    width: 100px;
}
.img-menarik {
    width: 100%;
    max-height: 670px;
}
.icon-menarik {
    text-align: center;
}
.icon-1 {
    font-size: 120px;
    color: #7ac354;
}
.icon-2 {
    font-size: 120px;
    color: #48b3ce;
}
.icon-3 {
    font-size: 120px;
    color: #d2ee33;
}
.icon-4 {
    font-size: 120px;
    color: #ee3333;
}
.section-garansi {
    padding: 30px;
    background-color: #f7f7f9;
}
.text-garansi {
    padding-top: 65px;
}
.title-header-garansi {
    color: #041e8e;
    font-size: 30px;
    font-weight: 600;
}
.p-header-garansi {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 40px;
}
.btn-garansi {
    color: #ffff;
    border: 2px solid #ff7034;
    padding: 7px 15px;
    border-radius: 36px;
    font-size: 14px;
    background: linear-gradient(45deg, #ff1d1d, #ff7034);
    text-decoration: none;
}
.btn-garansi:hover {
    background: #ffff;
    color: #ff7034;
    border: 2px solid #ff7034;
}
.position-img-garansi {
    text-align: center;
    margin-top: 20px;
}
.img-garansi {
    width: 80%;
}
.section-tanya {
    padding: 30px;
}
.title-header-tanya {
    font-size: 25px;
    font-weight: 600;
    color: #041e8e;
}
.p-header-tanya {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 40px;
}
.according-tanya {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: -2px 0 14px 4px rgb(25 25 35 / 20%);
}
.card-tanya {
    border: unset;
    background-color: #ffff;
    transition: all 0.3s ease-in-out;
}

.card-header-tanya {
    background: linear-gradient(45deg, #1338ff, #0f3b89);
    text-align: left;
    border-bottom: 2px solid rgba(231, 231, 231, 0.15);
}
.title-tanya {
    color: #fff;
    white-space: initial;
}
.title-tanya:hover {
    color: rgb(223, 221, 221);
}
.p-tanya {
    font-size: 15px;
    color: #8a8a8a !important;
    margin-bottom: 20px;
}
.list-tanya {
    display: block;
}
.section-motivasi {
    padding: 30px;
    background: linear-gradient(45deg, #0f3b89, #1338ff);
}
.title-header-motivasi {
    color: #ffff;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 20px;
}
.p-header-motivasi {
    font-size: 15px;
    color: #ffff !important;
    margin-bottom: 40px;
}
.position-btn-motivasi {
    text-align: left;
}
.btn-motivasi {
    color: #ffff;
    border: 2px solid #ff7034;
    padding: 7px 15px;
    border-radius: 36px;
    font-size: 14px;
    background: linear-gradient(45deg, #ff1d1d, #ff7034);
    text-decoration: none;
}
.btn-motivasi:hover {
    background: #ffff;
    color: #ff7034;
    border: 2px solid #ff7034;
}
.screen-sm {
    display: none;
}
@media (min-width: 320px) and (max-width: 425px) {
    section {
        padding: 30px 0px 30px 0px !important;
    }
    span.span-segitiga {
        right: 85px;
    }
    .section-header-hosting-cpanel {
        top: 160px;
    }
    .screen-header-sm {
        display: block;
    }
    .screen-header-lg {
        display: none;
    }
    .screen-lg {
        display: none;
    }
    .screen-sm {
        display: block;
    }
}
@media (max-width: 500px) {
    #btn-change {
        height: auto;
        width: auto;
    }
    .jarak-pilih-hosting {
        padding: 0;
    }
}
@media (min-width: 425px) and (max-width: 700px) {
    span.span-segitiga {
        right: 96px;
    }
}
@media (min-width: 700px) and (max-width: 770px) {
    span.span-segitiga {
        right: 96px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .img-fitur {
        width: 360px;
    }
}
@media (min-width: 770px) and (max-width: 993px) {
    span.span-segitiga {
        right: 100px;
    }
}
@media (min-width: 993px) and (max-width: 1001px) {
    span.span-segitiga {
        right: 100px;
    }
}
@media (min-width: 993px) and (max-width: 1200px) {
    span.span-segitiga {
        right: 115px;
    }
}
@media (min-width: 1024px) {
    .screen-lg {
        display: block;
    }
}
@media (max-width: 1023px) {
    .screen-md-and-sm {
        display: block;
    }
}