/* ==========================================================================
   NexCrest IT - Full Home Page Complete Stylesheet
   Modern, Ultra-responsive, High-Performance Design
   ========================================================================== */

:root {
  /* Core Brand Colors */
  --primary-color: #ff5266;
  --secondary-color: #043fff;
  --accent-cyan: #00d4d6;
  --bg-dark: #140c26;
  --bg-card: rgba(25, 15, 50, 0.65);
  --bg-card-hover: rgba(35, 20, 70, 0.85);
  --bg-alt: #0d071a;
  
  --text-white: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.85);
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-body: #556270;
  --text-dark: #101a25;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(255, 82, 102, 0.3);

  /* Gradients */
  --gradient-coral: linear-gradient(90deg, #ff9a3e 0%, #ff5266 100%);
  --gradient-cyan: linear-gradient(90deg, #00bfff 0%, #0070ff 100%);
  --gradient-purple: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;

  /* Dimensions */
  --header-height: 96px;
  --max-content-width: 1360px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
}


/* --------------------------------------------------------------------------
   Global Reset & Layout
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}


body {
  font-family: var(--font-primary);
  background-color: var(--bg-dark);
  color: var(--text-white);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
}


img, video {
  max-width: 100%;
  height: auto;
}


.container {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}


.section {
  padding: 100px 0;
  position: relative;
  z-index: 5;
}


/* Section Header Styles */
.section-header {
  margin-bottom: 60px;
}


.section-header.text-center {
  text-align: center;
}


.badge-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ff9a3e;
  background: rgba(255, 154, 62, 0.1);
  border: 1px solid rgba(255, 154, 62, 0.25);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}


.section-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin-bottom: 16px;
}


.section-subtitle {
  font-size: 18px;
  color: var(--text-dim);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}


.gradient-text {
  background: var(--gradient-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* --------------------------------------------------------------------------
   Particles Background (Drifting Ambient Dots)
   -------------------------------------------------------------------------- */
.particles-container {
  display: none !important;
}


.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  filter: blur(0.5px);
  animation: floatDrift linear infinite alternate;
}


@keyframes floatDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.35; }

  50% { opacity: 0.85; transform: translate(25px, -35px) scale(1.15); }

  100% { transform: translate(-20px, -70px) scale(0.9); opacity: 0.3; }

}


/* --------------------------------------------------------------------------
   1. Site Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.site-header.is-sticky {
  position: fixed;
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.header-container {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
  transition: transform 0.25s ease;
}


.brand-logo:hover {
  transform: scale(1.02);
}


.logo-img {
  height: 46px !important;
  width: auto;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
}


.brand-logo .logo-img {
  filter: none;
}


.logo-white {
  display: none;
}


.logo-red {
  display: block;
}


.site-header.is-sticky .logo-white {
  display: none;
}


.site-header.is-sticky .logo-red {
  display: block;
}


.logo-tm-mark {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-left: 4px;
  margin-top: -1px;
  letter-spacing: -0.2px;
  transition: color 0.25s ease;
  user-select: none;
  display: inline-block;
}


.site-header.is-sticky .logo-tm-mark {
  color: #ea2a3a;
}


.nav-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 36px;
}


.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 26px;
}


.nav-item {
  position: relative;
}


.nav-link {
  color: #101a25;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  transition: color 0.25s ease;
}


.nav-link:hover,
.nav-link.active {
  color: #ff5266;
}


.site-header.is-sticky .nav-link {
  color: #101a25;
}


.site-header.is-sticky .nav-link:hover,
.site-header.is-sticky .nav-link.active {
  color: #ff5266;
}


.chevron-icon {
  width: 9px;
  height: 6px;
  transition: transform 0.25s ease;
  margin-top: 1px;
  stroke: #101a25;
}


.nav-item:hover .chevron-icon {
  transform: rotate(180deg);
}


.site-header.is-sticky .chevron-icon {
  stroke: #101a25;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 12px 0;
  list-style: none;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}


.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.dropdown-menu li a {
  display: block;
  padding: 10px 22px;
  color: #101a25;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}


.dropdown-menu li a:hover {
  color: #ff5266;
  background: #f7f9fc;
  padding-left: 26px;
}


.site-header.is-sticky .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}


.site-header.is-sticky .dropdown-menu li a {
  color: #101a25;
}


.site-header.is-sticky .dropdown-menu li a:hover {
  color: #ff5266;
  background: #f7f9fc;
}


.header-action {
  display: flex;
  align-items: center;
  gap: 16px;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}


.btn-cyan {
  background: var(--gradient-cyan);
  color: var(--text-white);
  padding: 13px 36px;
  box-shadow: 0 4px 22px rgba(0, 160, 255, 0.45);
}


.btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 180, 255, 0.65);
}


.btn-coral-gradient {
  background: var(--gradient-coral);
  color: var(--text-white);
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(255, 82, 102, 0.4);
}


.btn-coral-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 82, 102, 0.6);
}


.btn-red,
.btn-coral {
  background: #ea2a3a;
  background: linear-gradient(90deg, #ea2a3a 0%, #ff3b53 100%);
  color: #ffffff !important;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(234, 42, 58, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
}


.btn-red:hover,
.btn-coral:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #d31828 0%, #eb2b42 100%);
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(234, 42, 58, 0.55);
}

.btn-white {
  background: #ffffff !important;
  color: #101a25 !important;
  border: 1.5px solid #ffffff !important;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-white:hover {
  background: #f8fafc !important;
  color: #ea2a3a !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


.btn-outline {
  background: transparent;
  color: var(--text-white);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 14px 34px;
}


.btn-outline:hover {
  border-color: #ff5266;
  color: #ff5266;
  background: rgba(255, 82, 102, 0.05);
}


.btn-block {
  width: 100%;
}


.mobile-toggle {
  display: none;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.16);
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 60;
  transition: all 0.25s ease;
}


.mobile-toggle .bar {
  width: 19px;
  height: 2px;
  background: #101a25;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}


/* On sticky white header: bars are dark charcoal for clear contrast */
.site-header.is-sticky .mobile-toggle .bar {
  background: #101a25;
}


/* When mobile navigation is open (over dark drawer): bars turn white & morph into close 'X' */
.mobile-toggle.is-active,
.site-header.is-sticky .mobile-toggle.is-active,
.nav-menu.is-open ~ .header-action .mobile-toggle {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.mobile-toggle.is-active .bar,
.site-header.is-sticky .mobile-toggle.is-active .bar,
.nav-menu.is-open ~ .header-action .mobile-toggle .bar {
  background: #ffffff !important;
}


.mobile-toggle.is-active .bar:nth-child(1),
.nav-menu.is-open ~ .header-action .mobile-toggle .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}


.mobile-toggle.is-active .bar:nth-child(2),
.nav-menu.is-open ~ .header-action .mobile-toggle .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}


.mobile-toggle.is-active .bar:nth-child(3),
.nav-menu.is-open ~ .header-action .mobile-toggle .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   2. Hero Banner Showcase (Promotional Circular Portal Graphic Design)
   -------------------------------------------------------------------------- */
.hero-showcase-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 40px;
  overflow: hidden;
  z-index: 6;
}

.hero-showcase-wrapper {
  position: relative;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 40px;
}

.hero-showcase-banner-card {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(16, 26, 37, 0.08);
  border: 1px solid rgba(234, 42, 58, 0.14);
}

.hero-showcase-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-decor-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 180px;
}

.hero-decor-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
}

.hero-showcase-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  min-height: 540px;
}

.hero-showcase-media {
  position: relative;
  padding: 50px 30px 60px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-circle-portal-wrap {
  position: relative;
  width: 440px;
  height: 440px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-circle-outer-ring {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border-radius: 50%;
  border: 4px solid #ea2a3a;
  border-top-color: transparent;
  transform: rotate(-35deg);
  pointer-events: none;
}

.hero-circle-frame {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid #ffffff;
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.16);
  position: relative;
  background: #f1f5f9;
}

.hero-circle-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-showcase-script-tag {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Outfit', sans-serif;
  color: #101a25;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.hero-showcase-script-tag .dot-sep {
  color: #ea2a3a;
  font-style: normal;
}

.hero-showcase-info {
  padding: 44px 50px 44px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-showcase-vision-tag {
  display: inline-block;
  margin-bottom: 12px;
}

.hero-showcase-vision-tag .vision-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #101a25;
  text-transform: uppercase;
  display: inline-block;
}

.hero-showcase-vision-tag .vision-bar {
  width: 65px;
  height: 3.5px;
  background: #ea2a3a;
  border-radius: 2px;
  margin-top: 5px;
}

.hero-showcase-h1 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.18;
  color: #101a25;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.hero-showcase-h1 .h1-red {
  color: #ea2a3a;
}

.hero-showcase-motto-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ea2a3a;
  background: rgba(234, 42, 58, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 12px;
  border: 1px solid rgba(234, 42, 58, 0.15);
}

.hero-showcase-p-lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: #1e293b;
  font-weight: 600;
  margin-bottom: 10px;
}

.hero-showcase-p-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 22px;
}

.hero-showcase-services-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
  padding: 16px 0;
  border-top: 1px dashed rgba(234, 42, 58, 0.22);
  border-bottom: 1px dashed rgba(234, 42, 58, 0.22);
}

.hero-showcase-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.hero-showcase-service-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5266 0%, #ea2a3a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(234, 42, 58, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-showcase-service-item:hover .hero-showcase-service-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 24px rgba(234, 42, 58, 0.45);
}

.hero-showcase-service-name {
  font-size: 13px;
  font-weight: 700;
  color: #101a25;
  line-height: 1.3;
}

.hero-showcase-bottom-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.hero-showcase-pill {
  background: linear-gradient(135deg, #ea2a3a 0%, #c41827 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(234, 42, 58, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-showcase-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(234, 42, 58, 0.5);
}

.hero-showcase-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.hero-showcase-phone-cta:hover {
  transform: translateY(-1px);
}

.hero-phone-circle-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5266 0%, #ea2a3a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(234, 42, 58, 0.3);
}

.hero-phone-text-wrap {
  display: flex;
  flex-direction: column;
}

.hero-phone-text-wrap .p-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-phone-text-wrap .p-val {
  font-size: 16px;
  font-weight: 800;
  color: #101a25;
  letter-spacing: 0.2px;
}

.hero-showcase-btns {
  margin-left: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media screen and (max-width: 1080px) {
  .hero-showcase-grid {
    grid-template-columns: 1fr;
  }
  .hero-showcase-media {
    padding: 40px 20px 0 20px;
  }
  .hero-circle-portal-wrap {
    width: 340px;
    height: 340px;
  }
  .hero-circle-frame {
    width: 320px;
    height: 320px;
  }
  .hero-showcase-info {
    padding: 30px 24px 44px;
  }
  .hero-showcase-btns {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
  }
}

@media screen and (max-width: 600px) {
  .hero-showcase-h1 {
    font-size: 28px;
  }
  .hero-circle-portal-wrap {
    width: 280px;
    height: 280px;
  }
  .hero-circle-frame {
    width: 260px;
    height: 260px;
  }
  .hero-showcase-services-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .hero-showcase-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   2. Hero Banner Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: clamp(560px, 45.5vw, 846px);
  max-height: none;
  height: auto;
  width: 100%;
  background-color: #ffffff;
  background-image: url('banner/home-banner-desktop.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 10px);
  padding-bottom: 40px;
}

.hero-section .section-particles-canvas {
  display: none !important;
}

.hero-container {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 53% 47%;
  align-items: center;
  position: relative;
  z-index: 5;
}

.hero-media-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 200px;
}


.blob-frame {
  position: relative;
  width: 100%;
  max-width: 530px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heroFloat 7s ease-in-out infinite;
}


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

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

}


.blob-picture {
  display: contents;
}

.blob-image {
  width: 100%;
  height: auto;
  max-height: 570px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 220, 255, 0.15);
}


.blob-contour-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 24px);
  height: calc(100% + 16px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}


.contour-path {
  fill: none;
  stroke: rgba(100, 210, 255, 0.45);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.contour-dot {
  transform-origin: 571px 330px;
  animation: dotBreathe 3s ease-in-out infinite;
}


@keyframes dotBreathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }

  50% { transform: scale(1.25); opacity: 1; }

}


.hero-content {
  padding-left: clamp(20px, 2.5vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.hero-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  user-select: none;
}


.title-primary {
  font-family: var(--font-primary);
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #101a25;
  text-transform: uppercase;
  text-shadow: none;
}


.title-gradient {
  font-family: var(--font-editorial);
  font-size: clamp(34px, 3.5vw, 54px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  background: var(--gradient-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-top: 4px;
  filter: none;
}


.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}


.btn-play-video {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(45, 14, 30, 0.85);
  border: 2.5px solid var(--primary-color);
  color: var(--text-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(255, 82, 102, 0.3);
  flex-shrink: 0;
}


.play-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 82, 102, 0.6);
  animation: pulseRing 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}


@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.8; }

  50% { transform: scale(1.35); opacity: 0; }

  100% { transform: scale(1.4); opacity: 0; }

}


.play-icon {
  width: 22px;
  height: 22px;
  margin-left: 3px;
  fill: var(--text-white);
  transition: transform 0.25s ease;
}


.btn-play-video:hover {
  transform: scale(1.08);
  background: rgba(65, 18, 42, 0.95);
  border-color: #ff7588;
  box-shadow: 0 6px 26px rgba(255, 82, 102, 0.5);
}


.hero-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #4b5868;
  max-width: 520px;
  letter-spacing: -0.05px;
}

.desc-desktop {
  display: inline;
}

.desc-mobile {
  display: none;
}


/* Hero Banner Trust & Badge Enhancements */
.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 82, 102, 0.12);
  border: 1px solid rgba(255, 82, 102, 0.3);
  color: #ff9a3e;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  width: fit-content;
  backdrop-filter: blur(8px);
}


.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5266;
  box-shadow: 0 0 10px #ff5266;
  animation: pulseDot 2s infinite ease-in-out;
}


@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }

  50% { transform: scale(1.3); opacity: 1; }

}


.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}


.hero-metric-item {
  display: flex;
  flex-direction: column;
}


.hero-metric-val {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  background: var(--gradient-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.hero-metric-label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}


.hero-metric-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   Shared Section Typography & Subtitles
   ========================================================================== */
.section-heading-wrap {
  margin-bottom: 45px;
}


.section-heading-wrap.text-left {
  text-align: left;
}


.section-heading-wrap.text-center {
  text-align: center;
}


.subtitle-orange {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #ff753a;
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}


.title-dark {
  font-size: 46px;
  font-weight: 800;
  color: #101a25;
  letter-spacing: -0.02em;
  line-height: 1.18;
}


.section-description {
  font-size: 16px;
  line-height: 1.6;
  color: #556270;
  margin-top: 12px;
}


.section-description.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   SECTION 1: Our Promise (Screenshot 1)
   ========================================================================== */
.promise-section {
  background-color: #ffffff;
  padding: 95px 0 115px;
  position: relative;
  z-index: 5;
}


.promise-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 30px;
}


.promise-card {
  text-align: center;
  padding: 30px 24px;
  background: #ffffff;
  border-radius: 24px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}


.promise-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}


.promise-icon-box {
  width: 105px;
  height: 105px;
  border-radius: 28px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.promise-card:hover .promise-icon-box {
  transform: scale(1.08) rotate(3deg);
}


.promise-svg {
  width: 50px;
  height: 50px;
  color: #ffffff;
}


/* 3 Gradients matching Screenshot 1 */
.box-blue {
  background: linear-gradient(180deg, #00d2ff 0%, #0070ff 100%);
  box-shadow: 0 14px 32px rgba(0, 114, 255, 0.32);
}


.box-orange {
  background: linear-gradient(180deg, #ffa03b 0%, #ff4c68 100%);
  box-shadow: 0 14px 32px rgba(255, 76, 104, 0.32);
}


.box-green {
  background: linear-gradient(180deg, #b6ea46 0%, #6ebc24 100%);
  box-shadow: 0 14px 32px rgba(110, 188, 36, 0.32);
}


.promise-card-title {
  font-size: 22px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}


.promise-card-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #70798b;
  max-width: 320px;
  margin: 0 auto;
}


/* ==========================================================================
   SECTION 2: Empowering Businesses with Innovation & Excellence (Screenshot 2)
   ========================================================================== */
.empowering-section {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 55%, #ffffff 100%);
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
  z-index: 5;
}


.empowering-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 70px;
  align-items: center;
}


.empowering-media-col {
  display: flex;
  justify-content: center;
  position: relative;
}


.empowering-media-wrap {
  position: relative;
  width: 410px;
  max-width: 100%;
}


.empowering-icon-card {
  position: relative;
  width: 100%;
  border-radius: 46px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(255, 60, 80, 0.22);
  z-index: 2;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.empowering-icon-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 75px rgba(255, 60, 80, 0.32);
}


.icon-card-img {
  width: 100%;
  height: auto;
  display: block;
}


.card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
}


/* Floating Shapes */
.shape-dotgrid {
  position: absolute;
  bottom: -32px;
  left: -48px;
  width: 145px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  animation: floatSubtle 6s ease-in-out infinite alternate;
}


.shape-triangle {
  position: absolute;
  top: 18px;
  right: -28px;
  width: 44px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  animation: floatTriangle 7s ease-in-out infinite alternate;
}


.shape-circle {
  position: absolute;
  bottom: 85px;
  right: -32px;
  width: 32px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  animation: floatCircle 8s ease-in-out infinite alternate;
}


@keyframes floatSubtle {
  0% { transform: translateY(0) rotate(0deg); }

  100% { transform: translateY(-12px) rotate(2deg); }

}


@keyframes floatTriangle {
  0% { transform: translate(0, 0) rotate(0deg); }

  100% { transform: translate(-8px, -14px) rotate(20deg); }

}


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

  100% { transform: translate(6px, -10px) scale(1.15); }

}


.empowering-text-col {
  padding-left: 10px;
}


.empowering-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.18;
  margin-top: 10px;
  margin-bottom: 24px;
  color: #101a25;
}


.empowering-paragraph {
  font-size: 16.5px;
  line-height: 1.75;
  color: #556070;
}


.empowering-paragraph strong {
  color: #101a25;
  font-weight: 700;
}


/* ==========================================================================
   SECTION 3: Our Expertise (Screenshot 3)
   ========================================================================== */
.expertise-section {
  background-color: #ffffff;
  padding: 95px 0 115px;
  position: relative;
  z-index: 5;
}


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


.expertise-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease;
}


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


.expertise-img-wrap {
  width: 100%;
  height: 270px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}


.expertise-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


.expertise-card:hover .expertise-img {
  transform: scale(1.05);
}


.expertise-title {
  font-size: 28px;
  font-weight: 800;
  color: #101a25;
  margin-top: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}


/* ==========================================================================
   SECTION 4: Contact & Reach Us ! (Screenshot 4 with form-bg.webp)
   ========================================================================== */
.contact-reach-section {
  background: #ffffff url("assets/form-bg.webp") no-repeat center center / cover;
  padding: 110px 0 120px;
  position: relative;
  z-index: 5;
}


.contact-box-container {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 40px;
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.07);
  padding: 64px 70px;
  position: relative;
  overflow: hidden;
}


.contact-box-container::before {
  display: none;
}


.contact-box-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 55px;
  align-items: center;
}


.contact-form-side {
  position: relative;
}


.contact-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #101a25;
  margin-top: 8px;
  margin-bottom: 12px;
}


.contact-subtext {
  font-size: 15px;
  color: #70798b;
  margin-bottom: 32px;
  line-height: 1.6;
}


.reach-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.pill-input-wrap {
  display: flex;
  align-items: center;
  background: #f4f6fa;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  padding: 13px 22px;
  gap: 14px;
  transition: all 0.25s ease;
  position: relative;
}


.pill-input-wrap:focus-within {
  background: #ffffff;
  border-color: #ff5266;
  box-shadow: 0 0 0 4px rgba(255, 82, 102, 0.12);
}


.pill-input-wrap .input-icon,
.pill-input-wrap .pill-icon {
  font-size: 16px;
  color: #ff5266;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: color 0.25s ease;
}


.pill-input-wrap input,
.pill-input-wrap select {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: #101a25;
  outline: none;
}


.pill-input-wrap input::placeholder,
.pill-input-wrap textarea::placeholder {
  color: #8c94a6;
  font-weight: 400;
}


.pill-select-wrap select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
}


.pill-select-wrap select option {
  background: #ffffff;
  color: #101a25;
}


.select-chevron {
  position: absolute;
  right: 22px;
  font-size: 12px;
  color: #8c94a6;
  pointer-events: none;
}


.pill-input-wrap.pill-textarea-wrap {
  border-radius: 22px !important;
  align-items: flex-start !important;
  padding: 16px 22px !important;
}


.pill-input-wrap.pill-textarea-wrap .input-icon,
.pill-input-wrap.pill-textarea-wrap .pill-icon {
  margin-top: 3px;
}


.pill-input-wrap textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: #101a25;
  outline: none;
  resize: vertical;
  min-height: 95px;
  line-height: 1.6;
}


.btn-submit-now,
.btn-reach-submit {
  align-self: flex-start;
  margin-top: 8px;
  background: linear-gradient(90deg, #ff8c42 0%, #ff4d67 100%);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 16px 42px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(255, 77, 103, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}


.btn-submit-now:hover,
.btn-reach-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 77, 103, 0.45);
}


.form-feedback {
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
  margin-top: 8px;
  transition: opacity 0.3s;
}


.form-feedback.success { color: #10b981; }

.form-feedback.error { color: #ef4444; }


/* Contact Info Column (One Side Contact Us, Next Side Form) */
.contact-reach-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}


.contact-reach-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 20px;
  border: 1.5px solid rgba(16, 26, 37, 0.07);
  box-shadow: 0 4px 14px rgba(16, 26, 37, 0.03);
  transition: all 0.3s ease;
}


.contact-reach-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 82, 102, 0.3);
  box-shadow: 0 10px 24px rgba(16, 26, 37, 0.06);
}


.reach-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #ffffff;
  flex-shrink: 0;
}


.reach-item-icon.box-blue {
  background: linear-gradient(180deg, #00d2ff 0%, #0070ff 100%);
  box-shadow: 0 8px 18px rgba(0, 114, 255, 0.28);
}


.reach-item-icon.box-orange {
  background: linear-gradient(180deg, #ffa03b 0%, #ff4c68 100%);
  box-shadow: 0 8px 18px rgba(255, 76, 104, 0.28);
}


.reach-item-icon.box-green {
  background: linear-gradient(180deg, #b6ea46 0%, #6ebc24 100%);
  box-shadow: 0 8px 18px rgba(110, 188, 36, 0.28);
}


.reach-item-icon.box-purple {
  background: linear-gradient(180deg, #c084fc 0%, #8b5cf6 100%);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.28);
}


.reach-item-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #70798b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}


.reach-item-val {
  font-size: 16px;
  font-weight: 800;
  color: #0070ff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 2px;
  transition: color 0.2s ease;
}


.reach-item-val:hover {
  color: #ff5266;
}


.reach-item-note {
  font-size: 13px;
  color: #70798b;
  margin: 0;
  line-height: 1.4;
}


.reach-address {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.5;
  margin: 0;
}


.reach-emails span {
  display: block;
  font-size: 13px;
  color: #556270;
  margin-bottom: 4px;
}


.reach-emails a {
  color: #ff5266;
  text-decoration: none;
  font-weight: 600;
}


.reach-emails a:hover {
  text-decoration: underline;
}


/* Right Column Contact side */
.contact-image-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.call-float-badge {
  background: #ffffff;
  border-radius: 60px;
  padding: 10px 24px 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 14px 35px rgba(16, 26, 37, 0.12);
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease;
  z-index: 5;
}


.call-float-badge:hover {
  transform: translateY(-3px);
}


.call-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7e40 0%, #ff4e65 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}


.call-icon-circle svg {
  width: 24px;
  height: 24px;
}


.call-text-wrap {
  display: flex;
  flex-direction: column;
}


.call-greeting {
  font-size: 13px;
  color: #70798b;
  font-weight: 500;
  line-height: 1.2;
}


.call-number {
  font-size: 21px;
  font-weight: 800;
  color: #101a25;
  text-decoration: none;
  letter-spacing: -0.2px;
  line-height: 1.3;
}


.contact-img-frame {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}


.contact-workspace-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   SECTION 5: Some of our Projects (Screenshot 5)
   ========================================================================== */
.projects-carousel-section {
  background: #ffffff url("assets/project-bg.webp") no-repeat center center / 100% 100%;
  position: relative;
  padding: 160px 0 150px;
  overflow: hidden;
  z-index: 5;
}


.projects-full-wrapper {
  position: relative;
  z-index: 10;
}


.projects-split-container {
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 50px;
  align-items: center;
  min-width: 0;
  width: 100%;
}


.projects-left-col {
  padding-right: 20px;
  min-width: 0;
}


.projects-sub-tag {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ff753a;
  margin-bottom: 12px;
}


.projects-title-white {
  font-size: 46px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}


.projects-desc-gray {
  font-size: 16px;
  color: #8c94a6;
  margin-bottom: 40px;
}


.projects-slider-controls {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 40px;
}


.slide-counter-fraction {
  font-size: 22px;
  color: #70798b;
  font-weight: 600;
  font-family: inherit;
}


.slide-counter-fraction strong {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
}


.slider-arrows-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}


.slider-nav-arrow {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}


.slider-nav-arrow svg {
  width: 28px;
  height: 28px;
}


.slider-nav-arrow:hover {
  color: #ff5266;
  transform: scale(1.15);
}


.btn-all-projects {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #ff8c42 0%, #ff4d67 100%);
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(255, 77, 103, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.btn-all-projects:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 77, 103, 0.45);
}


.arrow-right-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}


.btn-all-projects:hover .arrow-right-icon {
  transform: translateX(4px);
}


.projects-cta-wrap {
  margin-top: 10px;
  position: relative;
  z-index: 10;
}


/* Right Column: Carousel Viewport */
.projects-right-col {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


.projects-track-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px;
  min-width: 0;
}


.projects-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}


.project-slide-item {
  flex: 0 0 calc((100% - 20px) / 2);
  min-width: calc((100% - 20px) / 2);
  max-width: calc((100% - 20px) / 2);
  box-sizing: border-box;
}


.project-mockup-card {
  border-radius: 18px;
  overflow: hidden;
  background: #060d1a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 1600 / 735;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}


.project-mockup-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 82, 102, 0.5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 82, 102, 0.2);
}


.mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


/* Organic Bottom Waves (replaced by project-bg.webp authentic graphic) */
.projects-bottom-waves {
  display: none;
}


/* ==========================================================================
   SECTION 6: Testimonials (White bg with testimonial-bg.webp)
   ========================================================================== */
.testimonials-section {
  background: #ffffff url("assets/testimonial-bg.webp") no-repeat center center / cover;
  position: relative;
  padding: 110px 0 120px;
  overflow: hidden;
  z-index: 5;
}


.testimonials-container {
  position: relative;
  z-index: 10;
}


.testimonials-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}


.testimonials-header .badge-subtitle {
  color: #ff5266;
  background: rgba(255, 82, 102, 0.08);
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}


.testimonials-title {
  font-size: 44px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 10px;
  margin-bottom: 14px;
}


.testimonials-subtitle {
  font-size: 16px;
  color: #606d80;
  line-height: 1.6;
}


.testimonials-carousel-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}


.testimonials-viewport {
  overflow: hidden;
  border-radius: 32px;
  padding: 10px 4px;
}


.testimonials-track {
  display: flex;
  gap: 28px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}


.testimonial-slide {
  flex: 0 0 calc(50% - 14px);
  min-width: 320px;
  display: flex;
}


.testimonial-card {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #edf1f7;
  border-radius: 30px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 45px rgba(16, 26, 37, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}


.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.08) 0%, transparent 70%);
  pointer-events: none;
}


.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 22px 50px rgba(255, 82, 102, 0.12);
}


.t-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}


.quote-symbol {
  width: 34px;
  height: 34px;
  color: #ff5266;
  opacity: 0.95;
}


.quote-symbol svg {
  width: 100%;
  height: 100%;
}


.t-stars {
  color: #ffaa00;
  font-size: 19px;
  letter-spacing: 3px;
  text-shadow: 0 1px 4px rgba(255, 170, 0, 0.3);
}


.t-quote {
  font-size: 16px;
  line-height: 1.68;
  color: #4a5568;
  font-style: italic;
  margin-bottom: 30px;
  flex-grow: 1;
}


.t-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #edf1f7;
}


.t-avatar-box {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #ff5266;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.25);
  background: #edf1f7;
}


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


.t-author-info {
  display: flex;
  flex-direction: column;
}


.t-name {
  color: #101a25;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 3px;
}


.t-role {
  color: #718096;
  font-size: 13.5px;
  font-weight: 500;
}


.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 40px;
}


.t-control-btn {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #101a25;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


.t-control-btn svg {
  width: 20px;
  height: 20px;
}


.t-control-btn:hover {
  background: #ff5266;
  border-color: #ff5266;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(255, 82, 102, 0.35);
}


.t-dots-container {
  display: flex;
  align-items: center;
  gap: 8px;
}


.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}


.t-dot.is-active {
  width: 30px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff8c42 0%, #ff4d67 100%);
  box-shadow: 0 2px 8px rgba(255, 77, 103, 0.4);
}


@media (max-width: 900px) {
  .testimonial-slide {
    flex: 0 0 100%;
  }

}


/* --------------------------------------------------------------------------
   12. Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: #06020c;
  border-top: 1px solid var(--border-light);
  padding-top: 80px;
}


.footer-container {
  display: grid;
  grid-template-columns: 35% 20% 20% 25%;
  gap: 40px;
  padding-bottom: 60px;
}


.footer-logo-img {
  height: 30px;
  width: auto;
  margin-bottom: 20px;
  display: block;
}


.footer-tagline {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 320px;
}


.footer-contact-brief {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}


.footer-contact-icon {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
}


.footer-contact-item a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}


.footer-contact-item a:hover {
  color: #ff5266;
}


.site-footer .footer-heading,
.site-footer h4,
.site-footer h5,
body.subpage .site-footer .footer-heading,
body.subpage .site-footer h4,
body.subpage .site-footer h5,
.footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


body.subpage .site-footer p,
body.subpage .site-footer .footer-tagline,
body.subpage .site-footer .footer-contact-item,
body.subpage .site-footer .footer-contact-item span {
  color: var(--text-dim) !important;
}


body.subpage .site-footer .footer-links li a,
body.subpage .site-footer .footer-contact-item a,
body.subpage .site-footer .bottom-legal-links a {
  color: var(--text-dim) !important;
}


body.subpage .site-footer .footer-links li a:hover,
body.subpage .site-footer .footer-contact-item a:hover,
body.subpage .site-footer .bottom-legal-links a:hover {
  color: #ff5266 !important;
}


.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.footer-links li a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}


.footer-links li a:hover {
  color: #ff5266;
  padding-left: 4px;
}


.footer-address {
  font-style: normal;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 24px;
}


.social-links,
.footer-social-links {
  display: flex;
  gap: 14px;
  align-items: center;
}


.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Facebook Official Blue */
.social-icon.social-facebook,
.social-icon[title*="Facebook"],
.social-icon[aria-label*="Facebook"] {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%) !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.38);
}


.social-icon.social-facebook:hover,
.social-icon[title*="Facebook"]:hover,
.social-icon[aria-label*="Facebook"]:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.58);
  filter: brightness(1.08);
  color: #ffffff !important;
}


/* Instagram Official Sunset Gradient */
.social-icon.social-instagram,
.social-icon[title*="Instagram"],
.social-icon[aria-label*="Instagram"] {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  box-shadow: 0 4px 14px rgba(220, 39, 67, 0.38);
}


.social-icon.social-instagram:hover,
.social-icon[title*="Instagram"]:hover,
.social-icon[aria-label*="Instagram"]:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(220, 39, 67, 0.58);
  filter: brightness(1.08);
  color: #ffffff !important;
}


/* WhatsApp Official Green Gradient */
.social-icon.social-whatsapp,
.social-icon[title*="WhatsApp"],
.social-icon[aria-label*="WhatsApp"] {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.38);
}


.social-icon.social-whatsapp:hover,
.social-icon[title*="WhatsApp"]:hover,
.social-icon[aria-label*="WhatsApp"]:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.58);
  filter: brightness(1.08);
  color: #ffffff !important;
}


.social-icon i {
  font-size: 19px;
  line-height: 1;
  color: #ffffff !important;
}


.social-icon:hover i {
  color: #ffffff !important;
}


/* ==========================================================================
   Footer Locations & Direct Contact (Exact Match to User Screenshot)
   ========================================================================== */
.footer-locations-contact-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 48px 0 40px;
}


.footer-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}


.footer-locations-title {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}


.footer-locations-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}


.footer-locations-menu li a {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-block;
}


.footer-locations-menu li a:hover {
  color: #ff5266;
  transform: translateX(4px);
}


.footer-direct-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.footer-direct-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  transition: all 0.25s ease;
}


.footer-red-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #ff2b42;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255, 43, 66, 0.4);
  transition: transform 0.25s ease, background 0.25s ease;
}


.footer-direct-item:hover {
  color: #ff7588;
}


.footer-direct-item:hover .footer-red-icon {
  transform: scale(1.1);
  background: #ff5266;
}


.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 0;
  background: #040108;
}


.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-dim);
}


.bottom-legal-links {
  display: flex;
  gap: 12px;
}


.bottom-legal-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}


.bottom-legal-links a:hover {
  color: #ff5266;
}


/* --------------------------------------------------------------------------
   13. Floating Action Widgets
   -------------------------------------------------------------------------- */
.floating-whatsapp,
.whatsapp-float {
  display: none !important;
}


.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: waBreathe 4s ease-in-out infinite;
}


@keyframes waBreathe {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.05); }

}


.whatsapp-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
}


.whatsapp-icon {
  width: 32px;
  height: 32px;
}


.whatsapp-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 22px;
  height: 22px;
  background-color: #e53935;
  color: #ffffff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


.recaptcha-badge {
  display: none !important;
}


/* --------------------------------------------------------------------------
   14. Video Modal Popup
   -------------------------------------------------------------------------- */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.video-modal.is-active {
  opacity: 1;
  visibility: visible;
}


.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 4, 18, 0.88);
  backdrop-filter: blur(10px);
}


.modal-dialog {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 860px;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.video-modal.is-active .modal-dialog {
  transform: scale(1);
}


.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}


.modal-close:hover {
  background: #ff5266;
  border-color: #ff5266;
  transform: rotate(90deg);
}


.video-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}


.video-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1366px) and (min-width: 1201px) {
  .header-container {
    padding: 0 24px;
  }

  .nav-menu {
    margin-right: 20px;
  }
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
  .header-container {
    padding: 0 24px;
  }

  .brand-logo {
    flex-shrink: 0;
  }

  .header-action {
    flex-shrink: 0;
  }

  .header-action .btn {
    display: none !important;
  }

  .nav-menu {
    margin-right: 0;
    margin-left: auto;
  }
}

@media screen and (max-width: 1200px) {
  .values-grid,
  .services-grid,
  .projects-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }


  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .title-primary { font-size: 60px; }

  .title-gradient { font-size: 66px; }

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

}


@media screen and (max-width: 991px) {
  .logo-img {
    height: 42px !important;
  }

  .page-banner {
    padding: 106px 20px 42px;
    background-size: cover;
    background-position: center bottom;
  }


  .mobile-toggle {
    display: flex;
  }


  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: #120924;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 28px 60px;
    margin: 0;
    transform: translateX(105%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    visibility: hidden;
    z-index: 55;
  }

  .nav-menu::-webkit-scrollbar {
    width: 5px;
  }

  .nav-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .nav-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
  }


  .nav-menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }


  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
  }


  .nav-item {
    width: 100%;
  }


  /* Mobile Navigation Menu Links - Always crisp white on dark drawer, overriding sticky header styles */
  .nav-menu .nav-link,
  .site-header.is-sticky .nav-menu .nav-link {
    width: 100%;
    font-size: 18px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: space-between;
    color: #ffffff !important;
  }


  .nav-menu .nav-link:hover,
  .site-header.is-sticky .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active,
  .site-header.is-sticky .nav-menu .nav-link.active {
    color: #ff5266 !important;
  }


  .nav-menu .chevron-icon,
  .site-header.is-sticky .nav-menu .chevron-icon {
    stroke: rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }


  .nav-item.dropdown-active .chevron-icon {
    transform: rotate(180deg);
  }


  .dropdown-menu,
  .site-header.is-sticky .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 16px;
    margin-top: 6px;
    display: none;
    border-radius: 8px;
  }


  .nav-item.dropdown-active .dropdown-menu {
    display: block !important;
  }


  .nav-menu .dropdown-menu li a,
  .site-header.is-sticky .nav-menu .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px;
    padding: 8px 0;
    display: block;
    background: transparent !important;
    border: none !important;
  }


  .nav-menu .dropdown-menu li a:hover,
  .site-header.is-sticky .nav-menu .dropdown-menu li a:hover {
    color: #ff5266 !important;
    background: transparent !important;
  }


  .hero-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    background-image: url('banner/home-banner-mobile.png') !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
    padding-top: calc(var(--header-height) + 16px) !important;
    padding-bottom: 70px !important;
  }


  .hero-container {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }


  .hero-media-wrapper {
    order: 1;
    width: 100%;
    min-height: clamp(240px, 58.5vw, 560px);
    margin: 0 auto;
    justify-content: center;
  }


  .hero-content {
    order: 2;
    padding-left: 0;
    align-items: center;
  }

  .hero-eyebrow-seo {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }


  .hero-actions {
    justify-content: center;
  }


  .hero-description {
    font-size: 14.5px;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.55;
  }


  .title-primary { font-size: clamp(28px, 6vw, 42px); }

  .title-gradient { font-size: clamp(32px, 6.8vw, 46px); }


  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .contact-card {
    grid-template-columns: 1fr;
    padding: 40px 30px;
  }


  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

}


@media screen and (max-width: 767px) {
  :root {
    --header-height: 76px;
  }


  .container {
    padding: 0 20px;
  }


  .section {
    padding: 70px 0;
  }


  .section-title {
    font-size: 34px;
  }


  .logo-img {
    height: 42px !important;
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
  }

  .header-container {
    padding: 0 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-action {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .header-action > .btn,
  .header-action > a.btn,
  .header-action .btn-cyan {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(16, 26, 37, 0.16) !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    z-index: 60 !important;
    transition: all 0.25s ease !important;
  }

  .mobile-toggle:hover {
    border-color: rgba(255, 82, 102, 0.35) !important;
    background: #fafbfc !important;
  }

  .mobile-toggle .bar {
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    background: #101a25 !important;
    border-radius: 3px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
  }


  .footer-logo-img {
    height: 23px !important;
    margin-bottom: 16px;
  }


  .btn-cyan {
    padding: 10px 22px;
    font-size: 13px;
  }


  .hero-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    background-image: url('banner/home-banner-mobile.png') !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
    padding-top: calc(var(--header-height) + 12px) !important;
    padding-bottom: 60px !important;
  }


  .page-banner {
    padding: 96px 16px 40px !important;
    background-size: 100% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }


  .page-banner-title {
    font-size: 28px !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
  }


  .page-banner-lead {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
    margin-bottom: 14px !important;
  }


  .blob-frame {
    max-width: 380px;
  }


  .blob-picture {
  display: contents;
}

.blob-image {
    max-height: 360px;
  }


  .title-primary { font-size: 40px; }

  .title-gradient { font-size: 44px; }


  .hero-actions {
    gap: 14px;
  }


  .btn-play-video {
    width: 52px;
    height: 52px;
  }


  .btn-coral-gradient {
    padding: 14px 30px;
    font-size: 14px;
  }

  .desc-desktop {
    display: none !important;
  }

  .desc-mobile {
    display: inline !important;
  }

  .hero-description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 14px auto 0 !important;
    max-width: 340px !important;
  }


  .values-grid,
  .services-grid,
  .projects-grid,
  .process-steps,
  .testimonials-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }


  .stats-wrapper {
    grid-template-columns: 1fr 1fr;
  }


  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }


  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }


  .footer-locations-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }


  .hero-badge-pill {
    margin: 0 auto 16px;
  }


  .hero-trust-bar {
    justify-content: center;
    gap: 14px;
  }


  .footer-bottom-flex {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }


  .floating-whatsapp {
    bottom: 20px;
    left: 20px;
  }


}


@media screen and (max-width: 767px) {
  .hero-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    background-image: url('banner/home-banner-mobile.png') !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
    padding-top: calc(var(--header-height) + 10px) !important;
    padding-bottom: 50px !important;
  }

  .hero-container {
    padding: 0 16px !important;
  }

  .hero-media-wrapper {
    min-height: calc(52vw - 15px) !important;
  }

  .hero-eyebrow-seo {
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    margin-bottom: 6px !important;
    padding: 0 8px !important;
  }

  .hero-title {
    margin-bottom: 12px !important;
  }

  .title-primary {
    font-size: 28px !important;
  }

  .title-gradient {
    font-size: 32px !important;
  }

  .hero-actions {
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  .hero-description {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #3f4d5c !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .brand-logo {
    padding: 0 !important;
    margin: 0 !important;
  }

  .logo-img {
    height: 40px !important;
    max-height: 42px !important;
    width: auto !important;
  }


  .footer-logo-img {
    height: 22px !important;
  }


  .blob-frame {
    max-width: 300px;
  }


  .blob-picture {
  display: contents;
}

.blob-image {
    max-height: 300px;
  }


  .title-primary { font-size: 32px; }

  .title-gradient { font-size: 36px; }


  .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
  }


  .btn-cyan {
    display: none;
  }


  .stats-wrapper {
    grid-template-columns: 1fr;
  }


  .page-banner {
    padding: 92px 14px 36px !important;
    background-size: 100% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }


  .page-banner-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }


  .page-banner-lead {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }


  .breadcrumb-nav {
    padding: 5px 14px !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }

}


/* ==========================================================================
   Hero Contour 3 Running Balls & Collision Animation
   ========================================================================== */
.running-ball {
  transform-origin: center center;
  transition: transform 0.15s ease;
  cursor: pointer;
}


.running-ball:hover {
  transform: scale(1.35);
}


.running-ball.is-colliding {
  filter: drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 24px rgba(255, 120, 160, 0.95)) !important;
  transform: scale(1.3);
}


.collision-shockwave {
  pointer-events: none;
  animation: shockwaveFade 0.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}


@keyframes shockwaveFade {
  0% {
    r: 8px;
    opacity: 1;
    stroke-width: 4px;
  }

  100% {
    r: 45px;
    opacity: 0;
    stroke-width: 0.5px;
  }

}


.collision-mini-ball {
  pointer-events: none;
}


/* ==========================================================================
   Section Particles Canvas (Throughout the site)
   ========================================================================== */
.section-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


/* Ensure sections and footers establish positioning context and clip particle bounds */
section,
.section,
.section-sm,
.section-cta,
.page-banner,
.site-footer,
.hero-section,
.promise-section,
.empowering-section,
.expertise-section,
.contact-reach-section,
.projects-carousel-section,
.testimonials-section,
.core-focus-section,
.about-home-section,
.our-services-section,
.why-espina-section,
.process-section-new,
.cta-project-banner,
.cta-banner,
.industries-section,
.pricing-faq-section,
.portfolio {
  position: relative;
  overflow: hidden;
}


/* Ensure all section containers and content layers are positioned cleanly above particles */
section > .container,
section > .container-fluid,
.section > .container,
.section-sm > .container,
.section-cta > .container,
.site-footer > .container,
.page-banner > .container,
.page-banner-content,
.hero-container,
.promise-section .container,
.empowering-section .container,
.expertise-section .container,
.contact-reach-section .container,
.projects-split-container,
.testimonials-container,
.projects-full-wrapper {
  position: relative;
  z-index: 3;
}


/* ==========================================================================
   Scroll-to-Top Floating Button with Circular Progress (like nexcrestit.com)
   ========================================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #141722;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.scroll-to-top:hover {
  background: #1c1f2e;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 82, 102, 0.4);
}


.scroll-progress-circle {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  pointer-events: none;
}


.scroll-progress-circle path {
  fill: none;
  stroke: #ff5266;
  stroke-width: 4px;
  stroke-linecap: round;
  transition: stroke-dashoffset 15ms linear;
}


.scroll-arrow-icon {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}


.scroll-to-top:hover .scroll-arrow-icon {
  transform: translateY(-2px);
}


/* ==========================================================================
   Scroll Reveal Entrance Animations (like nexcrestit.com)
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}


.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}


.delay-1 { transition-delay: 0.12s; }

.delay-2 { transition-delay: 0.24s; }

.delay-3 { transition-delay: 0.36s; }

.delay-4 { transition-delay: 0.48s; }


/* Responsive updates for the 5 sections */
@media screen and (max-width: 991px) {
  .promise-cards-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .empowering-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .empowering-text-col {
    padding-left: 0;
  }

  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-box-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-box-container {
    padding: 40px 24px;
  }

  .contact-image-side {
    align-items: center;
  }

  .projects-carousel-section {
    background-size: cover !important;
    background-position: center center !important;
    background-color: #0b111e !important;
    padding: 100px 0 90px !important;
    overflow: hidden;
  }

  .projects-split-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    min-width: 0;
  }

  .projects-left-col {
    padding-right: 0;
    min-width: 0;
  }

  .projects-right-col {
    min-width: 0;
    max-width: 100%;
  }

  .project-slide-item {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

}


@media screen and (max-width: 767px) {
  .title-dark,
  .empowering-title,
  .contact-main-title {
    font-size: 30px;
  }

  .projects-title-white,
  .portfolio-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-break: break-word;
  }

  .subtitle-orange {
    font-size: 13px;
  }

  .projects-carousel-section {
    background-size: cover !important;
    background-position: center center !important;
    background-color: #0b111e !important;
    padding: 70px 0 65px !important;
    overflow: hidden;
  }

  .projects-split-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  .projects-left-col {
    display: contents !important;
  }

  .projects-header-block {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .projects-desc-gray {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
    color: #94a3b8 !important;
  }

  .projects-right-col {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .projects-track-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .projects-track {
    display: flex !important;
    gap: 16px !important;
    min-width: 0 !important;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  .project-slide-item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .project-mockup-card {
    height: auto !important;
    aspect-ratio: 1600 / 820 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .mockup-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }

  .projects-slider-controls {
    order: 3;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    padding: 0 2px !important;
  }

  .slide-counter-fraction {
    font-size: 18px !important;
    color: #94a3b8 !important;
  }

  .slide-counter-fraction strong {
    font-size: 26px !important;
    color: #ffffff !important;
  }

  .slider-arrows-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .slider-nav-arrow {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  .slider-nav-arrow:active {
    background: rgba(255, 114, 84, 0.3) !important;
    transform: scale(0.92) !important;
  }

  .slider-nav-arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  .projects-cta-wrap {
    order: 4;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .btn-all-projects {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  .promise-icon-box {
    width: 88px;
    height: 88px;
    border-radius: 24px;
  }

  .promise-svg {
    width: 42px;
    height: 42px;
  }

  .call-float-badge {
    padding: 8px 16px;
    gap: 12px;
  }

  .call-number {
    font-size: 17px;
  }

  .call-icon-circle {
    width: 42px;
    height: 42px;
  }

  .call-icon-circle svg {
    width: 20px;
    height: 20px;
  }

  .about-visual-comp {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "photo photo"
      "stat1 stat2"
      "location location" !important;
    gap: 12px !important;
    position: static !important;
    max-width: 600px !important;
    margin: 14px auto 0 !important;
    width: 100% !important;
  }

  .about-main-img {
    grid-area: photo !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  .about-stat-pill {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(16, 26, 37, 0.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 1 !important;
  }

  .about-stat-pill.top-right {
    grid-area: stat1 !important;
  }

  .about-stat-pill.bottom-left {
    grid-area: stat2 !important;
  }

  .about-stat-pill .stat-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  .about-stat-pill .stat-num {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #101a25 !important;
    letter-spacing: -0.01em !important;
  }

  .about-stat-pill .stat-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    white-space: normal !important;
  }

  .about-location-tag-wrap {
    grid-area: location !important;
    margin: 2px 0 0 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .about-location-tag {
    margin-top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f2 100%) !important;
    border: 1px solid rgba(234, 42, 58, 0.16) !important;
    border-radius: 50px !important;
    color: #ea2a3a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(234, 42, 58, 0.06) !important;
    gap: 8px !important;
  }

  .about-location-tag i {
    font-size: 14px !important;
    color: #ea2a3a !important;
  }

  .industry-card-new {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .industry-card-new.no-img {
    padding: 22px 18px 20px;
    min-height: auto;
  }

}



/* ==========================================================================
   MULTI-PAGE TEMPLATE EXTENSION STYLES
   Inner Page Banners, Breadcrumbs, Components, Cards & Accordions
   ========================================================================== */

:root {
  --primary: #ff5266;
  --primary-hover: #e03b50;
  --primary-light: rgba(255, 82, 102, 0.09);
  --secondary: #0088ff;
  --secondary-hover: #0066cc;
  --secondary-light: rgba(0, 136, 255, 0.08);
}


.gradient-text-coral {
  background: var(--gradient-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}


.badge-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--primary-light);
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 14px;
}


.badge-subtitle.cyan {
  color: #00bfff;
  background: rgba(0, 191, 255, 0.12);
}


.badge-subtitle.orange {
  color: #ff8c42;
  background: rgba(255, 140, 66, 0.12);
}


.badge-subtitle.green {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.12);
}


/* Page Banner */
.page-banner {
  background-color: #0d061a;
  background-image: url('assets/espina-bg.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding: 150px 0 200px;
  position: relative;
  overflow: hidden;
  text-align: center;
}


.page-banner-content {
  position: relative;
  z-index: 5;
  max-width: 840px;
  margin: 0 auto;
}


.page-banner-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}


.page-banner-lead {
  font-size: 16px;
  color: #ffffff !important;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 22px;
  opacity: 0.96;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}


.breadcrumb-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 6, 26, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 6;
}


.breadcrumb-nav a,
.breadcrumb-nav a:link,
.breadcrumb-nav a:visited {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
  opacity: 0.95;
}


.breadcrumb-nav a:hover {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline;
}


.breadcrumb-nav span {
  color: #ffffff !important;
  font-weight: 600;
}


.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400;
}


/* Feature Grid & Cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}


.feature-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 30px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(16, 26, 37, 0.08);
}


.feature-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 26px;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
}


.feature-card:hover .feature-icon-wrap {
  transform: scale(1.1) rotate(4deg);
}


.feature-icon-wrap.icon-cyan,
.feature-icon-wrap.box-blue {
  background: linear-gradient(180deg, #00d2ff 0%, #0070ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 114, 255, 0.32);
}


.feature-icon-wrap.icon-coral,
.feature-icon-wrap.icon-orange,
.feature-icon-wrap.box-orange {
  background: linear-gradient(180deg, #ffa03b 0%, #ff4c68 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(255, 76, 104, 0.32);
}


.feature-icon-wrap.icon-green,
.feature-icon-wrap.box-green {
  background: linear-gradient(180deg, #b6ea46 0%, #6ebc24 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(110, 188, 36, 0.32);
}


.feature-title {
  font-size: 20px;
  font-weight: 700;
  color: #101a25;
  margin-bottom: 10px;
}


.feature-desc {
  font-size: 15px;
  color: #556270;
  line-height: 1.6;
}


/* Services Cards Grid */
.services-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 32px;
}


.service-item-card {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.service-item-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(16, 26, 37, 0.09);
}


.service-card-img-wrap {
  height: 220px;
  overflow: hidden;
  position: relative;
}


.service-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}


.service-item-card:hover .service-card-img-wrap img {
  transform: scale(1.06);
}


.service-card-body {
  padding: 30px 26px;
}


/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}


.team-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 16px rgba(16, 26, 37, 0.04);
  text-align: center;
  transition: all 0.3s ease;
}


.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(16, 26, 37, 0.08);
}


/* Accordion (FAQ) */
.faq-accordion {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.accordion-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s ease;
}


.accordion-header {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}


.accordion-title {
  font-size: 17.5px;
  font-weight: 700;
  color: #101a25;
}


.accordion-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.25s ease;
}


.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
  background: rgba(255, 82, 102, 0.12);
  color: var(--primary);
}


.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 26px;
  color: #64748b;
  line-height: 1.65;
}


.accordion-item.is-open .accordion-content {
  padding-bottom: 22px;
}


/* Filter Tabs */
.filter-btn-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}


.filter-btn {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}


.filter-btn:hover,
.filter-btn.active {
  background: var(--gradient-coral);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 82, 102, 0.3);
}


/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}


.blog-card {
  background: #ffffff;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 16px rgba(16, 26, 37, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}


.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 26, 37, 0.08);
}


.blog-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background-color: #f8fafc;
}


.blog-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}


.blog-card:hover .blog-thumb-wrap img {
  transform: scale(1.06);
}


.blog-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(16, 26, 37, 0.82);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: 50px;
  z-index: 2;
}


.blog-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


.blog-meta {
  display: none !important;
}


.blog-title {
  font-size: 19px;
  font-weight: 700;
  color: #101a25;
  line-height: 1.35;
  margin-bottom: 12px;
}


.blog-card p,
.blog-body p {
  color: #556270 !important;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}


.blog-title a {
  color: #101a25;
  text-decoration: none;
  transition: color 0.2s ease;
}


.blog-title a:hover {
  color: var(--primary);
}


.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  margin-top: auto;
  text-decoration: none;
  transition: gap 0.2s ease;
}


.blog-read-more:hover {
  gap: 10px;
}


/* Floating WhatsApp Badge */
.floating-whatsapp {
  display: none !important;
}


.whatsapp-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
  position: relative;
  transition: transform 0.2s ease;
  text-decoration: none;
}


.whatsapp-btn:hover {
  transform: scale(1.1);
}


.whatsapp-icon {
  width: 32px;
  height: 32px;
}


.whatsapp-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff3b30;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}


/* Pill Input Wrap */
.pill-input-wrap {
  display: flex;
  align-items: center;
  background: #f1f3f7;
  border: 1.5px solid transparent;
  border-radius: 50px;
  padding: 14px 22px;
  gap: 14px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}


.pill-input-wrap:focus-within {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 82, 102, 0.12);
}


.pill-input-wrap input,
.pill-input-wrap select,
.pill-input-wrap textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #101a25;
  outline: none;
}


/* Subpage Clean Light Background Helper */
.bg-light { background-color: #f8fafc !important; color: #101a25; }

.bg-white { background-color: #ffffff !important; color: #101a25; }

.text-dark { color: #101a25 !important; }


/* ========================================================
   CAREERS & INTERNSHIP STYLES
   ======================================================== */
.internship-benefits-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  overflow: hidden;
  margin: 40px 0 60px;
}


.internship-benefit-item {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(16, 26, 37, 0.06);
  transition: all 0.3s ease;
}


.internship-benefit-item:last-child {
  border-right: none;
}


.internship-benefit-item:hover {
  background: #fff8f8;
  transform: translateY(-2px);
}


.internship-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 82, 102, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}


.internship-benefit-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: #101a25;
  line-height: 1.35;
  margin: 0;
}


.internship-benefit-item p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}


/* ========================================================
   ENHANCED INTERNSHIP DETAILS SECTION (ELIGIBILITY, CURRICULUM, QUOTE)
   ======================================================== */
.internship-details-layout {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 0.95fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 30px;
  margin-bottom: 20px;
}


.internship-detail-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 38px 32px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.internship-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(16, 26, 37, 0.09);
  border-color: rgba(255, 82, 102, 0.3);
}


.internship-detail-card .badge-subtitle {
  align-self: flex-start;
  margin-bottom: 14px;
}


.internship-detail-card-title {
  font-size: 24px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}


.internship-detail-card-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #556270;
  margin: 0 0 22px;
}


/* --- Eligibility Qualifications Grid --- */
.eligibility-tags-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}


.eligibility-tag-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  transition: all 0.25s ease;
}


.eligibility-tag-item:hover {
  background: #ffffff;
  border-color: rgba(0, 129, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 129, 255, 0.08);
  transform: translateX(4px);
}


.eligibility-tag-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 129, 255, 0.1);
  color: #0081ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.eligibility-highlight-box {
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #15803d;
  line-height: 1.45;
}


.eligibility-highlight-box .highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  flex-shrink: 0;
}


/* --- Curriculum Interactive List --- */
.curriculum-list-enhanced {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.curriculum-list-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.07);
  box-shadow: 0 2px 8px rgba(16, 26, 37, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.curriculum-list-item:hover {
  background: #fff8f8;
  border-color: rgba(255, 82, 102, 0.3);
  transform: translateX(5px);
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.08);
}


.curriculum-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 82, 102, 0.1);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}


.curriculum-list-item:hover .curriculum-item-icon {
  transform: scale(1.08);
  background: #ff5266;
  color: #ffffff;
}


.curriculum-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #101a25;
  line-height: 1.35;
}


/* --- Action / Tech Journey Quote Card --- */
.action-quote-card {
  background: linear-gradient(145deg, #0e1724 0%, #172437 60%, #1e334a 100%);
  border-radius: 24px;
  padding: 40px 32px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(14, 23, 36, 0.25);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.action-quote-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.35) 0%, rgba(255, 82, 102, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}


.action-quote-card::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(0, 129, 255, 0.25) 0%, rgba(0, 129, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}


.journey-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 20px;
  align-self: flex-start;
}


body.subpage .action-quote-card h3,
body.subpage .action-quote-card .journey-card-heading,
.action-quote-card .journey-card-heading {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.25;
  color: #ffffff !important;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
}


.journey-card-heading .gradient-text-coral {
  background: linear-gradient(90deg, #ff5266 0%, #ff753a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}


.journey-card-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 0 22px;
  position: relative;
  z-index: 2;
}


.journey-perks-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
  position: relative;
  z-index: 2;
}


.journey-perk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e2e8f0;
}


.journey-perk-row svg {
  color: #ff5266;
  flex-shrink: 0;
}


.btn-journey-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 50px;
  background: linear-gradient(90deg, #ff5266 0%, #ff753a 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255, 82, 102, 0.4);
  transition: all 0.35s ease;
  position: relative;
  z-index: 2;
  margin-top: auto;
}


.btn-journey-apply:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 82, 102, 0.55);
  color: #ffffff;
}


.journey-trust-note {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}


/* Backward compatibility */
.internship-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}


.internship-pill {
  background: #f1f5f9;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #e2e8f0;
}


.internship-check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.internship-check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-body);
  font-weight: 500;
}


.internship-check-list li svg,
.internship-check-list li i {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
}


.internship-quote-card {
  background: linear-gradient(135deg, #101a25 0%, #1e2d3d 100%);
  border-radius: 24px;
  padding: 40px 32px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}


.internship-handwriting-quote {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.01em;
}


.internship-handwriting-quote span {
  color: var(--primary);
  display: block;
}


/* ========================================================
   CAREERS & JOB OPENINGS ENHANCED STYLES
   ======================================================== */
.careers-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}


.career-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}


.career-stat-box:last-child {
  border-right: none;
}


.career-stat-box .stat-number {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}


.career-stat-box .stat-star {
  color: #ffb703;
  font-size: 20px;
}


.career-stat-box .stat-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}


.job-layout {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 44px;
  align-items: start;
}


.job-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}


.job-count-badge {
  background: rgba(255, 82, 102, 0.1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 82, 102, 0.2);
}


/* Toolbar: Filter Pills & Search */
.jobs-toolbar-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 28px;
  box-shadow: 0 6px 20px rgba(16, 26, 37, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


.job-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}


.job-filter-btn {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid rgba(16, 26, 37, 0.06);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.job-filter-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}


.job-filter-btn.active {
  background: var(--gradient-coral);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.35);
}


.job-filter-btn .filter-count {
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}


.job-filter-btn:not(.active) .filter-count {
  background: rgba(16, 26, 37, 0.08);
  color: #475569;
}


.job-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid rgba(16, 26, 37, 0.1);
  border-radius: 50px;
  padding: 8px 18px;
  min-width: 250px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


.job-search-box:focus-within {
  border-color: #0070ff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 112, 255, 0.15);
}


.job-search-box svg {
  color: #94a3b8;
  flex-shrink: 0;
}


.job-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #101a25;
  width: 100%;
}


.job-search-box input::placeholder {
  color: #94a3b8;
}


.job-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Modernized Job Card */
.job-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}


.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-coral);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16, 26, 37, 0.09);
  border-color: rgba(255, 82, 102, 0.35);
}


.job-card:hover::before {
  opacity: 1;
}


.job-card-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}


.job-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  transition: transform 0.3s ease;
}


.job-card:hover .job-card-icon {
  transform: scale(1.08) rotate(3deg);
}


.icon-blue { background: rgba(0, 112, 255, 0.1); color: #0070ff; }

.icon-purple { background: rgba(147, 51, 234, 0.1); color: #9333ea; }

.icon-orange { background: rgba(255, 117, 58, 0.1); color: #ff753a; }

.icon-emerald { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.icon-fuchsia { background: rgba(217, 70, 239, 0.1); color: #d946ef; }


.job-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.35;
  margin: 0 0 6px;
  transition: color 0.25s ease;
}


.job-card:hover .job-card-title {
  color: var(--primary);
}


.job-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}


.job-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}


.pill-dept { background: #eff6ff; color: #1d4ed8; }

.pill-type { background: #f0fdf4; color: #15803d; }

.pill-hybrid { background: #fdf2f8; color: #be185d; }

.pill-salary { background: #fffbeb; color: #b45309; }


.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #556270;
}


.job-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.meta-sep {
  color: #cbd5e1;
}


.job-apply-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-coral);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.3);
  transition: all 0.3s ease;
}


.job-apply-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 82, 102, 0.45);
  color: #ffffff !important;
}


/* Modern Sticky Sidebar */
.job-sidebar-card {
  position: sticky;
  top: 100px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.05);
}


.job-sidebar-img-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}


.job-sidebar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}


.job-sidebar-card:hover .job-sidebar-img {
  transform: scale(1.05);
}


.job-sidebar-img-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(16, 26, 37, 0.88);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}


.job-sidebar-dark {
  background: #101a25;
  color: #ffffff;
  padding: 24px 28px;
}


.job-sidebar-dark h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
}


.job-sidebar-dark p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}


.job-sidebar-benefits {
  padding: 26px 28px;
}


.job-benefit-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}


.job-benefit-item:last-child {
  margin-bottom: 22px;
}


.job-benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 82, 102, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}


.job-benefit-content h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #101a25;
}


.job-benefit-content p {
  font-size: 13.5px;
  color: #556270;
  margin: 0;
  line-height: 1.5;
}


.job-sidebar-footer {
  padding: 0 28px 26px;
  text-align: center;
}


.job-sidebar-contact {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.5;
}


.job-sidebar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}


/* Culture Bento Grid Section */
.careers-culture-section {
  padding: 100px 0 110px;
  background: #f8fafc;
  position: relative;
}


.culture-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 48px;
}


.culture-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 34px 28px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.03);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}


.culture-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 18px 40px rgba(16, 26, 37, 0.08);
}


.culture-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}


.culture-card h4 {
  font-size: 19px;
  font-weight: 800;
  color: #101a25;
  margin: 0 0 10px;
  line-height: 1.35;
}


.culture-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #556270;
  margin: 0;
}


/* 4-Stage Hiring Journey Section */
.careers-hiring-section {
  padding: 100px 0 110px;
  background: #ffffff;
  position: relative;
}


.hiring-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}


.hiring-step-card {
  background: #f8fafc;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 32px 24px;
  position: relative;
  transition: all 0.35s ease;
}


.hiring-step-card:hover {
  background: #ffffff;
  transform: translateY(-6px);
  border-color: rgba(0, 112, 255, 0.35);
  box-shadow: 0 16px 36px rgba(0, 112, 255, 0.08);
}


.hiring-step-num {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0, 112, 255, 0.15);
  margin-bottom: 16px;
}


.hiring-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0070ff;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(16, 26, 37, 0.04);
}


.hiring-step-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin: 0 0 10px;
  line-height: 1.35;
}


.hiring-step-card p {
  font-size: 14px;
  color: #556270;
  line-height: 1.65;
  margin: 0;
}


/* ========================================================
   BLOG DETAIL & ARCHIVE STYLES
   ======================================================== */
.blog-detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}


.blog-detail-article {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  padding: 40px;
  overflow: hidden;
}


.blog-detail-img-wrap {
  width: 100%;
  max-width: 660px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto 30px;
  background-color: #f8fafc;
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.06);
}


.blog-detail-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}


.blog-detail-meta-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16, 26, 37, 0.06);
  flex-wrap: wrap;
}


.blog-detail-article h1,
.blog-detail-article h2 {
  font-size: 28px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.3;
  margin: 0 0 20px;
}


.blog-detail-article p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 22px;
}


.blog-quote-highlight {
  background: #fff5f6;
  border-left: 4px solid var(--primary);
  padding: 24px 28px;
  border-radius: 0 16px 16px 0;
  margin: 32px 0;
  font-style: italic;
  font-size: 16.5px;
  color: #101a25;
}


.blog-sidebar-box {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 22px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(16, 26, 37, 0.03);
}


.blog-sidebar-box h4 {
  font-size: 18px;
  font-weight: 700;
  color: #101a25;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 12px;
}


.blog-sidebar-box h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--gradient-coral);
  border-radius: 2px;
}


.blog-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.blog-sidebar-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-body);
  text-decoration: none;
  font-size: 14.5px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(16, 26, 37, 0.08);
  transition: color 0.2s ease;
}


.blog-sidebar-list li a:hover {
  color: var(--primary);
}


/* ========================================================
   CONTACT DETAILS PAGE EXTENSIONS
   ======================================================== */
.contact-grid-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}


.contact-card-modern {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  padding: 34px 24px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(16, 26, 37, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}


.contact-card-modern:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 20px 42px rgba(16, 26, 37, 0.09);
}


.contact-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #ffffff;
  margin: 0 auto 20px;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
}


.contact-card-modern:hover .contact-card-icon {
  transform: scale(1.1) rotate(4deg);
}


.contact-card-icon.box-blue {
  background: linear-gradient(180deg, #00d2ff 0%, #0070ff 100%);
  box-shadow: 0 12px 28px rgba(0, 114, 255, 0.32);
}


.contact-card-icon.box-orange {
  background: linear-gradient(180deg, #ffa03b 0%, #ff4c68 100%);
  box-shadow: 0 12px 28px rgba(255, 76, 104, 0.32);
}


.contact-card-icon.box-green {
  background: linear-gradient(180deg, #b6ea46 0%, #6ebc24 100%);
  box-shadow: 0 12px 28px rgba(110, 188, 36, 0.32);
}


.contact-card-icon.box-purple {
  background: linear-gradient(180deg, #c084fc 0%, #8b5cf6 100%);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.32);
}


.contact-card-modern h4 {
  font-size: 17px;
  font-weight: 700;
  color: #101a25;
  margin: 0 0 10px;
}


.contact-card-modern p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


.contact-card-modern a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}


.contact-map-wrapper {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 8px 30px rgba(16, 26, 37, 0.06);
  height: 420px;
  width: 100%;
}


.contact-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


@media (max-width: 1024px) {
  .internship-benefits-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .internship-details-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .job-layout {
    grid-template-columns: 1fr;
  }

  .careers-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .culture-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hiring-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-detail-layout {
    grid-template-columns: 1fr;
  }

  .contact-grid-top {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 640px) {
  .careers-stats-strip {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .career-stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 12px;
  }

  .career-stat-box:last-child {
    border-bottom: none;
  }

  .culture-bento-grid {
    grid-template-columns: 1fr;
  }

  .hiring-steps-grid {
    grid-template-columns: 1fr;
  }

  .jobs-toolbar-card {
    flex-direction: column;
    align-items: stretch;
  }

  .job-search-box {
    min-width: 100%;
  }

  .job-card {
    padding: 20px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .job-card-left {
    align-items: flex-start;
  }

  .internship-benefits-row {
    grid-template-columns: 1fr;
  }

  .contact-grid-top {
    grid-template-columns: 1fr;
  }

  .blog-detail-article {
    padding: 24px 20px;
  }

  .blog-detail-img-wrap {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .job-apply-link {
    width: 100%;
    justify-content: center;
  }

}


/* ========================================================
   ESPINA HOMEPAGE COMPONENT STYLES (INDEX-1 EXTENSIONS)
   Harmonized with index.html Design System & Typography
   ======================================================== */

/* 1. About Home Section */
.about-home-section {
  padding: 95px 0 105px;
  background: #ffffff;
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   ESPINA About Promotional Showcase Banner (Matching Uploaded Graphic Design)
   ========================================================================== */
.about-showcase-card {
  position: relative;
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(16, 26, 37, 0.08);
  border: 1px solid rgba(234, 42, 58, 0.14);
  margin-bottom: 70px;
  padding: 0;
}

.about-card-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.about-decor-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 160px;
}

.about-decor-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 140px;
}

.about-decor-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
}

.about-showcase-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  min-height: 520px;
}

.about-showcase-photo-wrap {
  position: relative;
  padding: 44px 20px 56px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-showcase-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  border: 4px solid #ffffff;
  background: #f8fafc;
}

.about-showcase-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-photo-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(16, 26, 37, 0.9);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.about-photo-badge i {
  color: #ff5266;
}

.about-showcase-content {
  padding: 44px 48px 44px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-banner-eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #101a25;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.about-banner-eyebrow .sep {
  color: #ea2a3a;
  font-weight: 700;
}

.about-banner-eyebrow .highlight {
  color: #ea2a3a;
}

.about-banner-title {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
  color: #101a25;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.about-banner-title .title-accent {
  color: #ea2a3a;
  background: linear-gradient(135deg, #ff753a 0%, #ea2a3a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-banner-lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: #1e293b;
  font-weight: 600;
  margin-bottom: 12px;
}

.about-banner-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #556270;
  margin-bottom: 16px;
}

.about-banner-focus {
  background: #f8fafc;
  border-left: 4px solid #ea2a3a;
  padding: 10px 16px;
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 24px;
}

.about-banner-focus strong {
  color: #ea2a3a;
}

/* 4 Circular Services Row */
.about-banner-services-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
  padding: 18px 0;
  border-top: 1px dashed rgba(234, 42, 58, 0.2);
  border-bottom: 1px dashed rgba(234, 42, 58, 0.2);
}

.about-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.about-service-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5266 0%, #ea2a3a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(234, 42, 58, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-service-item:hover .about-service-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 24px rgba(234, 42, 58, 0.45);
}

.about-service-name {
  font-size: 13px;
  font-weight: 700;
  color: #101a25;
  line-height: 1.3;
}

/* Bottom Contact & Action Bar */
.about-banner-bottom-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.about-web-pill {
  background: linear-gradient(135deg, #ea2a3a 0%, #c41827 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(234, 42, 58, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-web-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(234, 42, 58, 0.5);
}

.about-bar-divider {
  width: 2px;
  height: 32px;
  background: #e2e8f0;
}

.about-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.about-phone-cta:hover {
  transform: translateY(-1px);
}

.about-phone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5266 0%, #ea2a3a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(234, 42, 58, 0.3);
}

.about-phone-text {
  display: flex;
  flex-direction: column;
}

.about-phone-text .phone-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-phone-text .phone-num {
  font-size: 16px;
  font-weight: 800;
  color: #101a25;
  letter-spacing: 0.2px;
}

.about-banner-buttons {
  margin-left: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media screen and (max-width: 1080px) {
  .about-showcase-inner {
    grid-template-columns: 1fr;
  }
  .about-showcase-photo-wrap {
    padding: 36px 30px 0 30px;
  }
  .about-showcase-photo-frame {
    min-height: 320px;
    max-height: 450px;
  }
  .about-showcase-content {
    padding: 30px 30px 44px;
  }
  .about-banner-buttons {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
  }
}

@media screen and (max-width: 600px) {
  .about-banner-title {
    font-size: 26px;
  }
  .about-banner-eyebrow {
    font-size: 13px;
    flex-wrap: wrap;
  }
  .about-banner-services-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .about-banner-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .about-bar-divider {
    display: none;
  }
}

.about-home-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}


.about-home-content .subtitle-orange {
  margin-bottom: 8px;
}


.about-home-content .title-dark {
  margin-bottom: 20px;
}


.about-home-content .about-lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: #101a25;
  font-weight: 600;
  margin-bottom: 16px;
}


.about-home-content p {
  font-size: 15px;
  line-height: 1.65;
  color: #70798b;
  margin-bottom: 28px;
}


.about-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 36px;
}


.about-highlight-card {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}


.about-highlight-card:hover {
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 14px 30px rgba(255, 82, 102, 0.08);
  transform: translateY(-4px);
}


.about-highlight-card i {
  font-size: 20px;
  color: #ff5266;
  background: rgba(255, 82, 102, 0.1);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.about-highlight-card h5 {
  font-size: 16px;
  font-weight: 700;
  color: #101a25;
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}


.about-highlight-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #70798b;
  margin: 0;
}


.about-visual-comp {
  position: relative;
}


.about-main-img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  display: block;
}


.about-stat-pill {
  position: absolute;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 22px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 2;
}


.about-stat-pill.top-right {
  top: -24px;
  right: -24px;
}


.about-stat-pill.bottom-left {
  bottom: -24px;
  left: -24px;
}


.about-stat-pill .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


.about-stat-pill .stat-num {
  font-size: 26px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.1;
  letter-spacing: -0.02em;
}


.about-stat-pill .stat-label {
  font-size: 12px;
  font-weight: 700;
  color: #70798b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.about-location-tag {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #fef2f2;
  border-radius: 50px;
  color: #ff5266;
  font-size: 14px;
  font-weight: 700;
}


/* 2. Core Focus 4-Columns Section */
.core-focus-section {
  padding: 95px 0 105px;
  background: #f8fafc;
  position: relative;
  z-index: 5;
}


.core-focus-4col-container {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}


.core-focus-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 12px;
}


.core-focus-intro .subtitle-orange {
  margin-bottom: 8px;
}


.core-focus-intro .title-dark {
  font-size: 42px;
  line-height: 1.18;
  margin-bottom: 16px;
  color: #101a25;
  font-weight: 800;
  letter-spacing: -0.02em;
}


.core-focus-intro-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #70798b;
  margin-bottom: 22px;
}


.intro-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}


.intro-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}


.intro-highlight-item i {
  font-size: 15px;
  color: #ff5266;
}


.core-focus-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 24px;
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}


.core-focus-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}


.core-focus-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 82, 102, 0.1);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: all 0.35s ease;
}


.core-focus-card:hover .core-focus-icon {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  color: #ffffff;
  transform: scale(1.08) rotate(3deg);
}


.core-focus-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #101a25;
  letter-spacing: -0.2px;
  line-height: 1.3;
}


.core-focus-card p {
  font-size: 15px;
  line-height: 1.65;
  color: #70798b;
  margin-bottom: 20px;
}


.core-focus-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}


.core-focus-features li {
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}


.core-focus-features li i {
  color: #ff5266;
  font-size: 13px;
}


.core-focus-card .btn-outline,
.about-home-section .btn-outline {
  border-color: rgba(16, 26, 37, 0.22) !important;
  color: #101a25 !important;
  background: #f8fafc !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16, 26, 37, 0.04);
  transition: all 0.3s ease;
}


.core-focus-card .btn-outline:hover,
.about-home-section .btn-outline:hover {
  background: var(--gradient-coral) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(255, 82, 102, 0.35);
  transform: translateY(-2px);
}


/* 3. OUR SERVICES Dark Blue Section */
.our-services-section {
  padding: 105px 0 115px;
  background-color: #061124 !important;
  background-image: radial-gradient(circle at 50% 15%, #0f254e 0%, #081733 55%, #040c1c 100%) !important;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}


.services-drop-bombardment-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


.our-services-section .container {
  position: relative;
  z-index: 3;
}


.our-services-section::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}


.our-services-section::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -100px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}


.our-services-section .container {
  position: relative;
  z-index: 2;
}


.services-dark-header {
  text-align: center;
  margin-bottom: 50px;
}


.services-dark-header .projects-sub-tag {
  margin-bottom: 8px;
}


.services-dark-header .projects-title-white {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 10px 0;
}


.services-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}


.service-card-new {
  background: #0d1e3d;
  background: rgba(13, 30, 61, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 24px;
  padding: 36px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  position: relative;
  box-shadow: 0 14px 34px rgba(2, 8, 20, 0.45);
}


.service-card-new:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 22px 48px -10px rgba(2, 8, 20, 0.65), 0 0 32px rgba(0, 140, 255, 0.22);
  transform: translateY(-8px);
  background: #132a54;
  background: rgba(19, 42, 84, 0.94);
}


.service-card-badge {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 26px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  letter-spacing: 1px;
  transition: all 0.35s ease;
  user-select: none;
}


.service-card-new:hover .service-card-badge {
  color: rgba(255, 82, 102, 0.4);
  transform: scale(1.08);
}


.service-card-new .service-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 82, 102, 0.12);
  border: 1px solid rgba(255, 82, 102, 0.25);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: all 0.35s ease;
}


.service-card-new:hover .service-icon {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(255, 82, 102, 0.35);
  transform: scale(1.08);
}


.service-card-new h3 {
  font-size: 22px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
  line-height: 1.3;
  transition: color 0.3s ease;
}


.service-card-new p {
  font-size: 15px;
  line-height: 1.65;
  color: #94a3b8;
  margin-bottom: 22px;
}


.service-feature-pills {
  list-style: none;
  padding: 18px 0 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.service-feature-pills li {
  font-size: 13.5px;
  font-weight: 500;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 9px;
}


.service-feature-pills li i {
  color: #ff5266;
  font-size: 12px;
}


.service-explore-link {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  transition: all 0.3s ease;
  text-decoration: none;
}


.service-explore-link i {
  color: #ff5266;
  font-size: 13px;
  transition: transform 0.3s ease;
}


.service-card-new:hover .service-explore-link {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 82, 102, 0.35);
}


.service-card-new:hover .service-explore-link i {
  color: #ffffff;
  transform: translateX(4px);
}


/* 4. WHY ESPINA? Section */
.why-espina-section {
  padding: 95px 0 105px;
  background: #fffaf9;
  position: relative;
  z-index: 5;
}


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


.why-espina-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 34px 28px;
  border: 1px solid #f1e5e5;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}


.why-espina-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 82, 102, 0.09);
  border-color: rgba(255, 82, 102, 0.3);
}


.why-espina-card .why-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 82, 102, 0.1);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}


.why-espina-card h4 {
  font-size: 20px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  line-height: 1.3;
}


.why-espina-card p {
  font-size: 15px;
  line-height: 1.65;
  color: #70798b;
  margin: 0;
}


/* 5. HOW WE WORK Section (7 Columns) */
.process-section-new {
  padding: 95px 0 105px;
  background: #ffffff;
  position: relative;
  z-index: 5;
}


.process-cards-7col {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 45px;
}


.process-card-7col {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  min-height: 140px;
}


.process-card-7col:not(.active):hover {
  transform: translateY(-8px);
  border-color: rgba(255, 82, 102, 0.45);
  box-shadow: 0 16px 36px rgba(255, 82, 102, 0.12);
}


.process-num-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f8fafc;
  color: #ff5266;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}


.process-card-7col:not(.active):hover .process-num-circle {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.08);
}


.process-card-7col h4 {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin: 0 0 8px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}


.process-card-7col:not(.active):hover h4 {
  color: #ff5266;
}


.process-card-7col p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #70798b;
  margin: 0;
}


.process-card-7col.active {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-8px);
  box-shadow: 0 20px 42px rgba(255, 82, 102, 0.32);
}


.process-card-7col.active .process-num-circle {
  background: #ffffff;
  color: #ff5266;
  border-color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}


.process-card-7col.active h4 {
  color: #ffffff;
}


.process-card-7col.active p {
  color: rgba(255, 255, 255, 0.95);
}


/* 6. Start Your Project CTA Banner */
.cta-project-banner,
#final-cta {
  padding: 105px 0 115px;
  background-color: #061124 !important;
  background-image: 
    radial-gradient(circle at 85% 20%, rgba(0, 141, 255, 0.28) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(255, 82, 102, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 50% 15%, #102a56 0%, #091b38 55%, #040d1c 100%),
    url('assets/pattern-5.webp') !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 141, 255, 0.15);
  border-bottom: 1px solid rgba(0, 141, 255, 0.15);
}

.cta-project-banner::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 141, 255, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.cta-project-banner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.18) 0%, transparent 70%);
  pointer-events: none;
}


.cta-project-box {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}


.cta-project-box .projects-title-white {
  font-size: 42px;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.2;
}


.cta-project-box .cta-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 36px;
}


.cta-action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}


.btn-whatsapp {
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}


.btn-whatsapp:hover {
  background-color: #1ebe5d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}


.cta-trust-row {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.cta-trust-item {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}


.cta-trust-item i {
  color: #ff753a;
  font-size: 15px;
}


/* 7. Portfolio Video Section */
#video-portfolio,
.portfolio.section {
  padding: 100px 0 110px;
  background-color: #061122 !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(255, 82, 102, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0, 141, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #0c1a32 0%, #061122 100%),
    url('assets/pattern-5.webp') !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 141, 255, 0.12);
  border-bottom: 1px solid rgba(0, 141, 255, 0.12);
}

.portfolio-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 3;
}

.portfolio-content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.portfolio-title {
  font-size: 46px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 16px;
}

.portfolio-content p {
  font-size: 16px;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 680px;
  margin: 0 auto;
}

/* 7. Portfolio Video Cards */
.portfolio-video-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #000000;
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}


.portfolio-video-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}


.portfolio-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.portfolio-video-wrap .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff753a 0%, #ea2a3a 100%);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(234, 42, 58, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 3;
}

.portfolio-video-wrap .video-play-btn::before,
.portfolio-video-wrap .video-play-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(234, 42, 58, 0.45);
  z-index: -1;
  animation: playBtnPulse 2s infinite ease-out;
  pointer-events: none;
}

.portfolio-video-wrap .video-play-btn::after {
  animation-delay: 0.85s;
}

@keyframes playBtnPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.75);
    opacity: 0;
  }
}

.portfolio-video-wrap .video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 12px 35px rgba(234, 42, 58, 0.7);
}


.portfolio-video-wrap.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}


.portfolio-video-wrap .video-tag-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(16, 26, 37, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}


.portfolio-video-wrap .video-yt-link {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.85);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  z-index: 2;
  transition: transform 0.2s ease;
}


.portfolio-video-wrap .video-yt-link:hover {
  transform: scale(1.12);
}


/* 8. Industries We Serve Section with bg-light.png */
.industries-section {
  padding: 100px 0 180px;
  background: #ffffff url('assets/bg-light.png') no-repeat center bottom / 100% 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
  min-height: 440px;
}


@media screen and (max-width: 991px) {
  .industries-section {
    padding: 80px 0 140px;
    background-size: cover;
    background-position: center bottom;
    min-height: 400px;
  }

}


@media screen and (max-width: 640px) {
  .industries-section {
    padding: 65px 0 120px;
    background-size: cover;
    background-position: center bottom;
    min-height: 380px;
  }

}


.industries-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 42px;
  gap: 32px;
}


.industries-header-left {
  max-width: 700px;
}


.industries-header-left .title-dark {
  font-size: 42px;
  font-weight: 800;
  margin-top: 8px;
  margin-bottom: 12px;
  color: #101a25;
  line-height: 1.18;
  letter-spacing: -0.02em;
}


.industries-lead {
  color: #70798b;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}


.industries-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}


.industries-nav-arrows {
  display: flex;
  gap: 10px;
}


.ind-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 82, 102, 0.4);
  background: #ffffff;
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


.ind-arrow-btn:hover {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.3);
}


.industries-carousel-wrapper {
  overflow: hidden;
  position: relative;
  padding: 10px 4px 22px 4px;
  margin: 0 -4px;
  user-select: none;
}


.industries-carousel-track {
  display: flex;
  gap: 18px;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}


/* Modern Industry Sector Pills Grid & Trust Bar */
.industries-pills-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 36px;
  margin-bottom: 34px;
}


.industry-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  padding: 13px 24px;
  border-radius: 50px;
  border: 1.5px solid rgba(16, 26, 37, 0.08);
  font-size: 15px;
  font-weight: 700;
  color: #101a25;
  box-shadow: 0 4px 16px rgba(16, 26, 37, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}


.industry-pill-item i {
  font-size: 16px;
  transition: transform 0.3s ease;
}


.industry-pill-item:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: rgba(255, 82, 102, 0.45);
  box-shadow: 0 12px 28px rgba(255, 82, 102, 0.12);
  color: #ff5266;
}


.industry-pill-item:hover i {
  transform: scale(1.2);
}


.industry-pill-item .icon-coral { color: #ff5266; }

.industry-pill-item .icon-blue { color: #0070ff; }

.industry-pill-item .icon-green { color: #10b981; }

.industry-pill-item .icon-orange { color: #ff8c42; }

.industry-pill-item .icon-teal { color: #06b6d4; }

.industry-pill-item .icon-purple { color: #8b5cf6; }


.industries-trust-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #556270;
  font-weight: 600;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 26, 37, 0.07);
}


.industries-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.industries-trust-bar i {
  color: #10b981;
  font-size: 14px;
}


@media screen and (max-width: 991px) {
  .industries-pills-grid {
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .industry-pill-item {
    font-size: 13.5px;
    padding: 10px 18px;
  }

  .industries-trust-bar {
    gap: 14px;
  }

}


@media screen and (max-width: 640px) {
  .industry-pill-item {
    width: 100%;
    justify-content: flex-start;
  }

  .industries-trust-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

}


/* Static Grid for Industries Section (without sliding) */
.industries-static-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 10px;
}


.industries-static-grid .industry-card-new {
  flex: initial;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}


@media (max-width: 1100px) {
  .industries-static-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

}


@media (max-width: 640px) {
  .industries-static-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}


.industry-card-new {
  flex: 0 0 calc((100% - (3 * 18px)) / 4);
  min-width: calc((100% - (3 * 18px)) / 4);
  max-width: calc((100% - (3 * 18px)) / 4);
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  position: relative;
}


.industry-card-new:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 82, 102, 0.45);
  box-shadow: 0 20px 40px rgba(255, 82, 102, 0.12);
}


/* No-Image Clean Elevated Industry Card Style */
.industry-card-new.no-img {
  padding: 28px 24px 24px;
  justify-content: space-between;
  border: 1.5px solid rgba(16, 26, 37, 0.07);
  min-height: 330px;
}


.ind-noimg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}


.ind-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: #f8fafc;
  border: 1px solid rgba(16, 26, 37, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.industry-card-new.no-img:hover .ind-icon-box {
  transform: scale(1.12) rotate(2deg);
}


.ind-icon-box.icon-coral {
  color: #ff5266;
  background: rgba(255, 82, 102, 0.1);
  border-color: rgba(255, 82, 102, 0.22);
}


.ind-icon-box.icon-blue {
  color: #0070ff;
  background: rgba(0, 112, 255, 0.1);
  border-color: rgba(0, 112, 255, 0.22);
}


.ind-icon-box.icon-green {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.22);
}


.ind-icon-box.icon-orange {
  color: #ff8c42;
  background: rgba(255, 140, 66, 0.1);
  border-color: rgba(255, 140, 66, 0.22);
}


.ind-icon-box.icon-purple {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.22);
}


.ind-icon-box.icon-teal {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.22);
}


.ind-tag-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  background: #f1f5f9;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(16, 26, 37, 0.05);
}


.industry-card-new.no-img .ind-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}


.industry-card-new.no-img .ind-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 16px;
}


.ind-feature-pills {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.ind-feature-pills li {
  font-size: 12.5px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}


.ind-feature-pills li i {
  color: #10b981;
  font-size: 11px;
  flex-shrink: 0;
}


.ind-card-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 26, 37, 0.06);
}


.ind-bottom-link {
  font-size: 13px;
  font-weight: 700;
  color: #ff5266;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}


.industry-card-new.no-img:hover .ind-bottom-link {
  color: #0070ff;
  gap: 10px;
}


.ind-photo-wrap {
  position: relative;
  width: 100%;
  height: 165px;
  overflow: hidden;
  background: #0b0f17;
}


.ind-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}


.industry-card-new:hover .ind-photo-wrap img {
  transform: scale(1.08);
}


.ind-photo-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}


.ind-card-body {
  padding: 22px 20px;
  flex-grow: 1;
}


.ind-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}


.ind-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #70798b;
  margin: 0;
}


.industries-dots-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}


.industries-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}


.industries-dot.active {
  background: #ff5266;
  width: 28px;
  border-radius: 50px;
}


/* 9. Pricing & FAQ Section */
.pricing-faq-section {
  padding: 100px 0 110px;
  background: #ffffff;
  position: relative;
  z-index: 5;
}


.pricing-faq-container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: center;
}


.pricing-box {
  background: linear-gradient(145deg, #101a25 0%, #1c2a38 100%);
  color: #ffffff;
  padding: 54px 44px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(16, 26, 37, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}


.pricing-box::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(50px);
}


.pricing-box h2 {
  color: #ffffff;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}


.pricing-box .pricing-lead-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
}


.pricing-services-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}


.pricing-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
}


.pricing-point i {
  color: #ff5266;
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}


.pricing-sub-note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 28px;
}


.pricing-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}


.pricing-quick-whatsapp {
  color: #25d366;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}


.pricing-quick-whatsapp:hover {
  color: #1ebe5d;
}


.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(16, 26, 37, 0.02);
}


.faq-item h4 {
  padding: 20px 24px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #101a25;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}


.faq-item h4 i {
  color: #ff5266;
  font-size: 14px;
  transition: transform 0.3s ease;
}


.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  color: #70798b;
  font-size: 14.5px;
  line-height: 1.65;
  transition: max-height 0.35s ease, padding 0.35s ease;
}


.faq-item.active {
  border-color: rgba(255, 82, 102, 0.4);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.06);
}


.faq-item.active h4 {
  color: #ff5266;
}


.faq-item.active h4 i {
  transform: rotate(45deg);
}


.faq-item.active .faq-answer {
  max-height: 250px;
  padding-bottom: 20px;
}


/* 10. CTA Banner */
.cta-banner {
  padding: 75px 0;
  background: linear-gradient(135deg, #0e1726 0%, #172338 100%);
  color: #ffffff;
  position: relative;
  z-index: 5;
}


.cta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}


.cta-text {
  display: flex;
  align-items: center;
  gap: 22px;
}


.cta-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 82, 102, 0.15);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}


.cta-headings h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #ffffff;
  letter-spacing: -0.02em;
}


.cta-headings p {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  font-size: 15px;
}


.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


.btn-cta-primary {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
  color: #ffffff;
  padding: 13px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 82, 102, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.btn-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 82, 102, 0.45);
}


.btn-cta-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}


.btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}


/* Responsive Media Queries for index-1 components */
@media (max-width: 1200px) {
  .process-cards-7col {
    display: flex;
    overflow-x: auto;
    padding-bottom: 20px;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .process-card-7col {
    flex: 0 0 210px;
    min-width: 210px;
    scroll-snap-align: start;
  }

  .industry-card-new {
    flex: 0 0 calc((100% - (2 * 18px)) / 3);
    min-width: calc((100% - (2 * 18px)) / 3);
    max-width: calc((100% - (2 * 18px)) / 3);
  }

}


@media (max-width: 1024px) {
  .about-home-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .core-focus-4col-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .core-focus-intro {
    grid-column: span 2;
    padding-right: 0;
    margin-bottom: 12px;
  }

  .services-grid-3,
  .why-espina-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}


@media (max-width: 768px) {
  .page-banner {
    padding: 96px 16px 40px !important;
    background-size: 100% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .page-banner-title {
    font-size: 28px !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
  }

  .page-banner-lead {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
    margin-bottom: 14px !important;
  }

  .core-focus-4col-container {
    grid-template-columns: 1fr;
  }

  .core-focus-intro {
    grid-column: span 1;
  }

  .core-focus-intro .title-dark {
    font-size: 32px;
  }

  .services-grid-3,
  .why-espina-grid {
    grid-template-columns: 1fr;
  }

  .about-highlights-grid {
    grid-template-columns: 1fr;
  }

  .hero-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    background-image: url('banner/home-banner-mobile.png') !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
    padding-top: calc(var(--header-height) + 12px) !important;
    padding-bottom: 60px !important;
  }



  .industries-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .industries-header-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .industry-card-new {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }


  /* Process Section: Exactly One Div at a Time on Mobile, Perfectly Centered */
  .process-cards-7col {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    padding: 10px 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .process-cards-7col::-webkit-scrollbar {
    display: none;
  }

  .process-card-7col {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    box-sizing: border-box;
    border-radius: 22px;
  }

  .process-card-7col .process-num-circle {
    margin: 0 auto 14px;
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .process-card-7col h4 {
    font-size: 20px;
    margin: 0 0 8px 0;
    text-align: center;
  }

  .process-card-7col p {
    font-size: 14px;
    line-height: 1.55;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
  }

  .process-card-7col.active {
    transform: none !important;
  }


  .cta-container {
    flex-direction: column;
    text-align: center;
  }

  .cta-text {
    flex-direction: column;
  }

  .cta-headings h2 {
    font-size: 26px;
  }

}


/* Process Carousel Dots Indicators (for mobile) */
.process-dots-container {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .process-dots-container {
    display: flex;
  }

}

.process-dot-pill {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.process-dot-pill.active {
  width: 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
}


/* ==========================================================================
   Subpages Pure White Theme (Applies to all subpages; Home pages remain dark)
   ========================================================================== */
body.subpage {
  background-color: #ffffff !important;
  color: var(--text-body);
}


body.subpage main#mainContent {
  background-color: #ffffff !important;
}


body.subpage .section {
  background-color: #ffffff !important;
}


body.subpage .section-sm {
  background-color: #ffffff !important;
}


body.subpage .bg-light {
  background-color: #ffffff !important;
}


body.subpage .section-title,
body.subpage .section-heading,
body.subpage h1:not(.page-banner-title),
body.subpage h2,
body.subpage h3,
body.subpage h4 {
  color: #101a25;
}


body.subpage .section-desc,
body.subpage p:not(.page-banner-lead):not(.page-banner *) {
  color: var(--text-body);
}


body.subpage .page-banner-lead,
body.subpage .page-banner p,
body.subpage .page-banner-content p {
  color: #ffffff !important;
  opacity: 0.95;
}


body.subpage .feature-card,
body.subpage .service-item-card,
body.subpage .blog-card,
body.subpage .job-card,
body.subpage .contact-card-modern,
body.subpage .blog-sidebar-box,
body.subpage .job-sidebar-card,
body.subpage .blog-detail-article {
  background-color: #ffffff !important;
  border: 1px solid rgba(16, 26, 37, 0.08);
}


body.subpage .job-sidebar-dark {
  background-color: #ffffff !important;
  color: #101a25 !important;
  border-bottom: 1px solid rgba(16, 26, 37, 0.08);
}


body.subpage .blog-card p,
body.subpage .blog-body p {
  color: #556270 !important;
}


body.subpage .job-sidebar-dark h3 {
  color: #101a25 !important;
}


body.subpage .job-sidebar-dark p {
  color: #556270 !important;
}


body.subpage .internship-quote-card {
  background: #ffffff !important;
  color: #101a25 !important;
  border: 1px solid rgba(16, 26, 37, 0.08) !important;
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
}


body.subpage .internship-handwriting-quote {
  color: #101a25 !important;
}


body.subpage .internship-quote-card p {
  color: #556270 !important;
}


body.subpage .section-cta {
  background: #ffffff !important;
  color: #101a25 !important;
  border-top: 1px solid rgba(16, 26, 37, 0.08);
}


body.subpage .section-cta h2 {
  color: #101a25 !important;
}


body.subpage .section-cta p {
  color: #556270 !important;
}


body.subpage .section-cta.dark-cta,
body.subpage .section-cta.cta-dark-blue {
  background: linear-gradient(135deg, #0e1726 0%, #172338 100%) !important;
  color: #ffffff !important;
  border-top: none !important;
}


body.subpage .section-cta.dark-cta h2,
body.subpage .section-cta.cta-dark-blue h2 {
  color: #ffffff !important;
}


body.subpage .section-cta.dark-cta p,
body.subpage .section-cta.cta-dark-blue p {
  color: rgba(255, 255, 255, 0.75) !important;
}


body.subpage .section-cta.dark-cta .btn-outline,
body.subpage .section-cta.cta-dark-blue .btn-outline {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}


body.subpage .section-cta.dark-cta .btn-outline:hover,
body.subpage .section-cta.cta-dark-blue .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}


body.subpage .section-sm.bg-dark {
  background-color: #ffffff !important;
  color: #101a25 !important;
  border-top: 1px solid rgba(16, 26, 37, 0.08);
}


body.subpage .section-sm.bg-dark h2 {
  color: #101a25 !important;
}


body.subpage .section-sm.bg-dark p {
  color: #556270 !important;
}


body.subpage .btn-outline {
  border-color: rgba(16, 26, 37, 0.2) !important;
  color: #101a25 !important;
}


body.subpage .btn-outline:hover {
  background: #101a25 !important;
  color: #ffffff !important;
  border-color: #101a25 !important;
}


/* Subpage Breadcrumb Pure White Styling */
body.subpage .breadcrumb-nav,
body.subpage .breadcrumb-nav *,
body.subpage .breadcrumb-nav a,
body.subpage .breadcrumb-nav a:link,
body.subpage .breadcrumb-nav a:visited,
body.subpage .breadcrumb-nav span,
body.subpage .breadcrumb-nav .breadcrumb-sep {
  color: #ffffff !important;
}


body.subpage .breadcrumb-nav a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: underline;
}


/* ==========================================================================
   CTA Gradient Banner Section (Multi-Color Wave Ribbon Pattern)
   ========================================================================== */
.cta-gradient-section {
  position: relative;
  background: #ffffff url('assets/project-bg.webp') no-repeat center center / 100% 100% !important;
  min-height: 470px;
  padding: 125px 20px 145px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.cta-gradient-content {
  position: relative;
  z-index: 5;
  max-width: 780px;
  margin: 0 auto;
}


.cta-gradient-section .badge-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  border-radius: 50px;
  background: rgba(0, 212, 214, 0.12);
  border: 1px solid rgba(0, 212, 214, 0.45);
  color: #00d4d6 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 212, 214, 0.18);
}


body.subpage .cta-gradient-section h2,
.cta-gradient-section .cta-gradient-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}


.cta-gradient-title .gradient-text-coral {
  background: linear-gradient(90deg, #ff9a3e 0%, #ff5266 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}


body.subpage .cta-gradient-section p,
.cta-gradient-section .cta-gradient-desc {
  font-size: 17px;
  line-height: 1.7;
  color: #cbd5e1 !important;
  max-width: 640px;
  margin: 0 auto 36px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}


.btn-cta-glow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  background: linear-gradient(90deg, #ff9a3e 0%, #ff5266 100%);
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 82, 102, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.btn-cta-glow:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(255, 82, 102, 0.6), 0 0 25px rgba(255, 154, 62, 0.4);
  color: #ffffff !important;
}


.btn-cta-glow i {
  transition: transform 0.25s ease;
}


.btn-cta-glow:hover i {
  transform: translateX(4px);
}


@media screen and (max-width: 991px) {
  .cta-gradient-section {
    padding: 100px 20px 120px;
    min-height: 440px;
    background-size: cover !important;
  }

  body.subpage .cta-gradient-section h2,
  .cta-gradient-section .cta-gradient-title {
    font-size: 32px;
  }

}


@media screen and (max-width: 767px) {
  .cta-gradient-section {
    padding: 85px 16px 105px;
    min-height: 400px;
    background-size: cover !important;
    background-position: center center;
  }

  body.subpage .cta-gradient-section h2,
  .cta-gradient-section .cta-gradient-title {
    font-size: 26px;
  }

  body.subpage .cta-gradient-section p,
  .cta-gradient-section .cta-gradient-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .btn-cta-glow {
    padding: 13px 30px;
    font-size: 14.5px;
  }

}





/* ==========================================================================
   Blog Social Sharing Bar
   ========================================================================== */
.blog-social-share-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 22px;
  background: #f8fafc;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 14px;
  margin: 24px 0 32px;
}


.blog-social-share-wrap .share-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.blog-social-share-wrap .share-title i {
  color: var(--primary);
  font-size: 15px;
}


.blog-social-share-wrap .share-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


.share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


.share-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  color: #ffffff !important;
}


.share-btn i {
  color: #ffffff !important;
  line-height: 1;
}


.share-btn.share-whatsapp { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); }

.share-btn.share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

.share-btn.share-facebook { background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%); }

.share-btn.share-linkedin { background: #0A66C2; }

.share-btn.share-twitter { background: #0f1419; }

.share-btn.share-copy { background: #475569; }


.share-copy .copy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #101a25;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}


/* ==========================================================================
   Enhanced Blog Detail Sidebar CTA Card
   ========================================================================== */
.blog-sidebar-box.blog-sidebar-cta {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid rgba(0, 129, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.05);
  border-radius: 18px;
  padding: 28px 24px;
  overflow: hidden;
}


.blog-sidebar-box.blog-sidebar-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF5266, #00D4D6, #FF9A3E);
}


.sidebar-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255, 82, 102, 0.1);
  color: #FF5266;
  margin-bottom: 14px;
}


.blog-sidebar-cta h4 {
  font-size: 20px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.35;
  margin-bottom: 12px;
}


.blog-sidebar-cta p {
  color: #556270;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}


.sidebar-cta-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.sidebar-cta-features li {
  font-size: 13.5px;
  font-weight: 600;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
}


.sidebar-cta-features li i {
  color: #22C55E;
  font-size: 13px;
}


/* ==========================================================================
   About Page White CTA Section & Stat Counters
   ========================================================================== */
.about-cta-white {
  position: relative;
  background: #ffffff !important;
  padding: 85px 0;
  border-top: 1px solid rgba(16, 26, 37, 0.08);
  border-bottom: 1px solid rgba(16, 26, 37, 0.08);
  text-align: center;
  overflow: hidden;
}


.about-cta-white .container {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}


.about-cta-white .section-title {
  font-size: 38px;
  font-weight: 800;
  color: #101a25;
  margin: 12px 0 16px;
  line-height: 1.25;
}


.about-cta-white p.cta-desc {
  color: #556270;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 auto 32px;
  max-width: 680px;
}


.stat-counter-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.stat-counter-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(16, 26, 37, 0.08);
}


.stat-number {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}


.stat-label {
  color: #556270 !important;
  font-weight: 700;
  font-size: 14px;
  margin: 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


@media screen and (max-width: 767px) {
  .about-cta-white {
    padding: 60px 0;
  }

  .about-cta-white .section-title {
    font-size: 28px;
  }

  .about-cta-white p.cta-desc {
    font-size: 15px;
  }

  .blog-social-share-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* ==========================================================================
   Our Partners Marquee Section
   ========================================================================== */
.partners-marquee-section {
  position: relative;
  padding: 60px 0 85px;
  background: #f8fafc;
  overflow: hidden;
}


.partners-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}


.partners-marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: partnersMarqueeScroll 28s linear infinite;
  will-change: transform;
}


.partners-marquee-track:hover {
  animation-play-state: paused;
}


.partners-marquee-group {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}


@keyframes partnersMarqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 16px));
  }

}


.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 110px;
  padding: 18px 36px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 20px rgba(16, 26, 37, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}


.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 26, 37, 0.09);
  border-color: rgba(255, 82, 102, 0.35);
}


.partner-card img {
  max-width: 175px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(15%) opacity(0.92);
  transition: filter 0.3s ease, transform 0.3s ease;
}


.partner-card:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}


@media screen and (max-width: 767px) {
  .partners-marquee-section {
    padding: 45px 0 65px;
  }

  .partner-card {
    min-width: 190px;
    height: 90px;
    padding: 14px 24px;
    border-radius: 16px;
  }

  .partner-card img {
    max-width: 135px;
    max-height: 38px;
  }

  .partners-marquee-track {
    gap: 20px;
    animation-duration: 20s;
  }

  .partners-marquee-group {
    gap: 20px;
  }

  @keyframes partnersMarqueeScroll {
    0% {
      transform: translateX(0);
    }

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

  }

}


/* ==========================================================================
   Service Capabilities Section with bg-light.png
   ========================================================================== */
.service-capabilities-section {
  position: relative;
  background: #ffffff url('assets/bg-light.png') no-repeat center bottom / 100% 100%;
  padding: 100px 0 145px;
  overflow: hidden;
}


@media screen and (max-width: 991px) {
  .service-capabilities-section {
    padding: 80px 0 110px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

}


@media screen and (max-width: 767px) {
  .service-capabilities-section {
    padding: 60px 0 85px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

}


/* ==========================================================================
   Technologies We Use - Solar Orbit System
   ========================================================================== */
.tech-orbit-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0 110px;
  overflow: hidden;
}


.tech-orbit-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 40px;
  align-items: center;
}


.tech-orbit-content {
  position: relative;
  z-index: 2;
}


.tech-orbit-content .badge-subtitle {
  margin-bottom: 14px;
}


.tech-orbit-content .section-title {
  margin-bottom: 18px;
  line-height: 1.25;
}


.tech-orbit-desc {
  font-size: 16.5px;
  line-height: 1.75;
  color: #556270;
  margin-bottom: 28px;
}


.tech-feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.tech-feature-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #101a25;
}


.tech-feature-checklist li i {
  color: #00d4d6;
  font-size: 16px;
}


/* Orbit Stage */
.tech-orbit-stage-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 520px;
}


.tech-orbit-stage {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Background Soft Atmosphere Glow */
.tech-orbit-stage::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 62, 0.08) 0%, rgba(0, 212, 214, 0.04) 50%, transparent 75%);
  pointer-events: none;
}


/* The Sun (Center Technologies Core) */
.tech-sun-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin-top: -55px;
  margin-left: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0%, #ffa03b 40%, #ff5266 85%, #e63946 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  box-shadow: 0 0 25px rgba(255, 154, 62, 0.8), 0 0 50px rgba(255, 82, 102, 0.5), 0 0 90px rgba(255, 154, 62, 0.3);
  animation: sunCoronaPulse 4s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.3s ease;
}


.tech-sun-center:hover {
  transform: scale(1.08);
}


.tech-sun-icon {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}


.tech-sun-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}


@keyframes sunCoronaPulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(255, 154, 62, 0.8), 0 0 50px rgba(255, 82, 102, 0.5), 0 0 90px rgba(255, 154, 62, 0.3);
  }

  50% {
    box-shadow: 0 0 35px rgba(255, 154, 62, 1), 0 0 70px rgba(255, 82, 102, 0.75), 0 0 120px rgba(255, 154, 62, 0.5);
  }

}


/* Orbit Rings */
.orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}


.orbit-track-inner {
  width: 270px;
  height: 270px;
  margin-top: -135px;
  margin-left: -135px;
  border: 1.5px dashed rgba(0, 114, 255, 0.28);
}


.orbit-track-outer {
  width: 440px;
  height: 440px;
  margin-top: -220px;
  margin-left: -220px;
  border: 1.5px dashed rgba(255, 82, 102, 0.25);
}


/* Orbiting Nodes (Planets) */
.orbit-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}


.tech-orbit-stage:hover .orbit-planet {
  animation-play-state: paused !important;
}


.planet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(16, 26, 37, 0.1), 0 0 0 1px rgba(16, 26, 37, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: #101a25;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
}


.planet-badge:hover {
  transform: scale(1.15);
  box-shadow: 0 10px 25px rgba(255, 82, 102, 0.3), 0 0 0 1.5px #ff5266;
}


.planet-badge i {
  font-size: 18px;
  transition: transform 0.25s ease;
}


.planet-badge:hover i {
  transform: scale(1.18);
}


/* Inner Orbit Animation (Radius: 135px) */
@keyframes orbitSpinInner {
  0% {
    transform: rotate(0deg) translateX(135px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(135px) rotate(-360deg);
  }

}


.planet-react {
  animation: orbitSpinInner 22s linear infinite;
  animation-delay: 0s;
}


.planet-laravel {
  animation: orbitSpinInner 22s linear infinite;
  animation-delay: -7.33s;
}


.planet-wordpress {
  animation: orbitSpinInner 22s linear infinite;
  animation-delay: -14.66s;
}


/* Outer Orbit Animation (Radius: 220px, Opposite Rotation Direction for Visual Magic) */
@keyframes orbitSpinOuter {
  0% {
    transform: rotate(360deg) translateX(220px) rotate(-360deg);
  }

  100% {
    transform: rotate(0deg) translateX(220px) rotate(0deg);
  }

}


.planet-html5 {
  animation: orbitSpinOuter 30s linear infinite;
  animation-delay: 0s;
}


.planet-css3 {
  animation: orbitSpinOuter 30s linear infinite;
  animation-delay: -7.5s;
}


.planet-shopify {
  animation: orbitSpinOuter 30s linear infinite;
  animation-delay: -15s;
}


.planet-nodejs {
  animation: orbitSpinOuter 30s linear infinite;
  animation-delay: -22.5s;
}


/* Responsive Orbit System */
@media screen and (max-width: 991px) {
  .tech-orbit-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tech-feature-checklist {
    align-items: center;
  }

  .tech-orbit-stage-wrapper {
    margin-top: 30px;
  }

}


@media screen and (max-width: 600px) {
  .tech-orbit-stage {
    width: 340px;
    height: 340px;
  }

  .orbit-track-inner {
    width: 190px;
    height: 190px;
    margin-top: -95px;
    margin-left: -95px;
  }

  .orbit-track-outer {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
  }

  .tech-sun-center {
    width: 86px;
    height: 86px;
    margin-top: -43px;
    margin-left: -43px;
  }

  .tech-sun-icon {
    font-size: 20px;
  }

  .tech-sun-text {
    font-size: 8.5px;
  }

  .planet-badge {
    padding: 6px 11px;
    font-size: 11px;
    gap: 6px;
  }

  .planet-badge i {
    font-size: 15px;
  }

  @keyframes orbitSpinInner {
    0% {
      transform: rotate(0deg) translateX(95px) rotate(0deg);
    }

    100% {
      transform: rotate(360deg) translateX(95px) rotate(-360deg);
    }

  }

  @keyframes orbitSpinOuter {
    0% {
      transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }

    100% {
      transform: rotate(0deg) translateX(150px) rotate(0deg);
    }

  }

}


/* ==========================================================================
   Process Section - Pipeline with Connecting Arrows
   ========================================================================== */
.process-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
  align-items: stretch;
}


.process-step-item {
  position: relative;
  display: flex;
}


.process-step-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}


.process-step-num {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}


.process-step-num.num-coral { color: #ff5266; }

.process-step-num.num-blue { color: #0070ff; }

.process-step-num.num-orange { color: #ffa03b; }

.process-step-num.num-green { color: #2ecc71; }


.process-arrow-indicator {
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(255, 82, 102, 0.4);
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.2);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 10;
  transition: all 0.3s ease;
}


.process-step-item:hover .process-arrow-indicator {
  transform: translateY(-50%) scale(1.15) translateX(3px);
  background: #ff5266;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(255, 82, 102, 0.4);
}


@media screen and (max-width: 991px) {
  .process-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }

  .process-step-item:nth-child(2) .process-arrow-indicator {
    top: auto;
    bottom: -28px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }

  .process-step-item:nth-child(1) .process-arrow-indicator {
    right: -20px;
  }

  .process-step-item:nth-child(3) .process-arrow-indicator {
    right: -20px;
  }

}


@media screen and (max-width: 600px) {
  .process-pipeline-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .process-arrow-indicator {
    top: auto;
    bottom: -24px;
    right: 50%;
    transform: translateX(50%) rotate(90deg) !important;
  }

  .process-step-item:hover .process-arrow-indicator {
    transform: translateX(50%) rotate(90deg) scale(1.15) !important;
  }

}


/* ==========================================================================
   Process Section - Water Droplet Impact & Ripple System
   ========================================================================== */
.process-section-interactive {
  position: relative;
  overflow: hidden;
}


.water-leaping-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}


.water-ball-body {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #00d4d6 40%, #ff5266 85%, #043fff 100%);
  box-shadow: 0 0 16px rgba(0, 212, 214, 0.95), 0 0 32px rgba(255, 82, 102, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  position: relative;
}


.water-ball-body::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(0.5px);
}


.water-ripple-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}


.water-ripple-ring {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}


.water-ripple-ring.ring-1 {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(0, 212, 214, 0.85);
  background: radial-gradient(circle, rgba(0, 212, 214, 0.25) 0%, transparent 70%);
}


.water-ripple-ring.ring-2 {
  width: 170px;
  height: 170px;
  border: 1.5px solid rgba(255, 82, 102, 0.65);
}


.water-ripple-ring.ring-3 {
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 154, 62, 0.45);
}


.water-impact-splash {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}


.splash-bead {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}


.splash-bead.bead-1 { background: #00d4d6; }

.splash-bead.bead-2 { background: #ff5266; }

.splash-bead.bead-3 { background: #ffa03b; }

.splash-bead.bead-4 { background: #043fff; }


/* Trigger Animations on ripple-active */
.process-step-card.ripple-active {
  animation: cardWaterBounce 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  border-color: rgba(255, 82, 102, 0.5) !important;
  box-shadow: 0 16px 40px rgba(255, 82, 102, 0.22) !important;
}


.process-step-card.ripple-active .water-ripple-ring.ring-1 {
  animation: rippleSpread 0.9s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}


.process-step-card.ripple-active .water-ripple-ring.ring-2 {
  animation: rippleSpread 1s 0.12s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}


.process-step-card.ripple-active .water-ripple-ring.ring-3 {
  animation: rippleSpread 1.1s 0.22s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}


.process-step-card.ripple-active .splash-bead.bead-1 {
  animation: splashFly1 0.65s cubic-bezier(0.1, 0.9, 0.3, 1) forwards;
}

.process-step-card.ripple-active .splash-bead.bead-2 {
  animation: splashFly2 0.65s 0.05s cubic-bezier(0.1, 0.9, 0.3, 1) forwards;
}

.process-step-card.ripple-active .splash-bead.bead-3 {
  animation: splashFly3 0.65s 0.08s cubic-bezier(0.1, 0.9, 0.3, 1) forwards;
}

.process-step-card.ripple-active .splash-bead.bead-4 {
  animation: splashFly4 0.65s 0.03s cubic-bezier(0.1, 0.9, 0.3, 1) forwards;
}


@keyframes rippleSpread {
  0% {
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 1;
  }

  60% {
    opacity: 0.75;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }

}


@keyframes cardWaterBounce {
  0% { transform: translateY(0) scale(1); }

  25% { transform: translateY(4px) scale(0.985); }

  55% { transform: translateY(-7px) scale(1.02); }

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

}


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

  100% { transform: translate(-24px, -30px) scale(0.3); opacity: 0; }

}


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

  100% { transform: translate(24px, -28px) scale(0.3); opacity: 0; }

}


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

  100% { transform: translate(-14px, -38px) scale(0.3); opacity: 0; }

}


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

  100% { transform: translate(14px, -36px) scale(0.3); opacity: 0; }

}


/* ==========================================================================
   E-Commerce Cartoon Journey - Side Scrolling Animation
   ========================================================================== */
.ecommerce-journey-section {
  position: relative;
  background: #f8fafc;
  padding: 95px 0 110px;
  overflow: hidden;
}


.ecommerce-cartoon-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 25px 0 35px;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}


.ecommerce-cartoon-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: max-content;
  animation: cartoonScrollSide 36s linear infinite;
  will-change: transform;
}


.ecommerce-cartoon-track:hover {
  animation-play-state: paused;
}


.ecommerce-cartoon-group {
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}


@keyframes cartoonScrollSide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}


.cartoon-journey-card {
  width: 350px;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 32px rgba(16, 26, 37, 0.06);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}


.cartoon-journey-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 50px rgba(16, 26, 37, 0.12), 0 0 25px rgba(255, 82, 102, 0.15);
  border-color: rgba(255, 82, 102, 0.4);
}


.cartoon-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
}


.pill-coral {
  background: rgba(255, 82, 102, 0.12);
  color: #ff5266;
  border: 1px solid rgba(255, 82, 102, 0.3);
}


.pill-blue {
  background: rgba(4, 63, 255, 0.1);
  color: #043fff;
  border: 1px solid rgba(4, 63, 255, 0.25);
}


.pill-orange {
  background: rgba(255, 154, 62, 0.14);
  color: #e67e22;
  border: 1px solid rgba(255, 154, 62, 0.3);
}


.pill-green {
  background: rgba(46, 204, 113, 0.14);
  color: #27ae60;
  border: 1px solid rgba(46, 204, 113, 0.3);
}


.cartoon-stage {
  width: 100%;
  height: 200px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}


.stage-light-pink { background: linear-gradient(135deg, #fff0f3 0%, #ffe3e8 100%); }

.stage-light-cyan { background: linear-gradient(135deg, #e6f9ff 0%, #d4f3ff 100%); }

.stage-light-orange { background: linear-gradient(135deg, #fff5eb 0%, #ffebd9 100%); }

.stage-light-green { background: linear-gradient(135deg, #ebfbee 0%, #d7f7dc 100%); }


.cartoon-stage svg {
  width: 100%;
  height: 100%;
  max-width: 280px;
  max-height: 190px;
}


.cartoon-title {
  font-size: 20px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}


.cartoon-desc {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.6;
  margin: 0;
}


/* Specific Cartoon Character CSS Keyframe Animations */
/* Scene 1: Mobile Tap & Heart Floating */
@keyframes heartFloat {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }

  50% { opacity: 1; transform: translate(-8px, -20px) scale(1.1); }

  100% { transform: translate(-14px, -45px) scale(0.8); opacity: 0; }

}


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

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

}


@keyframes screenGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 212, 214, 0.4)); }

  50% { filter: drop-shadow(0 0 12px rgba(0, 212, 214, 0.8)); }

}


.anim-heart {
  animation: heartFloat 2s ease-in-out infinite;
}


.anim-cart {
  animation: cartBounce 1.8s ease-in-out infinite;
}


.anim-phone-glow {
  animation: screenGlow 2.5s ease-in-out infinite;
}


/* Scene 2: Scooter Wheel & Motion */
@keyframes wheelSpin {
  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}


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

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

}


@keyframes smokeTrail {
  0% { transform: translateX(0) scale(0.6); opacity: 0.8; }

  100% { transform: translateX(-16px) scale(1.4); opacity: 0; }

}


.anim-wheel {
  transform-origin: center;
  animation: wheelSpin 1.2s linear infinite;
}


.anim-scooter {
  animation: scooterBob 1.2s ease-in-out infinite;
}


.anim-smoke {
  animation: smokeTrail 1.5s ease-out infinite;
}


/* Scene 3: Happy Customer Bounce & Star Glow */
@keyframes happyJump {
  0%, 100% { transform: translateY(0) scale(1); }

  50% { transform: translateY(-7px) scale(1.02); }

}


@keyframes starTwinkle {
  0%, 100% { transform: scale(1); opacity: 0.8; }

  50% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 6px #ffa03b); }

}


@keyframes loveHeart {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.2); }

}


.anim-happy-char {
  transform-origin: bottom center;
  animation: happyJump 1.8s ease-in-out infinite;
}


.anim-star {
  transform-origin: center;
  animation: starTwinkle 2s ease-in-out infinite;
}


.anim-star:nth-child(2) { animation-delay: 0.3s; }

.anim-star:nth-child(3) { animation-delay: 0.6s; }


.anim-love-heart {
  transform-origin: center;
  animation: loveHeart 1.5s ease-in-out infinite;
}


/* Scene 4: Rupee Notes Counting & Coin Rain */
@keyframes rupeeRise {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }

  30% { opacity: 1; }

  100% { transform: translate(6px, -45px) rotate(15deg); opacity: 0; }

}


@keyframes countHands {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(-5deg); }

}


@keyframes chartPulse {
  0%, 100% { opacity: 0.9; }

  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.7)); }

}


.anim-rupee-1 { animation: rupeeRise 2.2s ease-out infinite; }

.anim-rupee-2 { animation: rupeeRise 2.2s 0.7s ease-out infinite; }

.anim-rupee-3 { animation: rupeeRise 2.2s 1.4s ease-out infinite; }


.anim-hands {
  transform-origin: bottom center;
  animation: countHands 1.4s ease-in-out infinite;
}


.anim-chart {
  animation: chartPulse 2s ease-in-out infinite;
}


@media screen and (max-width: 767px) {
  .ecommerce-journey-section {
    padding: 65px 0 80px;
  }

  .cartoon-journey-card {
    width: 290px;
    padding: 22px 18px;
  }

  .cartoon-stage {
    height: 170px;
  }

  .ecommerce-cartoon-track {
    gap: 0;
    animation-duration: 26s;
  }

  .ecommerce-cartoon-group {
    gap: 20px;
    padding-right: 20px;
  }

}



/* ==========================================================================
   ESPINA UI/UX Interactive Design Studio & Complex Animation System
   ========================================================================== */

/* --- Studio Showcase Container --- */
.ui-studio-wrap {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.12), 0 4px 16px rgba(16, 26, 37, 0.04);
  border: 1px solid rgba(16, 26, 37, 0.08);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.ui-studio-wrap:hover {
  box-shadow: 0 32px 80px rgba(16, 26, 37, 0.16), 0 8px 24px rgba(16, 26, 37, 0.06);
}


/* Studio Mac Window Titlebar */
.ui-studio-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #101a25;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.ui-traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
}


.ui-traffic-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}


.dot-red { background: #ff5f56; }

.dot-yellow { background: #ffbd2e; }

.dot-green { background: #27c93f; }


.ui-studio-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #94a3b8;
}


.ui-studio-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: default;
}


.ui-studio-tool-btn.active {
  background: rgba(255, 82, 102, 0.2);
  color: #ff5266;
  border: 1px solid rgba(255, 82, 102, 0.4);
}


.ui-collab-avatars {
  display: flex;
  align-items: center;
  gap: 8px;
}


.ui-avatar-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}


.avatar-sarah {
  background: rgba(255, 82, 102, 0.18);
  border: 1px solid rgba(255, 82, 102, 0.5);
  color: #ff5266;
}


.avatar-alex {
  background: rgba(0, 212, 214, 0.18);
  border: 1px solid rgba(0, 212, 214, 0.5);
  color: #00d4d6;
}


.ui-avatar-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: #ffffff;
}


.circle-sarah { background: #ff5266; }

.circle-alex { background: #00a8ff; }


/* Studio Canvas Area */
.ui-studio-canvas {
  position: relative;
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  padding: 40px 30px;
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


/* Prototype Device Mockup inside Canvas */
.ui-device-artboard {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(16, 26, 37, 0.1), 0 2px 8px rgba(16, 26, 37, 0.04);
  border: 1px solid rgba(16, 26, 37, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 2;
}


.ui-artboard-header {
  padding: 14px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #101a25;
  border-bottom: 1px solid rgba(16, 26, 37, 0.05);
}


.ui-artboard-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* Animated Figma Selection Box */
.figma-interactive-target {
  position: relative;
  border: 2px solid #ff5266;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 82, 102, 0.03);
  box-shadow: 0 0 0 4px rgba(255, 82, 102, 0.12);
  transition: all 0.3s ease;
}


.figma-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #ffffff;
  border: 2px solid #ff5266;
  border-radius: 2px;
}


.figma-handle-tl { top: -5px; left: -5px; }

.figma-handle-tr { top: -5px; right: -5px; }

.figma-handle-bl { bottom: -5px; left: -5px; }

.figma-handle-br { bottom: -5px; right: -5px; }


.figma-size-badge {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff5266;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(255, 82, 102, 0.4);
}


/* Floating Cursors with CSS Glide Animations */
.figma-cursor {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  transition: transform 0.1s linear;
}


.figma-cursor-icon {
  width: 22px;
  height: 22px;
  display: block;
}


.figma-cursor-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px 12px 12px 12px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  margin-top: -4px;
  margin-left: 12px;
  white-space: nowrap;
}


.cursor-sarah {
  top: 15%;
  left: 20%;
  animation: sarahStudioFloat 14s infinite ease-in-out;
}


.cursor-sarah .figma-cursor-tag {
  background: #ff5266;
}


.cursor-alex {
  bottom: 25%;
  right: 18%;
  animation: alexStudioFloat 16s infinite ease-in-out;
}


.cursor-alex .figma-cursor-tag {
  background: #00a8ff;
}


/* Live Heatmap Hotspot Pulse */
.ux-heat-hotspot {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 255, 0.6) 0%, rgba(0, 168, 255, 0) 70%);
  animation: hotspotPulse 2.5s infinite;
  pointer-events: none;
}


@keyframes hotspotPulse {
  0% { transform: scale(0.6); opacity: 0.8; }

  50% { transform: scale(1.4); opacity: 0.3; }

  100% { transform: scale(1.8); opacity: 0; }

}


@keyframes sarahStudioFloat {
  0%   { transform: translate(0, 0); }

  20%  { transform: translate(110px, 45px); }

  35%  { transform: translate(80px, 140px); }

  50%  { transform: translate(190px, 110px) scale(0.92); }

  70%  { transform: translate(60px, 20px); }

  85%  { transform: translate(140px, 80px); }

  100% { transform: translate(0, 0); }

}


@keyframes alexStudioFloat {
  0%   { transform: translate(0, 0); }

  25%  { transform: translate(-120px, -60px); }

  45%  { transform: translate(-80px, -150px) scale(0.94); }

  65%  { transform: translate(-170px, -80px); }

  80%  { transform: translate(-40px, -20px); }

  100% { transform: translate(0, 0); }

}


/* Studio Smart Guide Aligners */
.figma-guide-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #ff2d55;
  border-top: 1px dashed #ff2d55;
  opacity: 0.4;
  pointer-events: none;
}


.figma-guide-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ff2d55;
  border-left: 1px dashed #ff2d55;
  opacity: 0.4;
  pointer-events: none;
}


/* --- Section 2: Interactive Wireframe-to-Hi-Fi Morphing Slider --- */
.wireframe-slider-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
  overflow: hidden;
}


.wireframe-slider-box {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 65px rgba(16, 26, 37, 0.14);
  border: 1px solid rgba(16, 26, 37, 0.08);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  background: #0e1726;
}


/* Background Pane: Blueprint Skeletal Wireframe */
.slider-pane-wireframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f172a;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #94a3b8;
  padding: 45px 50px;
  box-sizing: border-box;
}


/* Foreground Pane: Hi-Fi Polished Production UI */
.slider-pane-hifi {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  border-right: 3px solid #ff5266;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  will-change: width;
}


.hifi-inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px; /* Base container fixed width matching parent */
  height: 100%;
  padding: 45px 50px;
  box-sizing: border-box;
  background: #ffffff;
}


/* Draggable Central Slider Handle */
.slider-control-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
}


.slider-handle-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff5266;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 20px rgba(255, 82, 102, 0.6), 0 0 0 4px #ffffff;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: handleGlow 2.5s infinite;
}


@keyframes handleGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(255, 82, 102, 0.6), 0 0 0 4px #ffffff; }

  50% { box-shadow: 0 4px 28px rgba(255, 82, 102, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.9); }

}


.slider-mode-badge {
  position: absolute;
  top: 24px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  z-index: 15;
  pointer-events: none;
}


.badge-wireframe-mode {
  right: 28px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #38bdf8;
  backdrop-filter: blur(8px);
}


.badge-hifi-mode {
  left: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 82, 102, 0.4);
  color: #ff5266;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}


/* Blueprint UI Elements */
.bp-wire-block {
  border: 1.5px dashed #475569;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bp-wire-cross {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #475569 calc(50% - 1px), #475569 calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(to bottom right, transparent calc(50% - 1px), #475569 calc(50% - 1px), #475569 calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.4;
}


.bp-wire-line {
  height: 8px;
  background: #334155;
  border-radius: 4px;
}


.bp-wire-chip {
  padding: 3px 8px;
  font-size: 10px;
  font-family: monospace;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.1);
}


/* Hi-Fi Polished UI Elements */
.hf-card-surface {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.06);
  padding: 24px;
  transition: all 0.3s ease;
}


.hf-gradient-badge {
  background: linear-gradient(135deg, #ff5266, #ff753a);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.hf-avatar-group {
  display: flex;
  align-items: center;
}


.hf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.hf-avatar:first-child { margin-left: 0; }


/* --- Section 3: 3D Isometric Exploded Layer Stack --- */
.isometric-showcase-section {
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}


.isometric-viewport {
  perspective: 1400px;
  perspective-origin: 50% 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
  margin: 40px 0;
}


.isometric-stack {
  position: relative;
  width: 480px;
  height: 320px;
  transform: rotateX(54deg) rotateZ(-34deg);
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


.isometric-stack:hover {
  transform: rotateX(48deg) rotateZ(-26deg) scale(1.05);
}


.isometric-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 24px 28px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -15px 15px 35px rgba(16, 26, 37, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
}


/* Layer 1: Psychology & Cognitive Architecture */
.plate-layer-1 {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(16, 26, 37, 0.12);
  transform: translateZ(0px);
}


/* Layer 2: Information Architecture & Taxonomy */
.plate-layer-2 {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 168, 255, 0.3);
  transform: translateZ(75px);
  box-shadow: -15px 15px 40px rgba(0, 168, 255, 0.14);
}


/* Layer 3: Component Library & Design Tokens */
.plate-layer-3 {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 82, 102, 0.35);
  transform: translateZ(150px);
  box-shadow: -15px 15px 45px rgba(255, 82, 102, 0.16);
}


/* Layer 4: Micro-Interactions & Motion Dynamics */
.plate-layer-4 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.95) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  transform: translateZ(225px);
  box-shadow: -18px 18px 50px rgba(16, 185, 129, 0.2);
}


/* Hover separation effect */
.isometric-stack:hover .plate-layer-1 {
  transform: translateZ(-20px);
}

.isometric-stack:hover .plate-layer-2 {
  transform: translateZ(80px);
}

.isometric-stack:hover .plate-layer-3 {
  transform: translateZ(180px);
}

.isometric-stack:hover .plate-layer-4 {
  transform: translateZ(280px);
}


.plate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.plate-num-pill {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}


.pill-layer-1 { background: rgba(16, 26, 37, 0.08); color: #101a25; }

.pill-layer-2 { background: rgba(0, 168, 255, 0.12); color: #0081ff; }

.pill-layer-3 { background: rgba(255, 82, 102, 0.12); color: #ff5266; }

.pill-layer-4 { background: rgba(16, 185, 129, 0.12); color: #10b981; }


.plate-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin: 4px 0 2px;
}


.plate-tagline {
  font-size: 12px;
  color: #556270;
  line-height: 1.4;
}


.plate-spec-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}


.plate-spec-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 26, 37, 0.04);
  color: #101a25;
  border: 1px solid rgba(16, 26, 37, 0.06);
}


/* --- Section 4: 5-Phase Rapid UI/UX Design Sprint Lifecycle --- */
.ui-sprint-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
}


.ui-sprint-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 50px;
}


/* Connecting Pulse Beam */
.ui-sprint-beam {
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff5266 0%, #0070ff 30%, #ff753a 65%, #10b981 100%);
  z-index: 1;
  border-radius: 2px;
}


.ui-sprint-beam::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 80px;
  height: 9px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 15px 4px rgba(255, 82, 102, 0.9);
  animation: sprintLaserBeam 4s infinite linear;
}


@keyframes sprintLaserBeam {
  0% { left: 0%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { left: 95%; opacity: 0; }

}


.ui-sprint-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.ui-sprint-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.12);
  border-color: rgba(255, 82, 102, 0.3);
}


.ui-sprint-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5266;
  box-shadow: 0 4px 16px rgba(255, 82, 102, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ff5266;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}


.ui-sprint-card:hover .ui-sprint-node {
  transform: scale(1.15) rotate(8deg);
  background: #ff5266;
  color: #ffffff;
}


.ui-sprint-node.node-blue { border-color: #0070ff; color: #0070ff; box-shadow: 0 4px 16px rgba(0, 112, 255, 0.25); }

.ui-sprint-card:hover .ui-sprint-node.node-blue { background: #0070ff; color: #ffffff; }


.ui-sprint-node.node-orange { border-color: #ff753a; color: #ff753a; box-shadow: 0 4px 16px rgba(255, 117, 58, 0.25); }

.ui-sprint-card:hover .ui-sprint-node.node-orange { background: #ff753a; color: #ffffff; }


.ui-sprint-node.node-purple { border-color: #9033ea; color: #9033ea; box-shadow: 0 4px 16px rgba(144, 51, 234, 0.25); }

.ui-sprint-card:hover .ui-sprint-node.node-purple { background: #9033ea; color: #ffffff; }


.ui-sprint-node.node-green { border-color: #10b981; color: #10b981; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25); }

.ui-sprint-card:hover .ui-sprint-node.node-green { background: #10b981; color: #ffffff; }


.ui-sprint-phase-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ff5266;
  margin-bottom: 6px;
}


.ui-sprint-name {
  font-size: 17px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 10px;
  line-height: 1.3;
}


.ui-sprint-summary {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.6;
  margin-bottom: 16px;
}


.ui-sprint-days-chip {
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
}


/* --- Section 5: Live Interactive Design System Playground --- */
.ui-sandbox-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  padding: 100px 0;
}


.ui-sandbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 40px;
}


.ui-sandbox-controls {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 16px 40px rgba(16, 26, 37, 0.08);
  border: 1px solid rgba(16, 26, 37, 0.08);
  display: flex;
  flex-direction: column;
  gap: 26px;
}


.sandbox-control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.sandbox-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #101a25;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.sandbox-color-picker {
  display: flex;
  gap: 12px;
}


.theme-color-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.theme-color-btn:hover {
  transform: scale(1.15);
}


.theme-color-btn.active {
  box-shadow: 0 0 0 3px #101a25, 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.15);
}


.btn-coral-theme { background: #ff5266; }

.btn-cyan-theme { background: #00d4d6; }

.btn-emerald-theme { background: #10b981; }

.btn-violet-theme { background: #8b5cf6; }


/* Interactive Segmented Control */
.segmented-control {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  position: relative;
}


.segment-btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #556270;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}


.segment-btn.active {
  background: #ffffff;
  color: #101a25;
  box-shadow: 0 2px 8px rgba(16, 26, 37, 0.08);
}


/* Range Slider */
.sandbox-range-input {
  width: 100%;
  accent-color: #ff5266;
  cursor: pointer;
}


/* Interactive Sandbox Target Card */
.sandbox-preview-card {
  background: #ffffff;
  border-radius: var(--sandbox-radius, 20px);
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.12);
  padding: 36px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}


.preview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}


.preview-card-chip {
  background: var(--sandbox-theme-light, rgba(255, 82, 102, 0.12));
  color: var(--sandbox-theme-color, #ff5266);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}


.preview-card-title {
  font-size: 24px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 10px;
}


.preview-card-metric {
  font-size: 38px;
  font-weight: 900;
  color: var(--sandbox-theme-color, #ff5266);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}


/* Interactive Feedback Button */
.sandbox-action-btn {
  background: var(--sandbox-theme-color, #ff5266);
  color: #ffffff;
  border: none;
  border-radius: calc(var(--sandbox-radius, 20px) / 1.5);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(255, 82, 102, 0.3);
  transition: all 0.25s ease;
}


.sandbox-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 82, 102, 0.45);
}


.sandbox-toast {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: #101a25;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}


.sandbox-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* Responsive Rules for UI/UX Systems */
@media screen and (max-width: 1024px) {
  .ui-sprint-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .ui-sprint-beam {
    display: none;
  }

  .wireframe-slider-box {
    height: 480px;
  }

}


@media screen and (max-width: 767px) {
  .ui-studio-canvas {
    padding: 24px 14px;
    min-height: 400px;
  }

  .ui-studio-tools {
    display: none;
  }

  .wireframe-slider-box {
    height: 440px;
  }

  .slider-pane-wireframe,
  .hifi-inner-content {
    padding: 24px 20px;
  }

  .isometric-viewport {
    perspective: none;
    min-height: auto;
  }

  .isometric-stack {
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .isometric-stack:hover {
    transform: none;
  }

  .isometric-plate {
    position: static;
    transform: none !important;
    width: 100%;
    height: auto;
    box-shadow: 0 8px 24px rgba(16, 26, 37, 0.08);
  }

  .ui-sprint-track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ui-sandbox-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}



/* ==========================================================================
   ESPINA 24/7 Mission Control Telemetry NOC & Maintenance Styles
   ========================================================================== */

/* --- 24/7 NOC Command Terminal --- */
.noc-terminal-wrap {
  position: relative;
  background: #0b1320;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 65px rgba(11, 19, 32, 0.35), 0 0 40px rgba(0, 212, 214, 0.08);
  overflow: hidden;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.noc-terminal-wrap:hover {
  box-shadow: 0 32px 80px rgba(11, 19, 32, 0.45), 0 0 50px rgba(0, 212, 214, 0.15);
}


.noc-terminal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #070d17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.noc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}


.noc-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: nocPulse 1.8s infinite;
}


@keyframes nocPulse {
  0% { transform: scale(0.9); box-shadow: 0 0 4px #22c55e; }

  50% { transform: scale(1.3); box-shadow: 0 0 14px #22c55e, 0 0 22px rgba(34, 197, 94, 0.5); }

  100% { transform: scale(0.9); box-shadow: 0 0 4px #22c55e; }

}


.noc-terminal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Telemetry Sine-Wave Chart */
.noc-chart-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}


.noc-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}


.noc-chart-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}


.noc-chart-stat {
  font-size: 14px;
  font-weight: 800;
  color: #00d4d6;
}


.noc-telemetry-svg {
  width: 100%;
  height: 55px;
  overflow: visible;
}


.noc-scan-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #00d4d6, transparent);
  box-shadow: 0 0 12px #00d4d6;
  animation: nocScan 3.5s infinite linear;
}


@keyframes nocScan {
  0% { left: 0%; opacity: 0; }

  15% { opacity: 1; }

  85% { opacity: 1; }

  100% { left: 100%; opacity: 0; }

}


/* Regional Server Nodes Grid */
.noc-nodes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}


.noc-node-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.25s ease;
}


.noc-node-box:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(0, 212, 214, 0.3);
  transform: translateY(-2px);
}


.noc-node-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}


.noc-node-ping {
  font-size: 11px;
  font-weight: 800;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}


/* Rolling Terminal Telemetry Log */
.noc-log-card {
  background: #070d17;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.8;
  height: 115px;
  overflow: hidden;
  position: relative;
}


.noc-log-line {
  display: flex;
  gap: 10px;
  color: #94a3b8;
  white-space: nowrap;
}


.log-time { color: #64748b; }

.log-tag-green { color: #4ade80; font-weight: 700; }

.log-tag-blue { color: #38bdf8; font-weight: 700; }

.log-tag-orange { color: #fb923c; font-weight: 700; }

.log-msg { color: #cbd5e1; }


/* --- 6 Pillars Service Grid --- */
.maint-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 45px;
}


.maint-feature-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.maint-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(16, 26, 37, 0.1);
  border-color: rgba(255, 82, 102, 0.3);
}


.maint-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff5266, #ff753a);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.maint-feature-card:hover::before {
  opacity: 1;
}


.maint-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: transform 0.3s ease;
}


.maint-feature-card:hover .maint-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}


.icon-coral-bg { background: rgba(255, 82, 102, 0.12); color: #ff5266; }

.icon-cyan-bg { background: rgba(0, 212, 214, 0.14); color: #00d4d6; }

.icon-green-bg { background: rgba(16, 185, 129, 0.12); color: #10b981; }

.icon-orange-bg { background: rgba(255, 117, 58, 0.12); color: #ff753a; }

.icon-purple-bg { background: rgba(144, 51, 234, 0.12); color: #9033ea; }

.icon-blue-bg { background: rgba(0, 112, 255, 0.12); color: #0070ff; }


.maint-card-title {
  font-size: 19px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 12px;
  line-height: 1.35;
}


.maint-card-desc {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.65;
  margin-bottom: 18px;
}


.maint-card-points {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 26, 37, 0.06);
}


.maint-point-item {
  font-size: 13px;
  font-weight: 600;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
}


.maint-point-item i {
  color: #22c55e;
  font-size: 13px;
}


/* --- Section 3: Proactive Incident Pipeline --- */
.maint-pipeline-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
}


.maint-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 50px;
}


.maint-pipeline-beam {
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff5266 0%, #ff753a 35%, #0070ff 70%, #10b981 100%);
  z-index: 1;
  border-radius: 2px;
}


.maint-pipeline-beam::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 70px;
  height: 9px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 16px 4px rgba(0, 212, 214, 0.9);
  animation: maintLaserBeam 3.6s infinite linear;
}


@keyframes maintLaserBeam {
  0% { left: 0%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { left: 95%; opacity: 0; }

}


.maint-pipeline-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.maint-pipeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.12);
  border-color: rgba(0, 212, 214, 0.4);
}


.maint-pipeline-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5266;
  box-shadow: 0 4px 16px rgba(255, 82, 102, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ff5266;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}


.maint-pipeline-card:hover .maint-pipeline-node {
  transform: scale(1.15) rotate(8deg);
  background: #ff5266;
  color: #ffffff;
}


.node-blue-theme { border-color: #0070ff; color: #0070ff; box-shadow: 0 4px 16px rgba(0, 112, 255, 0.25); }

.maint-pipeline-card:hover .node-blue-theme { background: #0070ff; color: #ffffff; }


.node-orange-theme { border-color: #ff753a; color: #ff753a; box-shadow: 0 4px 16px rgba(255, 117, 58, 0.25); }

.maint-pipeline-card:hover .node-orange-theme { background: #ff753a; color: #ffffff; }


.node-green-theme { border-color: #10b981; color: #10b981; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25); }

.maint-pipeline-card:hover .node-green-theme { background: #10b981; color: #ffffff; }


.pipeline-step-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ff5266;
  margin-bottom: 6px;
}


.pipeline-step-name {
  font-size: 17px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 10px;
  line-height: 1.3;
}


.pipeline-step-desc {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.6;
  margin-bottom: 16px;
}


.pipeline-sla-chip {
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
}


/* --- Section 5: Transparent SLA Support Tiers --- */
.maint-tiers-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  padding: 100px 0;
}


.maint-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 50px;
  align-items: stretch;
}


.maint-tiers-grid.tiers-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}


.maint-tier-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 26px;
  padding: 38px 32px;
  box-shadow: 0 16px 40px rgba(16, 26, 37, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.35s ease;
}


.maint-tier-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.12);
}


.maint-tier-card.featured-tier {
  border: 2px solid #ff5266;
  box-shadow: 0 24px 60px rgba(255, 82, 102, 0.16);
  transform: scale(1.03);
}


.maint-tier-card.featured-tier:hover {
  transform: scale(1.03) translateY(-8px);
}


.tier-popular-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff5266, #ff753a);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.4);
}


.tier-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16, 26, 37, 0.08);
}


.tier-name {
  font-size: 22px;
  font-weight: 900;
  color: #101a25;
  margin-bottom: 6px;
}


.tier-purpose {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.5;
}


.tier-sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #ff5266;
  margin-top: 10px;
}


.tier-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.tier-feature-item {
  font-size: 14px;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}


.tier-feature-item i {
  color: #22c55e;
  font-size: 15px;
  flex-shrink: 0;
}


.tier-btn-wrap {
  margin-top: auto;
}


/* Responsive Maintenance Rules */
@media screen and (max-width: 1024px) {
  .maint-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .maint-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .maint-pipeline-beam {
    display: none;
  }

  .maint-tiers-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .maint-tiers-grid.tiers-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .maint-tier-card.featured-tier {
    transform: none;
  }

  .maint-tier-card.featured-tier:hover {
    transform: translateY(-8px);
  }

}


@media screen and (max-width: 767px) {
  .maint-feature-grid {
    grid-template-columns: 1fr;
  }

  .maint-pipeline-grid {
    grid-template-columns: 1fr;
  }

  .maint-tiers-grid.tiers-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .noc-nodes-grid {
    grid-template-columns: 1fr;
  }

  .noc-terminal-body {
    padding: 18px 14px;
  }

}



/* --- Simple Transparent SLA Showcase --- */
.maint-simple-wrap {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 26px;
  padding: 45px 50px;
  box-shadow: 0 20px 50px rgba(16, 26, 37, 0.08);
  position: relative;
  overflow: hidden;
}


.maint-simple-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}


.maint-simple-features {
  background: #f8fafc;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid rgba(16, 26, 37, 0.06);
}


.maint-simple-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.checklist-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}


.checklist-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 82, 102, 0.12);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}


@media screen and (max-width: 991px) {
  .maint-simple-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .maint-simple-wrap {
    padding: 32px 24px;
  }

}



/* ==========================================================================
   ESPINA Enterprise ERP Solutions - Complex Interactive Design System
   ========================================================================== */

/* --- Executive Cockpit Window --- */
.erp-cockpit-wrap {
  position: relative;
  background: #0b1320;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 70px rgba(11, 19, 32, 0.4), 0 0 45px rgba(255, 82, 102, 0.08);
  overflow: hidden;
  color: #e2e8f0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.erp-cockpit-wrap:hover {
  box-shadow: 0 32px 85px rgba(11, 19, 32, 0.5), 0 0 55px rgba(255, 82, 102, 0.15);
}


.erp-cockpit-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #070d17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.erp-cockpit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0, 212, 214, 0.14);
  border: 1px solid rgba(0, 212, 214, 0.4);
  color: #00d4d6;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}


.erp-cockpit-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Department Mini-Tabs */
.erp-dept-switcher {
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
}


.erp-dept-tab {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}


.erp-dept-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}


.erp-dept-tab.active {
  background: #ff5266;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.4);
}


/* Dynamic Live Metric Display Card */
.erp-dept-display {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}


.erp-display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}


.erp-display-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}


.erp-metric-value {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}


.erp-metric-caption {
  font-size: 12.5px;
  color: #94a3b8;
}


/* Cockpit Mini-Stat Row */
.erp-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}


.erp-stat-node {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.25s ease;
}


.erp-stat-node:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(255, 82, 102, 0.3);
  transform: translateY(-2px);
}


.erp-stat-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}


.erp-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}


/* --- Section 2: 6 ERP Modular Architecture Cards --- */
.erp-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 45px;
}


.erp-module-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.erp-module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(16, 26, 37, 0.1);
  border-color: rgba(255, 82, 102, 0.3);
}


.erp-module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff5266, #ff753a);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.erp-module-card:hover::before {
  opacity: 1;
}


.erp-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: transform 0.3s ease;
}


.erp-module-card:hover .erp-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}


.erp-card-title {
  font-size: 19px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 12px;
  line-height: 1.35;
}


.erp-card-desc {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.65;
  margin-bottom: 18px;
}


.erp-card-points {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 26, 37, 0.06);
}


.erp-point-item {
  font-size: 13px;
  font-weight: 600;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
}


.erp-point-item i {
  color: #22c55e;
  font-size: 13px;
}


/* --- Section 3: 5-Stage Implementation Roadmap --- */
.erp-pipeline-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
}


.erp-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
  margin-top: 50px;
}


.erp-pipeline-grid.erp-stages-6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


.erp-pipeline-beam {
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff5266 0%, #0070ff 30%, #ff753a 65%, #10b981 100%);
  z-index: 1;
  border-radius: 2px;
}


.erp-pipeline-beam::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 70px;
  height: 9px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 16px 4px rgba(255, 82, 102, 0.9);
  animation: erpLaserBeam 3.8s infinite linear;
}


@keyframes erpLaserBeam {
  0% { left: 0%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { left: 95%; opacity: 0; }

}


.erp-pipeline-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 26px 18px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.erp-pipeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.12);
  border-color: rgba(255, 82, 102, 0.4);
}


.erp-pipeline-node {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5266;
  box-shadow: 0 4px 16px rgba(255, 82, 102, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #ff5266;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}


.erp-pipeline-card:hover .erp-pipeline-node {
  transform: scale(1.15) rotate(8deg);
  background: #ff5266;
  color: #ffffff;
}


.node-blue-erp { border-color: #0070ff; color: #0070ff; box-shadow: 0 4px 16px rgba(0, 112, 255, 0.25); }

.erp-pipeline-card:hover .node-blue-erp { background: #0070ff; color: #ffffff; }


.node-orange-erp { border-color: #ff753a; color: #ff753a; box-shadow: 0 4px 16px rgba(255, 117, 58, 0.25); }

.erp-pipeline-card:hover .node-orange-erp { background: #ff753a; color: #ffffff; }


.node-purple-erp { border-color: #9033ea; color: #9033ea; box-shadow: 0 4px 16px rgba(144, 51, 234, 0.25); }

.erp-pipeline-card:hover .node-purple-erp { background: #9033ea; color: #ffffff; }


.node-green-erp { border-color: #10b981; color: #10b981; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25); }

.erp-pipeline-card:hover .node-green-erp { background: #10b981; color: #ffffff; }


/* --- Section 5: Industry Vertical Blueprints Grid --- */
.erp-verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 45px;
}


.erp-vertical-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(16, 26, 37, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}


.erp-vertical-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(16, 26, 37, 0.1);
  border-color: rgba(0, 212, 214, 0.4);
}


.erp-vertical-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}


.erp-vertical-title {
  font-size: 17px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 6px;
}


.erp-vertical-desc {
  font-size: 13.5px;
  color: #556270;
  line-height: 1.6;
}


/* Responsive Rules for ERP */
@media screen and (max-width: 1024px) {
  .erp-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .erp-pipeline-grid,
  .erp-pipeline-grid.erp-stages-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .erp-pipeline-beam {
    display: none;
  }

  .erp-verticals-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media screen and (max-width: 767px) {
  .erp-modules-grid {
    grid-template-columns: 1fr;
  }

  .erp-pipeline-grid,
  .erp-pipeline-grid.erp-stages-6 {
    grid-template-columns: 1fr;
  }

  .erp-verticals-grid {
    grid-template-columns: 1fr;
  }

  .erp-stats-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .erp-cockpit-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .erp-cockpit-titlebar {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .erp-cockpit-titlebar > div:nth-child(2) {
    font-size: 10.5px !important;
    letter-spacing: 0.2px !important;
  }

  .erp-cockpit-badge {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }

  .erp-cockpit-body {
    padding: 14px 10px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .erp-dept-switcher {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .erp-dept-switcher::-webkit-scrollbar {
    display: none;
  }

  .erp-dept-tab {
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .erp-dept-display {
    padding: 14px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .erp-display-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .erp-display-title {
    font-size: 11.5px !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .erp-metric-value {
    font-size: 22px !important;
    word-break: break-word !important;
  }

  .erp-metric-caption {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
}



/* ==========================================================================
   ESPINA CRM Solutions - Interactive Sales Pipeline & Deal Board Styles
   ========================================================================== */

/* --- Interactive Kanban Pipeline Board --- */
.crm-kanban-wrap {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.12);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.crm-kanban-wrap:hover {
  box-shadow: 0 32px 80px rgba(16, 26, 37, 0.16);
}


.crm-kanban-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #101a25;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.crm-kanban-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}


.crm-kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px;
  background: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  min-height: 380px;
}


.crm-column {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.crm-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(16, 26, 37, 0.06);
}


.crm-col-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #101a25;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}


.crm-col-count {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(16, 26, 37, 0.06);
  color: #64748b;
}


.crm-deal-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(16, 26, 37, 0.04);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}


.crm-deal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.08);
  border-color: rgba(255, 82, 102, 0.3);
}


.deal-client-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 2px;
}


.deal-company {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 8px;
}


.deal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 26, 37, 0.08);
}


.deal-amount {
  font-size: 13px;
  font-weight: 900;
  color: #10b981;
}


.deal-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 82, 102, 0.1);
  color: #ff5266;
}


.tag-green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}


.tag-blue {
  background: rgba(0, 112, 255, 0.1);
  color: #0070ff;
}


/* Simulated Deal Movement Animation */
.deal-anim-won {
  animation: dealGlowWon 3.5s infinite alternate;
}


@keyframes dealGlowWon {
  0% { border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15); }

  100% { border-color: #10b981; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35); }

}


/* --- Section 2: 6 CRM Capability Engines Grid --- */
.crm-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 45px;
}


.crm-feature-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.crm-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(16, 26, 37, 0.1);
  border-color: rgba(255, 82, 102, 0.3);
}


.crm-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff5266, #ff753a);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.crm-feature-card:hover::before {
  opacity: 1;
}


.crm-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: transform 0.3s ease;
}


.crm-feature-card:hover .crm-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}


.crm-card-title {
  font-size: 19px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 12px;
  line-height: 1.35;
}


.crm-card-desc {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.65;
  margin-bottom: 18px;
}


.crm-card-points {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 26, 37, 0.06);
}


.crm-point-item {
  font-size: 13px;
  font-weight: 600;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
}


.crm-point-item i {
  color: #22c55e;
  font-size: 13px;
}


/* --- Section 3: 4-Stage Lead Conversion Funnel --- */
.crm-pipeline-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
}


.crm-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 50px;
}


.crm-pipeline-beam {
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff5266 0%, #ff753a 35%, #0070ff 70%, #10b981 100%);
  z-index: 1;
  border-radius: 2px;
}


.crm-pipeline-beam::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 70px;
  height: 9px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 16px 4px rgba(255, 82, 102, 0.9);
  animation: crmLaserBeam 3.6s infinite linear;
}


@keyframes crmLaserBeam {
  0% { left: 0%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { left: 95%; opacity: 0; }

}


.crm-pipeline-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 12px 30px rgba(16, 26, 37, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.crm-pipeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.12);
  border-color: rgba(255, 82, 102, 0.4);
}


.crm-pipeline-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5266;
  box-shadow: 0 4px 16px rgba(255, 82, 102, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ff5266;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}


.crm-pipeline-card:hover .crm-pipeline-node {
  transform: scale(1.15) rotate(8deg);
  background: #ff5266;
  color: #ffffff;
}


/* --- Section 5: Industry CRM Blueprints Grid --- */
.crm-verticals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 45px;
}


.crm-vertical-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 26px 20px;
  box-shadow: 0 10px 28px rgba(16, 26, 37, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}


.crm-vertical-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(16, 26, 37, 0.1);
  border-color: rgba(0, 212, 214, 0.4);
}


.crm-vertical-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}


.crm-vertical-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 8px;
}


.crm-vertical-desc {
  font-size: 13px;
  color: #556270;
  line-height: 1.6;
}


.crm-pipeline-grid.crm-stages-6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


.crm-verticals-grid.crm-verticals-6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* Responsive CRM Rules */
@media screen and (max-width: 1024px) {
  .crm-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crm-pipeline-grid,
  .crm-pipeline-grid.crm-stages-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .crm-pipeline-beam {
    display: none;
  }

  .crm-verticals-grid,
  .crm-verticals-grid.crm-verticals-6 {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media screen and (max-width: 767px) {
  .crm-kanban-board {
    grid-template-columns: 1fr;
  }

  .crm-feature-grid {
    grid-template-columns: 1fr;
  }

  .crm-pipeline-grid,
  .crm-pipeline-grid.crm-stages-6 {
    grid-template-columns: 1fr;
  }

  .crm-verticals-grid,
  .crm-verticals-grid.crm-verticals-6 {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================================
   ESPINA Education Management System (EMS) - Design System
   ========================================================================== */

/* --- Hero Laptop Scene with Floating Badges --- */
.edu-laptop-scene {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 30px 20px;
}


/* Ambient Radial Glow Halos */
.edu-glow-halo-1 {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 212, 214, 0.25) 0%, rgba(0, 212, 214, 0) 70%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}


.edu-glow-halo-2 {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 82, 102, 0.2) 0%, rgba(255, 82, 102, 0) 70%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}


/* Laptop Frame Container */
.edu-laptop-mockup {
  position: relative;
  z-index: 2;
  perspective: 1000px;
}


.edu-laptop-screen {
  background: #0f172a;
  border-radius: 18px 18px 0 0;
  border: 4px solid #1e293b;
  border-bottom: none;
  box-shadow: 0 25px 60px rgba(16, 26, 37, 0.2);
  overflow: hidden;
  position: relative;
}


.edu-laptop-bezel-top {
  height: 16px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}


.edu-webcam-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #334155;
  box-shadow: inset 0 0 2px #000000;
}


/* Base of Laptop */
.edu-laptop-base {
  height: 14px;
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  border-radius: 0 0 16px 16px;
  position: relative;
  box-shadow: 0 15px 35px rgba(16, 26, 37, 0.25);
}


.edu-laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #475569;
  border-radius: 0 0 4px 4px;
}


/* Dashboard UI inside Screen */
.edu-dashboard-view {
  background: #f8fafc;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}


.edu-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}


.edu-dash-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #101a25;
}


.edu-dash-logo img {
  height: 18px;
}


/* 4 Metrics Strip */
.edu-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}


.edu-mini-card {
  padding: 8px 10px;
  border-radius: 10px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}


.card-blue { background: linear-gradient(135deg, #0070ff, #00a8ff); }

.card-cyan { background: linear-gradient(135deg, #00d4d6, #06b6d4); }

.card-coral { background: linear-gradient(135deg, #ff5266, #ff753a); }

.card-yellow { background: linear-gradient(135deg, #ff9a3e, #f59e0b); }


.mini-card-val {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}


.mini-card-label {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.9;
  text-transform: uppercase;
  margin-top: 2px;
}


/* Dashboard Charts Grid */
.edu-charts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}


.edu-chart-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}


.edu-chart-title {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 8px;
}


/* Floating Glassmorphic Badges with 3D Float Animation */
.edu-float-badge {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 14px 35px rgba(16, 26, 37, 0.14);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease;
}


.edu-float-badge:hover {
  transform: scale(1.1) translateY(-4px) !important;
}


.badge-float-1 {
  top: 5%;
  left: -5%;
  animation: eduFloat1 4.5s ease-in-out infinite alternate;
}


.badge-float-2 {
  top: 8%;
  right: -5%;
  animation: eduFloat2 5s ease-in-out infinite alternate;
}


.badge-float-3 {
  bottom: 18%;
  right: -8%;
  animation: eduFloat3 4.2s ease-in-out infinite alternate;
}


@keyframes eduFloat1 {
  0% { transform: translateY(0px) rotate(0deg); }

  100% { transform: translateY(-12px) rotate(-3deg); }

}


@keyframes eduFloat2 {
  0% { transform: translateY(0px) rotate(0deg); }

  100% { transform: translateY(-10px) rotate(3deg); }

}


@keyframes eduFloat3 {
  0% { transform: translateY(0px) rotate(0deg); }

  100% { transform: translateY(-14px) rotate(-2deg); }

}


.edu-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
}


.icon-blue-grad { background: linear-gradient(135deg, #0070ff, #00a8ff); }

.icon-pink-grad { background: linear-gradient(135deg, #ec4899, #f43f5e); }

.icon-green-grad { background: linear-gradient(135deg, #10b981, #22c55e); }


/* --- Section 2: 8 Institutional Modules Grid (2x4) --- */
.edu-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 45px;
}


.edu-module-card {
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(16, 26, 37, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.edu-module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(16, 26, 37, 0.12);
  border-color: rgba(0, 212, 214, 0.4);
}


.edu-icon-container {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}


.edu-module-card:hover .edu-icon-container {
  transform: scale(1.12) rotate(4deg);
}


.edu-module-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 10px;
  line-height: 1.35;
}


.edu-module-desc {
  font-size: 14px;
  color: #556270;
  line-height: 1.6;
  margin-bottom: 20px;
}


.edu-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}


.edu-arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0070ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.25s ease;
}


.edu-module-card:hover .edu-arrow-circle {
  background: #0070ff;
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 112, 255, 0.35);
}


/* --- Section 3: Modern Campus CTA Banner --- */
.edu-cta-banner-section {
  position: relative;
  background: linear-gradient(135deg, #0e1726 0%, #172338 100%);
  padding: 85px 0;
  color: #ffffff;
  overflow: hidden;
}


.edu-cta-banner-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}


.edu-campus-photo-wrap {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}


.edu-campus-photo-wrap img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}


/* Responsive Rules for Education */
@media screen and (max-width: 1024px) {
  .edu-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .edu-cta-banner-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}


@media screen and (max-width: 767px) {
  .edu-modules-grid {
    grid-template-columns: 1fr;
  }

  .edu-float-badge {
    display: none;
  }

  .edu-charts-grid {
    grid-template-columns: 1fr;
  }

  .edu-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }

}



/* ==========================================================================
   ESPINA Custom Software Solutions - Orbital Tech, Bombastic Carousel & Globe
   ========================================================================== */

/* --- 1. Solar System Technology Orbit (Tilted Ellipses with Large Tech Stack Icons) --- */
.tech-orbital-section {
  position: relative;
  background: radial-gradient(circle at center, #0a1122 0%, #050813 70%, #020308 100%);
  padding: 110px 0 100px;
  overflow: hidden;
  color: #ffffff;
}


/* Background Cosmic Nebula */
.solar-nebula {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 82, 102, 0.16) 0%, rgba(0, 212, 214, 0.12) 40%, rgba(144, 51, 234, 0.08) 65%, transparent 80%);
  filter: blur(60px);
  pointer-events: none;
  animation: solarNebulaPulse 10s ease-in-out infinite alternate;
}


@keyframes solarNebulaPulse {
  0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0.7; }

  100% { transform: translate(-50%, -50%) scale(1.15) rotate(20deg); opacity: 1; }

}


/* Solar System Stage */
.solar-system-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 520px;
  margin: 45px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Elliptical Orbit Tracks */
.solar-orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  pointer-events: none;
  box-shadow: 0 0 25px rgba(0, 212, 214, 0.04);
}


.solar-orbit-track.track-1 {
  width: 380px;
  height: 160px;
  border-color: rgba(0, 212, 214, 0.22);
}


.solar-orbit-track.track-2 {
  width: 600px;
  height: 250px;
  border-color: rgba(255, 82, 102, 0.20);
}


.solar-orbit-track.track-3 {
  width: 840px;
  height: 350px;
  border-color: rgba(168, 85, 247, 0.18);
}


.solar-orbit-track.track-4 {
  width: 720px;
  height: 280px;
  border-color: rgba(56, 189, 248, 0.22);
  transform: translate(-50%, -50%) rotate(-25deg);
}


/* Central Solar Star (Sun / ESPINA Core) */
.solar-sun-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ff9a3e 30%, #ff5266 70%, #d91b3b 100%);
  box-shadow: 0 0 35px rgba(255, 82, 102, 0.8),
              0 0 70px rgba(255, 117, 58, 0.5),
              0 0 120px rgba(255, 82, 102, 0.3),
              inset 0 0 20px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 15;
  cursor: pointer;
  animation: sunPulsate 4s ease-in-out infinite alternate;
}


@keyframes sunPulsate {
  0% { transform: translate(-50%, -50%) scale(0.96); box-shadow: 0 0 35px rgba(255, 82, 102, 0.8), 0 0 70px rgba(255, 117, 58, 0.5); }

  100% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 50px rgba(255, 82, 102, 0.95), 0 0 100px rgba(255, 154, 62, 0.65); }

}


.sun-inner-icon {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: sunSpinSlow 20s linear infinite;
}


@keyframes sunSpinSlow {
  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}


.sun-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}


/* Solar Corona Flare Rings */
.solar-corona {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 154, 62, 0.4);
  pointer-events: none;
  animation: sunCoronaRotate 16s linear infinite;
}


@keyframes sunCoronaRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }

  to { transform: translate(-50%, -50%) rotate(360deg); }

}


/* Large Technology Stack Planet Cards */
.tech-planet-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 84px;
  margin-top: -42px;
  margin-left: -39px;
  border-radius: 18px;
  background: rgba(13, 20, 36, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
  will-change: transform, opacity;
}


.tech-planet-card:hover {
  transform: scale(1.28) !important;
  z-index: 50 !important;
  border-color: #ffffff !important;
}


/* Large Tech Stack Icons */
.tech-planet-card .planet-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
  transition: transform 0.25s ease, filter 0.25s ease;
}


.tech-planet-card:hover .planet-icon {
  transform: scale(1.15);
}


.tech-planet-card .planet-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #f1f5f9;
  text-align: center;
  white-space: nowrap;
}


/* Individual Planet Glow & Colors */
.planet-react .planet-icon { color: #00d4d6; filter: drop-shadow(0 0 8px rgba(0, 212, 214, 0.7)); }

.planet-react:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(0, 212, 214, 0.8) !important; border-color: #00d4d6 !important; }


.planet-node .planet-icon { color: #22c55e; filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.7)); }

.planet-node:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(34, 197, 94, 0.8) !important; border-color: #22c55e !important; }


.planet-python .planet-icon { color: #38bdf8; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)); }

.planet-python:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(56, 189, 248, 0.8) !important; border-color: #38bdf8 !important; }


.planet-angular .planet-icon { color: #ef4444; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7)); }

.planet-angular:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(239, 68, 68, 0.8) !important; border-color: #ef4444 !important; }


.planet-laravel .planet-icon { color: #ff5266; filter: drop-shadow(0 0 8px rgba(255, 82, 102, 0.7)); }

.planet-laravel:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 82, 102, 0.8) !important; border-color: #ff5266 !important; }


.planet-dotnet .planet-icon { color: #a855f7; filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.7)); }

.planet-dotnet:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(168, 85, 247, 0.8) !important; border-color: #a855f7 !important; }


.planet-aws .planet-icon { color: #f59e0b; filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7)); }

.planet-aws:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(245, 158, 11, 0.8) !important; border-color: #f59e0b !important; }


.planet-docker .planet-icon { color: #0284c7; filter: drop-shadow(0 0 8px rgba(2, 132, 199, 0.7)); }

.planet-docker:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(2, 132, 199, 0.8) !important; border-color: #0284c7 !important; }


.planet-flutter .planet-icon { color: #06b6d4; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.7)); }

.planet-flutter:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(6, 182, 212, 0.8) !important; border-color: #06b6d4 !important; }


.planet-next .planet-icon { color: #ffffff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }

.planet-next:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 255, 255, 0.8) !important; border-color: #ffffff !important; }


/* Planet Tooltip Popover */
.planet-tooltip-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 60;
}


.tech-planet-card:hover .planet-tooltip-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}



/* --- 2. Bombastic 3D Carousel (End-to-End Application Development) --- */
.bombart-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
  overflow: hidden;
}


.bombart-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 50px auto 0;
  perspective: 1200px;
}


.bombart-track {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 460px;
  touch-action: pan-y;
}


.bombart-card {
  position: absolute;
  width: 360px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 37, 0.08);
  border-radius: 26px;
  padding: 36px 30px;
  box-shadow: 0 12px 35px rgba(16, 26, 37, 0.06);
  transition: all 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  user-select: none;
  cursor: pointer;
}


/* Card States */
.bombart-card.active {
  z-index: 10;
  transform: translateX(0) scale(1.08) translateZ(60px);
  border: 2px solid #ff5266;
  box-shadow: 0 25px 65px rgba(255, 82, 102, 0.18), 0 10px 24px rgba(16, 26, 37, 0.08);
  opacity: 1;
}


.bombart-card.prev {
  z-index: 5;
  transform: translateX(-310px) scale(0.9) translateZ(-40px);
  opacity: 0.65;
  filter: blur(1px);
}


.bombart-card.next {
  z-index: 5;
  transform: translateX(310px) scale(0.9) translateZ(-40px);
  opacity: 0.65;
  filter: blur(1px);
}


.bombart-card.hidden {
  z-index: 1;
  transform: scale(0.7) translateZ(-100px);
  opacity: 0;
  pointer-events: none;
}


.bombart-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}


.bombart-card.active .bombart-icon-wrap {
  transform: scale(1.15) rotate(6deg);
}


.bombart-title {
  font-size: 21px;
  font-weight: 900;
  color: #101a25;
  margin-bottom: 12px;
  line-height: 1.3;
}


.bombart-desc {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.65;
  margin-bottom: 22px;
}


.bombart-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 26, 37, 0.06);
}


.bombart-spec-item {
  font-size: 13.5px;
  font-weight: 600;
  color: #101a25;
  display: flex;
  align-items: center;
  gap: 8px;
}


.bombart-spec-item i {
  color: #22c55e;
  font-size: 14px;
}


/* Carousel Nav Controls */
.bombart-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}


.bombart-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(16, 26, 37, 0.12);
  background: #ffffff;
  color: #101a25;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 26, 37, 0.06);
  transition: all 0.25s ease;
}


.bombart-nav-btn:hover {
  background: #ff5266;
  border-color: #ff5266;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 82, 102, 0.35);
}


.bombart-dots {
  display: flex;
  gap: 8px;
}


.bombart-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.3s ease;
}


.bombart-dot.active {
  width: 28px;
  border-radius: 10px;
  background: #ff5266;
}



/* --- 3. 3D Sphere Marquee Section (Clean Hero Globe) --- */
.globe-marquee-section {
  position: relative;
  background: #060911;
  padding: 100px 0 115px;
  overflow: hidden;
  color: #ffffff;
}


/* Centered Sphere Globe Hero */
.sphere-globe-hero {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Ambient Backglow behind Sphere */
.sphere-ambient-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 214, 0.14) 0%, rgba(255, 82, 102, 0.08) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}


/* Canvas Interactive Box */
.sphere-canvas-box {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 2;
}


.sphere-canvas-box:active {
  cursor: grabbing;
}


/* Canvas Element */
#sphereMarqueeCanvas {
  display: block;
  width: 560px;
  height: 500px;
  max-width: 100%;
}


/* Responsive Custom Solutions */
@media screen and (max-width: 1024px) {
  .solar-system-stage {
    height: 480px;
  }

  .sphere-canvas-box {
    height: 460px;
  }

  #sphereMarqueeCanvas {
    width: 480px;
    height: 440px;
  }

  .bombart-card.prev {
    transform: translateX(-200px) scale(0.85);
  }

  .bombart-card.next {
    transform: translateX(200px) scale(0.85);
  }

}


@media screen and (max-width: 767px) {
  .solar-system-stage {
    height: 400px;
  }

  .tech-planet-card {
    width: 60px;
    height: 68px;
    margin-top: -34px;
    margin-left: -30px;
    border-radius: 14px;
  }

  .tech-planet-card .planet-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .tech-planet-card .planet-label {
    font-size: 9.5px;
  }

  .solar-sun-core {
    width: 74px;
    height: 74px;
  }

  .sun-inner-icon {
    font-size: 20px;
  }

  .sphere-canvas-box {
    height: 360px;
  }

  #sphereMarqueeCanvas {
    width: 340px;
    height: 340px;
  }

  .bombart-card {
    width: 300px;
    padding: 24px 20px;
  }

  .bombart-card.prev,
  .bombart-card.next {
    display: none;
  }

}



/* ==========================================================================
   CTA Section with form-bg.webp (Light Theme with Correct Dark Font Colors)
   ========================================================================== */
.cta-form-bg-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover !important;
  padding: 105px 20px 115px;
  text-align: center;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.cta-form-bg-section .cta-gradient-content {
  position: relative;
  z-index: 5;
  max-width: 780px;
  margin: 0 auto;
}


.cta-form-bg-section .badge-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  border-radius: 50px;
  background: rgba(255, 82, 102, 0.08);
  border: 1px solid rgba(255, 82, 102, 0.25);
  color: #ff5266 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(255, 82, 102, 0.08);
}


body.subpage .cta-form-bg-section h2,
.cta-form-bg-section .cta-form-title {
  font-size: 42px;
  font-weight: 800;
  color: #101a25 !important;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  text-shadow: none !important;
}


.cta-form-bg-section .cta-form-title .gradient-text-coral {
  background: linear-gradient(90deg, #ff5266 0%, #ff753a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}


body.subpage .cta-form-bg-section p,
.cta-form-bg-section .cta-form-desc {
  font-size: 17px;
  line-height: 1.7;
  color: #475569 !important;
  max-width: 650px;
  margin: 0 auto 36px;
  text-shadow: none !important;
}


@media screen and (max-width: 767px) {
  .cta-form-bg-section {
    padding: 80px 16px 90px;
  }

  body.subpage .cta-form-bg-section h2,
  .cta-form-bg-section .cta-form-title {
    font-size: 28px;
  }

  body.subpage .cta-form-bg-section p,
  .cta-form-bg-section .cta-form-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

}



/* ==========================================================================
   ESPINA Accounting Software Solutions Styling
   ========================================================================== */

/* --- Financial Cockpit Showcase Card (Section 1 Overview) --- */
.acct-cockpit-card {
  background: #0d1527;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(10, 18, 38, 0.25), 0 0 30px rgba(0, 212, 214, 0.08);
  padding: 28px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}


.acct-cockpit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}


.acct-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.3);
}


.acct-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: radarPulse 1.8s infinite;
}


.acct-fiscal-tag {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.5px;
}


.acct-balance-display {
  margin-bottom: 24px;
}


.acct-balance-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}


.acct-balance-num {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}


.acct-growth-pill {
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  padding: 3px 10px;
  border-radius: 6px;
}


/* Quick KPI Grid inside Cockpit */
.acct-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}


.acct-kpi-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}


.acct-kpi-val {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px;
}


.acct-kpi-lbl {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* Live Ticker Bar */
.acct-ticker-bar {
  background: rgba(0, 212, 214, 0.06);
  border: 1px solid rgba(0, 212, 214, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #cbd5e1;
}


.acct-ticker-icon {
  color: #00d4d6;
  font-size: 14px;
  flex-shrink: 0;
}


/* --- Section 2: 6 Core Accounting Architecture Cards --- */
.acct-modules-section {
  position: relative;
  background: #080d1a;
  padding: 105px 0 115px;
  color: #ffffff;
  overflow: hidden;
}


.acct-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}


.acct-module-card {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 34px 28px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}


.acct-module-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 212, 214, 0.15);
  border-color: rgba(0, 212, 214, 0.4);
}


.acct-module-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
}


.acct-module-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.35;
}


.acct-module-desc {
  font-size: 14.5px;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}


.acct-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}


.acct-module-list li {
  font-size: 13px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 9px;
}


.acct-module-list li i {
  color: #00d4d6;
  font-size: 11px;
}


/* --- Section 3: 4-Stage Compliance & Audit Pipeline --- */
.acct-pipeline-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover;
  padding: 105px 0 115px;
  color: #101a25;
}


.acct-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
  position: relative;
}


.acct-pipeline-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 30px 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.05);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}


.acct-pipeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(16, 26, 37, 0.1);
  border-color: rgba(255, 82, 102, 0.3);
}


.acct-step-num {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ff5266;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-block;
  background: rgba(255, 82, 102, 0.08);
  padding: 4px 12px;
  border-radius: 8px;
  width: fit-content;
}


.acct-step-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 12px;
  line-height: 1.35;
}


.acct-step-desc {
  font-size: 14px;
  color: #556270;
  line-height: 1.65;
  margin: 0;
}


/* --- Section 4: Industry Accounting Blueprints --- */
.acct-industry-section {
  position: relative;
  background: #060b14;
  padding: 105px 0 115px;
  color: #ffffff;
  overflow: hidden;
}


.acct-industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 50px;
}


.acct-industry-card {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 30px 22px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}


.acct-industry-card:hover {
  transform: translateY(-5px);
  border-color: #ff5266;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 82, 102, 0.2);
}


.acct-ind-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}


.acct-ind-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.35;
}


.acct-ind-desc {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}


.acct-ind-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}


.acct-ind-features li {
  font-size: 12.5px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}


.acct-ind-features li i {
  color: #22c55e;
  font-size: 10px;
}


/* Ensure Accounting Module & Industry card titles and text are bright white and fully visible */
body.subpage .acct-module-card h3,
body.subpage .acct-module-card .acct-module-title,
body.subpage .acct-modules-section h3,
.acct-module-title {
  color: #ffffff !important;
}


body.subpage .acct-industry-card h3,
body.subpage .acct-industry-card .acct-ind-title,
body.subpage .acct-industry-section h3,
.acct-ind-title {
  color: #ffffff !important;
}


body.subpage .acct-module-card p,
body.subpage .acct-module-card .acct-module-desc {
  color: #cbd5e1 !important;
}


body.subpage .acct-industry-card p,
body.subpage .acct-industry-card .acct-ind-desc {
  color: #cbd5e1 !important;
}


/* Gradient Orange Button */
.btn-gradient-orange {
  background: linear-gradient(90deg, #ff7a18 0%, #ff5266 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 15px 36px;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(255, 122, 24, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
}


.btn-gradient-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 122, 24, 0.55);
  color: #ffffff !important;
}


/* Responsive Accounting Styling */
@media screen and (max-width: 1024px) {
  .acct-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .acct-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

}


@media screen and (max-width: 767px) {
  .acct-modules-grid {
    grid-template-columns: 1fr;
  }

  .acct-pipeline-grid {
    grid-template-columns: 1fr;
  }

  .acct-industry-grid {
    grid-template-columns: 1fr;
  }

  .acct-kpi-grid {
    grid-template-columns: 1fr;
  }

  .acct-balance-num {
    font-size: 28px;
  }

}



/* ==========================================================================
   Portfolio Image Showcase Grid (3 Columns at a Row with Generous Spacing)
   ========================================================================== */
.portfolio-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 32px;
}


.portfolio-image-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  position: relative;
  display: block;
  line-height: 0;
}


.portfolio-image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(16, 26, 37, 0.12), 0 0 25px rgba(255, 82, 102, 0.15);
  border-color: rgba(255, 82, 102, 0.35);
}


.portfolio-image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.portfolio-image-card:hover img {
  transform: scale(1.04);
}


@media screen and (max-width: 991px) {
  .portfolio-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

}


@media screen and (max-width: 640px) {
  .portfolio-gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}


/* ========================================================
   INTERNSHIP PROGRAMS SHOWCASE & EXPANDED SECTIONS
   ======================================================== */
.internship-intro-section,
body.subpage .internship-intro-section {
  position: relative;
  background: #ffffff url('assets/form-bg.webp') no-repeat center center / cover !important;
}


.internship-programs-showcase {
  margin-bottom: 65px;
}


.internship-programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}


.internship-program-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}


.internship-program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(16, 26, 37, 0.14), 0 0 25px rgba(255, 82, 102, 0.16);
  border-color: rgba(255, 82, 102, 0.4);
}


.internship-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
  cursor: pointer;
}


.internship-card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


.internship-program-card:hover .internship-card-media img {
  transform: scale(1.04);
}


.internship-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 26, 37, 0) 50%, rgba(16, 26, 37, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}


.internship-program-card:hover .internship-card-overlay {
  opacity: 1;
}


.internship-card-overlay .internship-apply-badge {
  background: #ff5266;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 6px 18px rgba(255, 82, 102, 0.4);
  transform: translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.internship-program-card:hover .internship-card-overlay .internship-apply-badge {
  transform: translateY(0);
}


.internship-card-body {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #ffffff;
}


.internship-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}


.internship-badge-track {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ff5266;
  background: rgba(255, 82, 102, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}


.internship-badge-duration {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}


.internship-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  line-height: 1.35;
  margin: 0 0 10px;
}


.internship-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #556270;
  margin: 0 0 16px;
  flex-grow: 1;
}


.internship-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}


.internship-card-tags span {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(16, 26, 37, 0.05);
}


.internship-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  border-radius: 12px;
  background: #101a25;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(16, 26, 37, 0.1);
}


.internship-card-cta:hover {
  background: #ff5266;
  box-shadow: 0 6px 20px rgba(255, 82, 102, 0.35);
  transform: translateY(-2px);
  color: #ffffff;
}


/* --- 4-Stage Learning Roadmap Section --- */
.internship-roadmap-section {
  padding: 95px 0 105px;
  background: #f8fafc;
  position: relative;
  z-index: 5;
  overflow: hidden;
}


.roadmap-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


.internship-roadmap-section .container {
  position: relative;
  z-index: 3;
}


.internship-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}


.internship-step-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 24px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 6px 20px rgba(16, 26, 37, 0.04);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}


.internship-step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 82, 102, 0.35);
  box-shadow: 0 18px 40px rgba(16, 26, 37, 0.1), 0 0 20px rgba(255, 82, 102, 0.12);
}


.internship-step-num {
  font-size: 28px;
  font-weight: 900;
  color: rgba(255, 82, 102, 0.25);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}


.internship-step-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(255, 82, 102, 0.09);
  color: #ff5266;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}


.internship-step-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 10px;
  line-height: 1.35;
}


.internship-step-card p {
  font-size: 14px;
  line-height: 1.65;
  color: #556270;
  margin: 0;
}


/* --- Program Perks Section --- */
.internship-perks-section {
  padding: 95px 0 105px;
  background: #ffffff;
  position: relative;
  z-index: 5;
}


.internship-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}


.internship-perk-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 18px rgba(16, 26, 37, 0.03);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.internship-perk-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 129, 255, 0.35);
  box-shadow: 0 16px 36px rgba(0, 129, 255, 0.09);
}


.internship-perk-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(0, 129, 255, 0.08);
  color: #0081ff;
  display: flex;
  align-items: center;
  justify-content: center;
}


.internship-perk-card h4 {
  font-size: 19px;
  font-weight: 800;
  color: #101a25;
  margin: 0;
  line-height: 1.35;
}


.internship-perk-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #556270;
  margin: 0;
}


/* --- FAQ Accordion Section --- */
.internship-faq-section {
  padding: 95px 0 105px;
  background: #fafbfc;
  position: relative;
  z-index: 5;
}


.internship-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.internship-faq-item {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 4px 16px rgba(16, 26, 37, 0.03);
  overflow: hidden;
  transition: all 0.3s ease;
}


.internship-faq-item[open] {
  border-color: rgba(255, 82, 102, 0.3);
  box-shadow: 0 8px 24px rgba(255, 82, 102, 0.08);
}


.internship-faq-question {
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 700;
  color: #101a25;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}


.internship-faq-question::-webkit-details-marker {
  display: none;
}


.internship-faq-question:hover {
  color: #ff5266;
}


.faq-chevron {
  transition: transform 0.3s ease;
  color: #64748b;
  flex-shrink: 0;
}


.internship-faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: #ff5266;
}


.internship-faq-answer {
  padding: 0 26px 22px;
  color: #556270;
  font-size: 15px;
  line-height: 1.7;
}


.internship-faq-answer p {
  margin: 0;
}


/* --- Media Queries --- */
@media screen and (max-width: 1024px) {
  .internship-programs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .internship-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .internship-perks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

}


@media screen and (max-width: 640px) {
  .internship-programs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .internship-steps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .internship-perks-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .internship-faq-question {
    font-size: 15.5px;
    padding: 18px 20px;
  }

  .internship-faq-answer {
    padding: 0 20px 18px;
    font-size: 14px;
  }

}


/* ==========================================================================
   Responsive 2-Column Split Grid (Subpage Intros, Our Story, Why Choose ESPINA)
   ========================================================================== */
.responsive-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.responsive-2col-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.responsive-2col-grid.ratio-55-45 {
  grid-template-columns: 55% 45%;
}


@media screen and (max-width: 991px) {
  .responsive-2col-grid,
  .responsive-2col-grid.ratio-55-45 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-story-photo {
    height: 380px !important;
  }

}


@media screen and (max-width: 768px) {
  .responsive-2col-grid,
  .responsive-2col-grid.ratio-55-45 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .responsive-2col-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .about-story-photo {
    height: 280px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }

  .about-story-photo-wrap {
    border-radius: 20px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-top: 10px;
  }

  .about-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .stat-counter-card {
    padding: 24px 16px !important;
    text-align: center;
  }

  .stat-counter-card .stat-number {
    font-size: 32px !important;
  }

}


@media screen and (max-width: 767px) {
  .about-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

}


/* ==========================================================================
   Job Application Form & Popup Modal
   ========================================================================== */
.job-apply-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}


.job-apply-modal.is-active {
  opacity: 1;
  visibility: visible;
}


.job-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 16, 26, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.job-modal-dialog {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 38px 36px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(16, 26, 37, 0.08);
  transform: scale(0.94) translateY(18px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.job-apply-modal.is-active .job-modal-dialog {
  transform: scale(1) translateY(0);
}


.job-modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}


.job-modal-close-btn:hover {
  background: #ff5266;
  border-color: #ff5266;
  color: #ffffff;
  transform: rotate(90deg);
}


.job-modal-header {
  margin-bottom: 22px;
  padding-right: 32px;
}


.job-modal-title {
  font-size: 24px;
  font-weight: 800;
  color: #101a25;
  margin: 6px 0 6px;
  line-height: 1.3;
}


.job-modal-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}


.job-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


@media (max-width: 640px) {
  .job-apply-modal {
    padding: 12px;
  }

  .job-modal-dialog {
    padding: 26px 18px 22px !important;
    border-radius: 20px !important;
    max-height: 92vh !important;
  }

  .job-modal-title {
    font-size: 20px !important;
  }

  .job-form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

}






/* =========================================================================
   HOMEPAGE CONTENT REDESIGN ENHANCEMENTS
   ========================================================================= */
.hero-eyebrow-seo {
  display: block;
  font-size: clamp(10.5px, 2.2vw, 13.5px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: clamp(0.5px, 0.2vw, 1.2px);
  color: #ea2a3a;
  margin-bottom: 10px;
  font-family: var(--font-primary);
  line-height: 1.35;
  white-space: normal;
  max-width: 100%;
}

@media screen and (max-width: 1366px) {
  .hero-container {
    grid-template-columns: 55% 45%;
    padding: 0 24px;
  }
}

@media screen and (max-width: 991px) {
  .hero-container {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
    text-align: center !important;
  }
  .hero-media-wrapper {
    min-height: calc(88vw - var(--header-height, 70px)) !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .hero-eyebrow-seo {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #ea2a3a !important;
    max-width: 380px !important;
    margin: 0 auto 10px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .hero-title {
    margin: 0 auto 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .hero-title .title-primary {
    font-size: clamp(23px, 5.6vw, 28px) !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    white-space: normal !important;
    max-width: 380px !important;
    margin: 0 auto 4px !important;
    display: block !important;
    color: #101a25 !important;
  }
  .hero-title .title-gradient {
    font-size: clamp(27px, 6.6vw, 33px) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .hero-actions {
    margin: 0 auto 16px !important;
    gap: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .hero-actions .btn {
    padding: 12px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }
  .hero-actions .btn-coral-gradient {
    box-shadow: 0 6px 20px rgba(255, 68, 88, 0.35) !important;
  }
  .hero-actions .btn-hero-secondary {
    background: #ffffff !important;
    border: 1.5px solid rgba(16, 26, 37, 0.2) !important;
    color: #101a25 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  }
  .hero-description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 380px !important;
    color: #4b5868 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* About Section Visual Layout Enhancement for Tablet & Mobile */
  .about-home-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .about-visual-comp {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "photo photo"
      "stat1 stat2"
      "location location" !important;
    gap: 12px !important;
    position: static !important;
    max-width: 600px !important;
    margin: 14px auto 0 !important;
    width: 100% !important;
  }

  .about-main-img {
    grid-area: photo !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  .about-stat-pill {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(16, 26, 37, 0.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 60px !important;
    z-index: 1 !important;
  }

  .about-stat-pill.top-right {
    grid-area: stat1 !important;
  }

  .about-stat-pill.bottom-left {
    grid-area: stat2 !important;
  }

  .about-stat-pill .stat-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  .about-stat-pill .stat-num {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #101a25 !important;
    letter-spacing: -0.01em !important;
  }

  .about-stat-pill .stat-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    white-space: normal !important;
  }

  .about-location-tag-wrap {
    grid-area: location !important;
    margin: 2px 0 0 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .about-location-tag {
    margin-top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f2 100%) !important;
    border: 1px solid rgba(234, 42, 58, 0.16) !important;
    border-radius: 50px !important;
    color: #ea2a3a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(234, 42, 58, 0.06) !important;
    gap: 8px !important;
  }

  .about-location-tag i {
    font-size: 14px !important;
    color: #ea2a3a !important;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    padding-top: calc(var(--header-height, 70px) + 8px) !important;
    padding-bottom: 46px !important;
  }
  .hero-container {
    padding: 0 18px !important;
  }
  .hero-media-wrapper {
    min-height: calc(88vw - var(--header-height, 70px)) !important;
  }
  .hero-eyebrow-seo {
    font-size: 11.5px !important;
    letter-spacing: 0.8px !important;
    max-width: 330px !important;
    margin: 0 auto 10px !important;
  }
  .hero-title .title-primary {
    font-size: clamp(22px, 5.5vw, 27px) !important;
    max-width: 340px !important;
  }
  .hero-title .title-gradient {
    font-size: clamp(26px, 6.5vw, 32px) !important;
    max-width: 340px !important;
  }
  .hero-description {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 340px !important;
  }
}

.btn-hero-secondary {
  padding: 15px 32px;
  font-weight: 700;
  font-size: 14.5px;
  border: 2px solid rgba(16, 26, 37, 0.22);
  color: #101a25 !important;
  border-radius: 999px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  backdrop-filter: blur(8px);
}

.btn-hero-secondary:hover {
  border-color: #101a25;
  background: #101a25 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 26, 37, 0.2);
}

.about-focus-text {
  font-size: 15px;
  color: #101a25;
  background: #f8fafc;
  border-left: 3.5px solid #ff5266;
  padding: 12px 18px;
  border-radius: 0 12px 12px 0;
  margin-top: 18px;
  line-height: 1.6;
}

.core-services-4cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .core-services-4cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .core-services-4cards-grid {
    grid-template-columns: 1fr;
  }
}

.process-cards-5col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 45px;
}

@media (max-width: 1024px) {
  .process-cards-5col {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 0 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .process-cards-5col::-webkit-scrollbar {
    display: none;
  }
  .process-cards-5col .process-card-7col {
    flex: 0 0 240px;
    min-width: 240px;
    scroll-snap-align: center;
  }
}

@media (min-width: 992px) {
  .why-espina-card.why-anchor-card {
    grid-column: span 3;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
  }
}


/* Hero Title Size Tuning */
.hero-title {
  width: 100%;
  max-width: 100%;
}

.hero-title .title-primary {
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.hero-title .title-gradient {
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.1;
}

@media (max-width: 1366px) {
  .hero-title .title-primary { font-size: 40px; }
  .hero-title .title-gradient { font-size: 44px; }
}

@media (max-width: 1200px) {
  .hero-title .title-primary { font-size: 36px; }
  .hero-title .title-gradient { font-size: 40px; }
}

@media (max-width: 991px) {
  .hero-title .title-primary { font-size: 34px; }
  .hero-title .title-gradient { font-size: 38px; }
}

@media (max-width: 768px) {
  .hero-title .title-primary { font-size: clamp(22px, 5.5vw, 27px) !important; }
  .hero-title .title-gradient { font-size: clamp(26px, 6.5vw, 32px) !important; }
}

@media (max-width: 480px) {
  .hero-title .title-primary { font-size: clamp(21px, 5.4vw, 25px) !important; }
  .hero-title .title-gradient { font-size: clamp(25px, 6.4vw, 30px) !important; }

  .about-visual-comp {
    gap: 10px !important;
  }
  .about-stat-pill {
    padding: 10px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    min-height: 56px !important;
  }
  .about-stat-pill .stat-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .about-stat-pill .stat-num {
    font-size: 17px !important;
  }
  .about-stat-pill .stat-label {
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
  }
  .about-location-tag {
    font-size: 12.5px !important;
    padding: 10px 14px !important;
  }
}


/* =========================================================================
   TEMPLATE ACTION BUTTONS: RED DISCUSS & GREEN WHATSAPP
   ========================================================================= */
.btn-red-discuss,
.btn-orange-template {
  background: linear-gradient(90deg, #ff2a44 0%, #ff5266 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 14px 34px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(255, 42, 68, 0.38) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.btn-red-discuss:hover,
.btn-orange-template:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255, 42, 68, 0.58) !important;
  background: linear-gradient(90deg, #e51d36 0%, #ff3b53 100%) !important;
  color: #ffffff !important;
}

.btn-green-whatsapp,
.btn-black-whatsapp {
  background: linear-gradient(90deg, #25D366 0%, #20ba59 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  border: 1.5px solid #20ba59 !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.btn-green-whatsapp:hover,
.btn-black-whatsapp:hover {
  background: linear-gradient(90deg, #20ba59 0%, #179344 100%) !important;
  border-color: #179344 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5) !important;
}

.btn-green-whatsapp i,
.btn-black-whatsapp i {
  color: #ffffff !important;
  font-size: 19px !important;
}


/* =========================================================================
   MOBILE-FIRST SCREENSHOT-MATCHING FOOTER
   ========================================================================= */
.site-footer {
  background-color: #0b0f17 !important;
  color: #ffffff;
  padding-top: 55px;
  position: relative;
  overflow: hidden;
}

.footer-container {
  display: block !important;
  padding-bottom: 20px !important;
}

.footer-brand-block {
  text-align: left;
  margin-bottom: 22px;
}

.footer-logo-wrap {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

.footer-logo-tm {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-left: 4px;
  margin-top: -1px;
  letter-spacing: -0.2px;
  user-select: none;
  display: inline-block;
}

.footer-brand-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.footer-brand-title .brand-tm {
  font-size: 13px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 2px;
}

.footer-brand-sub {
  font-size: 15px;
  color: #cbd5e1;
  font-weight: 500;
  margin: 4px 0 2px;
  line-height: 1.4;
}

.footer-brand-tag {
  font-size: 14.5px;
  color: #94a3b8;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

.footer-top-divider,
.footer-bottom-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 22px 0 32px;
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer-block-heading {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.1px !important;
}

.footer-clean-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-clean-links li a {
  color: #94a3b8 !important;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.45;
  display: inline-block;
}

.footer-clean-links li a:hover {
  color: #ff5266 !important;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

.footer-contact-ico {
  color: #ff5266;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-contact-text {
  color: #94a3b8 !important;
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s ease;
}

.footer-contact-text:hover {
  color: #ffffff !important;
}

.footer-contact-list + .footer-social-links {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.footer-contact-list + .footer-social-links .social-icon {
  width: 38px;
  height: 38px;
  font-size: 17px;
  flex-shrink: 0;
}

@media screen and (max-width: 991px) {
  .footer-nav-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .footer-nav-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
  }
  .footer-clean-links li a {
    font-size: 13.5px;
  }
  .footer-contact-row {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   LeadFlow Management Software - Showcase Card & Desktop Video Player Styles
   ========================================================================== */
.leadflow-logo-showcase-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 30px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 25px 60px rgba(16, 26, 37, 0.1);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.leadflow-logo-big-img {
  max-width: 440px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(16, 26, 37, 0.06);
  transition: transform 0.3s ease;
}

.leadflow-logo-big-img:hover {
  transform: scale(1.02);
}

/* Video Player Window Container */
.leadflow-video-window {
  background: #070d17;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 212, 214, 0.1);
  overflow: hidden;
  margin-top: 36px;
  position: relative;
}

.leadflow-video-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #04080f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #94a3b8;
}

.leadflow-video-ctrls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 12px;
}

.leadflow-video-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.leadflow-video-tabs::-webkit-scrollbar {
  display: none;
}

.lf-video-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.lf-video-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.lf-video-tab.active {
  background: #ff5266;
  color: #ffffff;
  border-color: #ff5266;
  box-shadow: 0 4px 14px rgba(255, 82, 102, 0.4);
}

.lf-video-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #00d4d6;
  color: #070d17;
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.lf-video-play-btn:hover {
  background: #38bdf8;
  transform: translateY(-1px);
}

/* Video Progress Bar */
.leadflow-video-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  position: relative;
}

.leadflow-video-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4d6, #ff5266);
  width: 0%;
  transition: width 0.1s linear;
}

/* Video Screen Viewport */
.leadflow-video-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
  overflow: hidden;
}

.lf-video-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
  transform: scale(0.98);
}

.lf-video-screen.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.lf-video-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 768px) {
  .leadflow-video-ctrls-bar {
    padding: 10px 12px;
  }
  .leadflow-video-tabs {
    width: 100%;
    order: 2;
  }
  .lf-video-tab {
    padding: 6px 10px;
    font-size: 11px;
  }
  .leadflow-logo-showcase-card {
    padding: 24px 16px;
  }
}

/* ==========================================================================
   Pricing Page & Quote Request Form Styles
   ========================================================================== */
.pricing-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.pricing-info-col {
  padding-right: 12px;
}

.pricing-pillars-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0;
}

.pricing-pillar-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #ffffff;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 10px 30px rgba(16, 26, 37, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(16, 26, 37, 0.08);
}

.pricing-pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.pricing-pillar-icon.coral {
  background: linear-gradient(135deg, #ff753a 0%, #ff5266 100%);
}

.pricing-pillar-icon.blue {
  background: linear-gradient(135deg, #00d4d6 0%, #0070ff 100%);
}

.pricing-pillar-icon.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.pricing-pillar-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: #101a25;
  margin-bottom: 6px;
}

.pricing-pillar-content p {
  font-size: 14px;
  color: #556270;
  line-height: 1.6;
  margin: 0;
}

.quote-form-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 42px 40px;
  border: 1px solid rgba(16, 26, 37, 0.08);
  box-shadow: 0 24px 60px rgba(16, 26, 37, 0.08);
  position: relative;
}

.quote-form-header {
  margin-bottom: 28px;
}

.quote-form-title {
  font-size: 28px;
  font-weight: 800;
  color: #101a25;
  margin-bottom: 8px;
}

.quote-form-subtext {
  font-size: 14.5px;
  color: #556270;
  line-height: 1.6;
  margin: 0;
}

.quote-field-group {
  margin-bottom: 20px;
}

.quote-field-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #101a25;
  margin-bottom: 8px;
}

.quote-field-label .required-star {
  color: #ff5266;
  margin-left: 2px;
}

.budget-options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
}

.budget-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
  user-select: none;
}

.budget-radio-item:hover {
  background: rgba(0, 112, 255, 0.04);
}

.budget-radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #ea2a3a;
  cursor: pointer;
}

.budget-radio-item span {
  font-size: 14.5px;
  font-weight: 600;
  color: #334155;
}

.quote-confirmation-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.12);
  margin-top: 10px;
}

.quote-confirmation-box .confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

.quote-confirmation-box h4 {
  font-size: 20px;
  font-weight: 800;
  color: #14532d;
  margin-bottom: 8px;
}

.quote-confirmation-box .confirm-main {
  font-size: 15px;
  font-weight: 600;
  color: #166534;
  line-height: 1.6;
  margin-bottom: 8px;
}

.quote-confirmation-box .confirm-note {
  font-size: 13.5px;
  color: #15803d;
  line-height: 1.6;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .pricing-quote-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pricing-info-col {
    padding-right: 0;
  }
}

@media screen and (max-width: 576px) {
  .quote-form-card {
    padding: 28px 20px;
    border-radius: 22px;
  }
  .quote-form-title {
    font-size: 23px;
  }
}



/* =========================================================================
   CONTACT PAGE: 2 CHANNELS + 3 OFFICE LOCATION BOXES
   ========================================================================= */
.contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto 40px;
}

.contact-offices-wrap {
  margin-top: 55px;
}

.contact-offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-office-card {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 34px 24px !important;
  height: 100%;
}

.contact-office-card .contact-card-icon {
  margin: 0 auto 16px auto !important;
}

.contact-office-card h4 {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #101a25 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  width: 100% !important;
}

.contact-office-card .company-sub {
  font-size: 13.5px;
  font-weight: 800;
  color: #ea2a3a;
  margin: 0 0 10px;
  letter-spacing: 0.2px;
  text-align: center !important;
  width: 100% !important;
}

.contact-office-card .address-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: #556270;
  margin: 0;
  text-align: center !important;
  width: 100% !important;
}

.contact-office-card .tech-support-box {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(16, 26, 37, 0.12);
  font-size: 13px;
  color: #556270;
  text-align: center !important;
  width: 100% !important;
}

.contact-office-card .tech-support-box a {
  color: #8b5cf6 !important;
  font-weight: 700;
}

@media (max-width: 991px) {
  .contact-offices-wrap {
    margin-top: 45px;
  }
  .contact-channels-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .contact-offices-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}