/*
Theme Name: holisticprogressreport
Theme URI: https://holisticprogressreport.com/your-theme
Author: HolisticEvaluator.ai Team
Author URI: https://holisticprogressreport.com
Description: A custom WordPress theme for holisticprogressreport
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: holisticprogressreport
*/

    /* -------- Global -------- */
    body {
      box-sizing: border-box;
      
    }
    
    * {
      font-family: 'Poppins', sans-serif;
      
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #f97316, #1e40af);
      border-radius: 4px;
    }
    
    /* Gradient text */
    .gradient-text {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #1e40af 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* Animated gradient background */
    .animated-gradient {
      background: linear-gradient(-45deg, #fff7ed, #dbeafe, #ffedd5, #e0e7ff);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
    }
    
    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* Floating animation */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    
    .float-animation {
      animation: float 6s ease-in-out infinite;
    }
    
    .float-animation-delayed {
      animation: float 6s ease-in-out infinite;
      animation-delay: 2s;
    }
    
    .float-animation-delayed-2 {
      animation: float 6s ease-in-out infinite;
      animation-delay: 4s;
    }
    
    /* Pulse animation */
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); }
      50% { box-shadow: 0 0 40px rgba(249, 115, 22, 0.8), 0 0 60px rgba(30, 64, 175, 0.4); }
    }
    
    .pulse-glow {
      animation: pulse-glow 3s ease-in-out infinite;
    }
    
    /* Slide in animations */
    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    .slide-in-left {
      animation: slideInLeft 0.8s ease-out forwards;
    }
    
    .slide-in-right {
      animation: slideInRight 0.8s ease-out forwards;
    }
    
    .slide-in-up {
      animation: slideInUp 0.8s ease-out forwards;
    }
    
    .fade-in {
      animation: fadeIn 1s ease-out forwards;
    }
    
    .scale-in {
      animation: scaleIn 0.6s ease-out forwards;
    }
    
    /* Staggered animation delays */
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }
    .delay-800 { animation-delay: 0.8s; }
    
    /* Card hover effects */
    .card-hover {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .card-hover:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }
    
    /* Button ripple effect */
    .btn-ripple {
      position: relative;
      overflow: hidden;
    }
    
    .btn-ripple::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    .btn-ripple:hover::before {
      width: 300px;
      height: 300px;
    }
    
    /* Rotating border animation */
    @keyframes rotateBorder {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .rotating-border {
      position: relative;
    }
    
    .rotating-border::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: conic-gradient(from 0deg, #f97316, #1e40af, #f97316);
      border-radius: inherit;
      animation: rotateBorder 4s linear infinite;
      z-index: -1;
    }
    
    /* Progress bar animation */
    @keyframes progressFill {
      from { width: 0%; }
      to { width: 100%; }
    }
    
    .progress-fill {
      animation: progressFill 2s ease-out forwards;
    }
    
    /* Typewriter effect */
    @keyframes typewriter {
      from { width: 0; }
      to { width: 100%; }
    }
    
    @keyframes blink {
      50% { border-color: transparent; }
    }
    
    /* Parallax scrolling indicator */
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(10px); }
    }
    
    .bounce-animation {
      animation: bounce 2s ease-in-out infinite;
    }
    
    /* Shimmer effect */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    
    .shimmer {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      background-size: 200% 100%;
      animation: shimmer 2s infinite;
    }
    
    /* Counter animation */
    @keyframes countUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* Framework cards special effects */
    .framework-card {
      position: relative;
      overflow: hidden;
    }
    
    .framework-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    
    .framework-card:hover::after {
      left: 100%;
    }
    
    /* Glowing orbs */
    .glow-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.6;
      pointer-events: none;
    }
    
    /* Navigation sticky effect */
    .nav-sticky {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.9);
    }
    
    /* Section reveal animation */
    .reveal-section {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }
    
    .reveal-section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Animated underline */
    .animated-underline {
      position: relative;
    }
    
    .animated-underline::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #f97316, #1e40af);
      transition: width 0.3s ease;
    }
    
    .animated-underline:hover::after {
      width: 100%;
    }
    
    /* Icon bounce on hover */
    .icon-bounce:hover svg {
      animation: bounce 0.5s ease;
    }
    
    /* Stats counter container */
    .stats-container {
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    }
    
    /* Testimonial card */
    .testimonial-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }
    
    /* CTA section gradient */
    .cta-gradient {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #1e40af 100%);
    }
    
    /* Level progress visualization */
    .level-indicator {
      position: relative;
    }
    
    .level-indicator::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #22c55e 0%, #22c55e 25%, #facc15 25%, #facc15 50%, #f97316 50%, #f97316 75%, #1e40af 75%, #1e40af 100%);
      border-radius: 2px;
    }
    
    /* Hexagon pattern background */
    .hexagon-bg {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f97316' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    
    /* Dot pattern */
    .dot-pattern {
      background-image: radial-gradient(circle, #1e40af 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: 0.1;
    }
    
    /* Smooth scroll behavior */
    html {
      scroll-behavior: smooth;
    }
    
    /* Mobile menu animation */
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .mobile-menu-enter {
      animation: slideDown 0.3s ease-out forwards;
    }
    
    /* Number counter styling */
    .number-counter {
      font-variant-numeric: tabular-nums;
    }
    
    /* Gradient border */
    .gradient-border {
      border: 3px solid transparent;
      background: linear-gradient(white, white) padding-box,
                  linear-gradient(135deg, #f97316, #1e40af) border-box;
    }
    
    /* Image mask */
    .image-mask {
      mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }
    
    /* Custom checkbox */
    .custom-check {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #f97316;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
    }
    
    .custom-check:checked {
      background: linear-gradient(135deg, #f97316, #1e40af);
    }
    
    .custom-check:checked::after {
      content: '✓';
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
    }
    
    /* Tooltip styles */
    .tooltip {
      position: relative;
    }
    
    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    
    .tooltip:hover::after {
      opacity: 1;
    }
    
    /* Focus styles for accessibility */
    button:focus-visible,
    a:focus-visible {
      outline: 2px solid #f97316;
      outline-offset: 2px;
    }
    
    /* Loading spinner */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .spinner {
      animation: spin 1s linear infinite;
    }
    
    /* Wave animation for CTA section */
    @keyframes wave {
      0%, 100% { transform: translateX(0) translateY(0); }
      25% { transform: translateX(10px) translateY(-5px); }
      50% { transform: translateX(0) translateY(-10px); }
      75% { transform: translateX(-10px) translateY(-5px); }
    }
    
    .wave-animation {
      animation: wave 8s ease-in-out infinite;
    }
    
    /* Morphing shapes */
    @keyframes morph {
      0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
      50% { border-radius: 50% 60% 30% 60% / 30% 70% 40% 60%; }
      75% { border-radius: 40% 50% 60% 40% / 60% 40% 50% 70%; }
    }
    
    .morph-shape {
      animation: morph 10s ease-in-out infinite;
    }
    
    /* Particle effect container */
    .particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
    
    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #f97316;
      border-radius: 50%;
      opacity: 0.3;
    }
    
    @keyframes particleFloat {
      0% { transform: translateY(100%) rotate(0deg); opacity: 0; }
      10% { opacity: 0.3; }
      90% { opacity: 0.3; }
      100% { transform: translateY(-100%) rotate(360deg); opacity: 0; }
    }
    
    /* Intersection observer animation helper */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
    }