@media (max-width: 768px) {
    .footerContainer {
        padding: 1rem;
        gap: 0.75rem;
        text-align: center;
    }

    .footerLogo {
        font-size: 0.85rem;
    }

    .footerLogo > h2 {
        font-size: 1.2rem;
    }

    .footerLinks {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
    }

    .footerLinks > a {
        font-size: 1.25rem;
    }

    .footerBottom {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .footerContainer {
        padding: 0.75rem;
    }

    .footerLogo > h2 {
        font-size: 1.05rem;
    }
}


@media (max-width: 768px) {
    header {
        padding: 0.75rem;
    }

    .navContainer {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem;
    }

    .mobileToggle {
        display: block;
    }

    .logo h2 {
        font-size: 1.2rem;
    }

    .navLinks {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        & > button {
            width: 100%;
            max-width: 200px;
            font-size: 0.9rem;
        }
    }

    .buttons > button {
        width: 100%;
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    .navLinks > a {
        font-size: 0.95rem;
    }

    .buttons > button {
        max-width: 100%;
    }
}


@media (max-width: 768px) {
    .content > h1 {
        font-size: 1.8rem;
    }

    .content > p {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .line {
        width: 35%;
    }

    .questionContainer {
        padding: 0.75rem;
    }

    .questionContainer > .questionHeader > h1 {
        font-size: 1.2rem;
    }

    .questionContainer > .questionHeader > .line {
        width: 20%;
    }

    .inputs {
        gap: 0.75rem;
    }

    textarea,
    .submitBtn {
        width: 92.5%;
    }

    .question {
        padding: 0.75rem;
        & > h3 {
            font-size: .90rem;
        }
    }

    .icon {
        top: 0.75rem;
        left: 0.75rem;
    }
}

@media (max-width: 480px) {
    .content > h1 {
        font-size: 1.5rem;
    }

    .content > p {
        font-size: 0.95rem;
    }

    .line {
        width: 45%;
    }

    .questionContainer {
        margin-top: 1.5rem;
    }

    input,
    select,
    textarea {
        font-size: 0.95rem;
    }

    .submitBtn {
        font-size: 0.95rem;
    }

    .question {
        padding: 0.5rem;
        & > h3 {
            font-size: 0.85rem;
        }
    }
}

@media (max-width: 480px) {
    .authPage {
        padding: 1rem;
    }

    .loginForm {
        padding: 1rem;
    }

    .field>input {
        font-size: 0.95rem;
    }
}