@media (max-width:768px) {

    .navbar {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .navbar.active {

        display: block;

        position: absolute;

        top: 56px;

        left: 0;

        width: 100%;

        background: #fff;

        z-index: 1000;
    }

    .navbar.active .nav-links {

        display: flex;

        flex-direction: column;

    }

    .hero {
        padding: 26px 0 34px;
    }

    .hero h1 {

        font-size: 24px;

        line-height: 1.25;

    }

    .hero p {

        font-size: 14px;

        line-height: 1.5;

        margin-bottom: 20px;

    }

    .primary-btn {
        width: 100%;
    }

    .upload-card {
        padding: 35px 20px;
    }

    .upload-card h3 {
        font-size: 22px;
    }

    .success-actions {

        flex-direction: column;

        gap: 12px;

    }

    .success-actions .convert-btn,
    .success-actions .secondary-btn {

        width: 100%;

        min-width: unset;

    }

    .download-file {

        font-size: 15px;

        padding: 14px;

        word-break: break-word;

        overflow-wrap: anywhere;

    }

    .success-card {

        padding: 24px 18px;

    }

    .success-card h2 {

        font-size: 22px;

    }

    .success-icon {

        font-size: 48px;

        margin-bottom: 10px;

    }

    .logo-text {

        font-size: 20px;

    }

    .logo-icon {

        font-size: 24px;

    }

    .header .container {

        height: 56px;

    }

    .nav-links {

        display: none;

    }

    .menu-btn {

        display: block;

        font-size: 26px;

    }

    /* Password Card */

    .password-card {

        margin-top: 24px;

        padding: 24px 18px;

    }

    .password-card h2 {

        font-size: 22px;

    }

    .password-text {

        font-size: 14px;

    }

    .password-file {

        font-size: 14px;

        padding: 14px;

        word-break: break-word;

        white-space: normal;

    }

    .password-actions {

        flex-direction: column;

        gap: 12px;

    }

    .password-actions .primary-btn,
    .password-actions .secondary-btn {

        width: 100%;

        min-width: unset;

    }

    .password-input-group input {

        font-size: 15px;

    }

    .hero {

        overflow: hidden;

    }

    .password-card {

        max-width: 100%;

    }

    /* ==========================
   Why Choose PathPDF
========================== */

    .features {

        padding: 60px 0;

    }

    .section-title {

        margin-bottom: 36px;

    }

    .section-title h2 {

        font-size: 28px;

    }

    .section-title p {

        font-size: 15px;

        line-height: 1.6;

    }

    .features-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .feature-card {

        padding: 24px 20px;

    }

    .feature-icon {

        font-size: 34px;

    }

    .feature-card h3 {

        font-size: 20px;

    }

    .feature-card p {

        font-size: 14px;

    }

    /* ===================================
   Popular PDF Tools
=================================== */

    .popular-tools {

        padding: 60px 0;

    }

    .tools-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .tool-card {

        padding: 24px 20px;

        border-radius: 16px;

    }

    .tool-icon {

        font-size: 34px;

    }

    .tool-card h3 {

        font-size: 20px;

    }

    .tool-card p {

        font-size: 14px;

        line-height: 1.6;

        margin-bottom: 18px;

    }

    .tool-btn {

        font-size: 15px;

    }

    .how-wrapper {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .how-left {

        order: 1;

        margin-bottom: 20px;

    }

    .how-icon {

        font-size: 90px;

    }

    .how-name {

        margin-top: 12px;

        font-size: 34px;

    }

    .how-right {

        order: 2;

        border-left: none;

        padding-left: 0;

    }

    .step {

        gap: 18px;

    }

    .step-content h3 {

        font-size: 22px;

    }

    .step-content p {

        font-size: 15px;

    }

    /*===================================
        FAQ
===================================*/

    .faq {

        padding: 60px 0;

    }

    .faq-question {

        padding: 18px;

        font-size: 17px;

    }

    .faq-answer {

        padding: 0 18px 18px;

    }

    .faq-answer p {

        font-size: 14px;

    }

    /*===================================
            Footer
===================================*/

    .footer {

        padding: 20px 0 16px;

    }

    .footer-top {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }

    .footer-left {

        justify-content: center;

        flex-wrap: wrap;

    }

    .footer-right {

        justify-content: center;

        flex-wrap: wrap;

        gap: 16px;

    }

    .footer-bottom p {

        font-size: 13px;

    }

    .toast {

        top: 83px;

        left: 16px;
        right: 16px;

        width: auto;
        min-width: auto;
        max-width: none;

        transform: translateY(-20px);

        font-size: 14px;

        padding: 14px 16px;

    }

    .toast.show {

        transform: translateY(0);

    }

    .footer-about {

        display: inline-block;

    }

    .error-code {

        font-size: 72px;

    }

    .error-404 h2 {

        font-size: 28px;

    }

    .error-text {

        font-size: 16px;

    }

}

@media (max-width:480px) {

    .features {

        padding: 48px 0;

    }

    .section-title h2 {

        font-size: 24px;

    }

    .section-title p {

        font-size: 14px;

    }

    .feature-card {

        padding: 22px 18px;

    }

    .feature-icon {

        font-size: 30px;

    }

    .feature-card h3 {

        font-size: 18px;

    }

    .how-icon {

        font-size: 72px;

    }

    .how-name {

        font-size: 28px;

    }

    /* ===================================
   Popular PDF Tools
=================================== */

    .popular-tools {

        padding: 48px 0;

    }

    .tool-card {

        padding: 22px 18px;

    }

    .tool-icon {

        font-size: 30px;

    }

    .tool-card h3 {

        font-size: 18px;

    }

    .tool-card p {

        font-size: 14px;

    }

    .tool-btn {

        font-size: 14px;

    }

    .faq {

        padding: 48px 0;

    }

    .faq-question {

        font-size: 16px;

    }

    .faq-question span {

        font-size: 24px;

    }

}