/* Construction Page Styles */
body {
  line-height: 1.5;
  padding: 0;
  margin: 0;
  color: #333;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

/* Header Styles */
header {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  color: #333;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  text-align: center;
}

header .intro {
  position: relative; /* Added to allow absolute positioning of children */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  margin-bottom: 10px; /* Add space after intro */
}

.logo-container {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: -15px; /* Move logo up */
  margin-right: 60px; /* Increased from 40px to move logo further from content */
  margin-left: 100px; /* Keep this value as is */
}

.img-logo {
  max-width: 175px;
  height: auto;
}

.content-container {
  position: absolute; /* Changed to absolute positioning */
  left: 50%; /* Center horizontally */
  display: flex;
  align-items: center;
  flex-direction: column;
  width: auto;
  padding-top: 0;
  margin-top: -20px; /* Increased from 0 to 50px to move content up */
  transform: translateX(-50%); /* Offset by half its width */
  text-align: center;
}

header h1 {
  width: 100%;
  margin: 0 auto 5px;
  color: #2c3e50;
  text-align: center;
  font-size: 2.25rem;
}

header h2 {
  width: 100%;
  margin: 5px 0 15px;
  color: #2c3e50;
  text-align: center;
  font-size: 1.62rem;
}

.content-container h3 {
  display: flex;
  align-items: center; /* Restore center alignment */
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: -30px auto 15px; /* Changed from -15px to -30px to move it up by additional 15px */
}

header h3 {
  width: 100%;
  margin: 2px 0;
  color: #34495e;
  text-align: center; /* Restore center alignment */
  white-space: nowrap; /* Prevent wrapping */
  font-size: 1.08rem;
  font-weight: normal;
}

header p {
  margin: 8px 0;
  text-align: center; /* Restore center alignment */
  white-space: nowrap; /* Prevent phone number from wrapping */
  font-size: 1rem;
}

header a {
  color: #3498db;
  font-weight: bold;
  text-decoration: none;
}

header a:hover {
  text-decoration: underline;
}

/* Navigation Styles */
nav {
  display: flex;
  justify-content: center;
  width: 50%; /* Reduced from 70% to 50% (additional 20% reduction) */
  max-width: 560px; /* Reduced from 700px to 560px (additional 20% reduction) */
  padding: 0;
  margin-top: 10px; /* Reduced from 20px */
  background-color: #2980b9; /* Darker blue for better visibility */
 z-index: 10; /* Higher numbers mean on top */
}

.nav-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px; /* Narrower to match three columns better */
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.nav-bar li {
  flex: 1;
  max-width: 150px; /* Smaller max-width */
  margin: 0;
  text-align: center;
}

.menu-item,
.contact-button {
  display: block;
  padding: 8px 15px; /* Even smaller padding */
  color: white;
  transition: background-color 0.3s;
  font-size: 1.25rem; /* Slightly smaller font */
  font-weight: bold;
  text-decoration: none;
}

.menu-item:hover,
.contact-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Slogan Section */
.slogan {
  max-width: 800px;
  padding: 10px 20px; /* Reduced top padding from 20px to 10px */
  margin: 0 auto;
  text-align: center;
}

.slogan h2 {
  margin-bottom: 20px;
  color: #3498db;
  font-size: 1.44rem; /* Reduced by 20% from 1.8rem */
}

.slogan p {
  margin-bottom: 15px;
  color: #555;
  font-size: 1.21rem; /* Increased by 10% from 1.1rem */
}

/* Service Container */
.service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px; /* Reduced from 1200px to better match the 60% navbar width */
  padding: 20px;
  margin: 0 auto;
}

.service-column {
  overflow: hidden;
  flex: 0 0 calc(33.333% - 30px);
  margin: 15px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.service-heading {
  padding: 15px;
  margin: 0;
  color: white;
  background-color: #3498db;
  text-align: center;
  font-size: 1.3rem;
}

.services {
  padding: 20px;
}

.services p {
  margin-top: 0;
  margin-bottom: 15px;
}

.services strong {
  display: block;
  color: #3498db;
  text-align: center;
  font-size: 1.1rem;
}

/* Responsive Styles */
@media (max-width: 900px) {
  .service-column {
    flex: 0 0 calc(50% - 30px);
  }

  .slogan h2 {
    font-size: 1.6rem;
  }

  .slogan p {
    font-size: 1.1rem; /* Increased by 10% from 1rem */
  }

  /* Keep the header layout horizontal on tablets */
  header .intro {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; /* Keep left alignment for small screens */
    text-align: left;
  }

  .logo-container {
    padding-top: 0;
    margin-right: 20px; /* Keep original spacing for tablet */
    margin-bottom: 0;
  }

  .content-container {
    position: static;
    align-items: flex-start;
    flex: 0 1 auto;
    min-width: 0;
    padding-top: 0;
    margin-left: 0;
  }

  header h1 {
    text-align: left; /* Keep left alignment for small screens */
  }

  header h2 {
    margin: 5px 0 15px;
    text-align: left; /* Keep left alignment for small screens */
  }

  header h3 {
    text-align: center; /* Restore center alignment */
    white-space: normal; /* Allow wrapping on smaller screens */
    font-size: 1rem;
  }

  header p {
    text-align: center; /* Restore center alignment */
    white-space: normal; /* Allow wrapping on smaller screens */
  }

  nav {
    clear: both;
    width: 60%; /* Restored original width for tablet */
    max-width: none; /* Remove max-width constraint */
    margin-top: 10px;
  }
}

@media (max-width: 600px) {
  header h1 {
    text-align: center;
    font-size: 1.62rem; /* Reduced by 10% from 1.8rem */
  }

  header h2 {
    margin: 5px 0 15px;
    text-align: center;
    font-size: 1.215rem; /* Reduced by 10% from 1.35rem */
  }

  .h3-container {
    align-items: center; /* Restore center alignment */
    margin: 30px auto 15px; /* Changed from 10px to 30px to move it down by another 20px */
    text-align: center; /* Restore center alignment */
  }

  header h3 {
    text-align: center; /* Restore center alignment */
    white-space: normal;
    font-size: 0.891rem; /* Reduced by 10% from 0.99rem */
  }

  header p {
    text-align: center; /* Restore center alignment */
    white-space: normal;
    font-size: 0.9rem; /* Reduced by 10% from 1rem */
  }

  .service-column {
    flex: 0 0 100%;
  }

  .img-logo {
    max-width: 120px; /* Reduced by 20% from 150px */
  }

  .slogan h2 {
    font-size: 1.4rem;
  }

  .slogan p {
    font-size: 1.045rem; /* Increased by 10% from 0.95rem */
  }

  /* Adjust header layout for mobile */
  header .intro {
    position: relative; /* Ensure relative positioning for absolute children */
    justify-content: center;
    padding: 0 10px;
    margin-bottom: 5px;
  }

  .content-container {
    position: relative; /* Changed to relative positioning */
    left: auto; /* Reset left position */
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 auto; /* Changed from 80px to 0 to move content up level with logo */
    transform: none; /* Reset transform */
    text-align: center;
  }

  .logo-container {
    position: absolute;
    top: -5px; /* Changed from 0 to -5px to move logo up by 5px */
    left: 0; /* Position at the left edge */
    padding: 0;
    margin: 0; /* Reset all margins */
  }
}

@media (max-width: 480px) {
  header h1 {
    text-align: center;
    font-size: 1.296rem; /* Reduced by 10% from 1.44rem */
  }

  header h2 {
    margin: 5px 0 15px;
    font-size: 0.972rem; /* Reduced by 10% from 1.08rem */
  }

  header h3 {
    text-align: center; /* Restore center alignment */
    white-space: normal;
    font-size: 0.729rem; /* Reduced by 10% from 0.81rem */
  }

  header p {
    margin: 5px 0;
    text-align: center; /* Restore center alignment */
    font-size: 0.81rem; /* Reduced by 10% from 0.9rem */
  }

  .slogan h2 {
    margin-bottom: 15px;
    font-size: 1.2rem;
  }

  .slogan p {
    margin-bottom: 10px;
    font-size: 0.99rem; /* Increased by 10% from 0.9rem */
  }

  .img-logo {
    max-width: 80px; /* Reduced by 20% from 100px */
  }

  nav {
    width: 95%; /* Restored original width for smallest screens */
    max-width: none; /* Remove max-width constraint */
    margin-top: 10px;
  }

  .menu-item,
  .contact-button {
    padding: 6px 10px;
    font-size: 1.1rem;
  }

  /* Ensure logo and content fit side by side on small screens */
  .logo-container {
    position: absolute;
    top: -5px; /* Changed from 0 to -5px to move logo up by 5px */
    left: 0; /* Position at the left edge */
    padding: 0;
    margin: 0; /* Reset all margins */
  }

  .content-container {
    position: relative; /* Changed to relative positioning */
    left: auto; /* Reset left position */
    align-items: center;
    width: 100%;
    margin: 0 auto; /* Changed from 80px to 0 to move content up level with logo */
    transform: none; /* Reset transform */
    text-align: center;
  }

  .h3-container {
    align-items: center; /* Restore center alignment */
    margin: 30px auto 15px; /* Changed from 10px to 30px to move it down by another 20px */
  }
}