/* styles.css */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
}
.navbar {
    margin-bottom: 20px;
}
.card {
    margin: 10px 0;
}
/* Add this to styles.css */
.coupon-image {
    height: 150px;
    object-fit: cover;
    background: #f0f0f0 url('https://www.google.com/s2/favicons?domain=example.com') no-repeat center center;
    background-size: contain;
}
.footer {
    background: #343a40;
    color: white;
    padding: 20px 0;
    text-align: center;
}
.footer a {
    color: #ffc107;
    text-decoration: none;
}
.card-img-top {
    background: url('default-coupon-image.png') center center no-repeat;
    background-size: cover;
}

.navbar-nav .nav-item {
    margin-bottom: 10px; /* Adds space between items on mobile */
}

.navbar-nav .btn {
    white-space: nowrap; /* Prevents text from wrapping */
    width: 100%; /* Ensures full-width buttons on mobile */
    text-align: center; /* Centers the text */
    padding: 8px 12px; /* Adds padding for better touch targets */
     margin-bottom: 10px; /* Adds space between items on mobile */
}

@media (min-width: 768px) {
    .navbar-nav .btn {
        width: auto; /* Reverts to auto width on larger screens */
        margin-right: 10px; /* Adds space between buttons on larger screens */
         margin-bottom: 20px; /* Adds space between items on mobile */
    }
}

.nav-link {
    color: white !important;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 5px; /* Add margin at the bottom to avoid overlap on mobile */
    width: 100%; /* Ensure buttons are full-width on mobile */
}

.mr-2 {
    margin-right: 0.5rem !important;
}

@media (min-width: 992px) {
    .nav-link {
        width: auto; /* Reset width for larger screens */
        margin-bottom: 0; /* Remove bottom margin for desktop */
    }
}