body { 
/* Page settings */
    background-color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    

/* NAVBAR */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 3%;
        background-color: rgb(255, 255, 255);
        border-bottom: 3px solid #e0e0e0;
        height: 70px;
    }

    /* NAVBAR MOBILE FIX */
    @media (max-width: 768px) {
        .navbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 10px;
            gap: 10px;
        }
    }

    /* Klipp Wi Logo*/
.logo-link {
    display: inline-block;
    padding: 10px 0;
}

.logo-img {
    height: 180px;
    width: auto;
    display: block;
    margin-top: 6px;
}


    /* Navbar Links Settings */
    .nav-links {
        display:flex;
        align-items: center;
        gap: 30px; /* Space between the buttons in the top right of the navbar */
    }

    .nav-links a {
        text-decoration: none;
        color: #333;
        font-family: 'Arial', sans-serif;
        font-size: 15px;
        font-weight: 500;
    }

    /* Blue Sign Up Button */
    .signup-btn {
        background-color: #0e77e8;
        color: white !important; 
        padding: 10px 25px;
        border-radius: 25px;
        display: inline-block;
        font-weight: bold;
    }

    /* Banner Below Navbar */
    .hero-section {
        width: 87%;
        height: 218px;
        margin: auto;
        border-radius: 0 0 15px 15px;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/images/hero-image.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 5px 95px;
        text-align: left;
        color: white;
    }


    .hero-content h1 {
        font-size: 30px;
        font-family: sans-serif;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .hero-content p {
        margin-top: 0;
        padding-top: 0;
        font-size: 25px;
        opacity: 0.9;
    }

    .hero-search {
        margin-top: 25px;
        display: flex;
        width: 1100px;
        max-width: 1100px;
        overflow: hidden;
        background-color: white;
        border-radius: 25px;
        padding: 5px
    }

    .hero-search input {
        flex: 1;
        padding: 15px 20px;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        outline: none;
    }

    .hero-search button {
        padding: 0 25px;
        background-color: #0e77e8;
        color: white;
        border: none;
        flex-shrink: 0;
        border-radius: 25px;
        cursor: pointer;
        font-size: 15px;
        transition: background 0.3s;
    }

    .hero-search button:hover {
        background-color: #004494;
    }

    /* BUTTONS BELOW THE TEXT BAR / CATEGORY BUTTONS */
    
    .category-nav {
        display: flex;
        justify-content: center;
        gap: 55px; /* Space between each icon */
        margin-top: 70px; /* Space between the top of the icon and the search bar */
        flex-wrap: wrap; 
        position: relative;
    }

    /* LINE BETWEEN THE CATEGORIES */

    .category-nav::before {
        content: "";
        position: absolute;
        top: 32px;
        left: 17%;
        right: 15%;
        height: 2px;
        width: 67%;
        background: #bcbcbc;
        z-index: 0;
    }

    .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .category-item:hover {
        transform: translateY(-5px); /* Makes the button pop up slightly when hovered over */
    }

    .category-icon {
        width: 65px;
        height: 65px;
        background-color: #f0f7ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #0e77e8;
        margin-bottom: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        position:relative; 
    }
    
    .category-item span {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }

            /* DEALS SECTION */
    .deals-section {
        width: 100%;
        padding-top: 50px; /* Adds padding above and below the deals */
        background-color: #f8f9fa;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
    }
    
    .section-title {
     max-width: 1300px;
     margin: 100px auto 0 auto;
     text-align: left;
     margin-left: 115px;
    }

    /* "TOP DEALS IN WISCONSIN TEXT CENTER ALIGNED ON MOBILE FIX */
    @media (max-width: 768px) {
        .section-title {
            text-align: center;
            margin-left: 0;
            margin-right: 0;
        }
    }
    
            /* DEAL GRID */
    .deals-grid {
    display: grid;
    /* DEFAULT: 1 column for mobile phones */
    grid-template-columns: 1fr; 
    gap: 15px;
    padding: 15px;
    width: 100%;
    justify-content: center;
}

/* TABLET/DESKTOP VIEW: Snap to 4 columns when screen is wider than 768px */
@media (min-width: 768px) {
    .deals-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1300px;
    }
}

            /* DEAL CARDS */
    .deal-card {
        background: white;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .deal-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15)
    }

            /* Image Settings, Force image to fit card */
    .deal-card img {
        width: 100%;
        height: 110px;
        object-fit: cover;
    }

            /* The Text */

    .deal-card-content {
        padding: 12px;
        text-align: left;
    }
    
    .deal-card-content h3 {
        font-size: 0.95rem;
        margin: 4px 0;
        color: #222;
        font-weight: 600;
        position: relative;
    }

            /* Discount Text */
    .deal-badge {
        color:#0e77e8;
        font-size: 1.2rem;
        margin-bottom: 4px;
        font-weight: 800;
    }

        /* View Deal Button */

    .view-deal-btn {
        width: 100%;
        background-color: #28a745;
        color: white;
        border: none;
        padding: 8px;
        border-radius: 6px;
        font-weight: bold;
        font-size: 0.8rem;
        cursor: pointer;
    }