:root {
  /* Fonts */
  --font-family-headings: 'Archivo Black', sans-serif;
  --font-family-body: 'Roboto', sans-serif;

  /* Analogous Color Scheme with an Accent */
  --color-primary: #2a9d8f;      /* Main Teal */
  --color-primary-darker: #21867a;
  --color-primary-lighter: #52b7a9;

  --color-secondary: #26c485;    /* Analogous Bright Green */
  --color-secondary-darker: #1e9d69;

  --color-tertiary: #2A7F9D;     /* Analogous Muted Blue */
  --color-tertiary-darker: #226680;

  --color-accent: #f4a261;       /* Warm Accent - Soft Orange/Coral */
  --color-accent-darker: #e08a4a;

  /* Neutral Colors */
  --color-text-light: #ffffff;
  --color-text-light-secondary: #f0f0f0; /* For slightly less prominent light text */
  --color-text-dark: #343a40;
  --color-text-headings: #222222; /* Extra dark for headings */
  --color-text-muted: #6c757d;
  --color-background-light: #ffffff;
  --color-background-soft-light: #f7f9fc; /* Very light gray for section backgrounds */
  --color-background-dark: #2c3e50;
  --color-border: #dee2e6;
  --color-border-light: rgba(255, 255, 255, 0.1);

  /* Semantic Colors (from Bootstrap, can be customized if needed) */
  --color-success: #198754; /* BS5 success */
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #0dcaf0;

  /* Spacing & Sizing */
  --spacing-unit: 1rem;
  --navbar-height: 70px; /* Approximate, adjust if dynamic */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;

  /* Shadows */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.125);
  --text-shadow-light: 1px 1px 3px rgba(0,0,0,0.5);
  --text-shadow-dark: 1px 1px 2px rgba(255,255,255,0.1); /* For dark text on medium bg */


  /* Transitions */
  --transition-speed-fast: 0.2s;
  --transition-speed-normal: 0.3s;
  --transition-speed-slow: 0.5s;
  --transition-easing: ease-in-out;
}

/* === BASE STYLES === */
body {
  font-family: var(--font-family-body);
  color: var(--color-text-dark);
  background-color: var(--color-background-light);
  line-height: 1.6;
  padding-top: var(--navbar-height); /* For fixed navbar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  color: var(--color-text-headings);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }

p {
  margin-bottom: var(--spacing-unit);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed-fast) var(--transition-easing);
}
a:hover {
  color: var(--color-primary-darker);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.section-title {
  font-family: var(--font-family-headings);
  color: var(--color-text-headings);
  margin-bottom: 3rem;
  text-align: center;
  position: relative;
}
.section-title::after { /* Optional decorative underline */
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 0.5rem auto 0;
    border-radius: 2px;
}


/* Background Texture Utilities */
.section-bg-texture {
  background-color: var(--color-background-soft-light); /* Fallback */
  /* Example: background-image: url('image/light-paper-texture.jpg'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.section-bg-texture-dark {
  /* Example: background-image: url('image/dark-concrete-texture.jpg'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-text-light);
}
.section-bg-texture-dark .section-title,
.section-bg-texture-dark h1, .section-bg-texture-dark h2, .section-bg-texture-dark h3,
.section-bg-texture-dark p {
  color: var(--color-text-light);
}
.section-bg-texture-dark .section-title {
    text-shadow: var(--text-shadow-light);
}


.section-bg-dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
}
.section-bg-dark .section-title,
.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4,
.section-bg-dark p, .section-bg-dark .stat-label {
  color: var(--color-text-light);
}
.section-bg-dark .section-title {
    text-shadow: var(--text-shadow-light);
}
.section-bg-dark a {
  color: var(--color-accent);
}
.section-bg-dark a:hover {
  color: var(--color-accent-darker);
}


/* === BOOTSTRAP OVERRIDES & ENHANCEMENTS === */

/* Navbar */
#mainNav.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--box-shadow-sm);
  transition: background-color var(--transition-speed-normal) var(--transition-easing);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#mainNav .navbar-brand img {
  max-height: 40px; /* Adjust as needed */
}
#mainNav .navbar-nav .nav-link {
  font-family: var(--font-family-body);
  font-weight: 500;
  color: var(--color-text-dark);
  padding: 0.5rem 1rem;
  transition: color var(--transition-speed-fast) var(--transition-easing);
  position: relative;
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
  color: var(--color-primary);
}
#mainNav .navbar-nav .nav-link::before { /* Underline effect on hover */
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-speed-normal) var(--transition-easing);
}
#mainNav .navbar-nav .nav-link:hover::before,
#mainNav .navbar-nav .nav-link.active::before {
    width: 70%;
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(42, 157, 143, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Buttons */
.btn {
  font-family: var(--font-family-body);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-speed-normal) var(--transition-easing);
  box-shadow: var(--box-shadow-sm);
  border: 2px solid transparent;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-md);
}
.btn-lg {
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}
.btn-primary:hover {
  background-color: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
  color: var(--color-text-light);
}

.btn-secondary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-light);
}
.btn-secondary:hover {
  background-color: var(--color-accent-darker);
  border-color: var(--color-accent-darker);
  color: var(--color-text-light);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

/* Forms */
.form-control {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-speed-fast) var(--transition-easing), box-shadow var(--transition-speed-fast) var(--transition-easing);
  background-color: var(--color-background-light);
  color: var(--color-text-dark);
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25);
  background-color: var(--color-background-light); /* Ensure bg doesn't change on focus */
  color: var(--color-text-dark);
}
.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark); /* Default for light backgrounds */
}


/* Cards */
.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
    transition: box-shadow var(--transition-speed-normal) var(--transition-easing), transform var(--transition-speed-normal) var(--transition-easing);
    overflow: hidden;
    height: 100%; /* For consistent height in rows when using Bootstrap's h-100 */
}
.card:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-5px);
}
.card .card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: var(--color-background-soft-light);
    position: relative;
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) var(--transition-easing);
}
.card:hover .card-image img {
    transform: scale(1.08);
}
.card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left; /* Default, can be overridden */
}
.card .card-title {
    font-family: var(--font-family-headings);
    color: var(--color-text-headings);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}
.card .card-text {
    color: var(--color-text-muted);
    flex-grow: 1;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.card .btn {
    margin-top: auto; /* Pushes button to bottom */
    align-self: flex-start; /* Default button alignment */
}
/* Centered content within card if a class is added */
.card.text-center .btn {
    align-self: center;
}

/* Accordion */
.accordion-button {
    font-family: var(--font-family-headings);
    font-size: 1.1rem;
    color: var(--color-text-dark);
    background-color: var(--color-background-soft-light);
}
.accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background-color: #e7f1ff; /* Light primary shade */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25);
}
.accordion-body {
    font-size: 0.95rem;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
}

/* Carousel Captions (ensure readability) */
.carousel-caption {
    background: linear-gradient(rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 100%);
    padding: 1.5rem;
    border-bottom-left-radius: var(--border-radius-md); /* Match image rounding if any */
    border-bottom-right-radius: var(--border-radius-md);
}
.carousel-caption h5 {
    color: var(--color-text-light);
    font-family: var(--font-family-headings);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.carousel-caption p {
    color: var(--color-text-light-secondary);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    margin-bottom: 0;
}

/* === UTILITY CLASSES === */
.text-white-70 { color: rgba(255,255,255,0.7) !important; }
.text-white-link { color: var(--color-accent) !important; }
.text-white-link:hover { color: var(--color-accent-darker) !important; }

.image-container {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow-md);
}
.image-container img {
    transition: transform var(--transition-speed-slow) ease;
}
.image-container:hover img {
    transform: scale(1.05);
}

.animated-icon {
    font-size: 0.8rem; /* Text inside placeholder */
    color: var(--color-accent);
    display: flex; /* Changed to flex for centering */
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    margin: 0 auto 1rem auto; /* Center block element */
    font-weight: bold;
    transition: transform var(--transition-speed-normal) var(--transition-easing), background-color var(--transition-speed-normal) var(--transition-easing);
}
.animated-icon:hover {
    transform: scale(1.1);
    background-color: rgba(var(--color-accent), 0.1);
}

/* === SECTION-SPECIFIC STYLES === */

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 85vh; /* Adjust as needed, not fixed 400px */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(42, 157, 143, 0.6), rgba(38, 196, 133, 0.5)), linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
.hero-section .container {
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: 3.5rem;
  color: var(--color-text-light) !important; /* Explicitly white */
  text-shadow: var(--text-shadow-light);
  font-weight: 700; /* Archivo Black is already bold */
}
.hero-subtitle {
  font-size: 1.3rem;
  color: var(--color-text-light-secondary) !important; /* Explicitly light */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.hero-section .cta-button {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-light);
}
.hero-section .cta-button:hover {
  background-color: var(--color-accent-darker);
  border-color: var(--color-accent-darker);
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.1rem; }
}

/* About Section */
#about .image-container img {
    object-fit: cover;
}
#about h3 {
    color: var(--color-tertiary); /* Use one of the analogous colors */
    margin-bottom: 1rem;
}

/* Services Section */
.service-card .card-image {
    height: 200px;
}
.service-card .card-title {
    color: var(--color-primary);
}

/* Statistics Section */
#statistics {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Simple parallax */
}
.statistics-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 62, 80, 0.85); /* Dark overlay, from --color-background-dark */
  z-index: 1;
}
#statistics .container {
  position: relative;
  z-index: 2;
}
.stat-item .stat-number {
  font-family: var(--font-family-headings);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.25rem;
}
.stat-item .stat-label {
  font-size: 1rem;
  color: var(--color-text-light-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Success Stories / Customer Stories Carousel Card */
.customer-story-card {
    box-shadow: none; /* Remove individual shadow if carousel has one */
    border: none;
    background-color: transparent; /* If carousel item bg is styled */
}
.customer-story-card .card-image { /* For side image layout */
    height: auto; /* Adjust if needed or make it full height of card */
    max-height: 300px; /* Example, if fixed height is desired */
}
.customer-story-card .card-image img {
    border-radius: var(--border-radius-md); /* Rounded image within card */
    object-fit: cover; /* Ensures the image covers the area */
}
.customer-story-card .card-body {
    text-align: left;
}
.customer-story-card .card-title {
    color: var(--color-tertiary);
}
#successStoriesCarousel .carousel-indicators button {
    background-color: var(--color-primary);
}
#successStoriesCarousel .carousel-control-prev-icon,
#successStoriesCarousel .carousel-control-next-icon {
    background-color: var(--color-primary); /* Adjust icon color */
    border-radius: 50%;
    padding: 15px; /* Increase clickable area */
    filter: invert(1); /* If original SVG is dark */
}


/* Gallery Section */
#galleryCarousel .carousel-item img {
    max-height: 550px; /* Control gallery image height */
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}

/* External Resources Section */
.external-link-card {
    background-color: var(--color-background-soft-light);
}
.external-link-card .card-title a {
    color: var(--color-primary);
    font-size: 1.1rem;
}
.external-link-card .card-title a:hover {
    color: var(--color-primary-darker);
}
.external-link-card .card-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Press Section */
.press-logo {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-speed-normal) var(--transition-easing), opacity var(--transition-speed-normal) var(--transition-easing);
    margin: 0 auto;
}
.press-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Contact Section */
#contact {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.contact-form-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 30, 40, 0.8); /* Darker overlay */
  z-index: 1;
}
#contact .container {
  position: relative;
  z-index: 2;
}
.contact-form-wrapper {
    background-color: rgba(var(--color-background-dark-rgb, 44, 62, 80), 0.7); /* Use RGB if variable not set */
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
    backdrop-filter: blur(5px); /* Subtle glassmorphism */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--color-border-light);
}
#contact .section-title {
    color: var(--color-text-light);
    text-shadow: var(--text-shadow-light);
}
#contact .contact-info {
    font-size: 0.95rem;
}


/* === FOOTER === */
.footer-section {
  background-color: var(--color-background-dark);
  color: var(--color-text-light-secondary);
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.footer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30,40,50,0.9); /* Slightly darker overlay */
  z-index: 1;
}
.footer-section .container {
  position: relative;
  z-index: 2;
}
.footer-heading {
  font-family: var(--font-family-headings);
  color: var(--color-text-light);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-text {
  font-size: 0.9rem;
  line-height: 1.7;
}
.footer-links li {
  margin-bottom: 0.5rem;
}
.footer-links a, .footer-social-links a {
  color: var(--color-text-light-secondary);
  transition: color var(--transition-speed-fast) var(--transition-easing), padding-left var(--transition-speed-fast) var(--transition-easing);
  font-size: 0.95rem;
}
.footer-links a:hover, .footer-social-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
  padding-left: 5px;
}
.footer-divider {
  border-color: rgba(255,255,255,0.15);
}
.copyright-text {
  font-size: 0.85rem;
  color: var(--color-text-muted); /* Muted but still light */
}


/* === ANIMATIONS === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px); /* Start slightly lower */
  transition: opacity 0.7s var(--transition-easing), transform 0.7s var(--transition-easing);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered animation delays (can be set via data-delay in HTML and handled by JS) */
.animate-on-scroll[data-delay="100"].is-visible { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"].is-visible { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"].is-visible { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"].is-visible { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="500"].is-visible { transition-delay: 0.5s; }


/* === SPECIAL PAGE STYLES === */

/* Success Page */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height)); /* Account for navbar */
    text-align: center;
    padding: 2rem;
    background-color: var(--color-background-soft-light);
}
.success-page-container h1 {
    color: var(--color-success);
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}
.success-page-container p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: var(--color-text-dark);
    max-width: 600px;
}
.success-page-container .btn-home {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
}
.success-page-container .btn-home:hover {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
}

/* Legal Pages (Privacy, Terms) */
.legal-page-content {
    padding-top: 3rem; /* Bootstrap's py-5 already provides top/bottom padding for sections */
    padding-bottom: 4rem; /* Ensure footer doesn't overlap if content is short */
}
.legal-page-content .container {
    max-width: 800px; /* Constrain width for readability */
}
.legal-page-content h1 {
    font-size: 2.5rem;
    color: var(--color-text-headings);
    margin-bottom: 2rem;
    text-align: center;
}
.legal-page-content h2,
.legal-page-content h3 {
    color: var(--color-primary); /* Use primary color for subheadings */
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}
.legal-page-content h3 {
    font-size: 1.5rem;
    color: var(--color-tertiary);
}
.legal-page-content p,
.legal-page-content li {
    line-height: 1.8;
    color: var(--color-text-dark);
    font-size: 1rem;
}
.legal-page-content ul,
.legal-page-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.legal-page-content strong {
    color: var(--color-text-headings);
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--color-accent);
    font-weight: bold;
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-easing), transform var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link::after {
    content: ' →';
    display: inline-block;
    transition: transform var(--transition-speed-fast) var(--transition-easing);
    margin-left: 0.25em;
}
.read-more-link:hover {
    color: var(--color-accent-darker);
    text-decoration: none;
    transform: translateX(4px);
}
.read-more-link:hover::after {
    transform: translateX(2px);
}


/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 991.98px) { /* Medium devices (tablets, less than 992px) */
    h1, .hero-title { font-size: 2.5rem; }
    h2, .section-title { font-size: 1.8rem; }
    h3 { font-size: 1.5rem; }

    .navbar-collapse {
        background-color: var(--color-background-light);
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: var(--border-radius-sm);
        box-shadow: var(--box-shadow-md);
    }
    #mainNav .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem; /* Adjust padding for collapsed menu */
    }
    #mainNav .navbar-nav .nav-link::before {
        left: 0;
        transform: none;
        bottom: 5px;
    }
     #mainNav .navbar-nav .nav-link:hover::before,
    #mainNav .navbar-nav .nav-link.active::before {
        width: 30px; /* Shorter underline for mobile */
    }

    .hero-section {
        min-height: 70vh;
    }

    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .section-title {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones, less than 768px) */
    body {
        padding-top: calc(var(--navbar-height) - 10px); /* Slightly adjust if navbar is smaller on mobile */
    }
    h1, .hero-title { font-size: 2rem; }
    h2, .section-title { font-size: 1.6rem; }

    .hero-subtitle { font-size: 1rem; }
    .hero-section .cta-button, .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .footer-section .text-center, .footer-section .col-lg-4, .footer-section .col-lg-2, .footer-section .col-lg-3 {
        text-align: center !important; /* Center footer content on small screens */
    }
    .footer-heading { text-align: center; }
    .footer-links, .footer-social-links {
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-links a:hover, .footer-social-links a:hover {
        padding-left: 0; /* Remove hover padding shift on mobile */
    }
}

/* Cookie Consent - ensure it's above other fixed elements if any */
#cookieConsentPopup {
    z-index: 10000 !important; /* Higher than navbar's default z-index if it's lower */
}