/* ========================================
   STEPHIRE CONSULTANTS - ADVANCED UI/UX ENHANCEMENTS
   Modern Animations, Hover Effects & Premium Aesthetics
   Author: Advanced Development Team
   Version: 2.0
   ======================================== */

/* ========================================
   TABLE OF CONTENTS:
   1. Global Enhancements & Smooth Scrolling
   2. Advanced Topbar Animations
   3. Premium Navigation Effects
   4. Mobile Menu Enhancements
   5. Hero Section Transformations
   6. About Section Advanced Effects
   7. Services Section Premium Animations
   8. Markets/Countries Modern Effects
   9. Stats Section with Counters
   10. Process Section Animations
   11. Job Categories Enhancements
   12. Testimonials Advanced Carousel
   13. FAQ Accordion Smooth Animations
   14. CTA Section Transform
   15. Footer Premium Effects
   16. Micro-interactions & Utilities
   ======================================== */

/* ========================================
   1. GLOBAL ENHANCEMENTS & SMOOTH SCROLLING
   ======================================== */

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--secondary-color), var(--primary-color));
}

/* Global Smooth Transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    overflow-x: hidden;
}

/* Selection Color */
::selection {
    background: #0B3355;
    color: #ffffff !important;
}

::-moz-selection {
    background: #0B3355;
    color: #ffffff !important;
}

/* Page Load Animation */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    animation: fadeInPage 0.6s ease-out;
}

/* ========================================
   2. ADVANCED TOPBAR ANIMATIONS
   ======================================== */

/* Animated Background Gradient */
.topbar {
    position: relative;
    background: linear-gradient(135deg, var(--topbar-bg) 0%, #0c2340 50%, #153258 100%);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Shimmer Effect Enhancement */
.topbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: shimmerEffect 3s infinite;
}

@keyframes shimmerEffect {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Contact Info Slide-In Animation */
.topbar .contact-info>div {
    opacity: 0;
    animation: slideInLeft 0.6s ease-out forwards;
}

.topbar .contact-info>div:nth-child(1) {
    animation-delay: 0.1s;
}

.topbar .contact-info>div:nth-child(2) {
    animation-delay: 0.2s;
}

.topbar .contact-info>div:nth-child(3) {
    animation-delay: 0.3s;
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Icon Pulse Animation */
.topbar .contact-info i,
.topbar .contact-info svg {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Social Links Advanced Hover Effects */
.topbar .social-links a {
    position: relative;
    overflow: hidden;
}

.topbar .social-links a::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 ease, height 0.6s ease;
}

.topbar .social-links a:hover::before {
    width: 100px;
    height: 100px;
}

.topbar .social-links a:hover {
    background: var(--secondary-color);
    color: var(--topbar-bg);
    transform: translateY(-3px) rotate(360deg);
    box-shadow: 0 5px 15px rgba(244, 196, 48, 0.4);
}

/* Staggered Animation for Social Icons */
.topbar .social-links a {
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

.topbar .social-links a:nth-child(1) {
    animation-delay: 0.4s;
}

.topbar .social-links a:nth-child(2) {
    animation-delay: 0.5s;
}

.topbar .social-links a:nth-child(3) {
    animation-delay: 0.6s;
}

.topbar .social-links a:nth-child(4) {
    animation-delay: 0.7s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   3. PREMIUM NAVIGATION EFFECTS
   ======================================== */

/* Navbar Magnetic Hover Effect */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Glassmorphism on Scroll */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 8px 32px rgba(43, 122, 122, 0.2),
        0 2px 8px rgba(43, 122, 122, 0.1);
}

/* Navbar Brand Advanced Animation */
.navbar-brand {
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar-brand::before {
    animation: brandPulse 3s ease-in-out infinite;
}

@keyframes brandPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
}

.navbar-brand:hover {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(43, 122, 122, 0.3));
}

/* Animated Gradient Text for Brand */
.navbar-brand span {
    background: linear-gradient(45deg, var(--secondary-color), #FFD700, var(--secondary-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 3s linear infinite;
}

@keyframes gradientFlow {
    to {
        background-position: 200% center;
    }
}

/* Nav Links Magnetic Hover */
.nav-link {
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}

/* Nav Link Glow Effect */
.nav-link:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(43, 122, 122, 0.05));
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

/* ========================================
   4. ENHANCED MEGA MENU ANIMATIONS
   ======================================== */

@media (min-width: 992px) {
    .dropdown-menu.mega-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px) scale(0.95);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dropdown:hover .dropdown-menu.mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Mega Menu Items Staggered Animation */
    .mega-menu-list li {
        opacity: 0;
        transform: translateX(-20px);
        animation: menuItemSlide 0.5s ease-out forwards;
    }

    .dropdown:hover .mega-menu-list li:nth-child(1) {
        animation-delay: 0.1s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(2) {
        animation-delay: 0.15s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(3) {
        animation-delay: 0.2s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(4) {
        animation-delay: 0.25s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(5) {
        animation-delay: 0.3s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(6) {
        animation-delay: 0.35s;
    }

    .dropdown:hover .mega-menu-list li:nth-child(7) {
        animation-delay: 0.4s;
    }

    @keyframes menuItemSlide {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Mega Menu Link Hover Effect */
    .mega-menu-list a {
        position: relative;
        overflow: hidden;
    }

    .mega-menu-list a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mega-menu-list a:hover::after {
        width: 100%;
    }
}

/* ========================================
   5. MOBILE MENU PREMIUM ENHANCEMENTS
   ======================================== */

@media (max-width: 991px) {

    /* Slide-In Animation */
    .navbar-collapse.show {
        animation: slideInFromLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes slideInFromLeft {
        from {
            left: -100%;
        }

        to {
            left: 0;
        }
    }

    /* Blur Overlay */
    .navbar-collapse.show::after {
        content: '';
        position: fixed;
        top: 0;
        left: 100%;
        width: calc(100vw - 85%);
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: -1;
    }

    /* Nav Items Fade In */
    .navbar-collapse.show .nav-item {
        opacity: 0;
        animation: fadeInLeft 0.5s ease-out forwards;
    }

    .navbar-collapse.show .nav-item:nth-child(1) {
        animation-delay: 0.1s;
    }

    .navbar-collapse.show .nav-item:nth-child(2) {
        animation-delay: 0.15s;
    }

    .navbar-collapse.show .nav-item:nth-child(3) {
        animation-delay: 0.2s;
    }

    .navbar-collapse.show .nav-item:nth-child(4) {
        animation-delay: 0.25s;
    }

    .navbar-collapse.show .nav-item:nth-child(5) {
        animation-delay: 0.3s;
    }

    .navbar-collapse.show .nav-item:nth-child(6) {
        animation-delay: 0.35s;
    }

    .navbar-collapse.show .nav-item:nth-child(7) {
        animation-delay: 0.4s;
    }

    .navbar-collapse.show .nav-item:nth-child(8) {
        animation-delay: 0.45s;
    }

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

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Close Button Animation */
    .navbar-collapse::after {
        animation: rotateIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes rotateIn {
        from {
            opacity: 0;
            transform: rotate(-90deg) scale(0);
        }

        to {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
    }

    .navbar-collapse::after:hover {
        background: rgba(0, 74, 173, 0.25);
        transform: rotate(90deg) scale(1.1);
    }

    /* Dropdown Accordion Animation */
    .dropdown-menu.show {
        animation: accordionSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes accordionSlide {
        from {
            max-height: 0;
            opacity: 0;
        }

        to {
            max-height: 2000px;
            opacity: 1;
        }
    }
}

/* ========================================
   6. HERO SECTION TRANSFORMATIONS (PREMIUM REDESIGN)
   ======================================== */

.hero-slider-section {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 40px 20px;
}

/* Full Width Slider Container */
.hero-slider-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Individual Slide Item */
.hero-slide-item {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Ken Burns Effect Background */
.ken-burns-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 8s ease-out;
}

.swiper-slide-active .ken-burns-bg {
    transform: scale(1.15);
}

/* Premium Gradient Overlay */
.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(10, 25, 47, 0.95) 0%,
            rgba(10, 25, 47, 0.8) 50%,
            rgba(10, 25, 47, 0.4) 100%);
    z-index: 1;
}

/* Content Z-Index */
.hero-slide-item .container {
    position: relative;
    z-index: 2;
    padding: 40px 30px !important;
}

/* Typography Enhancements */
.display-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.text-gradient-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    max-width: 600px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Static Form Wrapper (Overlay) */
.hero-static-form-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.hero-static-form-wrapper .container {
    pointer-events: none;
}

/* Premium Glass Form */
.glass-form-premium {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.92);
    /* Lighter/More opaque */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 4px solid var(--primary-color);
    /* Premium accent */
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-form-premium:hover {
    transform: translateY(-2px);
}

/* Premium Input Groups */
.input-group-premium {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.input-group-premium .input-group-text {
    background: transparent;
    border: none;
    color: var(--primary-color);
    padding-right: 0;
}

.input-group-premium .form-control,
.input-group-premium .form-select {
    background: transparent;
    border: none;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    color: #333 !important;
    /* Force dark text color */
    box-shadow: none !important;
}

.input-group-premium .form-control::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

/* Focus States - Apply to the container */
.input-group-premium:focus-within {
    background: #fff;
    border-color: #FFD700;
    /* Gold accent */
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.input-group-premium:focus-within .input-group-text {
    color: var(--secondary-color);
}

/* Textarea specific styling */
.input-premium {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    color: #333 !important;
    /* Force dark text color */
    transition: all 0.3s ease;
}

.input-premium:focus {
    background: #fff;
    border-color: #FFD700;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    color: #333 !important;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Slider Controls */
.hero-controls-container {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 20;
    pointer-events: none;
}

.hero-controls {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.hero-prev,
.hero-next {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.hero-prev:hover,
.hero-next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.hero-dots {
    display: flex;
    gap: 12px;
}

.hero-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dots button.swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.4);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .hero-slider-section {
        min-height: auto;
        display: block;
        height: auto;
    }

    .hero-slider-full {
        position: relative;
        height: 600px;
    }

    .hero-static-form-wrapper {
        position: relative;
        height: auto;
        margin-top: -100px;
        z-index: 20;
        padding-bottom: 50px;
        background: transparent;
    }

    .glass-form-premium {
        margin: 0 15px;
        background: #fff;
        /* Solid background on mobile for better performance/readability */
    }

    .display-title {
        font-size: 2.5rem;
    }

    .hero-controls-container {
        bottom: 140px;
        justify-content: center;
        display: flex;
    }
}

/* ========================================
   7. ABOUT SECTION ADVANCED EFFECTS
   ======================================== */

/* Morphing Background Shapes */
.about-shape {
    animation: morphShape 10s ease-in-out infinite;
}

@keyframes morphShape {

    0%,
    100% {
        border-radius: 50% 50% 50% 50%;
        transform: translate(0, 0) scale(1);
    }

    33% {
        border-radius: 60% 40% 60% 40%;
        transform: translate(15px, 15px) scale(1.05);
    }

    66% {
        border-radius: 40% 60% 40% 60%;
        transform: translate(-15px, 15px) scale(0.95);
    }
}

/* Feature Cards Flip Effect */
.feature-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover {
    transform: translateY(-15px) rotateX(5deg) scale(1.03);
}

/* Card Background Icon Rotation */
.feature-card:hover .card-bg-icon {
    animation: iconRotate 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconRotate {
    0% {
        transform: rotate(-15deg) scale(1);
    }

    50% {
        transform: rotate(0deg) scale(1.08);
    }

    100% {
        transform: rotate(15deg) scale(1.05);
    }
}

/* Stats Counter Animation */
.stat-item .counter {
    opacity: 0;
    transform: translateY(20px);
}

.stat-item.animated .counter {
    animation: counterUp 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes counterUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stat Icon Bounce */
.stat-item:hover .stat-icon {
    animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconBounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.08) rotate(-10deg);
    }

    50% {
        transform: scale(1.12) rotate(10deg);
    }

    75% {
        transform: scale(1.08) rotate(-5deg);
    }
}

/* ========================================
   8. SERVICES SECTION PREMIUM ANIMATIONS
   ======================================== */

/* Card Tilt Effect (3D) */
.service-card-enhanced {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.service-card-enhanced:hover {
    transform: translateY(-20px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

/* Shimmer Effect on Hover */
.service-card-enhanced::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    transition: all 0.8s ease;
    opacity: 0;
}

.service-card-enhanced:hover::after {
    opacity: 1;
    left: 100%;
}

/* Service Icon Spin & Scale */
.service-card-enhanced:hover .service-icon-box {
    animation: iconSpinScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconSpinScale {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-20deg);
    }

    100% {
        transform: scale(1.08) rotate(-15deg);
    }
}

/* Service Features List Stagger */
.service-card-enhanced:hover .service-features-list li {
    animation: featureSlideIn 0.5s ease-out forwards;
}

.service-card-enhanced:hover .service-features-list li:nth-child(1) {
    animation-delay: 0.1s;
}

.service-card-enhanced:hover .service-features-list li:nth-child(2) {
    animation-delay: 0.15s;
}

.service-card-enhanced:hover .service-features-list li:nth-child(3) {
    animation-delay: 0.2s;
}

.service-card-enhanced:hover .service-features-list li:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes featureSlideIn {
    from {
        opacity: 0.5;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(10px);
    }
}

/* Service Button Glow */
.service-btn {
    position: relative;
    overflow: hidden;
}

.service-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    border-radius: 50%;
}

.service-card-enhanced:hover .service-btn::before {
    width: 300px;
    height: 300px;
}

/* ========================================
   9. MARKETS/COUNTRIES MODERN EFFECTS
   ======================================== */

/* Flag Wave Animation */
.market-flag-box {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.market-card:hover .market-flag-box {
    animation: flagWave 1s ease-in-out;
}

@keyframes flagWave {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.08) rotate(-15deg);
    }

    50% {
        transform: scale(1.12) rotate(0deg);
    }

    75% {
        transform: scale(1.08) rotate(15deg);
    }
}

/* Market Card Border Animation */
.market-card::before {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.market-card:hover::before {
    width: 8px;
    box-shadow: 0 0 15px var(--primary-color);
}

/* Arrow Slide Animation */
.market-card:hover .market-arrow {
    animation: arrowSlide 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes arrowSlide {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(12px);
    }
}

/* Region Badge Pulse */
.region-badge {
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 5px rgba(0, 74, 173, 0.2);
    }
}

/* ========================================
   10. STATS SECTION WITH COUNTERS
   ======================================== */

/* Stats Radial Progress Indicator */
.stat-item {
    position: relative;
}

.stat-item::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 20px;
    background: conic-gradient(var(--secondary-color) 0deg,
            var(--secondary-color) var(--progress, 0deg),
            transparent var(--progress, 0deg));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.stat-item:hover::after {
    opacity: 0.3;
    animation: rotateProgress 2s linear infinite;
}

@keyframes rotateProgress {
    to {
        transform: rotate(360deg);
    }
}

/* Number Counter Gradient */
.stat-number {
    position: relative;
    display: inline-block;
}

.stat-number::after {
    content: attr(data-target);
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, #F4C430 0%, #FFE066 50%, #F4C430 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s linear infinite;
}

/* Animated Background Pattern */
.stats-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.03) 10px,
            rgba(255, 255, 255, 0.03) 20px);
    animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
    to {
        transform: translateX(20px) translateY(20px);
    }
}

/* ========================================
   11. PROCESS SECTION ANIMATIONS
   ======================================== */

/* Connecting Lines Between Steps */
.process-step {
    position: relative;
}

.process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            var(--primary-color) 0%,
            var(--secondary-color) 100%);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
}

.process-step:hover::after {
    transform: translateY(-50%) scaleX(1);
}

/* Remove line from last step */
.process-step:last-child::after {
    display: none;
}

/* Number Badge Rotation */
.process-number-badge {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step:hover .process-number-badge {
    transform: rotate(360deg) scale(1.1);
    background: linear-gradient(135deg, var(--secondary-color), #FFD700);
    box-shadow: 0 5px 20px rgba(244, 196, 48, 0.5);
}

/* Icon Bounce Effect */
.process-step:hover .process-icon-box {
    animation: processIconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes processIconBounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(-12deg);
    }

    50% {
        transform: scale(1.1) rotate(0deg);
    }

    75% {
        transform: scale(1.05) rotate(12deg);
    }
}

/* Shimmer Effect on Hover */
.process-step:hover::before {
    animation: shimmerPass 1.5s ease-in-out infinite;
}

@keyframes shimmerPass {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* ========================================
   12. JOB CATEGORIES ENHANCEMENTS
   ======================================== */

/* Category Card Scale & Tilt */
.category-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.category-card:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.02);
}

/* Animated Border Growth */
.category-card::before {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card:hover::before {
    height: 100%;
    width: 4px;
    box-shadow: 0 0 20px var(--secondary-color);
}

/* Category Icon Pulse & Rotate */
.category-card:hover .category-icon {
    animation: categoryIconAnim 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes categoryIconAnim {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-15deg);
    }

    100% {
        transform: scale(1.08) rotate(-10deg);
    }
}

/* Gradient Overlay Effect */
.category-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(43, 122, 122, 0.05) 0%,
            rgba(244, 196, 48, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.category-card:hover::after {
    opacity: 1;
}

/* ========================================
   13. TESTIMONIALS ADVANCED CAROUSEL
   ======================================== */

/* Quote Icon Float */
.quote-icon {
    animation: quoteFloat 4s ease-in-out infinite;
}

@keyframes quoteFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* Testimonial Card 3D Effect */
.testimonial-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-card:hover {
    transform: translateY(-15px) rotateX(5deg) scale(1.02);
}

/* Avatar Rotation */
.client-avatar {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-card:hover .client-avatar {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 15px 40px rgba(43, 122, 122, 0.4);
}

/* Star Rating Animation */
.testimonial-rating {
    display: flex;
    gap: 5px;
}

.testimonial-rating i {
    opacity: 0;
    animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.testimonial-rating i:nth-child(1) {
    animation-delay: 0.1s;
}

.testimonial-rating i:nth-child(2) {
    animation-delay: 0.2s;
}

.testimonial-rating i:nth-child(3) {
    animation-delay: 0.3s;
}

.testimonial-rating i:nth-child(4) {
    animation-delay: 0.4s;
}

.testimonial-rating i:nth-child(5) {
    animation-delay: 0.5s;
}

@keyframes starPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }

    80% {
        transform: scale(1.08) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ========================================
   14. FAQ ACCORDION SMOOTH ANIMATIONS
   ======================================== */

/* Plus/Minus Icon Animation */
.faq-button::after {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-button:not(.collapsed)::after {
    transform: rotate(180deg) scale(1.05);
}

/* Accordion Expand Animation */
.accordion-collapse {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.accordion-collapse.show {
    animation: accordionExpand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes accordionExpand {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FAQ Item Hover Effect */
.faq-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-item:hover {
    transform: translateX(10px);
}

/* Ripple Effect on Click */
.faq-button {
    position: relative;
    overflow: hidden;
}

.faq-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(43, 122, 122, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.faq-button:active::before {
    width: 300px;
    height: 300px;
}

/* ========================================
   15. CTA SECTION TRANSFORM
   ======================================== */

/* Animated Background Shapes */
.cta-section-split::before,
.cta-section-split::after {
    animation: shapeFloat 15s ease-in-out infinite;
}

.cta-section-split::after {
    animation-delay: 7.5s;
    animation-direction: reverse;
}

@keyframes shapeFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

/* Floating Particles */
.cta-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.cta-particles .particle {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(244, 196, 48, 0.3), rgba(43, 122, 122, 0.2));
    border-radius: 50%;
    animation: floatParticle 20s infinite ease-in-out;
    opacity: 0.6;
    filter: blur(2px);
}

.cta-particles .particle:nth-child(1) {
    left: 10%;
    top: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.cta-particles .particle:nth-child(2) {
    left: 80%;
    top: 40%;
    width: 50px;
    height: 50px;
    animation-delay: 2s;
    animation-duration: 22s;
}

.cta-particles .particle:nth-child(3) {
    left: 30%;
    top: 60%;
    width: 70px;
    height: 70px;
    animation-delay: 4s;
    animation-duration: 20s;
}

.cta-particles .particle:nth-child(4) {
    left: 60%;
    top: 10%;
    width: 90px;
    height: 90px;
    animation-delay: 1s;
    animation-duration: 25s;
}

.cta-particles .particle:nth-child(5) {
    left: 20%;
    top: 80%;
    width: 60px;
    height: 60px;
    animation-delay: 3s;
    animation-duration: 19s;
}

.cta-particles .particle:nth-child(6) {
    left: 90%;
    top: 70%;
    width: 75px;
    height: 75px;
    animation-delay: 5s;
    animation-duration: 23s;
}

.cta-particles .particle:nth-child(7) {
    left: 50%;
    top: 30%;
    width: 55px;
    height: 55px;
    animation-delay: 2.5s;
    animation-duration: 21s;
}

.cta-particles .particle:nth-child(8) {
    left: 70%;
    top: 90%;
    width: 85px;
    height: 85px;
    animation-delay: 4.5s;
    animation-duration: 24s;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.6;
    }

    25% {
        transform: translate(50px, -80px) rotate(90deg);
        opacity: 0.8;
    }

    50% {
        transform: translate(-30px, -150px) rotate(180deg);
        opacity: 0.4;
    }

    75% {
        transform: translate(70px, -100px) rotate(270deg);
        opacity: 0.7;
    }
}

/* Form Field Hover Effects */
.cta-form-card .form-control:focus,
.cta-form-card .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(43, 122, 122, 0.15),
        0 5px 15px rgba(43, 122, 122, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.cta-form-card .form-floating {
    transition: all 0.3s ease;
}

.cta-form-card .form-floating:hover {
    transform: translateY(-2px);
}

/* Submit Button Loading State */
#submitBtn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

#submitBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 122, 122, 0.3);
}

#submitBtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

#submitBtn:hover::before {
    width: 300px;
    height: 300px;
}

#submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Alert Animations */
.alert {
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Form Input Glow Effect */
.cta-form-card .form-control:focus,
.cta-form-card .form-select:focus {
    transform: translateY(-3px);
    box-shadow: 0 0 0 0.3rem rgba(43, 122, 122, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Button Ripple Effect */
.cta-form-card .btn-primary {
    position: relative;
    overflow: hidden;
}

.cta-form-card .btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.8s ease, height 0.8s ease;
}

.cta-form-card .btn-primary:hover::before {
    width: 500px;
    height: 500px;
}

/* Icon Box Pulse */
.cta-icon-box {
    animation: iconPulseGlow 2s ease-in-out infinite;
}

@keyframes iconPulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.7);
    }

    50% {
        box-shadow: 0 0 20px 10px rgba(244, 196, 48, 0);
    }
}

/* Contact Info Slide Up */
.cta-contact-info {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFade 1s ease-out 0.5s forwards;
}

@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   16. FOOTER PREMIUM EFFECTS
   ======================================== */

/* Wave Animation */
.footer-modern::before {
    animation: waveAnimation 20s linear infinite;
}

@keyframes waveAnimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 30px 30px;
    }
}

/* Newsletter Form Glow */
.newsletter-form .form-control:focus {
    box-shadow: 0 0 30px rgba(43, 122, 122, 0.5);
    transform: translateY(-2px);
}

.newsletter-form .btn-subscribe {
    position: relative;
    overflow: hidden;
}

.newsletter-form .btn-subscribe::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(43, 122, 122, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.newsletter-form .btn-subscribe:hover::before {
    width: 300px;
    height: 300px;
}

/* Social Icons Advanced Hover */
.social-btn {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-btn:hover {
    transform: translateY(-5px) rotate(360deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(43, 122, 122, 0.4);
}

/* Footer Link Arrow Animation */
.footer-links a::before {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0) scale(1.05);
}

/* Contact Icon Rotation */
.footer-contact-list li:hover .contact-icon {
    transform: rotate(360deg) scale(1.1);
}

/* ========================================
   17. SCROLL-TO-TOP BUTTON
   ======================================== */

.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(43, 122, 122, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.scroll-top-btn:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 15px 35px rgba(43, 122, 122, 0.6);
}

/* Progress Ring */
.scroll-top-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--secondary-color);
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   18. MICRO-INTERACTIONS & UTILITIES
   ======================================== */

/* Link Underline Animation */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    position: relative;
}

a:not(.btn):not(.nav-link):not(.dropdown-item)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover::after {
    width: 100%;
}

/* Image Zoom on Hover */
img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

img:hover {
    transform: scale(1.05);
}

/* Badge Pulse */
.badge {
    animation: badgePulseSubtle 2s ease-in-out infinite;
}

@keyframes badgePulseSubtle {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(43, 122, 122, 0.4);
    }

    50% {
        box-shadow: 0 0 15px 3px rgba(43, 122, 122, 0.2);
    }
}

/* Card Hover Shadow */
.card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(43, 122, 122, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   19. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 991px) {
    .hero-form.card {
        animation: none;
    }

    .process-step::after {
        display: none;
    }

    .scroll-top-btn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    .about-shape {
        display: none;
    }

    .stats-section::after {
        display: none;
    }

    .cta-section-split::before,
    .cta-section-split::after {
        opacity: 0.5;
    }

    .scroll-top-btn {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
        font-size: 1.1rem;
    }
}

@media (max-width: 575px) {
    .navbar-brand span {
        animation: none;
    }

    .hero-title {
        animation: none;
    }

    .quote-icon {
        animation: none;
    }

    .region-badge {
        animation: none;
    }

    .stat-item::after {
        display: none;
    }
}

/* ========================================
   20. PRINT STYLES
   ======================================== */

@media print {

    .topbar,
    .navbar,
    .hero-slider-section,
    .cta-section-split,
    .footer-modern,
    .scroll-top-btn {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    section {
        page-break-inside: avoid;
    }
}

/* ========================================
   LAYOUT OPTIMIZATIONS - FULL WIDTH & PADDING REDUCTION
   ======================================== */

/* Full-width sections optimization */
section {
    padding: 60px 0 !important;
}

/* Reduce excessive padding on hero section */
.hero-slider-section {
    padding: 0 !important;
}

/* Container max-width optimization for better stretch */
.container {
    max-width: 1320px;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Services, Markets, Categories - Better width utilization */
.services-section .container,
.markets-section .container,
.categories-section .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

/* About section optimization */
.about-section {
    padding: 50px 0 !important;
}

/* Stats section optimization */
.stats-section {
    padding: 50px 0 !important;
}


/* Process section with modern patterned background */
.process-section {
    padding: 60px 0 !important;
    position: relative;
    background-color: #d4f1f4;
    background-image: radial-gradient(circle at center center, rgba(43, 122, 122, 0.15), #d4f1f4), repeating-radial-gradient(circle at center center, rgba(43, 122, 122, 0.1), rgba(43, 122, 122, 0.1), 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
    overflow: hidden;
}

/* Color overlay */
.process-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(43, 122, 122, 0.03) 0%,
            rgba(244, 196, 48, 0.02) 50%,
            rgba(43, 122, 122, 0.03) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Decorative background elements */
.process-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(43, 122, 122, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.process-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(244, 196, 48, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -30px) scale(1.1);
    }
}


/* Testimonials section optimization */
.testimonials-section {
    padding: 50px 0 !important;
}

/* FAQ section optimization */
.faq-section {
    padding: 50px 0 !important;
}

/* CTA section optimization */
.cta-section {
    padding: 50px 0 !important;
}

/* Card spacing optimization */
.service-card,
.market-card,
.category-card,
.process-step-card {
    margin-bottom: 12px;
}

/* Row gap optimization */
.row {
    --bs-gutter-y: 1.5rem;
}

/* Reduce title margins */
.section-title {
    margin-bottom: 2rem !important;
}

.section-subtitle {
    margin-bottom: 2.5rem !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    section {
        padding: 40px 0 !important;
    }

    .hero-slider-section {
        padding: 0 !important;
    }

    .section-title {
        margin-bottom: 1.5rem !important;
    }

    .section-subtitle {
        margin-bottom: 2rem !important;
    }
}

/* ========================================
   END OF ADVANCED ENHANCEMENTS
   ======================================== */

/* ========================================
   GLOBAL OPPORTUNITIES SECTION - PREMIUM REDESIGN
   ======================================== */

.global-opportunities-section {
    background: linear-gradient(135deg, #fafbff 0%, #f5f7fa 50%, #fafbff 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.global-opportunities-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 74, 173, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.global-opportunities-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.section-title-premium {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #0a1a33;
    line-height: 1.2;
    letter-spacing: -1px;
}

.gradient-highlight {
    background: linear-gradient(135deg, #004AAD 0%, #0066cc 50%, #FFCC00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle-premium {
    font-size: 1.1rem;
    color: #64748b;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.region-block {
    margin-bottom: 70px;
    position: relative;
}

.region-block:last-of-type {
    margin-bottom: 0;
}

.region-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    padding-left: 10px;
}

.region-icon-badge {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 74, 173, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.region-icon-badge.europe-badge {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.region-icon-badge.americas-badge {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

.region-header:hover .region-icon-badge {
    transform: scale(1.1) rotate(-5deg);
}

.region-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0a1a33;
    margin: 0;
    letter-spacing: -0.5px;
}

.destination-card {
    display: block;
    position: relative;
    padding: 16px;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 100%;
    min-height: 140px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.gulf-gradient {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.15) 0%,
            rgba(255, 165, 0, 0.12) 50%,
            rgba(255, 204, 0, 0.08) 100%);
}

.europe-gradient {
    background: linear-gradient(135deg,
            rgba(99, 102, 241, 0.12) 0%,
            rgba(139, 92, 246, 0.1) 50%,
            rgba(99, 102, 241, 0.08) 100%);
}

.americas-gradient {
    background: linear-gradient(135deg,
            rgba(14, 165, 233, 0.12) 0%,
            rgba(6, 182, 212, 0.1) 50%,
            rgba(14, 165, 233, 0.08) 100%);
}

.card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.6s ease;
    pointer-events: none;
}

.destination-card:hover .card-glow {
    opacity: 1;
    top: -20%;
    right: -20%;
}

.destination-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
}

.gulf-gradient:hover {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.25) 0%,
            rgba(255, 165, 0, 0.2) 50%,
            rgba(255, 204, 0, 0.15) 100%);
}

.europe-gradient:hover {
    background: linear-gradient(135deg,
            rgba(99, 102, 241, 0.2) 0%,
            rgba(139, 92, 246, 0.18) 50%,
            rgba(99, 102, 241, 0.15) 100%);
}

.americas-gradient:hover {
    background: linear-gradient(135deg,
            rgba(14, 165, 233, 0.2) 0%,
            rgba(6, 182, 212, 0.18) 50%,
            rgba(14, 165, 233, 0.15) 100%);
}

.flag-icon {
    font-size: 2.5rem;
    margin-bottom: 0;
    display: block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.destination-card:hover .flag-icon {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.destination-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0a1a33;
    margin-bottom: 0;
    letter-spacing: -0.5px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.destination-card:hover .destination-name {
    color: var(--primary-color);
}

.destination-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.city-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 74, 173, 0.15);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.3s ease;
}

.destination-card:hover .city-badge {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 74, 173, 0.3);
    transform: translateY(-2px);
    color: var(--primary-color);
}

.visa-type-badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.12), rgba(255, 204, 0, 0.08));
    border: 2px solid rgba(0, 74, 173, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary-color);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.destination-card:hover .visa-type-badge {
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.2), rgba(255, 204, 0, 0.15));
    border-color: rgba(0, 74, 173, 0.4);
    transform: translateX(5px);
}

.card-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 74, 173, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.destination-card:hover .card-arrow {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(8px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 74, 173, 0.4);
}

.btn-premium-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 15px 40px rgba(0, 74, 173, 0.3);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-premium-cta::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 0.5s ease;
}

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

.btn-premium-cta:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 74, 173, 0.5);
    color: #ffffff;
}

.btn-premium-cta i {
    transition: transform 0.3s ease;
}

.btn-premium-cta:hover i {
    transform: translateX(6px);
}

@media (max-width: 992px) {
    .global-opportunities-section {
        padding: 70px 0;
    }

    .section-title-premium {
        font-size: 2.2rem;
    }

    .region-block {
        margin-bottom: 50px;
    }

    .destination-card {
        min-height: 200px;
        padding: 25px;
    }

    .flag-icon {
        font-size: 3rem;
    }

    .destination-name {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .global-opportunities-section {
        padding: 50px 0;
    }

    .section-title-premium {
        font-size: 1.8rem;
    }

    .section-subtitle-premium {
        font-size: 1rem;
    }

    .region-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .region-icon-badge {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    .region-title {
        font-size: 1.4rem;
    }

    .destination-card {
        min-height: 180px;
        padding: 20px;
    }

    .flag-icon {
        font-size: 2.5rem;
    }

    .destination-name {
        font-size: 1.15rem;
    }

    .city-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    .visa-type-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .card-arrow {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .btn-premium-cta {
        padding: 14px 32px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .destination-card {
        min-height: auto;
    }

    .region-block {
        margin-bottom: 40px;
    }
}

/* ========================================
   TIMELINE COMPONENTS FOR VISA PROCESS
   ======================================== */

.timeline {
    position: relative;
    padding-left: 30px;
}

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

.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.timeline-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -37px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.timeline-content h6 {
    margin-bottom: 5px;
    color: var(--dark-color);
}

.timeline-content p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Mobile Timeline Adjustments */
@media (max-width: 768px) {
    .timeline {
        padding-left: 20px;
    }

    .timeline-marker {
        left: -27px;
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .timeline::before {
        left: 10px;
    }
}



/* ========================================
   17. GRADIENT ICONS ENHANCEMENT
   ======================================== */

/* Force Icon Box background to be light so gradient icons are visible */
.feature-card .icon-box {
    background: #f8faff !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative !important;
    /* Ensure it stays on top */
    z-index: 5 !important;
}

.stat-icon i,
.feature-card .icon-box i,
.service-icon-box i,
.feature-list-item .feature-icon i,
.industry-icon-large {
    background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    /* Ensure no color override hides it */
    color: var(--primary-color) !important;
    font-size: 2.5rem !important;
    /* Increased from 2rem */
    line-height: 1 !important;
}

/* Hover States - Brighten/Flip */
.stat-item:hover .stat-icon i,
.feature-card:hover .icon-box i,
.service-card-enhanced:hover .service-icon-box i,
.industry-content-card:hover .industry-icon-large {
    background-image: linear-gradient(135deg, var(--secondary-color), #FFD700) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: scale(1.15);
    /* Slightly more pop */
}

/* ========================================
   18. MODERN TIMELINE STYLES
   ======================================== */

/* Timeline Container */
.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0;
}

/* Central Timeline Line */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
            rgba(43, 122, 122, 0.1) 0%,
            rgba(43, 122, 122, 0.3) 50%,
            rgba(43, 122, 122, 0.1) 100%);
    transform: translateX(-50%);
    border-radius: 10px;
}

/* Animated Progress Line */
.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg,
            var(--primary-color) 0%,
            var(--secondary-color) 100%);
    border-radius: 10px;
    transition: height 0.3s ease-out;
    box-shadow: 0 0 20px rgba(43, 122, 122, 0.5);
}

/* Timeline Step */
.timeline-step {
    position: relative;
    margin-bottom: 40px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

/* Timeline Number Badge */
.timeline-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(43, 122, 122, 0.3),
        0 0 0 10px rgba(255, 255, 255, 1),
        0 0 0 15px rgba(43, 122, 122, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-number span {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.timeline-step:hover .timeline-number {
    transform: translate(-50%, -50%) scale(1.15) rotate(360deg);
    box-shadow: 0 15px 40px rgba(43, 122, 122, 0.5),
        0 0 0 10px rgba(255, 255, 255, 1),
        0 0 0 20px rgba(43, 122, 122, 0.2);
}

/* Timeline Card */
.timeline-card {
    position: relative;
    width: calc(50% - 60px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 20px;
}

.timeline-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.timeline-card:hover::before {
    opacity: 1;
}

.timeline-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Left/Right Positioning */
.timeline-left {
    margin-right: auto;
}

.timeline-right {
    margin-left: auto;
}

/* Timeline Icon */
.timeline-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: linear-gradient(135deg, rgba(43, 122, 122, 0.1), rgba(244, 196, 48, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.timeline-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.timeline-card:hover .timeline-icon::before {
    opacity: 0.15;
}

.timeline-icon i {
    font-size: 2rem;
    background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-card:hover .timeline-icon i {
    transform: scale(1.1) rotate(5deg);
}

/* Timeline Content */
.timeline-content {
    flex: 1;
}

.timeline-content h4 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.timeline-content p {
    line-height: 1.8;
    font-size: 1rem;
}

/* Connector Lines */
.timeline-card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.timeline-left::after {
    right: -40px;
}

.timeline-right::after {
    left: -40px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .timeline-line {
        left: 30px;
    }

    .timeline-number {
        left: 30px;
        width: 60px;
        height: 60px;
    }

    .timeline-number span {
        font-size: 1.25rem;
    }

    .timeline-card {
        width: calc(100% - 100px);
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .timeline-card::after {
        display: none;
    }

    .timeline-icon {
        width: 80px;
        height: 80px;
    }

    .timeline-icon i {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .timeline-container {
        padding: 40px 0;
    }

    .timeline-step {
        margin-bottom: 60px;
    }

    .timeline-card {
        padding: 30px 25px;
    }

    .timeline-content h4 {
        font-size: 1.25rem;
    }

    .timeline-content p {
        font-size: 0.95rem;
    }
}

/* Animation on Scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-step[data-aos="fade-up"] {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   19. ANIMATED BACKGROUND PATTERNS
   ======================================== */

/* Background Patterns Container */
.bg-patterns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Individual Pattern Items */
.pattern-item {
    position: absolute;
    opacity: 0;
    animation: fallDown 12s linear infinite;
}

/* Circle Pattern */
.pattern-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(43, 122, 122, 0.4), rgba(43, 122, 122, 0.2));
    box-shadow: 0 0 15px rgba(43, 122, 122, 0.3);
}

/* Square Pattern */
.pattern-square {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(244, 196, 48, 0.4), rgba(244, 196, 48, 0.2));
    transform: rotate(45deg);
    box-shadow: 0 0 15px rgba(244, 196, 48, 0.3);
}

/* Triangle Pattern */
.pattern-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid rgba(43, 122, 122, 0.2);
    filter: drop-shadow(0 0 5px rgba(43, 122, 122, 0.3));
}

/* Star Pattern */
.pattern-star {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid rgba(244, 196, 48, 0.25);
    position: relative;
    filter: drop-shadow(0 0 5px rgba(244, 196, 48, 0.3));
}

.pattern-star::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid rgba(244, 196, 48, 0.25);
}

/* Falling Animation */
@keyframes fallDown {
    0% {
        top: -10%;
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        top: 110%;
        opacity: 0;
        transform: translateY(0) rotate(360deg);
    }
}

/* Random positioning for each pattern */
.pattern-item:nth-child(1) {
    left: 5%;
    animation-duration: 14s;
}

.pattern-item:nth-child(2) {
    left: 15%;
    animation-duration: 11s;
}

.pattern-item:nth-child(3) {
    left: 25%;
    animation-duration: 13s;
}

.pattern-item:nth-child(4) {
    left: 35%;
    animation-duration: 15s;
}

.pattern-item:nth-child(5) {
    left: 45%;
    animation-duration: 12s;
}

.pattern-item:nth-child(6) {
    left: 55%;
    animation-duration: 14s;
}

.pattern-item:nth-child(7) {
    left: 65%;
    animation-duration: 11s;
}

.pattern-item:nth-child(8) {
    left: 75%;
    animation-duration: 13s;
}

.pattern-item:nth-child(9) {
    left: 85%;
    animation-duration: 12s;
}

.pattern-item:nth-child(10) {
    left: 95%;
    animation-duration: 15s;
}

.pattern-item:nth-child(11) {
    left: 8%;
    animation-duration: 13s;
}

.pattern-item:nth-child(12) {
    left: 18%;
    animation-duration: 14s;
}

.pattern-item:nth-child(13) {
    left: 30%;
    animation-duration: 12s;
}

.pattern-item:nth-child(14) {
    left: 40%;
    animation-duration: 11s;
}

.pattern-item:nth-child(15) {
    left: 50%;
    animation-duration: 15s;
}

.pattern-item:nth-child(16) {
    left: 62%;
    animation-duration: 13s;
}

.pattern-item:nth-child(17) {
    left: 70%;
    animation-duration: 12s;
}

.pattern-item:nth-child(18) {
    left: 80%;
    animation-duration: 14s;
}

.pattern-item:nth-child(19) {
    left: 88%;
    animation-duration: 11s;
}

.pattern-item:nth-child(20) {
    left: 92%;
    animation-duration: 13s;
}


/* Ensure container has relative positioning */
.process-section {
    position: relative;
}

.process-section .container {
    position: relative;
    z-index: 2;
}


/* Mobile optimization - reduce patterns */
@media (max-width: 768px) {
    .pattern-item:nth-child(n+6) {
        display: none;
    }

    .pattern-circle,
    .pattern-square {
        width: 15px;
        height: 15px;
    }
}

/* ========================================
   20. SNOWFALL ANIMATION
   ======================================== */

/* Snowflake Animation */
.snowflake {
    position: absolute;
    top: -10%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    animation: snowfall linear infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    user-select: none;
    pointer-events: none;
}

@keyframes snowfall {
    0% {
        top: -10%;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 110%;
        opacity: 0;
        transform: translateX(20px) rotate(360deg);
    }
}