body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #001f33;
  position: relative;
  overflow-x: hidden;
}

a {
  color: #66ccff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Background image overlay */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('TechSpire_slides_background.png') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.15;
  z-index: -1;
}

.image-wrap {
  float: right; /* use left or right depending on layout */
  margin: 0 0 15px 15px; /* top-right-bottom-left spacing */
  max-width: 211px; /* match or scale your image size */
  height: auto;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 100px 20px 50px;
  background: rgba(0, 31, 51, 0.85);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #66ccff;
}

.tagline {
  font-size: 1.2rem;
  color: #cceeff;
}

/* Content Sections */
.content {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: rgba(0, 31, 51, 0.65);
  border-radius: 8px;
}

.content h2 {
  color: #66ccff;
  margin-bottom: 15px;
}

.content p, .content ul {
  line-height: 1.6;
  color: #e0f7ff;
}

.content ul {
  padding-left: 20px;
}

/* Footer */
.footer {
  text-align: center;
  padding: 30px 20px;
  background: rgba(0, 31, 51, 0.95);
  font-size: 0.9rem;
  color: #99ccdd;
}

.company-overview .overview-body {
  overflow: hidden;
}

.company-overview img {
  float: right;
  margin: 0 0 15px 20px;
  max-width: 250px;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

.core-capabilities .capabilities-body {
  overflow: hidden;
}

.core-capabilities img {
  float: right;
  margin: 0 0 15px 20px;
  max-width: 250px;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

.planned-deliverables .deliverables-body {
  overflow: hidden;
}

.planned-deliverables img {
  float: right;
  margin: 0 0 15px 20px;
  max-width: 250px;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
}

.hero-logo {
  max-height: 120px;     /* Adjust as needed to match header text size */
  width: auto;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content img {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
  display: block;
  margin: 0 0 15px 20px;
  float: right;
}

@media (max-width: 600px) {
  .content img {
    float: none;
    display: block;
    margin: 15px auto;
    max-width: 90%;
    height: auto;
  }
}

/* General safety rule for all images in content */
.content img {
  max-width: 100%;
  height: auto;
}

/* Mobile-specific override */
@media (max-width: 600px) {
  .content img {
    width: 90%;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 15px auto;
    float: none;
  }
}