/* Reset some basic elements */
body,
h1,
h2,
p,
ul,
li,
button {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
/* Body and typography styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
}
/* Header and navigation styles */
header {
  background: #092c62;
  color: #fff;
}
.navigation-bar {
  background-color: #092c62;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Logo styles */
.navigation-bar img {
  max-height: 30vh;
  /* Adjust this value to fit the initial size of the navbar */
  width: auto;
  /* Maintain the aspect ratio of the image */
  transition: max-height 0.3s ease-in-out;
  /* Smooth transition for logo resize */
}
/* Add styles for when the user has scrolled */
.scrolled .navigation-bar {
  padding: 0.5rem 10px;
  /* Reduce padding when the navbar is smaller */
}
.scrolled .navigation-bar img {
  max-height: 40px;
  /* or the height you want for the scrolled state */
  max-width: 80px;
  /* or the width you want for the scrolled state */
}
/* Add styles for when the user has scrolled */
.scrolled #large-logo {
  display: none;
}
.scrolled #small-logo {
  display: block;
}
/* Style The Dropdown Button */
.dropbtn {
  background-color: #42a5e9;
  padding: 1em;
  color: white;
  font-size: 1em;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  right: 0;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #f1f1f1;
  color: #092c62;
}
/* Adjust the logo and button spacing for mobile screens */
@media (max-width: 768px) {
  .navigation-bar img {
    max-height: auto;
    /* smaller than on desktop to save space */
    max-width: 80vw;
    /* adjust accordingly */
  }
  .navigation-bar .dropbtn {
    padding: 0.5rem;
  }
}
/* Main content styles */
main {
  padding-top: 30vh;
  /* Add some space to the top of the main content */
  background: #389be3;
}
/* Section styles */
section {
  margin: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 1em;
}
/* Hero image styles */
.hero {
  background: url("herobackground.jpg") no-repeat center center/cover;
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
  color: #fff;
  /* Adjust text color as needed */
}
.hero-content h2 {
  margin-bottom: 20px;
  font-size: 2.5em;
}
.rotating-text {
  list-style: none;
  height: 50em;
  /* Adjust based on your text size */
  overflow: hidden;
}
.rotating-text li {
  position: absolute;
  opacity: 0;
  font-size: 4em;
  animation: rotateText 30s linear infinite 0s;
  /* Adjust the animation duration and delay for each li element */
}
/* Keyframes for text rotation */
@keyframes rotateText {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* Set the animation delay for each list item */
.rotating-text li:nth-child(1) {
  animation-delay: 0s;
}
.rotating-text li:nth-child(2) {
  animation-delay: 5s;
}
.rotating-text li:nth-child(3) {
  animation-delay: 10s;
}
.rotating-text li:nth-child(4) {
  animation-delay: 15s;
}
.rotating-text li:nth-child(5) {
  animation-delay: 20s;
}
.rotating-text li:nth-child(6) {
  animation-delay: 25s;
}
/* Add more for each additional list item */
/* Services list style */
.service-list li {
  border-bottom: 1px solid #eee;
  padding: 0.1em;
  list-style: square;
}
/* Testimonial styles */
.testimonial-container blockquote {
  font-style: italic;
  border-left: 4px solid #092c62;
  padding-left: 20px;
  margin: 20px 0;
}
/* Contact form styles */
.contact-container form {
  margin-top: 20px;
}
.contact-container label {
  display: block;
  margin-bottom: 5px;
}
.contact-container input,
.contact-container textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.contact-container button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #092c62;
  color: #fff;
  cursor: pointer;
}
.contact-container button:hover {
  background-color: #004d61;
}
/* Footer styles */
footer {
  text-align: center;
  background: #092c62;
  color: #fff;
}