@media (max-width: 1199.98px) {
    .homepage .headline {
        font-size: 3.5rem;
    }

    .homepage .title {
        font-size: 2.5rem;
        font-family: var(--urbanist-semibold);
    }

    .homepage .detail.detail-blog .title-detail {
        font-size: 2.75rem;
        font-family: var(--urbanist-semibold);
    }

    .homepage .page-blog .title {
        font-size: 2rem;
    }

    .homepage section.content-portfolio .subtitle {
        font-size: 2.25rem;
    }

    .homepage .testimonial .card-testimonial .testimonial-content {
        width: 70%;
    }

    .homepage .cta {
        padding: 200px 62px 62px 62px;
    }

    .homepage .tutorial .card-tutorial .tutorial-thumbnail {
        width: 200px;
        min-height: 240px;
    }

    .homepage .blog .card-blog-small .blog-thumbnail {
        width: 140px;
        min-height: 140px;
    }

    .homepage .page-blog .card-blog .blog-content > .wrapper {
        margin-bottom: 12px;
    }

    .homepage .detail.detail-blog .blog-content img {
        height: 360px;
    }

    .homepage .detail.detail-tutorial .tutorial-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .homepage .detail.detail-tutorial .subtitle {
        font-size: 2.375rem;
    }

    .homepage section.detail-portfolio .portfolio-thumbnails img {
        width: 100%;
        aspect-ratio: 3/1.8;
    }

    .homepage section.content-portfolio .content-portfolio-header {
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .homepage .tutorial .content-gap .col:first-child,
    .homepage .tutorial .content-gap .col:nth-child(2) {
        margin-top: 0 !important;
    }
}

@media (max-width: 991.98px) {
    main.dashboard {
        margin-left: 0;
        padding: 24px 32px 32px 32px;
    }

    .sidebar {
        left: -260px !important;
        transition: 800ms !important;
        z-index: 9999;
    }

    .sidebar.active {
        transition: 800ms !important;
        left: 0 !important;
        z-index: 9999;
    }

    .homepage .section-gap {
        margin-top: 82px;
    }

    .homepage .section-half-gap {
        margin-top: 62px;
    }

    .homepage .content-gap {
        margin-top: 46px;
    }

    .homepage .page-blog .content-gap {
        margin-top: 26px;
    }

    .homepage .headline {
        font-size: 3rem;
        font-family: var(--urbanist-semibold);
    }

    .homepage .title {
        font-size: 2.25rem;
        line-height: 132%;
        margin-bottom: 16px;
    }

    .homepage .detail.detail-blog .title-detail {
        font-size: 2.5rem;
        line-height: 132%;
    }

    .homepage .title.value {
        font-size: 2.75rem;
    }

    .homepage .hero .description {
        width: 100%;
    }

    .homepage .gallery .title,
    .homepage .testimonial h2.title,
    .homepage .section-tutorial h2.title,
    .homepage .section-blog h2.title,
    .homepage .service h2.title,
    .homepage .portfolio h2.title,
    .homepage .contact h2.title,
    .homepage .page-blog h2.title {
        margin-bottom: 16px !important;
    }

    .homepage .testimonial .card-testimonial .testimonial-image {
        width: 160px;
        height: 230px;
    }

    .homepage .testimonial .card-testimonial .quote-icon {
        width: 52px;
    }

    .homepage .cta {
        padding: 160px 32px 32px 32px;
    }

    .homepage .cta .cta-content {
        gap: 32px;
    }

    .homepage .tutorial .card-tutorial .tutorial-thumbnail {
        width: 280px;
    }

    .homepage .tutorial .content-gap .col:first-child {
        margin-top: 0 !important;
    }

    .homepage .blog .card-blog-small .blog-thumbnail {
        width: 280px;
    }

    .homepage .blog .card-blog .blog-thumbnail {
        width: 100%;
        height: 260px;
    }

    footer.footer .description {
        width: 80%;
    }

    .homepage .content-tutorial .content-silabus,
    .homepage .content-tutorial .content-tech {
        width: 50%;
    }

    .homepage .popup-copy.popup-blog {
        left: -50%;
    }
}

@media (max-width: 575.98px) {
    main.dashboard {
        padding: 20px;
    }

    main.dashboard .dashboard-content {
        margin-top: 26px;
    }

    .table-mobile {
        display: none !important;
    }

    .homepage .hero {
        padding-top: 56px;
        padding-bottom: 0;
    }

    .homepage .content-gap {
        margin-top: 36px;
    }

    .homepage .about .wrapper,
    .homepage .hero .wrapper-value {
        padding: 16px 0;
        background-color: rgba(var(--dark-color), 1);
        border-radius: 6px;
        border: var(--border-style);
        width: 100%;
    }

    .homepage .hero .wrapper-value p {
        margin: 0;
    }

    .homepage .service,
    .homepage .value {
        margin-top: 82px;
    }

    .homepage .service .card-content-3 .description {
        -webkit-line-clamp: 2;
    }

    .homepage .cta {
        padding: 160px 12px 12px 12px;
    }

    .homepage .tutorial .card-tutorial .tutorial-content {
        border-left: none;
    }

    .homepage .page-blog .card-blog .blog-content .title,
    .homepage .portfolio .card-portfolio .portfolio-content .title,
    .homepage .blog .card-blog .blog-content .title,
    .homepage .blog .card-blog-small .blog-content .title,
    .homepage .tutorial .card-tutorial .tutorial-content .title {
        font-size: 1rem;
        font-family: var(--urbanist-medium);
    }

    .homepage .page-blog .card-blog .blog-content,
    .homepage .portfolio .card-portfolio .portfolio-content,
    .homepage .blog .card-blog-small .blog-content,
    .homepage .tutorial .card-tutorial .tutorial-content {
        padding: 14px 12px;
    }

    .homepage .detail.detail-blog .blog-content img {
        height: 300px;
    }

    footer.footer .description {
        width: 100%;
    }

    .homepage .detail {
        margin-top: 52px;
    }

    .homepage .detail.detail-blog .title-detail {
        font-size: 2.5rem;
        line-height: 116%;
    }

    .homepage .detail.detail-blog .button-small:first-child {
        width: fit-content;
        margin-bottom: 12px;
    }

    .homepage .detail.detail-blog .title-detail,
    .homepage .detail.detail-blog .detail-header,
    .homepage .detail.detail-blog .blog-content img {
        margin-bottom: 36px;
    }

    .homepage .detail.detail-tutorial .subtitle {
        margin: 20px 0 20px 0;
    }

    .homepage .content-tutorial .content-silabus,
    .homepage .content-tutorial .content-tech {
        width: 100%;
    }

    .homepage .content-tutorial .card-content,
    .homepage .content-tutorial .card-content.content-silabus,
    .homepage .content-tutorial .card-content.content-tech {
        padding: 18px 14px;
    }

    .modal .modal-content {
        padding: 32px;
    }
}