body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  position: fixed; /* Keep the header fixed at the top of the viewport */
  top: 0;
  left: 0;
  right: 0; /* Ensure the header stretches to the full width without overflow */
  width: 100%; /* Ensure full width of the header */
  background-color: rgba(51, 51, 51, 0.8); /* Slight transparency to see content underneath */
  color: white;
  text-align: center;
  padding: 15px;
  box-sizing: border-box; /* Ensure padding does not cause overflow */
  z-index: 3; /* Ensure the header is above the overlay and other content */
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

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

.menu-icon {
    display: none; /* Hide the hamburger icon by default */
    position: absolute; /* Position it absolutely within the header */
    font-size: 30px;
    cursor: pointer;
    color: white;
    right: 20px; /* Align it to the right with a 20px margin */
    top: 50%; /* Vertically center the icon */
    transform: translateY(-50%); /* Adjust vertical centering */
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
  margin: 0 5px;
  font-weight: bold;
}

nav a:hover,
nav a:active {
  background-color: #555;
}

/* Mobile styles */
@media (max-width: 768px) {
    .menu-icon {
        display: block; /* Show the hamburger icon on mobile */
    }

    .nav-links {
        display: none; /* Hide the regular navigation links */
        flex-direction: column;
        width: 100%;
        background-color: rgba(51, 51, 51, 0.9); /* Same background as header */
        position: absolute;
        top: 60px; /* Below the header */
        left: 0;
    }

    .nav-links a {
        padding: 15px;
        text-align: center;
        width: 100%;
    }

    .nav-links.active {
        display: flex; /* Display the nav links when active */
    }

    header {
        padding: 30px;
    }
}


section {
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
  text-align: center;
  background-color: white;
  position: relative;
}

.blue-padding {
  padding: 40px 0;
  background-color: #346a85;
}

.splash {
  position: relative;
  width: 100%;
  height: 100vh; /* Set the section height to 100% of the viewport height */
  overflow: hidden; /* Hides any overflow from the video */
  color: white;
  margin: 0 auto;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Ensures no overflow is visible */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire container */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity for dimming effect */
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2; /* Ensure the text and buttons are above the overlay and video */
  text-align: center;
  top: calc(50% - 50px); /* Move the content up by 50 pixels */
  left: 50%;
  transform: translate(-50%, -50%);
}

.splash h2 {
  margin: 0;
  padding: 0;
  color: white;
}

.app-download {
  margin-top: 40px; /* 20px padding between the text and the download buttons */
  text-align: center;
}

.app-download a {
  margin: 0 10px; /* Add some spacing between the two buttons */
  text-decoration: none; /* Remove the underline from the link */
  display: inline-block; /* Ensure the anchor behaves like a block for better control */
}

.app-download img {
  vertical-align: middle;
  display: block; /* Ensure the image doesn't have any extra space around it */
}

.carousel-container {
    position: relative;
    max-width: 50%; /* Adjust as needed */
    margin: auto;
    overflow: hidden; /* Hide anything outside the container */
    display: flex;
    align-items: center;
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-image {
    max-width: 100%;
    max-height: 700px;
    flex: 1 0 100%; /* Each image takes up 100% of the carousel's width */
    object-fit: contain; /* Ensure images are fully visible and maintain aspect ratio */
}

.carousel-dots {
    text-align: center;
    position: absolute;
    bottom: 15px;
    width: 100%;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: gray;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: darkgray; /* Slightly darker color for the active dot */
}


.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: gray; /* Same color as the non-highlighted dots */
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: transparent; /* Ensure the background remains transparent */
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8); /* Slightly darker background on hover */
}



/* Mobile adjustments */
@media (max-width: 600px) {
  .app-download {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center;
  }

  .app-download a {
    margin: 10px 0; /* Add vertical space between the buttons on mobile */
  }
}


.sub-section {
  display: flex;
  flex-wrap: nowrap; /* Ensure the image and text are side by side without wrapping */
  justify-content: center;
  align-items: center;
  padding: 20px; /* Add padding around the entire sub-section */
}

.text {
  flex: 1 1 50%; /* Ensure both text and image take up 50% of the available width */
  padding: 20px; /* Apply padding equally to both sections */
  line-height: 1.5;
  vertical-align: middle;
  text-align: center; /* Center-align the inner div */
  display: flex; /* Flexbox to easily center the inner content */
  justify-content: center; /* Center the inner content horizontally */
}

.text-inner {
  max-width: 500px; /* Limit the text width */
  text-align: left; /* Ensure text is left-aligned */
  margin: 0 auto; /* Center the inner div within the text div */
}

.image {
  flex: 1 1 50%; /* Ensure both text and image take up 50% of the available width */
  padding: 20px; /* Apply padding equally to both sections */
}

.section-image {
  width: 100%; /* Ensure the image takes up the full width of its container */
  height: auto; /* Maintain the aspect ratio */
  max-height: 800px; /* Set the maximum height for the image */
  object-fit: contain; /* Ensure the entire image fits within the container */
}

@media (max-width: 768px) {
  .sub-section {
    flex-direction: column;
    padding: 0; /* Remove padding on smaller screens */
  }

  .text, .image {
    flex: 1 1 100%; /* Ensure both text and image take up 100% of the width on smaller screens */
    padding: 20px; /* Add padding back to each section */
  }
}

@font-face {
  font-family: 'arial-bold';
  src: url('fonts/ARLRDBD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'arial-bold', Arial, sans-serif;
}

footer {
  color: #666;
  font-size: 14px;
  padding: 20px 0;
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
  text-align: center;
  background-color: white; 
}

.horizontal-line {
  border: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
}

h1 {
  font-size: 50px;
  margin: 28px;
}

h2 {
  font-size: 32px;
}

p {
  font-size: 18px;
}