/* Theme Variables - Light (Default) and Dark */
:root {
  /* Color Palette - Light Theme (Classic, Professional) */
  --clr-primary: #2c3e50; /* Refined dark blue/slate */
  --clr-secondary: #5d6d7e; /* Subtle gray-blue */
  --clr-accent: #3498db; /* Clearer blue for highlights */
  --clr-bg: #f8f9fa; /* Very light gray background */
  --clr-surface: #ffffff; /* White for cards, modals */
  --clr-text: #343a40; /* Dark gray body text */
  --clr-heading-text: #212529; /* Slightly darker heading text */
  --clr-border: #dee2e6; /* Light gray border */

  /* Typography */
  --font-heading: "Georgia", serif; /* Classic Serif */
  --font-body: "Open Sans", sans-serif; /* Changed to Open Sans */
  --font-size-base: 16px;

  /* Spacing */
  --unit-spacing: 1rem; /* Base unit for padding/margin */

  /* Other UI elements (add more as needed) */
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dark-theme {
  /* Color Palette - Dark Theme */
  --clr-primary: #5fa8d3; /* Lighter blue for primary on dark */
  --clr-secondary: #8a9aab; /* Lighter gray-blue */
  --clr-accent: #6fc4f7; /* Lighter, vibrant accent blue */
  --clr-bg: #1a1a1a; /* Very dark gray background */
  --clr-surface: #2c2c2c; /* Slightly lighter dark gray for surfaces */
  --clr-text: #e9ecef; /* Light gray text */
  --clr-heading-text: #f8f9fa; /* Off-white heading text */
  --clr-border: #495057; /* Darker gray border */

  /* Typography remains the same, but could be overridden if needed */

  /* Spacing remains the same */

  /* Other UI elements */
  --box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1); /* Adjusted shadow for dark */
}

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body); /* Use the variable */
  line-height: 1.7; /* Set base line height */
  color: var(--clr-text); /* Use text color variable */
  background-color: var(--clr-bg); /* Use background color variable */
  margin: 0; /* Ensure no default body margin */
}

/* Footer Styles - Mobile First */
footer {
  background-color: #1a3561; /* Slightly lighter dark blue */
  color: #ccc;
  padding: 2.5rem 0; /* Slightly increased vertical padding */
  font-size: 0.95rem; /* Slightly adjust base font size for footer content */
}

.footer-container {
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  gap: 35px; /* Slightly increased space between sections on mobile */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-section {
  margin-bottom: 20px; /* Consistent space below each section */
}

.footer-section:last-of-type {
  margin-bottom: 0; /* No margin for the last section before footer-bottom */
}

.footer-section h4 {
  color: white;
  margin-bottom: 18px; /* Increased margin */
  font-size: 1.15em; /* Slightly larger section titles */
  border-bottom: 1px solid #4a6591;
  padding-bottom: 10px; /* Increased padding */
  font-weight: 600; /* Bolder titles */
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 10px; /* Increased spacing for links */
}

.footer-section ul li:last-child {
  margin-bottom: 0;
}

.footer-section a {
  color: #d0d0d0; /* Slightly brighter link color */
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Contact Info Icons */
.contact-info p {
  margin-bottom: 12px; /* Increased spacing */
  line-height: 1.6; /* Improved line height */
  display: flex; /* For better icon alignment */
  align-items: flex-start; /* Align icon with the start of the text */
}

.contact-info p:last-child {
  margin-bottom: 0;
}

.contact-info p i {
  margin-right: 10px; /* Increased space */
  color: #d0d0d0; /* Match link color */
  width: 1.3em; /* Adjust icon alignment box */
  text-align: center;
  margin-top: 0.1em; /* Fine-tune vertical alignment with text */
}

.footer-bottom {
  text-align: center;
  margin-top: 35px; /* Increased separation */
  padding-top: 20px; /* Increased padding */
  border-top: 1px solid #4a6591;
  font-size: 0.9em; /* Slightly larger copyright text */
  color: #b0b0b0; /* Slightly brighter copyright text */
}

/* Adjustments within the existing media query for Tablet/Desktop */
@media (min-width: 768px) {
  /* Footer Styles (Tablet/Desktop) */
  .footer-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 25px; /* Adjusted gap for horizontal layout */
  }

  .footer-section {
    margin-bottom: 0;
  }

  .footer-section.info-links {
    margin-right: auto;
  }

  .footer-section.contact-info {
    margin-left: auto; /* Push this section to the far right */
  }

  .footer-bottom {
    margin-top: 45px; /* Further increased separation on desktop */
    padding-top: 25px;
  }
}

/* === Hero Section Start === */
/* Hero Section Styles */
.hero-section {
  padding: 60px 20px;
  /* background: linear-gradient(to bottom, #e0eafc, #cfdef3); REMOVED */
  background-color: #f8f9fa; /* Changed background to off-white */
  /* text-align: center; REMOVED - handled by flex */
  color: #333;
  overflow: hidden; /* Prevent potential overflow issues */
}

.hero-content {
  /* NEW: Container for flex layout */
  display: flex;
  flex-direction: column; /* Mobile: Stack text and image */
  align-items: center;
  text-align: center;
  gap: 30px; /* Space between text and image on mobile */
  max-width: 1200px; /* Optional: Limit max width of content */
  margin: 0 auto; /* Center the content container */
}

.hero-text {
  /* NEW: Container for text content */
  max-width: 600px; /* Limit text width on mobile/center */
}

.hero-section h1 {
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.2;
  color: #0a2351; /* Use primary color for heading */
}

.hero-section p {
  font-size: 1.1em;
  margin-bottom: 30px;
  line-height: 1.6; /* Increased line-height for readability */
  color: #555;
}

.hero-image {
  /* NEW: Container for image */
  max-width: 400px; /* Limit image size */
  width: 80%; /* Responsive width */
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block; /* Remove extra space below image */
  border-radius: 8px; /* Optional: slight rounding */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

/* Button adjustments specific to hero */
.hero-section .btn {
  margin-top: 0; /* Override potential base margin */
  padding: 14px 28px; /* Slightly larger padding */
  font-size: 1.05em; /* Slightly larger font */
}

.hero-section .btn i {
  /* Style for icon */
  margin-right: 8px;
}

/* Tablet/Desktop Media Queries for Hero */
@media (min-width: 768px) {
  .hero-section {
    padding: 80px 40px;
  }

  .hero-content {
    flex-direction: row; /* Side-by-side layout */
    justify-content: space-between; /* Space between text and image */
    align-items: center;
    text-align: left; /* Align text to the left */
    gap: 40px; /* Space between text and image */
  }

  .hero-text {
    flex: 1; /* Allow text to take available space */
    max-width: none; /* Remove max-width limit */
  }

  .hero-section h1 {
    font-size: 2.8em;
  }

  .hero-section p {
    font-size: 1.2em;
  }

  .hero-image {
    flex-basis: 45%; /* Control image width relative to container */
    max-width: 450px; /* Max width for image */
    width: auto; /* Reset width */
    margin-left: 20px; /* Add some space from text */
  }

  .hero-section .btn {
    padding: 15px 30px;
    font-size: 1.1em;
  }
}

@media (min-width: 992px) {
  .hero-section {
    padding: 100px 60px; /* More padding on larger screens */
  }
  .hero-section h1 {
    font-size: 3.2em; /* Even larger heading */
  }
  .hero-section p {
    font-size: 1.25em;
  }
  .hero-image {
    flex-basis: 40%;
    max-width: 500px;
  }
}
/* === Hero Section End === */

/* === Base Button Styles (Adjusted) === */
.btn {
  display: inline-block;
  padding: 12px 25px; /* Base padding */
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  /* margin-top: 20px; REMOVED - Apply margin contextually */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform transition */
}

.btn-primary {
  background-color: #0a2351; /* Match header color */
  color: white;
}

.btn-primary:hover {
  background-color: #1a3561; /* Slightly darker on hover */
}

/* Adjustments within the existing media query for Tablet/Desktop */
@media (min-width: 768px) {
  /* Hero Section Styles (Tablet/Desktop) */
  .hero-section {
    padding: 80px 40px;
    /* text-align: left; */ /* Optional: Uncomment for left align */
  }

  .hero-section h1 {
    font-size: 2.8em;
    /* margin-left: 0; */ /* Adjust if text-align is left */
  }

  .hero-section p {
    font-size: 1.2em;
    /* margin-left: 0; */ /* Adjust if text-align is left */
    max-width: 700px; /* Limit width for readability */
    margin-left: auto; /* Center if text-align is center */
    margin-right: auto; /* Center if text-align is center */
  }

  .btn {
    padding: 15px 30px; /* Slightly larger button on desktop */
    font-size: 1em;
  }
}

/* How It Works Section Styles - Mobile First */
.how-it-works-section {
  padding: 40px 20px;
  background-color: #f8f9fa; /* Light grey background */
}

.how-it-works-section h2 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 30px;
  color: #333;
}

.cards-container {
  display: flex;
  flex-direction: column; /* Stack cards vertically */
  gap: 20px;
}

.info-card {
  background-color: white;
  padding: 25px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 2.5em; /* Placeholder size */
  margin-bottom: 15px;
  color: #0a2351; /* Use primary color */
  /* Add more styling for actual icons later */
}

.info-card h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #333;
}

.info-card p {
  font-size: 0.95em;
  line-height: 1.6;
  color: #666;
}

/* Tablet/Desktop Media Queries */
@media (min-width: 768px) {
  /* How It Works Section (Tablet) */
  .how-it-works-section {
    padding: 60px 40px;
  }

  .how-it-works-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }

  .cards-container {
    flex-direction: row; /* Horizontal layout */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center cards */
    gap: 20px;
  }

  .info-card {
    flex-basis: calc(50% - 15px); /* 2 columns, accounting for gap */
    /* Adjust gap calculation if gap changes */
  }
}

@media (min-width: 992px) {
  /* How It Works Section (Desktop) */
  .cards-container {
    flex-wrap: nowrap; /* Prevent wrapping for 4 columns */
    gap: 25px; /* Optional: Adjust gap */
  }

  .info-card {
    flex-basis: calc(
      25% - 19px
    ); /* 4 columns, accounting for 25px gap (25*3/4) */
    /* Adjust gap calculation if gap changes */
  }
}

/* Stats Section Styles - Mobile First */
.stats-section {
  padding: 50px 20px;
  background-color: #0a2351; /* Primary dark blue */
  color: white;
}

.stats-container {
  display: flex;
  flex-direction: column; /* Stack vertically */
  gap: 35px; /* Generous gap for mobile */
  align-items: center; /* Center items */
}

.stat-item {
  text-align: center;
}

/* NEW: Styles for the icon */
.stat-icon {
  font-size: 2.5em; /* Adjust icon size */
  color: #ffffff; /* White icon color, match numbers */
  margin-bottom: 15px; /* Space below icon */
  opacity: 0.8; /* Slightly less prominent than numbers */
}

.stat-figure {
  /* margin-bottom: 5px; Reduced margin as icon adds space */
  margin-bottom: 8px; /* Adjusted space */
}

.stat-number {
  font-size: 2.8em;
  font-weight: bold;
  display: inline-block; /* Allow unit to sit beside if needed */
  line-height: 1.1;
  color: #ffffff; /* White number */
}

.stat-unit {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block; /* Sit next to number */
  margin-left: 5px;
  color: #c0d0f0; /* Lighter blue/grey */
}

/* Adjustments for numbers without units */
.stat-item:nth-child(2) .stat-number,
.stat-item:nth-child(3) .stat-number {
  /* Optional: slightly larger if no unit */
  /* font-size: 3em; */
}

.stat-label {
  font-size: 0.9em;
  text-transform: uppercase;
  color: #c0d0f0; /* Lighter blue/grey */
  letter-spacing: 0.5px;
}

/* Media Query for Small Tablets (e.g., 2 columns) */
@media (min-width: 576px) {
  .stats-container {
    flex-direction: row; /* Side-by-side */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center items */
    gap: 30px 40px; /* Row gap, Column gap */
  }

  .stat-item {
    flex-basis: calc(50% - 20px); /* 2 columns, adjust for column gap */
  }
}

/* Media Query for Desktops (e.g., 4 columns) */
@media (min-width: 992px) {
  .stats-section {
    padding: 60px 40px;
  }

  .stats-container {
    flex-wrap: nowrap; /* Force single row */
    justify-content: space-around; /* Distribute space */
    gap: 20px; /* Adjust gap */
  }

  .stat-item {
    flex-basis: auto; /* Reset basis, let flexbox handle */
  }

  .stat-number {
    font-size: 3.2em;
  }

  .stat-unit {
    font-size: 1.1em;
  }

  .stat-label {
    font-size: 1em;
  }

  /* How It Works Section (Desktop) */
  .cards-container {
    flex-wrap: nowrap; /* Prevent wrapping for 4 columns */
    gap: 25px; /* Optional: Adjust gap */
  }

  .info-card {
    flex-basis: calc(
      25% - 19px
    ); /* 4 columns, accounting for 25px gap (25*3/4) */
    /* Adjust gap calculation if gap changes */
  }
}

/* About Us & Why Us Section Styles - Mobile First */
.about-us-section,
.why-us-section {
  padding: 40px 20px;
}

.about-us-section {
  background-color: white; /* Keep About Us white */
}

.why-us-section {
  background-color: #f8f9fa; /* Light grey for Why Us */
}

.about-us-section h2,
.why-us-section h2 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 25px;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

/* Simple underline effect for headings */
.about-us-section h2::after,
.why-us-section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #0a2351; /* Primary color */
}

.about-us-section p,
.why-us-section p {
  font-size: 1em;
  line-height: 1.7;
  color: #666;
  margin-bottom: 20px;
}

.about-us-section p:last-child,
.why-us-section p:last-child {
  margin-bottom: 0;
}

/* Media Query Adjustments */
@media (min-width: 768px) {
  /* About/Why Us Section (Tablet/Desktop) */
  .about-us-section,
  .why-us-section {
    padding: 60px 40px;
  }

  .about-us-section h2,
  .why-us-section h2 {
    font-size: 2em;
    margin-bottom: 35px;
  }

  .about-us-section p,
  .why-us-section p {
    font-size: 1.05em;
    max-width: 800px; /* Limit text width */
    margin-left: auto;
    margin-right: auto;
  }

  /* About/Why Us Section (Tablet/Desktop) */
  .about-us-section,
  .why-us-section {
    padding: 60px 40px;
  }

  .about-us-section h2,
  .why-us-section h2 {
    font-size: 2em;
    margin-bottom: 35px;
  }

  .about-us-section p,
  .why-us-section p {
    font-size: 1.05em;
    max-width: 800px; /* Limit text width */
    margin-left: auto;
    margin-right: auto;
  }
}

/* News Preview Section Styles - Mobile First */
.news-preview-section {
  padding: 40px 20px;
  background-color: white;
}

.news-preview-section h2 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 30px;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

/* Reusing the underline effect */
.news-preview-section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #0a2351; /* Primary color */
}

.news-item {
  background-color: #f8f9fa; /* Light background for the item */
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.news-date {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 8px;
  display: block; /* Ensure it takes its own line */
}

.news-title {
  font-size: 1.25em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.news-excerpt {
  font-size: 0.95em;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
}

.news-read-more {
  color: #0a2351; /* Primary color */
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9em;
  transition: color 0.3s ease;
}

.news-read-more:hover {
  color: #1a3561; /* Darker shade on hover */
  text-decoration: underline;
}

/* Media Query Adjustments */
@media (min-width: 768px) {
  /* News Preview Section (Tablet/Desktop) */
  .news-preview-section {
    padding: 60px 40px;
  }

  .news-preview-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }

  .news-item {
    padding: 25px;
    max-width: 750px; /* Limit width and center */
    margin-left: auto;
    margin-right: auto;
  }

  .news-title {
    font-size: 1.4em;
  }

  .news-excerpt {
    font-size: 1em;
  }

  .news-read-more {
    font-size: 0.95em;
  }
}

/* === Testimonials Section Start === */
.testimonials-section {
  background-color: #eef2f7; /* Slightly different light background */
  padding: 60px 20px;
  /* text-align: center; Removed, handled by flex */
}

.testimonials-section h2 {
  text-align: center;
  font-size: 1.8em;
  color: #1a3561;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 40px; /* Added more margin */
}

.testimonials-section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #007bff; /* Accent color */
}

.testimonials-container {
  position: relative; /* For positioning arrows */
  max-width: 800px; /* Constrain width for single item view */
  margin: 40px auto 0;
  overflow: hidden; /* Hide non-active cards */
  /* display: flex; etc. - Removed, not needed for simple show/hide slider */
}

.testimonial-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 35px 30px; /* Increased padding */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
  /* No border needed with shadow and background */
  display: none; /* Hide all cards by default */
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 280px; /* Give cards a consistent minimum height */
  box-sizing: border-box;
}

/* Active card is displayed by JS */
.testimonial-card.active {
  display: flex; /* Use flex to center content vertically */
}

/* NEW: Styles for the icon container */
.author-icon-container {
  width: 70px;
  height: 70px;
  border-radius: 50%; /* Make it circular */
  margin-bottom: 20px;
  background-color: #e9ecef; /* Light grey background */
  display: flex; /* Center the icon inside */
  align-items: center;
  justify-content: center;
  border: 1px solid #ced4da; /* Optional subtle border */
}

/* NEW: Styles for the icon itself */
.author-icon-container i {
  font-size: 2.8em; /* Adjust icon size as needed */
  color: #6c757d; /* Muted grey color for the icon */
}

.testimonial-quote {
  font-style: italic;
  color: #444; /* Slightly darker quote text */
  margin: 0 0 20px 0;
  font-size: 1.05em; /* Slightly larger quote font */
  line-height: 1.6;
  position: relative;
  padding: 0 15px; /* Space for quote marks */
  flex-grow: 1; /* Allow quote to fill space */
}

/* Adding visual quote marks */
.testimonial-quote::before,
.testimonial-quote::after {
  content: '"';
  position: absolute;
  font-size: 3em;
  color: #007bff; /* Accent color */
  opacity: 0.3;
  line-height: 1;
}

.testimonial-quote::before {
  top: -10px;
  left: -5px;
}

.testimonial-quote::after {
  bottom: -15px;
  right: -5px;
}

.testimonial-author {
  font-weight: bold;
  color: #1a3561; /* Primary dark blue for author */
  font-style: normal;
  display: block;
  margin-top: auto; /* Push author to bottom */
  font-size: 1em;
}

/* Slider Buttons */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.35); /* Slightly adjusted transparency */
  color: white;
  border: none;
  padding: 0; /* Remove padding if using fixed size + flex */
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  font-size: 1.2em; /* Adjusted icon size (tweak as needed) */
  line-height: 1; /* Ensure consistent line height */
  width: 42px; /* Slightly adjusted size */
  height: 42px;
  display: flex; /* Crucial for centering icon */
  align-items: center; /* Center icon vertically */
  justify-content: center; /* Center icon horizontally */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform transition */
}

.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.65); /* Darker on hover */
  transform: translateY(-50%) scale(1.1); /* Add slight scale effect */
}

.prev-btn {
  left: -20px; /* Bring slightly closer */
}

.next-btn {
  right: -20px; /* Bring slightly closer */
}

/* Media Query Adjustments */
@media (max-width: 900px) {
  /* Adjust breakpoint based on container width + button offset */
  .prev-btn {
    left: 8px; /* Keep buttons inside on smaller screens */
  }
  .next-btn {
    right: 8px; /* Keep buttons inside on smaller screens */
  }
}

@media (max-width: 767px) {
  .testimonials-section {
    padding: 40px 15px;
  }
  .testimonials-section h2 {
    font-size: 1.6em;
  }
  .testimonial-card {
    padding: 25px 20px;
    min-height: 260px;
  }
  .testimonial-quote {
    font-size: 1em;
  }
  .prev-btn,
  .next-btn {
    width: 36px; /* Slightly smaller on mobile */
    height: 36px;
    font-size: 1em; /* Smaller icon */
  }
  .prev-btn {
    left: 10px;
  }
  .next-btn {
    right: 10px;
  }
}
/* === Testimonials Section End === */

/* ==============================
   FAQ Section
   ============================== */
.faq-section {
  padding: 60px 20px;
  background-color: #ffffff; /* White background */
  max-width: 900px; /* Limit width for better readability */
  margin: 40px auto; /* Center the section */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.faq-section h2 {
  text-align: center;
  font-size: 1.8em;
  color: #1a3561; /* Consistent heading color */
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 40px; /* Space below heading */
}

.faq-section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #007bff; /* Accent color */
}

.faq-item {
  border-bottom: 1px solid #e0e0e0; /* Separator */
  margin-bottom: 15px;
}

.faq-item:last-child {
  border-bottom: none; /* No border for the last item */
  margin-bottom: 0;
}

.faq-question {
  background-color: transparent; /* No background for the button */
  color: #333;
  cursor: pointer;
  padding: 15px 0; /* Vertical padding, no horizontal */
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.1em;
  font-weight: 600; /* Make questions bolder */
  transition: background-color 0.3s ease; /* Keep hover effect */
  display: flex; /* Use flexbox */
  justify-content: space-between; /* Push icon to the right */
  align-items: center; /* Align items vertically */
}

.faq-question:hover {
  background-color: #f8f9fa; /* Slight hover effect */
}

/* Re-add styles for the indicator span */
.faq-indicator {
  font-size: 1.4em;
  font-weight: bold;
  color: #007bff; /* Accent color */
  transition: transform 0.3s ease;
  margin-left: 10px; /* Keep space */
}

/* Style for when question is active/expanded (using ARIA attribute) */
.faq-question[aria-expanded="true"] .faq-indicator {
  transform: rotate(45deg); /* Changes + to x-like shape */
}

.faq-answer {
  /* Correct styles from previous step - no max-height/overflow/transition */
  background-color: #f8f9fa;
  color: #555;
  font-size: 0.95em;
  line-height: 1.6;
  padding: 15px;
}

.faq-answer p {
  margin-top: 0;
  margin-bottom: 10px;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Media Query Adjustments */
@media (min-width: 768px) {
  .faq-section {
    padding: 80px 40px;
  }
  .faq-section h2 {
    font-size: 2em;
  }
  .faq-question {
    font-size: 1.2em;
    padding: 20px 0;
  }
  /* Ensure faq-indicator styles persist or adjust if needed */
  .faq-indicator {
    /* Adjust size/spacing if needed for larger screens */
  }
  .faq-answer {
    font-size: 1em;
    padding: 20px;
  }
}

/* ==============================
   Final CTA Section
   ============================== */
.final-cta-section {
  padding: 40px 20px;
  background-color: #0a2351; /* Using primary dark blue */
  color: #ccc; /* Light grey text */
}

.cta-content {
  text-align: center;
}

.cta-content p {
  font-size: 1.1em;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

/* Media Query Adjustments */
@media (min-width: 768px) {
  /* Final CTA Section (Tablet/Desktop) */
  .final-cta-section {
    padding: 60px 40px;
  }

  .cta-content p {
    font-size: 1.2em;
    max-width: 850px;
  }

  /* Modal Adjustments */
  .modal-content {
    max-width: 600px;
    padding: 30px;
  }

  #modal-title {
    font-size: 1.7em;
  }

  /* Optional: Make button not full width on desktop */
  /*
    .form-submit-btn {
        width: auto;
        display: inline-block;
    }
    */
}

/* Modal Styles - Mobile First */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent body scrolling when modal is open */
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  display: flex; /* Show the modal */
}

/* Optional overlay for closing modal on click */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.modal-content {
  position: relative;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 500px; /* Set a base width, adjusted by max-width */
  max-height: 85vh;
  overflow-y: auto;
  z-index: 1001; /* Above overlay */
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 2.2em;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #333;
}

#modal-title {
  font-size: 1.5em;
  color: #0a2351;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Form Styling */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 0.9em;
  color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0a2351;
  background-color: white;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Mobile Number Group Styling */
.mobile-input-container {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Align items vertically */
  gap: 5px; /* Small gap between select and input */
}

.mobile-input-container select {
  flex: 0 0 auto; /* Don't grow, don't shrink, base width on content/explicit width */
  width: auto; /* Adjust width based on content */
  min-width: 80px; /* Ensure a minimum width */
  max-width: 120px; /* Prevent it from becoming too wide */
}

.mobile-input-container input[type="tel"] {
  flex: 1 1 auto; /* Allow growing and shrinking, take up remaining space */
  width: auto; /* Let flexbox determine the width */
}

.form-submit-btn {
  width: 100%;
  padding: 12px 25px;
  font-size: 1.1em;
  margin-top: 10px;
}

/* Media Query Adjustments */
@media (min-width: 768px) {
  /* Header Styles */
  .header-container {
    flex-direction: row; /* Back to horizontal */
    justify-content: space-between;
    align-items: center;
    gap: 0; /* Reset gap */
  }
  .menu-toggle {
    display: none; /* Hide toggle on larger screens */
  }
  nav {
    width: auto; /* Reset width */
  }
  nav ul {
    display: flex !important; /* Override mobile 'none' and ensure flex */
    flex-direction: row;
    gap: 25px;
    width: auto;
  }
  nav ul li {
    border-bottom: none; /* Remove mobile border */
  }
  nav ul li a {
    padding: 5px 0; /* Reset padding */
  }
  nav ul li a:hover {
    background-color: transparent; /* Reset hover background */
    color: #cccccc; /* Restore desktop hover color */
  }
  .dropdown-menu {
    display: none; /* Keep hidden initially */
    position: absolute; /* Back to absolute */
    top: 100%;
    left: 0;
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    z-index: 1000;
    padding-left: 10px; /* Reset padding */
  }
  .dropdown-menu li {
    margin-bottom: 5px;
    border-bottom: none; /* Remove mobile border */
  }
  .dropdown-menu li a {
    color: #333;
    padding: 5px 10px; /* Adjust padding */
    white-space: nowrap;
  }
  .dropdown-menu li a:hover {
    color: #0a2351;
    background-color: #f0f0f0; /* Light grey hover */
  }

  /* Footer Styles */
  .footer-container {
    flex-direction: row; /* Arrange sections horizontally */
    align-items: flex-start; /* Align items to the top */
    gap: 25px; /* Adjusted gap for horizontal layout */
  }
  .footer-section {
    margin-bottom: 0; /* Remove bottom margin */
  }
  .footer-section.info-links {
    margin-right: auto;
  }
  .footer-section.contact-info {
    margin-left: auto; /* Push this section to the far right */
  }
  .footer-bottom {
    margin-top: 45px; /* Further increased separation on desktop */
    padding-top: 25px;
  }

  /* Hero Section Styles */
  .hero-section {
    padding: 80px 40px;
    /* text-align: left; */
  }
  .hero-section h1 {
    font-size: 2.8em;
    /* margin-left: 0; */
  }
  .hero-section p {
    font-size: 1.2em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .btn {
    padding: 15px 30px; /* Slightly larger button on desktop */
    font-size: 1em;
  }

  /* How It Works Section */
  .how-it-works-section {
    padding: 60px 40px;
  }
  .how-it-works-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }
  .cards-container {
    flex-direction: row; /* Horizontal layout */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center cards */
    gap: 20px;
  }
  .info-card {
    flex-basis: calc(50% - 15px); /* 2 columns, accounting for gap */
  }

  /* About/Why Us Section */
  .about-us-section,
  .why-us-section {
    padding: 60px 40px;
  }
  .about-us-section h2,
  .why-us-section h2 {
    font-size: 2em;
    margin-bottom: 35px;
  }
  .about-us-section p,
  .why-us-section p {
    font-size: 1.05em;
    max-width: 800px; /* Limit text width */
    margin-left: auto;
    margin-right: auto;
  }

  /* News Preview Section */
  .news-preview-section {
    padding: 60px 40px;
  }
  .news-preview-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }
  .news-item {
    padding: 25px;
    max-width: 750px; /* Limit width and center */
    margin-left: auto;
    margin-right: auto;
  }
  .news-title {
    font-size: 1.4em;
  }
  .news-excerpt {
    font-size: 1em;
  }
  .news-read-more {
    font-size: 0.95em;
  }

  /* Testimonials Section */
  .testimonials-section {
    padding: 60px 40px;
  }
  .testimonials-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }
  .testimonial-container {
    max-width: 750px;
    padding: 0 45px; /* More space for larger controls */
  }
  .testimonial {
    padding: 30px;
  }
  .testimonial-quote {
    font-size: 1.1em;
    padding-left: 30px;
  }
  .testimonial-quote::before {
    font-size: 2.2em;
  }
  .testimonial-author {
    font-size: 1.05em;
  }
  .prev-btn,
  .next-btn {
    width: 40px;
    height: 40px;
    font-size: 1.4em;
  }
  .prev-btn {
    left: 0;
  }
  .next-btn {
    right: 0;
  }

  /* FAQ Section */
  .faq-section {
    padding: 60px 40px;
  }
  .faq-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }
  .faq-container {
    max-width: 850px;
  }
  .faq-question {
    font-size: 1.15em;
  }
  .faq-answer {
    font-size: 1em;
    padding: 0 20px;
  }
  .faq-answer.active {
    padding: 20px;
  }

  /* Final CTA Section */
  .final-cta-section {
    padding: 60px 40px;
  }
  .cta-content p {
    font-size: 1.2em;
    max-width: 850px;
  }

  /* <<< Modal Adjustments >>> */
  .modal-content {
    max-width: 600px;
    padding: 30px;
  }
  #modal-title {
    font-size: 1.7em;
  }
  /* Optional: Make button not full width on desktop */
  /*
  .form-submit-btn {
      width: auto;
      display: inline-block;
  }
  */

  /* --- About Page Adjustments --- */
  .page-title-section {
    padding: 60px 40px;
    text-align: left;
  }
  .page-title-section h1 {
    font-size: 2.5em;
    max-width: 1100px; /* Match other containers roughly */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .about-content-section {
    padding: 60px 20px;
  }
  .about-content-section h2 {
    font-size: 1.6em;
    color: #0a2351;
    margin-top: 40px; /* Increased top margin for more separation */
    margin-bottom: 20px; /* Increased bottom margin */
    border-bottom: 2px solid #eee;
    padding-bottom: 8px; /* Adjusted padding */
    /* display: inline-block; Remove if sticking with text-align: center */
  }

  /* Style the icons within the h2 */
  .about-content-section h2 i {
    margin-right: 10px; /* Space between icon and text */
    color: var(--clr-accent); /* Use accent color for icons */
    font-size: 0.9em; /* Slightly smaller than heading text */
    vertical-align: middle; /* Align icon vertically with text */
  }

  .about-content-section h2:first-of-type {
    margin-top: 0;
  }

  .about-content-section .container {
    text-align: center; /* Center headings and paragraphs within the about content container */
    max-width: 850px; /* Keep consistent max-width */
    margin: 0 auto; /* Ensure container itself is centered */
  }

  .about-content-section p {
    margin-bottom: 20px;
  }

  /* Center the main intro paragraphs on About, Services, and Detail pages */
  .about-content-section .container > p:first-of-type,
  .services-overview .container > h2 + p,
  .service-detail-section .container > h2:first-of-type + p /* Para after FIRST h2 */ {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center specific intro/final paras */
  .about-content-section h2:has(i.fa-question-circle) + p,
  .services-overview .container > p:last-of-type,
  /* Center paras between H2s IF they don't follow a list */
  .service-detail-section .container h2 + p:not(ul + p, ol + p),
  .service-detail-section .container > a.btn-primary /* Center the final button */ {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Left-align specific About para text, but center the block */
  .about-content-section h2:has(i.fa-book-open) + p,
  .about-content-section h2:has(i.fa-bullseye) + p,
  .about-content-section h2:has(i.fa-users) + p,
  /* Left-align specific Detail page paras (e.g., those following lists) */
  .service-detail-section .container ul + p,
  .service-detail-section .container ol + p {
    text-align: left;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Style the icons within the h2 on About page */
  .about-content-section h2 i {
    margin-right: 10px; /* Space between icon and text */
    color: var(--clr-accent); /* Use accent color for icons */
  }

  /* Style the icons within h2 and h3 on Services & Detail pages */
  .services-overview h2 i,
  .services-overview h3 i,
  .service-detail-section h2 i /* Apply to H2 on detail pages */ {
    margin-right: 10px; /* Space between icon and text */
    color: var(--clr-accent); /* Use accent color for icons */
  }

  /* Style icons within list item strong tags on About & Detail pages */
  .about-content-section .container li strong i,
  .service-detail-section .container li strong i {
    margin-right: 8px; /* Space between icon and strong text */
    color: var(--clr-secondary); /* Use secondary color for subtle emphasis */
    vertical-align: middle; /* <<< ADD THIS: Ensure vertical alignment */
  }

  /* Center headings on About, Services, Detail pages */
  .about-content-section .container h2,
  .services-overview .container h2,
  .services-overview .container h3,
  .service-detail-section .container h2 /* Apply to H2 on detail pages */ {
    text-align: center;
  }

  /* Add centering specifically for the button block on detail pages */
  .service-detail-section .container > a.btn-primary {
    display: block; /* Make it a block to center */
    width: fit-content; /* Size button to content */
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px; /* Add space above button */
    margin-bottom: 25px; /* <<< ADD THIS: Add space below button */
  }

  /* --- Placeholder Content Adjustments --- */
  .content-placeholder {
    padding: 60px 20px;
  }
}

@media (min-width: 992px) {
  /* How It Works (4 columns) */
  .cards-container {
    flex-wrap: nowrap;
    gap: 25px;
  }
  .info-card {
    flex-basis: calc(25% - 19px);
  }

  /* Stats (4 columns) */
  .stats-container {
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 20px;
  }
  .stat-item {
    flex-basis: auto;
  }
  .stat-number {
    font-size: 3.2em;
  }
  .stat-unit {
    font-size: 1.1em;
  }
  .stat-label {
    font-size: 1em;
  }

  /* Add other 992px overrides if needed */
}

@media (min-width: 576px) {
  /* Stats (2 columns for smaller tablets) */
  .stats-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 40px;
  }
  .stat-item {
    flex-basis: calc(50% - 20px);
  }
}

/* === Placeholder Content Style === */
.content-placeholder {
  padding: 40px 20px;
  min-height: 30vh; /* Give it some minimum height */
  background-color: #f8f9fa; /* Light background */
}

.content-placeholder .container {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  color: #666;
}

/* Add responsive adjustments if needed */
@media (min-width: 768px) {
  .content-placeholder {
    padding: 60px 20px;
  }
}

/* =================================
   General Page Layout & Content
   ================================= */

.container {
  max-width: 1140px; /* Common max-width for content */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px; /* Add padding for smaller screens */
  padding-right: 20px; /* Add padding for smaller screens */
  width: 100%; /* Ensure it takes full width up to max-width */
}

.page-title-section {
  background-color: #f4f7f6; /* Light grey background */
  padding: 30px 0; /* Vertical padding */
  text-align: center; /* Center the title */
  border-bottom: 1px solid #e0e0e0; /* Subtle separator */
  margin-bottom: 30px; /* Space below the title section */
}

.page-title-section h1 {
  color: #0a2351; /* Use the primary dark blue */
  font-size: 2.2em; /* Make title prominent */
  margin-bottom: 5px; /* Small space below title */
}

/* Add some basic styling for standard content sections */
.page-content {
  padding: 20px 0 40px 0; /* Vertical padding, more at the bottom */
  line-height: 1.7; /* Improve readability */
  color: #333; /* Standard dark grey text */
}

/* Basic styling for paragraphs within content */
.page-content p {
  margin-bottom: 1.2em; /* Space between paragraphs */
}

/* Basic styling for headings within content */
.page-content h2 {
  font-size: 1.8em;
  color: #1a3561; /* Secondary blue */
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee; /* Subtle separator */
}

.page-content h3 {
  font-size: 1.4em;
  color: #1a3561;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

/* Basic styling for lists within content */
.page-content ul,
.page-content ol {
  margin-left: 25px; /* Indent lists */
  margin-bottom: 1.2em;
}

.page-content li {
  margin-bottom: 0.5em; /* Space between list items */
}

/* Basic styling for links within content */
.page-content a {
  color: #0056b3; /* Standard link blue */
  text-decoration: none;
}

.page-content a:hover {
  text-decoration: underline;
}

/* Service Item Icons */
.service-item h3 i {
  margin-right: 10px; /* Space between icon and service title */
  color: #0056b3; /* Use a consistent accent color */
  width: 1.2em; /* Ensure icons align nicely if widths vary slightly */
  text-align: center;
}

/* Optional: Style the container if needed */
.services-section .service-item {
  /* Add padding, borders, etc. if not already styled */
  /* Example: border: 1px solid #eee; padding: 20px; margin-bottom: 20px; */
}

/* Add styling for individual service items on services.html */
.services-overview .service-item {
  border: 1px solid var(--clr-border);
  padding: 25px;
  margin-bottom: 25px;
  border-radius: 5px;
  background-color: var(--clr-surface);
  box-shadow: var(--box-shadow);
  text-align: center; /* <<< ADD THIS: Center content including the button */
}

/* Modify the specific service item buttons */
.services-overview .service-item .btn-secondary {
  background-color: transparent;
  border: 1px solid var(--clr-primary);
  color: var(--clr-primary);
  margin-top: 15px; /* Add some space above the button */
}

.services-overview .service-item .btn-secondary:hover {
  background-color: var(--clr-primary);
  color: var(--clr-surface); /* Use surface color (white) for text on hover */
}

/* We might need secondary/other button styles later */
.btn-secondary {
  background-color: #6c757d; /* Example secondary color (grey) */
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-sm {
  padding: 8px 15px;
  font-size: 0.875em;
}

/* =================================
   Contact Form Specific Styles
   ================================= */
.contact-form-section form {
  margin-top: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1.5;
}

.form-group textarea {
  resize: vertical; /* Allow vertical resize only */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #0056b3;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2); /* Subtle focus ring */
}

/* Required field indicator using :has() */
.form-group label:has(+ input[required]):after,
.form-group label:has(+ textarea[required]):after,
.form-group label:has(+ select[required]):after {
  content: " *"; /* Add asterisk */
  color: red;
  font-weight: normal; /* Keep asterisk normal weight */
  margin-left: 2px;
}

/* Add padding to main content to offset fixed header */
main {
  padding-top: 80px; /* Adjust based on actual header height */
}

.btn:hover {
  transform: translateY(-2px); /* Subtle lift on hover */
}

/* Left-align text within centered blocks for specific story/mission/team sections */
.about-subsection.story-section > .container > p,
.about-subsection.mission-section > .container > p,
.about-subsection.team-section > .container > p {
  max-width: 800px; /* Limit paragraph width */
  margin-left: auto; /* Center paragraph block */
  margin-right: auto; /* Center paragraph block */
  text-align: left; /* Ensure text itself is left-aligned for readability */
}

/* Ensure intro paragraph block is centered AND its text is centered */
.about-content-section .intro-text p {
  max-width: 900px; /* Allow intro to be slightly wider */
  margin-left: auto; /* Center block */
  margin-right: auto; /* Center block */
  text-align: center !important; /* Force text center alignment */
}

/* Ensure Why Us intro paragraph block is centered AND its text is centered */
.about-subsection.why-us-section > .container > p {
  max-width: 800px; /* Match other paragraphs */
  margin-left: auto; /* Center block */
  margin-right: auto; /* Center block */
  text-align: center !important; /* Force text center alignment */
}

/* Styling for the 'Why Us' list */
.why-us-list {
}

.page-title-section .container {
  text-align: center; /* Center the h1 within the title section container */
}

.about-content-section .container {
  text-align: center; /* Center headings and the UL block */
  max-width: 850px; /* Keep consistent max-width */
  margin: 0 auto; /* Ensure container itself is centered */
}

/* If list items within the 'Why Choose Us?' section should remain left-aligned within the centered block: */
.about-content-section .container ul {
  display: inline-block; /* Allows the ul to be centered as a block */
  text-align: left; /* Keeps the li text itself left-aligned */
  margin-top: 1.5em; /* Slightly more space above the list */
  max-width: 100%; /* Ensure it doesn't overflow */
  padding-left: 20px; /* Add some padding for the bullet points */
}

.about-content-section .container li {
  margin-bottom: 1em; /* Add more space between list items */
  padding-left: 25px; /* <<< ADD THIS: Make space for icon */
  position: relative; /* <<< ADD THIS: For absolute positioning of ::before */
  /* line-height: 1.6; Inherits from body */
}

/* Add icon ::before pseudo-element */
.about-content-section .container li::before {
  content: "\f105"; /* Font Awesome angle-right unicode */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* Solid style */
  position: absolute;
  left: 0;
  top: 1px; /* Adjust slightly for vertical alignment */
  color: var(--clr-accent);
  font-size: 0.9em;
}

/* Center headings on About, Services, Detail pages */
.about-content-section .container h2,
.services-overview .container h2,
.services-overview .container h3,
.service-detail-section .container h2 /* Apply to H2 on detail pages */ {
  text-align: center;
}

/* Add centering specifically for the button block on detail pages */
.service-detail-section .container > a.btn-primary {
  display: block; /* Make it a block to center */
  width: fit-content; /* Size button to content */
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px; /* Add space above button */
  margin-bottom: 25px; /* <<< ADD THIS: Add space below button */
}

/* === Contact Page Specific Styles === */

.contact-section .container {
  text-align: center; /* Center intro text and section headings */
}

/* Style the contact details block */
.contact-details {
  background-color: var(--clr-surface);
  padding: calc(var(--unit-spacing) * 1.5);
  margin-top: calc(var(--unit-spacing) * 2); /* Space above details block */
  margin-bottom: calc(var(--unit-spacing) * 2); /* Space below details block */
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--box-shadow);
  max-width: 700px; /* Limit width of the card */
  margin-left: auto; /* Center the card */
  margin-right: auto; /* Center the card */
}

.contact-details h2 {
  text-align: center; /* Ensure heading inside card is centered */
  margin-bottom: 1em;
}

.contact-details p {
  text-align: left; /* Keep contact details text left-aligned */
  max-width: 600px; /* Limit width for readability */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em; /* Consistent spacing */
}

.contact-details p strong i {
  width: 1.5em; /* Ensure consistent icon alignment */
}

/* Style the contact form block */
.contact-form-section {
  background-color: var(--clr-surface);
  padding: calc(var(--unit-spacing) * 1.5);
  margin-bottom: calc(var(--unit-spacing) * 2); /* Space below form block */
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--box-shadow);
  max-width: 700px; /* Match details card width */
  margin-left: auto; /* Center the card */
  margin-right: auto; /* Center the card */
}

.contact-form-section h2 {
  text-align: center; /* Ensure heading inside card is centered */
  margin-bottom: 1em;
}

.contact-form-section form {
  /* ... existing code ... */
}

/* === Form Validation Styles === */
.error-text {
  color: #dc3545; /* Red color for errors */
  font-size: 0.85em;
  display: block; /* Ensure it appears on its own line */
  margin-top: 4px;
}

/* Style for the overall form status message */
.form-status-message {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
  text-align: center;
  display: none; /* Hide by default, shown by JS */
}

.form-status-message.success {
  color: #155724; /* Dark green text */
  background-color: #d4edda; /* Light green background */
  border: 1px solid #c3e6cb;
  display: block; /* Show when class is added */
}

.form-status-message.error {
  color: #721c24; /* Dark red text */
  background-color: #f8d7da; /* Light red background */
  border: 1px solid #f5c6cb;
  display: block; /* Show when class is added */
}

/* Optional: Style for inputs with errors */
/*
.input-error {
    border-color: #dc3545 !important; 
}
*/

/* === Header Top Integrations Styling === */
.header-top-integrations {
  display: flex;
  justify-content: flex-end; /* Align items (like translator) to the right */
  padding: 5px 20px; /* Small padding top/bottom, standard horizontal padding */
  background-color: #f1f1f1; /* Optional: Slight background differentiation */
  /* border-bottom: 1px solid var(--clr-border); */ /* Optional: separator */
}

/* Target the specific GTranslate wrapper if needed */
.header-top-integrations .gtranslate_wrapper {
  /* Add specific styles here if needed, e.g., margin */
  /* margin-left: auto; Might not be needed due to flex-end on parent */
}

/* =================================
   Blog Page Styles
   ================================= */

.blog-index .container p:first-of-type {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  font-size: 1.3em; /* Further increased font size */
  color: var(--clr-secondary);
}

.blog-post-list {
  list-style: none;
  padding: 0;
}

.blog-post-summary {
  /* Restore card styles */
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  /* Remove centering and max-width */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.blog-post-summary:hover {
  /* Restore hover styles */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: var(--clr-accent);
}

.blog-post-summary h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.7em;
  border-bottom: none;
  padding-bottom: 0;
}

.blog-post-summary h2 a {
  text-decoration: none;
  color: var(--clr-heading-text);
  transition: color 0.3s ease;
}

.blog-post-summary h2 a:hover {
  color: var(--clr-accent);
}

.post-meta {
  font-size: 0.8em;
  color: #888;
  margin-bottom: 1.2rem;
}

.blog-post-summary p:not(.post-meta) {
  margin-bottom: 1.8rem;
  line-height: 1.7;
}

/* Keep updated Read More link style */
.blog-post-summary .btn.btn-secondary.btn-sm {
  background-color: transparent;
  color: var(--clr-accent);
  padding: 0;
  font-size: 0.95em;
  font-weight: bold;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.blog-post-summary .btn.btn-secondary.btn-sm::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.blog-post-summary .btn.btn-secondary.btn-sm:hover {
  color: var(--clr-primary);
  transform: none;
  background: none;
}

.blog-post-summary .btn.btn-secondary.btn-sm:hover::after {
  transform: translateX(4px);
}

/* Responsive adjustments for blog list if needed */
/* @media (min-width: 768px) { ... } */

/* =================================
   News Page Styles
   ================================= */

/* Style intro paragraph similar to blog */
.news-index .container p:first-of-type {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  font-size: 1.3em;
  color: var(--clr-secondary);
}

.news-item-list {
  list-style: none;
  padding: 0;
}

/* Apply card styling to news items */
.news-item-summary {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.news-item-summary:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: var(--clr-accent);
}

.news-item-summary h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.7em;
  border-bottom: none;
  padding-bottom: 0;
}

.news-item-summary h2 a {
  text-decoration: none;
  color: var(--clr-heading-text);
  transition: color 0.3s ease;
}

.news-item-summary h2 a:hover {
  color: var(--clr-accent);
}

/* Style metadata */
.news-meta {
  font-size: 0.8em;
  color: #888;
  margin-bottom: 1.2rem;
}

/* Style excerpt */
.news-item-summary p:not(.news-meta) {
  margin-bottom: 1.8rem;
  line-height: 1.7;
}

/* Style Read More link */
.news-item-summary .btn.btn-secondary.btn-sm {
  background-color: transparent;
  color: var(--clr-accent);
  padding: 0;
  font-size: 0.95em;
  font-weight: bold;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.news-item-summary .btn.btn-secondary.btn-sm::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.news-item-summary .btn.btn-secondary.btn-sm:hover {
  color: var(--clr-primary);
  transform: none;
  background: none;
}

.news-item-summary .btn.btn-secondary.btn-sm:hover::after {
  transform: translateX(4px);
}

/* === End News Page Styles === */

/* ========================
   Service Detail Pages
   ======================== */

.service-detail-section .container {
  max-width: 800px; /* Limit width for readability */
}

/* Ensure the h2 itself doesn't have excessive top margin now */
.service-detail-section h2 {
  margin-top: 1.5rem; /* Reduced from previous attempts */
  color: var(--clr-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--clr-accent);
  padding-bottom: 0.5rem;
}

.service-detail-section h2:first-of-type {
  margin-top: 0; /* Keep no margin above the very first heading */
}

.service-detail-section h3 {
  color: var(--clr-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Add more space below common block elements within service details */
.service-detail-section p,
.service-detail-section ul,
.service-detail-section ol {
  margin-bottom: 3rem; /* Increased bottom margin */
}

/* Optional: Reduce margin below the very last paragraph/list before the button */
.service-detail-section .container > p:last-of-type,
.service-detail-section .container > ul:last-of-type,
.service-detail-section .container > ol:last-of-type {
  margin-bottom: 1.5rem; /* Less margin before the final button */
}

/* Remove default margin from list items if needed */
.service-detail-section li {
  margin-bottom: 0.5rem; /* Keep some space, but main spacing is after list */
}