@media (width < 1024px) {
    :root {
        --font-base: 1rem;
    }

    h1, .h1 {
        font-size: 2.5rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
    }
    
    h3, .h3 {
        font-size: 1.75rem;
    }
    
    h4, .h4 {
        font-size: 1.5rem;
    }
    
    h5, .h5 {
        font-size: 1.25rem;
    }
    
    h6, .h6 {
        font-size: 1rem;
    }
    
    p, a, .p {
        font-size: 0.85rem;
    }

    button, .btn {
        font-size: 1rem;
    }

    .wh-me-100 {
        width: 100% !important;
    }
    
    .wh-me-90 {
        width: calc(90% - 10px) !important;
    }
    
    .wh-me-80 {
        width: calc(80% - 10px) !important;
    }
    
    .wh-me-75 {
        width: calc(75% - 10px) !important;
    }
    
    .wh-me-70 {
        width: calc(70% - 10px) !important;
    }
    
    .wh-me-66 {
        width: calc(66.6% - 10px) !important;
    }
    
    .wh-me-60 {
        width: calc(60% - 10px) !important;
    }
    
    .wh-me-50 {
        width: calc(50% - 10px) !important;
    }
    
    .wh-me-40 {
        width: calc(40% - 10px) !important;
    }
    
    .wh-me-33 {
        width: calc(33.3% - 10px) !important;
    }
    
    .wh-me-30 {
        width: calc(30% - 10px) !important;
    }
    
    .wh-me-25 {
        width: calc(25% - 10px) !important;
    }
    
    .wh-me-20 {
        width: calc(20% - 10px) !important;
    }
    
    .wh-me-10 {
        width: calc(10% - 10px) !important;
    }
    
    .public-form-content {
        flex-direction: column;
    }

    .public-form-information {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .public-form-pattern {
        width: 100%;
        height: 100%;
        padding: 50px;
    }

    .public-form-slide p {
        font-size: 40px;
    }

    .public-form-pagination {
        bottom: 75px;
    }

    .main-content {
        width: 100%;
    }

    .vertical-menu {
        width: auto; 
        position: absolute;
        z-index: 1;
        left: -100%;
        border: 1px solid var(--background-color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .vertical-menu.active {
        left: 20px;
    }

    .vertical-menu-logos i {
        display: block;
    }
}

@media (width < 768px) {
    :root {
        --font-base: 0.875rem;
    }

    h1, .h1 {
        font-size: calc(2.5rem * 0.875);
    }

    h2, .h2 {
        font-size: calc(2rem * 0.875);
    }

    h3, .h3 {
        font-size: calc(1.75rem * 0.875);
    }

    h4, .h4 {
        font-size: calc(1.5rem * 0.875);
    }

    h5, .h5 {
        font-size: calc(1.25rem * 0.875);
    }

    h6, .h6 {
        font-size: calc(1rem * 0.875);
    }

    p, a, .p {
        font-size: calc(0.85rem * 0.875);
    }

    button, .btn {
        font-size: calc(1rem * 0.875);
    }

    .wh-sm-100 {
        width: 100% !important;
    }
    
    .wh-sm-90 {
        width: calc(90% - 10px) !important;
    }
    
    .wh-sm-80 {
        width: calc(80% - 10px) !important;
    }
    
    .wh-sm-75 {
        width: calc(75% - 10px) !important;
    }
    
    .wh-sm-70 {
        width: calc(70% - 10px) !important;
    }
    
    .wh-sm-66 {
        width: calc(66.6% - 10px) !important;
    }
    
    .wh-sm-60 {
        width: calc(60% - 10px) !important;
    }
    
    .wh-sm-50 {
        width: calc(50% - 10px) !important;
    }
    
    .wh-sm-40 {
        width: calc(40% - 10px) !important;
    }
    
    .wh-sm-33 {
        width: calc(33.3% - 10px) !important;
    }
    
    .wh-sm-30 {
        width: calc(33.3% - 10px) !important;
    }
    
    .wh-sm-25 {
        width: calc(25% - 10px) !important;
    }
    
    .wh-sm-20 {
        width: calc(20% - 10px) !important;
    }
    
    .wh-sm-10 {
        width: calc(10% - 10px) !important;
    }

    .public-form-body {
        height: 100%;
        min-height: 100vh;
    }

    .public-form-content {
        padding: 16px;
        justify-content: center;
        align-items: center;
    }

    .public-form-information {
        width: 100%;
        padding: 16px;
        align-items: center;
        text-align: center;
    }

    .public-form-pattern {
        display: none;
    }

    .course-slider {
        gap: 0;
    }

    #tabs-content {
        display: block;
    }

    .tab {
        display: none;
    }

    .card.tab-content {
        padding: 0;
    }

    .dropdown {
        display: inline-block;
        background: var(--main-color);
        color: var(--white-color);
        padding: 20px;
        border-radius: 15px;
        cursor: pointer;
    }

    .dropdown-options {
        display: none;
        position: absolute;
        background: var(--main-color);
        color: var(--white-color);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        margin-top: 10px;
        z-index: 10;
        width: calc(100% - 40px);
    }

    .dropdown-options .tab {
        display: block;
        padding: 10px;
        background: var(--main-color);
        color: var(--white-color);
        margin: 0;
        border-bottom: 1px solid var(--white-color);
    }

    .dropdown-options .tab:hover {
        background: var(--main-acent-color);
    }

    .card-course p.card-course-type {
        font-size: calc(var(--font-base) * 0.7);
    }

    .progress {
        font-size: calc(var(--font-base) * 0.6);        
    }
}