@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: flex; height: 60%; width: 350px; }

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

.nav-logo { align-items: center; justify-content: left; padding-left: 0.5rem; }

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

.nav-content { display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; padding-right: 1rem; }

.logo-container { float: left; }

.links-container { float: right; display: flex; margin-right: 12rem; align-items: center; justify-content: space-between; }

.nav-item { padding-left: 1rem; padding-right: 1rem; color: white; }

.profile { background-color: #1d539f !important; text-align: center; height: 320px; margin-bottom: 50px; display: flex; justify-content: space-around; align-items: center; color: white; }

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

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

.profile .profile-picture { margin-bottom: 30px; height: 200px; margin-top: 5rem; margin-bottom: 2rem; }

.profile__bio { max-width: 50%; }

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

h2 { font-size: large; }

body { background-color: #f5f5f9 !important; 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; } }

.card__name { text-align: center; font-weight: 400; margin-bottom: 1rem; position: relative; }

.card__content { position: relative; transition: transform 0.5s; font-size: 1.5rem; border-radius: 0.5rem; overflow: hidden; height: 15rem; }

.card__content:hover { transform: scale(1.1); }

@media (hover: hover) { .card__content { color: white; } }

.card__content:hover img { opacity: 0.35; }

.card__content:hover .card__hidden { visibility: visible; opacity: 1; }

.card__img { background-color: black; height: 15rem; text-align: center; display: flex; justify-content: center; }

.card__img img { height: 100%; display: block; transition: opacity 0.5s; }

.card__hidden { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; transition: opacity 0.5s; padding: 2rem; }

@media (hover: hover) { .card__hidden { position: absolute; top: 0; opacity: 0; visibility: hidden; } }

.card__btn { display: flex; justify-content: space-evenly; margin-top: 1rem; }

.card__btn a { border: none; padding: 0.7rem 1rem; letter-spacing: 2px; border-radius: 0.5rem; color: white; font-weight: 600; cursor: pointer; transition: all 0.2s; }

.card__btn a:hover { transform: translateY(-2px); }

.contact-box { justify-content: center; top: 50%; left: 50%; display: flex; flex-direction: row; align-items: center; }

#fs-frm { margin-top: 35px; margin-left: 100px; width: 500px; }

.input-field { width: 400px; height: 40px; margin-bottom: 15px; padding-left: 10px; padding-right: 10px; border: 1px solid #777; border-radius: 14px; outline: none; }

.textarea-field { height: 150px; padding-top: 10px; }

.btn-submit { border-radius: 20px; color: #fff; margin-top: 18px; padding: 10px; background-color: #1d539f; font-size: 12px; border: none; cursor: pointer; }

.contact { display: flex; margin-top: 3rem; justify-content: center; }

.centre-div { display: flex; justify-content: row; margin-top: 50px; margin-left: 380px; }

#icons { margin-left: 220px; font-size: 30px; }

.toggle-theme-switch { right: 0; position: absolute; top: 0; margin: 6px 35px; }

@media only screen and (max-width: 600px) { .toggle-theme-switch { margin-top: -8px; margin-right: 20px; } }

#toggle-theme { opacity: 0; }

#toggle-label { width: 40px; height: 18px; background-color: #363636; display: flex; border-radius: 50px; align-items: center; justify-content: space-around; padding: 5px; position: relative; transform: scale(1.5); font-size: 0.7rem; cursor: pointer; }

.fa-sun { color: #f5f5f9; }

.fa-moon { color: #70b6ce; }

.slider { width: 16px; height: 16px; background-color: white; position: absolute; left: 4px; border-radius: 50%; transition: transform 0.2s linear; }

#toggle-theme:checked + #toggle-label .slider { transform: translateX(18px); background-color: #363636; }

#toggle-theme:checked + #toggle-label { background-color: #70b6ce; }

.darkmode { --light-text-color: #d4d3d3; --lighter-text-color: #ebebeb; --white-text-color: #fff; --dark-bg-color: #28272b; --dark-card-bg-color: #404040; --dark-header-bg-color: #0f3e80; background-color: var(--dark-bg-color) !important; color: var(--lighter-text-color); }

.darkmode .card { background-color: var(--dark-card-bg-color); }

.darkmode .info .dates { color: var(--light-text-color); }

.darkmode a { color: var(--white-text-color); }

.darkmode .nav-bar { background-color: var(--dark-header-bg-color); }

.darkmode .profile { background-color: var(--dark-header-bg-color) !important; }

.darkmode .page h1, .darkmode .page h2, .darkmode .page h3, .darkmode .page h4, .darkmode .page h5, .darkmode .page h6, .darkmode .page p { color: var(--white-text-color); }

.darkmode .page p { color: var(--lighter-text-color); }

.darkmode .modal-title, .darkmode .close-btn { color: var(--white-text-color); }

.darkmode .modal-content { color: var(--lighter-text-color); background-color: var(--dark-card-bg-color); }

.darkmode .form { color: var(--white-text-color); background-color: var(--dark-card-bg-color); }

.darkmode input, .darkmode .contact-form:before, .darkmode textarea, .darkmode button { color: var(--light-text-color); }

.darkmode button:hover { background: var(--dark-bg-color); }

html { font-size: 62.5%; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; font-size: inherit; }

body { box-sizing: border-box; font-weight: 400; font-size: 2rem; line-height: 1.5; text-rendering: optimizeLegibility; }

.card-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; margin: 0 4rem; 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; margin-bottom: 50px; }

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

a { color: black; }

.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; }

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

.icon img { width: 100%; }

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