/* Reset default margin and padding */
body, html, h1, h2, h3, h4, h5, p, ul, li {
padding: 0;
margin: 0;
color: #fff;
}
/* Styling for video background */
.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
/* Styling for video element */
video {
object-fit: cover;
width: 100%;
height: 100%;
}
/* Increase the font size and padding for section content */
.frosted-container {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 40px; /* Increase the padding for more space around content */
margin: 20px auto;
border-radius: 10px;
max-width: 75%; /* Set the maximum width to 75% of the viewport width for 3/4 width */
}
.frosted-container h1, .frosted-container p, .frosted-container ul {
color: #333;
font-size: 2.6rem; /* Increase the font size for better readability */
line-height: 1.8; /* Adjust the line height for better spacing */
}
/* Styling for parallax sections */
.parallax-section {
height: 80vh; /* Set the height of each section to the viewport height */
background-color: rgba(255, 255, 255, 0); /* Transparent background color */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Styling for section content */
.section-content {
font-size: 2rem; /* Adjust the font size as needed */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for better visibility */
text-align: center;
margin: 20px 0;
}
.section-link {
text-decoration: none;
color: #fff;
}
/* Styling for contact information */
.contact-info {
font-size: 1.5rem; /* Adjust the font size as needed */
text-align: center;
margin: 10px 0;
}
/* Style for the logo */
.logo {
text-align: center; /* Center the logo horizontally */
margin: 10px 0; /* Add margin for spacing */
}
/* Style for the logo image */
.logo img {
max-width:
800px; /* Set a maximum width for the logo */
height: auto; /* Maintain aspect ratio */
}
/* Style for the logo on larger screens */
@media screen and (min-width: 768px) {
.logo {
text-align: center;
margin: 20px auto; /* Center the logo horizontally and add margin for spacing */
}
}
/* Style for the logo on smaller screens (e.g., mobile devices) */
@media screen and (max-width: 767px) {
.logo img {
max-width: 80%; /* Adjust the maximum width to fit better on smaller screens */
height: auto;
}
}
/* Styling for menu */
.menu {
text-align: center;
list-style-type: none; /* Remove bullet points for menu items */
margin-top: 20px;
}
.menu a {
text-decoration: none;
color: #fff; /* Set link color to white */
padding: 10px 20px; /* Add padding to menu items for better touch targets */
}
/* Styling for the bottom menu */
.bottom-menu {
background-color: transparent; /* Set the background color to transparent */
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
z-index: 1; /* Increase the z-index to overlay on top of video */
}
/* Styling for the section content */
.section-content {
color: #fff; /* Text color set to white for better visibility */
font-size: 1.5rem; /* Adjust the font size as needed */
text-align: center; /* Center text */
}
/* Styling for the section */
.section {
text-align: center; /* Center content within the section */
}
/* Styling for paragraphs within the section */
.paragraph {
text-align: center; /* Center text within paragraphs */
margin: 20px 0; /* Add some margin for spacing between paragraphs */
}
/* Apply scroll-snap for parallax sections */
body {
scroll-snap-type: y mandatory;
}
/* Add this CSS to your stylesheet or in a