/* General Styles */
body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fcecc9; /* Main background */
    color: #65573E; /* Main text */
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll caused by icons */
}

header {
    background: #3E3228; /* Choc brown */
    color: white;
    padding: 10px 0; /*gap at top*/
    text-align: center;
}

header .logo img {
    width: 80px; /* Ensure consistency with mainstyle.css */
    height: 80px; /* Adjust to match mainstyle.css */
    display: block;
    margin: 0 auto;
}

header h1 {
    font-family: "Playwrite CU", cursive;
    font-size: 1.5em;
    margin: 5px 0 5px;
}

header .tagline {
    font-size: 0.8 em;
    font-weight: 300;
    margin: 0;
}

nav {
    background: #fcb0b3;
    color: white;
    text-align: center;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

hr {
    border: none;
    height: 2px; /* Adjust the thickness of the line */
    background-color: #fcecc9; /* Van */
    margin: 20px 0; /* Optional: space above and below the line */
}

 .polaroid-gallery { 
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 90vh; /* Set height to 98% of the viewport height */
    margin: 20px auto; /* Center horizontally with auto margins */
    background-image: url('woodbknd.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: visible; /* Polaroids confined to gallery */
}

.polaroid {
    position: absolute;/* Ensure polaroids are absolutely positioned within the container */
    width: 150px; /* Standard size */
    padding: 10px;
    background-color: white;
    box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab !important;
    user-select: none;
    border-radius: 0; /* Removed rounded corners */
    transform: rotate(0deg); /* Initial neutral rotation */
      height: 230px;
      position: absolute;  /* Allow for absolute positioning */
      overflow: hidden;
  
 }


.polaroid:active {
    cursor: grabbing !important;
    transform: scale(1.05);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.8); /* More pronounced shadow on drag */
}

#gallery-container {
    position: relative; /* Make sure the gallery container is positioned relatively */
    width: 100%; /* Adjust as necessary */
    height: auto; /* Set a fixed height or adjust for your design was 600px*/
    overflow: visible; /* Prevent the polaroids from going outside the container */
}

.polaroid img {
    width: 100%;
    display: block;
    border-radius: 0; /* Removed rounded corners for images */
}

.caption {
    text-align: center;
    padding: 8px;
    font-size: 14px;
    font-family: 'Georgia', serif;
    color: #333;
    background-color: white;
    border-top: 1px solid #ddd;
    border-radius: 0; /* Removed rounded corners */
}

.polaroid:active {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.8); /* More pronounced shadow on drag */
}

@media (max-width: 1024px) {
    .polaroid-gallery {
        display: none; /* Hide the polaroid gallery on mobile devices */
    }
  
.polaroid-gallery-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    gap: 10px; /* Space between items */
    padding: 10px; /* Padding around the gallery */
}

.polaroid-gallery-mobile div {
    text-align: center; /* Center the caption */
}

.polaroid-gallery-mobile img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: add rounded corners */
}

button {
    z-index: 1001;
}