/* Typography & base */
:root{
  --q-teal: #097c87;
  --q-text: #151515;
}
*{ box-sizing: border-box; }
html, body{ overflow-x: hidden; } /* stop horizontal scroll */
body{
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--q-text);
}

/* Utilities */
.bg-teal{ background-color: var(--q-teal) !important; }
.text-teal{ color: var(--q-teal) !important; }

.btn-brand{
  --bs-btn-bg: var(--q-teal);
  --bs-btn-border-color: var(--q-teal);
  --bs-btn-hover-bg: #086b74;
  --bs-btn-hover-border-color: #086b74;
  --bs-btn-active-bg: #075c63;
  --bs-btn-active-border-color: #075c63;
  --bs-btn-color: #fff;
  font-weight: 500;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Section spacing */
.py-6{ padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }

/* Headings */
.section-title{
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: .5rem;
}
.display-lg-3{
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Small touches */
.brand-dot{ display:inline-block; width:10px; height:10px; background:#151515; border-radius:50%; margin-left:.4rem; }
.stat-active{ color: var(--q-teal); font-weight: 600; }

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

/* Logo text */
.qourin-logo,
.ltd {
  font-family: "Segoe UI", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  color: #151515;
}
.qourin-logo + .tm {
  font-size: 0.6rem;
  vertical-align: super;
  margin-left: 0;
  color: #151515;
}
.ltd { margin-left: 0; }

/* =============================== */
/* Navbar tweaks */
/* =============================== */
.navbar {
  font-family: "Segoe UI", Helvetica, sans-serif;
  font-size: 1rem;
}
.navbar .nav-link {
  color: #151515;
  font-weight: 400;
  padding: 0.5rem 0;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--q-teal);
}
.navbar-nav { gap: 1.5rem; }

/* ▼ Caret for About/Expertise/Industries */
.navbar .nav-link.has-caret {
  white-space: nowrap;
  position: relative;
}
.navbar .nav-link.has-caret::after {
  font-size: 0.7em;
  margin-left: .35rem;
  line-height: 1;
  vertical-align: middle;
  opacity: .7;
  transition: opacity .15s ease;
}
.navbar .nav-link.has-caret:hover::after,
.navbar .nav-link.has-caret:focus::after { opacity: 1; }

/* Wider About us submenu */
.dropdown-menu {
  background-color: #e5e5e7;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 240px;   /* increase width (default ~10rem/160px) */
}

.dropdown-item {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  color: #151515;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #d2d2d5;
  color: var(--q-teal);
}

.dropdown-divider {
  margin: 0;
  border-top: 1px solid #ccc;
}

/* =============================== */
/* Carousel grid fix */
/* =============================== */

/* Columns behave as vertical stacks */
.col-lg-6.d-flex.flex-column { min-height: 0; }

/* Top halves: fixed equal height */
.hero-top {
  height: 250px;     /* lock this height (adjust to design ratio) */
  min-height: 200px; /* safety for small screens */
  max-height: 300px; /* cap for very large screens */
}

/* Title inside top-left teal box */
.hero-title {
  font-family: "Segoe UI", Helvetica, sans-serif;
  font-weight: 500; /* slightly lighter than 600 */
  font-size: clamp(2.5rem, 5vw, 3.75rem); /* bigger across breakpoints */
  line-height: 1.2;
}

.hero-title span { display: block; } /* force line breaks */

/* Bottom halves (left text + right image) grow equally */
.col-lg-6.d-flex.flex-column > .flex-fill {
  flex: 1 1 auto;
  min-height: 0;
}

/* Ensure image fills its bottom cell */
.col-lg-6.d-flex.flex-column > .flex-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================== */
/* Number indicators styling (updated) */
/* =============================== */
/* Container */
.carousel-indicators-numbers {
  display: flex;
  align-items: flex-end;
  justify-content: center;   /* keep centered */
  padding: 0 2rem;
  height: 100%;
  gap: 1.5rem;               /* <-- new spacing between numbers */
}

/* Base button (inactive by default) */
.carousel-indicators-numbers .indicator-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 1rem;
  font-family: "Segoe UI", Helvetica, sans-serif;
  opacity: 0.6;
  position: relative;
  padding: 0;
  outline: none;
  transition: all 0.3s ease;
  text-align: left;
  flex: 0 0 24px;   /* width = short underline */
}

/* Short underline */
.carousel-indicators-numbers .indicator-btn::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  height: 2px;
  background: #ccc;
  width: 100%;
}

/* Active state */
.carousel-indicators-numbers .indicator-btn.active {
  color: var(--q-teal);
  font-weight: 600;
  opacity: 1;
  flex: 0 0 80px;   /* width = long underline */
}

/* Active underline */
.carousel-indicators-numbers .indicator-btn.active::before {
  background: var(--q-teal);
  width: 100%;
}

/* extra spacing when block is bottom aligned */
.carousel-caption-block {
  margin-top: auto;   /* push it down */
  padding-bottom: 3rem; /* adjust bottom spacing */
}

/* Custom block inside carousel left bottom */
.content-box {
  padding-left: 18rem;   /* left padding */
  padding-right: 2rem;  /* keep some breathing room */
  padding-top: 1rem;    /* small top spacing if needed */
}

/* Custom full-width CTA button */
.btn-estimate {
  background-color: var(--q-teal);
  border: none;
  border-radius: 0;      /* remove rounded corners */
  color: #fff !important;           /* white text */
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  text-align: left;      /* ensure text starts from left */
}

.btn-estimate:hover {
  background-color: #086b74; /* darker teal on hover */
  color: #fff;
}

/* Big impactful text */
.impact-statement {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--q-text);
}

.impact-sub {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  max-width: 460px;   /* keeps it narrow, easier to read */
  margin-left: auto;  /* push block to the right */
  text-align: left;   /* inside text is left aligned */
}

.mt-custom {
  margin-top: 2.5rem !important;
}

/* Brands section */

.brands-desc {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
}

/* Brand cards */
.brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #151515;
  border-radius: 50%;
  margin-left: .3rem;
}

a.fw-semibold {
  color: var(--q-text);
}
a.fw-semibold:hover {
  color: var(--q-teal);
}

/* Behind Qourin description text */
#behind-qourin p {
  font-size: 1.125rem; /* ~18px */
  line-height: 1.6;
  color: #444;
}

.mb-custom-5 {
  margin-bottom: 6rem !important;
}

/* Icons inside team cards */
.text-teal i {
  display: inline-block;
  font-size: 2rem;
}

/* Team card icons */
.team-icon {
  max-width: 48px;   /* adjust size */
  max-height: 48px;
  object-fit: contain;
}

.p-4-custom {
  padding: 2.5rem !important;
}

/* Partner logos */
.partner-logo {
  max-height: 60px;
  width: auto;
  display: block;
}

.footer {
  background-color: #03292D !important;
}

.footer .row.g-4 {
  padding-top: 3rem;   /* 48px */
  padding-bottom: 3rem;
}

.footer .row.align-items-center {
  padding-top: 2rem;   /* 32px */
  padding-bottom: 2rem;
}

.py-custom {
  padding-top: 3.5rem !important;
  padding-bottom: 4.5rem !important;
}
.footer a.link-light:hover {
  color: var(--q-teal) !important;
}
.footer .tm {
  font-size: 0.6rem;
  vertical-align: super;
}

.footer .footer-logo {
  font-size: 3rem;       /* bigger than body text */
  font-weight: 500;      /* slightly bolder */
  color: #fff;
}

.footer .footer-logo .tm {
  font-size: 0.7rem;     /* keep TM smaller */
  vertical-align: super;
}
.newsletter-block {
  max-width: 600px;  /* or 550px */
}

/* Newsletter form input */
.newsletter-form .form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  border-radius: 0;
  color: #fff;
  padding-left: 0;
  padding-right: 0;
  font-size: 1rem;
}

.newsletter-form .form-control::placeholder {
  color: rgba(255,255,255,0.6);
}

/* Arrow button */
.newsletter-form .btn-arrow {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 .5rem;
  transition: color .2s ease;
}

.newsletter-form .btn-arrow:hover {
  color: var(--q-teal);
}

/* Footer links alignment */
.footer-links {
  text-align: center;
}

/* Footer link styling */
.footer-link {
  color: #fff;               /* white */
  text-decoration: none;     /* no underline */
  transition: color .2s ease;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--q-teal);      /* brand color on hover */
  text-decoration: none;     /* still no underline */
}

/* Footer link spacing */
.footer-links ul li {
  margin-bottom: 0.75rem; /* increase vertical space (12px) */
}

.footer-links ul li:last-child {
  margin-bottom: 0; /* remove space after last link */
}

/* Default: mobile-first (small screens) */
.content-box {
  padding: 0; /* no padding on small/mobile */
}

/* Medium screens and up (≥768px) */
@media (min-width: 768px) {
  .content-box {
    padding-left: 4rem;  /* less left padding */
    padding-right: 2rem; /* slight right breathing */
    padding-top: 1rem;
    padding-bottom: 0;
  }
}

/* Extra large screens and up (≥1200px) */
@media (min-width: 1200px) {
  .content-box {
    padding-left: 12rem; /* larger desktop padding */
    padding-right: 3rem;
  }
}

/* XXL screens (≥1400px) */
@media (min-width: 1400px) {
  .content-box {
    padding-left: 18rem; /* your original wide desktop spacing */
  }
}

/* about us */

/* ============================= */
/* Hero section (About Us)       */
/* ============================= */
.about-hero {
  position: relative;
  height: 80vh; /* adjust height for hero */
  overflow: hidden;
}

.about-hero .hero-image {
  background: url("/assets/img/about_us.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Smooth zoom + pan animation */
@keyframes slowZoomPan {
  from {
    transform: scale(1);
    background-position: center top;
  }
  to {
    transform: scale(1.1);
    background-position: center bottom;
  }
}

/* Grid overlay (subtle white lines/dots) */
.about-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(transparent 95%, rgba(255, 255, 255, 0.1) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.1) 95%);
  background-size: 20px 20px; /* grid size */
  z-index: 2;
}

/* Content wrapper */
.about-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: flex-end;   /* align text block near bottom */
  padding-bottom: 3rem;    /* spacing from bottom */
}

/* Main blur box */
.about-hero .blur-box {
  background: rgba(255, 255, 255, 0.1); /* lighter blur so text is clear */
  backdrop-filter: blur(6px);

  width: 95%;
  margin-left: 0;
  margin-right: auto;
  padding: 2rem;
}

/* Left column (heading) */
.blur-box-light {
  padding-left: 4rem;   /* more space on the left */
  padding-top: 1.5rem;  /* adjust vertical */
  padding-bottom: 1.5rem;
  padding-right: 1rem;  /* small right space */
}

.blur-box-light h1 {
  color: #ffffff;  /* heading text white */
}

/* Paragraph text inside blur box */
.about-hero .blur-box p {
  color: #ffffff; /* force paragraph white */
}

/* Founder Section */

/* Founder section */
.founder-section {
  background-color: #f5f5f5; /* light section background */
}
/* Title inside founder-content aligns same as card */
.founder-content .section-title {
  width: 90%;          /* match card width */
  margin-right: 0;
  margin-left: auto;   /* push it right */
  color: #000000;      /* or white if dark background */
}

.pe-xxl-12rem {
  padding-right: 12rem !important;
}

/* Wrapper to right align */
.founder-content {
  display: flex;
  justify-content: flex-end; /* push to right */
  width: 100%;
}

/* Card like hero blur box but solid */
.founder-card {
  background-color: #03292D;
  width: 90%;          /* same as hero box */
  margin-right: 0;     /* flush right */
  margin-left: auto;   /* push away from left */
  border-radius: 0;
}

/* Founder image */
.founder-img {
  max-width: 240px;
  border: 3px solid #fff;
}

/* Section title with underline */
/* ======================== */
/* Section header           */
/* ======================== */
.story-header {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
}

.story-divider {
  border: 0;
  border-top: 2px solid #ddd;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* ======================== */
/* Years row                */
/* ======================== */
.story-years-wrapper {
  padding-left: 10%;   /* same alignment as founder section */
  width: 90%;
  margin-left: auto;
  margin-right: 0;
}

.story-years {
  display: flex;
  gap: 3rem;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.story-years .nav-link {
  font-family: "Segoe UI", Helvetica, sans-serif;
  font-weight: 300;      /* thin/light font */
  font-size: 4rem;       /* large year text */
  color: #ccc;
  border: none;
  background: none;
  padding: 0;
  transition: all 0.3s ease;
}

.story-years .nav-link.active {
  color: var(--q-teal);
  font-weight: 400;       /* slightly bolder */
  border-bottom: 2px solid var(--q-teal);
}

.story-years .nav-link:hover {
  color: var(--q-teal);
}

/* ======================== */
/* Body (arrows + content)  */
/* ======================== */
.story-body {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 10rem;   /* 🔥 added top padding */
}

/* Arrows column */
.story-arrows .btn-arrow {
  background: none;
  border: none;
  padding: 0.5rem;        /* clickable area */
  margin-right: .5rem;
  color: var(--q-teal);
  cursor: pointer;
}

.story-arrows .btn-arrow.disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* Arrow icons */
.story-arrows .btn-arrow i {
  font-size: 3rem;       /* bigger circular arrows */
  line-height: 1;
  color: var(--q-teal);
}

.story-arrows .btn-arrow.disabled i {
  color: #ccc;
}

/* Content column */
#storyTabsContent p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}

/* Vision Section Layout */
.vision-row {
  width: 90%;
  margin-left: auto;
  margin-right: 0;  /* right aligned like other sections */
}

.vision-header {
  padding-right: 2rem;
}

.vision-divider {
  border: 0;
  border-top: 1px solid #ddd;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}

.vision-body {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 5rem;   /* 🔥 added top padding */
  padding-bottom: 5rem; /* spacing at bottom */
}

.vision-body p {
  font-size: 1.125rem; /* ~18px */
  line-height: 1.7;
  color: #333;
  margin: 0;
}

/* Big section divider before Vision */
.vision-section-divider {
  width: 90%;
  margin-left: auto;   /* right aligned */
  margin-right: 0;
  border: 0;
  border-top: 2px solid #ddd;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Core Values body wrapper */
.core-values-body {
  width: 90%;          /* 90% of screen */
  margin-left: auto;   /* right aligned */
  margin-right: 0;
  padding-left: 10%;   /* left gap */
  padding-right: 5%;   /* small breathing space */
}

/* Section Title */
.core-values-section .section-title {
  font-family: "Segoe UI", Helvetica, sans-serif; /* ✅ Segoe UI */
  font-size: 2rem;
  font-weight: 600;
  color: #151515;
}

/* Accordion wrapper */
.core-values-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid #ddd;   /* subtle divider */
  border-radius: 0;                /* no rounded edges */
}

/* Accordion button (headings) */
.core-values-section .accordion-button {
  font-family: "Segoe UI", Helvetica, sans-serif; /* ✅ Segoe UI */
  font-weight: 500;      /* medium weight */
  font-size: 1.125rem;   /* ~18px */
  color: #151515;
  background: #fff;
  box-shadow: none !important;     /* remove Bootstrap shadow */
  padding: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Accordion hover */
.core-values-section .accordion-button:hover {
  background: #f5f5f5;
}

/* Accordion expanded (active) */
.core-values-section .accordion-button:not(.collapsed) {
  color: var(--q-teal);
  background: #f9f9f9;
}

/* Accordion body (content text) */
.core-values-section .accordion-body {
  font-family: "Segoe UI", Helvetica, sans-serif; /* ✅ Segoe UI */
  font-weight: 400;
  font-size: 1rem;       /* ~16px */
  color: #444;
  line-height: 1.6;
  padding: 0.75rem 1rem 1rem;
}

/* ============================== */
/* Contact Us Page Styles */
/* ============================== */

/* Contact Hero Section */
.contact-hero {
  position: relative;
  width: 100%;
  height: 60vh;            /* ≈ 582px on 1080p screens */
  min-height: 400px;       /* fallback for small devices */
  max-height: 582px;       /* lock max height */
  overflow: hidden;
}

.contact-hero .contact-hero-image {
  background: url("/assets/img/contact_us.png") center center/cover no-repeat;
  width: 100%;
  height: 100%;
}

/* Contact Section Header */
.contact-header {
  padding-top: 4rem;       /* more space at the top */
  margin-bottom: 2.5rem;   /* breathing room below */
}

/* Align Contact Us section like Founder section */
.contact-body {
  width: 90%;          /* 90% width */
  margin-left: auto;   /* right aligned */
  margin-right: 0;
  padding-left: 10%;   /* 10% gap left */
  padding-right: 5%;   /* small breathing space */
}

/* Section Title (same as Founder) */
.contact-section .section-title {
  font-family: "Segoe UI", Helvetica, sans-serif;
  font-size: 3rem;     /* consistent with Founder */
  font-weight: normal;
  color: #151515;
}

/* ============================== */
/* Contact Form Styles */
/* ============================== */

/* Kill gutters inside rows */
.contact-form .row { 
  --bs-gutter-x: 0 !important; 
  --bs-gutter-y: 0 !important; 
  display: flex;           /* ✅ make row flex */
  align-items: stretch;    /* ✅ equal height columns */
}
.contact-form .row > [class^="col-"],
.contact-form .row > [class*=" col-"] { 
  padding-left: 0 !important; 
  padding-right: 0 !important; 
}

/* Flat rectangular inputs */
.contact-form .form-control,
.contact-input {
  height: 4.2rem;            /* taller inputs */
  border-radius: 0;          /* no rounded corners */
  border: 1px solid #ccc;    /* subtle border */
  background-color: #f9f9f9; /* light bg for contrast */
  font-size: 1rem;
  padding: 1rem;
  margin-bottom: 0;          /* remove extra gap */
  box-shadow: none;          /* clean, flat */
  transition: border-color 0.2s ease;
}

/* Focus effect */
.contact-form .form-control:focus,
.contact-input:focus {
  border-color: var(--q-teal);
  outline: none;
  box-shadow: none;
}

/* Placeholder styling */
.contact-form .form-control::placeholder,
.contact-input::placeholder {
  color: #888;
  font-size: 0.95rem;
}

/* Textarea */
.contact-form textarea.form-control,
.contact-form textarea.contact-input {
  height: auto;
  min-height: 10rem;         /* taller box */
  border-radius: 0;
  resize: none;
}

/* File input styled same */
.custom-file-input .file-label {
  cursor: pointer;
  height: 4.2rem;            /* match other inputs */
  border-radius: 0;          /* no rounded corners */
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 1rem;
  font-size: 1rem;
  color: #555;
  display: flex;
  align-items: center;
  transition: border-color 0.2s ease;
}
.custom-file-input .file-label:hover {
  border-color: var(--q-teal);
  color: var(--q-teal);
}
.custom-file-input input[type="file"]:focus + .file-label {
  border-color: var(--q-teal);
  box-shadow: none;
}

/* Privacy Policy */
.contact-form .form-check-label {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================== */
/* Send Button (Right Column) */
/* ============================== */
.contact-form .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;            /* full width in column */
  height: 100%;           /* ✅ stretch full column height */
  background-color: var(--q-teal);
  border: none;
  color: #fff;
  transition: background-color 0.2s ease;
}
.contact-form .btn-brand:hover {
  background-color: #086b74;
}

/* Ensure parent column aligns correctly */
.col-lg-3.d-flex {
  align-items: stretch;
}

/* Custom file wrapper */
.custom-file-wrapper {
  position: relative;
  width: 100%;
}

.custom-file-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: #888;             /* ✅ font color updated */
  cursor: pointer;
  height: 4.2rem;          /* same as other inputs */
  border-radius: 0;        /* flat corners */
  transition: border-color 0.2s ease, color 0.2s ease;
}

.custom-file-label:hover {
  border-color: var(--q-teal);
  color: #555;             /* slightly darker on hover */
}

.custom-file-label i {
  font-size: 1.2rem;
  color: #888;             /* ✅ icon color updated */
  transition: color 0.2s ease;
}

.custom-file-label:hover i {
  color: var(--q-teal);    /* teal highlight on hover */
}

/* Hide native input */
.custom-file-input {
  display: none;
}

/* ============================== */
/* Privacy Policy Styled Box */
/* ============================== */
/* Privacy Policy box */
.privacy-box {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 0;
  font-size: 0.9rem;
  color: #555;
}

/* Teal block on the right side */
.teal-box {
  background-color: var(--q-teal); /* uses your theme teal */
  border-radius: 0;
}

/* ============================== */
/* Equal height for privacy rows  */
/* ============================== */

/* Base sizes to keep rows in sync */
.contact-form {
  --pv-input-h: 4.2rem;   /* same as your input height */
  --pv-pad-y: 1rem;       /* p-3 vertical padding (Bootstrap = 1rem) */
  --pv-row-min: calc(var(--pv-input-h) + (var(--pv-pad-y) * 2));
}

/* The privacy row inside the left column uses col-10 + col-2; make them stretch */
.contact-form .privacy-box > .row,
.contact-form .row.g-0.align-items-center {   /* catches your g-0 privacy row */
  display: flex;
  align-items: stretch;
}

/* Make both grid cells act as flex containers so children can fill height */
.contact-form .privacy-box > .row > [class^="col-"],
.contact-form .privacy-box > .row > [class*=" col-"],
.contact-form .row.g-0.align-items-center > [class^="col-"],
.contact-form .row.g-0.align-items-center > [class*=" col-"] {
  display: flex;
}

/* Left cell: checkbox block fills height */
.contact-form .privacy-box .form-check {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: var(--pv-input-h);
}

/* Right cell: the teal block fills and matches height */
.contact-form .teal-box {
  background-color: var(--q-teal);
  flex: 1 1 auto;
  min-height: var(--pv-row-min);   /* same total height as the privacy row */
  border-radius: 0;
}

/* Make the whole privacy row itself at least as tall as inputs */
.contact-form .privacy-box {
  min-height: var(--pv-row-min);
}

/* Invisible placeholders should still reserve space */
.contact-form .privacy-box.invisible,
.contact-form .teal-box.invisible {
  visibility: hidden;            /* keeps layout/height */
  min-height: var(--pv-row-min); /* lock same height */
}

/* ============================== */
/* Keep right column button aligned */
/* ============================== */

/* Right column itself stretches; button fills it */
.contact-form .col-lg-3.d-flex,
.contact-form .col-md-4.d-flex {
  align-items: stretch;
}
.contact-form .btn-brand {
  width: 100%;
  height: 100%;   /* fill the right column height */
}

/* Optional: ensure the bottom placeholder row matches the privacy row height */
.contact-form .row.g-0.mt-2 .privacy-box {
  min-height: var(--pv-row-min);
}

/* ============================== */
/* Career Page Styles */
/* ============================== */

/* Career Hero */
.career-hero {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  max-height: 582px;
  overflow: hidden;
}
.career-hero .career-hero-image {
  background: url("/assets/img/career_header.jpg") center center/cover no-repeat;
  width: 100%;
  height: 100%;
}

/* Career body alignment */
.career-body {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  padding-left: 10%;
  padding-right: 5%;
}

/* Remove gutters */
.career-form .row {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}
.career-form .row > [class^="col-"],
.career-form .row > [class*=" col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Input + select + textarea uniform box */
.career-form .form-control {
  height: 4.5rem;             /* taller fields */
  border-radius: 0;           /* sharp corners */
  border: 1px solid #ccc;     /* boxy border */
  background-color: #f9f9f9;
  font-size: 1rem;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 1rem;
  margin-bottom: 0;           /* no spacing between fields */
  box-shadow: none;
  transition: border-color 0.2s ease;
  color: #151515;
}
.career-form .form-control:focus {
  border-color: var(--q-teal);
  outline: none;
  box-shadow: none;
}

/* Textarea */
.career-form textarea.form-control {
  min-height: 12rem;         
  font-size: 1.2rem;         /* ✅ bigger text */
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  resize: none;
}

/* Label above textarea */
.career-form .textarea-label {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.6rem;          /* ✅ bigger label */
  font-weight: 600;
  color: #151515;
  margin-bottom: 0.75rem;
  padding-top: 2rem;          /* ✅ top spacing */
  display: block;
}

/* Custom file input styled like a box */
.custom-file-wrapper {
  position: relative;
  width: 100%;
}
.custom-file-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.5rem;            
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 0 1rem;
  cursor: pointer;
  color: #888;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
.custom-file-input {
  display: none;
}
.custom-file-label i {
  font-size: 1.3rem;
  color: #888;
}

/* Submit button full width */
.career-form .btn-brand {
  display: flex;                         
  justify-content: space-between;        /* Send left, Arrow right */
  align-items: center;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;                     
  font-weight: 600;
  padding: 1rem 1.5rem;                  
  border-radius: 0;
  background-color: var(--q-teal);
  border: none;
  color: #fff;
  width: 100%;
  height: 4.5rem;                        /* match form field height */
}
.career-form .btn-brand i {
  font-size: 1.6rem;                     
}
.career-form .btn-brand:hover {
  background-color: #086b74;
}

/* ============================= */
/* Left column styles (Career) */
/* ============================= */
.career-left {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif; 
}0;
.career-left .section-title {
  font-size: 2.2rem;   
  font-weight: 700;
  color: #151515;
}
.career-left p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}
.career-left h5 {
  font-size: 1.2rem;     
  font-weight: 60
  margin-bottom: 1rem;
  color: #151515;
}
.career-left .form-check-label {
  font-size: 1rem;
  font-weight: 400;
  color: #333;
}
.career-left .form-check-input {
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

/* ============================== */
/* R&D - Innovation & Research */
/* ============================== */

/* Innovation Hero */
.innovation-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.innovation-hero .hero-image {
  background: url("/assets/img/innovation_n_research.jpg") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.innovation-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.innovation-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.innovation-hero .blur-box {
  background: rgba(93, 93, 93, 0.65);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.innovation-hero .blur-box h1,
.innovation-hero .blur-box h2,
.innovation-hero .blur-box h3,
.innovation-hero .blur-box h4,
.innovation-hero .blur-box h5,
.innovation-hero .blur-box h6,
.innovation-hero .blur-box p,
.innovation-hero .blur-box span,
.innovation-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.innovation-hero .blur-box p {
  color: rgba(255, 255, 255, 0.85) !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.innovation-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.innovation-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.innovation-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}

/* Vission Section */

/* ============================== */
/* Vision Section */
/* ============================== */
.vision-section {
  background-color: #f8f9fa; /* matches light background */
  /* padding: 4rem 0;           give section breathing space */
}

/* Body wrapper aligned like Founder/Story sections */
.vision-body {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  padding-left: 10%;   /* left blank space */
  /* padding-right: 5%;   small right spacing */
}

/* Section title */
.vision-section .section-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #151515;
  margin-bottom: 1rem; /* spacing below title */
}

/* Vision paragraph */
.vision-section p {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 0;
  max-width: 70%;    /* keeps text aligned, prevents very wide lines */
}

/* Vision image container */
.vision-image {
  width: 80%;        /* image width = 80% of page */
  margin: 2rem auto 0 auto; /* centered + spacing above */
}

/* Vision image */
.vision-image img {
  width: 70%;
  height: auto;
  display: block;
  border-radius: 0;  /* sharp corners */
  object-fit: cover; /* ensures proportionate scaling */
}

/* ============================== */
/* Research Section */
/* ============================== */
.research-section {
  background-color: #fff;   /* section stays white */
  color: #151515;           /* default text color */
}

/* Body wrapper with teal background */
.research-body {
  width: 90%;               /* content width */
  margin-left: auto;        /* align right */
  margin-right: 0;
  padding: 8rem 10% 3rem 10%; /* spacing inside box */
  background-color: var(--q-teal); /* ✅ teal only here */
  color: #fff;              /* text inside white */
}

/* Title */
/* Title */
.research-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight:normal;
  color: #fff;
  padding-top: 1rem;      /* ✅ space above */
  padding-bottom: 6rem;   /* ✅ space below */
  margin-bottom: 2rem;    /* keeps gap before next paragraph */
}

/* Paragraphs */
.research-body p {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #f8f9fa;
  margin-bottom: 1.5rem;
  max-width: 85%;           /* keep readable */
}

/* ============================== */
/* Publication Section Styles */
/* ============================== */
.publication-section {
  background-color: #f8f9fa;   /* default background */
  padding: 4rem 0;
}

.publication-body {
  width: 90%;          
  margin-left: auto;   
  margin-right: 0;
  padding-left: 10%;   /* ✅ align with other sections */
  padding-right: 5%;   /* breathing space */
}

/* ============================== */
/* Publication Header + Intro */
/* ============================== */
.publication-header .section-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 4rem;
  font-weight: bold;
  color: #151515;
}

.publication-intro p {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #333;
  margin-top: 5rem;
  margin-bottom: 0;
  padding-left: 15%;     /* ✅ extra left space inside */
  padding-right: 54%;    /* ✅ extra right space inside */
}

/* ============================== */
/* How We Work Section Styles */
/* ============================== */

.howwework-section {
  background-color: #f8f9fa;
  padding-top: 10%;
}

.howwework-container {
  width: 90%;       /* ✅ fixed container width */
  margin-left: auto;
  margin-right: auto;
}

.howwework-header .section-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #151515;
}

/* Content text */
.howwework-intro p {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #333;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* ============================== */
/* Publication Card (each paper) */
/* ============================== */

.article-body {          
  width: 100%;          
  margin-left: auto;    
  margin-right: 0;
  padding-left: 10%;   /* ✅ align with other sections */
}

.article-card {
  background-color: #033c3c;   /* teal card */
  color: #fff;
  border-radius: 0;
  overflow: hidden;
  margin-top: 3rem;            /* spacing between intro & first card */
}

.number-box {
  background-color: #033c3c;
  padding: 1.5rem 1rem;    /* top + left spacing */
  text-align: left;        /* align text left */
}

.pub-number {
  font-size: 4rem;
  font-weight: bold;
  margin: 0;
  color: #fff;
}

.pub-content {
  padding: 2rem;
}

.pub-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.pub-authors {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.pub-abstract {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.pub-doi {
  font-size: 1rem;
  font-weight: 600;
}

.pub-doi a {
  color: #f8f9fa;
  text-decoration: underline;
}

.pub-doi a:hover {
  color: #00c0c0;
}

/* ============================== */
/* Mobile Development Page Styles */
/* ============================== */

/* Page body wrapper (applies to all sections of this page) */
.mobiledev-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* Header (hero section) */
.mobiledev-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.mobiledev-hero .hero-image {
  background: url("/assets/img/mobile_dev.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.mobiledev-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* subtle dark overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.mobiledev-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding: 0 5%;               /* spacing on the right */
}

.mobiledev-hero .blur-box {
  background: rgba(55, 55, 55, 0.6);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0;
  max-width: 45%;
  text-align: left;
}

.mobiledev-hero .blur-box h1,
.mobiledev-hero .blur-box p {
  color: #fff;   /* ✅ ensure all text is white */
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* Services Section */
/* ============================== */
.services-section {
  background-color: #fff;       /* whole section background white */
}

.services-body {
  width: 90%;                   /* 90% width */
  margin-left: auto;            /* right aligned */
  margin-right: 0;
  background-color: #097C87;    /* solid teal background */
  /* padding: 3rem 2rem; */
  padding-top: 10%;
  color: #fff;
}

/* Title */
.services-body .section-title {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2.5rem;
}

/* Service rows */
.service-row {
  width: 100%;                     /* full width */
  /* padding: 3rem 0; */
  padding: 4% 4% 4% 4%;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.service-row:last-child {
  border-bottom: none;  /* remove border on last row */
}

/* Reset bootstrap row gaps inside service-row */
.service-row .row {
  margin-left: 0;
  margin-right: 0;
}
.service-row .col-lg-6 {
  padding-left: 0;
  padding-right: 0;
}

/* Left column (title) */
.service-title {
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0 1rem;
}

/* Right column (description) */
.service-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: #f0f0f0;
  padding: 0 1rem;
}

/* Highlight row (special background) */
.service-row.highlight {
  background-color: #025c5c;   /* darker teal for emphasis */
}

.service-row.highlight .service-title,
.service-row.highlight .service-desc {
  color: #fff; /* ensure contrast */
}

/* Whitehighlight row (light bg) */
.service-row.whitehighlight {
  background-color: #ffffff;   /* white background */
  border-bottom: 1px solid rgba(0,0,0,0.1); /* subtle divider */
}

/* Ensure all text inside is dark */
.service-row.whitehighlight .service-title,
.service-row.whitehighlight .service-desc,
.service-row.whitehighlight .service-desc h1,
.service-row.whitehighlight .service-desc h2,
.service-row.whitehighlight .service-desc h3,
.service-row.whitehighlight .service-desc h4,
.service-row.whitehighlight .service-desc h5,
.service-row.whitehighlight .service-desc h6,
.service-row.whitehighlight .service-desc p {
  color: #040404; /* dark text */
}

/* Optional: if you want hr inside also dark */
.service-row.whitehighlight hr {
  border-color: #040404;
}

/* ============================== */
/* DevOps Page Styles */
/* ============================== */

/* Background with animation */
.devops-hero .hero-image {
  background: url("/assets/img/dev_ops.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.devops-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.devops-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.devops-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background:rgba(255, 255, 255, 0.1);  /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.devops-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.devops-hero .blur-box {
  background:rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.devops-hero h1,
.devops-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Background animation */
@keyframes slowZoomPan {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, -2%); }
}

/* Service numbers */
.service-number {
  font-size: 3rem;               /* big numbers */
  font-weight: 400;              /* normal weight */
  margin: 0;
  line-height: 1;
  text-align: left;
}

/* Cloud */

/* ============================== */
/* DevOps Page Styles */
/* ============================== */

/* Background with animation */
.cloud-hero .hero-image {
  background: url("/assets/img/cloud.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.cloud-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.cloud-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.cloud-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background:rgba(255, 255, 255, 0.1);  /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.cloud-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.cloud-hero .blur-box {
  background:rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.cloud-hero h1,
.cloud-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* DevOps Page Styles */
/* ============================== */

/* Background with animation */
.webdev-hero .hero-image {
  background: url("/assets/img/web_dev.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.webdev-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.webdev-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.webdev-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);  /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.webdev-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.webdev-hero .blur-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.webdev-hero h1,
.webdev-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* DevOps Page Styles */
/* ============================== */

/* Background with animation */
.consult-hero .hero-image {
  background: url("/assets/img/consulting.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.consult-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.consult-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.consult-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);  /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.consult-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.consult-hero .blur-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.consult-hero h1,
.consult-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* DevOps Page Styles */
/* ============================== */

/* Background with animation */
.qa-hero .hero-image {
  background: url("/assets/img/qa.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.qa-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.qa-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.qa-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0); /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.qa-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.qa-hero .blur-box {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.qa-hero h1,
.qa-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* Software Dev Page Styles */
/* ============================== */

/* Background with animation */
.soft-hero .hero-image {
  background: url("/assets/img/software_dev.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

/* Page body wrapper (applies to all sections of this page) */
.soft-body {
  width: 90%;            /* ✅ only 90% width */
  margin-left: auto;     /* ✅ push everything to the right */
  margin-right: 0;
  padding-left: 10%;     /* ✅ left gap */
  padding-right: 5%;     /* breathing space */
}

/* DevOps Hero Section */
.soft-hero {
  position: relative;
  width: 100%;
  height: 80vh;                  /* same as mobile_dev.php */
  min-height: 500px;             /* fallback for smaller screens */
  max-height: 900px;             /* cap height like mobile hero */
  overflow: hidden;
}

/* Dark overlay */
.soft-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);  /* semi-transparent overlay */
  z-index: 2;
}

/* Hero content (blur box like your screenshot) */
.soft-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* ✅ right aligned */
  align-items: center;
  padding-right: 8%;           /* spacing from right edge */
  padding-left: 10%;           /* keep consistent left gap */
}

.soft-hero .blur-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;       /* smaller box, like mobile_dev hero */
  text-align: left;
  color: #fff;
}

/* White text */
.soft-hero h1,
.soft-hero p {
  color: #fff !important;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================== */
/* healthtech */
/* ============================== */
/* Innovation Hero */
.health-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.health-hero .hero-image {
  background: url("/assets/img/health_tech.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.health-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.health-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.health-hero .blur-box {
  background: rgba(93, 93, 93, 0.65);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.health-hero .blur-box h1,
.health-hero .blur-box h2,
.health-hero .blur-box h3,
.health-hero .blur-box h4,
.health-hero .blur-box h5,
.health-hero .blur-box h6,
.health-hero .blur-box p,
.health-hero .blur-box span,
.health-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.health-hero .blur-box p {
  color: rgba(255, 255, 255, 0.85) !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.health-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.health-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.health-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}

/* HealthTechVission Section */
/* HealthTech – left/right 10% gap, right aligned */
.health1st-body {
  width: 90%;
  margin-left: auto;   /* right aligned */
  margin-right: 0;
  padding-left: 10%;   /* left gap */
  padding-right: 5%;
}

/* Section surface */
.health1st-section {
  background-color: #f5f6f7; /* same vibe as your light gray */
  padding: 4rem 0 3rem;
}

/* Typography */
.health1st-section p {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 5% 0;
}

.health1st-lead {
  font-weight: normal;
  line-height: 1.35;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem); /* big headline-like paragraph */
  color: #151515;
}

.health1st-copy {
  font-weight: 400;
  line-height: 1.7;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
  color: #333;
}

/* Optional: keep rows tidy on small screens */
@media (max-width: 991.98px) {
  .health1st-body { padding-left: 8%; padding-right: 6%; }
  .health1st-section { padding: 3rem 0 2rem; }
}

/* ============================== */
/* Services Features Section */
/* ============================== */
.services-features {
  background-color: #fff;
}

.services-features-body {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  color: #fff;
}

/* ============================== */
/* Service Row */
/* ============================== */
.service-features-row {
  display: flex;
  align-items: center;         /* vertical center */
  min-height: 220px;           /* consistent height */
  padding: 2rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.service-features-row:last-child {
  border-bottom: none;
}

/* Intro row (taller, for section heading) */
.service-features-row.intro {
  min-height: 350px;
  padding: 4rem 3rem;
}

.service-features-row.intro h2 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ============================== */
/* Number Column */
/* ============================== */
.service-features-title {
  display: flex;
  align-items: flex-start;     /* top-left aligned */
  justify-content: flex-start;
}

.pub-number {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  color: inherit;
}

/* ============================== */
/* Text Column */
/* ============================== */
.service-features-desc {
  padding-left: 2rem;
}

.service-features-desc h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.service-features-desc p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ============================== */
/* Background Variants */
/* ============================== */

.services-features-body .service-features-row:first-child {
  background-color: #03292D;
}

.service-features-row.highlight {
  background-color: #025c5c;   /* dark teal */
}

.service-features-row.normlight {
  background-color: #097C87;   /* normal teal */
}

.service-features-row.whitehighlight {
  background-color: #ffffff;   /* white row */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.service-features-row.whitehighlight h2,
.service-features-row.whitehighlight p,
.service-features-row.whitehighlight .pub-number {
  color: #040404; /* dark text for contrast */
}

/* ============================== */
/* Enhancements for numbered rows */
/* ============================== */

/* Make numbered feature rows taller (except intro) */
.service-features-row:not(.intro) {
  min-height: 300px;        /* taller height */
  align-items: flex-start;  /* stick number & text to the top */
  padding: 3rem;            /* more breathing room */
}

/* Adjust number */
.service-features-title .pub-number {
  font-size: 1.4rem;        /* smaller number */
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  padding-top: 0.5rem;      /* push slightly down for alignment */
}

/* For extra space at the top of the text column */
.service-features-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* still keeps vertical centering */
  padding-left: 2rem;
  padding-top: 1.5rem;       /* ✅ extra space on top */
}

/* Add space between heading and paragraph */
.service-features-desc h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 1.5rem; 
  margin-bottom: 1rem;      /* extra spacing */
}

.service-features-desc p {
  font-size: 1rem;
  line-height: 1.7;
  padding-top: 1rem; 
  padding-right: 13%;    /* limit line length for readability */
  margin: 0;
}

.service-features-desc pp {
  font-size: 1rem;
  line-height: 1.7;
  padding-right: 13%;    /* limit line length for readability */
  margin: 0;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  color: #151515;  
  font-size: 1rem;
}

/* Extra height only for rows 2 & 3 */
.service-features-row.tall-row {
  min-height: 300px;      /* taller than default */
  padding: 3rem;          /* more breathing space */
  align-items: flex-start; /* push content to top */
}

.service-features-row.tall-row .pub-number {
  font-size: 1.6rem;   /* smaller number */
  margin-top: 0;       /* stick to top */
}

.service-features-title .pub-number {
  font-size: 1.6rem;   /* smaller number */
  margin-top: 0;
  color: #ffffff;       /* stick to top */
} 

.service-features-title .pub-title {
  font-size: 1.6rem;   /* smaller number */
  margin-top: 0;
  color: #000000;       /* stick to top */
} 

/* ============================== */
/* FAQ Row (Mid-title Centered) */
/* ============================== */
.service-features-row.faq-row {
  display: flex;
  justify-content: center;   /* ✅ center horizontally */
  align-items: center;       /* ✅ center vertically */
  min-height: 200px;         /* ✅ shorter than tall rows */
  padding: 2rem;             /* balanced spacing */
  background-color: #ffffff; /* white background */
  border-bottom: none;       /* no border under FAQ */
}

.service-features-row.faq-row .service-features-title,
.service-features-row.faq-row .service-features-desc {
  flex: unset;               /* reset flex sizes */
  padding: 0;                /* remove inherited padding */
}

.service-features-midtitle {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;          /* like section title */
  font-weight: 700;
  text-align: center;
  color: #151515;
  margin: 0;
}

/* ============================== */
/* Vertically center only FAQ row text */
/* ============================== */
.service-features-row.faq-row .service-features-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ✅ vertical centering */
  padding: 0 2rem;           /* keep side padding */
}

.service-features-row.faq-row .service-features-desc p {
  margin: 0;                 /* remove extra margin */
  line-height: 1.7;
}

.service-features-row.greylight {
  background-color: #D2D2D5;   /* normal teal */
}


/* FAQ collapsed vs expanded states */
.service-features-row.whitelight {
  background-color: #ffffff;
  min-height: 120px;                 /* compact */
  padding: 1.25rem 3rem;
}

/* Hide the pp text when collapsed */
.service-features-row.whitelight pp { display: none; }

/* Expanded row (you already have .greylight bg defined) */
.service-features-row.greylight {
  background-color: #D2D2D5;         /* already present in your CSS */
  min-height: 220px;                  /* roomy height */
  padding: 2rem 3rem;
}
.service-features-row.greylight pp { display: block; }

/* Cursor + icon sizing/alignment */
.faq-row { cursor: pointer; }
.toggle-col {
  display: flex; align-items: center; justify-content: flex-end;
}
.faq-toggle { font-size: 1.6rem; color: #151515; }

/* Smooth height feel (optional visual tweak) */
.service-features-row.whitelight,
.service-features-row.greylight {
  transition: background-color .25s ease, padding .25s ease, min-height .25s ease;
}
/* Add a divider line between FAQ rows */
/* Strong dark hr between FAQ rows */
.services-features-body hr {
  border: none;              /* remove default */
  border-top: 2px solid #626262;  /* dark line */
  margin: 0;                 /* no extra spacing */
}

/* ecomm hero */

.ecomm-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.ecomm-hero .hero-image {
  background: url("/assets/img/ecom.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.ecomm-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.ecomm-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.ecomm-hero .blur-box {
  background: rgba(93, 93, 93, 0.65);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.ecomm-hero .blur-box h1,
.ecomm-hero .blur-box h2,
.ecomm-hero .blur-box h3,
.ecomm-hero .blur-box h4,
.ecomm-hero .blur-box h5,
.ecomm-hero .blur-box h6,
.ecomm-hero .blur-box p,
.ecomm-hero .blur-box span,
.ecomm-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.ecomm-hero .blur-box p {
  color: rgba(255, 255, 255, 0.85) !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.ecomm-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.ecomm-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.ecomm-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}

/* EdTech */

.edtech-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.edtech-hero .hero-image {
  background: url("/assets/img/ed_tech.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.edtech-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.edtech-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.edtech-hero .blur-box {
  background: rgba(93, 93, 93, 0.65);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.edtech-hero .blur-box h1,
.edtech-hero .blur-box h2,
.edtech-hero .blur-box h3,
.edtech-hero .blur-box h4,
.edtech-hero .blur-box h5,
.edtech-hero .blur-box h6,
.edtech-hero .blur-box p,
.edtech-hero .blur-box span,
.edtech-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.edtech-hero .blur-box p {
  color: rgba(255, 255, 255, 0.85) !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.edtech-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.edtech-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.edtech-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}

/* FinTech */

.fintech-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.fintech-hero .hero-image {
  background: url("/assets/img/fin_tech.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.fintech-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.fintech-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.fintech-hero .blur-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.fintech-hero .blur-box h1,
.fintech-hero .blur-box h2,
.fintech-hero .blur-box h3,
.fintech-hero .blur-box h4,
.fintech-hero .blur-box h5,
.fintech-hero .blur-box h6,
.fintech-hero .blur-box p,
.fintech-hero .blur-box span,
.fintech-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.fintech-hero .blur-box p {
  color: rgba(255, 255, 255, 0.1); !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.fintech-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.fintech-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.fintech-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}

/* Artificial Inteligence */

.ai-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.ai-hero .hero-image {
  background: url("/assets/img/ai_ml.png") center center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: slowZoomPan 30s ease-in-out infinite alternate;
}

.ai-hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,0.1) 95%),
                    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.1) 95%);
  background-size: 20px 20px;
  z-index: 2;
}

/* Hero content positioned to middle-right */
.ai-hero .hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;   /* push content to the right */
  align-items: center;         /* vertically centered */
  padding: 0 5%;               /* spacing from right edge */
}

/* Blur box */
.ai-hero .blur-box {
  background: rgba(93, 93, 93, 0.65);
  backdrop-filter: blur(8px);
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  max-width: 45%;              /* smaller width, like your screenshot */
  text-align: left;
  color: #fff;                 /* ✅ default white text */
}

/* Force all text inside blur-box to white */
.ai-hero .blur-box h1,
.ai-hero .blur-box h2,
.ai-hero .blur-box h3,
.ai-hero .blur-box h4,
.ai-hero .blur-box h5,
.ai-hero .blur-box h6,
.ai-hero .blur-box p,
.ai-hero .blur-box span,
.ai-hero .blur-box a {
  color: #ffffff !important;   /* ✅ always white */
}

/* If you want lighter (like text-white-75 effect) */
.ai-hero .blur-box p {
  color: rgba(255, 255, 255, 0.85) !important; /* ✅ subtle fade */
}

/* Full width button at bottom */
.ai-hero .hero-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.ai-hero .hero-cta .btn-brand {
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
  background-color: var(--q-teal);
  color: #fff;
  width: 100%;
}

.ai-hero .hero-cta .btn-brand:hover {
  background-color: #086b74;
}