html {
height: 100%;
}
body {
background: ghostwhite;
align-items: center;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh; /* Full viewport height */
margin: 0; 
}
#cookieConsentContainer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 10px;
border-top: 1px solid #ccc;
display: none; /* Hidden by default */
font-family: system-ui;
gap: 5px;
justify-content: center;
align-items: center;
border-top: 2px solid rgb(17, 22, 87);
z-index: 1001;
}
#cookieConsentContainer.active {
display: flex; /* Show when active */
}
.cookie-buttons button {
border-radius: 20px;
background-color: rgb(17, 22, 87);
color: white;
border: none;
padding: 10px 20px;
font-family: system-ui;
}
.cookie-buttons button:hover {
background-color: #0056b3;
cursor: pointer;
text-decoration: underline;
}
.validation-error {
border: 1px solid red;
}
.invalid {
border: 2px solid red;
}
#acceptCookies {
font-weight: 600;
}
.global-button {
padding: 10px 15px;
/* font-size: 1.05rem; */
border-radius: 10px;
background-color: rgb(17, 22, 87);
color: white;
border: none;
cursor: pointer;
font-family: system-ui;
font-size: medium;
}
.global-button:hover {
cursor: pointer;
background-color: #0056b3;
text-decoration: underline;
}
.cookie-buttons {
margin-left: 5%;
display: flex;
gap: 20px;
}
.nav-row {
display: flex;
flex-wrap: wrap;
gap: 1vw;
width: 100%;
background-color: rgb(5, 7, 36);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
height: 75px;
align-items: center;
justify-content: flex-start;
}
.nav-row button {
background: none;
color: white;
border: none;
padding: 10px;
margin: 0;
font-size: 1.1em;
cursor: pointer;
transition: color 0.3s;
font-family: system-ui;
}
.nav-row button:hover {
color: #ccc;
}
.nav-links {
margin-left: 0px;
}
.slogan {
color: white;
font-size: 2em;
margin-left: 2%;
margin-right: 2%;
font-weight: 500;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.response-message {
color: #333;
margin-top: 10px;
text-align: center;
position: fixed;
top: 90%;
z-index: 100;
}
.response-success {
background-color: black; /* Dark green background */
color: #00ff00; /* Green text */
padding: 10px;
border-radius: 5px;
text-align: center;
margin-top: 10px;
position: fixed;
top: 90%;
z-index: 100;
}
.response-error {
background-color: #4d0000; /* Dark red background */
color: #ff0000; /* Red text */
padding: 10px;
border-radius: 5px;
text-align: center;
margin-top: 10px;
position: fixed;
top: 90%;
z-index: 100;
}
.submit-btn-form {
width: 100%;
padding: 10px;
background-color: rgb(17, 22, 87);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 700;
}
.submit-btn-form:hover {
cursor: pointer;
background-color: #0056b3;
}
.modal {
display: none;
}
.modal {
display: none; 
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid black;
width: 30%;
font-family: system-ui;
border-radius: 10px;
}
.modal-content h2 {
font-size: 1.5rem;
color: #333;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}
#registrationForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#newsletterForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#newsletterForm input[type="email"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem; 
}
#registrationForm input[type="text"],
#registrationForm input[type="email"],
#registrationForm input[type="password"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
#loginForm input[type="text"],
#loginForm input[type="password"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
#loginForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.site-footer {
background-color: #333;
color: #fff;
padding-top: 0px;
position: relative;
bottom: 0;
width: 100%;
}
.footer-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
max-width: 1200px;
margin: auto;
flex-wrap: wrap;
font-family: system-ui;
}
.footer-column {
margin: 10px;
font-family: system-ui;
flex: 1;
min-width: 200px; /* Minimum width for each column */
margin-bottom: 0px;
}
.footer-column input {
width: 30%; /* Minimum width for each column */
font-family: system-ui;
}
.footer-column h2 {
color: #fff;
margin-bottom: 15px;
text-align: center;
font-weight: 400;
font-family: system-ui;
font-size: large;
}
.footer-links {
list-style: none;
padding: 0;
text-align: left;
text-align: center;
}
.footer-links li a {
color: #fff;
text-decoration: none;
display: block; /* Make each link fill its own line */
margin-bottom: 10px; /* Space between links */
font-size: 0.9em;
}
.footer-links li a:hover {
text-decoration: underline;
}
#footerNewsletterForm {
display: flex;
flex-direction: column;
align-items: center;
}
#footerNewsletterForm button {
min-width: 100px;
width: 30%;
margin: 5px 0;
margin-top: 15px;
}
#footerNewsletterForm button:hover {
background-color: #0056b3;
}
#footerNewsletterForm input {
width: 50%;
border: none;
Border-radius: 5px;
padding: 5px;
font-size: 0.75rem;
}
.social-links {
display: flex;
justify-content: center;
}
.social-icon {
display: inline-block;
margin: 0 10px;
}
.social-icon img {
width: 30px;
height: 30px;
border-radius: 05px;
background-color: white;
}
.footer-bottom-text {
text-align: center;
padding: 0px 0;
font-size: 0.8rem;
width: 100%;
font-family: system-ui;
}
/* Hamburger Icon */
#hamburger-icon {
display: none; /* Initially hidden */
cursor: pointer;
flex-direction: column;
gap: 5px; /* Space between lines */
padding: 10px; /* Clickable area */
}
#hamburger-icon span {
display: block;
width: 25px; /* Width of the hamburger lines */
height: 3px; /* Height of the hamburger lines */
background-color: white; /* Color of the hamburger lines */
transition: all 0.3s ease; /* Smooth transition for animations */
}
/* Hamburger Active State (for animating the icon into an "X") */
#hamburger-icon.active span:nth-child(1) {
transform: rotate(45deg) translate(5.5px, 5.5px);
}
#hamburger-icon.active span:nth-child(2) {
opacity: 0;
}
#hamburger-icon.active span:nth-child(3) {
transform: rotate(-45deg) translate(5.5px, -5.5px);
}
/*---------------------------------------------------------------------------*/
@media only screen and (max-width: 1225px) {
.nav-row button, .nav-links, .slogan {
display: none;
}
html, body {
overflow-x: hidden;
}
#homeBtn {
margin-top: 75.75px;
border-top: 0.1px solid white;
}
.welcome-text {
position: absolute;
top: 19.25px;
right: 10%;
}
.nav-row.active button, .nav-row.active .nav-links, .nav-row.active {
display: flex; /* Show the links when the menu is active */
width: 100%; /* Full width */
padding: 0px; /* Adequate padding */
text-align: center; /* Center-align the text */
flex-direction: row-reverse;
}
.nav-row {
gap: 0;
position: relative; /* Required for absolute positioning of dropdown content */
}
.nav-row.active button, .nav-row.active .nav-links {
display: block; /* Display buttons in a block style within the dropdown */
background-color: rgb(5, 7, 36); /* Match the nav-row color */
color: white; /* Text color */
border: none; /* Remove any borders */
border-left: 1px solid ghostwhite;
width: 51%; /* Full width of the dropdown */
text-align: left; /* Align text to the left */
padding: 15px 30px; /* Adequate padding for touch targets */
box-sizing: border-box; /* Include padding in width calculation */
border-bottom: 1px solid #ffffff26; /* Optional: add a subtle separator between buttons */
}
.nav-row.active .nav-links:last-child {
border-bottom: 1px solid white; /* Remove bottom border for the last item */
}
/* Ensure the hamburger icon is visible for toggling the menu */
#hamburger-icon {
display: flex; /* Show the hamburger icon */
position: absolute; /* Position it on the top-right corner */
top: 20%;
right: 0;
z-index: 2; /* Above the dropdown content */
}
html {
height: 100%;
background-color: rgb(5, 7, 36);
}
body {
background: ghostwhite;
align-items: center;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 110vh; /* Full viewport height */
margin: 0; 
}
.nav-row button {
background: none;
color: white;
border: none;
padding: 10px;
margin: 0;
font-size: 1em;
cursor: pointer;
transition: color 0.3s;
}
.nav-row button:hover {
color: #ccc;
}
.nav-links {
margin-left: 0px;
}
.slogan {
color: white;
font-size: 1.25em;
position: absolute;
top: 13.25px;
left: 0%;
display: block;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.response-message {
color: #333;
margin-top: 10px;
text-align: center;
position: fixed;
top: 90%;
z-index: 100;
}
.response-success {
background-color: black; /* Dark green background */
color: #00ff00; /* Green text */
padding: 10px;
border-radius: 5px;
text-align: center;
margin-top: 10px;
position: fixed;
top: 90%;
z-index: 100;
}
.response-error {
background-color: #4d0000; /* Dark red background */
color: #ff0000; /* Red text */
padding: 10px;
border-radius: 5px;
text-align: center;
margin-top: 10px;
position: fixed;
top: 90%;
z-index: 100;
}
.modal {
display: none;
/* ... other styles ... */
}
/* Modal styling */
.modal {
display: none; 
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 30% auto;
margin-top: 150px;
padding: 10px;
border: 1px solid black;
width: 90%;
font-family: system-ui;
border-radius: 10px;
}
#registrationForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#newsletterForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#newsletterForm input[type="email"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem; 
}
#registrationForm input[type="text"],
#registrationForm input[type="email"],
#registrationForm input[type="password"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
#loginForm input[type="text"],
#loginForm input[type="password"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
#loginForm {
display: flex;
flex-direction: column;
gap: 15px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.site-footer {
background-color: #333;
color: #fff;
padding-top: 0px;
position: relative;
bottom: 0;
width: 100%;
}
.footer-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
max-width: 1200px;
margin: auto;
flex-wrap: wrap;
font-family: system-ui;
}
.footer-column {
margin: 10px;
font-family: system-ui;
flex: 1;
min-width: 200px;
margin-bottom: 0px;
background-image: linear-gradient(to right, transparent 20%, white 20%, white 80%, transparent 80%);
background-repeat: no-repeat;
background-position: top;
background-size: 100% 0.5px; /* Full width of the element but only 1px high */
}
.footer-column input {
width: 30%; /* Minimum width for each column */
font-family: system-ui;
}
.footer-column h2 {
color: #fff;
font-family: system-ui;
margin-bottom: 15px;
text-align: center;
font-weight: 400;
}
.footer-links {
list-style: none;
padding: 0;
text-align: left;
text-align: center;
}
.footer-links li a {
color: #fff;
text-decoration: none;
display: block; /* Make each link fill its own line */
margin-bottom: 10px; /* Space between links */
font-size: 0.9em;
}
.footer-links li a:hover {
text-decoration: underline;
}
#footerNewsletterForm {
display: flex;
flex-direction: column;
align-items: center;
}
#footerNewsletterForm button {
width: 30%;
margin: 5px 0;
margin-top: 15px;
}
#footerNewsletterForm button:hover {
background-color: #0056b3;
}
#footerNewsletterForm input {
width: 50%;
border: none;
Border-radius: 5px;
padding: 5px;
font-size: 0.75rem;
}
.social-links {
display: flex;
justify-content: center;
}
.social-icon {
display: inline-block;
margin: 0 10px;
}
.social-icon img {
width: 30px;
height: 30px;
border-radius: 05px;
background-color: white;
}
.footer-bottom-text {
margin-top: 10px;
text-align: center;
padding: 0px 0;
font-size: 0.8rem;
width: 100%;
font-family: system-ui;
}
.global-button {
}
.global-button:hover {
}
}