@charset "UTF-8";

/* Google Fonts: Manrope & Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Typography & Global Defaults */
body {
  font-family: 'Noto Sans', sans-serif;
  color: #616161;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Manrope', sans-serif;
}

/* ========================================================
   PRELOADER — Sleek Enterprise Dark Theme & Fast Splash
======================================================== */

body.preloader-active { overflow: hidden; }

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #02091a;
  background: radial-gradient(circle at center, #09173d 0%, #030a1c 70%, #010612 100%);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s;
  pointer-events: auto;
}

.site-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
}

/* Cube + Orbit Ring Container */
.preloader-cube-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.preloader-cube-img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.55));
  animation: preloaderFloat 2.2s ease-in-out infinite;
}

@keyframes preloaderFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.03);
  }
}

/* Neon Orbit Ring */
.preloader-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #00d2ff;
  border-right-color: rgba(16, 83, 243, 0.7);
  border-bottom-color: rgba(0, 210, 255, 0.2);
  animation: preloaderSpin 1s cubic-bezier(0.4, 0.1, 0.4, 0.9) infinite;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.15);
}

.preloader-orbit-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: preloaderSpinReverse 4s linear infinite;
}

@keyframes preloaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes preloaderSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* Meta: Title & Progress Bar */
.preloader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader-brand-title {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.preloader-accent-dot {
  width: 5px;
  height: 5px;
  background: #00d2ff;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #00d2ff;
}

.preloader-progress-track {
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.preloader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1053f3 0%, #00d2ff 100%);
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.7);
  transition: width 0.1s linear;
}

.preloader-status-text {
  font-family: 'Noto Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
}

/* ========================================================
   WOW SCROLL & ENTRANCE ANIMATION SYSTEM — Pure CSS Keyframes
   Guaranteed 60fps hardware-accelerated animations with zero
   dependencies. Robust, smooth, and works reliably in all browsers.
======================================================== */

/* Elements waiting to animate are hidden */
.wow {
  opacity: 0;
}

/* Base keyframe setup when element receives .animated */
.wow.animated {
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

/* === fadeInUp === */
.wow.fadeInUp.animated {
  animation-name: wowFadeInUp;
}
@keyframes wowFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* === fadeInDown === */
.wow.fadeInDown.animated {
  animation-name: wowFadeInDown;
}
@keyframes wowFadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -32px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* === fadeInLeft === */
.wow.fadeInLeft.animated {
  animation-name: wowFadeInLeft;
}
@keyframes wowFadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-42px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* === fadeInRight === */
.wow.fadeInRight.animated {
  animation-name: wowFadeInRight;
}
@keyframes wowFadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(42px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* === zoomIn === */
.wow.zoomIn.animated {
  animation-name: wowZoomIn;
}
@keyframes wowZoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 0.85);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Default generic fade if no directional class is present */
.wow.animated:not(.fadeInUp):not(.fadeInDown):not(.fadeInLeft):not(.fadeInRight):not(.zoomIn) {
  animation-name: wowFadeIn;
}
@keyframes wowFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* === Stagger: siblings inside .wow-stagger get cascading delays === */
.wow-stagger .wow:nth-child(1) { animation-delay: 0.05s !important; }
.wow-stagger .wow:nth-child(2) { animation-delay: 0.15s !important; }
.wow-stagger .wow:nth-child(3) { animation-delay: 0.25s !important; }
.wow-stagger .wow:nth-child(4) { animation-delay: 0.35s !important; }
.wow-stagger .wow:nth-child(5) { animation-delay: 0.45s !important; }
.wow-stagger .wow:nth-child(6) { animation-delay: 0.55s !important; }

/* ============================================================
   CUSTOM TEXT ANIMATION HELPERS (.anim-* classes)
   Use these directly in HTML for precise control.
============================================================ */

/* --- Fade-up word --- */
.anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-word.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stagger container --- */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-stagger.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.anim-stagger.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.15s; }
.anim-stagger.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.25s; }
.anim-stagger.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.35s; }
.anim-stagger.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.45s; }
.anim-stagger.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.55s; }

/* --- Directional fades --- */
.anim-fade-up    { opacity:0; transform:translateY(30px);  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim-fade-left  { opacity:0; transform:translateX(-30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim-fade-right { opacity:0; transform:translateX(30px);  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim-fade-up.in-view, .anim-fade-left.in-view, .anim-fade-right.in-view { opacity:1; transform:none; }

/* --- Shimmer text --- */
.text-shimmer-light {
  background: linear-gradient(90deg, #1053f3 0%, #00c6ff 40%, #1053f3 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3.5s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* --- Typewriter cursor --- */
.typewriter-cursor::after {
  content: '|';
  display: inline-block;
  color: #1053f3;
  font-weight: 300;
  animation: cursorBlink 0.9s step-end infinite;
  margin-left: 2px;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Counter glow --- */
.counter-pop { display:inline-block; transition: transform 0.3s ease, color 0.3s ease; }
.counter-pop.counting { color: #1053f3; transform: scale(1.06); }



/* ========================================================
   THEME-BTN (INOTEK / UFUQ TECH SIGNATURE BUTTON)
======================================================== */
.theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 14px 64px 14px 28px !important;
  background-color: #1053f3 !important;
  color: #ffffff !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 8px 24px rgba(16, 83, 243, 0.25) !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.theme-btn:hover {
  background: linear-gradient(135deg, #061153 0%, #1053f3 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(6, 17, 83, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.theme-btn .link-effect {
  position: relative !important;
  display: inline-block !important;
  height: 20px !important;
  line-height: 20px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.theme-btn .link-effect .effect-1 {
  display: block !important;
  height: 20px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  position: static !important;
  top: 0 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-btn:hover .link-effect .effect-1 {
  top: 0 !important;
  transform: translateY(-100%) !important;
}

.theme-btn .arrow-all {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #ffffff !important;
  color: #1053f3 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}

.theme-btn:hover .arrow-all {
  background-color: #ffffff !important;
  color: #061153 !important;
}

.theme-btn .arrow-all .arrow-1,
.theme-btn .arrow-all .arrow-2 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-btn .arrow-all .arrow-2 {
  transform: translate(-100%, 100%) !important;
}

.theme-btn:hover .arrow-all .arrow-1 {
  transform: translate(100%, -100%) !important;
}

.theme-btn:hover .arrow-all .arrow-2 {
  transform: translate(0, 0) !important;
}

/* Secondary Button Style */
.theme-btn.style-2 {
  background-color: transparent !important;
  border: 2px solid rgba(6, 17, 83, 0.2) !important;
  color: #061153 !important;
  box-shadow: none !important;
  padding: 13px 60px 13px 26px !important;
}

.theme-btn.style-2 .arrow-all {
  background-color: #061153 !important;
  color: #ffffff !important;
}

.theme-btn.style-2:hover {
  background-color: #061153 !important;
  color: #ffffff !important;
  border-color: #061153 !important;
}

.theme-btn.style-2:hover .arrow-all {
  background-color: #ffffff !important;
  color: #061153 !important;
}

/* Circular Rotating Text Animation */
@keyframes text-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.text-rotate-anim {
  animation: text-rotate 12s linear infinite;
  transform-origin: center center;
}

/* Feature Box Enhancements with Rich Background Design */
.tv-feature-box {
  background-color: #ffffff;
  background-image: 
    radial-gradient(circle at 92% 10%, rgba(16, 83, 243, 0.07) 0%, transparent 45%),
    radial-gradient(rgba(16, 83, 243, 0.04) 1.2px, transparent 1.2px),
    linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
  background-size: 100% 100%, 22px 22px, 100% 100%;
  padding: 40px 30px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(6, 17, 83, 0.08);
  height: 100%;
  z-index: 1;
}

/* Subtle High-Tech Corner Watermark Aura */
.tv-feature-box::after {
  content: '';
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(16, 83, 243, 0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: -1;
}

/* Top Accent Line — disabled */
.tv-feature-box::before {
  display: none;
}

.tv-feature-box:hover {
  transform: translateY(-8px);
  border-color: rgba(16, 83, 243, 0.28);
  box-shadow: 0 24px 50px rgba(6, 17, 83, 0.1), 0 0 24px rgba(16, 83, 243, 0.08);
  background-image: 
    radial-gradient(circle at 92% 10%, rgba(16, 83, 243, 0.14) 0%, transparent 55%),
    radial-gradient(rgba(16, 83, 243, 0.06) 1.2px, transparent 1.2px),
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

.tv-feature-box:hover::after {
  transform: scale(1.4);
  background: radial-gradient(circle, rgba(16, 83, 243, 0.14) 0%, transparent 70%);
}

.tv-feature-box .logo .rounded-3 {
  transition: all 0.35s ease;
}

.tv-feature-box:hover .logo .rounded-3 {
  background: #1053f3 !important;
  color: #ffffff !important;
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 8px 20px rgba(16, 83, 243, 0.3);
}

.tv-feature-box.bg-theme3 {
  background: #061153 !important;
  color: #ffffff;
}

.tv-feature-box.bg-theme3 h2 {
  color: #ffffff !important;
}

.tv-feature-box.bg-theme3 p {
  color: #a0a3b5 !important;
}

.tv-feature-box .icon-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 25px;
}

.tv-feature-box .icon-top .icon {
  width: 44px;
  height: 44px;
  background: #1053f3;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(16, 83, 243, 0.25);
}

.tv-feature-box .icon-top .icon.bg-dark {
  background: rgba(255, 255, 255, 0.12) !important;
}

.tv-feature-box:hover .icon-top .icon {
  transform: rotate(45deg) scale(1.05);
  background: #061153 !important;
  box-shadow: 0 6px 18px rgba(6, 17, 83, 0.3);
}

.tv-feature-box .logo img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

.tv-feature-box h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 15px;
  color: #061153;
  transition: color 0.3s ease;
}

.tv-feature-box:hover h2 {
  color: #1053f3;
}

.tv-feature-box p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #616161;
  margin-bottom: 0;
}

/* About Section Three Enhancements */
.tv-about-section.style-3 {
  position: relative;
}

.about-counter {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.about-counter .count-box {
  font-family: 'Manrope', sans-serif;
  font-size: 60px;
  font-weight: 800;
  color: #1053f3;
  line-height: 1;
}

.about-counter .text {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #061153;
  line-height: 1.25;
}

.about-counter .text span {
  font-size: 28px;
  color: #1053f3;
}

/* Skill Bars */
.skills .skill-item {
  margin-bottom: 25px;
}

.skills .skill-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skills .skill-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #061153;
}

.skills .skill-bar {
  height: 8px;
  background: #e8edfa;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.skills .bar-inner {
  height: 100%;
}

.skills .bar-inner .bar {
  height: 100%;
  background: #1053f3;
  border-radius: 10px;
  position: relative;
  transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.skills .skill-percentage {
  position: absolute;
  right: 0;
  top: -28px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1053f3;
}

/* Process Boxes with SVG Clip-Paths */
.process-box {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  margin: 15px;
  border: 1px solid rgba(6, 17, 83, 0.08);
  transition: all 0.4s ease;
}

.process-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(6, 17, 83, 0.08);
}

.process-box .process-img {
  width: 180px;
  height: 180px;
  margin: 0 auto 30px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(16, 83, 243, 0.12);
  border: 4px solid #ffffff;
  outline: 2px solid rgba(16, 83, 243, 0.15);
  transition: all 0.4s ease;
}

.process-box:hover .process-img {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px rgba(16, 83, 243, 0.22);
  outline-color: #1053f3;
}

.process-box .process-img img.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-box:hover .process-img img.main-img {
  transform: scale(1.08);
}

.process-box h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #061153;
  margin-bottom: 12px;
}

.process-box p {
  font-size: 15px;
  color: #616161;
  margin-bottom: 25px;
  line-height: 24px;
}

.process-box .process-number {
  width: 44px;
  height: 44px;
  background: #f4f7ff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1053f3;
  border: 1px solid rgba(16, 83, 243, 0.2);
}

/* Team Card Style 2 */
.tv-team-card.style-2 {
  background: #061153;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tv-team-card.style-2:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(6, 17, 83, 0.2);
}

.tv-team-card.style-2 .team-photo {
  position: relative;
  overflow: hidden;
  height: 280px;
}

.tv-team-card.style-2 .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
}

.tv-team-card.style-2:hover .team-photo img {
  transform: scale(1.08);
}

.tv-team-card.style-2 .team-social {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  display: flex;
  gap: 8px;
  background: rgba(6, 17, 83, 0.85);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 30px;
  transition: all 0.4s ease;
  opacity: 0;
}

.tv-team-card.style-2:hover .team-social {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.tv-team-card.style-2 .team-social a {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  transition: all 0.3s ease;
}

.tv-team-card.style-2 .team-social a:hover {
  background: #1053f3;
}

.tv-team-card.style-2 .team-info {
  padding: 20px;
  text-align: center;
}

.tv-team-card.style-2 .team-name {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.tv-team-card.style-2 .team-name a {
  color: #ffffff;
}

.tv-team-card.style-2 .team-role {
  font-size: 14px;
  color: #a0a3b5;
  margin-bottom: 0;
}

/* Marquee Group */
.tv-marquee-section {
  padding: 30px 0;
  border-top: 1px solid rgba(6, 17, 83, 0.08);
  border-bottom: 1px solid rgba(6, 17, 83, 0.08);
  background: #ffffff;
}

.marquee_mode {
  display: flex;
  align-items: center;
  gap: 50px;
  animation: marquee-scroll 25s linear infinite;
  white-space: nowrap;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee_mode:hover {
  animation-play-state: paused;
}

.marquee_mode .item img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.marquee_mode .item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Achievement Boxes */
.achivement-right-wrapper .counter-box {
  background: #ffffff;
  padding: 18px 24px;
  border-radius: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(6, 17, 83, 0.08);
  box-shadow: 0 4px 15px rgba(6, 17, 83, 0.03);
}

.achivement-right-wrapper .counter-box p {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #061153;
  margin-bottom: 0;
}

/* WhatsApp Floating Button */
.whatsapp-float-btn {
  position: fixed;
  bottom: 25px;
  left: 25px;
  width: 55px;
  height: 55px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
}

.whatsapp-float-btn:hover {
  color: #ffffff;
  transform: scale(1.1);
}

/* ========================================================
   SCROLL TO TOP (PREMIUM FLOATING ACTION BUTTON)
======================================================== */
.scrollToTop {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #1053f3 0%, #061153 100%) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 28px rgba(16, 83, 243, 0.45) !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  outline: none !important;
}

.scrollToTop.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.scrollToTop:hover {
  transform: translateY(-4px) scale(1.06) !important;
  background: linear-gradient(135deg, #00c6ff 0%, #1053f3 100%) !important;
  box-shadow: 0 14px 35px rgba(16, 83, 243, 0.6) !important;
  color: #ffffff !important;
}

.scrollToTop .arrowUp {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 18px !important;
  transition: transform 0.3s ease !important;
}

.scrollToTop:hover .arrowUp {
  transform: translateY(-2px);
}

.scrollToTop .water {
  display: none !important;
}

/* ========================================================
   FAQ ACCORDION (ENTERPRISE INOTEK STYLING & VISIBILITY FIX)
======================================================== */
.accordion-item {
  background-color: #ffffff !important;
  border: 1px solid rgba(6, 17, 83, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(6, 17, 83, 0.03) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 14px !important;
}

.accordion-item:hover {
  border-color: rgba(16, 83, 243, 0.25) !important;
  box-shadow: 0 8px 25px rgba(6, 17, 83, 0.06) !important;
}

.accordion-button {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #061153 !important;
  background-color: #ffffff !important;
  padding: 18px 24px !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.accordion-button:not(.collapsed) {
  color: #1053f3 !important;
  background-color: rgba(16, 83, 243, 0.04) !important;
  border-bottom: 1px solid rgba(16, 83, 243, 0.1) !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.accordion-body {
  color: #4b5563 !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  padding: 20px 24px !important;
  background-color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.accordion-body strong {
  color: #061153 !important;
  font-weight: 700 !important;
}

/* ========================================================
   TEXT & HERO ANIMATIONS (WOW.js + Animate.css Enhanced)
======================================================== */
.typing-cursor {
  display: inline-block;
  color: #1053f3;
  font-weight: 300;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.text-gradient-theme {
  background: linear-gradient(135deg, #1053f3 0%, #00c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* ======================================================== */
/* ADVANCED TEXT ANIMATIONS SUITE                           */
/* ======================================================== */

/* 1. Animated Shimmering Text Gradient */
.text-gradient-shimmer,
.shimmer-text {
  background: linear-gradient(90deg, #1053f3 0%, #00c6ff 25%, #7928ca 50%, #1053f3 75%, #00c6ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmerMove 4s linear infinite;
  display: inline-block;
}

/* 1b. Light Shimmer for Dark & Blue Sections */
.text-shimmer-light,
.text-white .text-gradient-shimmer,
.bg-gradient-to-r .text-gradient-shimmer,
[style*="background: #061153"] .text-gradient-shimmer,
[style*="linear-gradient"] .text-gradient-shimmer {
  background: linear-gradient(90deg, #ffffff 0%, #67e8f9 25%, #a5f3fc 50%, #ffffff 75%, #67e8f9 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShimmerMove 3.5s linear infinite !important;
  display: inline-block !important;
  filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.4));
}

/* Form Select and Option Text Visibility Fix */
select,
.form-select,
select option,
.form-select option {
  color: #061153 !important;
  background-color: #ffffff !important;
  font-family: 'Manrope', sans-serif !important;
}

select option:checked,
select option:hover,
select option:focus {
  background-color: #1053f3 !important;
  color: #ffffff !important;
}

/* Global High Contrast Text Overrides for Dark & Gradient Backgrounds */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
[style*="background: #061153"] h1, [style*="background: #061153"] h2, [style*="background: #061153"] h3,
[style*="background: #061153"] h4, [style*="background: #061153"] h5, [style*="background: #061153"] h6,
.bg-gradient-to-r h1, .bg-gradient-to-r h2, .bg-gradient-to-r h3, .bg-gradient-to-r h4, .bg-gradient-to-r h5, .bg-gradient-to-r h6,
[style*="linear-gradient"] h1, [style*="linear-gradient"] h2, [style*="linear-gradient"] h3 {
  color: #ffffff !important;
}

.text-white p,
.bg-dark p,
[style*="background: #061153"] p,
.bg-gradient-to-r p,
[style*="linear-gradient"] p {
  color: rgba(255, 255, 255, 0.88) !important;
}

@keyframes textShimmerMove {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* 2. Blinking Typing Cursor */
.typing-cursor {
  display: inline-block;
  margin-left: 2px;
  color: #1053f3;
  font-weight: 300;
  animation: blinkCursor 0.9s infinite;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 3. Text Pulse & Glow */
.text-pulse {
  animation: textPulseAnim 2.5s ease-in-out infinite;
}

@keyframes textPulseAnim {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 1px rgba(16, 83, 243, 0.2);
  }
  50% {
    opacity: 0.88;
    text-shadow: 0 0 14px rgba(16, 83, 243, 0.5);
  }
}

/* 4. Sub-title Badge with Glowing Pulse Dot and Hover Expansion */
.sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1053f3;
  margin-bottom: 12px;
  transition: letter-spacing 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sub-title:hover {
  letter-spacing: 2.8px;
}

.sub-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1053f3;
  box-shadow: 0 0 10px rgba(16, 83, 243, 0.8);
  animation: dotPulse 2s infinite ease-in-out;
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(16, 83, 243, 0.6);
  }
  50% {
    transform: scale(1.4);
    box-shadow: 0 0 14px rgba(16, 83, 243, 0.95);
  }
}

/* 5. Animated Underline for links and card titles */
.hover-underline-anim {
  position: relative;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}

.hover-underline-anim::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(90deg, #1053f3 0%, #00c6ff 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.hover-underline-anim:hover::after,
a:hover > .hover-underline-anim::after,
.group:hover .hover-underline-anim::after {
  width: 100%;
}

/* 6. Text Float Micro-Motion */
.text-float-slow {
  animation: textFloatSlow 4s ease-in-out infinite;
  display: inline-block;
}

@keyframes textFloatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 7. Animated Stat Counter Number */
.stat-number-anim {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.stat-number-anim:hover {
  transform: scale(1.08) translateY(-2px);
  color: #1053f3 !important;
}

/* 8. Text Marquee / Ticker Ribbon */
.text-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  user-select: none;
  background: #061153;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.text-marquee-content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: 36px;
  animation: textScrollMarquee 32s linear infinite;
}

.text-marquee-content span {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.text-marquee-content span i {
  color: #1053f3;
  font-size: 10px;
}

@keyframes textScrollMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.text-marquee-container:hover .text-marquee-content {
  animation-play-state: paused;
}

/* 9. Scroll Animation utilities & WOW.js integration */
.wow {
  visibility: hidden;
}

.animated,
.animate__animated {
  visibility: visible !important;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp,
.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown,
.animate__fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft,
.animate__fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight,
.animate__fadeInRight {
  animation-name: fadeInRight;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.92, 0.92, 0.92);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.zoomIn,
.animate__zoomIn {
  animation-name: zoomIn;
}

/* Staggered Delay Helpers */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }

/* Text pulse & hover effects */
.hover-text-theme:hover {
  color: #1053f3 !important;
}

.hover-glow:hover {
  box-shadow: 0 10px 30px rgba(16, 83, 243, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* ========================================================
   ENTERPRISE HERO COMMAND CENTER CONSOLE
======================================================== */
.hero-console-wrapper {
  position: relative;
  perspective: 1200px;
}

.hero-console-card {
  background: #060e28;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 75px rgba(6, 17, 83, 0.25), 0 0 50px rgba(16, 83, 243, 0.15);
  overflow: hidden;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.hero-console-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 35px 90px rgba(6, 17, 83, 0.32), 0 0 65px rgba(16, 83, 243, 0.25);
}

.hero-console-header {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.console-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.console-dot.red { background: #ff5f56; }
.console-dot.yellow { background: #ffbd2e; }
.console-dot.green { background: #27c93f; }

.hero-interactive-grid {
  position: relative;
  padding: 24px;
  background: radial-gradient(circle at 50% 25%, rgba(16, 83, 243, 0.22) 0%, rgba(6, 14, 40, 0.98) 75%);
}

.hero-metric-tile {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  transition: all 0.3s ease;
}

.hero-metric-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(16, 83, 243, 0.4);
  transform: translateY(-2px);
}

/* Floating High-Tech Cards */
.hero-floating-card {
  position: absolute;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 20px 45px rgba(6, 17, 83, 0.14);
  border: 1px solid rgba(6, 17, 83, 0.08);
  z-index: 4;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-floating-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 26px 55px rgba(6, 17, 83, 0.2);
}

.hero-floating-card.top-card {
  top: -18px;
  right: -12px;
}

.hero-floating-card.bottom-card {
  bottom: -20px;
  left: -15px;
}

/* Radar Wave and Scanning Line */
.hero-radar-pulse {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #10b981;
  border-radius: 50%;
}

.hero-radar-pulse::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: radarWave 2s infinite;
}

@keyframes radarWave {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hero-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.8), transparent);
  animation: scanlineMove 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scanlineMove {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Architecture Pulse Node */
.pulse-node {
  animation: nodeGlow 2.5s ease-in-out infinite alternate;
}

@keyframes nodeGlow {
  0% { filter: drop-shadow(0 0 4px rgba(16, 83, 243, 0.4)); }
  100% { filter: drop-shadow(0 0 14px rgba(103, 232, 249, 0.9)); }
}

/* ========================================================
   HERO IMAGE WRAPPER (replaces hero-console-wrapper)
======================================================== */
.hero-image-wrapper {
  position: relative;
  /* perspective for subtle hover 3-D tilt */
}

.hero-img-card {
  position: relative;
  border: 1px solid rgba(6, 17, 83, 0.08);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease;
}

.hero-img-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 70px rgba(6, 17, 83, 0.16);
}

/* Floating cards re-used from old console */
.hero-image-wrapper .hero-floating-card.top-card {
  top: -18px;
  right: -12px;
}

.hero-image-wrapper .hero-floating-card.bottom-card {
  bottom: -20px;
  left: -15px;
}

/* ========================================================
   TYPEWRITER CURSOR — on .typing-cursor sibling span
======================================================== */
.typing-cursor {
  display: inline-block;
  color: #1053f3;
  font-weight: 300;
  animation: cursorBlink2 0.9s step-end infinite;
  margin-left: 2px;
  opacity: 1;
}
@keyframes cursorBlink2 {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Remove ::after cursor from dynamic text if class is accidentally present */
#dynamic-hero-text.typewriter-cursor::after { display: none; }