body {
   background-color: rgb(36, 43, 40);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   margin: 0; /* Ensure body has no margin */
   font-family: Arial, Helvetica, sans-serif;
}

h1 {
   font-size: 36px;
   color: white;
   text-align: center;
}

p {
   font-size: 18px;
   color: white;
}

.contain {
   margin-left: auto;
   margin-right: auto;
   width: 1024px;
}

header {
   height: 225px;
   text-align: center;
   padding-top: 20px;
}

nav {
   background-color: rgba(66, 66, 66, 0.39);
   text-align: center;
   padding-top: 14px;
   padding-bottom: 14px;
}

main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column; /* Aligns the content vertically */
   padding: 20px;
   padding-bottom: 80px; /* Adjusted to ensure space before the footer */
}

footer {
   background-color: rgba(66, 66, 66, 0.39);
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
}

a {
   color: white;
   text-decoration: none;
}

nav a {
   font-size: 12px;
   padding-left: 10px;
   padding-right: 10px;
}

footer p {
   text-align: center;
            font-size: 14px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 4px;
            padding-bottom: 4px;
            text-align:center ;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            font-style: italic;
}

section {
   text-align: center;
   color: white;
   font-size: 25px;
}

/* Grid container styles */
.grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 3-column grid */
   gap: 20px; /* Increased gap for better spacing */
   width: 90%;
   max-width: 1200px; /* Increased max-width for larger grid */
   padding: 10px;
}

.grid-item {
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1; /* Ensure grid items are square */
   min-width: 250px; /* Minimum width for larger boxes */
   min-height: 250px; /* Minimum height for larger boxes */
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.grid-item:hover {
   transform: scale(1.05); /* Slightly scale up the image */
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a stronger shadow on hover */
}

.grid-item img {
   width: 100%; /* Ensure images fill the grid item */
   height: 100%; /* Ensure images fill the grid item */
   object-fit: cover; /* Crop images to fit the container */
   display: block;
   border-radius: 5px; /* Optional: add rounded corners */
   cursor: pointer; /* Indicate the image is clickable */
   transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Lightbox styles */
.lightbox {
   display: none; /* Hidden by default */
   position: fixed;
   z-index: 1000;
   padding-top: 60px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
}

.lightbox-content {
   margin: auto;
   display: block;
   max-width: 90%;
   max-height: 80vh;
   border-radius: 5px;
}

.close {
   position: absolute;
   top: 20px;
   right: 35px;
   color: #fff;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
}

.close:hover,
.close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
   .grid-container {
       grid-template-columns: repeat(2, 1fr); /* 2-column grid on medium screens */
   }

   .grid-item {
       min-width: 200px; /* Slightly smaller boxes on medium screens */
       min-height: 200px;
   }
}

@media (max-width: 768px) {
   .grid-container {
       grid-template-columns: repeat(2, 1fr); /* 2-column grid on smaller screens */
   }

   .grid-item {
       min-width: 150px; /* Smaller boxes on smaller screens */
       min-height: 150px;
   }

   h1 {
       font-size: 48px; /* Smaller font size for smaller screens */
   }

   section {
       font-size: 20px; /* Smaller font size for smaller screens */
   }
}

@media (max-width: 480px) {
   .grid-container {
       grid-template-columns: 1fr; /* Single column on very small screens */
   }

   .grid-item {
       min-width: 100%; /* Full-width boxes on very small screens */
       min-height: 200px; /* Fixed height for better appearance */
   }

   h1 {
       font-size: 36px; /* Smaller font size for very small screens */
   }

   section {
       font-size: 18px; /* Smaller font size for very small screens */
   }
}

footer a{
   text-align: center;
   font-size:10px;
   color: white;
   padding-top: 4px;
   padding-bottom: 4px;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}