/* Default styles for mobile (0 - 575px) */

    /* Tablet (576px and above) */
    @media (max-width: 576px) {
        .ayur-quiz-card {
            border-radius: 20px;
            padding: 25px 0px;
            position: relative;
            overflow: hidden;
        }

        .ayur-section {
            padding: 40px 10px;
            position: relative;
        }

        .card-media {
            max-height: 300px;
        }

        .ayur-headline h2 {
            font-size: 30px;
        }

        .ayur-cta-banner {
            background: linear-gradient(165deg, var(--primary), #000);
            padding: 40px 0;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .ayur-cta-banner .cta-title {
            font-size: 28px;
            line-height: 1.5;
        }

        .ayur-cta-banner .cta-content {
            font-size: 16px;
            margin-bottom: 26px;
            opacity: 1;
        }

        .ayur-cta-banner .btn-ayur-light {
            background: white;
            color: var(--primary-herbal-green);
            padding: 12px 20px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .ayur-headline {
            text-align: center;
            margin-bottom: 15px;
            position: relative;
        }

        .home-newsletter h2 {
            font-size: 22px;
        }

        .footer-widget h4:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, #ffffff, #d5ffd7);
            border-radius: 3px;
        }

        .copyright p {
            margin: 0;
            font-size: 13px;
            color: #000000;
        }

        .page .col-md-3 h3 {
            font-size: 24px;
            font-weight: 500;
            color: var(--secondary);
            margin-bottom: 20px;
            font-family: var(--font-heading);
            padding-bottom: 16px;
            border-bottom: 2px solid #d4d4d4cc;
        }

        .category-header h3 {
            font-size: 20px;
        }

        .category-header h3 span {
            font-size: 26px;
        }

        .page-banner {
            padding: 40px 0;
            min-height: 225px;
            max-height: 200px;
        }

        .breadcrumb-simple {
            font-size: 12px;
            flex-wrap: wrap;
        }

        .product-page {
            padding: 20px 0;
            border: 1px solid #f1f1f1ad;
        }

        .product-gallery .main-image img {
            width: 100%;
            height: 330px;
            display: block;
            object-fit: cover;
        }

        .rating i {
            color: #FFC72C;
            font-size: 16px;
        }

        .rating span {
            color: #666;
            font-size: 14px;
            margin-left: 8px;
        }

        .current-price {
            font-size: 24px;
        }

        .stock {
            font-size: 12px;
            padding: 5px 8px;
            border-radius: 50px;
            font-weight: 400;
            line-height: 1;
        }

        .product-description p {
            font-size: 16px;
        }

        .tabs-nav {
            flex-wrap: wrap;
            overflow-x: auto;
            padding-bottom: 5px;
        }

        .ayur-register-banner h1 {
            font-size: 28px;
        }

        .ayur-register-container {
            padding: 25px 15px;
            margin: 0;
        }

        .about-content-wrapper {
            padding: 20px 20px;
            margin: 0;
        }

        .about-main-content {
            font-size: 15px;
        }

        .brand-opening {
            padding: 20px;
        }

        .ayur-cart-table tbody tr {
            padding: 15px;
            width: 87vw;
        }

        .ayur-quiz-card .quiz-title {
            font-size: 20px;
            font-weight: 600;
        }

        .ayur-quiz-card .quiz-features li {
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
            font-size: 16px;
            font-weight: 400;
        }

        .ayur-quiz-card p {
            font-size: 16px;
            font-weight: 400;
            color: var(--secondary);
            letter-spacing: .5px;
        }

    }

    /* Desktop (768px and above) */
    @media (min-width: 769px) {
        .ayur-search-form .form-group {
            position: relative;
            margin-bottom: 0;
            width: 92%;
        }

        .ayur-user-actions>li {
            margin-left: 8px;
            position: relative;
        }

        .btn-ayur-login,
        .btn-ayur-register,
        .btn-ayur-profile {
            padding: 5px 15px;
        }

        .hero-slide-item {
            min-height: 495px;
        }

        .ayur-trust-badge {
            width: 48%;
            max-width: 100%;
            border: 1px solid #e0e0e0;
        }

        .ayur-quiz-card {
            padding: 0px 20px;
        }

        .ayur-quiz-card .quiz-title {
            font-size: 26px;
            margin-bottom: 10px;
        }

        .ayur-quiz-card .quiz-features li {
            padding: 10px 0 0px 0;
        }

        .ayur-quiz-card .btn-ayur-quiz {
            padding: 10px 23px;
            font-size: 16px;
        }

        .ayur-section {
            padding: 40px 20px;
            position: relative;
        }

        .ayur-service-card .icon-wrapper {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            font-size: 30px;
        }

        .ayur-service-card h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .ayur-service-card {
            text-align: center;
            padding: 25px 18px;
        }

        .ayur-service-card {
            padding: 25px 18px;
            min-height: 222px;
        }

        .herb-spotlight-content {
            padding: 40px 0 40px 0px;
        }

        .ayur-cta-banner {
            background: linear-gradient(165deg, var(--primary), #000000);
            padding: 45px 0;
        }

        .ayur-cta-banner .cta-title {
            font-size: 30px;
        }

        .ayur-cta-banner .cta-content {
            font-size: 16px;
            margin-bottom: 25px;
            opacity: 0.9;
        }

        .footer-widget h4 {
            font-size: 18px;
            text-transform: capitalize;
        }

        .footer-bottom-links ul li {
            margin-left: 0;
            margin-right: 10px;
        }

        .footer-bottom-links ul li a {
            color: #000000;
            font-size: 10px;
        }

        .footer-bottom {
            padding: 10px 0;
            background: #ffffff;
        }

        .nav-menu {
            display: flex !important;
            flex-wrap: wrap;
            justify-content: center;
        }

        .info-icon {
            width: 60px;
            height: 60px;
            font-size: 24px;
        }

        .info-card h3 {
            font-size: 20px;
        }

        .info-card {
            height: 100%;
        }
    }

    /* Large Desktop (992px and above) */
    @media (min-width: 992px) {
        .nav-menu>li>a {
            padding: 10px 20px;
        }

        .btn-ayur-login,
        .btn-ayur-register,
        .btn-ayur-profile {
            padding: 10px 24px;
        }

        .ayur-user-actions>li {
            margin-left: 15px;
            position: relative;
        }

        .menu-container {
            position: relative;
            padding: 5px 0px;
        }

        .ayur-trust-badge {
            width: 23%;
            max-width: 100%;
            border: 1px solid #e0e0e0;
        }

        .ayur-quiz-card .quiz-title {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .ayur-quiz-card .btn-ayur-quiz {
            padding: 10px 25px;
            font-size: 18px;
        }

        .ayur-service-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .ayur-section {
            padding: 70px 20px;
            position: relative;
        }

        .ayur-cta-banner {
            background: linear-gradient(165deg, var(--primary), #000000);
            padding: 65px 0;
        }

        .ayur-cta-banner .cta-title {
            font-size: 48px;
        }

        .ayur-cta-banner .cta-content {
            font-size: 18px;
            margin-bottom: 25px;
            opacity: 1;
        }

        .footer-bottom-links ul li a {
            color: #000000;
            font-size: 13px;
        }

        .copyright p {
            margin: 0;
            font-size: 14px;
            color: #000000;
        }
    }

    /* Extra Large (1200px and above) */
    @media (min-width: 1200px) {
        /* Styles for extra large screens */
    }