@media screen and (max-width: 1450px) {
    .slider-arrow {
        left: 0;
    }

        .slider-arrow.next {
            left: auto;
            right: 0;
        }
}

@media screen and (max-width: 1199px) {
    body p {
        font-size: 14px;
    }

    .banner-section {
        padding: 40px 0;
    }

    .content-left .tag {
        padding: 8px 20px 8px 45px;
        margin-bottom: 15px;
    }

        .content-left .tag::before {
            left: 15px;
        }

    .content-left h2 {
        font-size: 52px;
        line-height: 60px;
        margin-bottom: 20px;
    }

    .content-left .btn {
        padding: 12px 36px;
        font-size: 18px;
    }

    .content-left ul {
        margin-top: 30px;
        gap: 35px;
    }

    .content-left {
        max-width: 485px;
    }

        .content-left ul li {
            font-size: 38px;
        }

    .main-title h3 {
        font-size: 20px;
    }

    .main-title h2 {
        font-size: 45px;
    }

    .mb-48,
    .tabs-content {
        margin-bottom: 35px;
    }

    .gallery-box .gallery-img {
        height: 280px;
    }

    .gallery-txt h3 a,
    .newest-txt h3 a,
    .rank-detail h3 a {
        font-size: 16px;
    }

    .feed-detail {
        padding: 15px;
    }

    .hotline-img-box {
        margin: 15px;
        height: 162px;
    }

    .hotline-txt {
        padding: 0 15px 15px;
    }

        .hotline-txt p {
            margin-bottom: 20px;
        }

    .hotline-detail li:not(:last-child) {
        padding-right: 5px;
        margin-right: 5px;
    }

    .hotline-bottom .btn-box .btn {
        font-size: 14px;
    }

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

    .event-img-box {
        height: 210px;
    }

    .steps-container {
        gap: 15px;
    }

        .steps-container .step-card {
            padding: 25px;
        }

    .footer-right,
    .footer-content {
        gap: 20px;
    }

        .footer-content .footer-logo .logo {
            padding: 0;
        }

    .banner-section .profile-btn {
        right: 20px;
        bottom: -15px;
        gap: 15px;
    }
}

@media screen and (max-width: 1023px) {
    body .tabs .tab-link {
        min-width: 130px;
    }

    .header,
    .header-right {
        gap: 10px;
    }

        .header .header-left {
            gap: 15px;
        }

    .search-box {
        max-width: 180px;
    }

    .content-left {
        max-width: 365px;
    }

        .content-left h2 {
            font-size: 42px;
            line-height: 50px;
        }

    .progress-text {
        font-size: 14px;
    }

    .progress-card-1 {
        width: 210px;
        padding: 8px 20px;
    }

    .progress-card-2 {
        padding: 8px 12px;
        width: 250px;
    }

    .main-title h3 {
        font-size: 18px;
    }

    .main-title h2 {
        font-size: 30px;
    }

    .btn.btn-border {
        padding: 11px 24px;
    }

    .gallery-section .slider-arrow {
        left: 15px;
    }

        .gallery-section .slider-arrow.next {
            left: auto;
            right: 15px;
        }

    .rank-boxs {
        grid-template-columns: repeat(3, 1fr);
    }

    .platform-boxs .platfrom-center {
        width: 350px;
        padding: 15px;
        gap: 20px;
    }

    .platfrom-center li {
        padding-left: 58px;
    }

        .platfrom-center li h3 {
            font-size: 18px;
        }

        .platfrom-center li::before {
            background-image: url(../images/icons.png);
            background-size: 50px;
            width: 50px;
            height: 50px;
        }

        .platfrom-center li:nth-child(2)::before {
            background-position: 0 -73px;
        }

        .platfrom-center li:nth-child(3)::before {
            background-position: 0 -147px;
        }

        .platfrom-center li:nth-child(4)::before {
            background-position: 0 -221px;
        }

    .steps-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards-container .glass-card {
        padding: 82px 20px 20px;
    }

    .glass-card .card-tag {
        left: -20px;
        top: 20px;
        padding: 10px 15px;
    }

    .glass-card .card-list {
        gap: 22px;
    }

    .across-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .footer-content {
        flex-direction: column;
        gap: 40px;
    }

    .footer-logo ul {
        display: none;
    }

    .footer-content .footer-logo {
        align-items: flex-start;
    }

    .footer-right .grid-2 {
        gap: 15px;
    }

    .platform-boxs {
        flex-wrap: wrap;
    }

    .platfrom-left {
        width: 100%;
    }

    .platform-boxs .platfrom-center,
    .platform-boxs .platfrom-right {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    .section-gapping {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .top-gapping {
        padding-top: 30px;
    }

    .bottom-gapping {
        padding-bottom: 30px;
    }

    .header-right,
    .banner-section .profile-btn {
        display: none;
    }

    .gallery-box .tabs-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .rank-boxs {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    body .tabs .tab-link {
        min-width: 108px;
    }

    .footer-right {
        flex-wrap: wrap;
        flex-direction: column;
    }

        .footer-right .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

    .cards-container,
    .steps-container {
        grid-template-columns: repeat(1, 1fr);
    }

        .cards-container .glass-card {
            padding: 42px 20px 20px;
        }

    .main-title h2 {
        font-size: 18px;
    }

    .glass-card .card-tag {
        left: 40px;
        top: -20px;
        padding: 10px 15px;
        right: 40px;
        margin: auto;
        width: auto;
        text-align: center;
    }

    .across-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .platform-boxs .platfrom-center,
    .platform-boxs .platfrom-right {
        width: 100%;
    }

    .step-card .step-icon {
        width: 56px;
        height: 56px;
    }

    .why-section::before {
        bottom: auto;
        width: 100%;
        height: 50%;
    }

    .gallery-box .gallery-img {
        height: 220px;
    }

    .gallery-section::before {
        top: -10px;
        right: -20px;
        width: 110px;
        height: 100px;
    }

    .gallery-section::after {
        display: none;
    }

    .mb-48,
    .tabs-content {
        margin-bottom: 25px;
    }

    body .tabs {
        width: 100%;
    }

    .tabs-top .tabs-right {
        width: 100%;
        justify-content: space-between;
    }

    .ranking-header {
        flex-wrap: wrap;
    }

        .ranking-header .btn {
            margin-left: auto;
        }

    .hotline-section::before,
    .hotline-section::after {
        left: -32%;
        background-size: 100%;
        width: 180px;
        height: 217px;
    }

    .hotline-section::after {
        left: auto;
        right: -32%;
        rotate: -40deg;
    }

    .slider-arrow {
        left: -15px;
    }

        .slider-arrow.next {
            left: auto;
            right: -15px;
        }

    .rank-img-box .top-tag {
        top: -20px;
        right: -15px;
        width: 40px;
        height: 40px;
    }

    .rank-img-box {
        height: 200px;
    }

    .gallery-txt ul,
    .rank-detail ul {
        gap: 8px;
    }

    .ranking-header .btn {
        display: none;
    }

    .mobile-view {
        display: block;
    }

    body .ranking-tabs.tabs .tab-link,
    body .newest-tabs.tabs .tab-link {
        min-width: 72px;
    }

    footer::before {
        display: none;
    }

    footer {
        padding: 30px 0;
    }

    body {
        font-size: 14px;
    }

    .footer-content {
        gap: 30px;
    }

    .across-box li {
        font-size: 20px;
        padding: 30px;
        gap: 10px;
    }

        .across-box li span {
            font-size: 16px;
        }

    .testimonial-swiper-box .slider-arrow {
        bottom: auto;
        top: 25%;
    }

    .content-left {
        max-width: 345px;
        text-align: center;
        margin: 0 auto;
    }

    .search-box input[type="text"] {
        display: none;
    }

    .search-box {
        max-width: none;
        display: block;
        width: auto;
    }

        .search-box .search-btn {
            width: 40px;
            height: 40px;
            background-color: rgba(143, 149, 163, 0.1);
            border: none;
            border-radius: 8px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 0 4px rgba(255, 255, 255, 0.1) inset;
            flex-shrink: 0;
            position: static;
            margin: 0;
        }

    .content-left ul {
        margin-top: 20px;
        gap: 15px;
    }

        .content-left ul li {
            font-size: 22px;
        }

            .content-left ul li span {
                font-size: 13px;
            }

    .content-left h2 {
        font-size: 32px;
        line-height: 40px;
    }

    .rank-boxs .box .rank-detail {
        padding: 15px 10px 40px;
    }

    .wrapper {
        padding-top: 74px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .steps-container,
    .across-box {
        grid-template-columns: repeat(2, 1fr);
    }
}