/* General Mobile Adjustments */
body {
    padding: 0 10px;
}

/* Header - Mobile View */
header {
    flex-wrap: wrap;
    justify-content: center;
}

header .logo {
    text-align: center;
    margin-bottom: 10px;
}

header nav ul {
    flex-direction: column;
    align-items: center;
}

header nav ul li {
    margin: 5px 0;
}

/* Categories - Mobile View */
.category-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
}

/* Forms - Mobile Adjustments */
form {
    padding: 10px;
    margin: 10px;
}

form input, form select, form textarea {
    font-size: 0.9rem;
}

/* Buttons */
button, .btn {
    font-size: 0.9rem;
    padding: 8px 12px;
}

/* Homepage - Mobile Layout Adjustments */
.search-bar {
    width: 100%;
}

.featured-ads, .new-listings {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Floating Button */
.floating-btn {
    padding: 12px 14px;
    font-size: 0.9rem;
}

/* Footer - Mobile View */
footer {
    font-size: 0.9rem;
    padding: 10px 5px;
}

/* Tablet Adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    form {
        max-width: 600px;
    }
}

/* Desktop Adjustments */
@media (min-width: 1025px) {
    /* No major overrides for now; inherits from main styles */
}


/* General responsive image styles */
.responsive-image-container img {
    width: 100%; /* Makes the image take up the full width of its container */
    height: auto; /* Maintains the aspect ratio */
    max-width: 1076px; /* Optional: Limits the image to its original size on larger screens */
    display: block; /* Prevents any extra spacing below the image */
    margin: 0 auto; /* Centers the image */
}

/* Optional: Add margin or padding to the container */
.responsive-image-container {
    margin: 20px auto; /* Adds vertical spacing */
    text-align: center; /* Centers the image horizontally */
}

/* Media query for small screens */
@media (max-width: 768px) {
    .responsive-image-container img {
        max-width: 100%; /* Allows the image to scale down for smaller screens */
    }
}