/* * {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
} */
p {
    font-size: 1.8em;
}
.header {
    min-height: 50vh;
    /* rgba(4, 9, 30, 0.3) */

    /* background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/banners/Plowing_water_700x500.jpg); */
    background-image: url(/images/banners/Plowing_water_700x500.jpg);
    background-position: center;
    background-size:auto;
    background-repeat: no-repeat;
    position: relative;
    /* margin-right: 5em; */
    background-color: #98b2ff;
}

.logo {
    font-size: 3em;
    font-weight: bold;
    position: relative;
    color: #ffffff;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.03em;
    -webkit-text-fill-color: #FFFFFF;
}
.nav-links {
    flex: 1;
    text-align: left;
    cursor: pointer;
}
.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 1.6em;
    font-weight: 600;
}
.nav-dropdown li {
    display: block;
    color: white;
    font-size: 1em;
}
.nav-dropdown {
    width: 100%;
    position: absolute;
    z-index: 999;
    display: none;
    text-align: left;
}
.nav-links ul li:not(#link-donate):hover ul.nav-dropdown {
    display: block;
}

.nav-links ul li a::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
}

.nav-links ul li a:hover::after {
    width: 100%;
    transition: 0.3s;
}

#link-donate a{
    background-color: rgb(255, 255, 94);
    color: red;
    border-radius: 0.2em;
    display: inline-flex;
    text-align: center;
}

.row {
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
/* ----- Welcome Section ----- */

#i-ranger {
    font-style: italic;
}

.welcome {
    padding-top: 2em;
    padding-bottom: 2em;
    width: 100%;
    text-align: center;
    color: #000000;
    justify-content: center;
    background-color: #cecdcd;
}
.welcome div {
    /* justify-content: center; */
    margin-left: 25%;
    width: 50%;
}

.welcome h1 {
    font-size: 2em;
    font-weight: 800;
    padding-bottom: 1.1em;
    color: blue;
}
.welcome p {
    /* width: 50%; */
    text-align: center;

}
.audio-warning {
    font-size: 1.5em;
    color: #b40c00;
}
/* ----- Association Section ----- */
.association {
    /* margin: 1em 0; */
    padding-top: 2.8em;
    padding-bottom: 2.8em;
    width: 100%;
    text-align: center;
    background-color: #fff3f3;
}

.association h1 {
    font-size: 2em;
    font-weight: 800;
    padding-bottom: 1em;
    color: blue;
}

.association p {
    color: black;
    font-weight: 300;
    padding: 10px 20px;
    width: 60%;
    transform: translateX(30%);
}



/* .association-col:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 02);
    transition: 0.3s;
} */

/* ----- History Section ----- */

.history {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background: lightgray;
    /* font-size: 1.5em; */
}


.history h1 {
    font-size: 2em;
    font-weight: 700;
    /* padding-bottom: 1.3em; */
    cursor: pointer;
    display: contents;
    /* margin-bottom: 5em; */
}

.history h1:hover::after {
    width: 10%;
    transition: 0.3s;
} 

.history h1::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
}
.history-col {
    margin-bottom: 30px;
    position: relative;
    flex-basis: 50%;
}

.history-col h3 {
    font-size: 1.8em;
    font-weight: 600;
}

.history-col img {
    width: 60%;
    max-width: 200px;
    max-height: 200px;
}
.history-col a{
    cursor: pointer;
    color: rgb(95, 0, 184);
    text-decoration: underline;
}

.history-col img:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 02);
    transition: 0.3s;
}

/* ----- Reunion Section ----- */

.reunion {
    /* font-size: 1.5em; */
    background-color: #fff3f3;
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
}

.reunion h1 {
    font-size: 2.1em;
    font-weight: 700;
    color: black;
}

.reunion-col {
    flex-basis: 50%;

}

.reunion-col h3 {
    font-size: 1.7em;
    font-weight: 600;
    color: red;
}

.reunion-col img {
    width: 100%;
    max-width: 400px;
    max-height: 400px;
}

.reunion-col button {
    cursor: pointer;
    font-size: 1.4em;
    color: purple;
}

.reunion-col a:hover::after {
    width: 100%;
    transition: 0.3s;   
}
.reunion-col a::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
}

footer {
    padding: 1.2em 30vh;
    background-color: aliceblue;
    text-align: center;
}

footer p {
    font-size: 1em;
}

footer a {
    text-decoration: underline;
    color: chocolate;
    cursor: pointer;
    
}

.sticky {
    position: sticky;
    top: 0;
}

.bold {
    font-weight: bold;
}
/* ----- Memorial Page ----- */

/* .header-memorial {
    min-height: 50vh;
    background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/military-81782_1280.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
} */

/* .top {
    margin: 1em 1em;
    padding-top: 100px;
    width: 100%;
    text-align: center;
    position: relative;
} */

/* .top p {
    color: black;
    font-size: 1.5em;
    font-weight: 300;
    padding: 10px 20px;
    width: 60%;
    transform: translateX(30%);
} */

/* ----- History Page ----- */




/* ----- Reunion Page ----- */

/* .header-reunion {
    min-height: 50vh;
    background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/themonarchhotel1.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
} */

/* .reunion-one {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 2em;
}

.reunion-one-col {
    margin-bottom: 1.9em;
    position: relative;
    flex-basis: 49%;
} */

/* ----- Association Page ----- */

/* .header-assoc {
    min-height: 50vh;
    background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/themonarchhotel1.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
} */