/* Universal Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #324058;
  color: white;
  padding: 5px 20px;
}

.nav {
  list-style-type: none;
}

.nav li {
  display: inline;
  margin-left: 20px;
}

.nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.nav a:hover {
  text-decoration: underline;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the start */
}

.logo-image {
  max-width: 90px;
  height: auto;
}

.logo-text {
  margin-left: 10px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  align-self: center; /* This ensures the text aligns correctly if it's not aligning properly */
  vertical-align: 50%;
}

.logo-container a {
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0px;
}

.banner-container {
  position: relative; /* Makes the container relative for absolute positioning of elements inside */
  text-align: center; /* Centers the text */
  color: white;
}

.banner-image {
width: 100%; /* Ensures the image covers the full container width */
height: auto; /* Maintains aspect ratio */
}

.banner-text {
position: absolute; /* Positions the text over the image */
top: 30%; /* Text vertical position */
left: 50%; /* Centers the text horizontally */
transform: translate(-50%, -50%); /* Adjusts the exact centering of the text */
font-size: 4.5vw; /* Adjusts size based on the width of the viewport */
color: inherit; /* Inherits the text color from the container */
}
.sub-banner-text {
position: absolute;
top: 45%; /* Adjust this value as needed to position the subtext correctly */
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.9vw; /* Adjusts size based on the width of the viewport */
color: inherit; /* Inherits the text color from the container */
}

.features-section {
display: flex;
justify-content: space-around;
padding: 40px;
background-color: #f4f4f4; /* Light grey background */
}

.feature {
display: flex; /* Enables flexbox */
flex-direction: column; /* Stacks flex items vertically */
align-items: center; /* Centers flex items on the cross axis (horizontally for column direction) */
justify-content: center; /* Aligns items along the main axis (vertically for column direction), optional if you want to center the content vertically within the .feature */
text-align: center; /* Ensures the text is centered */
width: 32%; /* Each feature takes up 30% of the container width */
text-align: center; /* Center-aligns the text and image within each feature */
}

.feature img {
max-width: 50px; /* The maximum width of the icon */
max-height: 50px; /* The maximum height of the icon */
width: auto; /* Scales the width automatically to maintain aspect ratio */
height: auto; /* Scales the height automatically to maintain aspect ratio */
margin-bottom: 30px; /* Adds some space below the image */
}

.feature h3 {
min-height: 20px; /* Ensures that all titles have the same minimum height */
font-size: 2.6vw;
margin: 10px 0; /* Adds space above and below the title */
}

.feature p {
font-size: 1.4vw;
margin: 0; /* Removes default paragraph margin */
}

.alternating-section {
margin: 0;
padding: 0;
width: 100%;
}
.content-block {
display: flex;
align-items: center; /* Vertically center the items */
justify-content: space-around; /* Evenly distribute the space around items */
/* background: linear-gradient(to bottom, #cccccc 0%, #f2f2f2 50%, #cccccc 100%); */
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #f2f2f2 0%, #cccccc 50%, #f2f2f2 100%); /* Light grey to darker grey gradient */
}

.about-content-block {
  display: flex;
  align-items: center; /* Vertically center the items */
  justify-content: space-around; /* Evenly distribute the space around items */
  /* background: linear-gradient(to bottom, #cccccc 0%, #f2f2f2 50%, #cccccc 100%); */
  margin: 0;
  padding: 0;
  background-color:  #f2f2f2; /* Light grey to darker grey gradient */
  }

.content-block .text, .content-block .image {
flex-basis: 45%; /* Allocate space to each block */
}

/* If you want to maintain the original padding from the container */
.content-block .text {
padding-right: 0px; /* Adds spacing between text and the image to the right */
font-size: 18px;
}

.content-block .image {
padding-left: 0px; /* Adds spacing between image and the text to the left */
}

.content-block.reverse .text {
padding-left: 0px; /* Adds spacing between text and the image to the left */
padding-right: 0; /* Resets the right padding for the reversed block */
}
.content-block.reverse .image {
padding-left: 0px; /* Adds spacing between text and the image to the left */
padding-right: 0; /* Resets the right padding for the reversed block */
}
/* Additional styles for images to ensure they are not too large */
.content-block .image img {
max-width: 100%; /* Ensures the image is not larger than its container */
height: auto;
}
.content-block.reverse .image img {
max-width: 100%; /* Ensures the image is not larger than its container */
height: auto;
}

.content-block.reverse {
flex-direction: row-reverse;
}

.footer-banner {
background-color: #324058; /* Choose a color that fits your design */
color: white; /* Text color */
text-align: center; /* Centers the text */
padding: 20px 0; /* Adds padding above and below the text */
font-size: 0.8em; /* Adjust the size of the text */
}

.about-section {
  padding: 50px 0;
  text-align: center;
}

.about-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.about-section p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.about-section ul {
  list-style-type: none;
  padding: 0;
}

.about-section ul li {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.about-section .image {
  margin: 20px 0;
}

.about-section .image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}



@media (max-width: 768px) {
.content-block {
  flex-direction: column;
}
  .content-block.reverse {
  flex-direction: column;
}
.container {
  padding: 0 10px;
}
.features-section {
  padding: 10px;
}
.feature img {
  margin-bottom: 30px;
}
.feature h3 {
  font-size: 22px; /* Adjusted for tablets */
}
.feature p {
  font-size: 14px; /* Smaller text for tablets */
}
.content-block .text {
  font-size: 14px;
}
/* Adjust text sizes, image sizes, or other properties as needed */
}