body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
	background-color: #51A2FF;
}

.w3-bar {
    background-color: #333; /* Dark navigation bar */
}

.w3-button:hover {
    background-color: #555; /* Hover effect */
}

.gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Two equal columns, like assigned frames */
    gap: 20px;  /* Space between items (adjust if you want more/less) */
    max-width: 1200px;  /* Optional: Caps overall width for centering on large screens */
    margin: 0 auto;  /* Centers the grid */
}

@media screen and (max-width: 600px) {  /* Stack to one column on small screens */
    .shop-grid {
        grid-template-columns: 1fr;  /* Single column for mobile */
    }
}

@media screen and (max-width: 600px) {
    .slideshow-container {
        height: 300px;  /* Smaller on mobile */
    }
}

.shop-item {
    border: 1px solid #ddd;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shop-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.shop-item img {
    width: 100%;
    height: auto;  /* Ensures full view without cropping */
    margin-bottom: 10px;  /* Space below image */
}

.shop-item button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.shop-item button:hover {
    background-color: #45a049;
}

/* Force two-per-row on medium+ screens */
@media screen and (min-width: 601px) {
    .w3-half {
        width: 50% !important;  /* Locks to 50% to prevent stacking */
        float: left;  /* Ensures side-by-side float */
    }
    .w3-row-padding:after {  /* Clear floats after row */
        content: "";
        display: table;
        clear: both;
    }
}

form {
    max-width: 600px;
    margin: 0 auto;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

footer a {
    color: white;  /* Icon color */
    margin: 0 15px;  /* Space between icons */
    font-size: 24px;  /* Larger size */
    text-decoration: none;  /* No underline */
}

footer a:hover {
    color: #ddd;  /* Hover color change */
}

.slideshow-container {
    position: relative;  /* Allows absolute positioning if needed later */
    height: 500px;  /* Fixed height - adjust this (e.g., 400px or 60vh for viewport-relative) */
    width: 100%;  /* Full width */
    overflow: hidden;  /* Hides any overflow from images */
    margin: 0 auto;  /* Centers if needed */
}

.mySlides {
    width: 100%;
    height: 100%;  /* Fills the container */
    object-fit: contain;  /* Full image view, no cropping, with possible empty space */
    transition: opacity 2s ease-in-out;  /* Smooth fade transition */
    position: absolute;  /* Overlap images for fade effect */
    top: 0;
    left: 0;
}