:root {
  --brand: #206ba4;
  --navy: #061b2e;
  --ink: #101820;
  --muted: #667085;
  --soft: #f5f8fb;
  --border: #dfe7ef;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.section-padding {
  padding: 50px 0;
}

.eyebrow {
  display: inline-block;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.eyebrow-light {
  color: #8ed0ff;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.05;
}

h1 span,
h2 span {
  color: var(--brand);
}

.btn {
  border-radius: 8px;
  padding: 0.75rem 1.15rem;
  font-weight: 700;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover {
  background: #185c8e;
  border-color: #185c8e;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: var(--navy);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.navbar {
  padding: 18px 0;
   width: 100%;
}
/* Desktop navigation layout only.
   IMPORTANT: keep this scoped to lg+ so Bootstrap's mobile
   collapsed navigation can switch to a vertical layout. */
@media (min-width: 992px) {
  .site-header .navbar-expand-lg .navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.navbar-brand,
.footer-brand {
  color: #fff;
  line-height: 1;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
}

.navbar-brand strong,
.footer-brand strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.navbar-brand small,
.footer-brand small {
  display: block;
  margin-top: 4px;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600;
      white-space: nowrap !important;

}

.nav-link:hover {
  color: #fff !important;
}

.nav-cta {
  padding: 0.6rem 1rem;
}

.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 0.45rem;
}

.dropdown-item {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 7px;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  background: transparent;
  transition: color 0.3s ease;
}
.dropdown-item:hover {
  color: #fff;
}

/* Animated background */
.dropdown-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #206ba4;
  transition: width 0.35s ease;
  color: var(--soft) !important;
}

/* Left-to-right animation */
.dropdown-item:hover::before {
  width: 100%;
}

/* Text color */


.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.15rem;
}

.dropdown-submenu > .dropdown-toggle:after {
  float: right;
  margin-top: 0.45rem;
}

.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(
      circle at 85% 45%,
      rgba(32, 107, 164, 0.38),
      transparent 35%
    ),
    linear-gradient(115deg, #061b2e 0%, #092f4e 52%, #051525 100%) !important;
}


.skyline {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  opacity: 0.2;
  background: linear-gradient(
    90deg,
    transparent 0 5%,
    #fff 5% 9%,
    transparent 9% 14%,
    #fff 14% 19%,
    transparent 19% 23%,
    #fff 23% 28%,
    transparent 28% 34%,
    #fff 34% 40%,
    transparent 40% 47%,
    #fff 47% 54%,
    transparent 54% 61%,
    #fff 61% 67%,
    transparent 67% 74%,
    #fff 74% 80%,
    transparent 80%
  );
  clip-path: polygon(
    0 100%,
    0 62%,
    7% 62%,
    7% 35%,
    14% 35%,
    14% 52%,
    21% 52%,
    21% 18%,
    28% 18%,
    28% 48%,
    36% 48%,
    36% 28%,
    43% 28%,
    43% 53%,
    52% 53%,
    52% 10%,
    59% 10%,
    59% 46%,
    67% 46%,
    67% 24%,
    74% 24%,
    74% 55%,
    83% 55%,
    83% 32%,
    91% 32%,
    91% 50%,
    100% 50%,
    100% 100%
  );
}

.laptop-card {
  position: absolute;
  width: min(500px, 90%);
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  background: #f8fbfe;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}

.laptop-top {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 14px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5d2dc;
}

.chart-area {
  display: flex;
  align-items: end;
  gap: 18px;
  padding: 20px;
  border-radius: 13px;
  background: #eaf4fb;
}

.metric-card {
  display: flex;
  flex-direction: column;
  min-width: 105px;
}

.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  font-size: 2rem;
}

.metric-card span {
  color: #1c8b54;
  font-size: 0.8rem;
}

.fake-chart {
  height: 130px;
  flex: 1;
  display: flex;
  align-items: end;
  gap: 9px;
}

.fake-chart i {
  display: block;
  flex: 1;
  background: var(--brand);
  border-radius: 5px 5px 0 0;
  opacity: 0.85;
}

.email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 8px;
  border-bottom: 1px solid #e6edf2;
}

.email-row i {
  color: var(--brand);
}

.email-row span {
  height: 8px;
  width: 55%;
  background: #d9e4eb;
  border-radius: 5px;
}

.email-row b {
  margin-left: auto;
  width: 45px;
  height: 8px;
  background: #b8cfdd;
  border-radius: 5px;
}

.mail-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 30px rgba(32, 107, 164, 0.45);
  z-index: 2;
}

.orbit-one {
  right: -5px;
  top: 15%;
}

.orbit-two {
  left: 0;
  bottom: 20%;
  background: #fff;
  color: var(--brand);
}

.stats-section {
  background: #f7f9fb;
}

.stats-panel {
  position: relative;
  margin-top: -55px;
  z-index: 5;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 20px 55px rgba(8, 35, 58, 0.13);
}

.stat-item {
  text-align: center;
  padding: 26px 10px;
  border-right: 1px solid var(--border);
}

.stat-item:last-child {
  border-right: 0;
}

.stat-item strong {
  display: block;
  color: var(--brand);
  font-size: 2.25rem;
  font-weight: 850;
}

.stat-item span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.intro-section p {
  color: var(--muted);
  line-height: 1.8;
}

.split-visual {
  min-height: 430px;
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f4fb, #f9fbfd);
}

.visual-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(#206ba4 1px, transparent 1px);
  background-size: 18px 18px;
}

.email-window {
  position: absolute;
  width: 72%;
  right: 7%;
  top: 15%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(12, 53, 80, 0.16);
  overflow: hidden;
}

.window-head {
  padding: 10px 14px;
  display: flex;
  gap: 5px;
  border-bottom: 1px solid #e8eef3;
}

.window-head span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccd8e0;
}

.window-body {
  display: flex;
  min-height: 260px;
}

.mail-sidebar {
  width: 22%;
  background: #f2f7fa;
}

.mail-content {
  flex: 1;
  padding: 30px;
}

.mail-title {
  width: 65%;
  height: 16px;
  background: var(--brand);
  border-radius: 5px;
  margin-bottom: 25px;
}

.mail-line {
  width: 90%;
  height: 9px;
  background: #dbe6ed;
  border-radius: 5px;
  margin: 12px 0;
}

.mail-line.short {
  width: 55%;
}

.mail-button {
  width: 120px;
  height: 34px;
  background: var(--brand);
  border-radius: 6px;
  margin: 22px 0;
}

.floating-proof {
  position: absolute;
  left: 4%;
  bottom: 17%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 13px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.floating-proof i {
  color: var(--brand);
  font-size: 1.5rem;
}

.floating-proof strong,
.floating-proof small {
  display: block;
}

.floating-proof small {
  color: var(--muted);
}

.proof-two {
  left: auto;
  right: 3%;
  bottom: 6%;
}

.services-section {
  background: var(--soft);
}

.section-heading {
  max-width: 800px;
  margin: auto;
}

.section-heading p {
  color: var(--muted);
}

.service-card {
  position: relative;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 15px;
  transition: 0.25s ease;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: #9fc9e5;
  box-shadow: 0 18px 35px rgba(16, 51, 76, 0.1);
}

.service-icon,
.campaign-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e8f4fb;
  color: var(--brand);
  font-size: 1.4rem;
  margin-bottom: 22px;
}

.service-card h3 {
  font-size: 1.15rem;
}

.service-card p,
.campaign-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.service-arrow {
  position: absolute;
  right: 22px;
  top: 25px;
  color: #b1bfca;
}

.benefits-section {
  background: linear-gradient(120deg, #061b2e, #0d4269);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.benefit-card {
  background: rgba(4, 27, 45, 0.6);
  padding: 25px 18px;
  color: #fff;
  min-height: 155px;
}

.benefit-card i {
  display: block;
  color: #83c9f6;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.benefit-card strong,
.benefit-card small {
  display: block;
}

.benefit-card small {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
}

.campaign-card {
  padding: 18px 10px;
  text-align: center;
  border-bottom: 2px solid transparent;
}

.campaign-card:hover {
  border-color: var(--brand);
}

.campaign-icon {
  margin: 0 auto 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #b9d7e9;
}

.campaign-card h3 {
  font-size: 0.98rem;
}

.campaign-card p {
  font-size: 0.78rem;
}

.process-section {
  background: #f7fafc;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 55px;
  position: relative;
}

.process-track:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 31px;
  border-top: 2px dashed #b9d7e9;
}

.process-step {
  position: relative;
  text-align: center;
  z-index: 1;
}

.process-step > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 8px #e7f2f9;
}

.process-step h3 {
  font-size: 1rem;
}

.process-step p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.industry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  color: var(--ink);
  border-right: 1px solid var(--border);
  transition: 0.2s;
  text-align: center;
  padding: 15px;
}

.industry-item:last-child {
  border-right: 0;
}

.industry-item:hover {
  background: #f3f9fd;
  color: var(--brand);
}

.industry-item i {
  color: var(--brand);
  font-size: 1.7rem;
}

.industry-item span {
  font-size: 0.78rem;
  font-weight: 700;
}

.final-cta {
  padding: 0 0 70px;
  background: #fff;
}

.cta-panel {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 45px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(120deg, var(--brand), #0a4169);
  box-shadow: 0 25px 50px rgba(32, 107, 164, 0.2);
}

.cta-icon {
  width: 75px;
  height: 75px;
  display: grid;
  place-items: center;
  flex: 0 0 75px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: 2rem;
}

.cta-panel h2 {
  margin-bottom: 8px;
}

.cta-panel p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;

}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 250px;
}

.site-footer {
  background: #041522;
  color: #fff;
  padding: 65px 0 20px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer h6 {
  font-weight: 800;
  margin-bottom: 18px;
}

.site-footer a:not(.footer-brand) {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  margin: 9px 0;
  font-size: 0.9rem;
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
}

.footer-bottom div {
  display: flex;
  gap: 20px;
}
.services-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
    .hero-description {
      margin: 0 auto;
      text-align: center;
    }

@media (max-width: 991.98px) {
  .navbar-nav {
    padding-top: 15px;
  }

  .dropdown-submenu > .dropdown-menu {
    margin-left: 10px;
    border-left: 2px solid #d9eaf5;
  }

  .hero-section {
    padding: 75px 0 100px;
  }

  .hero-visual {
    min-height: 390px;
  }

  .process-track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 45px;
  }

  .process-track:before {
    display: none;
  }

  .industry-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .industry-item:nth-child(4) {
    border-right: 0;
  }

  .cta-panel {
    flex-wrap: wrap;
  }

  .cta-actions {
    flex-direction: row;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .section-padding {
    padding: 65px 0;
  }

  .stats-panel {
    margin-top: -35px;
  }

  .stat-item {
    padding: 20px 5px;
  }

  .stat-item:nth-child(2) {
    border-right: 0;
  }

  .stat-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .stat-item strong {
    font-size: 1.7rem;
  }
}
/* =========================================
   ABOUT HERO
========================================= */

.about-hero {
  min-height: 680px;

  background:
    radial-gradient(
      circle at 85% 45%,
      rgba(32, 107, 164, 0.38),
      transparent 35%
    ),
    linear-gradient(115deg, #061b2e 0%, #092f4e 52%, #051525 100%);
}

/* Keep About hero content above decorative elements */
.about-hero-content {
  position: relative;
  z-index: 2;
}

/* About heading */
.about-hero h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 0.98;
}

/* Description */
.about-hero .hero-lead {
  max-width: 650px;
}

/* =========================================
   SEQUENTIAL CONTENT ANIMATION
========================================= */

.about-hero .hero-animate {
  opacity: 0;

  transform: translateY(30px);

  animation: heroContentReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Eyebrow */
.about-hero .hero-eyebrow {
  animation-delay: 0.15s;
}

/* Heading */
.about-hero .hero-title {
  animation-delay: 0.4s;
}

/* Description */
.about-hero .hero-description {
  animation-delay: 0.65s;
}

/* Buttons */
.about-hero .hero-buttons {
  animation-delay: 0.9s;
}

/* Trust points */
.about-hero .hero-trust-animation {
  animation-delay: 1.15s;
}

@keyframes heroContentReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   ABOUT HERO VISUAL ANIMATION
========================================= */

.about-hero-visual {
  animation: aboutVisualReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

@keyframes aboutVisualReveal {
  from {
    opacity: 0;
    transform: translateX(35px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.about-card-one {
  animation: floatCardOne 4s ease-in-out infinite;
}

.about-card-two {
  animation: floatCardTwo 4.5s ease-in-out infinite;
}

@keyframes floatCardOne {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatCardTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}
/* =========================================================
   CONTACT PAGE
========================================================= */

/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
  min-height: 600px;

  background:
    radial-gradient(
      circle at 85% 45%,
      rgba(32, 107, 164, 0.38),
      transparent 35%
    ),
    linear-gradient(115deg, #061b2e 0%, #092f4e 52%, #051525 100%);
}

.contact-hero .about-hero-content {
  max-width: 950px;
  margin: 0 auto;
}

.contact-hero h1 {
  font-size: clamp(3.5rem, 7vw, 6rem);
}

.contact-hero .hero-lead {
  max-width: 680px;
}

/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
  position: relative;
  background: #f5f8fb;
}

.contact-section .section-heading {
  max-width: 760px;
}

.contact-section .section-heading p {
  max-width: 700px;
  margin: 18px auto 0;
font-size: 1rem;
  line-height: 1.8;
}

/* =========================================================
   CONTACT INFO PANEL
========================================================= */

.contact-info-panel {
  position: relative;
  overflow: hidden;

  padding: 42px;

  border-radius: 22px;

  color: #fff;

  background: linear-gradient(145deg, #061b2e, #0d4269);

  box-shadow: 0 25px 55px rgba(8, 35, 58, 0.15);
}

/* Decorative circle */

.contact-info-panel::after {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -130px;
  bottom: -130px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  box-shadow:
    0 0 0 45px rgba(255, 255, 255, 0.025),
    0 0 0 90px rgba(255, 255, 255, 0.018);

  pointer-events: none;
}

.contact-info-panel .mini-label {
  position: relative;
  z-index: 2;

  color: #8ed0ff;
}

.contact-info-panel h3 {
  position: relative;
  z-index: 2;

  margin: 16px 0;

  font-size: clamp(1.8rem, 3vw, 2.6rem);

  line-height: 1.1;
}

.contact-info-panel h3 span {
  color: #8ed0ff;
}

.contact-info-panel > p {
  position: relative;
  z-index: 2;

  margin-bottom: 32px;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.8;
}

/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
  position: relative;
  z-index: 2;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-detail-item {
  position: relative;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 20px 0;

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  transition:
    transform 0.3s ease,
    padding-left 0.3s ease;
}

a.contact-detail-item:hover {
  color: #fff;

  padding-left: 5px;
}

.contact-detail-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.1);

  color: #8ed0ff;

  font-size: 1.25rem;
}

.contact-detail-item small,
.contact-detail-item strong {
  display: block;
}

.contact-detail-item small {
  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.contact-detail-item strong {
  font-size: 0.95rem;
}

.contact-detail-arrow {
  margin-left: auto;

  color: rgba(255, 255, 255, 0.45);

  transition: transform 0.3s ease;
}

a.contact-detail-item:hover .contact-detail-arrow {
  transform: translate(3px, -3px);
}

/* =========================================================
   SERVICE TAGS
========================================================= */

.contact-services {
  position: relative;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 30px;
}

.contact-services span {
  padding: 7px 12px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.7rem;

  font-weight: 700;
}

/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-card {
  padding: 42px;

  border: 1px solid var(--border);

  border-radius: 22px;

  background: #fff;

  box-shadow: 0 25px 55px rgba(8, 35, 58, 0.08);
}

.contact-form-heading {
  margin-bottom: 30px;
}

.contact-form-heading .mini-label {
  color: var(--brand);
}

.contact-form-heading h3 {
  margin: 10px 0 8px;

  font-size: 2rem;
}

.contact-form-heading p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

.contact-form .form-group {
  height: 100%;
}

.contact-form label {
  display: block;

  margin-bottom: 8px;

  color: var(--ink);

  font-size: 0.8rem;

  font-weight: 750;
}

.contact-form .form-control,
.contact-form .form-select {
  min-height: 52px;

  padding: 12px 15px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #f9fbfc;

  color: var(--ink);

  font-size: 0.9rem;

  box-shadow: none;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-form textarea.form-control {
  min-height: 145px;

  resize: vertical;
}

.contact-form .form-control::placeholder {
  color: #9aa8b3;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--brand);

  background: #fff;

  box-shadow: 0 0 0 4px rgba(32, 107, 164, 0.08);
}

.contact-submit {
  min-width: 175px;

  margin-top: 8px;
}

.contact-submit i {
  margin-left: 6px;

  transition: transform 0.3s ease;
}

.contact-submit:hover i {
  transform: translate(3px, -3px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .contact-hero {
    min-height: 550px;
  }

  .contact-info-panel,
  .contact-form-card {
    padding: 35px;
  }
}

@media (max-width: 767.98px) {
  .contact-hero {
    min-height: 500px;
  }

  .contact-hero h1 {
    font-size: 3rem;
  }

  .contact-info-panel,
  .contact-form-card {
    padding: 30px 25px;
  }
}

@media (max-width: 575.98px) {
  .contact-hero h1 {
    font-size: 2.6rem;
  }

  .contact-info-panel,
  .contact-form-card {
    padding: 26px 20px;
  }

  .contact-info-panel h3 {
    font-size: 1.7rem;
  }

  .contact-form-heading h3 {
    font-size: 1.6rem;
  }

  .contact-submit {
    width: 100%;
  }
}
/* =========================================
   HERO SECTION
========================================= */

.hero-section {
  position: relative;
  overflow: hidden;

  min-height: 670px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  /* Background Image */
  background-image: url("./img/img5.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  isolation: isolate;
}

/* =========================================
   DARK IMAGE OVERLAY
========================================= */

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(3, 17, 29, 0.88),
    rgba(6, 27, 46, 0.68),
    rgba(3, 17, 29, 0.82)
  );
}

/* =========================================
   DECORATIVE GLOW
========================================= */

.hero-glow {
  position: absolute;

  width: 400px;
  height: 400px;

  border-radius: 50%;

  filter: blur(90px);

  background: rgba(32, 107, 164, 0.25);

  z-index: -1;

  animation: heroGlow 8s ease-in-out infinite alternate;
}

.hero-glow-one {
  top: -150px;
  right: 5%;
}

.hero-glow-two {
  bottom: -250px;
  left: 10%;

  animation-delay: 2s;
}

/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
  max-width: 1000px;
  margin: 0 auto;

  padding: 0 0 50px 0;
}
a i  {
    font-size: 14px;
    margin-right: 10px;
}

/* =========================================
   HERO TYPOGRAPHY
========================================= */

.hero-section h1 {
  max-width: 950px;

  margin: 0 auto 25px auto;

  font-size: clamp(3rem, 7vw, 5.8rem);

  line-height: 1;

  letter-spacing: -0.045em;
}

.hero-lead {
  max-width: 700px;

  margin: 25px auto 0;

  font-size: 1.3rem;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.82);
}

/* =========================================
   HERO BUTTONS
========================================= */

/* .hero-buttons {
  margin-top: 32px;
} */
 .social-hero-inner .hero-description {
  text-align: left;
  margin-left: 0;
 }

.hero-buttons .btn {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
        font-size: 17px;
}

.hero-buttons .btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* =========================================
   HERO TRUST
========================================= */

.hero-trust {
  display: flex;

  flex-wrap: wrap;

  gap: 18px 28px;

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.75);
}

.hero-trust i {
  color: #61b9f3;

  margin-right: 5px;
}

/* =========================================
   SEQUENTIAL HERO ANIMATION
========================================= */

.hero-animate {
  opacity: 0;

  transform: translateY(30px);

  animation: heroContentReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Eyebrow */
.hero-eyebrow {
  animation-delay: 0.2s;
}

/* Heading */
.hero-title {
  animation-delay: 0.45s;
}

/* Description */
.hero-description {
  animation-delay: 0.7s;
}

/* Buttons */
.hero-buttons {
  animation-delay: 0.95s;
}

/* Trust items */
.hero-trust-animation {
  animation-delay: 1.2s;
}

/* =========================================
   REVEAL ANIMATION
========================================= */

@keyframes heroContentReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   GLOW ANIMATION
========================================= */

@keyframes heroGlow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, 20px) scale(1.12);
  }
}
/* header {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        box-shadow 0.35s ease;
}

header.sticky {
    animation: stickyHeaderIn 0.35s ease forwards;
}

@keyframes stickyHeaderIn {
    from {
        transform: translateY(-8px);
        opacity: 0.85;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
} */
.sticky-header {
  transition:
    transform 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.sticky-header.is-sticky {
  animation: stickyHeaderIn 0.35s ease forwards;
}

@keyframes stickyHeaderIn {
  from {
    transform: translateY(-10px);
    opacity: 0.9;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* =========================================
   INDUSTRY / BRAND CARDS
========================================= */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 45px;
}

.industry-item {
  position: relative;
  display: flex;
  min-height: 320px;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
  isolation: isolate;
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

/* =========================================
   IMAGE
========================================= */

.industry-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.industry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1);
  transition:
    transform 0.8s cubic-bezier(0.2, 0.65, 0.3, 1),
    filter 0.6s ease;
}

/* =========================================
   DARK OVERLAY
========================================= */

.industry-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 10%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.85) 100%
  );

  transition: background 0.5s ease;
}

/* =========================================
   CARD CONTENT
========================================= */

.industry-content {
  width: 100%;
  align-self: flex-end;

  padding: 30px;
  color: #fff;

  transform: translateY(8px);

  transition: transform 0.45s ease;
}

.industry-content span {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}

.industry-content strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* =========================================
   ICON
========================================= */

.industry-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);

  transition:
    background 0.4s ease,
    transform 0.4s ease;
}

.industry-icon i {
  font-size: 23px;
}

/* =========================================
   ARROW
========================================= */

.industry-arrow {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  right: 25px;
  bottom: 25px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);

  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

/* =========================================
   HOVER ANIMATION
========================================= */

.industry-item:hover {
  transform: translateY(-8px);

  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2);
}

.industry-item:hover .industry-image img {
  transform: scale(1.1);
  filter: brightness(0.8);
}

.industry-item:hover .industry-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.industry-item:hover .industry-content {
  transform: translateY(0);
}

.industry-item:hover .industry-icon {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.2);
}

.industry-item:hover .industry-arrow {
  transform: translate(4px, -4px);
  background: rgba(255, 255, 255, 0.2);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .industry-item {
    min-height: 300px;
  }
}

@media (max-width: 575px) {
  .industry-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .industry-item {
    min-height: 280px;
  }

  .industry-content {
    padding: 24px;
  }

  .industry-content strong {
    font-size: 20px;
  }
}
.services-slider::before,
.services-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.services-slider::before {
  left: 0;
  background: linear-gradient(to right, var(--bs-body-bg), transparent);
}

.services-slider::after {
  right: 0;
  background: linear-gradient(to left, var(--bs-body-bg), transparent);
}
/* ================================
   AUTO SCROLL SERVICES SLIDER
================================ */

.services-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 40px;
}

.services-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: servicesAutoScroll 35s linear infinite;
}

/* Individual slide */
.service-slide {
  flex: 0 0 360px;
  width: 360px;
}

/* Pause when user hovers */
.services-slider:hover .services-track {
  animation-play-state: paused;
}

/* Infinite scrolling animation */
@keyframes servicesAutoScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 991px) {
  .service-slide {
    flex: 0 0 320px;
    width: 320px;
  }

  .services-track {
    gap: 16px;
    animation-duration: 30s;
  }
}

@media (max-width: 575px) {
  .service-slide {
    flex: 0 0 280px;
    width: 280px;
  }

  .services-track {
    gap: 14px;
    animation-duration: 25s;
  }
}

.mission-section {
  background: #f5f8fb;
}
.mission-panel {
  position: relative;
  overflow: hidden;
  padding: 47px 75px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(120deg, #061b2e, #0d4269);
}
.mission-panel:after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(142, 208, 255, 0.18);
  border-radius: 50%;
  right: -90px;
  top: -100px;
  box-shadow:
    0 0 0 45px rgba(142, 208, 255, 0.03),
    0 0 0 90px rgba(142, 208, 255, 0.025);
}
.mission-panel p {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
}
.mission-panel a {
  color: #8ed0ff;
  font-weight: 700;
}
.mission-number {
  position: absolute;
  right: 30px;
  bottom: 15px;
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  z-index: 1;
}
@media (max-width: 767.98px) {
  .mission-panel {
    padding: 45px 25px;
  }
}
.about-floating-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}
.about-floating-card i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e8f4fb;
  color: var(--brand);
}
.about-floating-card strong,
.about-floating-card small {
  display: block;
}
.about-floating-card small {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}
.about-card-one {
  left: 0;
  top: 13%;
}
.about-card-two {
  right: -3%;
  bottom: 12%;
}

.about-story-section {
  background: #fff;
}
.about-story-section p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 1rem;
}
.about-story-section a {
  color: var(--brand);
  font-weight: 700;
}
.about-story-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 25px;
  .about-story-visual {
    min-height: 450px;
  }
}
.about-story-visual img {
  width: 550px;
  object-fit: cover;
  border-radius: 25px;
}
@media (max-width: 575.98px) {
  .about-story-visual {
    min-height: 420px;
  }
}
.story-grid{
    position:absolute;inset:0;opacity:.13;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:42px 42px
}
.story-timeline{position:absolute;inset:45px 55px}
.timeline-line{position:absolute;left:31px;top:35px;bottom:35px;border-left:2px dashed rgba(142,208,255,.45)}
.timeline-item{position:relative;display:flex;align-items:flex-start;gap:18px;margin-bottom:72px;color:#fff}
.timeline-item>span{
    position:relative;z-index:2;display:grid;place-items:center;flex:0 0 64px;height:64px;
    border-radius:50%;background:var(--brand);font-size:.78rem;font-weight:800;
    box-shadow:0 0 0 7px rgba(32,107,164,.22)
}
.timeline-item strong,.timeline-item small{display:block}
.timeline-item strong{font-size:1rem;margin:8px 0 5px}
.timeline-item small{max-width:230px;color:rgba(255,255,255,.62);font-size:.78rem;line-height:1.5}
.story-stamp{
    position:absolute;right:25px;bottom:25px;width:125px;height:125px;padding:15px;
    display:flex;flex-direction:column;justify-content:center;text-align:center;
    border-radius:50%;background:#fff;color:var(--brand);transform:rotate(7deg);
    box-shadow:0 15px 35px rgba(0,0,0,.25)
}
.story-stamp i{font-size:1.1rem}
.story-stamp strong{font-size:1.7rem;line-height:1}
.story-stamp small{font-size:.65rem;color:var(--muted);line-height:1.2}
.principle-card{
    position:relative;padding:28px;border:1px solid var(--border);border-radius:17px;
    background:#fff;transition:.25s;overflow:hidden
}
.principle-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(14,51,76,.1);border-color:#a9cee5}
.principle-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.principle-top span{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:#9aa9b5}
.principle-top i{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#e8f4fb;color:var(--brand);font-size:1.35rem}
.principle-card h3{font-size:1.15rem}
.principle-card p{color:var(--muted);font-size:1rem;line-height:1.7}
.principle-line{width:45px;height:3px;margin-top:22px;background:var(--brand);border-radius:4px}

.leadership-section{background:linear-gradient(120deg,#061b2e,#0a3658)}
.leadership-section p{line-height:1.8}
.expertise-stack{border-top:1px solid rgba(255,255,255,.12)}
.expertise-row{
    display:grid;grid-template-columns:42px 45px 1fr 25px;align-items:center;gap:15px;
    padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff
}
.expertise-number{font-size:.68rem;font-weight:800;color:#73bce9}
.expertise-icon{font-size:1.3rem}
.expertise-content h3{font-size:1rem;margin:0 0 4px}
.expertise-content p{font-size:1rem;color:rgba(255,255,255,.58);margin:0;line-height:1.5}
.expertise-arrow{color:#79c4ef}

.team-section{background:#fff}
.team-section p{color:var(--muted);line-height:1.8;font-size: 1rem;}
.team-section a{color:var(--brand);font-weight:700}
.team-visual{
    min-height:480px;position:relative;overflow:hidden;border-radius:25px;
    background:linear-gradient(135deg,#e8f4fb,#f7fbfd)
}
.team-grid{
    position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(#206ba4 1px,transparent 1px);background-size:18px 18px
}
.team-card-large{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(3deg);
    width:55%;min-height:285px;padding:30px;border-radius:20px;background:#fff;
    box-shadow:0 25px 55px rgba(10,51,76,.18);display:flex;flex-direction:column
}
.team-card-icon{
    width:58px;height:58px;display:grid;place-items:center;border-radius:15px;
    background:var(--brand);color:#fff;font-size:1.5rem;margin-bottom:25px
}
.team-card-large>span{font-size:.65rem;letter-spacing:.14em;font-weight:800;color:var(--brand)}
.team-card-large>strong{font-size:2rem;line-height:1.05;margin:8px 0}
.team-card-large>small{color:var(--muted);line-height:1.5}
.team-mini{
    position:absolute;display:flex;align-items:center;gap:8px;padding:12px 15px;border-radius:12px;
    background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.12);font-weight:700;font-size:.8rem
}
.team-mini i{color:var(--brand)}
.team-mini-one{left:7%;top:18%}.team-mini-two{right:6%;top:13%}.team-mini-three{left:8%;bottom:16%}

.difference-section{background:#f5f8fb}
.difference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.difference-card{
    position:relative;min-height:230px;padding:28px;border:1px solid var(--border);
    border-radius:16px;background:#fff;overflow:hidden;transition:.25s
}
.difference-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(10,45,70,.1)}
.difference-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:#e8f4fb;color:var(--brand);font-size:1.4rem;margin-bottom:20px}
.difference-card h3{font-size:1.1rem}
.difference-card p{font-size:1rem;color:var(--muted);line-height:1.7}
.difference-corner{position:absolute;right:20px;bottom:16px;color:#b6c5cf;font-size:1.4rem}

.promise-section{background:#fff}
.promise-list{border-top:1px solid var(--border)}
.promise-item{
    display:grid;grid-template-columns:55px 1fr 25px;align-items:start;gap:18px;
    padding:24px 0;border-bottom:1px solid var(--border)
}
.promise-number{
    display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    background:#e8f4fb;color:var(--brand);font-size:.72rem;font-weight:800
}
.promise-item h3{font-size:1.08rem;margin:2px 0 7px}
.promise-item p{margin:0;color:var(--muted);font-size:1rem;line-height:1.65}
.promise-item>i{color:#9eafba;margin-top:5px}

.faq-section{background:#f5f8fb}
.faq-accordion{max-width:900px;margin-left:auto;margin-right:auto}
.faq-accordion .accordion-item{border:0;border-bottom:1px solid var(--border);background:transparent}
.faq-accordion .accordion-button{
    padding:23px 10px;color:var(--ink);background:transparent;box-shadow:none;
    font-size:1rem;font-weight:750
}
.faq-accordion .accordion-button:not(.collapsed){color:var(--brand)}
.faq-accordion .accordion-button:after{background-size:14px}
.faq-accordion .accordion-button>span{color:#9eacb7;font-size:.7rem;margin-right:18px;letter-spacing:.1em}
.faq-accordion .accordion-body{padding:0 45px 25px 45px;color:var(--muted);line-height:1.8;font-size:.9rem}

.about-final-cta{background:linear-gradient(120deg,#0b5e91,#206BA4)}

@media(max-width:991.98px){
    .about-hero-visual{min-height:430px}
    .about-orbit-one{width:390px;height:390px}
    .about-orbit-two{width:290px;height:290px}
    .mission-panel{padding:50px 35px}
    .difference-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767.98px){
    .about-hero{min-height:auto}
    .about-hero-visual{min-height:370px}
    .about-orbit-one{width:330px;height:330px}
    .about-orbit-two{width:245px;height:245px}
    .strategy-card{width:82%;padding:20px}
    .strategy-ring{width:82px;height:82px;font-size:1.6rem}
    .about-floating-card{transform:scale(.85)}
    .about-card-one{left:-10px;top:7%}
    .about-card-two{right:-15px;bottom:7%}
    .about-story-visual{min-height:450px}
    .story-timeline{inset:35px 25px}
    .timeline-item{margin-bottom:55px}
    .timeline-item>span{flex-basis:54px;width:54px;height:54px}
    .story-stamp{width:105px;height:105px}
    .mission-panel{padding:45px 25px}
    .difference-grid{grid-template-columns:1fr}
    .team-visual{min-height:400px}
    .team-card-large{width:65%;min-height:250px;padding:22px}
    .team-card-large>strong{font-size:1.5rem}
    .expertise-row{grid-template-columns:32px 35px 1fr 18px;gap:9px}
    .expertise-content p{font-size:.72rem}
    .promise-item{grid-template-columns:45px 1fr 18px;gap:12px}
    .faq-accordion .accordion-body{padding-left:35px}
}
@media(max-width:575.98px){
    .about-hero h1{font-size:2.6rem}
    .about-hero-visual{min-height:315px}
    .about-orbit-one{width:275px;height:275px}
    .about-orbit-two{width:205px;height:205px}
    .strategy-card{width:86%;padding:16px}
    .strategy-center{padding:15px 0}
    .strategy-center strong{font-size:1.15rem}
    .strategy-center small{font-size:.65rem}
    .strategy-ring{width:65px;height:65px;font-size:1.25rem;box-shadow:0 0 0 7px #e6f3fb,0 0 0 14px #f3f9fc}
    .strategy-metrics strong{font-size:.85rem}
    .about-floating-card{font-size:.7rem;padding:9px 11px}
    .about-floating-card i{width:30px;height:30px}
    .about-card-one{left:-8px}
    .about-card-two{right:-8px}
    .about-story-visual{min-height:420px}
    .story-timeline{inset:30px 18px}
    .timeline-item{gap:10px;margin-bottom:45px}
    .timeline-item>span{flex-basis:45px;width:45px;height:45px;font-size:.65rem}
    .timeline-item strong{font-size:.8rem;margin-top:3px}
    .timeline-item small{font-size:.64rem}
    .timeline-line{left:21px}
    .story-stamp{width:85px;height:85px;right:12px;bottom:12px}
    .story-stamp strong{font-size:1.2rem}
    .story-stamp small{font-size:.52rem}
    .team-card-large{width:75%}
    .team-mini{padding:9px 11px;font-size:.68rem}
    .faq-accordion .accordion-button{font-size:.9rem;padding:19px 4px}
}
/* =========================================================
   HOUSTON SOCIAL MEDIA ADVERTISING HERO
========================================================= */

.social-hero {
    position: relative;
    width: 100%;
    overflow: hidden;

    background: #071b31;

    color: #ffffff;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.social-hero-inner {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 620px;

    overflow: hidden;
}


/* =========================================================
   LEFT NAVY PANEL
========================================================= */

.social-hero-left {
    position: relative;
    z-index: 5;

    width: 57%;

    min-height: 620px;

    padding:
        70px
        70px
        65px
        clamp(40px, 6vw, 100px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #06172a 0%,
            #08213a 55%,
            #0b2946 100%
        );

    /*
       Diagonal right edge
    */
    clip-path: polygon(
        0 0,
        88% 0,
        100% 50%,
        88% 100%,
        0 100%
    );
}


/* =========================================================
   SUBTLE DIAGONAL BACKGROUND SHAPES
========================================================= */

.social-hero-left::before {
    content: "";

    position: absolute;

    top: -15%;
    left: 30%;

    width: 130px;
    height: 130%;

    background: rgba(255,255,255,.025);

    transform: rotate(-25deg);

    pointer-events: none;
}


.social-hero-left::after {
    content: "";

    position: absolute;

    top: -15%;
    left: 55%;

    width: 90px;
    height: 130%;

    background: rgba(255,255,255,.018);

    transform: rotate(-25deg);

    pointer-events: none;
}


/* =========================================================
   KICKER
========================================================= */

.hero-kicker {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 25px;

    margin-bottom: 18px;

    color: #10b9ed;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.hero-kicker span {
    display: block;

    width: 120px;
    height: 3px;

    background: #10b9ed;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.social-hero-left h1 {
    position: relative;
    z-index: 3;

    margin: 0;

    max-width: 850px;

    color: #ffffff;

    font-size: clamp(52px, 5.2vw, 82px);

    font-weight: 800;

    line-height: .94;

    letter-spacing: -2px;
}


.social-hero-left h1 strong {
    display: block;

    margin-top: 5px;

    color: #0db9ed;

    font-weight: 800;
}


/* =========================================================
   DIVIDER
========================================================= */

.hero-divider {
    position: relative;
    z-index: 3;

    width: 470px;
    max-width: 90%;

    height: 3px;

    margin-top: 28px;
    margin-bottom: 24px;

    background: #ffffff;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    position: relative;
    z-index: 3;

    max-width: 950px;
    margin: 0 auto 25px auto;
    color: #e4ebf2;

    font-size: 19px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   CTA AREA
========================================================= */

.hero-actions {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 42px;
}


/* =========================================================
   SERVICES BUTTON
========================================================= */

.hero-service-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 265px;
    height: 58px;

    padding: 0 28px;

    border-radius: 6px;

    background: var(--brand);

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-service-btn span {
    font-size: 26px;

    line-height: 1;
}


.hero-service-btn:hover {
    background: #00a4d8;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   PHONE BUTTON
========================================================= */

.hero-call-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 280px;
    height: 58px;

    padding: 0 28px;

    border: 2px solid #ffffff;

    border-radius: 6px;

    background: transparent;

    color: #ffffff;

    font-size: 19px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.hero-call-btn:hover {
    background: #ffffff;

    color: #071b31;

    transform: translateY(-2px);
}


.call-icon {
    font-size: 21px;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.social-hero-right {
    position: absolute;

    top: 0;
    right: 0;

    width: 58%;
    height: 100%;

    overflow: hidden;

    background: #102c48;
}


.social-hero-right img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}




.social-hero {
    border-bottom: 5px solid #08b7eb;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .social-hero-inner,
    .social-hero-left {
        min-height: 680px;
    }

    .social-hero-left {
        padding-left: 7%;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .social-hero-inner,
    .social-hero-left {
        min-height: 570px;
    }


    .social-hero-left {
        width: 62%;

        padding-left: 5%;
        padding-right: 40px;
    }


    .social-hero-right {
        width: 53%;
    }


    .social-hero-left h1 {
        font-size: clamp(45px, 5.5vw, 68px);
    }


    .hero-description {
        font-size: 17px;
        
    }


    .hero-kicker {
        font-size: 15px;
    }


    .hero-kicker span {
        width: 80px;
    }


    .hero-actions {
        margin-top: 32px;
    }


    .hero-service-btn,
    .hero-call-btn {
        min-width: 220px;

        height: 54px;

        font-size: 15px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .social-hero-inner {
        min-height: 0;

        display: flex;
        flex-direction: column;
    }


    .social-hero-left {
        width: 100%;

        min-height: auto;

        padding:
            60px
            40px
            60px;

        clip-path: none;
    }


    .social-hero-right {
        position: relative;

        width: 100%;

        height: 430px;

        min-height: 430px;
    }


    /* .social-hero-right::before {
        left: -5%;

        width: 80px;
    } */


    .social-hero-right::after {
        left: 1%;

        width: 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .social-hero-left {
        padding:
            45px
            25px
            45px;
    }


    .hero-kicker {
        gap: 15px;

        font-size: 12px;

        letter-spacing: 1.3px;
    }


    .hero-kicker span {
        width: 55px;

        height: 2px;
    }


    .social-hero-left h1 {
        font-size: clamp(40px, 12vw, 58px);

        letter-spacing: -1px;
    }


    .hero-divider {
        width: 230px;

        margin-top: 22px;
        margin-bottom: 18px;
    }


    .hero-description {
        font-size: 15px;

        line-height: 1.6;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 30px;
    }


    .hero-service-btn,
    .hero-call-btn {
        width: 100%;

        min-width: 0;

        height: 55px;
    }


    .social-hero-right {
        height: 330px;

        min-height: 330px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .social-hero-left {
        padding:
            40px
            20px
            40px;
    }


    .hero-kicker {
        font-size: 11px;
    }


    .social-hero-left h1 {
        font-size: 40px;
    }


    .hero-description {
        font-size: 14px;
    }


    .social-hero-right {
        height: 270px;

        min-height: 270px;
    }

}
/* =========================================================
   HOUSTON SOCIAL MEDIA ADVERTISING SERVICES
========================================================= */

.social-services-section {
    width: 100%;

    padding: 50px 20px;

    background: #ffffff;
}


/* =========================================================
   CONTAINER
========================================================= */

.social-services-container {
    width: 100%;
    max-width: 1140px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.services-heading {
    text-align: center;

    margin-bottom: 45px;
}


.heading-line {
    display: block;

    width: 132px;
    height: 4px;

    margin: 0 auto 25px;

    background: #08aee6;
}
.campaign-process-grid-fourcall {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.cost-table {
  max-width: 900px;
    margin: 0 auto;
    display: block;
}
.cost-table th {
  background-color: #206ba4;
  color: #fff;
}

.services-heading h2 {
    margin: 0;

    color: #102b50;

    font-size: clamp(32px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.services-heading h2 strong {
    color: var(--brand);

    font-weight: 800;
}


.services-heading p {
    max-width: 1200px;

    margin: 18px auto 0;

    color: #4b5565;

    font-size: 19px;

    line-height: 1.5;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 30px 32px;
}


/* =========================================================
   SERVICE BOX
========================================================= */

.service-box {
    position: relative;

    display: flex;

    min-height: 235px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f5f8fc 0%,
            #e9eff6 100%
        );

    box-shadow:
        0 8px 25px rgba(7, 37, 70, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.service-box::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 8px;

    background:
        linear-gradient(
            90deg,
            #07539a,
            #08b8ee
        );
}


.service-box:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px rgba(7, 37, 70, .14);
}

.service-number i {
  margin-right: 0;
}

/* =========================================================
   NUMBER PANEL
========================================================= */

.service-number {
    position: relative;

    flex: 0 0 205px;

    /* max-height: 160px; */

    padding: 27px 22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #124d80 0%,
            #07345f 55%,
            #062d52 100%
        );

    border-radius: 24px 0 0 24px;
}


/* Diagonal decoration inside number panel */

.service-number::before {
    content: "";

    position: absolute;

    top: -50px;
    left: 65px;

    width: 100px;
    height: 360px;

    background: rgba(255,255,255,.035);

    transform: rotate(-28deg);
}


.service-number::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -40px;

    width: 150px;
    height: 120px;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(0,173,231,.18) 100%
        );

    border-radius: 50%;
}


/* =========================================================
   NUMBER
========================================================= */

.service-number > span {
    position: relative;

    z-index: 2;

    color: #ffffff;

    font-size: 62px;

    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   SERVICE ICON
========================================================= */

.service-icon {
    position: relative;

    z-index: 3;

    width: 72px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.service-icon svg {
    width: 62px;
    height: 62px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   CONTENT
========================================================= */

.service-content {
    flex: 1;

    padding:
        38px
        38px
        38px
        40px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.service-content h3 {
    margin: 0 0 15px;

    color: #102b50;

    font-size: 26px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.5px;
}


.service-content p {
    margin: 0;

    max-width: 520px;

    color: #4b5565;

    font-size: 18px;

    line-height: 1.48;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .social-services-container {
        max-width: 1440px;
    }

    .service-box {
        min-height: 245px;
    }

    .service-number {
        flex-basis: 205px;

        min-height: 160px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .social-services-section {
        padding: 65px 20px 75px;
    }


    .services-heading h2 {
        font-size: 40px;
    }


    .services-heading p {
        font-size: 17px;
    }


    .services-grid {
        gap: 25px;
    }


    .service-number {
        flex-basis: 165px;

        min-height: 160px;
    }


    .service-number > span {
        font-size: 54px;
    }


    .service-content {
        padding:
            30px
            28px
            30px
            30px;
    }


    .service-content h3 {
        font-size: 22px;
    }


    .service-content p {
        font-size: 16px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .services-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .service-box {
        min-height: 215px;
    }


    .service-number {
        flex-basis: 190px;

        min-height: 215px;
    }


    .service-content h3 {
        font-size: 24px;
    }


    .service-content p {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .social-services-section {
        padding: 50px 15px 60px;
    }


    .services-heading {
        margin-bottom: 30px;
    }


    .heading-line {
        width: 90px;

        height: 3px;

        margin-bottom: 20px;
    }


    .services-heading h2 {
        font-size: 31px;

        letter-spacing: -.8px;
    }


    .services-heading p {
        margin-top: 15px;

        font-size: 15px;

        line-height: 1.55;
    }


    .services-grid {
        gap: 20px;
    }


    .service-box {
        min-height: 185px;

        border-radius: 18px;
    }


    .service-number {
        flex: 0 0 115px;

        min-height: 160px;

        padding: 20px 10px;

        border-radius: 18px 0 0 18px;
    }


    .service-number > span {
        font-size: 40px;
    }


    .service-icon {
        width: 52px;
        height: 52px;
    }


    .service-icon svg {
        width: 45px;
        height: 45px;
    }


    .service-content {
        padding:
            25px
            20px
            28px;
    }


    .service-content h3 {
        margin-bottom: 10px;

        font-size: 19px;

        line-height: 1.25;
    }


    .service-content p {
        font-size: 14px;

        line-height: 1.5;
    }


    .service-box::after {
        height: 6px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .services-heading h2 {
        font-size: 27px;
    }


    .service-number {
        flex-basis: 95px;

        min-height: 160px;

        padding: 18px 7px;
    }


    .service-number > span {
        font-size: 34px;
    }


    .service-icon {
        width: 45px;
        height: 45px;
    }


    .service-icon svg {
        width: 38px;
        height: 38px;
    }


    .service-content {
        padding:
            22px
            15px
            25px;
    }


    .service-content h3 {
        font-size: 17px;
    }


    .service-content p {
        font-size: 13px;
    }

}

/* =========================================================
   SOCIAL MEDIA CAMPAIGN PROCESS
========================================================= */

.campaign-process-section {
    width: 100%;
    padding: 50px 0;
    background: #ffffff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.campaign-heading {
    text-align: center;
    margin-bottom: 55px;
}

.campaign-heading-line {
    display: block;

    width: 135px;
    height: 4px;

    margin: 0 auto 25px;

    background: #08afe7;
    border-radius: 2px;
}

.campaign-heading h2 {
    margin: 0;

    color: #0b2347;

    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -1.5px;
}

.campaign-heading h2 span {
    color: #206ba4
;
}


/* =========================================================
   GRID
========================================================= */

.campaign-process-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 48px 24px;
}


/* =========================================================
   CARD
========================================================= */

.campaign-card {
    position: relative;

    min-height: 345px;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(9, 45, 80, 0.10);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.campaign-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(9, 45, 80, 0.16);
}


/* =========================================================
   CARD HEADER
========================================================= */

.campaign-card-header {
    min-height: 120px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 22px 30px;

    background:
        linear-gradient(
            135deg,
            #f4f7fb 0%,
            #e8edf4 100%
        );
}


/* =========================================================
   ICON
========================================================= */

.campaign-icon {
    flex: 0 0 70px;

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.campaign-icon svg {
    width: 60px;
    height: 60px;

    fill: none;

    stroke: #0b3158;

    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CARD TITLE
========================================================= */

.campaign-card-header h3 {
    margin: 0;

    color: #0b2347;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;
}


/* =========================================================
   CARD BODY
========================================================= */

.campaign-card-body {
    position: relative;

    min-height: 225px;

    padding: 32px 38px 45px;

    background:
        linear-gradient(
            145deg,
            #06345d 0%,
            #073c69 55%,
            #07517f 100%
        );

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CURVED BLUE DECORATION
========================================================= */

.campaign-card-body::after {
    content: "";

    position: absolute;

    right: -85px;
    bottom: -115px;

    width: 300px;
    height: 260px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(4, 122, 185, .05),
            rgba(8, 174, 230, .8)
        );

    pointer-events: none;
}


/* =========================================================
   SECOND CURVE
========================================================= */

.campaign-card-body::before {
    content: "";

    position: absolute;

    right: -150px;
    bottom: -165px;

    width: 340px;
    height: 280px;

    border-radius: 50%;

    border: 1px solid rgba(14, 190, 239, .25);

    pointer-events: none;
}


/* =========================================================
   SMALL CYAN LINE
========================================================= */

.campaign-body-line {
    position: relative;

    z-index: 2;

    display: block;

    width: 65px;
    height: 3px;

    margin-bottom: 22px;

    background: #08b9ee;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.campaign-card-body p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.campaign-number {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 5;

    width: 105px;
    height: 105px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding-top: 10px;

    border-radius: 0 100% 0 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #eef3f8 100%
        );

    color: #0a2147;

    font-size: 38px;

    font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .campaign-process-section {
        padding: 70px 0 75px;
    }

    .campaign-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 30px 20px;
    }

    .campaign-card {
        min-height: 350px;
    }

    .campaign-card-header {
        min-height: 110px;

        padding: 20px;
    }

    .campaign-card-header h3 {
        font-size: 21px;
    }

    .campaign-card-body {
        padding: 28px 28px 42px;
    }

    .campaign-card-body p {
        font-size: 16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .campaign-process-section {
        padding: 55px 0 65px;
    }

    .campaign-heading {
        margin-bottom: 35px;
    }

    .campaign-heading-line {
        width: 90px;

        height: 3px;

        margin-bottom: 20px;
    }

    .campaign-heading h2 {
        font-size: 30px;

        letter-spacing: -.7px;
    }

    .campaign-process-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .campaign-card {
        min-height: 0;
    }

    .campaign-card-header {
        min-height: 105px;

        padding: 18px 22px;

        gap: 18px;
    }

    .campaign-icon {
        flex-basis: 58px;

        width: 58px;
        height: 58px;
    }

    .campaign-icon svg {
        width: 50px;
        height: 50px;
    }

    .campaign-card-header h3 {
        font-size: 20px;
    }

    .campaign-card-body {
        min-height: 205px;

        padding: 27px 25px 42px;
    }

    .campaign-card-body p {
        font-size: 15px;

        line-height: 1.55;
    }

    .campaign-number {
        width: 85px;
        height: 85px;

        font-size: 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .campaign-heading h2 {
        font-size: 27px;
    }

    .campaign-card-header {
        min-height: 95px;

        padding: 15px 18px;
    }

    .campaign-icon {
        flex-basis: 50px;

        width: 50px;
        height: 50px;
    }

    .campaign-icon svg {
        width: 44px;
        height: 44px;
    }

    .campaign-card-header h3 {
        font-size: 18px;
    }

    .campaign-card-body {
        padding: 25px 20px 40px;
    }

    .campaign-card-body p {
        font-size: 14px;
    }

}
/* =========================================================
   B2B WHY CHOOSE US SECTION
========================================================= */

.b2b-why-section {
    width: 100%;
    padding: 50px 0;

    background: #ffffff;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.b2b-why-layout {
    position: relative;

    display: grid;

    grid-template-columns: 42% 58%;

    grid-template-rows: auto 1fr;

    min-height: 610px;

    background: #ffffff;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(7, 31, 58, 0.12);
}


/* =========================================================
   SECTION LABEL
========================================================= */

.b2b-section-label {
    position: absolute;

    top: 25px;
    left: 35px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 14px;
}


/* Number */

.label-number {
    color: #0aaee8;

    font-size: 42px;

    font-weight: 800;

    line-height: 1;
}


/* Small line */

.label-line {
    display: block;

    width: 95px;
    height: 3px;

    background: #0b3157;
}


/* Text */

.label-text {
    color: #0b3157;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.5px;

    white-space: nowrap;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.b2b-image-area {
    position: relative;

    grid-column: 1;

    grid-row: 1 / 3;

    min-height: 610px;

    overflow: hidden;

    background: #eaf0f5;
}


/* Image */

.b2b-image-area img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.b2b-right-content {
    grid-column: 2;

    grid-row: 1 / 3;

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #ffffff;
}


/* =========================================================
   NAVY HEADING PANEL
========================================================= */

.b2b-heading-panel {
    position: relative;

    min-height: 270px;

    padding:
        38px
        45px
        35px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #06233f 0%,
            #07395f 60%,
            #0a4e78 100%
        );

    color: #ffffff;
}


/* Diagonal decorative shape */

.b2b-heading-panel::after {
    content: "";

    position: absolute;

    top: -100px;
    right: -70px;

    width: 280px;
    height: 430px;

    background: rgba(16, 184, 237, 0.08);

    transform: rotate(32deg);

    pointer-events: none;
}


/* Second diagonal */

.b2b-heading-panel::before {
    content: "";

    position: absolute;

    right: -150px;
    top: -120px;

    width: 100px;
    height: 500px;

    background: rgba(255, 255, 255, 0.04);

    transform: rotate(32deg);

    pointer-events: none;
}


/* Heading */

.b2b-heading-panel h2 {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 3.2vw, 48px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.b2b-heading-panel h2 span {
    display: block;

    color: #206ba4;
}


/* Paragraph */

.b2b-heading-panel p {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: 22px 0 0;

    color: #e4edf4;

    font-size: 17px;

    line-height: 1.55;
}


/* =========================================================
   FEATURES GRID
========================================================= */

.b2b-feature-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    flex: 1;

    padding:
        30px
        40px
        25px;

    column-gap: 45px;

    row-gap: 0;
}


/* =========================================================
   FEATURE
========================================================= */

.b2b-feature {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding:
        10px
        0
        30px;

    min-width: 0;
}


/* =========================================================
   FEATURE NUMBER
========================================================= */

.b2b-number {
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #0b4a79 0%,
            #062b50 100%
        );

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;

    box-shadow:
        0 4px 10px rgba(4, 39, 70, 0.15);
}


/* =========================================================
   CYAN VERTICAL LINE
========================================================= */

.b2b-feature-text {
    position: relative;

    min-width: 0;

    padding-left: 22px;
}


.b2b-feature-text::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 4px;
    height: 57px;

    background: #0bb8ed;
}


/* =========================================================
   FEATURE TITLE
========================================================= */

.b2b-feature-text h3 {
    margin:
        0
        0
        10px;

    color: #0b3157;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.25;
}


/* =========================================================
   FEATURE DESCRIPTION
========================================================= */

.b2b-feature-text p {
    margin: 0;

    color: #5c6672;

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .b2b-why-layout {
        min-height: 630px;
    }

    .b2b-image-area {
        min-height: 630px;
    }

    .b2b-heading-panel {
        min-height: 280px;

        padding:
            42px
            50px
            38px;
    }

    .b2b-feature-grid {
        padding:
            35px
            45px
            30px;

        column-gap: 50px;
    }

    .b2b-feature-text h3 {
        font-size: 21px;
    }

    .b2b-feature-text p {
        font-size: 15px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .b2b-why-section {
        padding: 30px 0;
    }

    .b2b-why-layout {
        grid-template-columns: 40% 60%;

        min-height: 600px;
    }

    .b2b-image-area {
        min-height: 600px;
    }

    .b2b-section-label {
        left: 25px;
    }

    .label-number {
        font-size: 36px;
    }

    .label-line {
        width: 70px;
    }

    .b2b-heading-panel {
        min-height: 250px;

        padding:
            35px
            35px
            30px;
    }

    .b2b-heading-panel h2 {
        font-size: 35px;
    }

    .b2b-heading-panel p {
        font-size: 15px;
    }

    .b2b-feature-grid {
        padding:
            25px
            28px;

        column-gap: 25px;
    }

    .b2b-feature {
        gap: 12px;
    }

    .b2b-number {
        flex-basis: 55px;

        width: 55px;
        height: 55px;

        font-size: 18px;
    }

    .b2b-feature-text {
        padding-left: 15px;
    }

    .b2b-feature-text h3 {
        font-size: 17px;
    }

    .b2b-feature-text p {
        font-size: 13px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .b2b-why-layout {
        display: flex;

        flex-direction: column;

        min-height: 0;
    }

    .b2b-section-label {
        position: absolute;

        top: 20px;
        left: 25px;
    }

    .b2b-image-area {
        width: 100%;

        height: 400px;

        min-height: 400px;
    }

    .b2b-right-content {
        width: 100%;
    }

    .b2b-heading-panel {
        min-height: auto;

        padding:
            45px
            35px
            40px;
    }

    .b2b-heading-panel h2 {
        font-size: 36px;
    }

    .b2b-feature-grid {
        padding:
            25px
            30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .b2b-why-section {
        padding: 30px 0;
    }

    .b2b-section-label {
        top: 15px;
        left: 18px;

        gap: 8px;
    }

    .label-number {
        font-size: 30px;
    }

    .label-line {
        width: 45px;

        height: 2px;
    }

    .label-text {
        font-size: 10px;

        letter-spacing: 1px;
    }

    .b2b-image-area {
        height: 280px;

        min-height: 280px;
    }

    .b2b-heading-panel {
        padding:
            35px
            22px
            32px;
    }

    .b2b-heading-panel h2 {
        font-size: 29px;

        letter-spacing: -.7px;
    }

    .b2b-heading-panel p {
        margin-top: 16px;

        font-size: 14px;
    }

    .b2b-feature-grid {
        grid-template-columns: 1fr;

        padding:
            10px
            22px;
    }

    .b2b-feature {
        padding:
            25px
            0;

        border-bottom: 1px solid #e0e6eb;
    }

    .b2b-feature:last-child {
        border-bottom: none;
    }

    .b2b-number {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        font-size: 17px;
    }

    .b2b-feature-text {
        padding-left: 15px;
    }

    .b2b-feature-text::before {
        width: 3px;
        height: 48px;
    }

    .b2b-feature-text h3 {
        font-size: 18px;
    }

    .b2b-feature-text p {
        font-size: 14px;

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .b2b-image-area {
        height: 235px;

        min-height: 235px;
    }

    .b2b-heading-panel {
        padding:
            30px
            18px;
    }

    .b2b-heading-panel h2 {
        font-size: 26px;
    }

    .b2b-heading-panel p {
        font-size: 13px;
    }

    .b2b-feature-grid {
        padding:
            5px
            18px;
    }

    .b2b-number {
        flex-basis: 46px;

        width: 46px;
        height: 46px;

        font-size: 15px;
    }

    .b2b-feature-text h3 {
        font-size: 17px;
    }

    .b2b-feature-text p {
        font-size: 13px;
    }

}
.service-box-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-box-link:hover {
    transform: translateY(-8px);
}

.service-box-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

.service-box-link .service-content h3 {
    transition: transform 0.3s ease;
}

.service-box-link:hover .service-content h3 {
    transform: translateX(5px);
}

/* =========================================================
   HEADER RESPONSIVE FIX
   Keeps the existing Bootstrap .container width unchanged.
   ========================================================= */

/* 992px–1199px: keep the desktop header inside the existing
   Bootstrap container by making only the header controls more compact. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .navbar {
    padding: 12px 0;
  }

  .site-header .navbar-brand {
    margin-right: 0.75rem;
  }

  .site-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .site-header .navbar-brand strong {
    font-size: 0.9rem;
  }

  .site-header .navbar-brand small {
    font-size: 0.37rem;
  }

  .site-header .nav-link {
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
    font-size: 0.88rem;
  }

  .site-header .nav-cta {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
  }

  .site-header .navbar-nav {
    gap: 0;
  }
}

/* Tablet and mobile: allow Bootstrap's collapse to become
   a full-width vertical menu instead of forcing a single row. */
@media (max-width: 991.98px) {
  .site-header .navbar {
    padding: 12px 0;
  }

  .site-header .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100%;
    white-space: normal;
    padding-top: 12px;
  }

  .site-header .nav-item {
    width: 100%;
  }

  .site-header .nav-link {
    display: block;
    width: 100%;
    padding: 0.65rem 0 !important;
    white-space: normal !important;
  }

  .site-header .nav-cta {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
  }

  .site-header .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin: 0.25rem 0 0;
    box-shadow: none;
  }

  .site-header .dropdown-submenu > .dropdown-menu {
    margin-left: 0;
    width: calc(100% - 10px);
  }
}

/* Small mobile: make sure the logo and hamburger always fit
   without changing the Bootstrap container width. */
@media (max-width: 575.98px) {
  .site-header .navbar {
    padding: 10px 0;
  }

  .site-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .site-header .navbar-brand {
    gap: 0.45rem !important;
    min-width: 0;
  }

  .site-header .navbar-brand strong {
    font-size: 0.9rem;
  }

  .site-header .navbar-brand small {
    font-size: 0.35rem;
    letter-spacing: 0.08em;
  }

  .site-header .navbar-toggler {
    flex-shrink: 0;
    padding: 0.35rem 0.55rem;
  }

  .site-header .navbar-collapse {
    width: 100%;
  }
}

/* Extra-small screens: prevent long menu text from creating
   horizontal overflow. */
@media (max-width: 360px) {
  .site-header .navbar-brand strong {
    font-size: 0.82rem;
  }

  .site-header .navbar-brand small {
    font-size: 0.31rem;
  }

  .site-header .nav-link {
    font-size: 0.9rem;
  }
}
/* Active menu item */
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link[aria-current="page"] {
    color: #f4b400 !important;
    font-weight: 600;
}

/* Active dropdown parent */
.site-header .navbar-nav .dropdown.active > .nav-link,
.site-header .navbar-nav .dropdown > .nav-link.active {
    color: #f4b400 !important;
}

/* Active menu item hover */
.site-header .navbar-nav .nav-link.active:hover,
.site-header .navbar-nav .nav-link[aria-current="page"]:hover {
    color: #f4b400 !important;
}
.submenu-toggle {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.5rem 0.35rem;
    cursor: pointer;
}

.submenu-toggle i {
    font-size: 0.7rem;
}

.submenu-toggle:hover {
    color: #f4b400;
}
/* Menu name + submenu icon */
.nav-item-with-toggle {
    display: flex;
    align-items: center;
}

/* Main menu link */
.nav-item-with-toggle > .nav-link {
    padding-right: 5px !important;
}

/* Submenu arrow button */
.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 8px 6px;
    cursor: pointer;
}

/* Arrow */
/* Submenu toggle button */
.submenu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #ffffff;
    padding: 8px 6px;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Always show the arrow icon */
.submenu-toggle i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff;
    font-size: 11px;
    transition: transform 0.2s ease;
}
.navbar>.container {
  justify-content: center;
}

/* Rotate arrow when submenu is open */
.submenu-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Hover */
.submenu-toggle:hover,
.submenu-toggle:hover i {
    color: #f4b400;
}
@media (max-width: 991.98px) {

  .navbar>.container {
  justify-content: space-between;
}
    .nav-item-with-toggle {
        width: 100%;
    }

    .nav-item-with-toggle > .nav-link {
        flex: 1;
    }

    .submenu-toggle {
        padding: 10px 12px;
    }

    .nav-item-with-toggle .dropdown-menu {
        width: 100%;
    }
}
/* =========================================================
   SECTION SCROLL ANIMATIONS
   ========================================================= */

/* Sections start slightly hidden */
main > section {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Section becomes visible */
main > section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero should be visible immediately */
main > section:first-child {
    opacity: 1;
    transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    main > section {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   MOBILE DROPDOWN FIX
   Prevent Bootstrap dropdowns from floating outside the
   mobile navigation and keep submenu text fully visible.
========================================================= */

@media (max-width: 991.98px) {

    /* Keep the collapsed navigation inside the viewport */
    .site-header .navbar-collapse {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .site-header .navbar-nav {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
    }

    .site-header .navbar-nav > .nav-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Keep the menu name and arrow within the same row */
    .site-header .nav-item-with-toggle {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .site-header .nav-item-with-toggle > .nav-link {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100% - 46px) !important;
        overflow-wrap: anywhere;
    }

    .site-header .submenu-toggle {
        flex: 0 0 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        padding: 10px 12px !important;
    }

    /*
     * CRITICAL:
     * Bootstrap normally positions .dropdown-menu absolutely.
     * On mobile it must become part of the normal menu flow.
     */
    .site-header .navbar-nav .dropdown-menu,
    .site-header .navbar-nav .dropdown-menu.show {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        display: none;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 4px 0 8px !important;
        padding: 6px !important;

        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    /* Bootstrap adds .show when the toggle is clicked */
    .site-header .navbar-nav .dropdown-menu.show {
        display: block !important;
    }

    /* Make submenu links wrap instead of being clipped */
    .site-header .navbar-nav .dropdown-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 10px 12px !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;

        line-height: 1.35 !important;
    }

    /* Prevent the animated background from causing overflow */
    .site-header .navbar-nav .dropdown-item::before {
        max-width: 100% !important;
    }

    /* Contact button stays inside the mobile menu */
    .site-header .navbar-nav .nav-cta {
        max-width: 100% !important;
    }
}

/* Smaller phones */
@media (max-width: 575.98px) {

    .site-header .navbar-nav .dropdown-menu,
    .site-header .navbar-nav .dropdown-menu.show {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .site-header .navbar-nav .dropdown-item {
        font-size: 0.9rem !important;
        padding: 9px 10px !important;
    }
    .split-visual {
          min-height: auto;
    }
    .split-visual img {
      width: 100%;
    }
}