* {box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif;}
body {background-color:#f4f4f4;color:#333;line-height:1.6;}
.main-nav {background:#222;padding:15px;text-align:center;position:relative;}
.nav-links a {color:#fff;text-decoration:none;margin:0 15px;font-weight:bold;display:inline-block;}
.nav-links a:hover {color:#28a745;}
.menu-toggle {display:none;color:#fff;font-size:24px;cursor:pointer;text-align:right;font-weight:bold;}
.hero {background:#333;color:#fff;text-align:center;padding:15px 5px;}
.hero h1 {font-size:2.2em;margin-bottom:10px;color:#28a745;}
.btn {display:inline-block;background:#28a745;color:#fff;padding:10px 20px;text-decoration:none;border-radius:4px;margin-top:15px;border:none;cursor:pointer;}
.btn:hover {background:#218838;}
.section-title {text-align:center;margin:30px 0 10px;}
.container {max-width:400px;margin:50px auto;padding:20px;background:#fff;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
input,button,select,textarea {width:100%;padding:10px;margin:10px 0;border-radius:4px;border:1px solid #ccc;}
button {background:#28a745;color:#fff;border:none;cursor:pointer;}
button:hover {background:#218838;}
.header {background:#333;color:#fff;text-align:center;padding:20px;}

/* 4 Items Per Row on Desktop */
.products-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;padding:20px;max-width:1200px;margin:0 auto;}
.card {background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);text-align:center;}

/* Responsive Layouts */
@media(max-width:900px){
    /* Tablet: 2 Items Per Row */
    .products-grid {grid-template-columns:repeat(2, 1fr);} 
}

@media(max-width:600px){
    /* Changes Mobile to 2 Columns so 4 fit on the screen */
    .products-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
        padding: 10px;
    }
    
    /* Slightly reduces padding on mobile to fit the 2 columns nicely */
    .card {
        padding: 15px 10px;
    }
    
    /* Shrinks the image slightly for mobile */
    .card img {
        width: 80px !important; 
        height: 80px !important;
    }

    /* Mobile Menu Styles (Unchanged) */
    .menu-toggle {display:block;}
    .main-nav {padding:15px 20px;}
    .nav-links {display:none; flex-direction:column; background:#333; position:absolute; top:100%; left:0; width:100%; z-index:999;}
    .nav-links.responsive {display:flex;}
    .nav-links a {margin:0; padding:15px; border-top:1px solid #444; display:block;}
}