/* KB Analytics - Enhanced Custom CSS with Animations */

/* Brand Colors - Based on KB Analytics Logo */
:root {
    /* Primary Brand Colors from Logo */
    --primary-color: #0D6986;        /* Deep Teal from logo circle */
    --primary-dark: #0A5570;         /* Darker variation */
    --primary-light: #1A8FAD;        /* Lighter variation */

    --secondary-color: #2AA5C1;      /* Bright teal */
    --secondary-light: #4BBCD6;      /* Light teal */

    --accent-color: #FF9500;         /* Vibrant orange from logo bars */
    --accent-dark: #E68600;          /* Darker orange */
    --accent-light: #FFB038;         /* Lighter orange */

    /* Text Colors */
    --text-color: #2D2D2D;           /* Charcoal from logo */
    --text-light: #6B7280;           /* Muted gray */
    --text-dark: #1A1A1A;            /* Near black */

    /* Backgrounds */
    --light-bg: #F8FAFB;             /* Cool white */
    --white: #FFFFFF;

    /* Semantic Colors */
    --success-color: #10B981;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #3B82F6;

    /* Animation Speeds */
    --transition-slow: 0.5s;
    --transition-medium: 0.3s;
    --transition-fast: 0.15s;

    /* Shadows - Brand-aligned */
    --shadow-sm: 0 2px 4px rgba(13, 105, 134, 0.05);
    --shadow-md: 0 4px 8px rgba(13, 105, 134, 0.1);
    --shadow-lg: 0 8px 16px rgba(13, 105, 134, 0.15);
    --shadow-hover: 0 8px 24px rgba(13, 105, 134, 0.2);
    --shadow-glow: 0 0 20px rgba(42, 165, 193, 0.3);
    --shadow-accent: 0 4px 20px rgba(255, 149, 0, 0.3);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --blur-amount: 10px;

    /* Gradients - Brand-aligned */
    --gradient-primary: linear-gradient(135deg, #0A5570 0%, #0D6986 50%, #1A8FAD 100%);
    --gradient-secondary: linear-gradient(135deg, #2AA5C1 0%, #4BBCD6 100%);
    --gradient-accent: linear-gradient(135deg, #E68600 0%, #FF9500 50%, #FFB038 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(10, 85, 112, 0.9) 0%, rgba(13, 105, 134, 0.85) 100%);
    --gradient-hero: linear-gradient(135deg, #F8FAFB 0%, #E5F2F7 100%);
  }

  /* Dark mode variables - Brand-aligned */
  [data-theme="dark"] {
    --text-color: #E8E8E8;
    --light-bg: #1A1A1A;
    --primary-color: #1A8FAD;
    --primary-light: #2AA5C1;
    --secondary-color: #4BBCD6;
    --accent-color: #FFB038;
    --glass-bg: rgba(0, 0, 0, 0.3);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
  
  /* Global Animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
  }
  
  @keyframes slideInLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
  }
  
  @keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  @keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

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

  @keyframes scaleIn {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(42, 146, 191, 0.5); }
    50% { box-shadow: 0 0 20px rgba(42, 146, 191, 0.8); }
  }
  
  /* Base Styles */
  body {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--text-color);
    background-color: var(--light-bg);
    animation: fadeIn 1s ease-out;
    scroll-behavior: smooth;
    line-height: 1.75; /* Improved line-height for better readability */
  }
  
  /* Typography Improvements */
  p, li, span, div {
    line-height: 1.75;
  }
  
  h1 {
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  
  h2 {
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
  }
  
  h3 {
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.35;
  }
  
  h4, h5, h6 {
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
  }
  
  .section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-medium) ease-out, 
                transform var(--transition-medium) ease-out;
    padding: 6rem 0; /* Increased section padding */
  }
  
  .section.animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Improved spacing utilities */
  .py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  
  @media (max-width: 767px) {
    .section {
      padding: 4rem 0;
    }
    .py-6 {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
  }
  
  /* Navigation */
  .navbar {
    background-color: var(--primary-color) !important;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
  }
  
  .navbar.scrolled {
    background-color: rgba(35, 78, 112, 0.95) !important;
    box-shadow: var(--shadow-lg);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .navbar-brand {
    color: white !important;
    font-weight: bold;
    transition: all var(--transition-medium) ease;
  }
  
  .navbar-brand:hover img {
    transform: scale(1.05);
  }
  
  .navbar-brand img {
    max-height: 40px;
    object-fit: contain;
    transition: transform var(--transition-medium) ease;
  }
  
  .nav-link {
    color: rgba(255,255,255,0.8) !important;
    position: relative;
    padding: 0.5rem 0;
    margin: 0 1rem;
    transition: color var(--transition-medium) ease;
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-medium) ease;
  }
  
  .nav-link:hover {
    color: white !important;
  }
  
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 100%;
  }
  
  .nav-link.active {
    color: white !important;
    font-weight: 500;
  }
  
  /* Buttons - Enhanced */
  .btn {
    border-radius: 8px; /* Increased from 4px */
    font-weight: 600; /* Increased from 500 */
    padding: 0.75rem 2rem; /* Increased padding */
    transition: all var(--transition-medium) cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    min-height: 44px; /* Better touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    min-height: 52px;
  }
  
  .btn-xl {
    padding: 1.25rem 3rem;
    font-size: 1.2rem;
    min-height: 60px;
    font-weight: 700;
  }
  
  .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all var(--transition-slow) ease;
  }
  
  .btn:hover::before {
    left: 100%;
  }
  
  .btn-primary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(42, 165, 193, 0.25); /* Enhanced shadow */
    font-weight: 600;
  }
  
  .btn-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(13, 105, 134, 0.35); /* Stronger shadow on hover */
    transform: translateY(-3px); /* Increased from -2px */
    color: white !important;
  }
  
  .btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(42, 165, 193, 0.3); /* Focus ring for accessibility */
  }
  
  .btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
  
  .btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
  }
  
  .btn-outline-primary:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  
  .btn-accent {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
  }
  
  .btn-accent:hover {
    background-color: #e08601 !important;
    border-color: #e08601 !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  
  /* Cards - Enhanced */
  .card {
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    border-radius: 12px; /* Increased from 8px */
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-bottom: 20px;
    background-color: white;
  }
  
  .card:hover {
    transform: translateY(-12px); /* Increased from -8px */
    box-shadow: 0 12px 32px rgba(13, 105, 134, 0.25); /* Enhanced shadow */
    border-color: rgba(42, 165, 193, 0.2);
  }
  
  .card-body {
    padding: 2rem; /* Increased from default */
  }
  
  @media (max-width: 767px) {
    .card-body {
      padding: 1.5rem;
    }
  }
  
  .card-img-top {
    transition: transform var(--transition-medium) ease;
  }
  
  .card:hover .card-img-top {
    transform: scale(1.05);
  }
  
  .card .icon-container {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-color: rgba(42, 146, 191, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-medium) ease;
  }
  
  .card:hover .icon-container {
    transform: rotateY(180deg);
    background-color: var(--secondary-color);
  }
  
  .card:hover .icon-container i {
    transform: rotateY(180deg);
    color: white;
  }
  
  .card .icon-container i {
    font-size: 28px;
    color: var(--secondary-color);
    transition: all var(--transition-medium) ease;
  }
  
  /* Typography */
  .display-4 {
    color: var(--primary-color);
    font-weight: 800; /* Increased from 700 */
    letter-spacing: -1px;
    line-height: 1.1;
  }
  
  .display-5 {
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  
  .text-primary {
    color: var(--primary-color) !important;
  }
  
  .text-secondary {
    color: var(--secondary-color) !important;
  }
  
  .text-accent {
    color: var(--accent-color) !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
  }
  
  .section-title {
    position: relative;
    margin-bottom: 3rem; /* Increased from 40px */
    padding-bottom: 1.25rem; /* Increased from 15px */
    font-size: 2.5rem; /* Explicit size */
  }
  
  .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px; /* Increased from 60px */
    height: 4px; /* Increased from 3px */
    background: var(--gradient-accent); /* Gradient instead of solid */
    border-radius: 2px;
    transition: width var(--transition-medium) ease;
  }
  
  .section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .section:hover .section-title::after {
    width: 120px; /* Increased from 100px */
  }
  
  @media (max-width: 767px) {
    .section-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
  }
  
  /* Hero Section - Brand-aligned - Enhanced */
  .hero-section {
    position: relative;
    padding: 150px 0 120px; /* Increased padding */
    overflow: hidden;
    background: var(--gradient-hero);
  }
  
  @media (max-width: 991px) {
    .hero-section {
      padding: 120px 0 80px;
    }
  }
  
  @media (max-width: 767px) {
    .hero-section {
      padding: 100px 0 60px;
    }
  }

  .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(13, 105, 134, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255, 149, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
  }

  /* Floating shapes in background */
  .hero-section::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 105, 134, 0.12) 0%, transparent 70%);
    top: -150px;
    right: -150px;
    animation: float 6s ease-in-out infinite;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
  }
  
  .hero-title {
    opacity: 0;
    animation: slideInUp 0.8s ease forwards;
    animation-delay: 0.2s;
  }
  
  .hero-subtitle {
    opacity: 0;
    animation: slideInUp 0.8s ease forwards;
    animation-delay: 0.4s;
  }
  
  .hero-cta {
    opacity: 0;
    animation: slideInUp 0.8s ease forwards;
    animation-delay: 0.6s;
  }
  
  .hero-image {
    opacity: 0;
    animation: slideInRight 1s ease forwards;
    animation-delay: 0.4s;
  }
  
  /* Services Section */
  .service-card {
    transition: all var(--transition-medium) ease;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }
  
  .service-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    transition: all var(--transition-medium) ease;
  }
  
  .service-card:hover .service-icon {
    color: var(--accent-color);
    transform: rotateY(360deg);
  }
  
  /* Testimonials */
  .testimonial-card {
    background: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
    position: relative;
  }
  
  .testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 120px;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(42, 146, 191, 0.1);
    z-index: 0;
  }
  
  .testimonial-card:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
  }
  
  .testimonial-content {
    position: relative;
    z-index: 1;
  }
  
  .testimonial-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    transition: all var(--transition-medium) ease;
  }
  
  .testimonial-card:hover .testimonial-avatar {
    transform: scale(1.1);
    border-color: var(--accent-color);
  }
  
  .testimonial-author {
    font-weight: 600;
    color: var(--primary-color);
  }
  
  .testimonial-company {
    color: var(--secondary-color);
    font-size: 0.9rem;
  }
  
  /* Contact Form - Enhanced with floating labels effect */
  .contact-form .form-control {
    border: 2px solid #e0e0e0; /* Visible border */
    border-radius: 8px; /* Increased from 4px */
    padding: 14px 18px; /* Increased padding */
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all var(--transition-medium) ease;
    font-size: 1rem;
    min-height: 48px; /* Better touch target */
  }
  
  .contact-form .form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(42, 165, 193, 0.1), 0 4px 8px rgba(0,0,0,0.1);
    background-color: white;
    outline: none;
  }
  
  .contact-form .form-control.is-valid {
    border-color: var(--success-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310B981' d='m2.3 6.73.98-.98-.98-.98-.98.98.98.98zm1.4-1.4L4.7 3.55l.98.98-1.4 1.4-.98-.98z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
  }
  
  .contact-form .form-control.is-invalid {
    border-color: var(--danger-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23EF4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linecap='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23EF4444' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
  }
  
  .contact-form label {
    font-weight: 600; /* Increased from 500 */
    color: var(--primary-color);
    transition: all var(--transition-fast) ease;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.95rem;
  }
  
  .contact-form .form-group:focus-within label,
  .contact-form .mb-3:focus-within label {
    color: var(--secondary-color);
  }
  
  .contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
  }
  
  .contact-info {
    position: relative;
    padding: 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
    overflow: hidden;
  }
  
  .contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
    z-index: 0;
  }
  
  .contact-info:hover::before {
    opacity: 1;
  }
  
  .contact-info-content {
    position: relative;
    z-index: 1;
  }
  
  .contact-info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
  }
  
  .contact-info-item i {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: all var(--transition-medium) ease;
  }
  
  .contact-info:hover .contact-info-item i {
    background: var(--accent-color);
    transform: rotate(360deg);
  }
  
  /* Footer - Enhanced */
  footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 60px 0 25px; /* Increased padding */
    position: relative;
    overflow: hidden;
  }
  
  footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(255, 149, 0, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(42, 165, 193, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
  
  footer > .container {
    position: relative;
    z-index: 1;
  }
  
  footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--accent-color));
  }
  
  .footer-title {
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
  }
  
  .footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-medium) ease;
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 10px;
  }
  
  .footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all var(--transition-fast) ease;
    position: relative;
    padding-left: 15px;
  }
  
  .footer-links a::before {
    content: '→';
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
    transform: translateX(-5px);
  }
  
  .footer-links a:hover {
    color: white;
    padding-left: 20px;
  }
  
  .footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
  }
  
  .social-links {
    display: flex;
    gap: 15px;
  }
  
  .social-links a {
    width: 44px; /* Increased from 36px for better touch target */
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all var(--transition-medium) ease;
    font-size: 1.1rem;
    border: 2px solid rgba(255,255,255,0.2);
  }
  
  .social-links a:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-5px) scale(1.1); /* Enhanced hover */
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);
  }
  
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 40px;
  }
  
  .footer-bottom p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
  }
  
  /* Stats Counter */
  .counter-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
  }
  
  .counter-title {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-top: 5px;
  }
  
  .counter-item {
    text-align: center;
    padding: 20px;
    transition: all var(--transition-medium) ease;
  }
  
  .counter-item:hover {
    transform: translateY(-10px);
  }
  
  .counter-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
  }
  
  /* Progress Bars */
  .skill-bar {
    margin-bottom: 20px;
  }
  
  .skill-bar-title {
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  
  .skill-bar-bg {
    background-color: #e9ecef;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .skill-bar-progress {
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--accent-color));
    width: 0;
    transition: width 1s ease-in-out;
    position: relative;
  }
  
  .skill-bar-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
  }
  
  /* Scroll to Top */
  .scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium) ease,
                visibility var(--transition-medium) ease,
                background-color var(--transition-medium) ease,
                transform var(--transition-medium) ease;
    z-index: 1000;
    box-shadow: var(--shadow-md);
  }
  
  .scroll-top.visible {
    opacity: 1;
    visibility: visible;
  }
  
  .scroll-top:hover {
    background-color: var(--primary-color);
    transform: translateY(-5px);
  }
  
  /* Loading Effects */
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(42, 146, 191, 0.1);
    border-radius: 50%;
    border-top-color: var(--secondary-color);
    animation: spin 1s linear infinite;
  }
  
  .skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    height: 15px;
    margin-bottom: 10px;
  }
  
  /* Image hover effects */
  .img-hover-zoom {
    overflow: hidden;
    border-radius: 8px;
  }
  
  .img-hover-zoom img {
    transition: transform var(--transition-medium) ease;
  }
  
  .img-hover-zoom:hover img {
    transform: scale(1.1);
  }
  
  /* Team members */
  .team-member {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
  }
  
  .team-member:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
  }
  
  .team-member img {
    transition: transform var(--transition-medium) ease;
  }
  
  .team-member:hover img {
    transform: scale(1.05);
  }
  
  .team-member-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: white;
    transform: translateY(100%);
    transition: transform var(--transition-medium) ease;
  }
  
  .team-member:hover .team-member-info {
    transform: translateY(0);
  }
  
  .team-member-name {
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .team-member-position {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  
  .team-member-social {
    margin-top: 10px;
    display: flex;
    gap: 10px;
  }
  
  .team-member-social a {
    width: 30px;
    height: 30px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all var(--transition-fast) ease;
  }
  
  .team-member-social a:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
  }
  
  /* Timeline */
  .timeline {
    position: relative;
    padding: 40px 0;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--secondary-color);
    transform: translateX(-50%);
  }
  
  .timeline-item {
    margin-bottom: 40px;
    position: relative;
  }
  
  .timeline-content {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-md);
    width: calc(50% - 30px);
    position: relative;
    transition: all var(--transition-medium) ease;
  }
  
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
  }
  
  .timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    background-color: white;
    transform: rotate(45deg);
  }
  
  .timeline-item:nth-child(odd) .timeline-content::before {
    left: -10px;
  }
  
  .timeline-item:nth-child(even) .timeline-content::before {
    right: -10px;
  }
  
  .timeline-dot {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: var(--accent-color);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all var(--transition-medium) ease;
  }
  
  .timeline-date {
    position: absolute;
    top: 20px;
    color: var(--secondary-color);
    font-weight: 600;
  }
  
  .timeline-item:nth-child(odd) .timeline-date {
    left: calc(50% + 30px);
  }
  
  .timeline-item:nth-child(even) .timeline-date {
    right: calc(50% + 30px);
  }
  
  .timeline-title {
    color: var(--primary-color);
    margin-bottom: 10px;
  }
  
  .timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
  
  .timeline-item:hover .timeline-dot {
    background-color: var(--primary-color);
    transform: translateX(-50%) scale(1.2);
  }
  
  /* FAQ Section */
  .faq-item {
    margin-bottom: 20px;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium) ease;
  }
  
  .faq-item:hover {
    box-shadow: var(--shadow-md);
  }
  
  .faq-question {
    background-color: white;
    color: var(--primary-color);
    border: none;
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-medium) ease;
  }
  
  .faq-question:after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform var(--transition-medium) ease;
  }
  
  .faq-question.active {
    background-color: var(--secondary-color);
    color: white;
  }
  
  .faq-question.active:after {
    content: '-';
    transform: rotate(180deg);
  }
  
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium) ease;
    padding: 0 20px;
  }
  
  .faq-answer.active {
    max-height: 500px;
    padding: 20px;
  }
  
  /* Projects/Portfolio */
  .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
  }
  
  .portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
  }
  
  .portfolio-item img {
    transition: transform var(--transition-medium) ease;
  }
  
  .portfolio-item:hover img {
    transform: scale(1.1);
  }
  
  .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(35, 78, 112, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
  }
  
  .portfolio-item:hover .portfolio-overlay {
    opacity: 1;
  }
  
  .portfolio-title {
    color: white;
    font-weight: 600;
    margin-bottom: 10px;
    transform: translateY(20px);
    opacity: 0;
    transition: all var(--transition-medium) ease;
    transition-delay: 0.1s;
  }
  
  .portfolio-category {
    color: var(--accent-color);
    font-size: 0.9rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all var(--transition-medium) ease;
    transition-delay: 0.2s;
  }
  
  .portfolio-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    transform: translateY(20px);
    opacity: 0;
    transition: all var(--transition-medium) ease;
    transition-delay: 0.3s;
  }
  
  .portfolio-item:hover .portfolio-title,
  .portfolio-item:hover .portfolio-category,
  .portfolio-item:hover .portfolio-links {
    transform: translateY(0);
    opacity: 1;
  }
  
  .portfolio-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all var(--transition-fast) ease;
  }
  
  .portfolio-links a:hover {
    background-color: var(--accent-color);
    color: white;
    transform: translateY(-3px);
  }
  
  /* Pricing Tables */
  .pricing-table {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
    margin-bottom: 30px;
    position: relative;
  }
  
  .pricing-table:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
  }
  
  .pricing-header {
    background-color: var(--primary-color);
    color: white;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .pricing-table.featured .pricing-header {
    background-color: var(--accent-color);
  }
  
  .pricing-header::before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
    transform: scale(0);
    transition: transform var(--transition-slow) ease;
  }
  
  .pricing-table:hover .pricing-header::before {
    transform: scale(1);
  }
  
  .pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
  }
  
  .pricing-price {
    font-size: 3rem;
    font-weight: 700;
    margin: 15px 0;
  }
  
  .pricing-period {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  
  .pricing-features {
    padding: 30px 20px;
    text-align: center;
  }
  
  .pricing-feature {
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pricing-feature i {
    color: var(--success-color);
    margin-right: 10px;
    transition: transform var(--transition-medium) ease;
  }
  
  .pricing-table:hover .pricing-feature i {
    transform: scale(1.2);
  }
  
  .pricing-cta {
    text-align: center;
    padding: 0 20px 30px;
  }
  
  .pricing-ribbon {
    position: absolute;
    top: 20px;
    right: -30px;
    transform: rotate(45deg);
    background-color: var(--accent-color);
    color: white;
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1;
    box-shadow: var(--shadow-sm);
  }
  
  /* Blog Section */
  .blog-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
    margin-bottom: 30px;
    background-color: white;
  }
  
  .blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
  }
  
  .blog-card-img {
    position: relative;
    overflow: hidden;
  }
  
  .blog-card-img img {
    transition: transform var(--transition-medium) ease;
  }
  
  .blog-card:hover .blog-card-img img {
    transform: scale(1.1);
  }
  
  .blog-card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--accent-color);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1;
    box-shadow: var(--shadow-sm);
  }
  
  .blog-card-content {
    padding: 25px;
  }
  
  .blog-card-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary-color);
    transition: color var(--transition-fast) ease;
  }
  
  .blog-card:hover .blog-card-title {
    color: var(--secondary-color);
  }
  
  .blog-card-excerpt {
    margin-bottom: 20px;
    color: var(--text-color);
  }
  
  .blog-card-meta {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-light);
  }
  
  .blog-card-meta span {
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  
  .blog-card-meta i {
    margin-right: 5px;
    color: var(--secondary-color);
  }
  
  /* Statistics - Enhanced */
  .stats-section {
    position: relative;
    padding: 100px 0; /* Increased from 80px */
    background: linear-gradient(135deg, rgba(13, 105, 134, 0.95) 0%, rgba(10, 85, 112, 0.95) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
  }
  
  .stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 50%, rgba(255, 149, 0, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(42, 165, 193, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
  
  .stats-section > .container {
    position: relative;
    z-index: 1;
  }
  
  .stats-item {
    text-align: center;
    padding: 20px;
    transition: all var(--transition-medium) ease;
  }
  
  .stats-item:hover {
    transform: translateY(-10px);
  }
  
  .stats-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    transition: all var(--transition-medium) ease;
  }
  
  .stats-item:hover .stats-icon {
    transform: rotateY(360deg);
  }
  
  .stats-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
  }
  
  .stats-text {
    font-size: 1.1rem;
    opacity: 0.8;
  }
  
  /* Call to Action */
  .cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
    transform: rotate(30deg);
  }
  
  .cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
  }
  
  .cta-text {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 30px;
  }
  
  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  /* Client/Partner Logos */
  .client-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--transition-medium) ease;
  }
  
  .client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
  }
  
  .client-logo img {
    max-height: 100%;
    max-width: 100%;
  }
  
  /* Process Steps */
  .process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  
  .process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary-color);
    z-index: 0;
  }
  
  .process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 25%;
    padding: 0 15px;
  }
  
  .process-step-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all var(--transition-medium) ease;
    position: relative;
  }
  
  .process-step-number::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transform: scale(0);
    transition: transform var(--transition-medium) ease;
    z-index: -1;
  }
  
  .process-step-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary-color);
    transition: color var(--transition-medium) ease;
  }
  
  .process-step-text {
    font-size: 0.9rem;
    color: var(--text-color);
  }
  
  .process-step:hover .process-step-number {
    color: white;
    border-color: var(--secondary-color);
    transform: translateY(-10px);
  }
  
  .process-step:hover .process-step-number::before {
    transform: scale(1);
  }
  
  .process-step:hover .process-step-title {
    color: var(--secondary-color);
  }
  
  /* Notifications */
  .custom-alert {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: slideInUp 0.4s ease forwards;
  }
  
  .custom-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
  }
  
  .custom-alert-success {
    background-color: rgba(72, 168, 104, 0.1);
    border: 1px solid rgba(72, 168, 104, 0.2);
    color: var(--success-color);
  }
  
  .custom-alert-success::before {
    background-color: var(--success-color);
  }
  
  .custom-alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: var(--danger-color);
  }
  
  .custom-alert-danger::before {
    background-color: var(--danger-color);
  }
  
  .custom-alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
    color: #856404;
  }
  
  .custom-alert-warning::before {
    background-color: var(--warning-color);
  }
  
  .custom-alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.2);
    color: var(--info-color);
  }
  
  .custom-alert-info::before {
    background-color: var(--info-color);
  }
  
  /* Animations for all pages */
  @media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeIn var(--transition-medium) ease-out;
    }
    
    .slide-up {
        animation: slideInUp var(--transition-medium) ease-out;
    }
    
    .slide-left {
        animation: slideInLeft var(--transition-medium) ease-out;
    }
    
    .slide-right {
        animation: slideInRight var(--transition-medium) ease-out;
    }
    
    .delayed-100 {
        animation-delay: 0.1s;
    }
    
    .delayed-200 {
        animation-delay: 0.2s;
    }
    
    .delayed-300 {
        animation-delay: 0.3s;
    }
    
    .delayed-400 {
        animation-delay: 0.4s;
    }
  }
  
  /* Responsive Design */
  @media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--primary-color);
        padding: 15px;
        border-radius: 8px;
        box-shadow: var(--shadow-md);
    }
    
    .process-steps {
        flex-direction: column;
    }
    
    .process-steps::before {
        display: none;
    }
    
    .process-step {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -10px;
    }
    
    .timeline-dot {
        left: 30px;
    }
    
    .timeline-item:nth-child(odd) .timeline-date,
    .timeline-item:nth-child(even) .timeline-date {
        left: 0;
        top: -30px;
        right: auto;
    }
  }
  
  @media (max-width: 767px) {
    .hero-section {
        text-align: center;
    }
    
    .hero-image {
        margin-top: 30px;
    }
    
    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .contact-info {
        margin-bottom: 30px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    /* Mobile typography improvements */
    body {
      font-size: 16px; /* Minimum readable size */
    }
    
    h1 {
      font-size: 2rem;
    }
    
    h2 {
      font-size: 1.75rem;
    }
    
    h3 {
      font-size: 1.5rem;
    }
    
    /* Better mobile touch targets */
    .btn {
      min-width: 120px;
      padding: 0.875rem 1.5rem;
    }
    
    .nav-link {
      padding: 0.75rem 0;
      min-height: 44px;
      display: flex;
      align-items: center;
    }
    
    /* Improved mobile spacing */
    .section {
      padding: 3rem 0;
    }
    
    .card-body {
      padding: 1.25rem;
    }
  }
  
  /* Lightbox styles */
  .lightbox-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .lightbox-container.active {
    opacity: 1;
    visibility: visible;
  }
  
  .lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
  }
  
  .lightbox-container.active .lightbox-content {
    transform: scale(1);
  }
  
  .lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  
  .lightbox-caption {
    color: white;
    margin-top: 15px;
    font-size: 1rem;
  }
  
  .lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  body.lightbox-open {
    overflow: hidden;
  }
  
  /* Testimonial carousel */
  .testimonial-item {
    display: none;
  }
  
  .testimonial-item.active {
    display: block;
    animation: fadeIn 0.5s ease;
  }
  
  .carousel-prev,
  .carousel-next {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .carousel-dots {
    margin-top: 20px;
  }
  
  .carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    margin: 0 5px;
    padding: 0;
    background-color: rgba(42, 146, 191, 0.3);
    transition: all var(--transition-fast) ease;
  }
  
  .carousel-dot.active,
  .carousel-dot:hover {
    background-color: var(--secondary-color);
  }
  
  /* Logo fixes */
  .navbar-brand img {
    max-height: 30px;  /* Smaller logo */
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-medium) ease;
  }
  
  /* Better navbar handling when scrolled */
  .navbar {
    padding: 15px 0;
    transition: all 0.3s ease;
  }
  
  .navbar.scrolled {
    padding: 8px 0;
    background-color: rgba(35, 78, 112, 0.95) !important;
  }
  
  /* Fix for content padding to account for fixed navbar */
  main {
    padding-top: 70px;
  }
  
  /* Add padding to the hero section */
  .hero-section {
    padding-top: 100px;
  }

  /* Ensure the card doesn't interfere with the portfolio overlay */
  .card .portfolio-item {
    position: relative;
  }

  /* Maintain the overlay effect */
  .card .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(35, 78, 112, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .card .portfolio-item:hover .portfolio-overlay {
    opacity: 1;
  }

  /* Hide all carousel dots beyond the first 5 */
  .carousel-dots .carousel-dot:nth-child(n+6) {
    display: none !important;
  }
  
  /* Make sure the container doesn't wrap to multiple lines */
  .carousel-dots {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
    justify-content: center;
  }

  /* Contact Info Card Styles - Add to your custom.css */

  .contact-info-card {
    background: white;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: var(--shadow-md);
    height: 100%;
    transition: all var(--transition-medium) ease;
  }

  .contact-info-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
  }

  .contact-info-card .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(42, 146, 191, 0.1);
    color: var(--secondary-color);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all var(--transition-medium) ease;
  }

  .contact-info-card:hover .icon-circle {
    background: var(--secondary-color);
    color: white;
  }

  .contact-info-card h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
  }

  .contact-info-card p {
    color: var(--text-color);
    margin-bottom: 10px;
  }

  .contact-link {
    color: var(--secondary-color);
    font-weight: 600;
    transition: all var(--transition-fast) ease;
    position: relative;
    display: inline-block;
  }

  .contact-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-medium) ease;
  }

  .contact-link:hover {
    color: var(--accent-color);
    text-decoration: none;
  }

  .contact-link:hover::after {
    width: 100%;
  }

  /* Journey Timeline Styling */
  .journey-timeline {
    position: relative;
    padding-left: 40px;
  }

  .journey-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  }

  .journey-item {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 10px;
  }

  .journey-year {
    position: absolute;
    left: -40px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
  }

  .journey-year::before {
    content: attr(data-year);
    position: absolute;
    left: -20px;
    top: 0;
    width: max-content;
    font-size: 0.9rem;
    color: var(--primary-color);
  }

  .journey-title {
    color: var(--primary-color);
    margin-bottom: 10px;
    position: relative;
  }

  /* Process Timeline Styling */
  .process-timeline {
    position: relative;
    margin-left: 20px;
  }

  .process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    background-color: var(--secondary-color);
  }

  .process-timeline-item {
    display: flex;
    margin-bottom: 30px;
    position: relative;
  }

  .process-timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    z-index: 1;
  }

  .process-timeline-content {
    flex: 1;
    padding: 0 0 0 10px;
  }

  .process-timeline-content h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
  }

  /* Benefits Styling */
  .process-benefits {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow-md);
    height: 100%;
  }

  .benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(42, 146, 191, 0.1);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .benefit-content {
    flex: 1;
  }

  .benefit-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
  }

  /* Technologies Styling - Enhanced */
  .tech-card {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px; /* Increased from 8px */
    padding: 1.75rem; /* Increased from 20px */
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium) ease;
    height: 100%;
    position: relative;
    cursor: pointer;
  }
  
  .tech-card:hover {
    transform: translateY(-8px) scale(1.02); /* Added scale */
    box-shadow: 0 8px 24px rgba(13, 105, 134, 0.2);
    border-color: rgba(42, 165, 193, 0.3);
  }
  
  .tech-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(42, 165, 193, 0.05) 0%, rgba(255, 149, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
    pointer-events: none;
  }
  
  .tech-card:hover::after {
    opacity: 1;
  }

  /* Google Cloud Platform Highlight */
  .tech-card.gcp-highlight {
    border: 2px solid rgba(66, 133, 244, 0.3);
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.05) 0%, rgba(52, 168, 83, 0.05) 100%);
  }

  .tech-card.gcp-highlight:hover {
    border-color: rgba(66, 133, 244, 0.5);
    box-shadow: 0 8px 16px rgba(66, 133, 244, 0.2);
  }

  .tech-card.gcp-highlight .tech-icon {
    color: #4285F4;
  }

  .tech-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
  }

  .tech-card h6 {
    margin-bottom: 0;
    font-size: 0.95rem;
  }

  .tech-card h5 {
    margin-bottom: 0;
  }

  /* Team Enhancement */
  .team-member-bio {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin: 10px 0;
    display: none;
  }

  .team-member:hover .team-member-bio {
    display: block;
  }

  .section-subtitle {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 40px;
    font-size: 1.1rem;
  }

  /* Remove shadows and borders from hero image */
  .hero-image img {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Optional: If you want a clean integration with the background */
  .hero-image {
    background: transparent;
  }

  /* Improved Journey Timeline CSS */
  .journey-timeline {
    position: relative;
    padding-left: 60px;
  }

  .journey-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  }

  .journey-item {
    position: relative;
    margin-bottom: 35px;
    padding-bottom: 10px;
  }

  .journey-year {
    position: absolute;
    left: -60px;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .journey-title {
    color: var(--primary-color);
    margin-bottom: 10px;
    position: relative;
    font-weight: 600;
  }

  /* For mobile responsiveness */
  @media (max-width: 767px) {
    .journey-timeline {
        padding-left: 40px;
    }
    
    .journey-year {
        left: -40px;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
  }

  /* Portfolio Styling */

  /* Portfolio Grid */
  .portfolio-grid {
    margin-top: 40px;
  }

  .portfolio-item {
    margin-bottom: 30px;
  }

  /* Portfolio Filters */
  .portfolio-filter {
    margin-bottom: 30px;
  }

  .portfolio-filter button {
    margin: 0 5px;
    transition: all var(--transition-medium) ease;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
  }

  .portfolio-filter button:hover,
  .portfolio-filter button.active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
  }

  /* Portfolio Image Container - Enhanced */
  .portfolio-image {
    position: relative;
    height: 250px; /* Increased from 200px */
    overflow: hidden;
    background: linear-gradient(135deg, rgba(13, 105, 134, 0.1) 0%, rgba(42, 165, 193, 0.1) 100%);
  }
  
  .portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium) ease;
  }
  
  .project-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, rgba(13, 105, 134, 0.05) 0%, rgba(42, 165, 193, 0.05) 100%);
    padding: 30px; /* Increased from 20px */
  }
  
  .project-client-logo {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  }
  
  .project-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem; /* Increased from 2.5rem */
    font-weight: 800; /* Increased from bold */
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  /* Aspect ratio container for images */
  .aspect-ratio-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
  }
  
  .aspect-ratio-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Loading skeleton for images */
  .image-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    width: 100%;
    height: 100%;
  }

  /* Portfolio Overlay */
  .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(35, 78, 112, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
    z-index: 2;
  }

  .portfolio-image:hover .portfolio-overlay {
    opacity: 1;
  }

  .portfolio-image:hover img {
    transform: scale(1.1);
  }

  .overlay-content {
    color: white;
    text-align: center;
    padding: 20px;
  }

  .overlay-content h5 {
    margin-bottom: 5px;
    font-weight: 600;
  }

  .overlay-content p {
    margin-bottom: 15px;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Project Detail Styles */
  .project-hero {
    background-color: #f8f9fa;
    padding: 100px 0 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
  }

  .breadcrumb-item a {
    color: var(--secondary-color);
  }

  .project-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 2.8rem;
  }

  .project-client {
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
  }

  .client-label {
    font-weight: 500;
    color: var(--text-color);
  }

  .project-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 15px;
  }

  .badge-strategy {
    background-color: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
  }

  .badge-pipeline {
    background-color: rgba(42, 146, 191, 0.15);
    color: var(--secondary-color);
  }

  .badge-automation {
    background-color: rgba(72, 168, 104, 0.15);
    color: var(--success-color);
  }

  .project-date {
    color: var(--text-color);
    font-size: 0.9rem;
  }

  .project-main-image {
    border-radius: 8px;
    box-shadow: var(--shadow-md);
  }

  /* Project Sidebar */
  .project-sidebar {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 25px;
  }

  .sidebar-widget {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .widget-title {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 600;
  }

  .sidebar-list li {
    margin-bottom: 10px;
    color: var(--text-color);
  }

  .sidebar-list strong {
    color: var(--primary-color);
    margin-right: 5px;
  }

  .client-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background-color: #f8f9fa;
  }

  .client-thumbnail-placeholder {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background-color: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
  }

  .client-name {
      font-weight: 600;
      color: var(--primary-color);
  }

  .client-location {
      font-size: 0.85rem;
      color: var(--text-color);
  }

  .sidebar-cta {
      background-color: rgba(42, 146, 191, 0.05);
      padding: 20px;
      border-radius: 8px;
      text-align: center;
  }

  .sidebar-cta .cta-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 10px;
  }

  .sidebar-cta .cta-text {
      font-size: 0.9rem;
      margin-bottom: 15px;
  }

  .btn-block {
      display: block;
      width: 100%;
  }

  /* Project Content */
  .project-content {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 30px;
  }

  .project-description {
      line-height: 1.7;
  }

  .project-achievements {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: var(--shadow-sm);
  }

  .achievements-content {
      line-height: 1.7;
  }

  /* Gallery */
  .project-gallery {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: var(--shadow-sm);
  }

  .gallery-item {
      position: relative;
      margin-bottom: 20px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
  }

  .gallery-item img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      transition: transform var(--transition-medium) ease;
  }

  .gallery-item:hover img {
      transform: scale(1.05);
  }

  .gallery-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 0.8rem;
  }

  /* Testimonial */
  .project-testimonial {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: var(--shadow-sm);
  }

  .testimonial-card {
      border-left: 4px solid var(--secondary-color);
      padding: 20px;
      background-color: rgba(42, 146, 191, 0.05);
      border-radius: 0 8px 8px 0;
  }

  .testimonial-rating {
      margin-bottom: 15px;
  }

  .star-filled {
      color: #ffc107;
  }

  .star-empty {
      color: #e0e0e0;
  }

  .rating-text {
      font-weight: 600;
      color: var(--primary-color);
  }

  .testimonial-text {
      font-style: italic;
      line-height: 1.7;
  }

  .testimonial-logo {
      width: 60px;
      height: 60px;
      object-fit: contain;
      border-radius: 4px;
      background-color: white;
      padding: 5px;
  }

  .testimonial-logo-placeholder {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      background-color: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.5rem;
  }

  .testimonial-client {
      font-weight: 600;
      color: var(--primary-color);
  }

  .testimonial-date {
      font-size: 0.85rem;
      color: var(--text-color);
  }

  /* Responsive adjustments */
  @media (max-width: 991px) {
      .project-sidebar {
          margin-top: 30px;
      }
      
      .project-hero {
          padding: 80px 0 40px;
      }
      
      .project-title {
          font-size: 2.2rem;
      }
  }

  @media (max-width: 767px) {
      .project-hero {
          padding: 60px 0 30px;
      }
      
      .project-title {
          font-size: 1.8rem;
      }
      
      .project-badge, .project-date {
          display: block;
          margin-bottom: 10px;
      }
      
      .gallery-item img {
          height: 160px;
      }
  }

  .tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .tech-tag {
      display: inline-block;
      padding: 0.3rem 0.6rem;
      background-color: rgba(42, 165, 193, 0.1);
      border-radius: 16px;
      font-size: 0.85rem;
      color: var(--secondary-color);
      font-weight: 500;
  }

  /* ========================================
     MODERN ENHANCEMENTS - PROFESSIONAL FEATURES
     ======================================== */

  /* Glassmorphism Effects */
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
  }

  .glass-navbar {
    background: rgba(10, 85, 112, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Scroll Progress Indicator */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--gradient-accent);
    width: 0%;
    z-index: 9999;
    transition: width 0.1s ease;
  }

  /* Enhanced CTA Buttons */
  .btn-cta-primary {
    background: var(--gradient-primary);
    border: none;
    color: white;
    padding: 16px 36px; /* Increased padding */
    font-weight: 700; /* Increased from 600 */
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(42, 146, 191, 0.35); /* Enhanced shadow */
    transition: all var(--transition-medium) ease;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem; /* Slightly larger text */
    min-height: 56px; /* Better touch target */
  }

  .btn-cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left var(--transition-slow) ease;
  }

  .btn-cta-primary:hover {
    transform: translateY(-4px); /* Increased from -3px */
    box-shadow: 0 8px 30px rgba(42, 146, 191, 0.5); /* Stronger shadow */
  }
  
  .btn-cta-primary:focus {
    box-shadow: 0 0 0 4px rgba(42, 165, 193, 0.3), 0 8px 30px rgba(42, 146, 191, 0.5);
    outline: none;
  }

  .btn-cta-primary:hover::before {
    left: 100%;
  }

  .btn-cta-accent {
    background: var(--gradient-accent);
    border: none;
    color: white;
    padding: 16px 36px; /* Increased padding */
    font-weight: 700; /* Increased from 600 */
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4); /* Enhanced shadow */
    transition: all var(--transition-medium) ease;
    font-size: 1.1rem;
    min-height: 56px;
  }
  
  .btn-cta-accent:hover {
    transform: translateY(-4px); /* Increased from -3px */
    box-shadow: 0 8px 30px rgba(255, 149, 0, 0.5); /* Stronger shadow */
    color: white;
  }
  
  .btn-cta-accent:focus {
    box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.3), 0 8px 30px rgba(255, 149, 0, 0.5);
    outline: none;
  }

  /* Animated Background Gradients - Brand-aligned */
  .bg-gradient-animated {
    background: linear-gradient(-45deg, #0A5570, #0D6986, #1A8FAD, #2AA5C1, #0A5570);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
  }

  /* Floating Action Button for Contact */
  .fab-contact {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(241, 143, 1, 0.4);
    cursor: pointer;
    transition: all var(--transition-medium) ease;
    z-index: 999;
    text-decoration: none;
  }

  .fab-contact:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(241, 143, 1, 0.6);
    color: white;
  }

  .fab-contact i {
    animation: pulse 2s ease infinite;
  }

  /* Dark Mode Toggle */
  .theme-toggle {
    position: fixed;
    top: 100px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--transition-medium) ease;
    z-index: 998;
    border: 2px solid var(--secondary-color);
  }

  .theme-toggle:hover {
    transform: rotate(180deg);
    box-shadow: var(--shadow-lg);
  }

  .theme-toggle i {
    font-size: 20px;
    color: var(--secondary-color);
  }

  /* Trust Badges Section */
  .trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium) ease;
  }

  .trust-badge:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }

  .trust-badge-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
  }

  .trust-badge-content h6 {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
  }

  .trust-badge-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-color);
  }

  /* Enhanced Stats Counter */
  .stats-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Tooltip Styles */
  .custom-tooltip {
    position: relative;
    cursor: help;
  }

  .custom-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--primary-color);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-medium) ease;
    z-index: 1000;
  }

  .custom-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Video Background Support */
  .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  .video-background video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
  }

  /* Lazy Load Placeholder */
  .lazy-load-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 200px;
  }

  /* Lead Magnet Box */
  .lead-magnet {
    background: var(--gradient-primary);
    color: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
  }

  .lead-magnet::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
  }

  .lead-magnet-content {
    position: relative;
    z-index: 1;
  }

  .lead-magnet h3 {
    color: white;
    margin-bottom: 15px;
  }

  .lead-magnet p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
  }

  .lead-magnet .form-control {
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
  }

  .lead-magnet .form-control::placeholder {
    color: rgba(255,255,255,0.7);
  }

  .lead-magnet .form-control:focus {
    background: rgba(255,255,255,0.2);
    border-color: white;
    color: white;
  }

  /* Breadcrumb Enhancement */
  .breadcrumb {
    background: transparent;
    padding: 15px 0;
  }

  .breadcrumb-item a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: all var(--transition-fast) ease;
  }

  .breadcrumb-item a:hover {
    color: var(--accent-color);
  }

  .breadcrumb-item.active {
    color: var(--text-color);
  }

  /* Notification Toast */
  .toast-notification {
    position: fixed;
    top: 100px;
    right: 30px;
    min-width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 20px;
    transform: translateX(400px);
    transition: transform var(--transition-medium) ease;
    z-index: 9998;
  }

  .toast-notification.show {
    transform: translateX(0);
  }

  .toast-notification.success {
    border-left: 4px solid var(--success-color);
  }

  .toast-notification.error {
    border-left: 4px solid var(--danger-color);
  }

  .toast-notification.info {
    border-left: 4px solid var(--info-color);
  }

  /* Smooth Transitions for All */
  * {
    transition: background-color var(--transition-medium) ease,
                color var(--transition-medium) ease;
  }
  
  /* Accessibility Improvements */
  a:focus,
  button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 3px solid rgba(42, 165, 193, 0.5);
    outline-offset: 2px;
  }
  
  /* Skip to main content link for accessibility */
  .skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
  }
  
  .skip-to-main:focus {
    top: 0;
  }
  
  /* Improved contrast for text */
  .text-muted {
    color: #6B7280 !important; /* Better contrast */
  }
  
  /* Loading states */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-medium) ease;
  }
  
  .loading-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Enhanced trust indicators in hero */
  .hero-content .d-flex.gap-4 {
    gap: 2rem !important;
  }
  
  .hero-content .d-flex.gap-4 > div {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-medium) ease;
  }
  
  .hero-content .d-flex.gap-4 > div:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
  }
  
  .hero-content .fw-bold.fs-4 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* Newsletter/Lead magnet improvements */
  .lead-magnet {
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
  
  .lead-magnet .form-control {
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .lead-magnet .form-control:focus {
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }
  
  /* Better badge styling */
  .badge {
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 20px;
    font-size: 0.875rem;
  }
  
  /* Improved process step numbers */
  .process-step-number {
    box-shadow: 0 4px 12px rgba(42, 165, 193, 0.2);
  }
  
  .process-step:hover .process-step-number {
    box-shadow: 0 6px 20px rgba(42, 165, 193, 0.4);
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }