@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    /* GLOBAL */
    .btn-cs-lg {
        padding: 13px 28px;
    }

    /* HOME */
    .page-home .section-hero .meta h1,
    .page-data .section-hero .card-total .title,
    .page-register .section-hero .hero-right .card-hero .title {
        line-height: 100%;
        font-size: 44px;
    }
    .page-home .section-hero .meta p,
    .section-banner .section-body .section-desc,
    footer .footer-body li,
    .section-title p,
    .page-news .section-hero .headline-bottom .title {
        font-size: 14px; /* 18px */
        line-height: 150%;
    }
    .page-home .section-hero .meta .meta-image p {
        padding-top: 6px;
    }
    .section-banner-mitra .section-body .section-content .section-title,
    .section-news .card-headline .headline-top .meta .title,
    .section-banner .section-body .section-title,
    .section-news .section-title .title,
    .section-title > div,
    .page-data .section-hero .section-title .title,
    .page-news .section-hero .headline-top .meta .title,
    .page-news .card-recommendation-news .recommendation-news-item .meta .title,
    .page-detail-article .section-article .meta h1,
    .page-register .section-hero .hero-left .title {
        line-height: 120%; /* 140% */
        font-size: 30px; /* 48px */
    }
    .section-banner-mitra .section-body .section-content .section-desc {
        margin: 25px auto;
        font-size: 14px;
    }
    .section-banner-mitra .section-body .section-content .btn,
    .section-banner .section-body .btn {
        padding: 13px 28px;
    }
    .section-news .card-headline .headline-top .meta {
        padding: 45px;
    }
    .section-news .card-headline .headline-bottom .latest-news-item .col-md-4 {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    .section-news .card-headline .headline-bottom .latest-news-item img {
        height: 140px;
    }
    .card-latest-news .meta .title,
    .page-data .section-hero .card-total .desc,
    .page-news .card-latest-news .latest-news-item .title {
        line-height: 24px;
        font-size: 16px;
    }
    .section-news .card-latest-news .latest-news-item .meta,
    .card-latest-news .meta,
    .page-news .section-hero .headline-bottom .latest-news-item {
        margin-top: 15px;
    }
    .section-title > div {
        padding-bottom: 8px;
    }
    .section-sosmed .sosmed-list .sosmed-item {
        padding: 12px 28px;
        margin-bottom: 15px;
    }
    .section-sosmed .sosmed-list .sosmed-item .item-icon .iconify {
        font-size: 26px;
    }
    .section-sosmed .sosmed-list .sosmed-item .item-icon div,
    .section-sosmed .sosmed-list .sosmed-item .item-button .iconify,
    .page-detail-article .card-subscribe .subscribe-title {
        font-size: 20px;
    }
    .section-sosmed .sosmed-list .sosmed-item .item-button .iconify {
        display: inline-flex;
    }
    .meta .author img {
        width: 28px;
        height: 28px;
    }
    footer {
        background-position: center 80px;
    }
    footer .footer-title {
        font-size: 16px;
    }

    /* NEWS */
    .page-data .section-hero ul li img {
        height: 38px;
        width: 38px;
    }
    .page-news .section-hero {
        padding-top: 30px;
    }
    .page-news .card-latest-news {
        padding: 0;
    }
    .page-news .card-latest-news .meta {
        margin: 0;
    }
    .page-news .card-latest-news img {
        height: 120px;
    }
    .page-news .section-hero .headline-top .meta .title {
        width: 100%;
    }
    .card-latest-news .meta img,
    .page-detail-article .card-latest-news .meta img {
        width: 22px;
        height: 22px;
    }
    .page-news .section-hero .headline-bottom {
        padding: 0 7.5px 7.5px;
    }

    /* DETAIL NEWS */
    .page-detail-article .section-article .meta .category,
    .page-detail-article .card-subscribe .subscribe-desc {
        font-size: 14px;
    }
    .page-detail-article .card-subscribe .subscribe-desc,
    .page-detail-article .section-news > div {
        margin-bottom: 25px;
    }
    .page-detail-article .card-latest-news .latest-news-item {
        margin-bottom: 0;
    }
    .page-detail-article .card-latest-news div img {
        height: 150px;
    }

    .page-register .section-hero {
        padding-top: 54px;
        background-position: bottom 15px right 0px;
        background-size: unset;
    }
    .page-register .section-form .section-title {
        transform: translate(20%, 0%) rotate(-2deg);
    }
    .page-register .section-form {
        padding: 155px 85px;
    }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    /* HOME */
    .page-home .section-hero .partner {
        margin: 50px 0;
    }
    .section-banner-mitra .section-body .section-content .section-title,
    .section-banner-mitra .section-body .section-content .section-desc {
        width: 100%;
    }
    .section-news .section-title .title,
    .section-title > div,
    footer .footer-body,
    .section-title,
    .page-data .section-hero .card-total .desc,
    .page-news .section-hero .headline-bottom,
    .page-detail-article .section-article .article-tags,
    .page-register .section-hero .hero-left {
        margin-bottom: 25px;
    }
    .section-news .card-headline .headline-top .meta {
        padding: 25px;
    }
    .section-news .card-headline .headline-top .meta .title,
    .page-news .card-recommendation-news .recommendation-news-item .meta .title {
        font-size: 26px;
    }
    .section-news .card-headline .headline-bottom .latest-news-item img {
        height: 120px;
    }
    .section-sosmed .sosmed-list .sosmed-item{
        border-radius: 16px;
    }
    .section-sosmed .sosmed-list {
        padding-right: calc(var(--bs-gutter-x) * .5);
        margin-bottom: 25px;
    }
    .section-sosmed .sosmed-embed {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .section-news .news-item,
    .section-video .video-item,
    .page-detail-article .card-latest-news .latest-news-item {
        margin-bottom: calc(var(--bs-gutter-x) * 1);
    }
    .section-video .section-title {
        padding-bottom: 0;
    }
    .section-banner .section-body .section-content {
        transform: translateX(10%);
        width: 80%;
    }

    /* NEWS */
    .page-news .section-hero .headline-bottom {
        padding: 0 7.5px 15px;
        border-radius: 16px;
    }
    .page-news .card-recommendation-news .recommendation-news-item img {
        height: 350px;
    }

    /* DETAIL NEWS */
    .page-detail-article .section-title > div {
        margin-bottom: 0;
    }

    .page-register .section-hero {
        background-position: bottom 200% right 30%;
    }
    .page-register .section-form {
        padding: 100px 50px;
    }
}
/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .section-news .news-item {
        height: 400px;
    }
    .section-news .news-item .meta {
        padding: 12px;
        margin: 8px;
    }
    .section-news .news-item .meta .meta-title,
    .section-video .video-item .meta .meta-title {
        font-size: 18px;
    }
    .section-news .news-item .meta p {
        font-size: 12px;
    }
    .section-video .video-item img {
        height: 186px;
    }
    .section-video .video-item .meta .author img {
        height: 28px;
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .section-banner-mitra .section-body{
        padding: 38px;
    }
    .section-banner-mitra .section-body img {
        width: 80%;
    }
    .section-news .card-headline .headline-top .meta {
        padding: 25px;
    }
    .section-news .card-headline .headline-top .meta .title,
    .card-latest-news .latest-news-title {
        font-size: 26px;
    }
    .headline-bottom a > div {
        padding: 0;
    }
    .section-news .card-headline .headline-bottom .latest-news-item .col-lg-4 {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    .section-news .card-headline .headline-bottom .latest-news-item .meta .title {
        font-size: 20px;
    }
    .section-news .card-latest-news {
        margin-top: 30px;
    }
    .section-news .section-title .subtitle p {
        width: 100%;
    }

    /* DATA */
    .page-data .section-hero .card-total,
    .page-news .section-hero .headline-top,
    .page-news .card-recommendation-news .recommendation-news-item img {
        margin-bottom: 25px;
    }
    .page-data .section-hero .section-title .subtitle {
        margin: 0;
    }

    /* NEWS */
    .page-news .section-hero .headline-bottom .latest-news-item > div {
        padding: 0 calc(var(--bs-gutter-x) * .5);
    }

    /* DETAIL NEWS */
    .page-detail-article .section-title > div {
        font-size: 22px;
        margin-bottom: 0;
    }
    .page-detail-article .section-news .read-more .btn {
        border-radius: 16px;
        padding: 7px 20px;
        font-size: 14px;
    }

    .page-register .section-form {
        padding: 75px 30px;
    }
    .page-register .section-form .section-title {
        transform: translate(30%, 0%) rotate(-2deg);
        font-size: 26px;
        top: -20px;
    }
    .page-register .section-form .form-item label {
        font-size: 16px;
    }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .swiper.swiper-cards {
        overflow: hidden;
    }
    .page-news .card-recommendation-news .recommendation-news-item .meta .title {
        font-size: 22px;
    }
}