/*
Orfix Engineering  -  2025
=====================================================================================
Site created by Storytellers Digital - [storytellers.odozii.com]
Design and Development by Francis Isibor
=====================================================================================
*/
/* Smooth transition for the header */
 .header-transition {
     transition: all 0.3s ease-in-out;
 }

 /* Custom button hover effect */
 .button-hoverB {
     transition: opacity 0.2s ease;
 }

 /* Demo content styling */
 .demo-section {
     min-height: 60vh;
     padding: 4rem 2rem;
 }

 /* Ensure smooth scrolling for anchor links */
 html {
     scroll-behavior: smooth;
 }
.text-glow {
    text-shadow: 0 0 20px rgba(0, 191, 255, 0.4);
}
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-white-text {
  background: linear-gradient(135deg, #ffffff, #aaaaaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hexagon-bg {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

.hexagon-pattern {
    background-image:
        repeating-linear-gradient(30deg, transparent, transparent 10px, rgba(59, 130, 246, 0.03) 10px, rgba(59, 130, 246, 0.03) 20px),
        repeating-linear-gradient(-30deg, transparent, transparent 10px, rgba(59, 130, 246, 0.03) 10px, rgba(59, 130, 246, 0.03) 20px);
}

.glass-effect {
    background: rgba(30, 58, 138, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.card-hover {
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 191, 255, 0.12);
}
.card-hover-white {
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.card-hover-white:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(255, 255, 255, 0.12);
}

.button-hoverA {
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.button-hoverA:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 5px 25px rgba(0, 191, 255, 0.9);
}
.button-hoverB {
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.button-hoverB:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 191, 255, 0.9);
    box-shadow: 0 5px 25px rgba(255, 255, 255, 0.5);
}

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

.floatingA {
    animation: floatA 6s ease-in-out infinite;
}

@keyframes floatB {
    40%, 100% { transform: translateY(0px); }
    70% { transform: translateY(-10px); }
}

.floatingB {
    animation: floatB 6s ease-in-out infinite;
}