/* ==== GENERAL ==== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #ffffff;
  color: #111;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==== NAVBAR ==== */
.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(21, 67, 134, 0.35); /* #154386 at 35% */
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo img {
  height: 80px;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 0px;
}

.navbar-links a.active,
.navbar-links a:hover {
  background: rgba(34, 137, 248, 0.439);
}

.lang-toggle {
  color: white;
  margin-left: 12px;
  font-size: 14px;
}

.lang-toggle .selected {
  background: rgba(0, 123, 255, 0.3);
  padding: 4px 8px;
  border-radius: 0px;
}

/* NAVBAR BASE */
.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(21, 67, 134, 0.35);
  overflow-x: hidden; /* ✅ prevents white space on right */
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo img {
  height: 60px; /* ✅ smaller for mobile */
  max-width: 100%;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Hide mobile menu by default */
.menu-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #154386;
  padding: 20px;
}

.mobile-menu a {
  color: white;
  padding: 10px 0;
  text-decoration: none;
}

/* Responsive breakpoint */
@media (max-width: 768px) {
  .navbar-links {
    display: none; /* ✅ hide desktop menu */
  }
  .menu-toggle {
    display: block; /* ✅ show mobile toggle */
  }
  .mobile-menu.active {
    display: flex; /* ✅ show mobile menu when active */
  }
}

/* ==== HERO SECTION (FADE MODE) ==== */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HERO TEXT OVERLAY */
.hero-text {
  position: absolute;
  bottom: 15%;             /* lower placement */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  max-width: 80%;
  padding: 0 20px;
}

/* Title (H1) */
.hero-text h1 {
  font-size: 60px;
  font-weight: 800;        /* Bold */
  margin-bottom: 10px;
}

/* Subtitle (P) */
.hero-text p {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;      /* Bold Italic */
  line-height: 1.4;
}

/* Color control */
.hero-text.blue h1,
.hero-text.blue p {
  color: #154386;
}

.hero-text.white h1,
.hero-text.white p {
  color: #ffffff;
}

/* ==== DIVISORY IMAGE SECTION ==== */
.divider-image {
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  margin-top: -4px; /* Removes unwanted gaps */
}

.divider-image img {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ==== WHAT WE OFFER ==== */
.offer-section {
  background-color: #ffffff;
  padding: 100px 0;
}

.offer-section h2 {
  font-size: 60px;
  color: rgba(59, 166, 211, 0.3);
  text-align: left;
  margin-bottom: 10px;
}

.offer-section h3 {
  font-size: 32px;
  color: #154386;
  text-align: left;
  margin-bottom: 50px;
}

.offer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.offer-box {
  flex: 1 1 calc(25% - 40px); /* ✅ four equal columns */
  text-align: center;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* ✅ ensures even spacing */
}

.offer-box h4 {
  font-size: 20px;
  margin-bottom: 12px;
  min-height: 50px; /* ✅ keeps titles aligned */
}

.offer-box p {
  font-size: 16px;
  line-height: 1.5;
  min-height: 60px; /* ✅ keeps text blocks equal height */
  margin-bottom: 20px;
}

.offer-box .icon-stack img {
  width: 120px !important; /* ✅ smaller icon for 4-col layout */
  height: auto;
  margin-top: 12px;
}

.icon-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-stack img {
  width: 70px;
  height: auto;
}

.dotted-line {
  width: 2px;
  height: 40px;
  border-left: 2px dotted;
  margin-bottom: 10px;
}

.green-line { border-color: #60C559; }
.blue-line { border-color: #00ADE5; }
.orange-line { border-color: #D75F2A; }
.darkblue-line { border-color: #154386; } /* ✅ new service */

/* Title colors */
.green-title { color: #60C559; }
.blue-title { color: #00ADE5; }
.orange-title { color: #D75F2A; }
.darkblue-title { color: #1A478E; } /* ✅ new service */

.center-button {
  text-align: center;   /* ✅ ensures button is centered */
  width: 100%;          /* ✅ full width so centering applies */
  margin-top: 60px;     /* optional spacing from content above */
}

.learn-more-btn {
  display: inline-block;
  background: linear-gradient(to right, #3ba6d3, #ffffff);
  padding: 12px 24px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0px;
  transition: background 0.3s ease;
}

.learn-more-btn:hover {
  background: linear-gradient(to right, #154386, #3ba6d3);
  color: white;
}

.reach-form button {
  margin: 0 auto;   /* ✅ centers horizontally */
  display: block;   /* ✅ ensures margin:auto works */
}

/* ==== WHY CHOOSE US ==== */
.why-choose-us {
  background-color: rgba(220, 220, 219, 0.45);
  padding: 100px 0;
}

.why-choose-wrapper {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.why-text {
  flex: 1;
}

.why-text h2 {
  font-size: 60px;
  color: rgba(59, 166, 211, 0.3);
  margin-bottom: 20px;
}

.why-text h3 {
  font-size: 32px;
  color: #154386;
  margin-bottom: 12px;
}

.why-text p,
.why-text ul {
  font-size: 20px;
  color: #000;
  margin-bottom: 20px;
}

.why-text ul {
  padding-left: 20px;
}

.why-text li {
  margin-bottom: 10px;
  list-style-type: disc;
}

.why-image {
  flex: 1;
  text-align: center;
}

.why-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ==== CALLOUT BANNER ==== */
.callout-banner {
  background-color: #3BA6D3;
  padding: 20px 20px; /* reduced top/bottom padding */
  text-align: center;
  margin-bottom: 40px; /* reduced from 80px */
}

.callout-banner p {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Open Sans', sans-serif;
}

/* ==== REACH US ==== */
.reach-us {
  background-color: #ffffff; /* ✅ white background */
  color: #154386; /* ✅ dark blue text */
  padding: 100px 0;
}

.reach-us h2 {
  font-size: 60px;
  color: rgba(21, 67, 134, 0.3); /* ✅ same style as other section titles */
  margin-bottom: 40px;
}

.reach-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start; /* ✅ Align tops */
}

.reach-left,
.reach-right {
  flex: 1 1 45%;
}

.reach-left h3,
.reach-right h3 {
  font-size: 28px;
  color: #154386; /* ✅ dark blue titles */
  margin-bottom: 20px;
}

.reach-left p {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: #000000; /* ✅ normal text black */
}

.reach-left img {
  width: 28px;
  height: auto;
}

/* Bottom illustration */
.reach-image {
  margin-top: 40px;
}

.reach-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  content: url("images/reach/XS_contacts_image2.png"); /* ✅ updated image */
}

/* === REACH FORM === */
.reach-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reach-form input,
.reach-form textarea {
  padding: 14px;
  font-size: 16px;
  border: 1px solid #154386; /* ✅ blue border */
  border-radius: 0;
  background-color: #ffffff; /* ✅ white background */
  color: #000000;
}

.reach-form input::placeholder,
.reach-form textarea::placeholder {
  color: #555; /* ✅ softer gray */
}

.reach-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* === SUBMIT BUTTON === */
.reach-form button {
  position: relative;
  width: 160px;
  height: 48px;
  margin: 0 auto; /* ✅ center horizontally */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.reach-form button img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

.reach-form button span {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  display: block;
  line-height: 48px;
}

/* ==== FOOTER ==== */
footer {
  background-color: #1A478F;
  text-align: center;
  padding: 20px 0;
  font-size: 18px;
}

footer p {
  color: white !important;
}

footer em {
  font-style: italic;
  font-weight: 800;
  display: block;
  margin-bottom: 10px;
}

/* ==== COLOR & TYPOGRAPHY OVERRIDES ==== */

/* Main Titles */
h2 {
  font-size: 48px;
  color: rgba(59, 166, 211, 0.3); /* #3BA6D3 at 30% */
  text-align: left;
}

/* REACH US specific title */
.reach-us h2 {
  font-size: 48px; /* match main title size */
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

/* Subtitles */
h3 {
  font-size: 28px;
  color: #154386;
  text-align: left;
}

/* Paragraphs */
p {
  font-size: 12px;
  color: #000000;
}

/* WHAT WE OFFER Title Colors */
.green-title { color: #60C559; }
.blue-title  { color: #00ADE5; }
.orange-title { color: #D75F2A; }

/* Section Backgrounds */
.why-choose-us {
  background-color: rgba(220, 220, 219, 0.45); /* #DCDCDB 45% */
}

.callout-banner {
  background-color: #3BA6D3;
  padding: 40px 20px;
  color: #fff;
  font-size: 34px;
  text-align: center;
}

.faq {
  background: #ffffff;
  padding: 80px 0;
}

.faq .faq-item {
  border: 1px solid black;
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.faq .answer {
  background-color: rgba(59, 166, 211, 0.48); /* #3BA6D3 48% */
  padding: 16px;
  margin-top: 10px;
  border-radius: 8px;
  color: #000;
}

.reach-us {
  background-color: rgba(0, 71, 174, 0.45); /* #0047AE at 45% */
  color: #fff;
  padding: 80px 20px;
}

/* FORM STYLING */
.reach-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reach-form input,
.reach-form textarea {
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.3);
  color: #000;
}

.reach-form textarea {
  resize: vertical;
}

.reach-form button {
  padding: 14px 28px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-radius: 0px;
  background: linear-gradient(to right, #3BA6D3, #ffffff);
  color: #0047AE;
  width: fit-content;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reach-form button:hover {
  opacity: 0.9;
}

/* ==== SECTION TITLES UNIFORM SPACING ==== */
.section-title {
  margin-top: 20px;
  margin-bottom: 40px; 
}

/* ==== FONT SIZE REFINEMENT ==== */

/* Main Titles (h2) */
h2 {
  font-size: 48px; /* refined size */
  color: rgba(59, 166, 211, 0.3);
  text-align: left;
  font-weight: 800;
}

/* REACH US specific title */
.reach-us h2 {
  font-size: 48px; /* match main title size */
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

/* Section Titles (h3) */
h3 {
  font-size: 26px; /* reduced from 32px */
  color: #154386;
  text-align: left;
  font-weight: 700;
}

/* Paragraphs */
p {
  font-size: 14px; /* increased from 12px for readability */
  color: #000000;
  line-height: 1.6;
}

/* Offer section titles (h4) */
.offer-box h4 {
  font-size: 20px; /* reduced from 32px */
  margin-bottom: 12px;
}

/* Contact section text */
.reach-left p {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: #ffffff;
}

/* ==== CALLOUT BANNER ==== */
.callout-banner p {
  color: #ffffff;
  font-size: 24px; /* keep current size */
  font-weight: 700;
  font-style: italic; /* italic style */
  font-family: 'Open Sans', sans-serif;
}

/* ==== FIXES: FONT & FORM CONSISTENCY ==== */

/* What We Offer & Why Choose Us font refinement */
.offer-section h2,
.why-text h2 {
  font-size: 48px; /* same as other h2 */
}

.offer-section h3,
.why-text h3 {
  font-size: 26px; /* same as other h3 */
}

.offer-box p,
.why-text p,
.why-text ul {
  font-size: 16px; /* match paragraph size */
  line-height: 1.6;
}

/* Reach Us form text size */
.reach-form input,
.reach-form textarea {
  font-size: 16px; /* consistent with site text */
}

/* Submit button centering */
.reach-form button {
  display: flex;
  justify-content: center;
  align-items: center; /* perfect vertical centering */
  position: relative;
  width: 160px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.reach-form button span {
  z-index: 2;
  color: white;
  font-size: 16px; /* consistent size */
  font-weight: 600;
}

/* Ensure consistent font in contact form */
.reach-form input,
.reach-form textarea {
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.3);
  color: #000000;
  font-family: 'Open Sans', sans-serif; /* ✅ added */
}

/* === Adjustments for spacing and LinkedIn link === */

/* Reduce space after callout banner */
.callout-banner {
  margin-bottom: 0px; /* tighter gap before Reach Us */
}

/* Ensure Reach Us has consistent spacing */
.reach-us {
  padding-top: 80px; /* same as other sections */
}

/* Force LinkedIn link in Reach Us section to stay white */
.reach-left a {
  color: #ffffff !important;
  text-decoration: none;
}

.reach-left a:hover {
  text-decoration: underline; /* optional hover effect */
}

/* ==== SERVICES PAGE ==== */
.services-intro {
  max-width: 1200px;   /* keep narrower width */
  margin: 0 auto;
  padding: 80px 24px;  /* removed bottom padding so we control spacing via margin */
  text-align: left;
}

.services-intro h2 {
  font-size: 48px;
  font-weight: 800;
  color: rgba(59, 166, 211, 0.7); /* make it more visible */
  margin-bottom: 60px; /* ⬅️ increase spacing below title */
}

.service-block {
  padding: 100px 0 60px; /* ✅ more space above content */
}

.service-content {
  max-width: 1200px;   /* ✅ consistent width */
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 40px; /* ✅ more space between text and image */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service-text {
  flex: 1;
}

.service-logo {
  max-width: 140px; /* ✅ slightly bigger logo */
  margin-bottom: 18px; /* ✅ more spacing below logo */
}

.service-text h3 {
  font-size: 28px;
  font-weight: 700;
  color: #154386;
  margin: 24px 0 16px; /* ✅ more space around title */
}

.service-text p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 18px; /* ✅ better readability */
}

.service-text ul {
  list-style-type: disc;
  padding-left: 20px;
  font-size: 16px;
  margin-bottom: 24px;
}

.service-text ul li {
  margin-bottom: 10px;
}

.service-image {
  flex: 1;
  text-align: center;
}

.service-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.tagline {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 40px; /* ✅ more space from content above */
}

/* Background colors per section */
.service-block {
  width: 100%;
  padding: 100px 0 60px;
}

/* full-width background colors */
.service-block.managed {
  background-color: #E8F5E9;
}

.service-block.hotspot {
  background-color: #E0F4FF;
}

.service-block.iot {
  background-color: #FFF0EB;
}

.service-block.telecoms {
  background-color: rgba(0, 71, 174, 0.15); /* light blue from your spec */
}

/* Divisory images at the END of sections */
.service-divider {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;           /* no extra space */
  padding: 0;          /* remove padding */
}

/* ==== REACH US (FINAL FIX) ==== */
.reach-us {
  background-color: #ffffff !important; /* white background */
  color: #154386 !important; /* dark blue text */
  padding: 100px 0 !important;
}

.reach-us h2 {
  font-size: 48px !important;
  color: rgba(59, 166, 211, 0.3) !important; /* same style as other section titles */
  font-weight: 800;
  margin-bottom: 40px;
  text-align: left;
}

.reach-left h3,
.reach-right h3 {
  font-size: 26px !important;
  color: #154386 !important; /* dark blue titles */
  margin-bottom: 20px;
  font-weight: 700;
}

.reach-left p {
  font-size: 16px !important;
  color: #000000 !important; /* black normal text */
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.reach-left a {
  color: #000000 !important;
  font-size: 16px;
  text-decoration: none;
}
.reach-left a:hover {
  text-decoration: underline;
}

.reach-image img {
  content: url("images/reach/XS_contacts_image2.png") !important; /* force new image */
  max-width: 400px !important;
  height: auto !important;
}

.reach-form input,
.reach-form textarea {
  font-size: 16px; /* consistent with site */
  background-color: #d0eaffbd; /* blue rectangles */
  color: #000000; /* black text */
  font-family: 'Open Sans', sans-serif;
}

.reach-form button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 48px;
  margin: 0 auto; /* center horizontally */
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.reach-form button span {
  position: relative;
  z-index: 2;
  font-size: 20px; /* match site font size */
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: #ffffff; /* white text */
}

/* Title background for Services page */
.services-intro {
  background-color: #E8F5E9; /* same as Managed Services background */
  padding: 60px 24px;
  text-align: center;
}

.services-intro h2 {
  font-size: 48px;
  color: rgba(26, 71, 140, 0.7); /* #1A478C at 70% */
  font-weight: 800;
}

/* Telecoms Infrastructure */
.service-block.telecoms {
  background-color: rgba(0, 71, 171, 0.15); /* #0047AB at 15% */
}

.service-block.telecoms h3 {
  color: #1A478C;
}
/* Make service sections full width */
.service-block {
  width: 100%;
  padding: 100px 0 60px;
}

/* No margin under dividers */
.service-divider {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Base tagline style */
.tagline {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 40px;
  line-height: 1.4;
}

/* Managed Services tagline */
.tagline.managed {
  color: #60C559;
  font-size: 22px;
}

/* Hotspot Solutions tagline */
.tagline.hotspot {
  color: #00ADE5;
  font-size: 22px;
}

/* IoT Solutions tagline */
.tagline.iot {
  color: #D75F2A;
  font-size: 22px;
}

/* Telecoms Infrastructure tagline */
.tagline.telecoms {
  color: #1A478C;
  font-size: 22px;
}

/* ==== SERVICES PAGE (clean) ==== */
.service-block {
  width: 100%;                 /* full width background */
  padding: 100px 0 60px;
}

.service-content {
  max-width: 1200px;           /* center content area */
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: none;            /* no background here */
}

/* background colors for each section */
.service-block.managed {
  background-color: #E8F5E9;   /* light green */
}

.service-block.hotspot {
  background-color: #E0F4FF;   /* light blue */
}

.service-block.iot {
  background-color: #FFF0EB;   /* light orange */
}

.service-block.telecoms {
  background-color: rgba(0, 71, 174, 0.15); /* light blue-gray */
}

/* divider fix */
.service-divider {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Intro block styled like Managed Services */
.intro-block {
  padding: 80px 0 0px; /* much smaller padding than normal service blocks */
  background-color: #E8F5E9; /* same as Managed Services background */
}

.intro-block h2 {
  font-size: 48px;
  font-weight: 800;
  color: #1a488ca8; /* dark blue, consistent with branding */
  margin: 0; /* remove extra bottom margin */
  text-align: left;
}
.navbar {
  overflow-x: hidden; /* prevent content overflow on small screens */
}

.navbar-container {
  flex-wrap: wrap; /* allow items to move below if needed */
}

@media (max-width: 768px) {
  .navbar-logo img {
    height: 50px; /* instead of 80px */
  }
}

/* ==== RESPONSIVE: WHAT WE OFFER ==== */
@media (max-width: 768px) {
  .offer-grid {
    flex-direction: column;   /* stack items vertically */
    gap: 40px;                /* keep spacing between them */
    align-items: center;      /* center align content */
  }

  .offer-box {
    flex: 1 1 100%;           /* full width */
    max-width: 500px;         /* optional: keeps them from being too wide */
    text-align: center;       /* center text */
  }

  .offer-box .icon-stack img {
    width: 120px;             /* slightly smaller icons on mobile */
  }

  .offer-box h4 {
    font-size: 24px;          /* adjust title size */
  }

  .offer-box p {
    font-size: 16px;          /* adjust description size */
  }
}

/* ==== RESPONSIVE FIX FOR MOBILE ==== */
@media (max-width: 768px) {
  /* Services page blocks */
  .service-content {
    flex-direction: column;      /* Stack text and image vertically */
    text-align: left;            /* Keep text aligned left */
  }

  .service-text, 
  .service-image {
    flex: 1 1 100%;              /* Each takes full width */
    max-width: 100%;
  }

  .service-image {
    margin-top: 20px;            /* Space between text and image */
    text-align: center;          /* Keep image centered */
  }

  /* Why Choose Us section */
  .why-choose-wrapper {
    flex-direction: column;      /* Stack vertically */
  }

  .why-text, 
  .why-image {
    flex: 1 1 100%;              /* Full width on mobile */
    max-width: 100%;
  }

  .why-image {
    margin-top: 20px;
    text-align: center;
  }
}