html,body{height:100%;margin:0;padding:0;background:url('../assets/hero-background.jpg') no-repeat center center fixed;background-size:cover;font-family:Arial,sans-serif;color:#f4f4f4;}body{line-height:1.6;}.container{max-width:900px;margin:40px auto;padding:30px 24px;background: rgba(16, 20, 34, 0.25);border-radius:16px;box-shadow:0 8px 32px 0 rgba(0,0,0,.3);text-align:center;}.site-header{padding:30px 0 10px 0;background:transparent;}.logo{font-size:2.2em;font-weight:bold;color:#fff;}.nav-links{list-style:none;display:flex;gap:22px;justify-content:center;margin:18px 0 0 0;padding:0;}.nav-links li a{color:#f4f4f4;text-decoration:none;font-weight:500;transition:color 0.3s;}.nav-links li a:hover,.nav-links li a.active{color:#90caf9;}h1,h2{color:#90caf9;margin-bottom:10px;}h3{color:#90caf9;margin:14px 0;}p{color:#e0e0e0;margin-bottom:18px;}.form-vertical{max-width:500px;margin:0 auto;text-align:left;}.form-vertical input,.form-vertical textarea,.form-vertical label,.form-vertical button{display:block;width:100%;margin-bottom:15px;font-size:1.05em;border-radius:6px;border:none;padding:12px;background:#223;color:#f4f4f4;}.form-vertical input:focus,.form-vertical textarea:focus{background:#283555;outline:none;}.form-vertical button{width:100%;background:#90caf9;color:#fff;cursor:pointer;font-weight:bold;}.form-vertical button:hover{background:#90caf9;}.site-footer{background:transparent;color:#ccc;text-align:center;padding:22px 0 0 0;font-size:1em;}@media (max-width:700px){.container{padding:12px 2vw;margin:16px 2vw;}.nav-links{flex-direction:column;gap:8px;}}body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
  pointer-events: none;
}
html, body {
  position: relative;
}body{font-family:'Inter',sans-serif;font-size:1.125rem;line-height:1.75;}h1,h2{color:#90caf9;}h1 .highlight,h2 .highlight{color:#ffb3c6;}ul{padding-left:1.25em;}ul li{padding-left:0.25em;margin-left:0;}.site-header{display:flex;flex-direction:column;align-items:center;}.nav-links{flex-direction:row;justify-content:center;flex-wrap:wrap;}@media (max-width:768px){.nav-links{flex-direction:column;align-items:center;}.nav-links li{margin-bottom:8px;}}a,button{min-height:48px;min-width:48px;}h1 .accent, h2 .accent { color: #fff275; }
.site-header {
  padding: 10px 0;
}
.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-links {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Update main heading color */
h1, h2 {
  color: #f9d976;
}

/* Service heading (h3) in baby blue */
h3 {
  color: #90caf9;
}

/* Adjust bullet list layout */
ul {
  text-align: left;
  margin: 0 auto 1.5em auto;
  padding-left: 1.25em;
  max-width: 700px;
}
ul li {
  margin-left: 0.25em;
  padding-left: 0.25em;
}


/* === Button Styling === */
.btn {
  display: inline-block;
  background-color: #90caf9;
  color: white;
  padding: 12px 20px;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #90caf9;
}

/* === Extra Mobile Breakpoint for Small Screens === */
@media (max-width: 480px) {
  .section {
    padding: 1rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .btn {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* === CTA Tile Styling === */
.cta-tile {
  display: block;
  margin: 2rem auto;
  max-width: 300px;
  text-decoration: none;
}
.cta-box {
  background-color: #0e1a24;
  color: white;
  padding: 1.25rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.cta-box img {
  height: 40px;
  margin-bottom: 0.5rem;
}
.cta-box:hover {
  transform: scale(1.03);
}

.cta-box img {
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}
.cta-box span {
  vertical-align: middle;
  font-size: 1rem;
}

.cta-box img {
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
  overflow: visible;
}


/* Burger menu styles */
@media (max-width: 768px) {
  #menu-toggle {
    display: block;
    margin-left: auto;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background-color: #0e1a24;
    padding: 1rem;
    border-radius: 8px;
  }
  .nav-links.nav-open {
    display: flex;
  }
}

.cta-box img {
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
.cta-box span {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
}


.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.service-card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  text-align: left;
}


/* Services Section Layout Fix */
@media (min-width: 992px) {
  .services-section {
    background: transparent !important; /* Remove dark overlay */
  }
  .services-section .container {
    max-width: 1400px;
    margin: 0 auto;
  }
  .service-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  .service-card {
    flex: 0 0 32%;
    background: rgba(30, 30, 30, 0.9); /* Darker translucent overlay */
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    text-align: left;
    color: #fff;
  }
}

@media (max-width: 991px) {
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
  }
}


.services-section {
  background: transparent !important;
  padding: 60px 0;
}

@media (min-width: 992px) {
  .services-section .container {
    max-width: 1400px;
    margin: 0 auto;
  }
  .service-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .service-card {
    flex: 0 0 calc(33.333% - 20px);
    background: rgba(30, 30, 30, 0.9);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: #fff;
    text-align: left;
  }
}

@media (max-width: 991px) {
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
  }
}


.services-section {
  background: transparent !important;
  margin: 0;
  padding: 60px 0;
}

@media (min-width: 992px) {
  .services-section .container {
    max-width: 1400px;
    margin: 0 auto;
  }
  .service-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .service-card {
    flex: 0 0 32%;
    margin: 0;
    background: rgba(20, 20, 20, 0.85);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
  }
}

@media (max-width: 991px) {
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    background: rgba(20, 20, 20, 0.9);
  }
}


@media (min-width: 992px) {
  .service-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 30px;
  }

  .service-card {
    flex: 0 0 28%;
    background: rgba(20, 20, 20, 0.88);
    padding: 40px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}


.services-section {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}


/* Ensure full transparency of section container */
.section-services, .services-section {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Thinner and spaced 3-column layout */
@media (min-width: 992px) {
  .services-section .service-grid > .service-card {
    flex: 0 0 25% !important;
    min-width: 260px !important;
    max-width: 280px !important;
    background: rgba(20, 20, 20, 0.9) !important;
    color: #fff !important;
    padding: 50px 24px !important;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .service-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 40px !important;
    align-items: stretch;
  }
}

/* Responsive stacking on smaller screens */
@media (max-width: 991px) {
  .service-grid {
    display: block !important;
  }

  .service-card {
    width: 100% !important;
    margin-bottom: 30px;
    background: rgba(20, 20, 20, 0.9) !important;
    color: #fff !important;
  }
}


.icon-top {
  height: 40px;
  width: 40px;
  margin-bottom: 16px;
}


/* Shrink global container */
.container {
  max-width: 1280px !important;
  width: 92% !important;
  margin: 0 auto !important;
}

/* Shrink service-links container */
.service-links {
  max-width: 800px !important;
  margin-left: auto;
  margin-right: auto;
}


/* Ensure the 'Our Core Services' section is fully transparent */
section.services-section,
section.services-section .container {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Tighten service-links container even further */
.service-links {
  max-width: 640px !important;
  margin-left: auto;
  margin-right: auto;
}


/* Shrink main site navigation/links container */
.main-links,
.header-links,
nav .container {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-icon svg {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  fill: #90caf9;
}

.nav-container {
  background-color: rgba(20, 20, 20, 0.22);
  padding: 1.5rem 2rem;
  border-radius: 12px;
}

.subheading {
  font-size: 1.25rem;
  color: #90caf9;
  font-weight: 500;
  margin-top: 0.5rem;
}

h1, h2, h3 {
  color: #90caf9 !important;
}

h1, h2 {
  color: #f9d976 !important;
}
h3 {
  color: #90caf9 !important;
}

.form-vertical button {
  background-color: #f9d976 !important;
  color: #000 !important;
  font-weight: bold;
}
.form-vertical button:hover {
  background-color: #e8c64f !important;
}

/* Ensure nav links and buttons are touch-friendly */
.nav-links a,
button,
.form-vertical button {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

/* Hover effect for service cards */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Button hover enhancement */
button,
.btn,
.form-vertical button {
  transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover,
.btn:hover,
.form-vertical button:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}