@font-face {
    font-family: Jojoba;
    src: url(fonts/Jojoba.otf);
}

    @font-face {
    font-family: Akira;
    src: url(fonts/Akira\ Expanded\ Demo.otf);

    }

body {
    background-color: #fbfbfb;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

row {
    display: grid;
    align-items: center;
}

/* NAV BAR*/

.navwrap {
    position: sticky;
    height: 3rem; /* Set a height */
    position: sticky; /* Make it sticky */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it stays above other elements */
}
.naicon, .namid, .nalinks {
    background-color: #f3f3f3ee;
    display: grid;
    align-items: center;
    
}
.naicon h5 {
        font-family: Jojoba;
        margin-top: 1ch;
        align-items: center;
        display: inline-block;
}
.naicon h5:hover {
    font-family: Jojoba;
    margin-top: 1ch;
    align-items: center;
    display: inline-block;
    color: darkgreen;
    cursor: grab;
}
.naicon h5:active {
    font-family: Jojoba;
    margin-top: 1ch;
    align-items: center;
    display: inline-block;
    color: darkgreen;
    cursor: grabbing;
}
.nalinks {
    justify-content: end;
}
.nalinks a:link, a:visited, a:focus {
    text-decoration: none;
    color: rgb(29, 29, 29);
}
.nalinks a:hover {
    text-decoration: none;
    color: rgb(34, 160, 70);
}
ul li {
    list-style: none;
    margin-right: 3ch;
    margin-top: 1ch;
    align-items: center;
    display: inline-block;
}
/* END OF NAV BAR */

.wrapper {
    background-image: url('https://feuroosevelt.edu.ph/wp-content/uploads/2022/09/IMG_0321-1-scaled.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 85%;
    min-height: 50vh;
}

.secname {
    display: inline-block;
    padding: 5ch;
    text-align: center;
}

.secname h1{
    font-family: Akira;
    font-size: 4rem;
}

.catpics {
    width: auto;
    display: flex;
    justify-content: center;
}
/* Stylized Images */
.catpicleft img, .catpicmid img, .catpicright img {
    border: 2px solid black;
    margin: 3%;
    width: 100%; /* Ensures the image fits its container */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover Effects */
.catpicleft img:hover, .catpicmid img:hover, .catpicright img:hover {
    transform: scale(1.1); /* Scales the image up slightly */
    filter: brightness(1.2) contrast(1.2); /* Makes the image brighter and more contrasted */
}