html {
    font-size: 100% !important;
}

body {
    overflow: hidden;
}

h1,
h2,
h3,
h5,
p {
    color: #133f5d;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    line-height: 1.7;
}

ul, li {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    line-height: 1.7;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.3rem;
}

h5,
p, ul, li, .faq-section .link-akordion {
    font-size: 1.1rem;
    font-weight: 400;
}

.paper-container.comparison-section h2 {
    padding-bottom: 3em;
}

.paper-container.comparison-section .meteor {
    position: absolute;
    top: 215px;
}

.paper-container.comparison-section .paper-aurora {
    position: absolute;
    top: 425px;
    right: -179px;
    opacity: 0.7;
}

.paper-container.comparison-section .paper-aurora.top {
    top: 65px;
    left: -265px;
}

.flex-container {
    display: flex;
    justify-content: center;
}

.card-section h2 {
    color: #fff;
}

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

.cardname {
    text-align: center;
    padding-top: 1em;
    color: #fff;
}

.paper-container.card-section .paper-heading-content {
    padding-bottom: 3em;
    text-align: center;
    position: relative;
}

.hero-wrapper {
    overflow: hidden;
    position: relative;
    background: linear-gradient(360deg, #257AB4 -8.91%, #206A9C 16.27%, #0F3449 70.57%, #0B2835 110.86%);
}

.hero-wrapper::before {
    background-image: url(https://storage.googleapis.com/clevertap-assets/star-pattern.svg);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-size: auto;
    background-repeat: no-repeat;
}

.spacecard .card-point p {
    text-align: right;
}

.meteor {
    position: absolute;
    right: 0;
    transform: translateY(-120%);
}

.card-content.spacecard .star {
    position: absolute;
    left: 2em;
    transform: translateY(-420%);
    width: 100%;
    max-width: 25px;
}

.card-content.universecard .star {
    position: absolute;
    top: 35em;
    right: 11em;
    width: 100%;
    max-width: 24px;
}

.card-content.universecard .meteor {
    position: absolute;
    /* bottom: 4em; */
    top: -4em;
    left: 30em;
    width: 100%;
    max-width: 81px;
}

.card-content.universecard .paper-aurora {
    position: absolute;
    width: 180%;
    max-width: 400px;
    right: 20rem;
    bottom: 15em;
    opacity: 0.7;
}

.card-content.spacecard, .card-content.universecard {
    position: relative;
}

.card-content.spacecard {
    right: 1rem;
}

.card-content.universecard {
    left: 1rem;
}

.universecard .card-list-content, .spacecard .copy {
    width: 100%;
    max-width: 450px;
}

.spacecard .copy {
    max-width: 400px;
}

.hero-wrapper .paper-container {
    padding: 17em 1.5em 12em;
    margin: 0 auto;
    display: flex;
}

.paper-container.card-section {
    max-width: 1235px;
    padding: 8em 1.5em 28em;
}

section .paper-container {
    padding: 8em 1.5em;
}


/* .hero-image .aurora-green {
    position: absolute;
    top: 0;
    max-width: 830px;
} */
.hero-image::before {
    content: "";
    background: url("https://storage.googleapis.com/clevertap-assets/enterprise/gl-aurora.svg") no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 47rem;
}

.paper-container {
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
}

.benefit-wrapper .benefit-header {
    text-align: center;
    padding-bottom: 0.1rem;
}

.benefit-wrapper .benefit-header h2 {
    padding-bottom: 0.2rem;
}

.benefit-wrapper .benefit-list {
    margin: 1.5em 0 2.5em;
    justify-content: space-between;
    width: 100%;
}

.hero-wrapper h1, .hero-wrapper p, .card-content h3 {
    color: #fff;
}

.hero-wrapper p {
    line-height: 2;
}

.card-content h3 {
    padding-bottom: 2rem;
}

.benefit-wrapper .benefit-point p {
    margin: 0;
    line-height: 1.4;
    font-weight: 700;
}

.benefit-wrapper .benefit-point, .benefit-wrapper .benefit-list {
    display: flex;
    align-items: center;
}

.benefit-wrapper .benefit-point {
    gap: 0.6rem;
}

.hero-wrapper .ojk {
    display: flex;
    padding-top: 3em;
    justify-content: center;
}

.hero-wrapper .ojk img {
    width: 100%;
    max-width: 70px;
    position: relative;
    top: -5px;
    left: 3px;
}

.hero-wrapper .ojk p {
    font-size: 0.65em;
    font-weight: 300;
    margin-bottom: 0;
    padding: 0 10px 0 0;
}

.hero-wrapper .benefit-point img {
    width: 100%;
    max-width: 26px;
    margin-right: 12px;
}

.hero-title {
    max-width: 550px;
    z-index: 2;
    position: relative;

}

.hero-title .swipe-up-logo {
    position: absolute;
    top: -7rem;
}

.spacecard .left {
    position: relative;
}

.spacecard .left .space-card,
.universecard .right .universe-card {
    height: auto;
    max-width: 200px;
    /* z-index: 5; */
}

.universecard .right .universe-card {
    position: relative;
    top: -2px;
}

.card-content .right {
    text-align: left;
    max-width: 255px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card-content, .card-point {
    display: flex;
}

.card-point {
    margin-bottom: 1.5rem;
    align-items: center;
}

.card-point img {
    margin-right: 2px;
    width: 100%;
    max-width: 100px;
}

.card-point p {
    margin: 0 0 0.2em 0;
    color: #fff;
}

.card-point p b {
    text-shadow: 0.3px 0 #fff;
}

.credit-card {
    background: linear-gradient(333.39deg, #4195D5 -7.44%, #133F5D 51.93%, #010B11 116.48%);
}

.compare-wrapper .comparison {
    position: relative;
}

.comparison .comparison-rail {
    display: flex;
    justify-content: center;
    position: absolute;
    top: -17rem;
    left: 50%;
    transform: translateX(-50%);
    height: 900px;
}

.paper-aurora-compare {
    position: absolute;
    top: 19rem;
    left: 13rem;
    z-index: -1;
}

.comparison .center-card {
    padding: 2em 2em 2.5em 3em;
    border: 2px solid #59A237;
    border-radius: 8px;
    color: white;
    background: linear-gradient(160.48deg, #133F5D 34.72%, #4195D5 95.41%, #93C854 113.11%);
    box-shadow: 3px 4px 4px 0px #133F5D33;
    max-width: 400px;
    height: 630px;
}

.comparison h3 {
    text-align: center;
    color: #fff;
    padding-block: 1rem 2rem;
    font-weight: 400;
}

.comparison .list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.comparison .list p {
    margin-bottom: 0;
    margin-left: 1rem;
    color: #fff;
    border-bottom: 0.5px solid #FFFFFF80;
    padding-bottom: 1rem;
    width: 270px;
}

.comparison .list img {
    width: 24px;
    padding-top: 5px;
}

.comparison .list.end p, .comparison .left-card .list.end p, .comparison .right-card .list.end p {
    border-bottom: none;
}

.comparison .center-card .ppc-notes {
    padding-left: 2.2rem;
    width: 280px;
}

.comparison .center-card .ppc-notes p {
    color: #fff;
    font-size: 11px;
    margin: 0;
}

.comparison .left-card, .comparison .right-card {
    padding: 2em 3em 2em 1em;
    border: 0.5px solid #133F5D80;
    border-radius: 8px;
    background-color: #fff;
    max-width: 340px;
    height: 550px;
    margin-top: 2.5em;
    box-shadow: 3px -1px 10.300000190734863px 0px #133F5D33;
}

.comparison .left-card {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.comparison .right-card {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.comparison .left-card .list p, .comparison .right-card .list p, .comparison .left-card h3, .comparison .right-card h3 {
    color: #133F5D;
}

.comparison .left-card .list p, .comparison .right-card .list p {
    border-bottom: 0.5px solid #133F5D80;
    width: 250px;
    line-height: 2;
}


.activation-section .paper-container {
    position: relative;
    display: flex;
    height: 100%;
}

.activation-section .as-cta {
    margin: 3em 0;
    padding: 0.3rem 1rem;
    text-align: left;
    display: flex;
    align-items: center;
    background: #4199D5;
    border-radius: 25px;
    border: 2px solid #4199D5;
    color: #fff;
    gap: 5px;
    font-size: 14px;
    transition: filter 0.2s ease;
}

.activation-section .as-cta:hover {
    filter: brightness(1.1);
}

.activation-section .as-cta p {
    margin: 0 0 0 7px;
    font-size: 15px;
}

.activation-section .as-cta.mobile {
    display: none;
}

.htu-point img {
    width: 100%;
    max-width: 110px;
    margin-bottom: 2em;
}

.htu-point.with-border {
    border-right: 1px solid #d7d7d7;
}

.htu-point {
    padding: 0 1em;
    width: 100%;
}

#tab-key-2 ol p {
    font-size: 14px;
    padding-inline: 0;
    padding-top: 1.5em;
    padding-bottom: 0.5em;
    margin-bottom: 0;
}

.link-accordion.activation {
    display: flex;
    justify-content: space-between;
    background: #E8F2FA;
    border-radius: 5px;
    color: #133f5d;
    padding: 0.6em 1.5em;
    font-size: 16px;
    position: relative;
    font-weight: 600;
    line-height: 1.6;
    font-family: "lato";
    margin-bottom: 0.7em;
    margin-top: 0.7em;
}

.link-accordion.activation::after {
    content: '';
    background-image: url('../img/down-arrow-dark.svg');
    background-repeat: no-repeat;
    background-size: 14px;
    display: inline-block;
    position: relative;
    top: 10px;
    width: 14px;
    height: 14px;
}

.htu-point ol li {
    padding-bottom: 1em;
}

.htu-point ol, .htu-point ul {
    padding: 0 0 0 17px;
}

.activation-section .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #fff;
    border: none;
    filter: none;
}

.activation-section .nav-tabs>li.active>a p {
    color: #4195D5;
}

.activation-section .nav-tabs>li.active>a {
    border-bottom: 3px solid #4199d5;
    background: transparent;
}

.activation-section .nav-tabs li a .copy {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.activation-section .nav-tabs li a .copy img {
    max-width: 10px;
}

.activation-section .nav-tabs li a .copy .arrow-active {
    display: block;
}

.activation-section .nav-tabs li a .copy .arrow-dark {
    display: none;
}

.activation-section .nav-tabs>li>a img {
    width: 100%;
    max-width: 61px;
    padding-bottom: 0.5em;
}

.activation-section .nav-tabs>li>a p {
    margin: 0 0 0 11px;
    font-size: 21px;
}

.activation-section .nav-tabs>li>a {
    padding: 10px 0;
    font-size: 1rem;
    color: #9BA4AD;
    border: none;
    border-bottom: 3px solid #B5BEC5;
    display: flex;
    align-items: end;
    filter: grayscale(1);
}

.activation-section .tab-content {
    width: 809px;
}

.activation-section .nav-tabs>li {
    width: 100%;
}

.activation-section .nav-tabs {
    width: 100%;
    max-width: 350px;
    padding-right: 2em;
    border: none;
    height: 100px;
}


.faq-section .border-bottom {
    border-bottom: 1px solid #d7d7d7 !important;
}

.faq-section h2 {
    text-align: center;
}

.custom-footer-papercard .footer-row.new-footer {
    background: transparent;
}

.custom-footer-papercard .planet {
    position: absolute;
    top: 21em;
    right: 0;
    width: 100%;
    max-width: 350px;
}

.custom-footer-papercard .paper-container {
    border-bottom: 1px solid #fff;
    padding: 5em 1.5em 5em;
}

.custom-footer-papercard {
    position: relative;
    background: linear-gradient(230.7deg, #4195D5 -9.82%, #133F5D 80.55%);
}

.custom-footer-papercard .content-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-footer-papercard .right p {
    color: #fff;
}

.custom-footer-papercard .left img {
    width: 100%;
    max-width: 500px;
}

.custom-footer-papercard .right {
    max-width: 530px;
}

.custom-footer-papercard .right h2 {
    font-size: 2.8rem;
    padding: 0;
    color: #fff;
}

.custom-footer-papercard .call-center {
    display: flex;
    gap: 5rem;
}

.custom-footer-papercard .call-center-mobile {
    display: none;
}

.custom-footer-papercard .call-center>div {
    display: flex;
    gap: 2rem;
}

.custom-footer-papercard .call-center>div .cta {
    margin-top: 1rem;
}

.custom-footer-papercard .call-center a {
    background: #fff;
    border: 2px solid #fff;
    color: #133F5D;
}

.custom-footer-papercard .call-center .cta a img.first {
    margin-right: 5px;
}

.custom-footer-papercard .call-center .cta a {
    margin-right: 1em;
    font-size: 1.1rem;
}

.custom-footer-papercard .call-center p {
    color: #fff;
    display: flex;
    flex-direction: column;
}

.custom-footer-papercard .call-center p .cs-button {
    margin-top: 1rem;
    background-color: #fff;
    border-radius: 25px;
    border: 2px solid #fff;
    padding: 0.3rem 1rem;
    color: #133F5D;
    transition: filter 0.2s ease;
}

.custom-footer-papercard .call-center p .cs-button:hover {
    filter: brightness(0.8);
}

.ct-wrapper {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.ct-wrapper ul, .ct-papercard ul {
    list-style: none;
    padding: 0;
}

.ct-wrapper .ct-left ul li, .ct-wrapper .ct-right ul li {
    text-align: left;
    align-items: start;
    position: relative;
    font-size: 15px;
    opacity: 0.6;
}

.ct-wrapper .ct-left ul li {
    padding-right: 4em;
    margin-left: 1em;
}

.ct-wrapper .ct-right ul li {
    padding-left: 5em;
}

.ct-wrapper .ct-left ul li::before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 45px;
    width: 70%;
    border-bottom: 1px solid #C9CFD3;
}

.ct-wrapper .ct-right ul li::before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 73px;
    width: 70%;
    border-bottom: 1px solid #C9CFD3;
}

.ct-wrapper .ct-left ul li.no-border::before,
.ct-wrapper .ct-right ul li.no-border::before {
    display: none;
}

.ct-wrapper .ct-left ul li.no-border.bottom,
.ct-wrapper .ct-right ul li.no-border.bottom {
    margin-bottom: 3em;
}

.ct-wrapper ul li {
    margin-bottom: 1.5em;
    display: flex;
    align-items: center;
    font-size: 18px;
    padding: 0 3em;
}

.ct-wrapper ul li div {
    display: block;
}

.ct-papercard ul li img {
    width: 100%;
    max-width: 26px;
    margin-right: 22px;
}

.ct-papercard ul li.notes {
    color: #fff;
    font-size: 15px;
    margin-bottom: 3em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ct-wrapper .ct-right, .ct-wrapper .ct-left {
    width: 100%;
    max-width: 379px;
    background: #F7FBFC;
    border-radius: 10px;
    position: absolute;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.15);
}

.ct-wrapper .ct-right {
    right: -24px;
    top: 234px;
}

.ct-wrapper .ct-left {
    left: -24px;
    top: 234px;
}

.ct-wrapper li.ct-header {
    height: 55px;
    padding-top: 1.5em;
    display: block;
    font-size: 24px !important;
    text-align: center !important;
    margin-bottom: 3em;
    line-height: 1.5;
}

.ct-wrapper .ct-left li.ct-header {
    margin-right: -1em;
    border-bottom: none;
}

.ct-wrapper .ct-right li.ct-header {
    margin-left: -1em;
}

.ct-wrapper li.bottom-list {
    margin-bottom: 3em;
}

.ct-wrapper .ct-left li img, .ct-wrapper .ct-right li img {
    max-width: 22px;
    opacity: 0.5;
    margin-right: 10px;
    margin-top: 5px;
}

.mobile-card {
    display: none;
}

.ct-papercard {
    position: relative;
    width: 496px;
}

.ct-papercard .star-header {
    position: absolute;
    z-index: 9;
    width: 100%;
    max-width: 25px;
    right: 29em;
}

.ct-papercard .star-footer {
    position: absolute;
    z-index: 9;
    width: 100%;
    max-width: 22px;
    left: 31em;
    bottom: -46em;
}

.ct-papercard .star-pattern {
    position: absolute;
    width: 100%;
    left: -8em;
    z-index: 9;
    height: 100%;
    top: 1em;
}

.ct-papercard ul {
    position: absolute;
    right: 24px;
    top: -30px;
    width: 100%;
    color: #fff;
    border-radius: 10px;
    z-index: 2;
    border: 3px solid #95C856;
    max-width: 450px;
    background: linear-gradient(157.92deg, #133F5D 15%, #4195D5 102.35%, #93C854 115.15%);

}

.ct-papercard .pc-header {
    padding: 2em 0;
    margin: 0;
    justify-content: center;
}

.ct-papercard li.pc-header b, .ct-papercard li.pc-header i {
    color: #fff;
    font-size: 1.5em;

}

.ct-papercard li {
    color: #fff;
    text-align: left;
}

.ct-wrapper .remove-border, .ct-papercard .remove-border {
    border: none;
}

.pvc-point {
    display: flex;
    justify-content: center;
    margin-bottom: 4em;
}

.pvc-point img {
    width: 100%;
    max-width: 80px;
    margin: 0 3em;
    height: 84.31px;
}

.pvc-header {
    margin: 0;
}

.hero-wrapper .paper-container.pvc-wrapper h3 {
    color: #fff;
    text-align: center;
    font-weight: 400;
    padding-top: 2em;
}

.hero-wrapper .paper-container.pvc-wrapper {
    padding-top: 5em;
    display: block;
}

.pvc-point p {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 0.5em;
    width: 100%;
    max-width: 445px;
    height: auto;
    background: #ffffff1a;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pvc-point h2 {
    color: #fff;
}

.personalvscorporate {
    width: 100%;
    text-align: center;
}

.promo-section .user-only {
    font-weight: 400;
    width: 100%;
    height: 100%;
    max-height: min-content;
    margin: 0 auto;
    background: linear-gradient(279.14deg, #4195D5 -5.4%, #133F5D 65.13%, #010B11 97.9%);
    padding: 3.5em 5em;
    border-radius: 10px;
    margin-top: 8em;
    position: relative;
    display: flex;
    align-items: center;
}

.promo-section .user-only .uo-copy {
    text-align: left;
}

.promo-section .user-only h2 {
    color: #fff;
    font-weight: 400;
    text-align: left;
    width: 100%;
    max-width: 650px;
    margin: 0;
    padding: 0;
    padding-bottom: 0.5em;
}

.promo-section .user-only .uo-link {
    color: #95C856;
    font-size: 18px;
    border-bottom: 1px solid #95C856;
}

.promo-section .user-only .uo-link:hover {
    color: #95C856;
    filter: brightness(1.3);
}

.promo-section .user-only .uo-banner {
    position: absolute;
    right: -6px;
    top: -71px;
    width: 100%;
    max-width: 350px;
}

.promo-section .user-only .right-arrow-green {
    width: 100%;
    max-width: 16px;
}

.user-only .meteor-right {
    position: absolute;
    width: 100%;
    max-width: 39px;
    right: 2em;
}

.user-only .meteor-left {
    position: absolute;
    width: 100%;
    max-width: 35px;
    left: 2em;
    bottom: 1em;
}

.user-only .star-uo-bottom {
    position: absolute;
    width: 100%;
    max-width: 22px;
    right: 1em;
    bottom: 1em;
}

.user-only .star-uo-top {
    position: absolute;
    width: 100%;
    max-width: 30px;
    left: 3em;
    top: 1em;
}

.bri-cs {
    width: 100%;
    max-width: 597px;
    margin-left: -1.5em;
}

.promo-section h2 {
    padding-bottom: 1em;
    text-align: left;
}

.promo-section .italic {
    font-style: italic;
    font-weight: 400;
}

.promo-section .promo-detail p {
    padding: 1em 0 0;
    margin: 0;
    font-size: 0.9rem;
    color: #95A2AD;
}

.promo-section .promo-detail h3 {
    line-height: 1.3;
    font-size: 1rem;
    height: 65px;
    font-weight: 400;
}

.promo-section .promo-cta {
    padding: 3rem 0 0;
}

.promo-cta-card {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    text-align: left;
    width: 100%;
}

.promo-cta-card>a {
    width: 100%;
    max-width: 400px;
    height: auto;
    padding: 36px 25px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: filter 0.3s ease;
}

.promo-cta-card>a:hover {
    filter: brightness(1.1);
}

.promo-cta-card>a p {
    color: #fff;
    margin: 0;
    line-height: 1;
    font-size: 20px;
}

.promo-cta-card .promo-cashback {
    background: linear-gradient(152.79deg, #97CC56 1.79%, #59A237 104.9%);
}

.promo-cta-card .promo-merchant {
    background: linear-gradient(152.79deg, #FC9B75 1.79%, #F88C63 95.34%);
}

.promo-cta-card .promo-spesial {
    background: linear-gradient(152.79deg, #FAC854 9.98%, #F0BA2F 77.95%);
}

.promo-section .promo-list {
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
}

.promo-section .promo-point:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.promo-section .promo-point:last-child .view-more {
    padding-left: 1.5rem;
    color: #133F5D;
}

.promo-section .promo-detail {
    padding: 1.5em;
    text-align: left;
}

.promo-section .promo-image {
    width: 258px;
    height: 145px;
    overflow: hidden;
}

.promo-section .promo-image img {
    width: 100%;
    /* max-width: 335px; */
}

.promo-section .promo-point {
    width: 100%;
    max-width: 258px;
    box-shadow: 0px 3px 10px 0px #00000014;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

.promo-section .promo-point:hover {
    transform: scale(1.02);
}

.promo-section .paper-container {
    padding: 35em 1.5em 8em;
}

.activation-section {
    background: #F7FBFD;
}

.htu-list li {
    color: #133F5D;
}

.htu-list p {
    padding-inline: 1.5em;
}

.htu-list p.green-text {
    font-weight: 700;
    color: #95C856;
}

.htu-list p.akt-notes {
    margin-left: 7px;
    font-size: 12px;
}

.custome-faq-dropdown ul li {
    font-size: 16px;
    font-family: "Lato";
    font-weight: 400;
    line-height: 28px;
}

.paragrap-kolom-konten {
    font-weight: 400;
}

.card-body.custome-faq-dropdown ul {
    padding-left: 1rem;
}

.nowrap {
    white-space: nowrap;
}

.hero-section {
    overflow: hidden;
}

.personalvscorporate.mobile {
    display: none;
}

.faq-section .card-header {
    padding: 2rem 1.25rem;
}

.footer-row.new-footer #homepage-footer nav a, .o-nav__item.custom_footer_email, .operating-hour li div p, .footer-row.new-footer #homepage-footer nav .phone-call {
    font-size: 15px;
}

.papercard-advantage .pa-point p {
    line-height: 1.6;
}

.papercard-advantage .pa-point img {
    width: 100%;
    max-width: 35px;
    margin-right: 5px;
}

.papercard-advantage .pa-point.remove-margin {
    margin-bottom: 0;
}

.papercard-advantage .pa-point {
    display: flex;
    width: 100%;
    align-items: flex-start;
    max-width: 328px;
    margin-bottom: 3em;
}

.papercard-advantage {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 2.5em;
}

.pap-notes {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    color: #fff;
    text-align: center;
}

.hero-wrapper .paper-container.pvc-wrapper h5 {
    text-align: center;
    color: #fff;
}

.paper-button.green-button {
    background: #59A237;
    border: 2px solid #59A237;
    width: 215px;
}

.paper-button.green-button:hover {
    background: transparent;
    color: #59A237;
}

.paper-button {
    position: relative;
    display: inline-block;
}

.paper-button .tooltiptext {
    visibility: hidden;
    width: 358px;
    background-color: #fff;
    color: #133F5D;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    position: absolute;
    top: -6px;
    left: 110%;
    z-index: 1;
}

.paper-button:hover .tooltiptext {
    visibility: visible;
}

.paper-button .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}

.mobile-divider, .mobile-aurora, .mobile-star, .aurora-blue {
    display: none;
}

.earth {
    position: absolute;
    left: 0;
    max-width: 80px;
    transform: translateY(280%);
}

.planet {
    position: absolute;
    right: 2em;
    transform: translateY(30%);
}

.promo-rail, .comparison-rail {
    overflow-x: auto;
}

.promo-rail {
    z-index: 2;
    position: relative;
}

.promo-section .promo-list {
    justify-content: left;
    width: max-content;
    padding: 1.5em 0.5em;
}

#banner-app-store-campaign p {
    color: #fff;
}

.hero-image img {
    width: 100%;
    position: absolute;
    right: -3em;
    bottom: 0;
    z-index: 1;
    max-width: 800px;
}

.hero-image img.img1 {
    bottom: -5em;
}

.crossout {
    position: relative;
    color: #4C6E84;
}

.crossout::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: #E35273;
    transform: rotate(11deg);
    top: 10px;
}

.notes {
    font-size: 0.8rem;
    margin: 0;
    color: #4C6E84;
}


.solusi-kartu-kredit-bisnis .paper-container {
    padding: 7em 1em;
}

.skkb-header {
    color: #133F5D;
    text-align: center;
    padding-bottom: 1rem;
}

.skkb-header h2 {
    padding-bottom: 0.5rem;
}

.skkb-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    color: #133F5D;
}

.head-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    width: 33.33%;
    box-sizing: border-box;
}

.head-wrapper img {
    width: 100%;
    height: auto;
}

.head-wrapper:not(.head-wrapper.papercard) img {
    max-width: 230px;
}

.head-wrapper.papercard img {
    margin-top: -2rem;
}

.head-wrapper.papercard {
    position: relative;
}

.head-wrapper.papercard::before,
.head-wrapper.papercard::after {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 10%;
    width: 1.5px;
    background-color: #EAEDEF;
}

.head-wrapper.papercard::before {
    left: 0;
}

.head-wrapper.papercard::after {
    right: 0;
}

.head-wrapper h3 {
    font-size: 1.5rem;
    padding-bottom: 3rem;
    text-align: center;
}

.skkb-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

.skkb-cta .btn-hero-green.btn-new-green {
    background: #5FA700;
    border-color: #5FA700;
}

.skkb-cta .btn-hero-green.btn-new-green:hover {
    background: transparent;
    color: #5FA700;
    border-color: #5FA700;
}

.promo-rail:has(.promo-empty) {
    overflow-x: hidden;
}

.promo-empty-wrapper {
    display: flex;
    gap: 1.5em;
    width: auto;
    padding: 1em 0.5em 1.5em 0.5em;
}

.promo-empty {
    width: 100%;
    max-width: 380px;
    box-shadow: 0px 3px 10px 0px #00000014;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
    padding: 1rem;
    color: #133f5d;
    font-size: 1.2rem;
}

.promo-empty p {
    margin-bottom: 0;
}

.promo-empty .cta-button {
    font-size: 1rem;
}

@media (max-width: 1192px) {
    .hero-image img {
        max-width: 650px;
    }

    .paper-container.card-section {
        max-width: 1033px;
    }

    .benefit-wrapper .benefit-point {
        width: 100%;
        margin: 0 10px 10px;
    }

    .ct-wrapper .ct-left ul li::before {
        bottom: 3px;
        left: 28px;
        width: 80%;
    }

    .flex-container {
        display: none;
    }

    .mobile-card {
        display: flex;
        justify-content: center;
        gap: 3rem;
    }

    .mobile-card>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .mobile-card img {
        max-width: 200px;
        width: 100%;
    }

    .mobile-card h3 {
        color: #fff;
        text-align: center;
    }

    .mobile-card a {
        border: 1px solid #fff;
        border-radius: 25px;
        color: #fff;
        width: fit-content;
        margin: 1rem auto 0;
        padding: 5px 15px;
    }

    .info-content .card-content {
        display: flex;
        padding: 2rem 2rem 0;
    }

    .info-content .spacecard .left {
        order: 3;
    }

    .card-content .right {
        max-width: 200px;
        align-items: initial;
    }

    .card-point img {
        max-width: 70px;
    }

    .info-content .card-content {
        position: relative;
    }

    .arrow {
        max-width: 32px !important;
        position: absolute;
        cursor: pointer;
    }

    #left-arrow {
        left: -1rem;
        top: 32%;
        z-index: 1;
    }

    #right-arrow {
        right: -5px;
        top: 33%;

    }

    .universecard .card-point img {
        position: relative;
        left: -13px;
    }

    .universecard .card-list-content, .spacecard .copy {
        max-width: 400px;
    }

    .card-content.universecard .paper-aurora {
        width: 100%;
        right: initial;
        left: 5em;
        top: 7em;
    }

    .paper-container.card-section {
        padding-left: 0;
        padding-right: 0;
    }

    .compare-wrapper {
        padding: 8rem 0 0;
    }

    .comparison .comparison-rail {
        position: initial;
        transform: none;
        height: 680px;
        justify-content: unset;
    }

    .paper-aurora-compare {
        display: none;
    }

    .cp-content {
        /* order: 1; */
        padding-right: 1em;
    }

    .card-content .right {
        justify-content: start;
    }

    .ct-wrapper .ct-left ul li::before {
        /* display: none; */
        width: 90%;
    }

    .ct-wrapper .ct-left {
        left: 45px;
        max-width: 300px;
    }

    .ct-wrapper .ct-left ul li {
        margin: 0 1.5em 0.5em;
        /* border-bottom: 1px solid #C9CFD3; */
        padding: 0 0 0.5em;
    }

    .ct-wrapper .ct-right ul li::before {
        bottom: -7px;
        left: 62px;
        width: 80%;
    }

    .ct-wrapper .ct-left ul li.no-border.bottom {
        margin-bottom: 2em;
        border-bottom: none;
    }

    .ct-wrapper .ct-left li.ct-header {
        padding-top: 1.5em;
        margin-bottom: 3em;
    }

    .ct-papercard ul li {
        padding: 0 2em;
    }

    .ct-papercard ul li img {
        margin-right: 10px;
    }

    .ct-wrapper .ct-right ul li {
        padding-left: 2em;
        padding-right: 1em;
    }

    .ct-wrapper .ct-right {
        right: 28px;
        width: 330px;
    }

    .ct-papercard ul li.notes {
        margin-bottom: 3em;
    }

    .spacecard .copy {
        order: 1;
    }

    /* .universecard .card-list-content, .spacecard .copy{
        max-width: initial;
    } */
    .card-content.spacecard {
        padding-bottom: 3em;
    }

    .card-content.universecard {
        justify-content: center;
        gap: 2rem;
    }

    .card-content.spacecard {
        right: initial;
    }

    /* .card-section .comparison .comparison-card {
        max-width: 768px;
        bottom: -35rem;
    } */
    .paper-container.card-section {
        padding-bottom: 8rem;
    }

    .promo-section .paper-container {
        padding-top: 8rem;
    }

    .card-section .comparison .comparison-card {
        position: initial;
    }

    .custom-footer-papercard .call-center>div {
        gap: 0.5rem;
    }

    .custom-footer-papercard .call-center {
        gap: 2.5rem;
    }

    .custom-footer-papercard .call-center>img {
        width: 100%;
        max-width: 125px;
    }

    .custom-footer-papercard .call-center p .cs-button {
        padding-inline: 5px;
    }
}

@media (max-width: 1112px) {
    .hero-image {
        min-height: 200px;
        position: relative;
    }

    .paper-container.card-section {
        padding-inline: 0;
    }

    .paper-container.card-section .paper-heading-content {
        padding-bottom: 2em;
    }

    .ct-wrapper .ct-right li.ct-header {
        margin-left: 0;
    }

    .meteor {
        transform: translateY(-80%);
    }

    .spacecard .left img, .universecard .right .universe-card {
        max-width: 200px;
    }

    .card-point.space {
        justify-content: right !important;
        display: flex;
    }

    .card-point p {
        font-size: 16px;
    }

    .card-content.universecard .paper-aurora {
        max-width: 350px;
    }

    .promo-rail {
        overflow-x: scroll;
    }

    /* .promo-section .promo-point{
        margin-right: 2em;
    } */
    .promo-section {
        overflow: hidden;
    }

    .promo-section .user-only h2 {
        max-width: 572px;
    }

    .paper-container.comparison-section {
        padding-bottom: 8em;
    }

    .paper-container.comparison-section h2 {
        padding-bottom: 2em;
    }

    .paper-container.comparison-section .paper-aurora.top {
        top: 145px;
    }

    .ct-wrapper {
        display: grid;
    }

    .ct-wrapper .ct-left {
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
        position: relative;
        max-width: 600px;
        margin: 0 auto 1em;
        order: 1;
        top: 0;
        left: 0;
    }

    .ct-wrapper .ct-left li.ct-header {
        margin-inline: 0;
    }

    .ct-papercard {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        margin-bottom: 1em;
    }

    .ct-papercard ul {
        position: initial;
        max-width: 600px;
    }

    .ct-wrapper .ct-right {
        position: initial;
        margin: 0 auto;
        max-width: 600px;
        width: 100%;
        order: 1;
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    }

    .paper-container.comparison-section .paper-aurora.top {
        left: 5em;
    }

    .paper-container.comparison-section .paper-aurora {
        right: 5em;
        z-index: 0;
        top: 281px;
    }

    .comparison-wrapper .paper-container {
        margin-bottom: 0;
    }

    .hero-title h1 {
        font-size: 2.4rem;
    }

    .hero-title .swipe-up-logo {
        transform: translateX(-50%);
        left: 50%;
        width: 100%;
        max-width: 200px;
    }

    .paper-button.green-button {
        width: 100%;
        max-width: 500px;
    }

    .hero-title {
        padding-top: 9rem;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        max-width: 680px;
        order: 1;
    }

    .hero-title .swipe-up-logo {
        max-width: 125px;
        top: 5rem;
    }

    .hero-wrapper .paper-container {
        display: grid;
        justify-content: center;
    }

    .hero-image img {
        margin-top: -12em;
        left: 2em;
        margin-bottom: -9em;
    }

    .hero-image {
        order: 0;
    }
}

@media (max-width: 1005px) {
    .spacecard .left .space-card, .universecard .right .universe-card {
        max-width: 180px;
    }

    .card-point p {
        font-size: 14px;
    }

    .card-content.spacecard, .card-content.universecard {
        right: 1em;
    }

    .activation-section .tab-content {
        width: 100%;
        max-width: 679px;
        margin: 0 auto;
    }

}

@media (max-width: 998px) {
    /* .hero-image img{
        max-width: 550px;
        position: initial;
    }

    .hero-wrapper .paper-container{
        display: grid;
    }
    .hero-title{
        order: 1;
        margin: 0 auto;
    }
    .hero-wrapper .paper-container{
        padding-top: 12em;
    }
    .hero-wrapper .cta{
        text-align: center;
    }
    .hero-wrapper h1, .hero-wrapper .hero-title p{
        text-align: center;
    } */

    .hero-title .swipe-up-logo {
        max-width: 150px;
        width: 100%;
    }

    .hero-wrapper .benefit-point p {
        text-align: left;
    }

    .benefit-wrapper .benefit-point p br {
        display: none;
    }

    .ct-wrapper .ct-left ul li::before {
        bottom: 3px;
        left: 28px;
        border-bottom: 1px solid #C9CFD3;
    }

    .universecard .card-list-content {
        padding-right: 0;
        margin-left: -1em;
    }

    .spacecard .left .space-card, .universecard .right .universe-card {
        max-width: 180px;
    }

    /* .paper-container.comparison-section{
        bottom: initial;
    } */
    .promo-section .user-only {
        flex-direction: column;
        margin-top: 12em;
    }

    .promo-section .user-only .uo-copy {
        order: 2;
        text-align: center;
    }

    .promo-section .user-only h2 {
        text-align: center;
    }

    .promo-section .user-only .uo-banner {
        position: inherit;
        top: 0;
        right: 0;
        margin-top: -10em;
        margin-left: 2em;
    }
}

@media (max-width: 926px) {

    /* .comparison-table-rail{
        overflow-x: scroll;
        padding: 3em 0 5em;
    }
    .comparison-table{
        width: max-content;
    } */
    .paper-container.card-section .paper-heading-content {
        padding-bottom: 1.5em;
    }

    .card-content.universecard .paper-aurora {
        max-width: 300px;
        bottom: 17em;
    }

    .earth {
        transform: translateY(230%);
    }
}

@media (max-width: 912px) {
    .spacecard .left .space-card, .universecard .right .universe-card {
        max-width: 165px;
    }

    .paper-container.comparison-section .meteor {
        display: none;
    }

    .card-point img {
        max-width: 70px;
    }

    .card-content .right {
        max-width: 170px;
    }

    .activation-section .nav-tabs {
        max-width: 280px;
    }

    .custom-footer-papercard .content-footer-wrapper {
        display: block;
    }

    .custom-footer-papercard .left img {
        max-width: 350px;
    }

    .custom-footer-papercard .content-footer-wrapper .left img {
        margin: -30px;
    }

    .custom-footer-papercard .content-footer-wrapper .left, .call-center {
        text-align: center;
    }

    .custom-footer-papercard .planet {
        max-width: 154px;
        top: 39em;
    }

    .custom-footer-papercard .right {
        margin: 0 auto;
        text-align: center;
    }

    .universecard .card-list-content {
        margin-left: 0;
    }

    .call-center {
        padding-top: 2.5em;
    }

    .call-center p {
        margin-bottom: 0;
    }

    .custom-footer-papercard .call-center {
        display: none;
    }

    .custom-footer-papercard .call-center-mobile {
        display: block;
        margin: 0 auto;
    }

    .custom-footer-papercard .call-center-mobile .swipe-up-logo {
        width: 100%;
        max-width: 200px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .custom-footer-papercard .call-center-mobile h2 {
        text-align: center;
        color: #fff;
        padding-top: 2rem;
    }

    .custom-footer-papercard .call-center-mobile .call-center-card {
        border: 2px solid #fff;
        border-radius: 5px;
        background: #FFFFFF1A;
        color: #fff;
        width: 100%;
        max-width: 315px;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin: 1.5em auto;

    }

    .custom-footer-papercard .call-center-mobile .call-center-card .text p {
        padding: 0;
        margin: 0;
        color: #fff;
        text-align: left;
    }

    .custom-footer-papercard .call-center-mobile .call-center-card .text p:last-child {
        font-size: 12px;
    }
}

@media (max-width: 818px) {
    .card-point {
        margin-bottom: 1rem;
    }

    .card-point p {
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .hero-wrapper {
        padding-top: 2rem;
        height: 1100px;
    }

    .hero-wrapper h1, .hero-wrapper .hero-title p {
        text-align: center;
    }

    .hero-wrapper .cta {
        text-align: center;
    }

    /* .hero-wrapper::before {
        background-image: url("../img/papercard/assets-mobile-1.webp");
        position: absolute;
        content: '';
        width: 100%;
        height: 1100px;
        background-size: cover;
        background-repeat: no-repeat;
    } */
    /* .hero-wrapper::after {
        background-image: url("../img/papercard/gradient-bg.svg");
        position: absolute;
        top: 2rem;
        content: '';
        width: 100%;
        height: 1100px;
        background-size: cover;
        background-repeat: no-repeat;
    } */


    .cta {
        position: relative;
        /* Change position to relative */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 -1px 7px 0 var(--color-shadow, rgba(49, 53, 59, 0.12));
    }

    .sticky {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 1em;
        transition: transform 0.3s ease;
    }

    .paper-button.green-button {
        z-index: 999 !important;
        max-width: 100%;
    }

    #customZendeskButton {
        bottom: 7rem !important;
    }

    .hero-wrapper .ojk {
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding-top: 2rem;
        font-size: 14px;
    }

    .hero-wrapper .ojk p {
        padding: 0;
    }

    .hero-wrapper .ojk img {
        position: initial;
        width: 40px;
        margin: 0 3px 5px;
    }

    .benefit-wrapper .benefit-list {
        flex-direction: column;
        justify-content: left;
        margin: 1.5em 0 0.5em;
        align-items: left !important;
    }

    /* .benefit-wrapper .benefit-point{
        width: 100%;
        margin: 0 10px 10px;
    } */
    .benefit-wrapper .benefit-point img {
        max-width: 20px;
    }

    .card-content.universecard .star {
        top: 11em;
        right: 4em;
    }

    .card-content.spacecard, .card-content.universecard {
        position: inherit;
        padding-bottom: 0;
    }

    .card-content.universecard {
        gap: 0;
    }

    .card-content {
        display: grid;
        justify-content: center;
        text-align: center;
    }

    .card-point {
        display: flex;
    }

    /* .card-content.spacecard .card-point div {
        order: 2;
    } */
    .card-content .card-point p {
        text-align: left;
        font-size: 13px;
    }

    .card-content.spacecard .card-point p {
        text-align: right !important;
    }

    .card-content .card-point p br {
        display: none;
    }

    .card-content .right {
        max-width: max-content;
        padding-left: 0;
        margin: 0 auto;
        padding-bottom: 2em;
    }

    .spacecard .left .space-card, .universecard .right .universe-card {
        max-width: 200px;
        position: relative;
    }

    .universecard .card-list-content {
        margin-left: 0;
    }

    .card-content.universecard .left .card-list-content {
        max-width: 600px;
        margin: 0 auto;
    }

    /* .flex-container {
        display: none;
    }
    .mobile-card {
        display: flex;
        justify-content: center;
        gap: 3rem;
    }
    .mobile-card>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .mobile-card img {
        max-width: 200px;
        width: 100%;
    }
    .mobile-card h3 {
        color: #fff;
        text-align: center;
    }
    .mobile-card a {
        border: 1px solid #fff;
        border-radius: 25px;
        color: #fff;
        width: fit-content;
        margin: 1rem auto 0;
        padding: 5px 15px;
    } */
    /* .card-section .comparison .comparison-card {
        position: relative;
        bottom: -20rem;
        transform: none;
    } */
    .card-content .copy {
        order: 2;
        max-width: 600px;
    }

    .cardname {
        text-align: center;
        font-size: 20px;
        margin-bottom: 0;
    }

    .promo-section .user-only {
        padding: 2em 1em;
    }

    .promo-section .user-only h2, .promo-section .user-only .uo-link {
        font-size: 1.3em;
    }

    .promo-section .user-only .uo-banner {
        max-width: 250px;
    }

    .promo-cta-card {
        gap: 0.5rem;
    }

    .promo-cta-card>a {
        padding: 20px 25px;
    }

    .promo-cta-card>a img {
        width: 16px;
    }

    .promo-cta-card>a p {
        font-size: 14px;
    }

    .activation-section .nav-tabs {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 4em;
    }

    .activation-section .paper-container {
        display: block;
    }

    .activation-section .nav-tabs>li {
        width: 100%;
        max-width: 212px;
    }

    .activation-section .nav-tabs>li>a img {
        max-width: 45px;
    }

    .activation-section .nav-tabs {
        max-width: 700px;
        margin: 0 auto;
        padding-right: 0;
    }

    .activation-section .nav-tabs>li>a img, .activation-section .as-cta {
        display: none;
    }

    .activation-section .as-cta.mobile {
        display: block;
        margin: auto;
        color: #fff;
        width: fit-content;
        margin-top: 2rem;
    }

    .activation-section .nav-tabs>li {
        max-width: 270px;
    }

    .activation-section .nav-tabs li a .copy img {
        display: none !important;
    }

    .activation-section .nav-tabs li a .copy {
        justify-content: center;
    }

    .card-content.universecard .paper-aurora {
        display: none;
    }

    .mobile-divider {
        display: flex;
        border-bottom: 1px solid #fff;
        margin-top: 2em;
        margin-bottom: 4em;
        position: relative;
        width: 90%;
        margin-inline: auto;
    }

    .mobile-divider::before, .mobile-divider::after {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        transform: translateY(-50%);
    }

    .mobile-divider::after {
        right: 0;
    }

    .right .mobile-aurora, .left .aurora-blue {
        display: block;
        position: absolute;
        /* z-index: 2 !important; */
        max-width: 550px !important;
        opacity: 0.7;
        right: -15%
    }

    .right .mobile-star {
        display: block;
        position: absolute;
        max-width: 25px !important;
        top: 0;
        right: 0;
    }

    .earth {
        transform: translateY(300%);
    }

    .planet {
        transform: translateY(-80%);
        right: 1.5em;
    }

    .left .aurora-blue {
        top: 0;
        right: 0;
        opacity: 1;
        width: 350% !important;
    }

    .card-content.spacecard .star {
        transform: translateY(20%);
    }

    .card-content.universecard .meteor {
        display: none;
    }

    .card-content .right {
        align-items: center;
    }

    .left .cardname {
        padding-bottom: 1em;
    }

    .skkb-wrapper .head-wrapper:not(.head-wrapper.papercard) h3 {
        padding-bottom: 2rem;
    }

    .skkb-wrapper .head-wrapper {
        width: 50%;
    }

    .skkb-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .head-wrapper.papercard {
        padding-top: 2rem;
    }

    .head-wrapper.papercard::before, .head-wrapper.papercard::after {
        width: 100%;
        left: 0;
        right: 0;
        height: 1.5px;
    }

    .head-wrapper.papercard::before {
        top: 0;
    }

    .head-wrapper.papercard::after {
        bottom: 0;
        top: 95%;
    }

    .head-wrapper.pioneer {
        padding-bottom: 3rem;
    }

    .skkb-cta {
        padding-top: 4rem;
    }

    .promo-section .promo-cta {
        padding-top: 2rem;
        padding-bottom: 0;
    }
}

@media (max-width: 630px) {
    h1 {
        line-height: 1.4;
        font-size: 2.2rem;
    }

    h5, p, ul, li {
        font-size: 1rem;
    }

    .hero-wrapper, .hero-wrapper::before, .hero-wrapper::after {
        height: auto;
    }

    .hero-title h1 {
        font-size: 1.8rem;
    }


    .hero-wrapper .hero-title .cta p {
        font-size: 9px;
    }

    .hero-image img {
        margin-left: 0;
        width: 750px;
        left: -6em;
    }

    .hero-title {
        padding: 9rem 0 0;
    }

    .right .mobile-aurora, .left .aurora-blue {
        width: 100% !important;
    }

    .custom-footer-papercard .planet {
        top: 53em;
    }

    .activation-section .nav-tabs {
        padding: 0 0 2em;
    }

    .activation-section .nav-tabs>li {
        max-width: 187px
    }

    .htu-list {
        display: block;
    }

    .htu-point.with-border {
        border-right: none;
        border-bottom: 1px solid #d7d7d7;
    }

    .htu-point {
        padding: 1em 1em 0;
    }

    .link-akordion {
        display: flex;
    }

    .left .cardname {
        padding-bottom: 1.5em;
    }

    .universecard .card-point img {
        position: inherit;
    }

    .right .mobile-aurora, .left .aurora-blue {
        right: 0;
    }

    /* .promo-section .promo-list{
        justify-content: left;
        width: max-content;
    } */
    .animation .words-wrapper h1 {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-title .animation {
        text-align: center;
    }

    .promo-empty {
        font-size: 1rem;
    }
    
    .promo-empty .cta-button {
        font-size: 0.9rem;
    }
}

@media (max-width: 536px) {
    .skkb-wrapper .head-wrapper {
        width: 100%;
    }

    .skkb-wrapper .head-wrapper img {
        max-width: 300px;
    }
}


@media (max-width: 490px) {
    .card-activation .title-accordion span {
        width: 90%;
    }

    .mobile-card {
        gap: 2rem;
    }

    #left-arrow {
        left: 0.3rem;
        top: 25%;
    }

    #right-arrow {
        right: -12px;
    }

    .promo-cta-card>a {
        padding: 15px;
    }

}

@media (max-width: 459px) {
    h1 {
        font-size: 1.8rem;
    }

    /* section p {
        font-size: 13px;
        line-height: 1.5 !important;
    } */
    .hero-wrapper .benefit-point {
        max-width: initial !important;
    }

    .paper-container.comparison-section h2 {
        padding-bottom: 1em;
    }

    .csm-content {
        background: #E8F3FA;
        padding: 1em;
        border-radius: 10px;
    }

    .csm-point .csm-card h5 {
        background: #E8F3FA;
        width: fit-content;
        padding: 2px 6px;
        border-radius: 5px;
        font-size: 0.8rem;
    }

    .csm-point h3 {
        margin: 1em 0 1em;
    }

    .csm-point .csm-card {
        background: #fff;
        padding: 1em;
        border-radius: 10px;
    }

    .csm-another-card img, .csm-papercard img {

        margin-right: 7px;
        position: relative;
        top: 4px;

    }

    .csm-another-card p, .csm-papercard p {
        margin: 0;
    }

    .csm-another-card, .csm-papercard {
        display: flex;
        align-items: flex-start;
    }

    .csm-papercard .label-csm {
        position: absolute;
        width: 100%;
        max-width: 112px;
        top: -9px;
        left: -25px;
    }

    .csm-papercard {
        position: relative;
        padding-top: 2em;
    }

    .comparison-section-mobile h2 {
        text-align: center;
        padding-bottom: 2em;
    }

    h2, .custom-footer-papercard .right h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1rem;
    }

    .comparison h3 {
        font-size: 1.3rem;
    }

    .hero-wrapper .paper-container.card-section {
        padding: 3em 1.5em 14em;
    }

    .footer-row.new-footer {
        overflow: hidden;
    }

    .hero-wrapper .benefit-list {
        max-width: 302px;
        margin: 2em auto 0;
    }

    .custom-footer-papercard .content-footer-wrapper .left, .call-center {
        margin-top: 4em;
    }

    .custom-footer-papercard .content-footer-wrapper .left img {
        margin: -76px -30px -30px;
    }

    .promo-section .paper-container {
        padding: 4em 1.5em 1em;
    }

    .activation-section .nav-tabs {
        gap: 5px;
    }

    .activation-section .nav-tabs>li {
        max-width: 170px;
    }

    .activation-section .nav-tabs>li>a p {
        font-size: 16px;
        margin-left: 0;
    }

    .promo-section .paper-container {
        padding-top: 5em;
    }

    .paper-container.card-section {
        padding-block: 8em;
    }

    .ct-wrapper ul li, .ct-papercard ul li {
        font-size: 14px;
    }

    .ct-papercard ul li {
        padding: 0 1em;
    }

    .ct-papercard ul li img {
        max-width: 18px;
    }

    .ct-wrapper .ct-right ul li {
        padding-left: 1em;
    }

    .card-point img {

        max-width: 55px;
    }

    .card-content.universecard .right .universe-card, .card-content.spacecard .left .space-card {
        max-width: 130px;
    }

    .earth {
        display: none;
    }

    .spacecard .card-point, .universecard .card-point {
        padding: 0;
    }

    .card-content .copy {
        padding-top: 1em;
    }

    .flex-container {
        padding: 0 0.5em;
    }

    .mobile-card {
        gap: 1rem;
    }

    .mobile-card img {
        max-width: 120px;
        margin-left: 5px;
    }

    .hero-wrapper .paper-container {
        padding-bottom: 9em;
    }

    .hi-wrapper img {
        width: 1000px;
        max-width: initial;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -23%);
    }

    .hi-wrapper img.img1 {
        width: 625px;
        transform: translate(-50%, -3%);
    }

    .hi-wrapper img.img3 {
        width: 550px;
    }

    .hero-title .swipe-up-logo {
        top: 4rem;
    }

    .promo-section .promo-cta {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
}


@media (max-width: 413px) {



    .hero-title h1 {
        font-size: 1.5rem;
    }

    .hero-title .swipe-up-logo {
        top: 2rem !important;
    }

    .hero-title .swipe-up-logo {
        top: 8rem;
        max-width: 100px;
    }

    .hero-wrapper .ojk {
        padding-top: 14px;
    }

    .hero-wrapper .hero-title .ojk p {
        font-size: 8px;
    }

    .hero-wrapper .ojk img {
        width: 24px;
    }

    .hero-title .paper-button.green-button {
        padding: 10px;
        font-weight: 700;
        max-width: 300px;
        margin: 0 auto;
    }

    .activation-section .nav-tabs>li>a {
        display: block;
    }

    .activation-section .nav-tabs>li.active>a p {
        margin: 0;
    }

    .activation-section .nav-tabs>li {
        max-width: 122px;
    }

    .animation .words-wrapper h1 {
        font-size: 1.6rem;
    }
}

@media (max-width: 380px) {

    .hero-title .swipe-up-logo {
        top: 1.5rem !important;
    }
}

.words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.words-wrapper h1 {
    opacity: 0;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 3rem;
}

.words-wrapper .is-visible {
    position: relative;
    opacity: 1;
    -webkit-animation: push-in 0.7s;
    -moz-animation: push-in 0.7s;
    animation: push-in 0.7s;
}

.words-wrapper .is-hidden {
    -webkit-animation: push-out 0.5s;
    -moz-animation: push-out 0.5s;
    animation: push-out 0.5s;
}


@-webkit-keyframes push-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }

    70% {
        opacity: 1;
        -webkit-transform: translateY(10%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes push-in {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100%);
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(10%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@keyframes push-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(10%);
        -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
        -o-transform: translateY(10%);
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes push-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(110%);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
}

@-moz-keyframes push-out {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    60% {
        opacity: 0;
        -moz-transform: translateY(110%);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
}

@keyframes push-out {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(110%);
        -moz-transform: translateY(110%);
        -ms-transform: translateY(110%);
        -o-transform: translateY(110%);
        transform: translateY(110%);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}

.hi-wrapper img {
    opacity: 0;
    transition: 0.4s;
}

.hi-wrapper img.is-visible {
    opacity: 1;
}

.hi-wrapper img.is-hidden {
    opacity: 0;
}

.simulation-section {
    height: 65rem;
    width: 100vw;
}
.spc-campaign img{
    width: 100%;
    max-width: 400px;
    transform: rotate(-2deg);
}

@media (max-width: 490px) {
    .simulation-section {
        height: 78rem;
        width: 100vw;
    }   
}