@media screen and (min-width: 1400px) {
    .container {
        max-width: 1340px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero-content {
        max-width: 650px;
    }
    .hero-content .hero-title {
        font-size: 60px;
    }

    .optimization-content {
        padding-right: calc((100% - 1160px) / 2);
    }
    .optimization-content h2 {
        font-size: 55px;
    }

    .how-work-item-1.how-work-items {
        top: 30px;
        left: 5%;
    }
    .how-work-item-2.how-work-items {
        bottom: -25%;
    }
    .how-work-item-3.how-work-items {
        bottom: 10%;
    }

    /*=========DASHBOARD PAGE RESPONSIVE ========== */

    .chart-label ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chart-box .chart-label {
        width: 100%;
    }
    .chart-box {
        flex-direction: column;
    }
}
/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .action-btn {
        min-width: 125px;
        height: 45px;
        padding: 11px 15px;
        font-size: 18px;
    }

    .navbar-brand {
        font-size: 25px;
    }

    .hero-content {
        max-width: 550px;
    }
    .hero-content .hero-title {
        font-size: 50px;
    }

    .key-features-section {
        padding: 100px 0;
    }
    .key-features-wrapper h1 {
        font-size: 55px;
    }
    .key-features-card .features-icon {
        width: 70px;
        height: 70px;
        padding: 14px;
    }

    .optimization-content {
        padding-right: calc((100% - 960px) / 2);
    }
    .optimization-content h2 {
        font-size: 45px;
    }

    .no-limits-wrapper h2 {
        font-size: 55px;
    }

    .how-work-item-1.how-work-items {
        top: 30px;
        left: 5%;
    }
    .how-work-item-2.how-work-items {
        bottom: -25%;
        left: 25%;
    }
    .how-work-item-3.how-work-items {
        bottom: 10%;
    }

    .how-work-section {
        padding: 100px 0;
    }
    .review-section {
        padding-bottom: 100px;
    }
    .review-wrapper {
        padding-top: 30px;
    }
    .review-slider {
        padding-top: 50px;
    }

    .how-work-wrapper h2 {
        font-size: 55px;
    }
    .review-wrapper h2 {
        font-size: 55px;
    }
    .faq-wrapper h2 {
        font-size: 55px;
    }
    .faq-section {
        padding-bottom: 100px;
    }

    .footer-logo a {
        font-size: 45.374px;
    }
    .footer-social ul li a {
        width: 55px;
        height: 56px;
        font-size: 26px;
    }

    /*=========DASHBOARD PAGE RESPONSIVE ========== */
    .chart-label ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chart-box .chart-label {
        width: 100%;
        padding-top: 10px;
    }
    .chart-box {
        flex-direction: column;
    }
    .compreession-card.d-flex {
        flex-direction: column;
        height: 100%;
        min-height: 400px;
    }

    .section-title h2 {
        font-size: 30px;
    }
    .api-key-table tr th {
        font-size: 22px;
    }

    .api-key-table tbody tr td {
        padding: 15px 20px;
    }
}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .offcanvas {
        background: linear-gradient(90deg, #5bc0be 0%, #60dbd9 100%);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    }
    .navbar-nav {
        gap: 20px;
    }

    .action-btn {
        height: 45px;
    }

    /*======== hero section ===== */

    .hero-wrapper {
        padding-left: 40px;
        flex-direction: column;
    }

    .hero-content {
        max-width: 600px;
        order: 2;
        margin-right: auto;
    }
    .hero-images img {
        max-width: 450px;
    }
    .hero-content .hero-title {
        font-size: 55.307px;
    }

    .key-features-section {
        padding: 80px 0;
    }
    .key-features-wrapper h1 {
        font-size: 55px;
    }
    .key-features-card .features-icon {
        width: 70px;
        height: 70px;
        padding: 14px;
    }

    .optimization-content {
        padding-right: 0;
        width: 100%;
    }
    .optimization-content h2 {
        font-size: 55px;
    }

    .media-optimization-img {
        width: 100%;
    }
    .media-optimization-wrapper {
        flex-direction: column;
        max-width: 720px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .no-limits-wrapper h2 {
        font-size: 44px;
    }
    .no-limits-wrapper {
        padding: 30px 40px;
    }
    .images-comparison-wrapper {
        margin-top: 25px;
    }

    .how-work-card img {
        display: none;
    }
    .how-work-card {
        display: flex;
        flex-wrap: wrap;
        max-width: 720px;
        margin: 0 auto;
        gap: 30px;
        justify-content: center;
        margin-top: 40px;
    }
    .how-work-item-1.how-work-items,
    .how-work-item-2.how-work-items,
    .how-work-item-3.how-work-items {
        position: unset;
    }
    .how-work-section {
        padding: 100px 0;
    }
    .how-work-wrapper h2 {
        font-size: 55px;
    }
    .how-work-wrapper p {
        margin-top: 20px;
    }

    .how-work-section {
        padding: 80px 0;
    }
    .review-section {
        padding-bottom: 100px;
    }
    .review-wrapper {
        padding-top: 30px;
    }
    .review-slider {
        padding-top: 50px;
    }
    .review-wrapper h2 {
        font-size: 50px;
    }

    .faq-wrapper h2 {
        font-size: 55px;
    }
    .faq-section {
        padding-bottom: 100px;
    }
    .faq-accordion-header h4 {
        font-size: 22px;
    }

    .footer-logo a {
        font-size: 45.374px;
    }
    .footer-social ul li a {
        width: 55px;
        height: 56px;
        font-size: 26px;
    }

    /*=========DASHBOARD PAGE RESPONSIVE ========== */

    .sidebar {
        width: 70px;
    }
    .sidebar-nav li a img,
    .sidebar-nav li a svg {
        max-width: 25px;
    }
    .user-sign-btn button svg {
        width: 25px;
    }
    .chart-label ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chart-box .chart-label {
        width: 100%;
        padding-top: 10px;
    }
    .chart-box {
        flex-direction: column;
    }
    .compreession-card.d-flex {
        flex-direction: column;
        height: 100%;
        min-height: 400px;
    }
    .main-content {
        padding: 20px;
        margin-left: 70px;
    }
    .section-title h2 {
        font-size: 30px;
    }
    .date-today h4 {
        font-size: 16px;
    }
    .date-today img {
        max-width: 20px;
    }
    .dashboard-navbar ul {
        gap: 15px;
        min-width: 360px;
    }
    .dashboard-header {
        height: 70px;
        padding-left: 30px;
    }
    .sidebar-nav ul li .nav-active-shape {
        max-width: 115%;
    }

    .section-title h2 {
        font-size: 25px;
    }
    .api-key-table tr th {
        font-size: 16px;
    }
    .api-key-table tbody tr td {
        padding: 15px 20px;
        font-size: 18px;
    }
    .api-key-table tbody tr td span {
        font-size: 16px;
    }
    .api-key-btm p {
        font-size: 16px;
    }
    .api-key-table {
        margin-top: 20px;
    }

    .api-key-btm .add-keys-btn button {
        width: 140px;
        height: 50px;
        font-size: 16px;
    }

    .compression-wrapper {
        padding-bottom: 0;
    }

    .api-key-table tbody tr td {
        padding: 12px 10px;
    }
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (min-width: 576px) and (max-width: 767px) {
    .offcanvas {
        background: linear-gradient(90deg, #5bc0be 0%, #60dbd9 100%);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    }
    .navbar-brand,
    .offcanvas-title {
        font-size: 30px;
    }
    .navbar-nav {
        gap: 20px;
    }
    .action-btn {
        height: 45px;
    }

    /*======== hero section ===== */

    .hero-wrapper {
        padding: 30px 20px;
        flex-direction: column;
    }

    .hero-content {
        max-width: 600px;
        order: 2;
        margin-right: auto;
    }
    .hero-images img {
        max-width: 390px;
    }
    .hero-content .hero-title {
        font-size: 47.307px;
    }

    .key-features-section {
        padding: 70px 0;
    }
    .key-features-wrapper h1 {
        font-size: 40px;
    }
    .key-features-card .features-icon {
        width: 70px;
        height: 70px;
        padding: 14px;
    }

    .optimization-content {
        padding-right: 0;
        width: 100%;
    }
    .optimization-content h2 {
        font-size: 40px;
    }

    .media-optimization-img {
        width: 100%;
    }
    .media-optimization-wrapper {
        flex-direction: column;
        max-width: 540px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .no-limits-wrapper h2 {
        font-size: 40px;
    }
    .no-limits-wrapper {
        padding: 25px 20px;
    }
    .images-comparison-wrapper {
        margin-top: 25px;
    }

    .how-work-card img {
        display: none;
    }
    .how-work-card {
        display: flex;
        flex-wrap: wrap;
        max-width: 720px;
        margin: 0 auto;
        gap: 30px;
        justify-content: center;
        margin-top: 40px;
    }
    .how-work-item-1.how-work-items,
    .how-work-item-2.how-work-items,
    .how-work-item-3.how-work-items {
        position: unset;
    }
    .how-work-section {
        padding: 70px 0;
    }
    .how-work-wrapper h2 {
        font-size: 40px;
    }
    .how-work-wrapper p {
        margin-top: 20px;
    }

    .review-section {
        padding-bottom: 57px;
    }
    .review-wrapper {
        padding-top: 0;
    }
    .review-slider {
        padding-top: 50px;
    }
    .review-wrapper h2 {
        font-size: 40px;
    }
    .review-slider .owl-item.active.center {
        transform: scale(0.9);
    }

    .review-slider .owl-stage-outer {
        padding: 0;
    }

    .faq-wrapper h2 {
        font-size: 40px;
    }
    .faq-section {
        padding-bottom: 60px;
    }
    .faq-accordion-header h4 {
        font-size: 20px;
    }
    .faq-accordion-items {
        padding: 25px 20px;
    }

    .footer-logo a {
        font-size: 40px;
    }
    .footer-social ul li a {
        width: 55px;
        height: 56px;
        font-size: 26px;
    }

    /*=========DASHBOARD PAGE RESPONSIVE ========== */

    .sidebar {
        width: 90px;
        left: -100%;
        transition: 0.3s;
        z-index: 999;
    }
    .sidebar-nav li a img,
    .sidebar-nav li a svg {
        max-width: 25px;
    }
    .user-sign-btn button svg {
        width: 25px;
    }
    .chart-label ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chart-box .chart-label {
        width: 100%;
        padding-top: 10px;
    }
    .chart-box {
        flex-direction: column;
    }
    .compreession-card.d-flex {
        flex-direction: column;
        height: 100%;
        min-height: 400px;
    }
    .main-content {
        padding: 20px;
        margin-left: 0;
    }
    .section-title h2 {
        font-size: 30px;
    }
    .date-today h4 {
        font-size: 16px;
    }
    .date-today img {
        max-width: 20px;
    }
    .dashboard-navbar ul {
        gap: 15px;
        min-width: 360px;
    }
    .dashboard-header {
        height: 60px;
        padding: 0 15px;
    }
    .sidebar-nav ul li .nav-active-shape {
        max-width: 115%;
    }

    .section-title h2 {
        font-size: 25px;
    }
    .api-key-table tr th {
        font-size: 16px;
    }
    .api-key-table tbody tr td {
        padding: 15px 20px;
        font-size: 16px;
    }
    .api-key-table tbody tr td span {
        font-size: 16px;
        text-wrap: wrap;
        max-width: 200px;
        display: block;
        white-space: wrap;
        line-break: anywhere;
    }
    .api-key-btm p {
        font-size: 16px;
    }
    .api-key-table {
        margin-top: 20px;
    }

    .api-key-btm .add-keys-btn button {
        width: 140px;
        height: 50px;
        font-size: 16px;
    }

    .compression-wrapper {
        padding-bottom: 0;
    }

    .sidebar.sidenav-collape {
        left: 0;
    }
    .dashboard-body.overlay::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.2);
    }

    .api-key-table tbody tr td {
        padding: 12px 10px;
    }
}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 576px) {
    .offcanvas {
        background: linear-gradient(90deg, #5bc0be 0%, #60dbd9 100%);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    }
    .navbar-brand,
    .offcanvas-title {
        font-size: 30px;
    }
    .navbar-nav {
        gap: 20px;
    }
    .action-btn {
        height: 45px;
        max-width: 100%;
        min-width: auto;
        flex: 1 0 0;
    }

    /*======== hero section ===== */

    .hero-wrapper {
        padding: 30px 20px;
        flex-direction: column;
    }

    .hero-content {
        max-width: 600px;
        order: 2;
        margin-right: auto;
    }
    .hero-images img {
        max-width: 250px;
        width: 100%;
    }
    .hero-content .hero-title {
        font-size: 30.307px;
    }

    .hero-content p {
        font-size: 16px;
        line-height: normal;
    }
    .user-rating .user-text h3 {
        font-size: 18.25px;
        line-height: normal;
    }
    .hero-content .hero-title span img {
        position: absolute;
        right: 95%;
        top: -11px;
        width: 30px;
    }

    .key-features-section {
        padding: 40px 0;
    }
    .key-features-wrapper h1 {
        font-size: 30px;
    }
    .key-features-card .features-icon {
        width: 70px;
        height: 70px;
        padding: 14px;
    }

    .optimization-content {
        padding-right: 0;
        width: 100%;
    }
    .optimization-content h2 {
        font-size: 30px;
    }

    .media-optimization-img {
        width: 100%;
    }
    .media-optimization-wrapper {
        flex-direction: column;
        max-width: 540px;
        margin: 0 auto;
        padding: 30px 20px;
        padding-bottom: 0;
    }
    .optimization-content p {
        font-size: 16px;
        line-height: 20px;
    }

    .no-limits-wrapper h2 {
        font-size: 30px;
    }
    .no-limits-wrapper {
        padding: 25px 20px;
    }
    .images-comparison-wrapper {
        margin-top: 25px;
    }
    .no-limits-wrapper p {
        font-size: 16px;
        line-height: 25px;
    }

    .how-work-card img {
        display: none;
    }
    .how-work-card {
        display: flex;
        flex-wrap: wrap;
        max-width: 720px;
        margin: 0 auto;
        gap: 30px;
        justify-content: center;
        margin-top: 40px;
    }
    .how-work-item-1.how-work-items,
    .how-work-item-2.how-work-items,
    .how-work-item-3.how-work-items {
        position: unset;
    }
    .how-work-section {
        padding: 40px 0;
    }
    .how-work-wrapper h2 {
        font-size: 30px;
    }
    .how-work-wrapper p {
        margin-top: 15px;
        font-size: 16px;
    }

    .review-section {
        padding-bottom: 30px;
    }
    .review-wrapper {
        padding-top: 0;
    }
    .review-slider {
        padding-top: 30px;
    }
    .review-wrapper h2 {
        font-size: 30px;
    }
    .review-slider .owl-item.active.center {
        transform: scale(0.9);
    }

    .review-slider .owl-stage-outer {
        padding: 0;
    }

    .faq-wrapper h2 {
        font-size: 30px;
    }
    .faq-section {
        padding-bottom: 30px;
    }
    .faq-accordion-header h4 {
        font-size: 18px;
    }
    .faq-accordion-items {
        padding: 25px 20px;
    }
    .faq-accordion-wrapper {
        gap: 15px;
        padding-top: 25px;
    }
    .faq-accordion-content p {
        font-size: 16px;
        line-height: 25px;
    }

    .site-footer {
        padding-top: 30px;
    }
    .footer-logo a {
        font-size: 35px;
    }
    .footer-social ul li a {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    /*=========DASHBOARD PAGE RESPONSIVE ========== */

    .sidebar {
        width: 90px;
        left: -100%;
        transition: 0.3s;
        z-index: 999;
    }
    .sidebar-nav li a img,
    .sidebar-nav li a svg {
        max-width: 25px;
    }
    .user-sign-btn button svg {
        width: 25px;
    }
    .chart-label ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chart-box .chart-label {
        width: 100%;
        padding-top: 10px;
    }
    .chart-box {
        flex-direction: column;
    }
    .compreession-card.d-flex {
        flex-direction: column;
        height: 100%;
        min-height: 400px;
    }
    .main-content {
        padding: 20px;
        margin-left: 0;
    }
    .section-title h2 {
        font-size: 30px;
    }
    .date-today h4 {
        font-size: 16px;
    }
    .date-today img {
        max-width: 20px;
    }
    .dashboard-navbar ul {
        gap: 5px;
        min-width: 100%;
    }
    .dashboard-header {
        height: 50px;
        padding: 0px 10px;
    }
    .sidebar-nav ul li .nav-active-shape {
        max-width: 115%;
    }

    .section-title h2 {
        font-size: 22px;
    }
    .api-key-table tr th {
        font-size: 14px;
        padding-bottom: 10px;
    }
    .api-key-table tbody tr td {
        padding: 10px 15px;
        font-size: 15px;
    }
    .api-key-table tbody tr td span {
        font-size: 16px;
    }
    .api-key-btm p {
        font-size: 16px;
    }
    .api-key-table {
        margin-top: 20px;
    }

    .api-key-btm .add-keys-btn button {
        width: 140px;
        height: 50px;
        font-size: 16px;
    }

    .compression-wrapper {
        padding-bottom: 0;
    }

    .sidebar.sidenav-collape {
        left: 0;
    }
    .dashboard-body.overlay::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.2);
    }
    .compression-section {
        padding: 25px 0;
    }
    .dashboard-navbar li a {
        font-size: 14px;
        padding: 5px 8px;
    }
    .menu-toggle-btn svg {
        width: 30px;
        height: 30px;
    }

    .api-keys-section {
        padding: 25px 0;
    }

    .api-key-btm {
        flex-direction: column;
        gap: 20px;
    }
    .compreession-card h4 {
        font-size: 20px;
    }

    .api-key-table tbody tr td {
        padding: 12px 10px;
    }
    .api-key-table tbody tr td span {
        font-size: 14px;
        text-wrap: wrap;
        max-width: 200px;
        display: block;
        white-space: wrap;
        line-break: anywhere;
    }
    .api-key-table tr th:nth-of-type(2) {
        display: none;
    }
    .api-key-table tbody tr td:nth-child(2) {
        display: none;
    }
    .api-key-table tbody tr td .active {
        font-size: 14px;
        padding: 5px 13px;
    }
}