/* ========================
   Media Queries in media.css
======================== */

@media (max-width: 992px) {
    .dropdown .dropdown-menu {
        padding: 15px 0px !important;
        transform: translateX(0);
        right: 0;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        right: 0;
    }
}

/* Tablet View (max-width: 768px) */
@media (max-width: 768px) {
    .section {
        padding: 2rem 0; /* Reduce section padding for smaller screens */
    }

    h1, h2, h3 {
        font-size: 1.5rem; /* Adjust font sizes */
    }

    .btn {
        padding: 0.5rem 1rem; /* Adjust button size */
        font-size: 0.9rem;
    }

    .progress-container {
        max-width: 100%; /* Full width for smaller screens */
    }

    .stats {
        gap: 1rem; /* Add space between items */
    }
}

/* Mobile View (max-width: 576px) */
@media (max-width: 576px) {
    .section {
        padding: 1.5rem 0; /* Even smaller padding */
    }

    h1, h2, h3 {
        font-size: 1.25rem; /* Smaller font sizes */
    }

    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .text-center {
        text-align: left; /* Adjust alignment for better mobile UX */
    }
}