/* ============================================
   HTP Digiway Services - Custom Styles
   ============================================ */

:root {
  --color-primary: #353740;
  --color-secondary: #4a90e2;
  --color-accent: #00d4ff;
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%), 
              url('https://dy822md8ge77v.cloudfront.net/assets/htpdigiway/hero.jpg') center/cover no-repeat;
  min-height: 100vh;
  position: relative;
}

/* ============================================
   Progress Bars
   ============================================ */
.progress-bar {
  position: relative;
  height: 8px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  border-radius: 9999px;
  transition: width 1.5s ease-out;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.8s ease forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.8s ease forwards;
}