body {
    background-color: rgb(99, 93, 93);
}

/* Override Bootstrap container for this specific use case */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Style adjustments for .firstpage */
.firstpage {
    background: url(./images/IMG_9249.PNG) no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: 'Dancing Script', cursive;
}

.firstpage .topnav {
    overflow: hidden;
    background-color: rgba(51, 51, 51, 0.589);
    position: relative;
}


.firstpage img {
    position: absolute;
    display: block;
    height: auto;
    width: 5em;
    left: 0;
    top: 0;
    padding-left: 15px;
    padding-top: 7px;
}

.firstpage h1 {
    color: white;
    text-align: center;
    font-size: 4rem;
    margin: 0 20px;
    font-family: 'Dancing Script', cursive;
    line-height: 1.2;
    padding-top: 6rem;
}

.firstpage h2 {
    color: white;
    text-align: center;
    font-size: 1.5rem;
    margin: 0 20px;
    font-family: 'Quicksand', sans-serif;
    padding-top: 10rem;
}

/* h2 {
    padding-bottom: 7rem;
    font-family: 'Quicksand', sans-serif;
} */

.firstpage li {
    color: white;
    display: inline-block;
    font-size: 10px;
    margin-top: 10px;
    border: thin solid white;
    padding: 3px 3px;
}

ul {
    text-align: right;
}

/* .firstpage { */
    /* background: url(./images/IMG_9249.PNG) no-repeat center center fixed; 

    width: 100%;
    height: auto;

    position: static;
    top: 0;
    left: 0;
    bottom: 0;

    background-position: top;
    background-repeat: no-repeat; */
/* } */

.secondpage h1 {
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    color:rgb(247, 247, 247);
    padding-top: 6rem;
    padding-bottom: 4rem;
    line-height: 5rem;
}

.secondpage h3 {
    text-align: center;
    color:rgba(240, 232, 226, 0.89);
    padding-bottom: 3rem;
}

/* .row img {
    height: auto;
    width: 10rem;
} */

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify_content: center;
    gap: 1rem;
    padding: 2rem;
}

/* Individual image item */
.image-item {
    flex: 1 1 calc(20% - 1rem); /* Three columns layout with gap */
    box-sizing: border-box;
    max-width: calc(20% - 1rem);
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

.image-item p {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    color: rgb(235, 220, 208);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .image-item {
        flex: 1 1 calc(33.333% - 1rem); /* Two columns layout on smaller screens */
        max-width: calc(33.333% - 1rem);
    }
}

@media (max-width: 768px) {
    .image-item {
        flex: 1 1 calc(50% - 1rem); /* double column layout on very small screens */
        max-width: calc(50% - 1rem);
    }
}

@media (max-width: 480px) {
    .image-item {
        flex: 1 1 100%;
        max-width: 100%
    }
}

h3 {
    font-size: 20px;
    letter-spacing: 3px;
    font-family: 'Quicksand', sans-serif;
    color:rgb(235, 220, 208);
    padding: 1em 2em;
}

p {
    font-size: 15px;
    letter-spacing: 3px;
    font-family: 'Quicksand', sans-serif;
    color:rgb(235, 220, 208);
    padding: 1em 1em;
    max-width: fit-content;
}