@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
.nav-bar { width: 100%; display: inline-block; background-color: #1c539f; font-family: "Poppins", serif; font-weight: 700 !important; padding-top: 10px; }

.nav-content .logo-touch-target { display: inline-flex; height: 60%; width: 350px; }

.nav-content .nav-logo { height: 60px; margin: auto; }

.nav-logo { display: flex; align-items: center; justify-content: center; }

.nav-logo img { width: 200px; }

.nav-content nav { display: block; width: 100%; text-align: right; padding-top: 0px; padding-right: 0px; }

.nav-bar ul { list-style-type: none; margin: 0; padding: 0; text-align: center; }

.nav-bar li { display: inline-block; }

.nav-bar li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; }

.nav-bar li a:hover { color: #ffc300; }

/*Toggle switch*/
.theme-switch-wrapper { position: absolute; top: 0; right: 0; margin: 23px 10px 10px 23px; }

.theme-switch { display: inline-block; height: 28px; position: relative; width: 60px; }

.theme-switch input { display: none; }

.slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; border: 1px solid #fff; }

.fa-sun { float: right; margin: 7px 7px 0px 7px; font-size: 12px; color: #fff; }

.fa-moon { float: left; margin: 7px 7px 0px 7px; font-size: 12px; color: #fff; }

.slider:before { background-color: #fff; bottom: 4px; content: ""; height: 20px; left: 4px; position: absolute; transition: 0.4s; width: 26px; }

input:checked + .slider { background-color: #23272a; }

input:checked + .slider:before { transform: translateX(26px); }

.slider.round { border-radius: 20px; }

.slider.round:before { border-radius: 50%; }

.profile { background-color: #1d539f !important; text-align: center; height: fit-content; padding-bottom: 40px; margin-bottom: 50px; align-content: center; }

.profile h1 { font-size: 50px; font-weight: 700; color: white; }

.profile p { font-size: 20px; color: white; align-items: center; max-width: 800px; margin-left: auto; margin-right: auto; display: block; }

.profile img { border-radius: 50%; max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; display: block; padding: 20px; }

.profile .profile-picture { margin-bottom: 15px; height: 200px; }

@media (max-width: 950px) { .profile p { max-width: 600px; } }

@media (max-width: 560px) { .profile p { max-width: 350px; } }

p, h1, h2, h3, h4, h5, h6, button { font-family: "Open Sans", serif; }

h2 { font-size: large; }

.dark-mode { background-color: #23272a; background-size: cover; color: white; width: auto !important; overflow-x: hidden !important; font-family: "Open Sans", serif; }

body { background-color: #f5f5f9; background-size: cover; width: auto !important; overflow-x: hidden !important; font-family: "Open Sans", serif; }

.banner { padding: 20px 0px 50px 0px; height: 150px; background-color: #1d539f; }

.banner .logo { max-width: 180px; max-height: 60px; width: auto; height: auto; }

.banner .title { color: white; font-size: 50px; font-weight: 700; }

.page { text-align: left; }

.page h1 { text-align: left !important; font-weight: 800 !important; color: black; margin-bottom: 0.7em; }

.page h2 { text-align: left !important; font-weight: 800 !important; color: black; margin-bottom: 0.5em; }

.page h3 { font-weight: 600 !important; text-align: left !important; color: black; font-size: 1.3rem; }

.page h4 { font-weight: 600 !important; text-align: center !important; color: black; }

.page p { color: black; font-weight: 500; }

.page td { color: black; }

.page th { color: black; }

.page li { color: black; }

.page a { color: #0f90fe; }

.page a:hover { color: #0f90fe; }

.page code { color: #17a2b8; }

hr { background-color: black; padding: 1px; margin-top: 1em !important; margin-bottom: 1em !important; }

@media screen and (max-width: 768px) { .banner { padding: 20px 0px 20px 0px; height: 110px; } .banner .logo { max-width: 150px; max-height: 60px; width: auto; height: auto; } .banner .title { color: white; font-size: 30px; font-weight: 700; } .page h1 { font-size: 1.5rem !important; } .page h2 { font-size: 1.2rem !important; } .page h4 { font-size: 0.8rem !important; } }

footer { width: 100%; display: inline-block; background-color: #1c539f; font-family: "Poppins", serif; bottom: 0; left: 0; margin-top: 50px; }

footer .content { max-width: 1000px; margin: auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; }

footer .content p, a { color: #fff; }

footer .content .box { width: 49%; transition: all 0.4s ease; text-align: center; }

footer .content .topic { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 16px; }

footer .content p { text-align: justify; }

footer .content .right input[type="textarea"] { height: 60px; width: 100%; outline: none; color: #1c539f; border-radius: 5px; padding-left: 10px; font-size: 17px; border: none; }

footer .content .right input[type="submit"] { height: 42px; width: 100%; font-size: 18px; color: #1c539f; background: #ffc300; outline: none; border-radius: 5px; letter-spacing: 1px; cursor: pointer; margin-top: 12px; border: 2px solid #ffc300; transition: all 0.3s ease-in-out; }

.content .right input[type="submit"]:hover { background: none; color: #ffc300; }

footer .content .media-icons a { font-size: 18px; height: 45px; width: 45px; display: inline-block; text-align: center; line-height: 43px; border-radius: 5px; border: 2px solid #fff; margin: 10px 5px 0 0; }

footer .content .media-icons a:hover { border-color: #ffc300; }

footer .btn { margin: 10px 5px 0 0; }

/* The popup form - hidden by default */
footer .form-popup { display: none; position: fixed; bottom: 0; right: 15px; z-index: 9; }

/* Add styles to the form container */
footer .form-container { max-width: 300px; background-color: white; box-shadow: 0 4px 8px 0 rgba(28, 83, 159, 0.4); transition: 0.3s; color: #404040; }

footer .form-container .form-header { background-color: #1c539f; border-radius: 5px 5px 0px 0px; }

footer .form-container .form-body { padding: 10px; }

footer .form-container:hover { box-shadow: 0 8px 16px 0 rgba(28, 83, 159, 0.4); }

footer .form-container .form-header h1 { font-size: 20px; padding: 15px; color: #fff; }

/* Full-width input fields */
footer .form-container input[type="email"], footer .form-container textarea { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; }

footer .form-container textarea { resize: none; }

/* When the inputs get focus, do something */
footer .form-container input[type="email"]:focus, footer .form-container textarea:focus { background-color: rgba(28, 83, 159, 0.1); outline: none; }

footer .form-container .send { background-color: rgba(28, 83, 159, 0.8); width: 42%; }

footer .form-container .send:hover { background-color: #1c539f; color: #fff; }

/* Add a red background color to the cancel button */
footer .form-container .cancel { background-color: rgba(207, 20, 43, 0.8); width: 42%; }

footer .form-container .cancel:hover { background-color: #cf142b; color: #fff; }

footer .bottom { width: 100%; text-align: right; color: #f1f1f1; padding: 0 40px 5px 0; }

footer a { transition: all 0.3s ease; color: #fff; }

footer a:hover { color: #ffc300; }

footer .content .fas { margin-right: 10px; }

footer .fa-heart { color: #e31b23; }

@media (max-width: 950px) { footer .content .box { width: 50%; } .content .right { margin-top: 40px; } }

@media (max-width: 560px) { footer { position: relative; } footer .content .box { width: 100%; margin-top: 30px; } }

.modal-window { position: fixed; background-color: rgba(204, 204, 204, 0.849); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; }

.modal-window:target { visibility: visible; opacity: 1; pointer-events: auto; }

.modal-window > div { width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; background: white; }

.modal-window header { font-weight: bold; }

.modal-window h1 { font-size: 150%; margin: 0 0 15px; }

.modal-window .cancel-btn { background-color: rgba(207, 20, 43, 0.8); width: auto; }

.modal-window .cancel-btn:hover { background-color: #cf142b; color: #fff; }

.modal-window > div { border-radius: 1rem; }

.modal-window div:not(:last-of-type) { margin-bottom: 15px; }

@media (max-width: 950px) { .modal-window > div { width: 70%; } }

@media (max-width: 560px) { .modal-window > div { width: 80%; } }

.card-container { display: grid; grid-template-columns: repeat(4, 1fr); font-family: "Open Sans", sans-serif; }

@media only screen and (max-width: 1500px) { .card-container { grid-template-columns: repeat(3, 1fr); } }

@media only screen and (max-width: 1000px) { .card-container { grid-template-columns: repeat(2, 1fr); } }

@media only screen and (max-width: 768px) { .card-container { grid-template-columns: 1fr; } }

body { background-color: #f5f5f9; }

h2 { margin-bottom: 20px; margin-top: 20px; font-weight: 700; text-align: center; }

.card { display: flex; flex-direction: row; align-items: center; margin: 20px 30px; background-color: white; border-radius: 0.375rem; padding: 1.5em; font-size: 1.2em; }

.dark-card { display: flex; flex-direction: row; align-items: center; margin: 20px 30px; background-color: #606266; border-radius: 0.375rem; padding: 1.5em; font-size: 1.2em; }

a { color: black; }

.a-dark { color: white; }

.info p { margin-top: 5px; margin: 0px; text-align: left; }

.info .title { font-size: 500; font-weight: bold; }

.info .location { font-size: medium; font-weight: 400; }

.info .dates { font-size: small; color: #404040; }

.info-dark { color: #f8f8f8; }

.info-dark p { margin-top: 5px; margin: 0px; text-align: left; }

.info-dark .title { font-size: 500; font-weight: bold; }

.info-dark .location { font-size: medium; font-weight: 400; }

.info-dark .dates { font-size: small; color: #bababa; }

.icon { width: 70px; height: 70px; margin-right: 20px; padding: 10px; }

.icon img { width: 100%; }

/* Style buttons */
.btn { background-color: rgba(255, 195, 0, 0.7); border: none; color: white; padding: 12px 35px; cursor: pointer; font-size: 18px; text-align: center; border-radius: 5px; }

/* Darker background on mouse-over */
.btn:hover { background-color: #ffc300; color: #404040; }

/*# sourceMappingURL=main.css.map */