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

header {
    background: red;
    color: white;
    padding: 20px 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible columns */
    gap: 15px; /* Space between items */
    width: 200px;
    max-width: 500px;
    margin: 0 ;
}

.gallery-item {
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: flex;
}

.gallery-item p {
    margin: 0;
    padding: 10px;
    font-size: 14px;
    color: #555;
    background: #f4f4f4;
}

.overlay {
    position: relative; /* Allows positioning relative to the parent container */
    bottom: 367%; /* Center vertically */
    left: 325%; /* Center horizontally */
    transform: translateY(-10px); /* Adjust positioning to center the overlay */
    text-align: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for visibility */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay img {
    width: 100%; /* Smaller size for overlay images */
    height: auto;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.overlay p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-second {
    position: relative;
    bottom: 940%;
    left: 325%;
    transform: translateY(-10px);
    text-align: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-second img {
    width: 100%;
    height: auto;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.overlay-second p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-third {
    position: relative;
    bottom: 365%;
    left: 325%;
    transform: translateY(-10px);
    text-align: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-third img {
    width: 100%;
    height: auto;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.overlay-third p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-right {
    position: relative; /* Absolute positioning within the parent container */
    top: -790%; /* Centered vertically relative to the parent */
    right: -656%; /* Position on the right with a small offset */
    transform: translateY(-50px); /* Adjust for vertical centering */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-right img {
    width: 200px; /* Slightly smaller size for the overlay image */
    height: 200px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.overlay-right p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-right-second {
    position: relative; /* Absolute positioning within the parent container */
    top: -1410%; /* Centered vertically relative to the parent */
    right: -656%; /* Position on the right with a small offset */
    transform: translateY(-50px); /* Adjust for vertical centering */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-right-second img {
    width: 200px; /* Slightly smaller size for the overlay image */
    height: 200px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.overlay-right-second p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-right-third {
    position: relative; /* Absolute positioning within the parent container */
    top: -1410%; /* Centered vertically relative to the parent */
    right: -656%; /* Position on the right with a small offset */
    transform: translateY(-50px); /* Adjust for vertical centering */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-right-third img {
    width: 200px; /* Slightly smaller size for the overlay image */
    height: 200px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.overlay-right-third p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-right-fourth {
    position: relative; /* Absolute positioning within the parent container */
    top: -1155%; /* Centered vertically relative to the parent */
    right: -656%; /* Position on the right with a small offset */
    transform: translateY(-50px); /* Adjust for vertical centering */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-right-fourth img {
    width: 200px; /* Slightly smaller size for the overlay image */
    height: 200px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.overlay-right-fourth p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.overlay-right-fifth {
    position: relative; /* Absolute positioning within the parent container */
    top: -794%; /* Centered vertically relative to the parent */
    right: -656%; /* Position on the right with a small offset */
    transform: translateY(-50px); /* Adjust for vertical centering */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.overlay-right-fifth img {
    width: 200px; /* Slightly smaller size for the overlay image */
    height: 200px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.overlay-right-fifth p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}