/* Responsive Design for Index Page */

/* Medium Screens (Tablets) */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 48px;
    }

    .hero-content p {
        font-size: 24px;
    }

    .service-cards {
        flex-direction: row; /* Ensure cards stay in a row on medium screens */
        justify-content: space-between; /* Space out the cards evenly */
    }

    .service-card {
        flex: 0 1 48%; /* Ensure each card takes up almost half of the container */
        max-width: 48%; /* Prevent the cards from exceeding 48% width */
        margin-bottom: 20px;
    }

    .service-card img {
        width: 100%; /* Ensure the image takes up full width of the card */
        height: auto;
        margin-bottom: 15px;
    }

    .service-card .cart-control {
        width: 100%; /* Ensure the cart control takes up full width of the card */
    }

    .contact-cards {
        gap: 20px; /* Reduce space between the QR code cards */
    }
}

/* Small Screens (Mobile) */
@media (max-width: 480px) {
    nav ul li.home,
    nav ul li.buy {
        display: none; /* Hide Home and Buy buttons */
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 20px;
    }

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

    .service-cards {
        flex-direction: column; /* Stack the service cards vertically on mobile screens */
        gap: 20px;
    }

    .service-card {
        width: 100%; /* Ensure each card takes up full width on mobile */
        max-width: 100%; /* Prevent cards from exceeding full width */
        margin-bottom: 20px;
        text-align: center; /* Center the text and buttons for better appearance */
    }

    .service-card img {
        width: 100%; /* Ensure the image takes up full width of the card */
        height: auto;
        margin-bottom: 15px; /* Consistent spacing below the image */
    }

    .service-card .cart-control {
        display: flex;
        justify-content: center; /* Center the cart control within the card */
        align-items: center;
        width: 100%;
    }

    .quantity-input {
        width: 50px; /* Ensure the quantity input box has a reasonable width */
        margin: 0 5px; /* Ensure the spacing between buttons and input is consistent */
    }

    .contact-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-card img {
        width: 100%;
        max-width: 150px; /* Set a max-width for the QR code images */
        height: auto; /* Maintain the aspect ratio */
    }

    .contact-cards {
        display: flex;
        justify-content: space-between;
        gap: 10px; /* Reduce the space between the contact cards */
        padding: 0 10px;
    }

    .contact-card p {
        font-size: 14px;
        text-align: center;
        margin-top: 10px; /* Space between the image and the text */
    }


    #faq h2,
    #contact h2,
    #about h2 {
        font-size: 28px; /* Further reduce section heading size */
    }

    .faq-item h3 {
        font-size: 20px; /* Reduce FAQ question font size */
    }

    .faq-item p {
        font-size: 16px; /* Reduce FAQ answer font size */
    }

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

    .service-card p {
        font-size: 14px;
    }

    .feature-text h3 {
        font-size: 28px;
    }

    .feature-text p {
        font-size: 15px;
    }

    /* Ensure full-width content */
    .hero-container,
    .service-card,
    .feature,
    .contact-card {
        width: 100%; /* Make sure these elements take full width */
    }

    .service-cards,
    .contact-cards {
        padding: 0; /* Remove extra padding to align content properly */
    }

    header .container {
        flex-direction: row; /* Keep items in a single row */
        justify-content: space-between; /* Ensure space between logo and nav */
        align-items: center;
    }

    header .logo-text {
        font-size: 6vw; /* Scale down text size further for very small screens */
    }

    nav ul li {
        font-size: 3vw; /* Further scale down navigation text */
    }
    .feature {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .feature-img img {
        width: 100%; /* Full width for small screens */
        height: auto;
        max-height: 200px; /* Set a maximum height to maintain uniformity */
        object-fit: cover;
    }

    .feature-text {
        width: 100%; /* Full width for small screens */
        text-align: center;
        padding: 10px 0;
    }
}

/* Features and Contact Sections - Retain Original Format */
@media (max-width: 768px) {
    .feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .feature-img img {
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .contact-card {
        text-align: center;
        margin-bottom: 20px;
    }

    .contact-card img {
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
}