/* ==========================================================================
   CREATO DISPLAY & MANROPE FONT FACES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/creato-display/CreatoDisplay-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Alias for Creato Display */
@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/creato-display/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/creato-display/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   14 IDENTIFIED TYPOGRAPHY STYLES (User Specification)
   ========================================================================== */

/* 1. h2-120-600 */
.h2-120-600 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 120px !important;
  font-weight: 600 !important;
  line-height: 100px !important;
  text-transform: uppercase !important;
}

/* 2. large-title-120-600 */
.large-title-120-600 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 120px !important;
  font-weight: 600 !important;
  line-height: 120px !important;
  text-transform: uppercase !important;
}

/* 3. h2-90-700 */
.h2-90-700 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 90px !important;
  font-weight: 700 !important;
  line-height: 100px !important;
  text-transform: uppercase !important;
}

/* 4. large-title-90-700 */
.large-title-90-700 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 90px !important;
  font-weight: 700 !important;
  line-height: 90px !important;
  text-transform: uppercase !important;
}

/* 5. large-title-48-700 */
.large-title-48-700 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 48px !important;
}

/* 6. h2-48-700 */
.h2-48-700 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 57.6px !important;
}

/* 7. h5-20-600 */
.h5-20-600 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
}

/* 8. body-16-500 */
.body-16-500 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 54px !important;
  letter-spacing: -0.48px !important;
  text-transform: capitalize !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* 9. body-16-400 */
.body-16-400 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 30.4px !important;
}

/* 10. link-16-400 */
.link-16-400 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 50px !important;
  text-align: center !important;
}

/* 11. link-16-400-manrope */
.link-16-400-manrope {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 30.4px !important;
  text-transform: capitalize !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* 12. small-body-15-400 */
.small-body-15-400 {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* 13. link-14-500 */
.link-14-500 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 26.6px !important;
  text-transform: uppercase !important;
}

/* 14. caption-12-400 */
.caption-12-400 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 15.6px !important;
  text-align: center !important;
}

/* Responsive typography scaling */
@media (max-width: 1200px) {
  .h2-120-600, .large-title-120-600 { font-size: 80px !important; line-height: 84px !important; }
  .h2-90-700, .large-title-90-700 { font-size: 64px !important; line-height: 72px !important; }
}

@media (max-width: 768px) {
  .h2-120-600, .large-title-120-600 { font-size: 44px !important; line-height: 50px !important; }
  .h2-90-700, .large-title-90-700 { font-size: 38px !important; line-height: 46px !important; }
  .large-title-48-700, .h2-48-700 { font-size: 30px !important; line-height: 36px !important; }
}

/* ==========================================================================
   ARCUXE CREATIVE TECHNOLOGY STUDIO — OFFICIAL BRAND DESIGN SYSTEM
   Tagline: RESEARCH. DESIGN. CREATION.
   ========================================================================== */

:root {
  /* 1. Official Primary Colors */
  --arcuxe-electric-blue: #176BFF;
  --arcuxe-violet: #813BFF;

  /* Template variable bindings */
  --theme-color1: #176BFF;
  --theme-color1-rgb: 23, 107, 255;
  --theme-color2: #08090D;
  --theme-color2-rgb: 8, 9, 13;
  --theme-color3: #813BFF;
  --theme-color3-rgb: 129, 59, 255;

  /* 2. Supporting Brand Colors */
  --arcuxe-ice-blue: #BDEBFF;
  --arcuxe-white: #FFFFFF;
  --arcuxe-magenta: #F08BFF;

  /* 3. Metallic Silver Palette */
  --arcuxe-chrome-silver: #C9CED6;
  --arcuxe-platinum: #E5E8ED;
  --arcuxe-shadow-silver: #AEB6C2;

  /* 4. Dark Theme Colors */
  --arcuxe-midnight-black: #08090D;
  --arcuxe-deep-navy: #101426;
  --arcuxe-charcoal: #1B1D27;

  /* 5. Light Theme Colors */
  --arcuxe-warm-white: #F7F7F4;
  --arcuxe-light-gray: #E8EAF0;
  --arcuxe-dark-text: #171717;
  --arcuxe-muted-gray: #9295A3;

  /* Base Body Styles */
  --body-bg: #08090D;
  --headings-color: #FFFFFF;
  --text-color: #9295A3;
  --border-subtle: rgba(201, 206, 214, 0.12);
  --border-card: #1B1D27;

  /* 6. Official Signature Brand Gradient */
  --arcuxe-signature-gradient: linear-gradient(
    120deg,
    #176BFF 0%,
    #BDEBFF 20%,
    #FFFFFF 32%,
    #C9CED6 38%,
    #FFFFFF 43%,
    #D9C8FF 54%,
    #813BFF 70%,
    #F08BFF 85%,
    #F8F9FC 93%,
    #AEB6C2 100%
  );

  /* 7. Official Metallic Chrome Effect Gradient */
  --arcuxe-metallic-chrome: linear-gradient(
    110deg,
    #8F98A6 0%,
    #E5E8ED 15%,
    #FFFFFF 26%,
    #AEB6C2 38%,
    #F8FAFF 49%,
    #C9CED6 60%,
    #FFFFFF 73%,
    #929BAA 88%,
    #E5E8ED 100%
  );
}

/* Base Document Styling — Clean, Sophisticated, Midnight Black */
body {
  background-color: var(--arcuxe-midnight-black) !important;
  color: var(--arcuxe-muted-gray);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 100px;
}

/* Metallic Chrome Text Class (Applied Sparingly to Featured Headlines) */
.text-chrome {
  background: var(--arcuxe-metallic-chrome);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* Signature Brand Gradient Text (Applied Selectively) */
.text-gradient-signature {
  background: var(--arcuxe-signature-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* Electric Blue Accent Text */
.text-electric-blue {
  color: var(--arcuxe-electric-blue) !important;
}

.text-violet {
  color: var(--arcuxe-violet) !important;
}

.text-white {
  color: #FFFFFF !important;
}

/* ==========================================================================
   NAVIGATION & HEADER (Flush, Minimalist, Agency Typography - Matching Template)
   ========================================================================== */
.main-header.header-style-five {
  background: transparent !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.main-header.header-style-five .outer-box {
  padding: 24px 48px 0;
  max-width: 1720px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .main-header.header-style-five .outer-box {
    padding: 16px 24px 0;
  }
}

.main-header .main-box {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img {
  max-height: 38px;
  width: auto;
  object-fit: contain;
}

/* Agency Navigation Typography */
.main-menu .navigation {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu .navigation > li {
  margin: 0 !important;
  padding: 0 !important;
}

.main-menu .navigation > li > a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--title-font-family, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 8px 0 !important;
  position: relative !important;
  display: inline-block !important;
  transition: all 0.25s ease !important;
}

.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
  color: #FFFFFF !important;
}

.main-menu .navigation > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--arcuxe-electric-blue, #176BFF);
  transition: all 0.25s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.main-menu .navigation > li.current > a::after,
.main-menu .navigation > li:hover > a::after {
  width: 100%;
}

/* Sticky Header */
.sticky-header {
  background: rgba(8, 9, 13, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
  padding: 12px 0 !important;
}

.sticky-header .main-menu .navigation {
  gap: 28px;
}

.sticky-header .main-menu .navigation > li > a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a {
  color: #FFFFFF !important;
}

/* ==========================================================================
   COMPONENT RULES: BUTTONS (Template Signature Style: Pill with Circular Arrow)
   ========================================================================== */
.theme-btn-one,
.header-btn .theme-btn-one,
.arcuxe-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 4px 6px 4px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  background: var(--arcuxe-electric-blue, #176BFF) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(23, 107, 255, 0.35) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.theme-btn-one i,
.header-btn .theme-btn-one i,
.arcuxe-btn-primary i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #08090D !important;
  font-size: 14px !important;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
  flex-shrink: 0 !important;
}

.theme-btn-one:hover,
.header-btn .theme-btn-one:hover,
.arcuxe-btn-primary:hover {
  background: #0f5be8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(23, 107, 255, 0.5) !important;
  color: #FFFFFF !important;
}

.theme-btn-one:hover i,
.header-btn .theme-btn-one:hover i,
.arcuxe-btn-primary:hover i {
  transform: rotate(45deg) !important;
}

.theme-btn-two,
.arcuxe-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.theme-btn-two:hover,
.arcuxe-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   01. HOME 1 HERO BANNER SECTION (Full Viewport Height & Proportional Typography)
   ========================================================================== */
.banner-section {
  position: relative;
  min-height: 80vh !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 175px 0 35px !important;
  background-color: var(--arcuxe-midnight-black);
  overflow: hidden;
}

.banner-section .bg-banner-img {
  position: absolute;
  inset: 0;
  background: url('../images/banner/banner1-1.png') center/cover no-repeat !important;
  opacity: 0.72 !important;
  filter: contrast(1.1) brightness(1.05) !important;
  z-index: 0;
}

.banner-section .banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 13, 0.25) 0%, rgba(8, 9, 13, 0.58) 55%, #08090D 100%) !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  pointer-events: none;
  z-index: 1;
}

.banner-section .inner-container {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

@media (max-width: 768px) {
  .banner-section .inner-container {
    padding: 0 20px;
  }
}

.banner-section .content-box {
  max-width: 980px;
}

/* Remove AI slop pill badge */
.hero-eyebrow {
  display: none !important;
}

/* Title: styled with CreatoDisplay */
.banner-section .content-box .title {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 78px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 22px;
}

@media (max-width: 1200px) {
  .banner-section .content-box .title {
    font-size: 60px;
    line-height: 1.1;
  }
}

@media (max-width: 768px) {
  .banner-section {
    padding: 150px 0 50px;
    min-height: auto;
  }
  .banner-section .content-box .title {
    font-size: 40px;
    line-height: 1.15;
  }
}

/* Reduced size body text (body-16-400: Manrope 16px, line-height 30.4px) */
.hero-lead-text {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 30.4px !important;
  color: rgba(229, 232, 237, 0.76) !important;
  max-width: 640px !important;
  margin-bottom: 34px !important;
  display: block !important;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Home 1 Bottom Statement Row */
.banner-section .bottom-box {
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 206, 214, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-meta-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arcuxe-muted-gray);
  margin-bottom: 4px;
}

.hero-meta-value {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.hero-style-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arcuxe-chrome-silver);
}

/* ==========================================================================
   SECTION HEADINGS & EYEBROWS (Consistent across all sections)
   ========================================================================== */
.sec-title .sub-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(16, 20, 38, 0.7) !important;
  border: 1px solid rgba(201, 206, 214, 0.16) !important;
  border-radius: 100px !important;
  color: var(--arcuxe-platinum) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.sec-title .sub-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--arcuxe-electric-blue);
  border-radius: 50%;
}

.sec-title .title {
  color: #FFFFFF;
  font-weight: 700;
}

/* ==========================================================================
   02. ABOUT SECTION
   ========================================================================== */
.about-section-five {
  background: var(--arcuxe-midnight-black);
  padding: 60px 0 100px;
  position: relative;
}

.about-section-five .title-shadow {
  color: rgba(201, 206, 214, 0.03) !important;
}

.about-section-five .circle-container {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 0 32px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 140px !important;
  height: 140px !important;
  border: 1px solid rgba(201, 206, 214, 0.2) !important;
  background: radial-gradient(circle at center, #121826 0%, #080A10 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(23, 107, 255, 0.25) !important;
  overflow: visible !important;
  z-index: 10 !important;
}

.about-section-five .circle-container svg {
  width: 140px !important;
  height: 140px !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.about-section-five .circle-container svg text textPath {
  font-family: var(--font-primary, 'CreatoDisplay', 'Manrope', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  fill: #E5E8ED !important;
  text-transform: uppercase !important;
}

.about-section-five .circle-container .logo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  line-height: 60px !important;
  background: transparent !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.about-section-five .circle-container .logo img {
  max-height: 38px !important;
  width: auto !important;
  filter: drop-shadow(0 0 10px rgba(23, 107, 255, 0.7)) !important;
}

.about-section-five .image-box img {
  border-radius: 20px;
  border: 1px solid var(--border-card);
}

/* ==========================================================================
   MARQUEE TICKER (Silver / Metallic Editorial Stream)
   ========================================================================== */
.marquee-section-two {
  background: #0C0E16;
  border-top: 1px solid rgba(201, 206, 214, 0.1);
  border-bottom: 1px solid rgba(201, 206, 214, 0.1);
  padding: 18px 0 !important;
}

.marquee-group .text {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--arcuxe-chrome-silver);
  transition: color 0.25s ease;
}

.marquee-group .text:hover {
  color: #FFFFFF;
}

.marquee-icon img {
  height: 22px;
  width: auto;
  opacity: 0.85;
}

/* ==========================================================================
   03. SERVICES SECTION (Deep Navy surfaces, clean borders, no neon)
   ========================================================================== */
.services-section11 {
  background: var(--arcuxe-midnight-black);
  padding: 120px 0;
  position: relative;
}

.service-block11 .inner-block {
  border-bottom: 1px solid rgba(201, 206, 214, 0.12);
  background: transparent;
  padding: 28px 20px;
  border-radius: 14px;
  transition: all 0.3s ease;
}

.service-block11.active .inner-block,
.service-block11:hover .inner-block {
  background: var(--arcuxe-deep-navy);
  border-color: rgba(201, 206, 214, 0.2);
}

.service-block11 .title-box .number {
  font-size: 18px;
  font-weight: 700;
  color: var(--arcuxe-electric-blue);
  font-family: monospace;
}

.service-block11 .title-box .title {
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
  transition: color 0.25s ease;
}

.service-block11:hover .title-box .title {
  color: var(--arcuxe-platinum);
}

.service-block11 .title-box .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201, 206, 214, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all 0.3s ease;
}

.service-block11:hover .title-box .icon {
  background: var(--arcuxe-electric-blue);
  border-color: var(--arcuxe-electric-blue);
  transform: rotate(45deg);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.service-tags .tag {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(27, 29, 39, 0.7);
  border: 1px solid rgba(201, 206, 214, 0.14);
  color: var(--arcuxe-platinum);
  font-weight: 500;
}

.service-block11 .image-column .image img {
  border-radius: 16px;
  border: 1px solid var(--border-card);
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* ==========================================================================
   04. OUR APPROACH (Clean Architectural Cards)
   ========================================================================== */
.approach-section {
  background: #0A0C13;
  padding: 120px 0;
  position: relative;
}

.approach-card {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 18px;
  padding: 36px 30px;
  height: 100%;
  transition: all 0.3s ease;
}

.approach-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 107, 255, 0.5);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.approach-card .step-num {
  font-size: 38px;
  font-weight: 800;
  color: var(--arcuxe-electric-blue);
  margin-bottom: 18px;
  font-family: monospace;
}

.approach-card .title {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.approach-card .text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--arcuxe-muted-gray);
}

/* ==========================================================================
   05. PROJECTS / PORTFOLIO (Charcoal / Deep Navy Cards)
   ========================================================================== */
.projects-section-four {
  background: var(--arcuxe-midnight-black);
  padding: 120px 0 100px;
}

.portfolio-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 50px;
}

.portfolio-filter-btn {
  background: rgba(16, 20, 38, 0.6);
  border: 1px solid rgba(201, 206, 214, 0.14);
  padding: 8px 22px;
  border-radius: 100px;
  color: var(--arcuxe-chrome-silver);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.25s ease;
}

.portfolio-filter-btn.active,
.portfolio-filter-btn:hover {
  background: var(--arcuxe-electric-blue);
  border-color: var(--arcuxe-electric-blue);
  color: #FFFFFF;
}

.project-card-arcuxe {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.project-card-arcuxe:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 107, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.project-card-arcuxe .card-img-wrap {
  position: relative;
  height: 310px;
  overflow: hidden;
}

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

.project-card-arcuxe:hover .card-img-wrap img {
  transform: scale(1.03);
}

.project-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(8, 9, 13, 0.85);
  border: 1px solid rgba(201, 206, 214, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--arcuxe-platinum);
  text-transform: uppercase;
}

.project-card-arcuxe .card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-card-arcuxe .category-year {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--arcuxe-electric-blue);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.project-card-arcuxe .project-name {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.project-card-arcuxe .project-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--arcuxe-muted-gray);
  flex: 1;
  margin-bottom: 22px;
}

/* ==========================================================================
   06. WHY ARCUXE (4 Strategic Pillars)
   ========================================================================== */
.why-choose-us {
  background: #0A0C13;
  padding: 120px 0;
}

.why-feature-card {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 18px;
  padding: 28px 24px;
  margin-bottom: 20px;
  transition: all 0.25s ease;
}

.why-feature-card:hover {
  background: var(--arcuxe-charcoal);
  border-color: rgba(23, 107, 255, 0.4);
  transform: translateX(4px);
}

.why-feature-card .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(23, 107, 255, 0.12);
  border: 1px solid rgba(23, 107, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arcuxe-electric-blue);
  font-size: 20px;
  margin-bottom: 16px;
}

.why-feature-card .title {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.why-feature-card .text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--arcuxe-muted-gray);
}

/* ==========================================================================
   07. DIGITAL PRODUCTS
   ========================================================================== */
.digital-products-section {
  background: var(--arcuxe-midnight-black);
  padding: 120px 0;
  position: relative;
}

.product-concept-card {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.14);
  border-radius: 20px;
  padding: 34px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.product-concept-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 107, 255, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.product-concept-card .concept-label {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arcuxe-platinum);
  background: rgba(27, 29, 39, 0.8);
  border: 1px solid rgba(201, 206, 214, 0.2);
  border-radius: 100px;
  margin-bottom: 18px;
}

.product-concept-card .prod-title {
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.product-concept-card .prod-tagline {
  font-size: 13px;
  font-weight: 600;
  color: var(--arcuxe-electric-blue);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-concept-card .prod-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arcuxe-muted-gray);
  flex: 1;
  margin-bottom: 24px;
}

/* ==========================================================================
   08. PRICING SECTION
   ========================================================================== */
.pricing-section-arcuxe {
  background: #0A0C13;
  padding: 120px 0;
  position: relative;
}

.pricing-card-arcuxe {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.14);
  border-radius: 24px;
  padding: 42px 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card-arcuxe.featured {
  background: #12162C;
  border: 2px solid var(--arcuxe-electric-blue);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}

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

.pricing-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--arcuxe-electric-blue);
  color: #FFFFFF;
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-card-arcuxe .tier-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pricing-card-arcuxe .tier-price {
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  font-family: monospace;
}

.pricing-card-arcuxe .tier-price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--arcuxe-muted-gray);
}

.pricing-card-arcuxe .tier-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--arcuxe-muted-gray);
  margin-bottom: 24px;
  min-height: 45px;
}

.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex: 1;
}

.pricing-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--arcuxe-platinum);
  margin-bottom: 12px;
}

.pricing-features-list li i {
  color: var(--arcuxe-electric-blue);
  font-size: 13px;
}

/* ==========================================================================
   09. JOURNAL SECTION
   ========================================================================== */
.blog-section-five {
  background: var(--arcuxe-midnight-black);
  padding: 120px 0;
}

.blog-block-five .inner-block {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.blog-block-five:hover .inner-block {
  transform: translateY(-6px);
  border-color: rgba(23, 107, 255, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.blog-block-five .image-box {
  height: 200px;
  overflow: hidden;
}

.blog-block-five .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-block-five:hover .image-box img {
  transform: scale(1.04);
}

.blog-block-five .content-box {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-block-five .meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--arcuxe-electric-blue);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog-block-five .title {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  color: #FFFFFF;
  flex: 1;
  margin-bottom: 16px;
}

.blog-block-five .read-more {
  color: var(--arcuxe-chrome-silver);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s ease;
}

.blog-block-five:hover .read-more {
  color: var(--arcuxe-electric-blue);
}

/* ==========================================================================
   10. CAPABILITIES & COLLABORATION
   ========================================================================== */
.capabilities-section {
  background: #0A0C13;
  padding: 120px 0;
  position: relative;
}

.capability-card {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 18px;
  padding: 34px 28px;
  height: 100%;
  transition: all 0.3s ease;
}

.capability-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 107, 255, 0.4);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.capability-card .cap-icon {
  font-size: 28px;
  color: var(--arcuxe-electric-blue);
  margin-bottom: 18px;
}

.capability-card .cap-title {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.capability-card .cap-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arcuxe-muted-gray);
}

/* ==========================================================================
   11. CONTACT SECTION
   ========================================================================== */
.contact-section-two {
  background: var(--arcuxe-midnight-black);
  padding: 120px 0;
}

.contact-column .inner-column {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.15);
  border-radius: 24px;
  padding: 44px 36px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}

.contact-column form input,
.contact-column form select,
.contact-column form textarea {
  width: 100%;
  background: rgba(8, 9, 13, 0.6) !important;
  border: 1px solid rgba(201, 206, 214, 0.16) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  font-size: 14px;
  transition: border-color 0.25s ease;
}

.contact-column form select option {
  background: #08090D;
  color: #FFFFFF;
}

.contact-column form input:focus,
.contact-column form select:focus,
.contact-column form textarea:focus {
  border-color: var(--arcuxe-electric-blue) !important;
  outline: none;
}

.contact-info-email {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  transition: color 0.25s ease;
}

.contact-info-email:hover {
  color: var(--arcuxe-electric-blue);
}

/* Form Toast */
.form-success-toast {
  display: none;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 10px;
  background: rgba(23, 107, 255, 0.12);
  border: 1px solid rgba(23, 107, 255, 0.35);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}

/* Publishing / Editorial Notes */
.publishing-note {
  font-size: 13px;
  color: var(--arcuxe-muted-gray);
  letter-spacing: 0.02em;
  font-style: italic;
}

.publishing-note i {
  color: var(--arcuxe-electric-blue);
  margin-right: 6px;
}

/* ==========================================================================
   12. FOOTER SECTION
   ========================================================================== */
.footer-section-three {
  background: #050609 !important;
  border-top: 1px solid rgba(201, 206, 214, 0.1);
  padding-top: 80px;
  position: relative;
}

.footer-section-three .shape-1,
.footer-section-three .shape-2,
.footer-section-three .shape-3,
.footer-section-three .shape-4,
.footer-section-three .shape-5,
.footer-section-three .shape-6 {
  display: none !important;
}

.footer-section-three .footer-brand-logo {
  max-height: 42px;
  width: auto;
  margin-bottom: 16px;
}

.footer-section-three .upper-box .inner-box {
  background: var(--arcuxe-deep-navy);
  border: 1px solid rgba(201, 206, 214, 0.12);
  border-radius: 20px;
}

.footer-contact-items input {
  background: rgba(8, 9, 13, 0.6);
  border: 1px solid rgba(201, 206, 214, 0.16);
  border-radius: 100px;
  color: #FFFFFF;
}

.footer-contact-items button {
  background: var(--arcuxe-electric-blue);
  border-radius: 50%;
  color: #FFFFFF;
}

.footer-bottom {
  border-top: 1px solid rgba(201, 206, 214, 0.08);
  padding: 24px 0;
}

.footer-bottom p {
  color: var(--arcuxe-muted-gray);
  font-size: 14px;
}


/* ==========================================================================
   SERVICES SECTION (Image 2 - 3x2 Grid with Dotted Mesh Cards)
   ========================================================================== */
.services-section {
  position: relative;
  background-color: var(--arcuxe-midnight-black);
  padding: 120px 0 100px;
  overflow: hidden;
}

.services-section .sec-title .sub-title {
  color: var(--arcuxe-electric-blue);
  margin-bottom: 14px;
}

.color-accent-growth {
  background: linear-gradient(135deg, #FF6B4A 0%, #FF3D1F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-block {
  position: relative;
  height: 100%;
}

.service-block .inner-block {
  position: relative;
  background-color: #0E1017;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 44px 38px 40px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
  transition: all 0.35s ease;
  z-index: 1;
}

.service-block .shape1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: auto;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.service-block .shape1 img {
  width: 100%;
  height: auto;
  display: block;
}

.service-block .icon {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.service-block .icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.service-block .title {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
}

.service-block .title a {
  color: #FFFFFF !important;
  transition: color 0.25s ease;
}

.service-block .text {
  position: relative;
  z-index: 2;
  color: rgba(229, 232, 237, 0.7);
  margin-bottom: 28px;
  flex-grow: 1;
}

.service-button-one {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.service-button-one i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.service-button-one:hover i {
  transform: translateX(4px);
}

/* Featured / Hover state (matching Card 2 in Image 2) */
.service-block:hover .inner-block,
.service-block.featured-card .inner-block {
  border-color: #FF5331 !important;
  background-color: #12141D !important;
}

.service-block:hover .shape1,
.service-block.featured-card .shape1 {
  opacity: 1;
}

.service-block.featured-card .arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF5331;
  color: #FFFFFF;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.service-block.featured-card:hover .arrow-circle {
  transform: scale(1.08);
}

/* 6th Slot: Service Content Box */
.service-contect-box {
  padding: 30px 24px 30px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}

/* ==========================================================================
   APPROACH / HOW WE WORK SECTION (Image 3 - 3D Card Flip Animation)
   ========================================================================== */
.approach-section {
  position: relative;
  background-color: var(--arcuxe-midnight-black);
  padding: 120px 0 100px;
}

.approach-card-wrap {
  perspective: 1200px;
  height: 100%;
}

.approach-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 290px;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px;
  cursor: pointer;
}

/* Trigger 3D Card Flip on hover - NO border glow, NO card lift */
.approach-card-wrap:hover .approach-card {
  transform: rotateY(180deg);
}

.approach-card-front,
.approach-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 40px 32px;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Front Face: Dark Navy, electric blue number, muted text */
.approach-card-front {
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotateY(0deg);
  z-index: 2;
}

.approach-card-front .step-num {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 38px;
  font-weight: 700;
  color: var(--arcuxe-electric-blue, #176BFF);
  margin-bottom: 22px;
  line-height: 1;
}

.approach-card-front .title {
  color: #FFFFFF !important;
  margin-bottom: 12px;
}

.approach-card-front .text {
  color: rgba(229, 232, 237, 0.72) !important;
  font-size: 15px;
  line-height: 1.6;
}

/* Back Face: Card Color Change to Electric Blue Gradient & Text Color Change to Pure White */
.approach-card-back {
  background: linear-gradient(135deg, #176BFF 0%, #0042BD 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transform: rotateY(180deg);
  z-index: 1;
  color: #FFFFFF !important;
}

.approach-card-back .step-num {
  font-family: 'CreatoDisplay', 'Creato Display', sans-serif !important;
  font-size: 38px;
  font-weight: 700;
  color: #FFFFFF !important;
  margin-bottom: 22px;
  line-height: 1;
  opacity: 0.95;
}

.approach-card-back .title {
  color: #FFFFFF !important;
  margin-bottom: 12px;
}

.approach-card-back .text {
  color: #FFFFFF !important;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.95;
}

.approach-card-back .step-tag {
  margin-top: auto;
  color: #FFFFFF !important;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}

/* Clean up old digital-products-section rules if any */
.digital-products-section {
  display: none !important;
}


/* ==========================================================================
   WHO WE ARE SPACING & TITLE-SHADOW FIX (Remove Massive Empty Space)
   ========================================================================== */
.about-section-five {
  background: var(--arcuxe-midnight-black) !important;
  padding: 40px 0 60px !important;
  position: relative !important;
}

/* Make ghost title shadow absolute so it takes ZERO static space */
.about-section-five .title-shadow,
.title-shadow {
  position: absolute !important;
  top: 10px !important;
  right: 40px !important;
  font-size: 130px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.03) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

/* Remove red/orange blur blob from template */
.about-section-five .shape2 {
  display: none !important;
}

.about-section-five .sec-title {
  margin-bottom: 24px !important;
}

/* ==========================================================================
   SERVICES SECTION: REMOVE ALL ORANGE (ARCUXE Electric Blue & Metallic Theme)
   ========================================================================== */
.services-section {
  position: relative;
  background-color: var(--arcuxe-midnight-black) !important;
  padding: 50px 0 70px !important;
  overflow: hidden;
}

/* Change "For Growth" from orange to Electric Blue */
.color-accent-growth {
  background: linear-gradient(135deg, #176BFF 0%, #60A5FA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #176BFF !important;
}

.services-section .sec-title .sub-title {
  color: var(--arcuxe-electric-blue, #176BFF) !important;
  margin-bottom: 12px !important;
}

/* ==========================================================================
   ARCUXE SERVICE CARDS: PURE ELECTRIC BLUE & CHROME (ZERO ORANGE)
   ========================================================================== */
.service-block::before,
.service-block::after,
.service-block:hover::before,
.service-block:hover::after {
  background: conic-gradient(
    from var(--gradient-angle),
    #176BFF,
    rgba(23, 107, 255, 0.08),
    #00E5FF,
    rgba(0, 229, 255, 0.08),
    #176BFF
  ) !important;
}

.service-block .inner-block {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background-color: #0E1017 !important;
  border-radius: 16px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-block:hover .inner-block,
.service-block.featured-card .inner-block {
  border-color: rgba(23, 107, 255, 0.55) !important;
  background-color: #111420 !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(23, 107, 255, 0.25) !important;
}

/* Service Card Icons: White by default, glowing electric blue on hover (NEVER orange) */
.service-block .icon i,
.service-block .icon img,
.service-block:hover .inner-block .icon i,
.service-block:hover .inner-block .icon img {
  -webkit-filter: brightness(0) invert(1) !important;
  filter: brightness(0) invert(1) !important;
  color: #FFFFFF !important;
}

.service-block:hover .inner-block .icon img {
  -webkit-filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(23, 107, 255, 0.85)) !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(23, 107, 255, 0.85)) !important;
}

.service-block:hover .inner-block .icon i {
  color: #176BFF !important;
}

/* Halftone dots in top-right of service card: shift hue from orange to electric blue */
.service-block .shape1 {
  opacity: 0.4 !important;
}

.service-block .inner-block .shape1 img {
  -webkit-filter: hue-rotate(185deg) brightness(0.85) opacity(0.35) !important;
  filter: hue-rotate(185deg) brightness(0.85) opacity(0.35) !important;
}

.service-block:hover .shape1,
.service-block.featured-card .shape1 {
  opacity: 0.85 !important;
}

/* Service Button & Arrow */
.service-block .service-button-one {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.service-block .service-button-one i {
  background-color: #121826 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.service-block .service-button-one i:after,
.service-block:hover .inner-block .service-button-one i:after {
  background: #176BFF !important;
  background-color: #176BFF !important;
}

.service-block:hover .inner-block .service-button-one {
  color: #176BFF !important;
}

.service-block .title a:hover {
  color: #176BFF !important;
}

.service-block.featured-card .arrow-circle {
  background: var(--arcuxe-electric-blue, #176BFF) !important;
  color: #FFFFFF !important;
}

/* Logo Sizing Rules */
.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img,
.footer-brand-logo {
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}