@media screen and (max-width: 767px) {

    body {
        overflow-x: hidden;
        font-family: 'Inter';
    }

    .image-optimize-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        gap: 30px;
    }

    .image-optimize-sec {
        width: auto;
        flex-wrap: wrap;
        max-width: 1100px;
    }

    .image-optimize-middle-col {
        width: 100%;
        gap: 15px 30px;
    }

    .stat-value {
        font-size: 28px;
    }

    .stat-label {
        font-size: 14px;
        line-height: 2;
    }

    .image-optimize-text p {
        padding-top: 18px;
    }

    .image-optimize-last-col {
        width: 100%;
        padding: 20px 24px;
        margin-left: 0;
    }

    .status-label,
    .remaining-label {
        font-size: 22px;
    }

    .plan-badge {
        font-size: 14px;
    }

    .plan-description {
        font-size: 14px;
    }

    .automatic-compression-cover {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .compression-heading,
    .compress-img-text {
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
    }

    .compress-img-text {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .compression-heading {
        max-width: 100%;
    }

    .compression-heading p {
        font-size: 13px;
    }

    .compression-heading h1 {
        font-size: 18px;
        line-height: 2;
    }

    .compress-img-text p {
        font-size: 14px;
    }

    /* Compression Preset */
    .compression-preset-sec {
        padding: 0;
        margin-top: 20px;
    }

    .preset-title {
        font-size: 18px;
    }

    .preset-buttons {
        flex-direction: column;
    }

    .preset-btn {
        padding: 18px 30px;
        font-size: 16px;
        border-radius: 0;
    }

    .preset-btn:first-child {
        border-radius: 6px 6px 0 0;
        border-right: 1px solid #AAAAAA;
        border-bottom: none;
    }

    .preset-btn:last-child {
        border-radius: 0 0 6px 6px;
        border-left: 1px solid #AAAAAA;
        border-top: none;
    }

    .preset-btn:nth-child(2) {
        border: 1px solid #AAAAAA;
    }

    .preset-btn.active:first-child {
        border-color: #2E2E2E;
    }

    .preset-btn.active:last-child {
        border-color: #2E2E2E;
    }

    /* Optimization */
    .optimization-sec {
        padding: 0;
        margin-top: 20px;
    }

    .optimization-title {
        font-size: 18px;
    }

    .optimization-subtitle {
        font-size: 14px;
    }

    .optimization-buttons {
        flex-direction: column;
    }

    .optimization-btn {
        padding: 18px 30px;
        font-size: 16px;
    }

    .optimization-btn:first-child {
        border-radius: 6px 6px 0 0;
        border-right: 1px solid #AAAAAA;
        border-bottom: none;
    }

    .optimization-btn:last-child {
        border-radius: 0 0 6px 6px;
        border-left: 1px solid #AAAAAA;
    }

    /* Bulk Compress */
    .bulk-compress-sec {
        padding: 30px 0 40px 0;
    }

    .bulk-compress-btn {
        width: 90%;
        max-width: 300px;
        font-size: 18px;
    }

    .bulk-progress-bar {
        width: 100%;
    }

    .html5-progress-bar progress {
        width: 69%;
    }

    .html5-progress-bar .progress-value {
        padding: 0px 8px 0 36px;
    }

    .progress-bar-cover {
        padding: 0 0;
        flex-direction: column;
        justify-content: center;
    }

    .progress-bar-text {
        padding-bottom: 8px;
    }

    /* Footer */
    .footer-sec {
        padding: 15px 10px 30px 10px;
    }

    .footer-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .container {
        padding: 0 12px;
    }

    .header-brand{
        font-size: 18px;
        line-height: 20px;
    }

    .settings-card {
        padding: 20px 15px 25px 15px;
        margin-top: 20px;
    }

    .bulk-card {
        padding: 40px 0;
        margin-top: 16px;
    }

    .bulk-compress-icon {
        width: 70px;
        height: 50px;
    }
}



@media only screen and (min-width : 280px) and (max-width : 460px) {

    .image-optimize-middle-col {
        width: 100%;
        justify-content: center;
        gap: 15px 20px;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
        line-height: 1.8;
    }

    .image-optimize-last-col {
        width: auto;
        padding: 18px 20px;
        margin: 0;
    }

    .status-label,
    .remaining-label {
        font-size: 18px;
    }

    .automatic-compression-cover {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .container {
        padding: 0 12px;
    }

    .image-optimize-sec {
        width: auto;
        flex-wrap: wrap;
        max-width: 1100px;
    }

    .compression-heading p {
        max-width: 100%;
        font-size: 13px;
    }

    .compression-heading h1 {
        font-size: 18px;
        line-height: 2;
        padding-bottom: 4px;
    }

    .compress-img-text p {
        font-size: 13px;
    }

    .preset-btn {
        padding: 16px 20px;
        font-size: 14px;
    }

    .optimization-btn {
        padding: 16px 20px;
        font-size: 14px;
    }

    .bulk-compress-btn {
        width: 95%;
        font-size: 16px;
        height: 50px;
    }

    .progress-bar-wrapper {
        justify-content: center;
        flex-direction: column;
    }

    .html5-progress-bar progress {
        width: 51%;
    }

    .html5-progress-bar .progress-value {
        padding: 0px 8px 5px 15px;
    }

    .bulk-progress-bar {
        height: 105px;
    }

    .footer-text {
        font-size: 13px;
    }

    div[role="progressbar"] {
        width: 150px;
        height: 150px;
        font-size: 36px;
    }
}


@media only screen and (min-width : 768px) and (max-width : 1023px) {

    .image-optimize-sec {
        width: auto;
    }

    .image-optimize-content {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 35px 20px;
        gap: 25px;
    }

    .image-optimize-middle-col {
        width: auto;
        gap: 15px 40px;
    }

    .image-optimize-last-col {
        width: auto;
        margin-left: 0;
    }

    .automatic-compression-cover {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .compress-img-text {
        max-width: 305px;
    }

    .compression-heading {
        max-width: 640px;
    }

    .image-optimize-text p {
        padding-top: 20px;
    }

    .bulk-progress-bar {
        width: 70%;
    }

    .bulk-compress-btn {
        width: 350px;
    }

    .preset-buttons,
    .optimization-buttons {
        flex-wrap: wrap;
    }

    .preset-btn,
    .optimization-btn {
        padding: 18px 40px;
    }
}


@media only screen and (min-width : 1024px) and (max-width : 1260px) {

    .automatic-compression-cover {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .compression-heading {
        max-width: 100%;
    }

    .compress-img-text {
        max-width: 400px;
    }

    .image-optimize-sec {
        width: 100%;
    }

    .image-optimize-content {
        padding: 20px 20px;
        gap: 20px;
        justify-content: space-between;
    }

    .image-optimize-middle-col {
        gap: 10px 30px;
    }

    .stat-value {
        font-size: 32px;
    }

    .stat-label {
        font-size: 16px;
    }

    .image-optimize-col {
        width: auto;
    }

    .image-optimize-last-col {
        width: auto;
        min-width: 250px;
        padding: 18px 25px;
    }

    .status-label,
    .remaining-label {
        font-size: 24px;
    }

    .bulk-progress-bar {
        width: 100%;
    }

    div[role="progressbar"] {
        width: 160px;
        height: 160px;
        font-size: 40px;
    }
}


@media only screen and (min-width : 1261px) and (max-width : 1480px) {

}


@media only screen and (min-width : 1481px) and (max-width : 1600px) {

}