/* Responsive Styles for Physics with Shyan */

/* Tablet and below */
@media (max-width: 992px) {
    .carousel-item img {
        height: 250px;
        /* Reduced from 300px */
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Padding for page content to avoid overlap with bottom menu */
    body {
        padding-bottom: 70px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .navbar-collapse {
        margin-top: 15px;
        padding-bottom: 20px;
    }

    .navbar-nav {
        text-align: center;
    }

    .nav-item {
        width: 100%;
        margin: 5px 0;
    }

    .nav-link {
        padding: 12px 0 !important;
        font-size: 1.1rem;
    }

    .navbar-nav .btn {
        width: 80%;
        display: block;
        margin: 10px auto !important;
    }

    .navbar-toggler {
        border: none;
        padding: 0;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler-icon {
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 5px 0;
    }

    /* Mobile Navbar Light Theme - Fixed */
    .navbar {
        background: #ffffff !important;
        background-color: #ffffff !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .navbar .nav-link {
        color: #1a1a1a !important;
    }

    .navbar .navbar-brand {
        color: #1a1a1a !important;
    }

    .navbar .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    .navbar-toggler-icon {
        filter: none !important;
        -webkit-filter: none !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: var(--primary-color) !important;
    }

    .feature-item {
        padding: 15px 5px;
        border-radius: 12px;
    }

    .feature-item .feature-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .feature-item p {
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .section-heading {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    .why-us {
        padding: 40px 0;
    }

    .reviews-section {
        padding: 40px 0;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .carousel-item img {
        height: 200px;
        /* Even smaller for mobile */
    }

    .navbar-brand img {
        height: 35px;
    }

    .course-card {
        margin-bottom: 20px;
    }

    .btn {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}