/* Base button styles */
button {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

/* Gradient Button 1: Sunset Glow */
.sunset-glow {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: white;
}

    .sunset-glow:hover {
        background: linear-gradient(135deg, #feb47b, #ff7e5f);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(255, 126, 95, 0.4);
    }

/* Gradient Button 2: Ocean Breeze */
.ocean-breeze {
    background: linear-gradient(135deg, #00bcd4, #8e24aa);
    color: white;
}

    .ocean-breeze:hover {
        background: linear-gradient(135deg, #8e24aa, #00bcd4);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4);
    }

/* Gradient Button 3: Lavender Dream */
.lavender-dream {
    background: linear-gradient(135deg, #6a82fb, #a78bfa);
    color: white;
}

    .lavender-dream:hover {
        background: linear-gradient(135deg, #a78bfa, #6a82fb);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(106, 130, 251, 0.4);
    }

/* Gradient Button 4: Coral Reef */
.coral-reef {
    background: linear-gradient(135deg, #ff6a00, #ee0979);
    color: white;
}

    .coral-reef:hover {
        background: linear-gradient(135deg, #ee0979, #ff6a00);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(255, 106, 0, 0.4);
    }

/* Gradient Button 5: Minty Fresh */
.minty-fresh {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: white;
}

    .minty-fresh:hover {
        background: linear-gradient(135deg, #0072ff, #00c6ff);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 198, 255, 0.4);
    }