@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(to right, #EF8821, #FFB86C);
    z-index: 9999;
    opacity: 0;
    transition: width 0.2s ease-out, opacity 0.3s ease;
}

.hero-split,
.hero-services {
    isolation: isolate !important;
}

@media (prefers-reduced-motion: reduce) {

    .particles-container::before,
    .particles-container::after {
        animation: none !important;
    }
}

.hero-split,
.hero-services {
    position: relative;
    overflow: hidden;
}

/* Global Elite Luxury Filters for Hero Landmarks */
.hero-split img:not(.logo-img),
.hero-services img:not(.logo-img) {
    filter: saturate(1.4) contrast(1.1) brightness(0.95) !important;
    transition: filter 0.5s ease;
}

.hero-split::before,
.hero-split::after,
.hero-services::before,
.hero-services::after {
    content: '';
    position: absolute;
    inset: -30% -20%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background-repeat: no-repeat;
    background-size: 320px 320px, 260px 260px, 220px 220px, 180px 180px, 140px 140px;
    will-change: transform;
}

.hero-split::before,
.hero-services::before {
    background-image:
        radial-gradient(circle at 20% 110%, rgba(239, 136, 33, 0.22) 0 14px, transparent 15px),
        radial-gradient(circle at 55% 120%, rgba(212, 175, 55, 0.18) 0 12px, transparent 13px),
        radial-gradient(circle at 80% 115%, rgba(0, 212, 255, 0.14) 0 10px, transparent 11px),
        radial-gradient(circle at 35% 125%, rgba(239, 136, 33, 0.14) 0 9px, transparent 10px),
        radial-gradient(circle at 70% 130%, rgba(255, 255, 255, 0.08) 0 8px, transparent 9px);
    animation: heroBubbleDriftA 18s linear infinite;
}

.hero-split::after,
.hero-services::after {
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 15% 115%, rgba(0, 212, 255, 0.14) 0 12px, transparent 13px),
        radial-gradient(circle at 50% 130%, rgba(239, 136, 33, 0.16) 0 10px, transparent 11px),
        radial-gradient(circle at 85% 125%, rgba(212, 175, 55, 0.14) 0 9px, transparent 10px),
        radial-gradient(circle at 30% 140%, rgba(255, 255, 255, 0.07) 0 8px, transparent 9px),
        radial-gradient(circle at 72% 145%, rgba(239, 136, 33, 0.10) 0 7px, transparent 8px);
    animation: heroBubbleDriftB 24s linear infinite;
}

@keyframes heroBubbleDriftA {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, -26%, 0);
    }
}

@keyframes heroBubbleDriftB {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, -34%, 0);
    }
}

.hero-split .container,
.hero-services .container {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {

    .hero-split::before,
    .hero-split::after,
    .hero-services::before,
    .hero-services::after {
        animation: none !important;
    }
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0e17;
}

::-webkit-scrollbar-thumb {
    background: #EF8821;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc721b;
}

/* Font import moved to top */

:root {
    --primary-color: #EF8821;
    --accent-gold: #D4AF37;
    --accent-blue: #00d4ff;
    --primary-dark: #cc721b;
    --secondary-color: #0a0e17;
    --secondary-light: #1a1f2e;
    --text-color: #e8e9ea;
    --text-muted: #b8b9ba;
    --text-subtle: #9ca3af;
    --white: #ffffff;
    --section-bg: #0f1419;
    --text-dark: #f8fafc;
    --bg-surface: rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(239, 136, 33, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 20px rgba(239, 136, 33, 0.35);
    --transition: all 0.3s ease;
    --container-width: 1140px;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
    --section-padding: 60px;
}

/* Micro-Texture Utility - dark theme: subtle dark grain only */
.texture-bg {
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    background-attachment: scroll;
}

@keyframes pulse-phone {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 136, 33, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(239, 136, 33, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 136, 33, 0);
    }
}

/* Hero Tinge Animation for Homepage */
@keyframes heroTingeHome {

    0%,
    100% {
        background: linear-gradient(135deg, rgba(239, 136, 33, 0.1) 0%, rgba(212, 175, 55, 0.05) 50%, rgba(0, 212, 255, 0.1) 100%);
    }

    33% {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(239, 136, 33, 0.05) 50%, rgba(212, 175, 55, 0.1) 100%);
    }

    66% {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(0, 212, 255, 0.05) 50%, rgba(239, 136, 33, 0.1) 100%);
    }
}

/* Hero Tinge Animation for Services Page */
@keyframes heroTinge {

    0%,
    100% {
        background: linear-gradient(135deg, rgba(239, 136, 33, 0.08) 0%, rgba(212, 175, 55, 0.04) 50%, rgba(0, 212, 255, 0.08) 100%);
    }

    33% {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(239, 136, 33, 0.04) 50%, rgba(212, 175, 55, 0.08) 100%);
    }

    66% {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(0, 212, 255, 0.04) 50%, rgba(239, 136, 33, 0.08) 100%);
    }
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    width: 100%;
}

/* Hyper-Interactive Cards */
.reveal-container {
    perspective: 1000px;
}

.card-tilt {
    transition: var(--transition-fast) !important;
    transform-style: preserve-3d;
}

/* Magnetic Interaction Base */
.magnetic-btn {
    display: inline-block;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Premium Image Hover Zoom Effect */
.premium-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.premium-image img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.premium-image:hover img {
    transform: scale(1.08);
}

/* Premium Card Lift Effect */
.card-lift {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-lift:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

/* Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Gradient Overlay */
.premium-overlay {
    position: relative;
    overflow: hidden;
}

.premium-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
    scroll-behavior: smooth;
}

/* Global Section scroll margin for floating header */
section[id],
.reveal-on-scroll {
    scroll-margin-top: 100px;
}

/* Grand Text Reveal (Masking) */
.mask-reveal {
    overflow: hidden;
    display: block;
}

.mask-reveal span {
    display: inline-block;
    margin-right: 15px;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mask-reveal.visible span {
    transform: translateY(0);
    opacity: 1;
}

/* Top Bar */
.top-bar {
    background: #000;
    color: #fff;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1003;
    width: 100%;
    height: 40px;
    box-shadow: none !important;
    border-bottom: none !important;
}

.top-bar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info span {
    margin-right: 25px;
    color: #ccc;
}

.top-info i {
    color: var(--primary-color);
    margin-right: 5px;
}

.top-info a {
    color: #fff;
    font-weight: 500;
}

.top-social a {
    color: #ccc;
    margin-left: 15px;
    transition: var(--transition);
}

.top-social a:hover {
    color: var(--primary-color);
}

/* Header - Dark luxury - REMOVED, using #main-header in wrapper instead */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-cta .nav-cta {
    padding: 12px 25px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.header-cta .nav-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Header Wrapper - Black bar containing the pill header */
.header-wrapper {
    background: #000;
    padding: 10px 0;
    position: sticky;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Header - Pill shape within black wrapper */
#main-header {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 15px 40px;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Theme - Single dark canvas (no banding) */
body {
    margin: 0;
    padding: 110px 0 0 0;
    font-family: var(--font-body);
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.logo span {
    color: var(--primary-color);
}

/* Logo Image Styling */
.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: var(--transition-fast);
}

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

/* Footer Logo Styling */
.footer-logo {
    display: inline-block;
    margin-bottom: 24px;
}

.footer-logo-img {
    height: 180px;
    /* Boosted for maximum visibility and horizontal impact */
    width: auto;
    object-fit: contain;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .logo-img {
        height: 36px;
    }

    .footer-logo-img {
        height: 70px;
        /* Increased from 50px */
    }
}

nav ul {
    display: flex;
    gap: 32px;
    align-items: center;
}

.menu-toggle {
    display: none;
}

nav a {
    font-weight: 500;
    font-size: 15px;
    color: var(--secondary-color);
    opacity: 0.8;
}

nav a:hover,
nav a.active {
    color: var(--primary-color);
    opacity: 1;
}

.nav-cta {
    background: var(--primary-color);
    color: var(--white) !important;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    opacity: 1 !important;
    text-decoration: none !important;
}

@media (hover: hover) {
    .nav-cta:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        color: var(--white) !important;
        text-decoration: none !important;
    }
}

/* Hero Split */
/* Homepage Hero Background (Vibrant Wide Aesthetic) */
.hero-split {
    padding: 140px 0 var(--section-padding);
    background-color: #0f1c2e;
    background-image: linear-gradient(rgba(15, 28, 46, 0.5), rgba(15, 28, 46, 0.5)), url('../assets/images/burj-khalifa-bg-wide-light.jpg');
    background-size: cover;
    background-position: center 5%;
    /* Spire Fix: Shifted further up to ensure tip is visible */
    min-height: 90vh;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-split .hero-h1 {
    color: white;
    text-shadow: none;
    /* Removed heavy shadow for plain look */
    position: relative;
    z-index: 5;
}

.hero-split .hero-subtext {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none;
    position: relative;
    z-index: 5;
}

.hero-split .hero-checklist li {
    color: white;
    text-shadow: none;
    position: relative;
    z-index: 5;
}

/* Services page hero background & "Shiny" sync */
body.services-page .hero-split {
    background-image: none !important;
    /* Move background to pseudo-element for vibrancy filtering */
}

body.services-page .hero-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(239, 136, 33, 0.1), transparent 80%),
        /* Subtle warm center */
        linear-gradient(rgba(15, 28, 46, 0.4), rgba(15, 28, 46, 0.4)),
        url('../assets/images/palm-jumeirah-real.jpg');
    /* Updated to real vibrant photo */
    background-size: cover;
    background-position: center center;
    filter: saturate(1.5) contrast(1.1);
    /* Maintaining vibrancy boost */
    z-index: 1;
}

body.services-page .hero-split .container {
    position: relative;
    z-index: 10;
}

body.services-page .hero-split .hero-h1 {
    text-shadow: none;
    /* Toned down for plain look */
}

body.services-page .hero-split .hero-subtext {
    text-shadow: none;
}

/* Override texture-bg pattern on homepage hero for a cleaner landmark view */
.hero-split.texture-bg {
    background-image: linear-gradient(rgba(15, 28, 46, 0.5), rgba(15, 28, 46, 0.5)), url('../assets/images/burj-khalifa-bg-wide-light.jpg');
    background-position: center 30%;
}

.hero-split-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.hero-h1 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.hero-h1 span {
    color: var(--primary-color);
}

.hero-subtext {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.hero-checklist {
    list-style: none;
    margin-bottom: 40px;
}

.hero-checklist li {
    margin-bottom: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.hero-checklist i {
    color: var(--primary-color);
    margin-right: 12px;
    font-size: 20px;
}

.hero-image-box {
    width: 100%;
    margin-top: 30px;
}

.hero-consultant-img {
    width: 300px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

/* Lead Form - Dark luxury */
.lead-form-container {
    background: rgba(15, 20, 30, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--primary-color);
}

.lead-form-container h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.lead-form-container p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.lead-form .form-group {
    margin-bottom: 20px;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    transition: var(--transition);
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(239, 136, 33, 0.1);
}

.lead-form textarea {
    height: 100px;
    resize: none;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .hero-split-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-checklist {
        display: inline-block;
        text-align: left;
    }

    .hero-h1 {
        font-size: 32px;
    }
}

/* Scroll Animations Enhancements */
.scale-up {
    /* Visible by default to prevent blank screen */
    transform: scale(1);
    opacity: 1;
    transition: var(--transition);
}

/* Only hide if JS is active and adds a specific class */
.js-active .scale-up:not(.visible) {
    transform: scale(0.95);
    opacity: 0;
}

/* Ensure content is visible if JS is disabled or fails */
@media (prefers-reduced-motion: reduce) {

    .scale-up,
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.scale-up.visible {
    transform: scale(1);
    opacity: 1;
}

.parallax-img {
    transition: transform 0.1s ease-out;
}

.parallax {
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
}

/* Section Spacing */
section {
    padding: var(--section-padding) 0;
}

#counter-section {
    padding: 40px 0;
    background: #111;
    color: var(--white);
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    text-align: center;
}

.counter-grid h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Mission Section - Desktop Base */
.mission-section {
    padding: var(--section-padding) 0;
    overflow: hidden;
    background: var(--section-bg);
}

.mission-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    align-items: center;
}

.mission-image-col {
    flex: 1.2;
    min-width: 320px;
}

.mission-image-wrapper {
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.mission-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-text-col {
    flex: 1;
    min-width: 320px;
}

.mission-heading {
    margin-bottom: 60px !important;
    text-align: left;
}

/* Expertise Section */
.expertise-section {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* Industries Section */
.industries-section {
    padding: var(--section-padding) 0;
    background: var(--section-bg);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.industry-card {
    background: rgba(15, 20, 30, 0.8);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-subtle);
    height: 100%;
}

.industry-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-alternate {
    background: var(--section-bg);
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: center;
}

.expertise-card {
    padding: 40px 30px;
    background: rgba(15, 20, 30, 0.85);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
}

.expertise-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.expertise-card p {
    font-size: 15px;
    color: var(--text-muted);
}

.expertise-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.center-highlight {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 80px 40px;
    box-shadow: 0 15px 40px rgba(6, 106, 171, 0.2);
    position: relative;
    z-index: 5;
    border-radius: 20px;
}

.center-highlight h3 {
    color: var(--white);
}

.center-highlight p {
    color: rgba(255, 255, 255, 0.8);
}

.center-highlight .expertise-icon {
    color: var(--white);
}

/* Services Modern */
.services-modern {
    padding: var(--section-padding) 0;
    background: var(--section-bg);
}

.services-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card-modern {
    background: rgba(15, 20, 30, 0.85);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-subtle);
}

.service-card-modern:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.service-card-modern i {
    font-size: 35px;
    color: var(--primary-color);
    margin-bottom: 25px;
    display: block;
}

.service-card-modern h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.service-card-modern p {
    font-size: 15px;
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .center-highlight {
        padding: 60px 40px;
    }
}

.card {
    background: rgba(15, 20, 30, 0.9);
    padding: 48px 40px;
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    transition: var(--transition);
    text-align: left;
}

/* Services detail card styles now inherit from default card styles */

@media (hover: hover) {
    .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
        border-color: var(--primary-color);
    }
}

/* Premium Card Glow Effect */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #EF8821, #FFB86C);
    border-radius: 24px 24px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .card:hover::before {
        opacity: 1;
    }
}

.card-icon {
    width: 64px;
    height: 64px;
    background: rgba(239, 136, 33, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 28px;
    margin-bottom: 32px;
    transition: var(--transition);
    box-shadow: 0 8px 24px rgba(239, 136, 33, 0.15);
}

@media (hover: hover) {
    .card:hover .card-icon {
        background: var(--primary-color);
        color: var(--white);
    }
}

/* Footer */
footer {
    background-color: #0c0c0c;
    color: var(--white);
    padding: 100px 0 40px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1.2fr 1.3fr;
    /* Widened first column for large logo impact */
    gap: 60px;
    /* Increased gap for more air */
    margin-bottom: 64px;
}

.footer-grid ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Fix footer nav alignment - ensure left alignment */
.footer-grid nav,
.footer-grid nav ul,
.footer-grid>div>nav,
footer nav ul {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
}

footer nav ul li,
.footer-grid nav ul li {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-grid ul li a {
    display: block;
    padding: 8px 0;
    color: #ccc;
    text-decoration: none;
    transition: var(--transition);
    text-align: left;
}

.footer-grid ul li a:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

footer h3 {
    color: var(--white);
    margin-bottom: 32px;
    font-size: 1.25rem;
}

footer p,
footer li {
    font-size: 15px;
    color: #999;
    margin-bottom: 16px;
}

footer a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: left;
    border-top: 1px solid #222;
    padding: 40px 0;
    font-size: 14px;
    color: #bbb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-policies a {
    color: #bbb;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.footer-policies a:hover {
    color: var(--primary-color);
}

/* Footer z-index and stacking fix */
footer {
    position: relative;
    z-index: 10;
    background: #000;
    border-top: 1px solid #111;
}

/* Services detail background fix */
.services-detail {
    background: #050505;
    color: white;
    padding: 180px 0;
    min-height: 400px;
}

.services-detail #services-grid:empty::before {
    content: "Loading services...";
    color: #888;
    font-style: italic;
    display: block;
    text-align: center;
    padding: 40px;
}

/* Raise floating WhatsApp above all overlays */
.floating-whatsapp {
    position: fixed;
    bottom: 32px;
    left: 32px;
    background: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    z-index: 99999;
    transition: var(--transition);
}

.floating-whatsapp:hover {
    transform: scale(1.1) rotate(10deg);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsiveness & Menu */
@media (max-width: 991px) {
    .container {
        padding: 0 24px;
    }

    .hero h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        font-size: 24px;
        color: var(--secondary-color);
        cursor: pointer;
        z-index: 1001;
        /* Ensure minimum touch target size */
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 14, 23, 0.98);
        justify-content: center;
        align-items: center;
        gap: 32px;
        z-index: 1000;
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
    }

    nav ul.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* Ensure footer links are visible on mobile */
    footer ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        height: auto !important;
        width: auto !important;
        background: transparent !important;
    }

    footer ul li {
        opacity: 1 !important;
        visibility: visible !important;
    }

    nav a {
        font-size: 24px;
        font-weight: 600;
        /* Ensure minimum touch target size */
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 16px;
    }

    .hero {
        padding: 120px 0 80px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    footer .logo {
        justify-content: center;
    }

    /* Mobile Form Enhancements */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #ddd;
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Ensure all buttons meet touch target size */
    button,
    .btn,
    .nav-cta,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px;
        font-size: 16px;
        cursor: pointer;
    }

    /* Improve tap targets for links */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Optimize floating WhatsApp for mobile */
    .floating-whatsapp {
        width: 56px;
        height: 56px;
        bottom: 20px;
        left: 20px;
        right: auto;
        font-size: 28px;
    }

    /* Improve mobile menu toggle visibility */
    .menu-toggle {
        background: transparent;
        border: none;
        padding: 8px;
    }

    /* Better spacing for mobile cards */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .card {
        padding: 32px 24px;
    }

    /* Optimize header for mobile */
    header {
        width: calc(100% - 40px);
        /* Responsive width with safety margin */
        padding: 8px 16px;
        top: 15px;
    }

    header.scrolled {
        width: calc(100% - 20px);
        top: 8px;
    }

    /* Constrain parallax on mobile to prevent overflow */
    .parallax {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* ===================================
   ACCESSIBILITY ENHANCEMENTS
   =================================== */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus indicators for keyboard navigation */
*:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Better focus indicators for interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 136, 33, 0.1);
}

/* Remove outline for mouse users, keep for keyboard users */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

*:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #D67000;
        --text-color: #000000;
        --text-muted: #333333;
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* 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;
        scroll-behavior: auto !important;
    }

    .parallax {
        transform: none !important;
    }

    .card-tilt {
        transform: none !important;
    }
}

/* Error messages for form validation */
.error-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

input.error,
select.error,
textarea.error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

/* Form message states */
.form-message {
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-weight: 600;
    text-align: center;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {

    button,
    a,
    input,
    select,
    textarea {
        min-height: 44px;
        min-width: 44px;
    }

    .btn {
        padding: 16px 32px;
        min-height: 48px;
    }
}

/* ARIA live region styling */
#aria-live-region,
#aria-live-assertive {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Improve contrast for links - NO UNDERLINE */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-dark);
    text-decoration-thickness: 2px;
}

/* Navigation links should be clearly distinguishable */
nav a {
    text-decoration: none;
}

nav a:hover,
nav a:focus {
    text-decoration: underline;
}

/* Ensure sufficient color contrast for text */
.text-muted {
    color: var(--text-muted);
}

/* Keyboard navigation for carousel */
.carousel-prev:focus,
.carousel-next:focus,
.carousel-dot:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    transform: scale(1.1);
}

/* FAQ accordion keyboard focus */
.faq-question:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    background-color: rgba(239, 136, 33, 0.05);
}

/* Service selector quiz keyboard focus */
.quiz-option:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(239, 136, 33, 0.2);
}

/* Mobile menu accessibility */
#mobile-menu:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Widget close button focus */
.widget-close:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    transform: scale(1.1);
}

/* Floating WhatsApp button focus */
.floating-whatsapp:focus {
    outline: 3px solid #25d366;
    outline-offset: 2px;
    transform: scale(1.1);
}

/* Keyboard Shortcuts Modal */
.keyboard-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.shortcuts-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shortcuts-content h2 {
    margin-bottom: 24px;
    color: var(--secondary-color);
}

.shortcuts-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--text-muted);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.shortcuts-close:hover {
    background: var(--light-bg);
    color: var(--primary-color);
}

.shortcuts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shortcuts-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.shortcuts-list li:last-child {
    border-bottom: none;
}

.shortcuts-list kbd {
    background: var(--light-bg);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-color);
    min-width: 120px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shortcuts-list span {
    flex: 1;
    color: var(--text-muted);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===================================
   COLOR CONTRAST IMPROVEMENTS
   =================================== */

/* Ensure all text meets WCAG AA standards (4.5:1 for normal text, 3:1 for large text) */

/* Improve contrast for muted text on light backgrounds */
.text-muted,
.section-title p {
    color: #555555;
    /* 7.5:1 contrast ratio on white - WCAG AAA */
}

/* Footer text contrast improvements */
footer li,
footer p {
    color: #999999;
    /* 2.8:1 on #0c0c0c - needs improvement for small text */
}

/* Improve footer link contrast */
footer a {
    color: #cccccc;
    /* 7.1:1 on #0c0c0c - WCAG AAA */
}

footer a:hover {
    color: #EF8821;
    /* Primary color for hover */
}

/* Footer bottom text */
.footer-bottom {
    color: #999999;
    /* Acceptable for small footer text */
}

/* Ensure button text has sufficient contrast */
.btn {
    background: var(--primary-color);
    color: #FFFFFF;
    /* 3.4:1 on #EF8821 - WCAG AA for large text */
    font-weight: 700;
    /* Makes it large text */
}

/* Improve contrast for placeholder text */
::placeholder {
    color: #757575;
    /* 4.6:1 on white - WCAG AA */
    opacity: 1;
}

:-ms-input-placeholder {
    color: #757575;
}

::-ms-input-placeholder {
    color: #757575;
}

/* Ensure nav links have sufficient contrast */
nav a {
    color: #1a1a1a;
    /* 12.6:1 on white - WCAG AAA */
}

nav a:hover,
nav a.active {
    color: #EF8821;
    /* 3.3:1 on white - WCAG AA for large text */
}

/* Improve contrast for disabled elements */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    color: #757575;
    /* 4.6:1 on white - WCAG AA */
    opacity: 0.6;
}

/* Ensure sufficient contrast for form labels */
label {
    color: #1a1a1a;
    /* 12.6:1 on white - WCAG AAA */
    font-weight: 600;
}

/* Trust signals text */
.trust-label {
    color: #555555;
    /* 7.5:1 on white - WCAG AAA */
}

.trust-stat {
    color: var(--text-dark);
}

/* Testimonial text */
.testimonial-text {
    color: #1a1a1a;
    /* 12.6:1 on white - WCAG AAA */
}

.author-info p {
    color: #555555;
    /* 7.5:1 on white - WCAG AAA */
}

/* FAQ text */
.faq-question {
    color: #1a1a1a;
    /* 12.6:1 on white - WCAG AAA */
}

.faq-answer {
    color: #333333;
    /* 9.7:1 on white - WCAG AAA */
}

/* Service card text */
.card h3 {
    color: #0f0f0f;
    /* 15.3:1 on white - WCAG AAA */
}

.card p {
    color: #555555;
    /* 7.5:1 on white - WCAG AAA */
}

/* Ensure hero text has sufficient contrast */
.hero h1 {
    color: #FFFFFF;
    /* Excellent contrast on dark overlay */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Improves readability */
}

.hero p {
    color: rgba(255, 255, 255, 0.95);
    /* Improved from 0.8 for better contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Improve contrast for quiz options */
.quiz-option {
    color: #1a1a1a;
    /* 12.6:1 on white - WCAG AAA */
}

.quiz-option:hover {
    color: #0f0f0f;
    /* 15.3:1 on white - WCAG AAA */
}

/* Industry card text */
.industry-card h3 {
    color: #0f0f0f;
    /* 15.3:1 on white - WCAG AAA */
}

.industry-card p {
    color: #555555;
    /* 7.5:1 on white - WCAG AAA */
}

/* Ensure all headings have sufficient contrast */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0f0f0f;
    /* 15.3:1 on white - WCAG AAA */
}

/* Contact information links */
address a {
    color: #EF8821;
    text-decoration: none;
}

address a:hover {
    color: #cc721b;
    /* 4.5:1 on white - WCAG AA */
}

/* Improve contrast for success/error messages */
.form-message.success {
    background-color: #d4edda;
    color: #0f5132;
    /* 7.1:1 on #d4edda - WCAG AAA */
    border: 1px solid #badbcc;
}

.form-message.error {
    background-color: #f8d7da;
    color: #842029;
    /* 7.1:1 on #f8d7da - WCAG AAA */
    border: 1px solid #f5c2c7;
}

/* Error message text */
.error-message {
    color: #dc3545;
    /* 4.5:1 on white - WCAG AA */
    font-weight: 700;
    /* Makes it more visible */
}

/* End of Critical Overrides */

/* ============================================
   MOBILE VIEW FIXES
   Fix for background-attachment: fixed on mobile
   iOS/Android browsers don't support fixed backgrounds properly
   ============================================ */

@media (max-width: 768px) {

    /* Fix hero backgrounds on mobile - disable fixed attachment */
    .hero-video-bg,
    .page-header .hero-video-bg,
    [style*="background-attachment: fixed"],
    [style*="background-attachment:fixed"],
    .parallax-bg,
    .texture-bg,
    .hero-split {
        background-attachment: scroll !important;
    }

    /* Disable parallax effects on mobile for performance */
    .parallax,
    .parallax-element,
    .parallax-layer-1,
    .parallax-layer-2,
    .parallax-layer-3,
    .parallax-layer-4 {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Optimize texture background for mobile */
    .texture-bg {
        background-image: none !important;
        background: transparent !important;
    }

    /* Optimize scrolling performance on mobile */
    html,
    body {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }

    /* Stop only the problematic continuous animations on mobile (prevents "heartbeat" effect) */
    .floating-icon,
    .floating-widget,
    .sticky-widget,
    .sticky-widget.pulse,
    .pulse,
    .pulse-glow,
    .professionals-cta::before,
    .btn-submit,
    .btn-gold,
    .btn-primary,
    .btn-secondary,
    .explore-now-btn,
    .faq-question,
    .faq-item,
    .faq-section .faq-item,
    .map-section .location-map-card,
    .map-section .location-details-card,
    .location-map-card,
    .location-details-card,
    .trust-item,
    .service-card-modern,
    .lead-form-container,
    .consultant-letter,
    .consultant-letter .letter-content,
    .expertise-icon i,
    .trust-icon i,
    .service-card-modern i {
        animation: none !important;
        transform: none !important;
    }

    .letter-content.typing p::after {
        animation: none !important;
        display: none !important;
    }

    /* Reduce glass blur on mobile to prevent hazy/shaky text while scrolling */
    .professionals-cta,
    .professionals-cta::before,
    .dark-luxury-card,
    .service-detail-card,
    .services-modern .service-card-modern,
    .expertise-section .expertise-card,
    .faq-section .faq-item,
    .map-section .location-map-card,
    .map-section .location-details-card,
    .consultant-letter .letter-content,
    .lead-form-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Optimize section scrolling */
    section {
        transform: none !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Fix floating elements that cause flickering */
    .floating-contact-icons,
    .sticky-widgets,
    .floating-widget {
        transform: none !important;
        animation: none !important;
        position: fixed !important;
        will-change: auto !important;
    }

    /* Optimize grid patterns and overlays */
    .particles-container {
        display: block !important;
        opacity: 0.45 !important;
    }

    .particles-container * {
        display: none !important;
        opacity: 0 !important;
    }

    /* Keep premium ambience on mobile — STATIC only, no animation for smooth scroll */
    .mesh-bg {
        display: block !important;
        opacity: 0.14 !important;
        animation: none !important;
        will-change: auto !important;
        transform: none !important;
    }

    .gradient-orb,
    .orb-1,
    .orb-2 {
        display: block !important;
        opacity: 0.10 !important;
        filter: blur(80px) !important;
        animation: none !important;
        will-change: auto !important;
        transform: none !important;
    }

    .grid-pattern,
    .orb-3 {
        display: none !important;
        opacity: 0 !important;
    }

    /* Ensure smooth scrolling container */
    .container {
        overflow: visible !important;
        position: relative !important;
    }

    /* Optimize hero sections for mobile */
    .hero-split,
    .hero-services {
        min-height: 86vh !important;
        height: auto !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
        padding-top: 110px !important;
        padding-bottom: 70px !important;
    }

    /* Ensure hero background images (inline <img> layers) cover the section */
    .hero-split>div img,
    .hero-services>div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Home hero inline image shouldn't be tiny on mobile (override inline max-width:400px) */
    .hero-image-box img {
        max-width: 100% !important;
    }

    /* Mobile header pill: keep logo centered and hamburger aligned */
    #main-header .header-container {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #main-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    #main-header .header-container .logo {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .logo-img {
        display: block !important;
        height: 28px !important;
        width: auto !important;
        margin: 0 !important;
        transform: translateY(-2px) !important;
    }

    #main-header .header-container .main-nav {
        display: none !important;
    }

    #main-header .header-container .mobile-menu-btn {
        grid-column: 3 !important;
        justify-self: end !important;
        padding: 8px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(-2px) !important;
    }

    /* Mobile sticky widgets: slightly smaller + tighter to edge */
    .sticky-widgets {
        bottom: 18px !important;
        right: 18px !important;
    }

    .sticky-widget {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .sticky-widget.email {
        background: #ea4335 !important;
        color: #ffffff !important;
    }

    /* Mobile hero framing: bias focus upward a bit (prevents awkward cropping) */
    .hero-split>div img {
        object-position: center 20% !important;
    }

    .hero-services>div img {
        object-position: center 35% !important;
    }

    .hero-split .container,
    .hero-services .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Disable parallax scrolling effects */
    .parallax-bg {
        background-attachment: scroll !important;
        transform: none !important;
    }

    /* Optimize trust signals for mobile */
    .trust-signals {
        transform: none !important;
        animation: none !important;
    }

    /* Fix mobile menu performance */
    .mobile-menu,
    .menu-toggle {
        transform: none !important;
        transition: none !important;
    }

    /* Ensure hero section has proper height and visibility on mobile */
    .page-header.hero {
        min-height: 40vh;
        height: auto !important;
        position: relative;
        overflow: visible;
    }

    .page-header .hero-video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-attachment: scroll !important;
    }

    .page-header .hero-content {
        position: relative;
        z-index: 2;
        padding: 80px 20px 60px;
    }

    .page-header .hero-content h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .page-header .hero-content p {
        font-size: 1rem;
    }

    /* Fix policy content sections on mobile */
    .policy-content {
        padding: 60px 0 !important;
        background: var(--white) !important;
    }

    .policy-content .container {
        padding: 0 20px;
    }

    .policy-content h2 {
        margin-top: 40px !important;
        font-size: 1.5rem;
    }

    .policy-content p,
    .policy-content li {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .policy-content ul {
        margin-left: 20px !important;
    }

    /* Fix contact section on mobile */
    .contact-section {
        padding: 80px 0 !important;
    }

    .contact-section>.container>div {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .contact-section h2 {
        font-size: 2rem !important;
    }

    .contact-form-premium {
        padding: 40px 20px !important;
        border-radius: 30px !important;
    }

    .contact-form-premium .form-input {
        padding: 16px !important;
    }

    /* Fix contact form grid on mobile */
    .contact-form-premium div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Fix mobile button sizing in contact form */
    .contact-form-premium .btn {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
        white-space: normal !important;
        height: auto !important;
        margin-top: 10px;
    }

    /* Fix services page card overlapping */
    .services-summary,
    .services-detail {
        padding: 60px 0 !important;
    }

    .services-summary .service-card-enhanced,
    .service-card-enhanced {
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
    }

    /* Ensure proper stacking on mobile */
    section {
        position: relative;
        z-index: 1;
    }

    /* Fix footer bottom on mobile */
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-policies {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px !important;
    }

    /* CRITICAL FIX: Force all animated elements to be visible on mobile
       This prevents blank pages if JS is slow or fails to trigger observers */
    .fade-in,
    .scale-up,
    .mask-reveal,
    .reveal-on-scroll,
    .spiral-entrance,
    .animate-slide-left,
    .animate-slide-right,
    .animate-fade-up,
    .animate-scale-in,
    .animate-bounce-in,
    .converged,
    .diverged,
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    /* Ensure section titles are always visible on mobile */
    .section-title.fade-in,
    .js-active .section-title.fade-in:not(.visible) {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Override parallax inline styles on mobile */
    .trust-item,
    .expertise-card,
    .service-card-modern,
    .service-detail-card,
    .faq-item,
    .quiz-option,
    .letter-content,
    .hero-text-col,
    .hero-form-col {
        transform: none !important;
        will-change: auto !important;
    }
}

/* FAILSAFE: Force dark text on service cards explicitly */
.service-card-front h3,
.service-card-enhanced h3 {
    color: #000000 !important;
}

.service-card-front p,
.service-card-enhanced p {
    color: #111111 !important;
    opacity: 1 !important;
    /* Ensure no transparency */
}

@media (max-width: 768px) {
    header {
        top: 15px !important;
        padding: 10px 20px !important;
        width: 95% !important;
    }

    .logo {
        font-size: 20px !important;
    }

    .menu-toggle {
        font-size: 20px !important;
    }
}

/* ===================================
   MOBILE RESPONSIVENESS FIXES
   Vendor Feedback: Feb 2026
   =================================== */

@media (max-width: 768px) {

    /* 1. SECTION PADDING REDUCTION */
    section {
        padding: 40px 15px !important;
    }

    .overview-section,
    .mission-section,
    .services-grid,
    .service-selector,
    .faq-section,
    .trust-bar,
    .industries-section,
    .testimonials-section {
        padding: 40px 15px !important;
    }

    .section-header {
        margin-bottom: 24px !important;
    }

    /* 2. CARD BORDERS - Light backgrounds */
    .card,
    .overview-card,
    .step-card,
    .faq-item,
    .trust-card,
    .feature-card,
    .value-card,
    .timeline-item,
    .contact-card {
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        margin-bottom: 16px !important;
    }

    /* 3. CARD BORDERS - Dark backgrounds */
    .service-card,
    .service-card-front,
    .service-card-enhanced,
    section[style*="black"] .card,
    .dark-section .card {
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    /* 4. PARTNER LOGO SIZING */
    .trust-bar i,
    .partner-logos i {
        font-size: 2rem !important;
    }

    .trust-bar,
    .partner-logos {
        gap: 20px !important;
    }

    /* 5. FOOTER SPACING */
    footer {
        padding: 40px 15px !important;
    }

    footer .footer-column {
        margin-bottom: 20px !important;
    }

    footer ul li {
        margin-bottom: 8px !important;
    }

    /* 6. IMAGE CONSTRAINTS */
    img:not(.logo-img) {
        max-height: 200px !important;
        object-fit: cover !important;
    }

    .hero img,
    .parallax-container img {
        max-height: 300px !important;
    }

    /* 7. TYPOGRAPHY SCALING & ALIGNMENT */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
        transform: none !important;
    }

    .hero h1 {
        margin-bottom: 16px !important;
        text-align: left !important;
    }

    .hero p {
        text-align: left !important;
        margin-bottom: 32px !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* 8. CARD INTERNAL SPACING */
    .card {
        padding: 20px 16px !important;
    }

    /* 9. GRID GAP REDUCTION */
    .card-grid,
    .services-grid,
    .features-grid {
        gap: 16px !important;
    }

    /* 10. HERO SECTION OPTIMIZATION */
    .hero {
        padding: 60px 15px 40px !important;
        min-height: auto !important;
    }

    /* 11. FLOATING BUTTON ADJUSTMENT */
    .floating-whatsapp,
    .floating-cta {
        bottom: 20px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .floating-whatsapp i,
    .floating-cta i {
        font-size: 1.25rem !important;
    }

    /* 12. DARK SECTION CARD BORDERS - Override inline styles */
    .services-grid .card,
    .services-grid .card-grid .card,
    section[style*="090909"] .card,
    section[style*="151515"] .card {
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* 13. INDUSTRY CARDS - Dark sections */
    .industries-section .card,
    .testimonials-section .card {
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    /* 14. RECTANGULAR FILLER FIX - Remove pill look from major sections */
    .services-grid,
    .mission-section,
    .trust-signals,
    section[style*="border-radius: 100px"],
    section[style*="border-radius:100px"] {
        border-radius: 0 !important;
    }

    .mission-section .container>div {
        gap: 40px !important;
    }

    .mission-section div[style*="height: 650px"] {
        height: 350px !important;
        /* Better mobile filler scale */
        border-radius: 30px !important;
        /* Subtler corner rounding */
    }

    .mission-section h2 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 24px !important;
    }

    .mission-section p {
        font-size: 1.1rem !important;
        margin-bottom: 30px !important;
    }

    .mission-section h2.mission-heading {
        font-size: 2.2rem !important;
        /* Standardized with inner headers */
        line-height: 1.1 !important;
        margin-bottom: 24px !important;
        text-align: left !important;
    }

    .mission-section .mission-image-wrapper {
        height: auto !important;
        max-height: 350px !important;
        /* Prevent elongation */
        aspect-ratio: 16/10 !important;
        /* Better mobile proportions */
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .mission-section .mission-image-wrapper img {
        object-position: center center !important;
        object-fit: cover !important;
        height: 100% !important;
        width: 100% !important;
    }

    .mission-grid {
        gap: 32px !important;
    }

    .hero-content,
    .page-header .hero-content {
        padding-left: 0 !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    .hero-content h1,
    .hero-content p,
    .hero-btns,
    .page-header .hero-content h1,
    .page-header .hero-content p {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        transform: none !important;
    }

    .section-title,
    .section-header,
    .mission-text-col,
    .mission-heading,
    .mission-section {
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Exclude .hero-content and .page-header .hero-content from zero padding to prevent bleed */

    .section-title h2,
    .section-header h2,
    .mission-heading,
    .hero-content h1,
    .hero-content p,
    .page-header h1,
    .hero h1,
    h1,
    h2,
    h3 {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        transform: none !important;
    }

    /* Fix mobile hero header gap & container alignment parity */
    .hero,
    .page-header {
        padding-top: 140px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: 600px !important;
        /* From removed block */
    }

    .container,
    .container.hero-content {
        /* Explicitly target the combination */
        padding-left: 24px !important;
        /* The SUPREME source of horizontal alignment */
        padding-right: 24px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove legacy column offsets which cause the 39px shift */
    .col-lg-6,
    .col-md-12,
    [class*="col-"],
    .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Incorporated from removed block */
    .hero h1 {
        font-size: 2.2rem !important;
        margin-top: 0 !important;
        /* Reset margin */
    }
}

/* ========================================
   PARTNER CAROUSEL (ONE-BY-ONE FADE)
   ======================================== */

.partner-carousel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
    min-height: 80px;
    /* Prevent collapse */
}

.partner-item {
    transition: all 0.5s ease-in-out;
}

.partner-item i {
    font-size: 3rem;
    color: #1a1a1a;
    opacity: 0.7;
    filter: grayscale(1);
    transition: var(--transition);
}

@media (hover: hover) {
    .partner-item i:hover {
        opacity: 1;
        color: var(--primary-color);
        filter: none;
    }
}

/* Mobile: Show only ONE active item at a time */
@media (max-width: 768px) {
    .partner-carousel {
        justify-content: center;
        gap: 0;
    }

    .partner-item {
        display: none;
        /* Hide all by default */
        opacity: 0;
        transform: translateY(10px);
    }

    .partner-item.active {
        display: block;
        /* Show only active */
        opacity: 1;
        transform: translateY(0);
        animation: fadeInSlide 0.5s ease forwards;
    }

    .partner-item i {
        font-size: 4.5rem;
        /* Large clear logo */
        color: #1a1a1a;
        /* Ensure visibility */
        opacity: 1;
        /* Full opacity on mobile */
        filter: none;
        /* No grayscale on mobile */
    }

    @keyframes fadeInSlide {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

/* Final Mobile Readability & Layout Fixes */
@media (max-width: 768px) {

    /* 1. Prevent Header Cut-off on Inner Pages */
    .page-header.hero {
        padding-top: 200px !important;
        /* Increased from 140px to safely clear header */
        align-items: flex-start !important;
        /* Ensure content starts from top */
    }

    /* 2. Refined Mobile Typography (Matching Desktop Elegance) */
    .hero h1,
    .page-header h1 {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        /* Soft, natural shadow */
        font-weight: 800 !important;
        -webkit-text-stroke: 0 !important;
        /* Remove harsh outline */
        color: white !important;
    }
}

/* ========================================
   MOBILE CARD VISUAL SEPARATION ENHANCEMENT
   Ensures cards have visible boundaries on mobile
   IMPORTANT: Only applies to LIGHT sections, NOT dark sections
   ======================================== */
@media (max-width: 768px) {

    /* 1. Light Section Cards ONLY - NOT dark sections */
    /* Explicitly target light section cards */
    .vision-mission .card,
    .founder-highlights .card,
    .certifications-section .certification-card,
    .why-us .card,
    section[style*="var(--white)"] .card,
    section[style*="background: #fff"] .card,
    section[style*="background: white"] .card {
        border: 1px solid #d0d0d0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    /* 2. PRESERVE Dark Section Cards - Override any white forcing */
    .services-grid .card,
    .engineered-services .card,
    section[style*="#090909"] .card,
    section[style*="#151515"] .card,
    section[style*="#0a0a0a"] .card,
    .stats-section .stat-box-dark,
    .stats-section .strategic-card {
        background: transparent !important;
        /* Keep dark background */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        /* Subtle white border */
        color: white !important;
    }

    /* 3. Services Table - Stack on Mobile (prevent cut-off) */
    .services-table-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 24px !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    .services-table-label {
        font-size: 1.1rem !important;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 12px !important;
        margin-bottom: 8px !important;
    }

    .services-table-content {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* 4. Vision/Mission Cards on About Page - Light sections */
    .vision-mission .card {
        border: 1px solid #ccc !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 24px !important;
        background: var(--white) !important;
    }

    /* 5. REMOVE excessive accent bars - only for light cards */
    .vision-mission .card::before,
    .founder-highlights .card::before,
    .certifications-section .certification-card::before {
        display: none !important;
        /* Remove accent bar on mobile */
    }

    /* 5. Section Padding to Prevent Cut-off */
    .services-summary,
    .services-detail,
    .vision-mission,
    .industries-section,
    .testimonials-section,
    .faq-section {
        padding: 60px 0 !important;
    }

    /* 6. Service Cards on Services Page - ONLY outer border, NO internal borders */
    .service-card-enhanced {
        border: 1px solid var(--border-subtle) !important;
        border-radius: 24px !important;
        /* ROUNDED corners like desktop */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        background: rgba(15, 20, 30, 0.9) !important;
    }

    /* Remove internal borders BUT preserve icons and content styling */
    .service-card-enhanced .service-card-front {
        border: none !important;
        box-shadow: none !important;
        padding: 24px !important;
    }

    /* PRESERVE the orange icon background - don't make it transparent! */
    .service-card-enhanced .card-icon {
        background: var(--primary-color) !important;
        /* Keep orange background */
        color: white !important;
        border: none !important;
        box-shadow: none !important;
    }

    .service-card-enhanced h3,
    .service-card-enhanced p {
        border: none !important;
        box-shadow: none !important;
    }

    /* PRESERVE Learn More button styling - keep its orange border! */
    .service-card-enhanced .expand-btn {
        border: 2px solid var(--primary-color) !important;
        border-radius: 50px !important;
        background: transparent !important;
        color: var(--primary-color) !important;
    }

    /* Remove ALL internal borders - expandable details/What's Included section */
    .service-card-enhanced .expandable-details,
    .service-card-enhanced .service-card-details,
    .service-card-enhanced [class*="details"] {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Remove extra border around buttons container (Request Quote + Learn More area) */
    .service-card-enhanced .actions,
    .service-card-enhanced .card-actions,
    .service-card-enhanced .btn-container,
    .service-card-enhanced>div:last-child,
    .service-card-details>div:last-child {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .service-card-details {
        padding: 0 24px 24px !important;
        border: none !important;
    }

    /* Remove accent bars */
    .service-card-enhanced.card::before {
        display: none !important;
    }

    /* 6. Ensure section titles don't cut off */
    .section-title,
    .section-header {
        padding-right: 24px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .section-title h2,
    .section-header h2 {
        font-size: 1.75rem !important;
        /* Slightly smaller to fit */
        line-height: 1.3 !important;
    }

    /* 7. Vision-Mission Section Specific Fixes */
    .vision-mission {
        padding: 80px 0 !important;
        background: var(--section-bg) !important;
    }

    .vision-mission .card {
        padding: 28px 24px !important;
        border: 2px solid var(--border-subtle) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }

    .vision-mission .card h3 {
        font-size: 1.3rem !important;
    }

    .vision-mission .card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
    }

    /* 8. Founder Section Mobile Fix */
    .founder {
        padding: 80px 0 !important;
        border-radius: 0 !important;
    }

    .founder div[style*="flex: 1"],
    .founder div[style*="flex: 0.8"] {
        min-width: 100% !important;
    }

    .founder div[style*="padding: 80px"] {
        padding: 32px !important;
        border-radius: 24px !important;
    }

    .founder img[style*="height: 700px"] {
        height: 350px !important;
    }

    /* 9. Specialized Cards - Certification, Expertise, Timeline etc. */
    .certification-card,
    .expertise-card,
    .timeline-item,
    [class*="-card"] {
        border: 1px solid var(--border-subtle) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
        background: rgba(15, 20, 30, 0.9) !important;
    }

    /* 10. Mission Section Image Fix - Prevent Elongation */
    .mission-section img,
    [class*="mission"] img {
        object-fit: cover !important;
        max-height: 300px !important;
        width: 100% !important;
        border-radius: 16px !important;
    }

    /* Specific fix for the "8+ Years" card image */
    .trust-bar img,
    div[style*="8+ Years"] img,
    [aria-label*="trust"] img {
        object-fit: cover !important;
        aspect-ratio: 4/3 !important;
        max-height: 250px !important;
    }

    /* ========================================
       FAQ SECTION - ROUNDED CORNERS FIX
       ======================================== */
    .faq-item {
        border: 1px solid var(--border-subtle) !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        background: rgba(15, 20, 30, 0.85) !important;
        overflow: hidden !important;
    }

    .faq-item:last-child {
        border-bottom: 1px solid var(--border-subtle) !important;
    }

    .faq-question {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    /* Expanded FAQ answer - ROUNDED with proper styling */
    .faq-answer {
        border-radius: 0 0 16px 16px !important;
        padding: 0 20px 20px !important;
        border: none !important;
        /* No inner border */
    }

    /* ========================================
       FOOTER - CENTER HEADER & ALIGNMENT
       ======================================== */
    /* Center the footer tagline header */
    footer .footer-tagline,
    footer [class*="tagline"],
    footer h2,
    .footer-content>h2 {
        text-align: center !important;
    }

    /* Footer grid - proper column alignment */
    .footer-grid {
        text-align: left !important;
        /* Keep left alignment for content */
    }

    /* Footer section headings - consistent styling */
    footer h3,
    .footer-column h3 {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
        color: var(--white) !important;
    }

    /* Footer content left aligned for readability */
    .footer-column,
    footer .contact-info,
    footer .business-hours {
        text-align: left !important;
    }

    /* Contact info items - proper spacing */
    footer .contact-item,
    footer [class*="contact"] a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
}

/* ========================================
   DESKTOP ALIGNMENT - CENTER ALIGN SECTIONS
   Ensures proper center alignment on desktop
   ======================================== */
@media (min-width: 769px) {

    /* Section Titles - Center Aligned on Desktop */
    .section-title,
    .section-header {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .section-title h2,
    .section-header h2 {
        text-align: center !important;
    }

    .section-title p,
    .section-header p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 700px !important;
    }

    /* Footer Consistency - Center Aligned Columns */
    .footer-grid {
        text-align: left !important;
        /* Keep individual items left-aligned within centered grid */
    }

    /* Footer headings centered */
    footer h3 {
        text-align: left !important;
        /* Left-align headings as they were before */
    }
}

/* Legal Modals */
.legal-modal {
    border: none;
    border-radius: 20px;
    padding: 0;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    background: rgba(15, 20, 30, 0.98);
    color: var(--text-color);
    border: 1px solid var(--border-subtle);
}

.legal-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    padding: 40px;
    position: relative;
    overflow-y: auto;
    max-height: 80vh;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal-body {
    margin-top: 20px;
    line-height: 1.8;
    color: var(--text-muted);
}

.modal-body h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 1.2rem;
}

/* ============================================
   COMPONENTS.CSS - Website Enhancement Styles
   ============================================ */

/* Global Stability Fixes */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    padding: 60px 0;
    /* Denser, professional spacing - removed !important to allow local overrides */
    position: relative;
    overflow: hidden;
}

/* Hide Mobile Components on Desktop */
.mobile-nav,
.mobile-nav-overlay {
    display: none !important;
}

/* Ensure vertical scroll is never blocked by default x-overflow fix */
html,
body {
    overflow-x: clip !important;
    min-height: 100%;
    height: auto !important;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

@media (max-width: 991px) {
    .mobile-menu-btn {
        display: block !important;
    }
}

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

/* ============================================
   1. TRUST SIGNALS
   Requirements: 1.1, 1.2, 1.4
   ============================================ */

.trust-signals {
    padding: 20px 0;
    /* Reduced padding to help with blank space */
    background: #0a0e17 !important;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: var(--container-width);
    margin: 0 auto;
}

.trust-item {
    background: rgba(10, 14, 23, 0.55) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
    padding: 32px 24px;
    border-radius: 20px;
    transition: var(--transition);
}

.trust-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(239, 136, 33, 0.6) !important;
}

.trust-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: rgba(239, 136, 33, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary-color);
    transition: var(--transition);
}

.trust-item:hover .trust-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: scale(1.1);
}

.trust-stat {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 8px;
    line-height: 1;
}

.trust-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================
   2. TESTIMONIALS CAROUSEL
   Requirements: 1.1
   ============================================ */

.testimonials-section {
    padding: var(--section-padding) 0;
    background: var(--light-bg);
    position: relative;
    overflow: hidden;
}

.testimonial-carousel {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    min-height: 350px;
}

.testimonial-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.testimonial-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    position: relative;
}

.testimonial-content {
    background: var(--secondary-color);
    padding: 40px 32px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    position: relative;
}

.testimonial-content::before {
    content: '"';
    position: absolute;
    top: 24px;
    left: 32px;
    font-size: 120px;
    font-weight: 800;
    color: rgba(239, 136, 33, 0.4);
    line-height: 1;
    font-family: Georgia, serif;
}

.testimonial-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #FFB86C);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.author-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}

.carousel-prev,
.carousel-next {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 2px solid #f0f0f0;
    color: var(--secondary-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

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

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

.carousel-dot {
    width: 12px;
    height: 12px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
}

.carousel-dot.active {
    background: var(--primary-color);
    width: 32px;
    border-radius: 6px;
}

/* ============================================
   3. ENHANCED SERVICE CARDS
   Requirements: 2.1, 2.2, 6.1
   ============================================ */

/* Global Button Helper */
/* Unidentified button helper removed to avoid duplication - see utility section */


/* End of Critical Overrides */
/* Dark theme overrides removed */

.service-card-enhanced {
    background: #0a0e17;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    transition: var(--transition);
    color: #e8e9ea;
}

.service-card-enhanced h3 {
    color: var(--secondary-color);
}

.service-card-enhanced p {
    color: var(--text-muted);
}

.service-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    background: var(--secondary-color);
}

.service-card-front {
    padding: 48px 40px;
}

.service-card-front .card-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 24px;
    transition: var(--transition);
}

.service-card-enhanced:hover .card-icon {
    background: #0a0e17;
    color: var(--primary-color);
}

.service-card-front h3,
.service-card-enhanced h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000000 !important;
    /* Force dark color */
}

.service-card-front p,
.service-card-enhanced p {
    color: #111111 !important;
    opacity: 1 !important;
    /* Force muted dark color */
    line-height: 1.6;
    margin-bottom: 24px;
}

.expand-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.95rem;
    min-height: 44px;
}

.expand-btn:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.service-card-details {
    padding: 0 40px 48px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.service-card-details.expanded {
    max-height: 1000px;
}

.service-card-details h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 24px 0 16px;
}

.service-card-details h4:first-child {
    margin-top: 0;
}

.service-card-ctas {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.service-card-ctas .btn {
    flex: 1;
    min-width: 180px;
    text-align: center;
}

.service-deliverables,
.service-process {
    list-style: none;
    padding: 0;
}

.service-deliverables li {
    padding: 12px 0 12px 32px;
    position: relative;
    color: var(--text-color);
    line-height: 1.6;
}

.service-deliverables li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

.service-process {
    counter-reset: process-counter;
}

.service-process li {
    padding: 12px 0 12px 40px;
    position: relative;
    color: var(--text-color);
    line-height: 1.6;
    counter-increment: process-counter;
}

.service-process li::before {
    content: counter(process-counter);
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background: rgba(239, 136, 33, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ============================================
   4. CONSULTATION WIDGET
   Requirements: 3.1, 3.2
   ============================================ */

.consultation-widget {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9998;
}

.widget-trigger {
    background: var(--primary-color);
    color: var(--secondary-color) !important;
    padding: 16px 28px;
    border-radius: 50px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.3);
    transition: var(--transition-fast);
    animation: pulse 2s infinite;
    min-height: 48px;
    text-decoration: none !important;
}

.widget-trigger:hover {
    background: var(--primary-dark);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(239, 136, 33, 0.4);
    color: var(--secondary-color) !important;
    text-decoration: none !important;
}

.widget-trigger i {
    font-size: 20px;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(239, 136, 33, 0.3);
    }

    50% {
        box-shadow: 0 10px 40px rgba(239, 136, 33, 0.5);
    }
}

.widget-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
}

.widget-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.widget-form {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    background: var(--secondary-color);
    border-radius: 24px 24px 0 0;
    padding: 40px;
    box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 9999;
    max-height: 90vh;
    overflow-y: auto;
}

.widget-form.active {
    transform: translateY(0);
}

.widget-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    font-size: 24px;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.widget-close:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Global Section Header Standard overrides removed - orphaned properties find selector if needed */

/* Remove !important from text-align to allow inline overrides for centering */
.section-title.center-text,
.section-title[style*="text-align: center"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-title.center-text h2,
.section-title[style*="text-align: center"] h2 {
    text-align: center !important;
}

.section-title.center-text p,
.section-title[style*="text-align: center"] p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-title {
    text-align: center !important;
    margin-bottom: 50px !important;
    width: 100%;
}

.section-title h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: 800;
    /* Extra bold for elite feel */
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.section-title p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 700px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.widget-form .form-group {
    margin-bottom: 20px;
}

.widget-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.widget-form input,
.widget-form select {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    font-size: 1rem;
    transition: var(--transition-fast);
    font-family: 'Outfit', sans-serif;
}

.widget-form input:focus,
.widget-form select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.widget-form input.error,
.widget-form select.error {
    border-color: #e74c3c;
}

.widget-form .error-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

.widget-form button[type="submit"] {
    width: 100%;
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: 8px;
}

.widget-form button[type="submit"]:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.widget-form button[type="submit"]:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.widget-form .form-message {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    text-align: center;
}

.widget-form .form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.widget-form .form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ============================================
   5. FAQ ACCORDION
   Requirements: 7.3
   ============================================ */

.faq-section {
    padding: var(--section-padding) 0;
    background: var(--secondary-color);
}

.faq-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    padding: 28px 0;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: var(--transition-fast);
    min-height: 44px;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question i {
    font-size: 16px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-answer.expanded {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 0 28px 0;
    color: var(--text-muted);
    line-height: 1.8;
}

/* ============================================
   6. INDUSTRY SECTIONS
   Requirements: 4.1, 4.2, 4.3
   ============================================ */

.industries-section {
    padding: var(--section-padding) 0;
    background: var(--light-bg);
}

.service-selector {
    padding: var(--section-padding) 0 !important;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: var(--container-width);
    margin: 0 auto;
}

.industry-card {
    background: var(--secondary-color);
    padding: 30px 25px;
    border-radius: 24px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
}

.industry-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.industry-icon {
    width: 80px;
    height: 80px;
    background: rgba(239, 136, 33, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 24px;
    transition: var(--transition);
}

.industry-card:hover .industry-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: scale(1.1) rotate(5deg);
}

.industry-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.industry-card>p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

.industry-services {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}

.industry-services li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--text-color);
    font-size: 0.95rem;
}

.industry-services li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.industry-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.industry-link:hover {
    gap: 12px;
}

/* ============================================
   7. ANIMATED STATISTICS COUNTER
   Requirements: 7.4
   ============================================ */

.stats-counter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 80px 0;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    display: inline-block;
}

.stat-suffix {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
}

.stat-label {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 12px;
    font-weight: 500;
}

/* ============================================
   8. RESPONSIVE DESIGN
   Requirements: 8.1, 8.2, 8.3
   ============================================ */

@media (max-width: 991px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .industry-grid {
        grid-template-columns: 1fr;
    }

    .stats-counter {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .testimonial-content {
        padding: 40px 32px;
    }

    .testimonial-text {
        font-size: 1.1rem;
    }

    .section-title h2 {
        font-size: 2.25rem;
    }

    .industry-card h3 {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trust-item {
        background: #0a0e17;
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 32px 24px;
        border-radius: 20px;
        text-align: center;
        transition: var(--transition);
    }

    .trust-stat {
        font-size: 2rem;
    }

    .testimonials-section {
        padding: 80px 0;
    }

    .testimonial-content {
        padding: 32px 24px;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .author-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
        min-width: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    .service-card-front {
        padding: 32px 24px;
    }

    .service-card-front h3 {
        font-size: 1.25rem;
    }

    .service-card-details {
        padding: 0 24px 32px;
    }

    .consultation-widget {
        bottom: 20px;
        right: 20px;
    }

    .widget-trigger {
        padding: 14px 20px;
        font-size: 0.9rem;
    }

    .widget-trigger span {
        display: none;
    }

    .widget-form {
        max-width: 100%;
        padding: 32px 24px;
    }

    .widget-form h3 {
        font-size: 1.5rem;
    }

    .faq-question {
        font-size: 1rem;
        padding: 20px 0;
    }

    .industry-card {
        padding: 32px 24px;
    }

    .industry-card h3 {
        font-size: 1.25rem;
    }

    .stats-counter {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 60px 0;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-suffix {
        font-size: 2rem;
    }
}

/* ============================================
   9. ACCESSIBILITY ENHANCEMENTS
   Requirements: 10.2, 10.3, 10.4
   ============================================ */

/* Focus indicators for keyboard navigation */
.carousel-prev:focus,
.carousel-next:focus,
.carousel-dot:focus,
.expand-btn:focus,
.widget-trigger:focus,
.widget-close:focus,
.faq-question:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Ensure minimum touch target size of 44x44px */
.carousel-prev,
.carousel-next {
    min-width: 48px;
    min-height: 48px;
}

.carousel-dot {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-dot::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
}

.carousel-dot.active::after {
    width: 32px;
    border-radius: 6px;
}

.widget-trigger,
.expand-btn,
.faq-question {
    min-height: 44px;
}

/* 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;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .trust-item,
    .service-card-enhanced,
    .industry-card,
    .testimonial-content {
        border-width: 2px;
    }
}

/* ============================================
   10. UTILITY CLASSES
   ============================================ */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--primary-color);
    color: var(--secondary-color) !important;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn i {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    margin: 0 0 0 8px !important;
}

.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    color: var(--secondary-color) !important;
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color);
}

.btn-secondary {
    background: var(--secondary-color) !important;
    color: var(--text-dark) !important;
    border: 2px solid #e0e0e0 !important;
}

.btn-secondary:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   6. INDUSTRY EXPERTISE SECTION
   Requirements: 4.1, 4.2, 4.3
   ============================================ */

.industries-section {
    padding: 120px 0;
    background: var(--secondary-color);
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.industry-card {
    background: var(--secondary-color);
    border: 1px solid #e8e8e8;
    border-radius: 24px;
    padding: 48px 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.industry-card.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #f39c12);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.industry-card:hover::before {
    transform: scaleX(1);
}

.industry-icon {
    width: 80px;
    height: 80px;
    background: rgba(239, 136, 33, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 28px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-card:hover .industry-icon {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.industry-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-dark);
}

.industry-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.industry-services {
    margin-bottom: 32px;
}

.industry-services h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.industry-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.industry-services li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.industry-services li i {
    color: var(--primary-color);
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}

.industry-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.industry-link i {
    transition: transform 0.3s ease;
}

.industry-link:hover {
    gap: 12px;
}

.industry-link:hover i {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .industry-grid {
        gap: 32px;
    }

    .industry-card {
        padding: 40px 32px;
    }
}

@media (max-width: 768px) {
    .industries-section {
        padding: 80px 0;
    }

    .industry-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
    }

    .industry-card {
        padding: 32px 24px;
    }

    .industry-card h3 {
        font-size: 1.5rem;
    }

    .industry-icon {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

/* Error Message */
.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.error-message p {
    font-size: 1.1rem;
}

/* ============================================
   7. INDUSTRY EXPERTISE & COMPLIANCE (About Page)
   Requirements: 4.2, 4.4
   ============================================ */

.industry-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
    padding: 20px;
    background: var(--light-bg);
    border-radius: 12px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.metric-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(239, 136, 33, 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge i {
    font-size: 12px;
}

.compliance-card {
    background: var(--secondary-color);
    padding: 32px 28px;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
    text-align: center;
}

.compliance-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.compliance-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(239, 136, 33, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.compliance-card:hover .compliance-icon {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.compliance-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.compliance-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .industry-metrics {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .compliance-badges {
        justify-content: center;
    }
}

/* ===================================
   Service Selector Quiz
   =================================== */

.service-selector {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #0a0e17 100%);
    position: relative;
    overflow: hidden;
}

.selector-quiz {
    max-width: 900px;
    margin: 0 auto;
    background: #0a0e17;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    position: relative;
}

.quiz-question {
    display: none;
    animation: fadeInUp 0.5s ease;
}

.quiz-question.active {
    display: block;
}

.quiz-question h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-align: center;
    color: var(--text-dark);
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.quiz-option {
    background: #0a0e17;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.quiz-option i {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.quiz-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.2);
}

.quiz-option:hover i {
    transform: scale(1.1);
}

.quiz-option:active {
    transform: translateY(-2px);
}

.quiz-progress {
    margin-top: 40px;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #ff9f43);
    transition: width 0.5s ease;
    border-radius: 4px;
}

.progress-text {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
}

.progress-text .current-question {
    color: var(--primary-color);
    font-weight: 700;
}

.quiz-result {
    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.result-header {
    margin-bottom: 40px;
}

.result-header i {
    font-size: 4rem;
    color: #4caf50;
    margin-bottom: 20px;
}

.result-header h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.result-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.recommended-services {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

.recommended-service-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 30px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.recommended-service-card:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.recommended-service-card h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 15px;
}

.recommended-service-card h4 i {
    color: var(--primary-color);
    font-size: 1.8rem;
}

.recommended-service-card p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.recommended-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommended-service-card ul li {
    padding: 8px 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.recommended-service-card ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #4caf50;
    font-size: 0.9rem;
}

.result-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.result-actions .btn {
    padding: 16px 40px;
    font-size: 1.1rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3);
}

.btn-primary:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4) !important;
}

.btn-primary:hover i,
.btn-primary:hover span {
    color: #000 !important;
}

.btn-primary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-3px);
    background: rgba(239, 136, 33, 0.1);
}

.btn-secondary:active {
    transform: translateY(-1px);
}

/* Submit button specific */
.btn-submit {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 20px rgba(239, 136, 33, 0.3);
    width: 100%;
}

.btn-submit:hover {
    background: #ff9f43;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.5);
}

.btn-submit:active {
    transform: translateY(-1px);
}

/* Gold button variant */
.btn-gold {
    background: linear-gradient(135deg, #EF8821 0%, #ff9f43 100%);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 20px rgba(239, 136, 33, 0.4);
}

.btn-gold:hover {
    background: linear-gradient(135deg, #ff9f43 0%, #ffb347 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.6);
}

.btn-gold:active {
    transform: translateY(-1px) scale(0.98);
}

/* Mobile button adjustments */
@media (max-width: 768px) {

    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .btn-gold {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-submit:hover,
    .btn-gold:hover {
        transform: translateY(-2px);
    }
}

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

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .selector-quiz {
        padding: 40px 30px;
    }

    .quiz-question h3 {
        font-size: 1.5rem;
    }

    .quiz-options {
        grid-template-columns: 1fr;
    }

    .quiz-option {
        padding: 25px 20px;
    }

    .result-header h3 {
        font-size: 2.5rem;
    }

    .result-actions {
        flex-direction: column;
    }

    .result-actions .btn {
        width: 100%;
    }
}

/* Professional Certifications Section */
.certifications-section .certification-card {
    background: var(--secondary-color);
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(239, 136, 33, 0.1);
    transition: var(--transition);
    text-align: center;
}

.certifications-section .certification-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.certifications-section .cert-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), #ff9d4d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2rem;
    color: white;
}

.certifications-section .certification-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.certifications-section .cert-type {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.certifications-section .cert-year {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eee;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Company Timeline Section */
.timeline-section {
    position: relative;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 40px);
    /* Start at first dot */
    top: 40px;
    background: linear-gradient(180deg, var(--primary-color), rgba(239, 136, 33, 0.4));
    z-index: 1;
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    width: 100%;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    flex: 0 0 50%;
    padding: 0 60px;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color);
    position: relative;
    z-index: 5;
    /* Above line */
}

.timeline-item:nth-child(odd) .timeline-year {
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-year {
    text-align: left;
}

.timeline-year::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
    z-index: 10;
}

/* Perfect Centering on Desktop */
.timeline-item:nth-child(odd) .timeline-year::after {
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
    /* Center dot on the right edge (50% mark) */
}

.timeline-item:nth-child(even) .timeline-year::after {
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
    /* Center dot on the left edge (50% mark) */
}

.timeline-content {
    flex: 0 0 50%;
    padding: 30px;
    background: var(--secondary-color);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(239, 136, 33, 0.1);
    transition: var(--transition);
    z-index: 2;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: 20px;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-right: 20px;
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.timeline-content p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* Expertise Areas Section */
.expertise-areas .expertise-card {
    background: var(--secondary-color);
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(239, 136, 33, 0.1);
    transition: var(--transition);
}

.expertise-areas .expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.expertise-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 2px solid rgba(239, 136, 33, 0.1);
}

.expertise-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #ff9d4d);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
}

.expertise-header h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
}

.expertise-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.expertise-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-muted);
    line-height: 1.6;
}

.expertise-list i {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.expertise-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--light-bg);
    border-radius: 16px;
    margin-top: 24px;
}

.expertise-stat .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 8px;
}

.expertise-stat .stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

/* Responsive Timeline */
@media (max-width: 768px) {

    /* MOBILE TIMELINE PERFECT PARITY - 20px Grid */
    .timeline::before {
        left: 20px !important;
        transform: none !important;
        width: 2px !important;
        top: 20px !important;
        height: calc(100% - 20px) !important;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 50px !important;
        padding-left: 60px !important;
        /* Move text away from line at 20px */
    }

    .timeline-year {
        flex: none !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        font-size: 1.8rem !important;
        line-height: 1 !important;
    }

    /* Force mobile dot to 20px absolute grid */
    .timeline-year::after,
    .timeline-item:nth-child(odd) .timeline-year::after,
    .timeline-item:nth-child(even) .timeline-year::after {
        left: -40px !important;
        /* -40px relative to 60px padding = 20px exactly */
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 16px !important;
        height: 16px !important;
        background: var(--primary-color) !important;
        z-index: 10 !important;
    }

    .timeline-content {
        flex: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 24px !important;
    }
}

/* Responsive Certifications */
@media (max-width: 768px) {
    .certifications-section .certification-card {
        padding: 32px 24px;
    }

    .certifications-section .cert-badge {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Responsive Expertise Cards */
@media (max-width: 768px) {
    .expertise-areas .expertise-card {
        padding: 32px 24px;
    }

    .expertise-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .expertise-stat .stat-number {
        font-size: 2rem;
    }
}

/* ============================================
   PROFILE PAGE MOBILE OVERFLOW FIX
   ============================================ */

/* Stats section responsive styles */
.stats-section {
    padding: 160px 0;
    background: var(--secondary-color);
    color: white;
    border-radius: 100px 100px 0 0;
}

.stats-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
    align-items: center;
}

.stats-column {
    flex: 1;
    min-width: 280px;
}

.stats-column-narrow {
    flex: 0.8;
    min-width: 280px;
}

.stats-heading {
    color: white;
    font-size: 4rem;
    margin-bottom: 40px;
}

.stats-subtext {
    font-size: 1.4rem;
    color: #888;
    margin-bottom: 60px;
}

.stats-number-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.stat-box-dark {
    background: #111;
    padding: 50px;
    border-radius: 40px;
    border: 1px solid #222;
}

.stat-box-dark .stat-number {
    font-size: 5rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.stat-box-dark .stat-number.primary {
    color: var(--primary-color);
}

.stat-box-dark .stat-number.white {
    color: white;
}

.stat-box-dark .stat-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #b8b9ba;
}

.strategic-card {
    background: #151515;
    padding: 80px;
    border-radius: 60px;
    box-shadow: var(--shadow-lg);
    border: 1px solid #222;
}

.strategic-card h3 {
    color: white;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.strategic-card p {
    color: #888;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Mobile Responsive Overrides for Profile Page */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .stats-section {
        padding: 60px 0 !important;
        border-radius: 30px 30px 0 0 !important;
    }

    .stats-flex-wrapper {
        gap: 40px !important;
        flex-direction: column;
    }

    .stats-column,
    .stats-column-narrow {
        min-width: 100% !important;
        width: 100% !important;
    }

    .stats-heading {
        font-size: 2rem !important;
        word-wrap: break-word;
    }

    .stats-subtext {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }

    .stats-number-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .stat-box-dark {
        padding: 30px !important;
        border-radius: 20px !important;
    }

    .stat-box-dark .stat-number {
        font-size: 3rem !important;
    }

    .strategic-card {
        padding: 30px !important;
        border-radius: 20px !important;
    }

    .strategic-card h3 {
        font-size: 1.5rem !important;
    }

    /* Fix hero fixed background on mobile */
    .hero-video-bg {
        background-attachment: scroll !important;
    }
}

/* ============================================
   360ACCOUNTING.AE INSPIRED STYLES
   ============================================ */

/* Partner Badge Hover Effects */
.partner-badge:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

.partner-badge:hover i {
    transform: scale(1.1);
}

/* Trusted Partner Section Responsive */
@media (max-width: 992px) {
    .trusted-partner-section>.container>div {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .trusted-partner-section h2 {
        font-size: 2rem !important;
    }

    .trusted-partner-section p {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .trusted-partner-section>.container>div>div:last-child {
        grid-template-columns: 1fr !important;
    }
}

/* Enhanced Service Cards - 360 Style */
.service-card-modern {
    background: #0a0e17 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 20px !important;
    padding: 30px 20px !important;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    will-change: transform;
}

.service-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary-color) !important;
}

.service-card-modern>i {
    width: 80px;
    height: 80px;
    background: rgba(239, 136, 33, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary-color);
    margin: 0 auto 24px;
    transition: all 0.3s ease;
}

.service-card-modern:hover i {
    background: var(--primary-color);
    color: white;
    transform: rotate(10deg);
}

.service-card-modern h3 {
    color: var(--secondary-color) !important;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.service-card-modern p {
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
    margin-bottom: 25px !important;
    flex-grow: 1;
    /* Pushes button to bottom */
}

/* Enquire Now Links for Service Cards */
.service-card-modern .enquire-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    background: transparent;
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease;
}

.service-card-modern .enquire-link:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.service-card-modern .enquire-link::after {
    content: ' →';
    transition: margin-left 0.3s ease;
}

.service-card-modern .enquire-link:hover::after {
    margin-left: 8px;
}

/* EXPLORE NOW Button - Arrow Always Visible (Desktop) */
.service-card-modern .explore-now-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: normal;
    margin-top: auto;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.2);
    transition: all 0.3s ease;
}

.service-card-modern .explore-now-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.service-card-modern .explore-now-btn:hover i {
    color: #000 !important;
}

.service-card-modern .explore-now-btn:hover span {
    color: #000 !important;
}

.service-card-modern .explore-now-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
    color: white !important;
    transform: translateY(6px);
}

.service-card-modern .explore-now-btn:hover i {
    transform: translateX(4px);
}

/* EXPLORE NOW Button - Perfect Pill Style for Mobile */
@media (max-width: 768px) {
    .service-card-modern .explore-now-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 140px !important;
        padding: 10px 24px !important;
        border-radius: 50px !important;
        background: var(--primary-color) !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 20px auto 0 !important;
        height: auto !important;
        line-height: normal !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(239, 136, 33, 0.2) !important;
    }

    .service-card-modern .explore-now-btn i {
        margin-left: 8px !important;
        font-size: 0.9rem !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        transform: translateY(6px) !important;
    }
}

/* Services Modern Grid - Clean Layout */
.services-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 992px) {
    .services-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-modern-grid {
        grid-template-columns: 1fr;
    }
}

/* Talk to Professionals CTA Banner */
.professionals-cta {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #1a365d 100%);
    padding: 60px 40px;
    border-radius: 24px;
    text-align: center;
    margin: 40px 0;
}

.professionals-cta h3 {
    color: white;
    font-size: 2rem;
    margin-bottom: 16px;
}

.professionals-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 24px;
}

.professionals-cta .btn-gold {
    display: inline-block;
    padding: 16px 40px;
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.professionals-cta .btn-gold:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.4);
}

/* ============================================
   ENHANCED SCROLL ANIMATIONS
   ============================================ */

/* Base animation states - hidden initially */
.animate-slide-left,
.animate-slide-right,
.animate-fade-up,
.animate-scale-in,
.animate-bounce-in {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-left {
    transform: translateX(-60px);
}

.animate-slide-right {
    transform: translateX(60px);
}

.animate-fade-up {
    transform: translateY(40px);
}

.animate-scale-in {
    transform: scale(0.9);
}

.animate-bounce-in {
    transform: translateY(30px) scale(0.95);
}

/* Animated state - visible */
.animate-slide-left.animated,
.animate-slide-right.animated,
.animate-fade-up.animated,
.animate-scale-in.animated,
.animate-bounce-in.animated {
    opacity: 1;
    transform: none;
}

/* Staggered card animations */
.expertise-card,
.service-card-modern,
.trust-item,
.faq-item {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Number counter styling */
.trust-stat {
    transition: color 0.3s ease;
}

.trust-stat.counted {
    color: var(--primary-color);
    animation: countPulse 0.5s ease-out;
}

@keyframes countPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Service card hover enhancement */
.service-card-modern {
    position: relative;
    overflow: hidden;
}

.service-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(239, 136, 33, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card-modern:hover::before {
    left: 100%;
}

/* Expertise card diagonal hover effect */
.expertise-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 40%, rgba(239, 136, 33, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

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

/* Hero section fade-in on load */
.hero .hero-content {
    animation: heroFadeIn 1s ease-out forwards;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Form card slide-in */
.hero .consultation-form-card {
    animation: formSlideIn 1s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes formSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Section title animation */
.section-title h2 {
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    display: none !important;
}

/* Smooth scroll behavior for the whole page */
html {
    scroll-behavior: smooth;
}

/* CTA Banner pulse animation */
.professionals-cta {
    position: relative;
    overflow: hidden;
}

.professionals-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: ctaPulse 4s ease-in-out infinite;
}

@keyframes ctaPulse {

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

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* Map section entrance animation */
.map-section iframe {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 768px) {
    .map-section iframe {
        pointer-events: none !important;
        /* Prevent hijacking scroll on mobile */
    }
}

.map-section iframe:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

/* ============================================
   SCROLL PROGRESS BAR - COMPLETELY REMOVE
   ============================================ */
.scroll-progress-bar,
#scrollProgress,
.scroll-progress {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: -1 !important;
}

/* ============================================
   FLOATING CONTACT ICONS (360accounting style)
   ============================================ */
.floating-contact-icons {
    position: fixed;
    right: 20px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.floating-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    animation: floatPulse 2s ease-in-out infinite;
}

.floating-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.floating-icon.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.floating-icon.phone {
    background: linear-gradient(135deg, var(--primary-color), #ff9f43);
}

@keyframes floatPulse {

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

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

/* Mobile Floating Icons - Transparent & Colored Logos */
/* Mobile Floating Icons - Transparent & Colored Logos */
@media (max-width: 768px) {
    .floating-contact-icons {
        right: 15px !important;
        bottom: 80px !important;
        gap: 15px !important;
    }

    .floating-icon {
        background: transparent !important;
        box-shadow: none !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 0 !important;
    }

    .floating-icon:hover {
        transform: scale(1.1) !important;
    }

    /* Specific Colors for Mobile Icons */
    .floating-icon.whatsapp i {
        color: #25D366 !important;
        font-size: 42px !important;
        background: transparent !important;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
    }

    .floating-icon.botim i {
        color: #0088CC !important;
        font-size: 42px !important;
        background: transparent !important;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
    }

    .floating-icon.phone i {
        color: var(--primary-color) !important;
        font-size: 42px !important;
        background: transparent !important;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
    }

    .floating-icon.truecaller img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 12px !important;
        /* Truecaller icon shape */
        box-shadow: none !important;
    }

    /* In case truecaller is an icon class */
    .floating-icon.truecaller i {
        color: #0087FF !important;
        font-size: 42px !important;
        background: transparent !important;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
    }
}

/* ============================================
   REDUCED SECTION SPACING (Tighter Layout)
   ============================================ */
/* Reduced Section Spacing and Hierarchy */
:root {
    --section-padding: 60px;
    /* Reduced from 100px */
}

section {
    padding: var(--section-padding) 0 !important;
}

.hero-split {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.section-alternate {
    background: #f8f9fc !important;
}

.trust-signals {
    padding: 30px 0 !important;
    background: #0a0e17 !important;
}

.partners-section,
.testimonials-section {
    padding: 50px 0 !important;
}

/* Fix Map Visibility */
.map-section iframe {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Fix Hero Title Legibility on Services Page */
.hero h1 span {
    text-shadow: none;
}

/* Reduce hero vertical space */
.hero {
    padding: 80px 0 40px !important;
    min-height: auto !important;
}

/* Trust signals tighter */
.trust-signals {
    padding: 30px 0 !important;
}

.trust-grid {
    gap: 20px !important;
}

/* Footer tighter */
footer {
    padding: 30px 0 15px !important;
}

.footer-grid {
    gap: 30px !important;
}

/* Grids tighter spacing */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px !important;
    align-items: stretch;
}

.services-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px !important;
}

.expertise-card {
    background: #0a0e17;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.expertise-card.center-highlight {
    background: #0a0e17;
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(239, 136, 33, 0.15);
}

/* FAQ accordion tighter */
.faq-item {
    margin-bottom: 8px !important;
}

.faq-question {
    padding: 16px 20px !important;
}

.faq-answer {
    padding: 0 20px 16px !important;
}

/* ============================================
   FAQ ACCORDION STYLING (Embedded Version)
   ============================================ */
.faq-item {
    background: #0a0e17;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(239, 136, 33, 0.2);
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-color);
    text-align: left;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question span {
    flex: 1;
    padding-right: 16px;
}

.faq-question i {
    color: var(--primary-color);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: all 0.3s ease;
}

.faq-answer.open {
    max-height: 500px;
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================
   ENHANCED SECTION ANIMATIONS (Entrance Effects)
   ============================================ */
.animate-slide-left,
.animate-slide-right,
.animate-fade-up,
.animate-scale-in,
.animate-bounce-in {
    opacity: 1;
    /* Default to visible to prevent blank screens if JS fails */
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

.animate-slide-left {
    transform: translateX(-50px);
}

.animate-slide-right {
    transform: translateX(50px);
}

.animate-fade-up {
    transform: translateY(30px);
}

.animate-scale-in {
    transform: scale(0.9);
}

.animate-bounce-in {
    transform: scale(0.85);
    opacity: 0;
}

.animated.animate-slide-left,
.animated.animate-slide-right,
.animated.animate-fade-up,
.animated.animate-scale-in,
.animated.animate-bounce-in {
    opacity: 1 !important;
    transform: translate(0) scale(1) !important;
}

.animate-bounce-in.animated {
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

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

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

/* ============================================
   PREMIUM SPIRAL ENTRANCE ANIMATIONS
   ============================================ */
@keyframes spiralIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-90deg) translateY(100px);
    }

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

.spiral-entrance {
    opacity: 0;
    will-change: transform, opacity;
}

.spiral-entrance.animated {
    animation: spiralIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Staggered spiral entrance for grid children */
.stagger-spiral>*:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-spiral>*:nth-child(2) {
    animation-delay: 0.2s;
}

.stagger-spiral>*:nth-child(3) {
    animation-delay: 0.3s;
}

.stagger-spiral>*:nth-child(4) {
    animation-delay: 0.4s;
}

.stagger-spiral>*:nth-child(5) {
    animation-delay: 0.5s;
}

.stagger-spiral>*:nth-child(6) {
    animation-delay: 0.6s;
}

/* Fallback for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .spiral-entrance {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* Redundancy Cleanup: Hide duplicate top bars or specific sub-headers if needed */
.header-cta-redundant {
    display: none !important;
}

/* Visibility and Gap Fixes */
.service-quiz,
.service-detail-card,
.map-section,
.partners-section,
section {
    opacity: 1 !important;
    visibility: visible !important;
}

iframe {
    opacity: 1 !important;
    display: block !important;
}

.partners-section {
    background: #0a0e17 !important;
    border-top: 1px solid #eee;
    margin: 20px 0 !important;
}

.main-nav ul li a:hover {
    color: var(--primary-color) !important;
}

@media (max-width: 768px) {
    .main-nav {
        display: none !important;
        /* Hide standard nav on mobile */
    }

    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--secondary-color);
        cursor: pointer;
        padding: 10px;
    }

    .mobile-nav {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #0a0e17;
        z-index: 3000 !important;
        padding: 80px 40px;
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    }

    .mobile-nav.open {
        right: 0;
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
    }

    .mobile-nav ul li {
        margin-bottom: 24px;
    }

    .mobile-nav ul li a {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--secondary-color);
        text-decoration: none;
    }

    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2999;
        display: none;
    }

    .mobile-nav-overlay.open {
        display: block !important;
    }

    /* Fix Grid Overflows */
    .services-modern-grid,
    .expertise-grid,
    .hero-split-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .expertise-card {
        padding: 24px !important;
        background: #0a0e17 !important;
        color: var(--secondary-color) !important;
    }

    .expertise-card h3 {
        color: var(--secondary-color) !important;
    }

    .expertise-card p {
        color: var(--text-muted) !important;
    }

    .expertise-card.center-highlight {
        margin: 0 !important;
        transform: none !important;
        z-index: 1 !important;
        border: 1px solid var(--primary-color);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .top-bar-flex {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    /* Core Services: stack to 1 column on mobile */
    .services-modern-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    .top-info span {
        display: block;
        margin: 5px 0;
        font-size: 0.85rem;
    }

    .top-social {
        margin-top: 10px;
        justify-content: center;
    }

    /* Quiz Button Tapability */
    .quiz-options {
        grid-template-columns: 1fr !important;
    }

    .quiz-option {
        padding: 24px !important;
        font-size: 1.1rem !important;
    }

    .logo-img {
        max-height: 45px !important;
    }

    .hero-h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtext {
        font-size: 1rem !important;
    }

    section {
        padding: 40px 0 !important;
        /* Symmetric mobile padding */
    }

    /* Tighten Services Page Spacing */
    .service-quiz {
        padding-bottom: 20px !important;
    }

    .services-detail {
        padding-top: 20px !important;
    }

    .section-title h2 {
        font-size: 1.8rem !important;
    }

    .expertise-card.center-highlight {
        margin: 0 !important;
        transform: none !important;
        z-index: 1 !important;
        border: 1px solid var(--primary-color);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .header-cta {
        display: none !important;
    }

    .top-bar {
        display: none !important;
        /* Save space on mobile header */
    }
}

/* Footer Broadness Fix */
.footer-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   STICKY CONTACT WIDGETS
   ============================================ */
.sticky-widgets {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10000;
    /* Higher than overlap contents */
}

.sticky-widget {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sticky-widget i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
}

.sticky-widget,
.sticky-widget.pulse {
    animation: none !important;
}

.sticky-widget::before,
.sticky-widget::after {
    pointer-events: none !important;
}

.sticky-widget:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.sticky-widget.whatsapp {
    background: #25D366;
    color: white;
}

.sticky-widget.phone {
    background: var(--primary-color);
    color: white;
}

.sticky-widget.botim {
    background: #0088CC !important;
    color: white !important;
}

.sticky-widget.pulse {
    animation: sticky-attention 3s infinite ease-in-out !important;
}

/* Mobile Sticky Widget Refinement - Small & Proportional Icons */
@media (max-width: 768px) {
    .sticky-widgets {
        bottom: 80px !important;
        right: 15px !important;
        gap: 12px !important;
        z-index: 10000 !important;
    }

    .sticky-widget,
    .sticky-widget.whatsapp,
    .sticky-widget.phone,
    .sticky-widget.botim {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .sticky-widget:hover {
        transform: scale(1.1) !important;
    }

    /* Icon proportions fix - No stretching */
    .sticky-widget i {
        font-size: 24px !important;
        /* Premium smaller size */
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .sticky-widget.whatsapp i {
        color: #ffffff !important;
    }

    .sticky-widget.botim i {
        color: #ffffff !important;
    }

    .sticky-widget.phone i {
        color: #ffffff !important;
    }

    .sticky-widget.whatsapp {
        background: #25D366 !important;
    }

    .sticky-widget.botim {
        background: #0088CC !important;
    }

    .sticky-widget.phone {
        background: var(--primary-color) !important;
    }
}

/* Shaky & Sun-like Highlighting Animation */
@keyframes sticky-attention {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    10% {
        transform: scale(1.1) rotate(3deg);
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.6);
    }

    15% {
        transform: scale(1.1) rotate(-3deg);
    }

    20% {
        transform: scale(1.1) rotate(3deg);
    }

    25% {
        transform: scale(1.1) rotate(0deg);
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.8);
    }

    50% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

/* Sun-like shine sweep */
.sticky-widget::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    transition: none;
    animation: shine-sweep-sticky 4s infinite;
}

@keyframes shine-sweep-sticky {
    0% {
        left: -150%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* FAQ Answer Fix - Hide content until expanded */
.faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq-answer.expanded,
.faq-answer.open,
.faq-item.active .faq-answer {
    max-height: 500px !important;
    opacity: 1;
    padding: 15px 24px 25px 24px !important;
}

/* Mobile Centering Fixes */
@media (max-width: 768px) {

    .trusted-partner-section,
    .certifications-section,
    .schedule-consultation {
        text-align: center !important;
    }

    .trusted-partner-section h2,
    .trusted-partner-section p,
    .certifications-section h3,
    .certifications-section p {
        text-align: center !important;
    }

    .faq-section .section-title,
    .location-section .section-title {
        text-align: center !important;
    }

    .faq-section h2,
    .location-section h2 {
        text-align: center !important;
    }
}

/* ============================================
   EXPANDED MOBILE CENTERING FIXES
   ============================================ */
@media (max-width: 768px) {

    /* Hero section centering */
    .hero-split-container,
    .hero-text-col,
    .hero-content {
        text-align: center !important;
    }

    .hero-text-col h1,
    .hero-text-col p,
    .hero-split h1,
    .hero-split p {
        text-align: center !important;
    }

    /* Trusted Partner section centering */
    .trusted-partner-section,
    .trusted-partner-section .container,
    .trusted-partner-section h2,
    .trusted-partner-section p,
    .trusted-partner-section .content {
        text-align: center !important;
    }

    /* Professional Certifications centering */
    .certifications-section,
    .certifications-section h3,
    .certifications-section p,
    .certifications-list,
    .certifications-list li {
        text-align: center !important;
    }

    /* Schedule Consultation centering */
    .consultation-section,
    .consultation-section h2,
    .consultation-section p,
    #lead-form,
    #lead-form h3 {
        text-align: center !important;
    }

    /* Map / Location section centering */
    .map-section,
    .map-section .container,
    .map-section h2,
    .map-section p,
    .location-section h2,
    .location-section p {
        text-align: center !important;
    }

    /* Expertise section centering */
    .expertise-section,
    .expertise-section .container,
    .expertise-section h2,
    .expertise-section p {
        text-align: center !important;
    }

    /* Section titles extra centering */
    .section-title,
    .section-title h2,
    .section-title p,
    .center-text {
        text-align: center !important;
    }
}

/* ============================================
   FOOTER TITLE VISIBILITY FIX
   ============================================ */
.footer-links h4,
.footer-contact h4,
footer h4,
.footer-grid h4 {
    color: #0a0e17 !important;
    opacity: 1 !important;
}

/* Ensure footer text is visible */
footer .footer-grid h4 {
    color: white !important;
    font-weight: 600 !important;
}

/* ============================================
   FIX: Trusted Partner Section Mobile Centering
   ============================================ */
@media (max-width: 768px) {

    /* Force trusted partner section centering */
    .trusted-partner-section .section-title,
    .trusted-partner-section .section-title h2,
    .trusted-partner-section .section-title p,
    .trusted-partner-section h2,
    .trusted-partner-section p,
    .trusted-partner-section .container {
        text-align: center !important;
    }

    /* Force location / map section centering */
    .map-section .section-title,
    .map-section .section-title h2,
    .map-section .section-title p,
    .map-section h3,
    .map-section h2,
    .map-section p {
        text-align: center !important;
    }

    /* Contact details card on mobile */
    .map-section [style*="background: #0a0e17"] h3,
    .map-section [style*="background: #0a0e17"] p {
        text-align: center !important;
    }

    /* Services page headers */
    .hero h1,
    .hero p,
    .hero-content h1,
    .hero-content p {
        text-align: center !important;
    }

    /* Footer mobile centering */
    .footer-grid,
    .footer-links,
    .footer-contact,
    .footer-links h4,
    .footer-contact h4 {
        text-align: center !important;
    }

    .footer-grid ul {
        padding-left: 0 !important;
    }
}

/* ============================================
   FIX: Expertise Section Text Color
   ============================================ */
.center-highlight,
.center-highlight h3,
.center-highlight p,
.center-highlight .expertise-title,
.center-highlight .expertise-desc {
    color: inherit !important;
}

/* Ensure expertise card text remains visible */
.expertise-card h3,
.expertise-card p,
.expertise-item h3,
.expertise-item p {
    color: var(--secondary-color) !important;
}

.expertise-card h3 {
    color: var(--secondary-color) !important;
}

.expertise-card p {
    color: var(--text-muted) !important;
}

/* ============================================
   COMPREHENSIVE MOBILE CENTERING FIXES
   ============================================ */
@media (max-width: 768px) {

    /* Hero section centering */
    .hero-split-container,
    .hero-text-col,
    .hero-content {
        text-align: center !important;
    }

    /* Trusted Partner section */
    .trusted-partner-section,
    .trusted-partner-section h2,
    .trusted-partner-section p,
    .trusted-partner-section .container {
        text-align: center !important;
    }

    /* Professional Certifications */
    .certifications-section,
    .certifications-section h3,
    .certifications-section p,
    .certifications-wrapper {
        text-align: center !important;
    }

    /* Trust signals / stats section */
    .trust-signals,
    .trust-signals-grid {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Expertise section */
    .expertise-section,
    .expertise-section .section-title,
    .expertise-section h2,
    .expertise-section p {
        text-align: center !important;
    }

    /* Core services */
    .services-modern,
    .services-modern .section-title {
        text-align: left !important;
    }

    /* FAQ section */
    .faq-section,
    .faq-section .section-title,
    .faq-section h2 {
        text-align: center !important;
    }

    /* Location/Map section */
    .map-section,
    .map-section .section-title,
    .map-section h2,
    .map-section p {
        text-align: center !important;
    }

    /* Schedule consultation */
    .lead-form-section,
    .lead-form-section h2,
    .lead-form-section p {
        text-align: center !important;
    }

    /* Footer centering on mobile */
    .footer-grid {
        text-align: center !important;
    }

    .footer-links,
    .footer-contact,
    .footer-info {
        text-align: center !important;
    }

    /* General section titles */
    .section-title {
        text-align: left !important;
        margin-bottom: 35px !important;
    }

    .section-title h2 {
        font-size: 1.8rem !important;
        text-align: left !important;
    }

    .section-title p {
        text-align: left !important;
        font-size: 0.95rem !important;
    }

    /* Cards Alignment */
    .service-card-modern {
        padding: 25px 20px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .service-card-modern i {
        margin: 0 0 20px 0 !important;
        width: 60px !important;
        /* Slightly smaller for mobile left-align balance */
        height: 60px !important;
        font-size: 24px !important;
    }
}

/* ============================================
   MOBILE NAV ROUNDED CORNERS
   ============================================ */
.mobile-nav {
    border-radius: 20px 0 0 20px !important;
}

/* ============================================
   FOOTER H4 VISIBILITY FIX
   ============================================ */
.footer-links h4,
.footer-contact h4 {
    color: white !important;
}

/* ============================================
   STRONGER MOBILE CENTERING (Override Inline Styles)
   ============================================ */
@media (max-width: 768px) {

    /* Trusted Partner Section - Strong Override */
    .trusted-partner-section .section-title,
    .trusted-partner-section .section-title h2,
    .trusted-partner-section .section-title p,
    .trusted-partner-section>.container>.section-title h2,
    .trusted-partner-section>.container>.section-title p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Location/Map Section - Strong Override */
    section.map-section,
    section.map-section .container,
    section.map-section .section-title,
    section.map-section .section-title h2,
    section.map-section .section-title p,
    section.map-section h3,
    section#location .section-title,
    section#location .section-title h2,
    section#location .section-title p,
    section#location h3 {
        text-align: center !important;
    }

    /* Contact Details in Location */
    section.map-section>.container>div,
    section#location>.container>div {
        text-align: center !important;
    }

    section.map-section>.container>div p,
    section#location>.container>div p {
        text-align: center !important;
    }

    /* Grid items center */
    section.map-section [style*="display: grid"]>div,
    section#location [style*="display: grid"]>div {
        text-align: center !important;
    }

    /* All divs in trusted partner */
    .trusted-partner-section div[style] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Professional certifications wrapper */
    .trusted-partner-section div[style*="max-width: 800px"] {
        text-align: center !important;
    }
}

/* ============================================
   FIX: Trusted Partner Section Text Centering
   ============================================ */
@media (max-width: 768px) {

    /* Force center all text in trusted partner section */
    .trusted-partner-section,
    .trusted-partner-section .container,
    .trusted-partner-section .section-title,
    .trusted-partner-section h2,
    .trusted-partner-section p {
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fix heading overflow */
    .trusted-partner-section .section-title h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        padding: 0 15px !important;
    }

    /* Fix paragraph text centering */
    .trusted-partner-section .section-title p {
        padding: 0 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Contact Details centering in location */
    .map-section h3,
    .map-section p,
    section#location h3,
    section#location p {
        text-align: center !important;
    }
}

/* ============================================
   FIX: Mobile Horizontal Overflow
   ============================================ */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

@media (max-width: 768px) {

    /* Prevent any element from causing horizontal scroll */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Container constraints */
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Section constraints */
    section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Trusted Partner section fix */
    .trusted-partner-section .section-title,
    .trusted-partner-section h2,
    .trusted-partner-section p {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Location section fix */
    .map-section .section-title,
    .map-section h2,
    .map-section p,
    section#location .section-title,
    section#location h2,
    section#location p {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Fix any grid that might overflow */
    [style*="display: grid"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Map iframe fix */
    iframe {
        max-width: 100% !important;
    }
}

/* ============================================
   CRITICAL FIX: Force Container Width on Mobile
   ============================================ */
@media (max-width: 768px) {

    /* Force ALL containers to viewport width */
    .container,
    .section-title,
    .trusted-partner-section .container,
    .trusted-partner-section .section-title,
    .map-section .container,
    .map-section .section-title {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Force heading to fit and center */
    .trusted-partner-section h2,
    .map-section h2,
    section#location h2 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        word-break: break-word !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }

    /* Force paragraph to fit and center */
    .trusted-partner-section p,
    .map-section p,
    section#location p {
        font-size: 0.95rem !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }

    /* Override any inline styles on section-title */
    .section-title[style] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Fix Professional Certifications card width */
    .trusted-partner-section>.container>div[style*="max-width"] {
        max-width: calc(100vw - 40px) !important;
        margin: 0 auto !important;
        padding: 20px !important;
    }
}

/* ============================================
   GLOBAL CARD BORDER & VISUAL REFINEMENTS
   Ensures borders are prominent on ALL devices (Desktop & Mobile)
   ============================================ */

/* 1. Main Content Cards (Light Background) - Dark Borders */
/* 1. Main Content Cards (Light Background) - Dark Borders */
.expertise-card,
.service-card-modern,
.faq-item,
.certification-card,
.industry-card,
.testimonial-card,
.lead-form-container,
.trust-item {
    border: 1.5px solid rgba(0, 0, 0, 0.22) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Service detail cards - NO border (dark theme) */
.service-detail-card {
    border: none !important;
    box-shadow: none !important;
}

/* Specific fix for 'Professional Certifications' card and Contact cards */
.trusted-partner-section div[style*="background: #0a0e17"],
.map-section div[style*="background: #0a0e17"] {
    border: none !important;
    /* Fixed: Removed unwanted borders on these specific containers */
}

/* 2. Dark/Primary Background Cards - Light Borders */
.stat-box-dark,
.strategic-card,
.professionals-cta,
.quiz-option {
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Desktop-only sticky widget border */
@media (min-width: 769px) {
    .sticky-widget {
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
    }
}

/* 3. Hover States - Increase Border Prominence */
.expertise-card:hover,
.service-card-modern:hover,
.faq-item:hover,
.industry-card:hover,
.service-detail-card:hover,
.quiz-option:hover {
    border-color: var(--primary-color) !important;
    border-width: 2px !important;
    transform: translateY(-2px);
}

/* 4. FAQ Section - Unified Orange Border */
.faq-item.active,
.faq-item[aria-expanded="true"],
.faq-item:has([aria-expanded="true"]) {
    border-color: var(--primary-color) !important;
    border-width: 2px !important;
    box-shadow: 0 10px 40px rgba(239, 136, 33, 0.15) !important;
}

/* Remove separate border from question when inside active item to avoid "two borders" 
   But keep a very subtle separator for clarity */
.faq-item.active .faq-question,
.faq-item[aria-expanded="true"] .faq-question {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-bottom: 20px !important;
}

/* Tighten FAQ Padding for more professional look */
.faq-item {
    padding: 30px !important;
}

.faq-question {
    padding: 0 !important;
    outline: none !important;
    /* Delete the subset border (outline) */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.faq-question:focus,
.faq-question:active,
.faq-question:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   SERVICES PAGE: QUIZ HOVER FIX
   Prevents content from being hidden on hover
   ============================================ */
.quiz-option:hover,
.quiz-option.selected {
    background: var(--primary-color) !important;
    color: white !important;
}

.quiz-option:hover i,
.quiz-option.selected i {
    color: white !important;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Ensure images don't cover borders */
img {
    z-index: 1;
}

/* ============================================
   LAYOUT REFINEMENTS
   Suppressing internal scrollbars & Background tweaks
   ============================================ */

/* Force hide any potential internal scrollbars on main section components */
.expertise-section,
.expertise-grid,
.expertise-card,
.faq-section,
.faq-item,
.faq-answer,
.service-quiz,
.quiz-container,
.quiz-options,
.quiz-option {
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE and Edge */
}

/* Chrome, Safari and Opera */
.expertise-section::-webkit-scrollbar,
.expertise-grid::-webkit-scrollbar,
.expertise-card::-webkit-scrollbar,
.faq-section::-webkit-scrollbar,
.faq-item::-webkit-scrollbar,
.faq-answer::-webkit-scrollbar,
.service-quiz::-webkit-scrollbar,
.quiz-container::-webkit-scrollbar,
.quiz-options::-webkit-scrollbar,
.quiz-option::-webkit-scrollbar,
.container::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
    display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.expertise-section *,
.faq-section *,
.container,
* {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

/* Ensure no clipping issues while hiding scrollbars */
.expertise-card,
.faq-item,
.quiz-option {
    overflow: visible !important;
}

/* ============================================
   7. HEADER & CONTAINER SYNC (Visual Parity)
   ============================================ */
/* Updated for header-wrapper structure */
.header-wrapper {
    background: #000 !important;
    padding: 10px 0 !important;
    position: sticky !important;
    top: 36px !important;
    z-index: 1000 !important;
}

#main-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50px !important;
    padding: 15px 40px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
}

.header-container {
    height: 100% !important;
    padding: 0 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: var(--container-width) !important;
    margin: 0 auto !important;
}

.logo-img {
    height: 48px !important;
    /* Consistent elite sizing */
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Navigation Sync */
.main-nav ul li a {
    text-decoration: none !important;
    color: #1a1a1a !important;
    /* var(--secondary-color) */
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease !important;
}

.main-nav ul li a.active-link {
    color: #EF8821 !important;
    /* var(--primary-color) */
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    header {
        height: 65px !important;
    }

    #main-header .header-container {
        padding: 10px 20px !important;
        /* Forces centering despite global container rules */
    }

    .logo-img {
        height: 38px !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 20px !important;
        /* Global mobile padding sync */
    }
}

/* 🚀 DEFINITIVE INTERNAL SCROLL FIX 🚀
   Forces containers to expand to content instead of scrolling internally
*/
.expertise-section,
.expertise-section .container,
.expertise-grid,
.faq-section,
.faq-section .container,
.faq-accordion,
.service-quiz,
.quiz-container,
.quiz-options {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Specifically for expanded areas, keep overflow hidden to respect boundaries but hide scrollbar */
.faq-answer.open {
    overflow: hidden !important;
    padding: 25px 30px !important;
    display: block !important;
}

/* ============================================
   SERVICES HERO: PALM JUMEIRAH BACKGROUND
   ============================================ */
.hero-services {
    min-height: 50vh;
    padding: 120px 0 80px;
    background-image: linear-gradient(rgba(15, 28, 46, 0.7), rgba(15, 28, 46, 0.7)), url('../assets/images/palm-jumeirah-bg.png') !important;
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Ensure .section-title content is visible if JS fails/delay */
.section-title.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Let JS handle the animation if active */
.js-active .section-title.fade-in:not(.visible) {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

/* AGGRESSIVE SCROLLBAR SUPPRESSION & WOBBLE FIX */
@media (max-width: 768px) {

    .expertise-grid,
    .expertise-section,
    .expertise-section .container,
    .faq-accordion,
    .faq-section,
    .faq-section .container,
    .smart-selector,
    .quiz-options,
    .container,
    .faq-item {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* ============================================
   HEADER & CARD REFINEMENTS (ROUNDED CORNERS)
   ============================================ */

#main-header {
    border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    width: 95% !important;
    max-width: 1200px !important;
    margin: 20px auto !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 2000 !important;
    display: block !important;
    /* Reset any displacement transforms */
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* Ensure mobile nav and overlay override the previous display: none */
.mobile-nav.open {
    display: block !important;
    right: 0 !important;
}

.mobile-nav-overlay.open {
    display: block !important;
}



/* Ensure QR codes have room when stacked */
.qr-container>div {
    margin-bottom: 20px;
}

@media (min-width: 480px) {
    .qr-container>div {
        margin-bottom: 0px;
    }
}

/* Ensure header container respects pill shape padding */
.header-container {
    padding: 0 40px !important;
}

@media (max-width: 768px) {
    .header-container {
        padding: 10px 15px !important;
    }
}

/* "Circularish" Corners (Increased Border Radius to 32px) */
.expertise-card,
.service-card-modern,
.faq-item,
.service-detail-card,
.certification-card,
.industry-card,
.testimonial-card,
.trust-item,
.stat-box-dark,
.strategic-card,
.professionals-cta,
.quiz-option,
.sticky-widget,
.modal-content,
.lead-form-container,
.trusted-partner-section div[style*="background: #0a0e17"],
.map-section div[style*="background: #0a0e17"],
.reveal-on-scroll div[style*="background: #0a0e17"],
.reveal-on-scroll div[style*="background: #0a0e17"] {
    border-radius: 32px !important;
}

/* Improve header buttons and primary elements */
.back-home,
.cta-button,
.submit-btn,
.btn-submit {
    border-radius: 50px !important;
}

.expertise-section,
.faq-accordion,
.faq-section,
.smart-selector,
.quiz-options {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* Ensure child cards don't have constraints causing scroll */
.expertise-card,
.faq-item,
.quiz-option {
    max-height: none !important;
    overflow: visible !important;
}

/* === INCORPORATED DARK THEME UTILITIES === */
/**
 * Unified dark mode – one continuous canvas.
 * No "dark slabs": same dark everywhere, no visible card/section edges.
 * Ref: 360accounting.ae feel, client Website.docx (darker background).
 */

:root {
    --dl-bg: #0a0e17;
    --dl-bg-same: #0a0e17;
    --dl-border: rgba(255, 255, 255, 0.06);
    --dl-accent: rgba(239, 136, 33, 0.15);
}

/* Single canvas: body is the dark */
body {
    background: #0a0e17 !important;
    background-image: none !important;
    color: #e8e9ea !important;
}

/* Sections = same dark as body (no banding, no slabs) */
/* Sections = transparent to show body animations */
section,
.section-alternate,
.trusted-partner-section,
.expertise-section,
.services-modern,
.map-section,
.mission-section,
.industries-section,
.services-detail,
.consultant-letter,
.service-quiz,
.trust-signals,
.faq-section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Hero: keep image overlay but base same dark */
.hero-split {
    background-color: transparent !important;
}

/* Cards/containers = seamless dark, no borders, no outlines */
.dark-luxury-card,
.lead-form-container,
.letter-content,
.letter-content.reveal-on-scroll,
.expertise-card,
.service-card-modern,
.industry-card,
.faq-item,
.service-detail-card,
.quiz-result,
.trust-item {
    background: #0a0e17 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #e8e9ea !important;
}

/* Fix Dropdown Styling */
.lead-form-container select {
    background-color: #111a2b !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.lead-form-container select option {
    background-color: #0a0e17 !important;
    color: #ffffff !important;
}

/* Service detail cards - seamless no border */
.service-detail-card {
    background: #0a0e17 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Quiz section - seamless */
.service-quiz {
    background: #0a0e17 !important;
}

/* Section title - NO underline */
.section-title h2 {
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    display: none;
}

/* CTA sections - seamless dark background, NO black slab */
section[style*="background: linear-gradient"],
.cta-section,
section[style*="background: #0f1c2e"],
section[style*="background: var(--secondary-color)"] {
    background: #0a0e17 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Quiz section - seamless */
.service-quiz {
    background: #0a0e17 !important;
}

/* Location blocks - remove black square outlines */
.map-section .container>div,
.map-section [style*="background"] {
    background: #0a0e17 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hero services section - NO black slab */
.hero-services {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove ALL underline decorations globally */
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
}

footer a,
footer a:hover,
.footer-links a,
.footer-contact a {
    text-decoration: none !important;
}

/* FINAL FIX: Remove borders from specific user-complained elements */
.hero-image-box img,
.section-title h2,
.section-title h2::after,
.hero-text-col img {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove bottom borders from sections */
section,
.section {
    border-bottom: none !important;
}

/* Service cards - FORCE dark background override mbs_custom.css */
.service-card-modern,
#services .service-card-modern,
.services-modern .service-card-modern {
    background: #0a0e17 !important;
    background-color: #0a0e17 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.service-card-modern:hover {
    background: #0a0e17 !important;
    border-color: var(--primary-color) !important;
}

/* ============================================
   TEXT COLOR CONTRAST FIXES
   Ensure all text is readable on dark backgrounds
   ============================================ */

/* Force all text to be light on dark backgrounds */
body,
section,
.section-alternate,
.trusted-partner-section,
.expertise-section,
.services-modern,
.map-section,
.mission-section,
.industries-section,
.services-detail,
.consultant-letter,
.service-quiz,
.trust-signals,
.faq-section {
    color: #e8e9ea !important;
}

/* Paragraph text - ensure readability */
p,
.section-title p,
.hero-subtext,
.service-card-modern p,
.expertise-card p,
.faq-answer p,
.trust-label,
.lead-form-container p {
    color: #c5c6c7 !important;
}

/* Headings - slightly brighter */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2,
.service-card-modern h3,
.expertise-card h3,
.faq-question span {
    color: #f0f0f0 !important;
}

/* Muted text - lighter gray for contrast */
.text-muted,
.service-card-modern .text-muted,
.expertise-card .text-muted,
.trust-label,
.faq-answer p,
.footer-info p,
.footer-column p {
    color: #b0b1b2 !important;
}

/* Links - ensure visibility */
a,
.footer-links a,
.footer-contact a,
.footer-grid ul li a {
    color: #EF8821 !important;
}

a:hover {
    color: #ffb347 !important;
}

/* Card content - ensure all text is visible */
.dark-luxury-card *,
.lead-form-container *,
.expertise-card *,
.service-card-modern *,
.faq-item *,
.service-detail-card * {
    color: inherit;
}

/* Specific text elements that were hard to read */
.service-card-modern p,
.expertise-card p,
.industry-card p,
.faq-answer p,
.trust-item .trust-label {
    color: #b8b9ba !important;
}

/* Ensure form labels and inputs are readable */
.lead-form-container label,
.lead-form-container input,
.lead-form-container select,
.lead-form-container textarea {
    color: #e8e9ea !important;
}

.lead-form-container input::placeholder,
.lead-form-container textarea::placeholder {
    color: #9ca3af !important;
}

/* Hero section text */
.hero-split .hero-h1,
.hero-split .hero-subtext,
.hero-split .hero-checklist li {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Footer text - ensure readability */
footer,
footer p,
footer li,
.footer-bottom,
.footer-bottom p {
    color: #b8b9ba !important;
}

footer h3,
footer h4 {
    color: #f0f0f0 !important;
}

/* Navigation text */
nav a,
.main-nav a,
.mobile-nav a {
    color: #e8e9ea !important;
}

nav a:hover,
.main-nav a:hover {
    color: #EF8821 !important;
}

/* Remove any dark text colors that might be causing issues */
[style*="color: #000"],
[style*="color: #333"],
[style*="color: #666"],
[style*="color: #999"],
[style*="color: rgb(0,"],
[style*="color: rgb(51,"],
[style*="color: rgb(102,"] {
    color: #e8e9ea !important;
}

/* ============================================
   FAQ BORDER REMOVAL - Aggressive overrides
   ============================================ */

/* Remove ALL FAQ borders completely */
.faq-item,
.faq-item *,
.faq-question,
.faq-answer,
.faq-section,
#faq-accordion,
#faq-accordion * {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove FAQ item background colors that create boxes */
.faq-item {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Only keep a very subtle separator line between questions */
.faq-question {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
}

/* FAQ answer should have no borders */
.faq-answer {
    border: none !important;
    background: transparent !important;
}

/* 9. SERVICES HERO FIX - NO BLACK SLABS */
.hero-services,
.hero-services .container,
.hero-services .hero-content,
.hero-services .hero-content h1,
.hero-services .hero-content p,
.hero-services .section-title,
.hero-services .section-title h2 {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 10. HOMEPAGE HERO FIX - NO BLACK SLABS */
.hero-split,
.hero-split .container,
.hero-split .hero-content,
.hero-split .hero-content h1,
.hero-split .hero-content p,
.hero-split .section-title,
.hero-split .section-title h2,
.hero .hero-content,
.hero .hero-content h1,
.hero .hero-content p {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.hero-split h1 {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Active/expanded FAQ items - no borders */
.faq-item.active,
.faq-item[aria-expanded="true"],
.faq-item:has([aria-expanded="true"]) {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.faq-item.active .faq-question,
.faq-item[aria-expanded="true"] .faq-question {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
}

/* Remove hover effects that add borders */
.faq-item:hover {
    border: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ============================================
   SERVICES PAGE BORDER FIXES
   ============================================ */

/* Services page section title - no borders, no backgrounds */
.services-detail .section-title,
.services-detail .section-title h2,
.services-detail .section-title span,
.hero-services .section-title,
#services .section-title {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

/* Service detail cards - no borders */
.service-detail-card {
    background: #0a0e17 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Service detail card icon container - remove any borders */
.service-detail-card .icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   SCROLL PROGRESS & LINE REMOVAL
   ============================================ */

/* Remove scroll progress bar completely */
.scroll-progress,
.scroll-progress-bar,
#scrollProgress {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Reduce parallax/grid effects that cause lines */
.mesh-bg,
.grid-pattern {
    opacity: 0.1 !important;
}

/* ============================================
   GENERAL BORDER CLEANUP
   ============================================ */

/* Remove all borders from cards and sections */
.dark-luxury-card,
.expertise-card,
.industry-card,
.trust-item,
.lead-form-container,
.service-card-modern {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove pseudo-element borders */
.service-card-modern::before,
.service-card-modern::after,
.expertise-card::before,
.expertise-card::after,
.faq-item::before,
.faq-item::after,
.section-title::before,
.section-title::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove inline borders */
[style*="border: 1px solid"],
[style*="border-bottom"],
[style*="border-top"] {
    border: none !important;
}

/* Section titles - clean, no borders */
.section-title,
.section-title h2,
.section-title p {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   AGGRESSIVE BORDER & LINE REMOVAL
   Remove ALL borders, shadows, lines everywhere
   ============================================ */

/* ============================================
  /* AGGRESSIVE WHITE BACKGROUND REMOVAL */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"],
.service-card-modern,
.service-detail-card,
.expertise-card,
.industry-card,
.trust-item,
.faq-item,
.compliance-card,
.certification-card,
.recommended-service-card,
.timeline-content,
.lead-form-container,
.selector-quiz,
.quiz-option {

    /* Fix square borders */
    .trust-stat,
    .dark-luxury-card h4,
    .dark-luxury-card .icon-box,
    .certification-card,
    .certification-content,
    .trust-item,
    .faq-item,
    .faq-question,
    .service-detail-card,
    .service-detail-card .icon,
    .service-card-modern,
    .service-card-modern .icon-box {
        border-radius: 16px !important;
    }

    .faq-item {
        overflow: hidden !important;
    }


    /* AGGRESSIVE BORDER REMOVAL */
    .faq-item,
    .faq-question,
    .faq-answer,
    .service-detail-card,
    .service-card-modern,
    .section-title,
    .section-title h2,
    .services-detail .section-title,
    #services .section-title {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
    }

    /* Ensure all cards have dark backgrounds */
    [class*="card"],
    [class*="item"] {
        background-color: #0a0e17 !important;
    }

    /* Fix trust items specifically */
    .trust-signals,
    .trust-item {
        background: #0a0e17 !important;
        border: none !important;
    }

    /* Remove ALL lines and separators */
    hr,
    .separator,
    .divider,
    .line {
        display: none !important;
    }

    /* ============================================
   MBS_CUSTOM.CSS WHITE BACKGROUND FIXES
   ============================================ */

    /* Trust signals - dark background */
    .trust-signals,
    .trust-item {
        background: #0a0e17 !important;
        border: none !important;
    }

    /* Service cards - remove white backgrounds */
    .service-card-enhanced,
    .service-card-front,
    .service-card-enhanced:hover,
    .service-card-modern {
        background: #0a0e17 !important;
        border: none !important;
    }

    /* Industry cards - dark theme */
    .industry-card,
    .industries-section {
        background: #0a0e17 !important;
        border: none !important;
    }

    /* FAQ section - dark background */
    .faq-section {
        background: #0a0e17 !important;
    }

    /* Compliance cards - dark theme */
    .compliance-card {
        background: #0a0e17 !important;
        border: 1px solid rgba(239, 136, 33, 0.2) !important;
    }

    /* Service selector - dark gradient */
    .service-selector,
    .selector-quiz,
    .quiz-option {
        background: linear-gradient(135deg, #0a0e17 0%, #0f1419 100%) !important;
        border: 1px solid rgba(239, 136, 33, 0.2) !important;
    }

    /* Recommended service cards */
    .recommended-service-card {
        background: #0a0e17 !important;
        border-left: 4px solid var(--primary-color) !important;
    }

    /* Timeline content - dark theme */
    .timeline-content {
        background: #0a0e17 !important;
        border: 1px solid rgba(239, 136, 33, 0.2) !important;
    }

    /* Expertise cards - dark theme */
    .expertise-areas .expertise-card {
        background: #0a0e17 !important;
        border: 1px solid rgba(239, 136, 33, 0.2) !important;
    }

    /* Certification cards - dark theme */
    .certifications-section .certification-card {
        background: #0a0e17 !important;
        border: 1px solid rgba(239, 136, 33, 0.2) !important;
    }

    /* Buttons - ensure dark theme */
    .btn-secondary {
        background: transparent !important;
        color: #e8e9ea !important;
        border: 2px solid var(--primary-color) !important;
    }

    .btn-secondary:hover {
        background: var(--primary-color) !important;
        color: white !important;
    }

    /* Widget form messages - dark theme */
    .widget-form .form-message.success {
        background: rgba(40, 167, 69, 0.2) !important;
        color: #98d8a8 !important;
        border: 1px solid rgba(40, 167, 69, 0.3) !important;
    }

    .widget-form .form-message.error {
        background: rgba(220, 53, 69, 0.2) !important;
        color: #f5a3ab !important;
        border: 1px solid rgba(220, 53, 69, 0.3) !important;
    }

    /* Section alternates - dark background */
    .section-alternate {
        background: #0a0e17 !important;
    }

    /* Expertise card backgrounds */
    .expertise-card {
        background: rgba(15, 20, 30, 0.9) !important;
        border: 1px solid rgba(239, 136, 33, 0.15) !important;
    }

    /* Remove all white backgrounds */
    [style*="background: white"],
    [style*="background: #fff"],
    [style*="background: #ffffff"],
    [style*="background-color: white"],
    [style*="background-color: #fff"] {
        background: #0a0e17 !important;
        background-color: #0a0e17 !important;
    }

    /* FAQ items - completely seamless */
    .faq-item,
    .faq-item *,
    .faq-question,
    .faq-answer,
    .faq-section * {
        background: #0a0e17 !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Only keep subtle separator between FAQ questions */
    .faq-question {
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    /* Section titles - NO borders, NO backgrounds */
    .section-title,
    .section-title *,
    .section-title h2,
    .section-title h2 span,
    .section-title p {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Services page specific fixes */
    .services-detail .section-title,
    .services-detail .section-title h2,
    #services .section-title,
    .hero-services .section-title {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Service cards - completely flat */
    .service-detail-card,
    .service-detail-card *,
    .service-detail-card .icon,
    .service-card-modern,
    .service-card-modern * {
        background: #0a0e17 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove ALL pseudo-element borders */
    .service-detail-card::before,
    .service-detail-card::after,
    .service-card-modern::before,
    .service-card-modern::after,
    .section-title::before,
    .section-title::after,
    .faq-item::before,
    .faq-item::after {
        display: none !important;
        content: none !important;
        border: none !important;
    }

    /* Remove scroll progress bar completely */
    .scroll-progress,
    .scroll-progress-bar,
    #scrollProgress {
        display: none !important;
        opacity: 0 !important;
    }

    /* Reduce grid patterns and overlays that cause lines - but keep visible */
    .mesh-bg,
    .grid-pattern,
    .texture-bg,
    .particles-container,
    .gradient-orb,
    .orb-1,
    .orb-2,
    .orb-3 {
        opacity: 0.3 !important;
    }

    /* Fix any remaining visual artifacts */
    [class*="border"],
    [class*="shadow"],
    [class*="line"],
    [class*="separator"],
    [class*="divider"] {
        border: none !important;
        box-shadow: none !important;
    }

    /* ============================================
   REMOVE ALL ANNOYING ANIMATIONS - PREMIUM STATIC DESIGN
   ============================================ */

    /* Stop ALL sticky widget animations */
    .sticky-widget,
    .sticky-widget.pulse,
    .sticky-widget.whatsapp,
    .sticky-widget.phone,
    .sticky-widget.botim {
        animation: none !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    .sticky-widget::before,
    .sticky-widget::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    /* Remove rotating borders from cards */
    .service-card-modern::before,
    .expertise-card::before,
    .trust-item::before,
    .industry-card::before,
    .faq-item::before {
        display: none !important;
        content: none !important;
        animation: none !important;
        background: none !important;
    }

    /* Stop all card floating animations but keep hover transitions */
    .service-card-modern,
    .expertise-card,
    .trust-item,
    .industry-card,
    .faq-item,
    .service-detail-card {
        animation: none !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    /* ALLOW button hover animations - don't disable these */
    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .btn-gold,
    .explore-now-btn,
    button,
    a[class*="btn"] {
        transition: all 0.3s ease !important;
    }

    /* Remove all pulse, bounce, rotate continuous animations */
    .pulse,
    .bounce,
    .rotate,
    .spin,
    .shimmer,
    .shine {
        animation: none !important;
    }

    /* Stop floating orbs animations */
    .gradient-orb,
    .orb-1,
    .orb-2,
    .orb-3,
    .mesh-bg {
        animation: none !important;
    }

    /* Remove particle animations */
    .particle,
    .particles-container * {
        animation: none !important;
    }

    /* Stop text shimmer animations */
    .shimmer-text,
    .gradient-text {
        animation: none !important;
        background: none !important;
    }

    /* Remove shine sweep effects */
    .shine-sweep,
    .shine-sweep-sticky,
    .sticky-widget::after {
        animation: none !important;
        display: none !important;
    }

    /* ============================================
   AGGRESSIVE UNDERLINE REMOVAL
   ============================================ */

    /* Remove ALL underlines everywhere */
    * {
        text-decoration: none !important;
    }

    a,
    a:hover,
    a:focus,
    a:active,
    a:visited,
    .link,
    .nav-link,
    .footer-link,
    .footer-links a,
    .footer-contact a,
    .footer-grid a,
    .section-title h2,
    .section-title h2::after,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-decoration: none !important;
        border-bottom: none !important;
        border-top: none !important;
        outline: none !important;
    }

    /* Remove ALL pseudo-element lines */
    *::before,
    *::after {
        text-decoration: none !important;
        border-bottom: none !important;
        border-top: none !important;
    }

    /* ============================================
   PREMIUM SECTION STYLING - DISTINCT VISUALS
   ============================================ */

    /* Hero - Clean with Burj Khalifa */
    .hero-split {
        background: linear-gradient(135deg, rgba(10, 14, 23, 0.95) 0%, rgba(15, 28, 46, 0.9) 100%),
            url('../assets/images/burj-khalifa-bg-wide-light.jpg') !important;
        background-size: cover !important;
        background-position: center 30% !important;
        background-attachment: fixed !important;
    }

    /* Trust Signals - Subtle gradient shift */
    .trust-signals {
        background: linear-gradient(180deg, #0a0e17 0%, #0d121a 50%, #0a0e17 100%) !important;
    }

    /* Trusted Partner - Slight blue tint */
    .trusted-partner-section {
        background: linear-gradient(135deg, #0a0e17 0%, #0c111d 50%, #0a0e17 100%) !important;
    }

    /* Expertise - Warm undertone */
    .expertise-section {
        background: linear-gradient(180deg, #0a0e17 0%, #0f131c 50%, #0a0e17 100%) !important;
    }

    /* Services - Subtle orange glow */
    .services-modern {
        background: radial-gradient(ellipse at 50% 0%, rgba(239, 136, 33, 0.05) 0%, transparent 50%),
            #0a0e17 !important;
    }

    /* FAQ - Clean dark */
    .faq-section {
        background: #0a0e17 !important;
    }

    /* Location - Warm gradient */
    .map-section {
        background: linear-gradient(135deg, #0a0e17 0%, #0e1219 50%, #0a0e17 100%) !important;
    }

    /* Footer - Deep dark */
    footer {
        background: linear-gradient(180deg, #080b10 0%, #05070a 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    /* Services Page Hero */
    .hero-services {
        background: linear-gradient(135deg, rgba(10, 14, 23, 0.95) 0%, rgba(15, 28, 46, 0.9) 100%),
            url('../assets/images/palm-jumeirah-bg.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* ============================================
   CARDS - PREMIUM GLASS MORPHISM
   ============================================ */

    /* Service cards - Glass effect */
    .service-card-modern,
    .service-detail-card,
    .expertise-card,
    .trust-item {
        background: rgba(20, 25, 35, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 16px !important;
        transition: all 0.3s ease !important;
    }

    /* Card hover - subtle glow only */
    .service-card-modern:hover,
    .service-detail-card:hover,
    .expertise-card:hover,
    .trust-item:hover {
        background: rgba(25, 30, 40, 0.6) !important;
        border-color: rgba(239, 136, 33, 0.3) !important;
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    }

    /* Service cards on services page - seamless */
    .service-detail-card {
        background: rgba(20, 25, 35, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    .faq-item {
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    .faq-question {
        background: transparent !important;
        border: none !important;
    }

    .faq-answer {
        background: transparent !important;
        border: none !important;
    }

    /* ============================================
   SECTION TITLES - CLEAN & PREMIUM
   ============================================ */

    .section-title {
        background: transparent !important;
        border: none !important;
        text-align: center !important;
        margin-bottom: 60px !important;
    }

    .section-title h2 {
        font-size: 2.5rem !important;
        font-weight: 600 !important;
        color: #f0f0f0 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 15px !important;
    }

    .section-title h2 span {
        color: var(--primary-color) !important;
    }

    .section-title p {
        font-size: 1.1rem !important;
        color: #9ca3af !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    /* Remove ALL underlines from section titles */
    .section-title h2::after,
    .section-title h2::before,
    .section-title::after,
    .section-title::before {
        display: none !important;
        content: none !important;
        border: none !important;
        background: none !important;
    }

    /* ============================================
   STICKY WIDGETS - CLEAN & STATIC
   ============================================ */

    .sticky-widgets {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        z-index: 1000 !important;
    }

    .sticky-widget {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        transition: transform 0.2s ease !important;
        animation: none !important;
    }

    .sticky-widget:hover {
        transform: scale(1.1) !important;
    }

    .sticky-widget.whatsapp {
        background: #25D366 !important;
        color: white !important;
    }

    .sticky-widget.phone {
        background: var(--primary-color) !important;
        color: white !important;
    }

    /* Remove pulse ring animations */
    .sticky-widget::before,
    .sticky-widget::after {
        display: none !important;
        animation: none !important;
    }

    /* ============================================
   TEXT & LINKS - CLEAN
   ============================================ */

    p {
        color: #b8b9ba !important;
        line-height: 1.8 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #f0f0f0 !important;
        font-weight: 600 !important;
    }

    a {
        color: var(--primary-color) !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }

    a:hover {
        color: #ffb347 !important;
        text-decoration: none !important;
    }

    /* Remove ALL lines and separators */
    hr,
    .separator,
    .divider,
    .line,
    .border-line {
        display: none !important;
        border: none !important;
    }

    /* ============================================
   FORMS - CLEAN DARK
   ============================================ */

    .lead-form-container {
        background: rgba(20, 25, 35, 0.6) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 20px !important;
        padding: 40px !important;
    }

    input,
    select,
    textarea {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #e8e9ea !important;
        border-radius: 10px !important;
        padding: 15px !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--primary-color) !important;
        outline: none !important;
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.1) !important;
    }

    /* ============================================
   AGGRESSIVE BLACK BORDER REMOVAL
   Override mbs_custom.css black borders
   ============================================ */

    /* Remove black borders from trust items and white cards */
    .trust-item,
    [style*="background: white"],
    [style*="background:#fff"] {
        border: none !important;
        border-color: transparent !important;
    }

    /* Remove black borders from contact/partner cards */
    .trusted-partner-section div[style*="background: white"],
    .map-section div[style*="background: white"] {
        border: none !important;
        border-color: transparent !important;
    }

    /* Remove black border from header */
    #main-header,
    header {
        border: none !important;
        border-color: transparent !important;
    }

    /* Remove black borders from mobile cards (style.css) */
    .value-card,
    .timeline-item,
    .contact-card {
        border: none !important;
        border-color: transparent !important;
    }

    /* Override dark text colors for dark mode */
    nav a,
    label,
    .testimonial-text,
    .faq-question,
    .faq-answer,
    .quiz-option,
    .partner-item i,
    .service-card-front h3,
    .service-card-enhanced h3,
    .service-card-front p,
    .service-card-enhanced p {
        color: #e8e9ea !important;
    }

    /* High contrast mode overrides */
    @media (prefers-contrast: high) {
        :root {
            --text-color: #e8e9ea !important;
            --text-muted: #b8b9ba !important;
        }
    }

    /* Override any remaining black borders with !important */
    [style*="border: 1px solid rgba(0, 0, 0"],
    [style*="border: 1.5px solid rgba(0, 0, 0"],
    [style*="border: 2px solid rgba(0, 0, 0"] {
        border: none !important;
    }

    /* Remove black borders from specific elements */
    .service-card-modern,
    .expertise-card,
    .industry-card,
    .faq-item,
    .trust-item,
    .lead-form-container,
    .contact-card,
    .value-card,
    .timeline-item {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Images - remove any borders */
    img,
    .image-container,
    .hero-image,
    .icon-image {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Form containers - remove black borders */
    .lead-form-container,
    .form-container,
    .form-card {
        border: none !important;
        border-color: transparent !important;
    }

    /* Cards on services page */
    .service-detail-card,
    .service-detail-card:hover,
    .service-detail-card:focus {
        border: none !important;
        border-color: transparent !important;
        outline: none !important;
    }

    /* Quiz options and results */
    .quiz-option,
    .quiz-result,
    .quiz-container {
        border: none !important;
    }

    /* Ensure all borders use light colors if present */
    .expertise-card,
    .service-card-modern,
    .industry-card,
    .faq-item,
    .trust-item {
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Remove any hardcoded black borders in inline styles */
    [style*="border: 1.5px solid rgba(0, 0, 0, 0.22)"],
    [style*="border: 1.5px solid rgba(0, 0, 0, 0.2)"],
    [style*="border: 1.5px solid rgba(0, 0, 0, 0.1)"],
    [style*="border: 1px solid rgba(0, 0, 0, 0.15)"] {
        border: none !important;
    }

    /* Trust items - clean */
    .trust-item {
        background: rgba(20, 25, 35, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 16px !important;
    }

    /* ============================================
   NUCLEAR BORDER REMOVAL - TARGET EVERYTHING
   ============================================ */

    /* NUCLEAR DARK MODE PURGE - Nuke all light mode remnants */

    /* 1. Global Backgrounds & Text */
    * {
        border-color: rgba(255, 255, 255, 0.05) !important;
    }

    body,
    section,
    .section-alternate,
    .section,
    #counter-section {
        background: #0a0e17 !important;
        background-color: #0a0e17 !important;
        color: #e8e9ea !important;
    }

    /* 2. Nav Links - Fix Black Text */
    nav a,
    .nav-link,
    #main-header a,
    header a {
        color: #e8e9ea !important;
    }

    nav a:hover,
    nav a.active {
        color: var(--primary-color) !important;
    }

    /* 3. Cards & Containers - No Slabs, No Boxiness */
    .industry-card,
    .expertise-card,
    .service-card-modern,
    .faq-item,
    .trust-item,
    .service-detail-card,
    .dark-luxury-card,
    .lead-form-container,
    .value-card,
    .timeline-item,
    .contact-card,
    .quiz-option {
        background: rgba(20, 25, 35, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 32px !important;
        box-shadow: none !important;
        color: #e8e9ea !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    /* Fix Industry Card specific text */
    .industry-card h3,
    .industry-card p,
    .industry-services li,
    .expertise-card h3,
    .expertise-card p {
        color: #e8e9ea !important;
    }

    .industry-icon,
    .icon-box,
    .expertise-icon {
        background: rgba(239, 136, 33, 0.1) !important;
        color: var(--primary-color) !important;
        border-radius: 20px !important;
    }

    /* 4. HOVER STATES - PURE ROUNDNESS, NO SQUARES */
    .industry-card:hover,
    .expertise-card:hover,
    .service-card-modern:hover,
    .faq-item:hover,
    .trust-item:hover,
    .dark-luxury-card:hover,
    .lead-form-container:hover,
    .sticky-widget:hover {
        background: rgba(15, 20, 30, 0.8) !important;
        transform: translateY(-8px) scale(1.01) !important;
        border-radius: 32px !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    }

    /* Ensure icons/logos don't turn black on hover */
    .industry-card:hover .industry-icon,
    .service-card-modern:hover .icon-box,
    .expertise-card:hover .icon-box,
    .industry-card:hover * {
        background: var(--primary-color) !important;
        color: #0a0e17 !important;
    }

    .industry-card:hover p,
    .expertise-card:hover p,
    .service-card-modern:hover p {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* 5. LOCATION SECTION FIX */
    .map-section .container>div {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 50px !important;
        align-items: start !important;
    }

    @media (max-width: 768px) {
        .map-section .container>div {
            grid-template-columns: 1fr !important;
        }
    }

    /* 6. FORMS & DROPDOWNS */
    select,
    option,
    input,
    textarea {
        background: #111a2b !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 7. REMOVE PULSE ANIMATIONS & SHARP BORDERS */
    .pulse {
        animation: none !important;
    }

    .section-title h2::after {
        display: none !important;
    }
}

/* Remove ALL inline style borders (Nuclear option) */
[style*="border"],
[style*="border-top"],
[style*="border-bottom"],
[style*="border-left"],
[style*="border-right"] {
    border: none !important;
    border-color: transparent !important;
}

[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background: transparent !important;
}

/* ============================================
   REFINEMENT FIXES
   ============================================ */

/* FAQ BUBBLES ANIMATION */
.faq-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.faq-bubble {
    position: absolute;
    bottom: -100px;
    width: 10px;
    height: 10px;
    background: rgba(239, 136, 33, 0.3);
    border-radius: 50%;
    animation: faqBubbleRise 8s ease-in-out infinite;
}

@keyframes faqBubbleRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-800px) scale(0.5);
        opacity: 0;
    }
}

/* BUTTON TEXT FIX - Ensure text is visible */
.explore-now-btn,
.btn-primary,
.btn-secondary,
.btn-gold,
.btn-submit {
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.explore-now-btn span,
.btn-primary span,
.explore-now-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.explore-now-btn i,
.btn-primary i {
    color: white !important;
    margin-left: 4px !important;
}

/* FOOTER LINKS - Remove underlines on hover */
footer a,
.footer-links a,
.footer-contact a {
    text-decoration: none !important;
    border-bottom: none !important;
}

footer a:hover,
.footer-links a:hover,
.footer-contact a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    color: var(--primary-color) !important;
}

/* REMOVE ANIMATIONS BELOW SOCIAL BUTTONS - Disable any pulse/ripple animations near footer social icons */
footer .fab,
footer .fas,
.footer-contact .fab,
.footer-contact .fas,
.social-links .fab,
.social-links .fas {
    animation: none !important;
    transition: transform 0.3s ease !important;
}

footer .fab:hover,
footer .fas:hover,
.footer-contact .fab:hover {
    transform: scale(1.1) !important;
    animation: none !important;
}

/* LOCATION CARDS - Fix spacing and transparency */
.location-map-card,
.location-details-card {
    background: rgba(10, 14, 23, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Map card - no padding, map fills entire card */
.location-map-card {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.location-map-card iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Ensure map fills entire card dimensions */
.location-map-card.dark-luxury-card {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.location-map-card.dark-luxury-card iframe {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure location cards don't collide */
.map-section .container>div[style*="grid"] {
    gap: 40px !important;
}

/* TRUST GRID - Evenly spaced stats */
.trust-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 80px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .trust-grid {
        flex-direction: column !important;
        gap: 40px !important;
    }
}

/* DARK LUXURY CARD - Consistent styling */
.dark-luxury-card {
    background: rgba(10, 14, 23, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
}

/* STICKY WIDGETS - Dark mode optimization */
.sticky-widget {
    background: var(--secondary-color) !important;
    color: white !important;
    border: 2px solid rgba(239, 136, 33, 0.3) !important;
}

.sticky-widget.whatsapp {
    background: #25D366 !important;
    border-color: #25D366 !important;
}

.sticky-widget.phone {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.sticky-widget i {
    color: white !important;
}

/* ============================================
   COMPREHENSIVE FIXES - ALL ISSUES
   ============================================ */

/* 1. FAQ SECTION - Make more translucent with better bubble visibility */
.faq-section {
    background: rgba(10, 14, 23, 0.2) !important;
    position: relative;
    overflow: hidden;
}

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

.faq-section .faq-item {
    background: rgba(15, 20, 30, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 16px;
}

.faq-section .faq-question {
    background: transparent !important;
    color: white !important;
}

.faq-section .faq-answer {
    background: rgba(10, 14, 23, 0.3) !important;
    color: #e8e9ea !important;
}

/* Enhanced FAQ bubbles - more visible */
.faq-bubble {
    width: 15px !important;
    height: 15px !important;
    background: rgba(239, 136, 33, 0.5) !important;
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.4) !important;
}

/* 2. LOCATION CARDS - Fix collision with proper grid spacing */
.map-section .container>div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 60px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.location-map-card,
.location-details-card {
    background: rgba(10, 14, 23, 0.3) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    min-height: 400px !important;
}

@media (max-width: 768px) {
    .map-section .container>div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .location-map-card,
    .location-details-card {
        min-height: 300px !important;
    }
}

/* 3. CORE SERVICES - Center everything */
.services-modern {
    text-align: center !important;
}

.services-modern .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-modern .section-title {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.services-modern .section-title h2 {
    text-align: center !important;
}

.services-modern .section-title p {
    text-align: center !important;
}

/* 4. SERVICE CARDS GRID - Center and fix spacing */
.services-modern-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    justify-items: center !important;
    align-items: stretch !important;
}

@media (max-width: 992px) {
    .services-modern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 800px !important;
    }
}

@media (max-width: 768px) {
    .services-modern-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
    }
}

/* 5. SERVICE CARDS - Fix images and hover */
.service-card-modern {
    background: rgba(10, 14, 23, 0.5) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 20px !important;
    padding: 35px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 320px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.service-card-modern>i {
    font-size: 40px !important;
    color: var(--primary-color) !important;
    margin-bottom: 20px !important;
    width: 80px !important;
    height: 80px !important;
    background: rgba(239, 136, 33, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* Fix hover - don't hide elements */
.service-card-modern:hover {
    background: rgba(15, 20, 30, 0.7) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(239, 136, 33, 0.2) !important;
}

.service-card-modern:hover>i {
    background: var(--primary-color) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

.service-card-modern h3 {
    color: white !important;
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

.service-card-modern p {
    color: #b8b9ba !important;
    text-align: center !important;
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
}

/* 6. EXPLORE NOW BUTTONS - Fix styling */
.service-card-modern .explore-now-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: auto !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* EXPLORE NOW Button - Fix hover to remove orange tinge */
.service-card-modern .explore-now-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.service-card-modern .explore-now-btn:hover i {
    color: #000 !important;
}

/* 7. FOOTER - Nuclear fix for underlines */
footer,
footer * {
    text-decoration: none !important;
    border-bottom: none !important;
}

footer a:hover,
.footer-links a:hover,
.footer-contact a:hover,
footer a:focus,
.footer-links a:focus,
.footer-contact a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* 8. SOCIAL MEDIA - Kill all animations */
footer i.fab,
footer i.fas,
.footer-contact i.fab,
.footer-contact i.fas,
.top-social i,
.top-bar i {
    animation: none !important;
    transition: transform 0.2s ease !important;
    border-radius: 0 !important;
}

/* Remove any oval/round border animations */
footer a::before,
footer a::after,
.footer-contact a::before,
.footer-contact a::after,
.top-social a::before,
.top-social a::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* 9. PROFESSIONALS CTA BUTTON */
.professionals-cta .btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 40px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(239, 136, 33, 0.3) !important;
}

.professionals-cta .btn-gold:hover {
    background: #ff9f43 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(239, 136, 33, 0.5) !important;
    color: white !important;
}

/* 10. EXPLORE ALL SERVICES BUTTON */
.services-modern .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 40px !important;
    background: var(--secondary-color) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin-top: 40px !important;
}

.services-modern .btn-primary:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.services-modern .btn-primary:hover i {
    color: #000 !important;
}

/* EXPLORE ALL SERVICES BUTTON - Force white hover with black text */
.explore-all-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

.explore-all-btn:hover i {
    color: #000 !important;
}

/* ============================================
   SECTION TRANSLUCENCY FIXES - Show mesmerizing backgrounds
   ============================================ */

/* ENQUIRE NOW BUTTONS on Services Page */
.service-detail-card .btn-primary:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

.service-detail-card .btn-primary:hover i {
    color: #000 !important;
}

/* Make all section cards more translucent with golden borders */
.service-card-modern,
.expertise-card,
.faq-item,
.location-map-card,
.location-details-card,
.dark-luxury-card,
.service-detail-card {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
    border-radius: 20px !important;
}

/* Services section cards */
.services-modern .service-card-modern {
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(15px) !important;
}

/* Expertise section cards */
.expertise-section .expertise-card {
    background: rgba(15, 20, 30, 0.65) !important;
    backdrop-filter: blur(12px) !important;
}

/* FAQ section cards */
.faq-section .faq-item {
    background: rgba(15, 20, 30, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Location section cards with golden borders */
.map-section .location-map-card,
.map-section .location-details-card {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
    border-radius: 20px !important;
}

/* Trusted Partner section card */
.trusted-partner-section .dark-luxury-card {
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(12px) !important;
}

/* Professionals CTA Banner */
.professionals-cta {
    background: rgba(15, 28, 46, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Section backgrounds - ensure they show mesmerizing effects */
.services-modern,
.expertise-section,
.faq-section,
.map-section,
.trusted-partner-section {
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure mesh background and orbs are visible */
.mesh-bg,
.gradient-orb,
.grid-pattern {
    pointer-events: none !important;
}

/* ULTRA STRONG override for location section - remove ALL black backgrounds */
.map-section .dark-luxury-card.location-map-card,
.map-section .dark-luxury-card.location-details-card,
.map-section .location-map-card,
.map-section .location-details-card,
.location-map-card.dark-luxury-card,
.location-details-card.dark-luxury-card {
    background-color: rgba(15, 28, 46, 0.25) !important;
    background: rgba(15, 28, 46, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Remove any ::before pseudo elements that might add dark backgrounds */
.map-section .dark-luxury-card::before,
.map-section .location-map-card::before,
.map-section .location-details-card::before {
    display: none !important;
}

/* ============================================
   STATS SECTION - Fix icons, remove halo effect
   ============================================ */

/* Remove any pulse/animation from trust icons */
.trust-icon {
    animation: none !important;
    width: 70px;
    height: 70px;
    background: rgba(239, 136, 33, 0.15) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border: 2px solid rgba(239, 136, 33, 0.3);
    transition: all 0.3s ease;
}

.trust-icon i {
    font-size: 28px;
    color: var(--primary-color);
    animation: none !important;
}

/* Static hover effect - no blinking */
.trust-item:hover .trust-icon {
    background: rgba(239, 136, 33, 0.25) !important;
    border-color: rgba(239, 136, 33, 0.5);
    transform: scale(1.05);
}

/* Remove any glow/animation from stat numbers */
.trust-stat {
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Remove pulse animation from trust items */
.trust-item,
.trust-icon,
.trust-stat {
    animation: none !important;
}

/* Ensure trust section has no weird glow effects */
.trust-signals {
    position: relative;
    overflow: hidden;
}

.trust-signals::before,
.trust-signals::after {
    display: none !important;
}

/* ============================================
   SECTION PARTICLES - Match Trusted Partner colorful dots
   ============================================ */

.section-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(239, 136, 33, 0.85);
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle 15s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.9), 0 0 40px rgba(239, 136, 33, 0.5);
    z-index: 0;
}

.section-particle:nth-child(2n) {
    background: rgba(0, 212, 255, 0.85);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.9), 0 0 40px rgba(0, 212, 255, 0.5);
    animation-duration: 20s;
    animation-delay: -5s;
}

.section-particle:nth-child(3n) {
    background: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.5);
    animation-duration: 25s;
    animation-delay: -10s;
}

.section-particle:nth-child(4n) {
    background: rgba(239, 136, 33, 0.85);
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.9), 0 0 40px rgba(239, 136, 33, 0.5);
    animation-duration: 18s;
    animation-delay: -15s;
}

@keyframes float-particle {

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   GLASS-LIKE TRANSLUCENT CARDS
   ============================================ */

/* Make all cards more translucent like Trusted Partner */
.expertise-card,
.service-card-modern,
.faq-item,
.location-map-card,
.location-details-card,
.dark-luxury-card,
.professionals-cta {
    background: rgba(15, 28, 46, 0.25) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* FAQ cards more translucent */
.faq-section .faq-item {
    background: rgba(15, 28, 46, 0.2) !important;
}

/* Hover effects */
.expertise-card:hover,
.service-card-modern:hover,
.faq-item:hover,
.location-map-card:hover,
.location-details-card:hover {
    background: rgba(20, 35, 55, 0.35) !important;
    border-color: rgba(239, 136, 33, 0.4) !important;
}

/* Override section-backgrounds.css - make all sections transparent to show fixed orbs */
.expertise-section,
.services-modern,
.faq-section,
.map-section,
.section-alternate {
    background: transparent !important;
}

/* Specific override for map-section to remove any dark backgrounds */
.map-section,
.map-section.section-alternate {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Map section title - ULTRA strong override to remove black box */
.map-section .section-title,
.map-section .section-title h2,
.map-section .section-title p,
.map-section .section-title span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Override any div backgrounds in map section container */
.map-section .container>div[style*="background"] {
    background: transparent !important;
}

/* Hero heading - white for full visibility */
.hero-h1 {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep the gradient-text class consistent */
.gradient-text {
    background: linear-gradient(135deg, #EF8821 0%, #00d4ff 50%, #ffd700 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   FINAL OVERRIDE - Location section remove ALL black boxes
   ============================================ */
#location,
#location.map-section,
#location.section-alternate {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

#location * {
    background-color: transparent !important;
    background-image: none !important;
}

#location .section-title,
#location .section-title h2,
#location .section-title p,
#location .section-title span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Override section-backgrounds.css dark-luxury-card */
#location .dark-luxury-card,
#location .location-map-card,
#location .location-details-card {
    background: rgba(15, 28, 46, 0.2) !important;
    background-color: rgba(15, 28, 46, 0.2) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

#location iframe {
    background: transparent !important;
}

/* ============================================
   FINAL OVERRIDES - Force Golden Borders & White Button Hovers
   These must be at the END of file to override everything
   ============================================ */

/* FORCE golden borders on ALL cards */
.service-card-modern,
.services-modern .service-card-modern,
#services .service-card-modern,
.service-detail-card,
#accounting.service-detail-card,
#tax.service-detail-card,
#audit.service-detail-card,
#aml.service-detail-card,
#trade.service-detail-card,
.trust-item {
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.3) !important;
    border-radius: 20px !important;
}

/* FORCE white button hover - MOST SPECIFIC SELECTORS */
a.btn-primary:hover,
.btn-primary:hover,
.explore-now-btn:hover,
.explore-all-btn:hover,
a.explore-all-btn:hover,
a.explore-now-btn:hover,
.service-card-modern .explore-now-btn:hover,
.service-detail-card .btn-primary:hover,
a.service-detail-card .btn-primary:hover,
.enquire-link:hover,
a.enquire-link:hover,
.service-card-modern .enquire-link:hover,
a.btn-primary.explore-all-btn:hover,
a.btn-primary.explore-now-btn:hover,
.enquire-now-btn:hover,
a.enquire-now-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

/* FORCE black icons on button hover */
a.btn-primary:hover i,
.btn-primary:hover i,
.explore-now-btn:hover i,
.explore-all-btn:hover i,
a.explore-all-btn:hover i,
a.explore-now-btn:hover i,
.service-card-modern .explore-now-btn:hover i,
.service-detail-card .btn-primary:hover i,
a.service-detail-card .btn-primary:hover i,
.enquire-link:hover i,
a.enquire-link:hover i,
.service-card-modern .enquire-link:hover i,
a.btn-primary.explore-all-btn:hover i,
a.btn-primary.explore-now-btn:hover i,
.enquire-now-btn:hover i,
a.enquire-now-btn:hover i {
    color: #000 !important;
}

/* Default button states */
a.btn-primary.explore-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.2);
    transition: all 0.3s ease;
}

a.btn-primary.explore-all-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

a.btn-primary.explore-all-btn:hover i {
    color: #000 !important;
}

/* Enquire Now button styling to match Explore Now */
a.btn-primary.enquire-now-btn,
.enquire-now-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: var(--primary-color) !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    transition: all 0.3s ease !important;
}

a.btn-primary.enquire-now-btn:hover,
.enquire-now-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

a.btn-primary.enquire-now-btn:hover i,
.enquire-now-btn:hover i {
    color: #000 !important;
}

/* Explore All Services - match Explore Now exactly */
a.btn-primary.explore-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: var(--primary-color) !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    transition: all 0.3s ease !important;
}

a.btn-primary.explore-all-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

a.btn-primary.explore-all-btn i {
    color: white !important;
}

a.btn-primary.explore-all-btn:hover i {
    color: #000 !important;
}

/* ============================================
   MOBILE RESPONSIVENESS FIXES - Ensure proper spacing and containment
   ============================================ */

@media (max-width: 768px) {
    .container {
        padding: 0 20px !important;
        max-width: 100% !important;
    }

    section {
        padding: 40px 0 !important;
        overflow: visible !important;
    }

    .service-detail-card {
        padding: 24px !important;
        margin: 0 0 20px 0 !important;
    }

    .trust-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    .trust-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px !important;
    }

    section {
        padding: 30px 0 !important;
    }
}

/* [REMOVED] Duplicate problematic blue widget rules */

/* 
 * DEEP MESMERIZING ENHANCEMENTS
 * Additional wow-factor animations for maximum impact
 */

/* ============================================
   HERO SECTION - MIND-BLOWING EFFECTS
   ============================================ */

/* Holographic text effect */
.hero-h1 .gradient-text {
    background: linear-gradient(135deg,
            #EF8821 0%,
            #ffd700 25%,
            #EF8821 50%,
            #ff6b35 75%,
            #EF8821 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographicShift 4s ease infinite;
    text-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
}

@keyframes holographicShift {

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

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

/* Glowing aura around hero */
.hero-split::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
            rgba(239, 136, 33, 0.15) 0%,
            transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulseAura 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes pulseAura {

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

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

/* Floating geometric shapes */
.hero-split::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(239, 136, 33, 0.03) 50%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(239, 136, 33, 0.03) 50%, transparent 52%);
    background-size: 60px 60px;
    animation: geometricFloat 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

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

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

/* Form fields with cyberpunk glow */
.lead-form input,
.lead-form select,
.lead-form textarea {
    position: relative;
    transition: all 0.3s ease;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    box-shadow:
        0 0 0 2px rgba(239, 136, 33, 0.3),
        0 0 20px rgba(239, 136, 33, 0.4),
        0 0 40px rgba(239, 136, 33, 0.2),
        inset 0 0 20px rgba(239, 136, 33, 0.1);
    border-color: #EF8821;
    animation: cyberpunkPulse 2s ease infinite;
}

@keyframes cyberpunkPulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(239, 136, 33, 0.3), 0 0 20px rgba(239, 136, 33, 0.4);
    }

    50% {
        box-shadow: 0 0 0 2px rgba(239, 136, 33, 0.5), 0 0 30px rgba(239, 136, 33, 0.6);
    }
}

/* Submit button with morphing effect */
.btn-submit {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.btn-submit::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;
}

.btn-submit:hover::before {
    width: 300px;
    height: 300px;
}

.btn-submit:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(239, 136, 33, 0.4);
}

/* Hero image with parallax layers */
.hero-image-box {
    position: relative;
    overflow: hidden;
}

.hero-image-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(239, 136, 33, 0.1) 50%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-image-box:hover::after {
    opacity: 1;
    animation: shimmerSweep 1.5s ease;
}

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

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

/* ============================================
   TRUST SIGNALS - COSMIC EFFECTS
   ============================================ */

/* Trust cards with cosmic glow */
.trust-item {
    position: relative;
    overflow: hidden;
}

.trust-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent,
            rgba(30, 58, 95, 0.1),
            transparent);
    animation: cosmicRotate 10s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trust-item:hover::before {
    opacity: 1;
}

@keyframes cosmicRotate {
    from {
        transform: rotate(0deg);
    }

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

/* Counter with digital glitch effect */
.trust-stat {
    position: relative;
}

.trust-stat::after {
    content: attr(data-value);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: glitchText 0.3s ease;
}

@keyframes glitchText {
    0% {
        opacity: 0;
        transform: translateX(-2px);
    }

    20% {
        opacity: 1;
        transform: translateX(2px);
    }

    40% {
        opacity: 0;
        transform: translateX(-2px);
    }

    60% {
        opacity: 1;
        transform: translateX(2px);
    }

    80% {
        opacity: 0;
        transform: translateX(-1px);
    }

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

/* Icon with particle emission - DISABLED to show actual icons */
.trust-icon i {
    position: relative;
    z-index: 2;
}

/* DISABLE pseudo-elements that hide icons */
.trust-icon i::after {
    display: none !important;
    content: none !important;
}

/* Ensure Font Awesome icons render inside trust signals */
.trust-icon i::before {
    display: inline-block !important;
}

@keyframes particleRing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================
   SERVICES GRID - QUANTUM EFFECTS
   ============================================ */

/* Service cards with quantum entanglement effect */
.service-card-modern {
    position: relative;
    overflow: hidden;
}

.service-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(239, 136, 33, 0.2),
            transparent);
    transition: left 0.5s ease;
}

.service-card-modern:hover::before {
    left: 100%;
}

/* Icon with morphing effect */
.service-card-modern i {
    transition: all 0.5s ease;
}

.service-card-modern:hover i {
    animation: iconMorph 1s ease;
}

@keyframes iconMorph {

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

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

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

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

/* Button with liquid fill effect - DISABLED for explore-now-btn to allow white hover */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700,
            #EF8821);
    transition: height 0.4s ease;
}

/* DISABLE liquid fill for explore-now-btn to allow white hover */
.service-card-modern .explore-now-btn::after,
.explore-now-btn::after,
.service-detail-card .btn-primary::after,
.btn-primary::after {
    display: none !important;
}

.btn-primary:hover::after {
    height: 0 !important;
}

/* DISABLE for explore-now-btn hover */
.service-card-modern .explore-now-btn:hover::after,
.explore-now-btn:hover::after,
.service-detail-card .btn-primary:hover::after,
.btn-primary:hover::after {
    height: 0 !important;
}

.btn-primary span {
    position: relative;
    z-index: 1;
}

/* ============================================
   FAQ SECTION - LIQUID METAL EFFECTS
   ============================================ */

/* FAQ items with liquid metal border */
.faq-item {
    position: relative;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9),
            rgba(240, 240, 240, 0.9));
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.faq-item:hover::before {
    transform: translateX(100%);
}

/* FAQ answer with smooth reveal */
.faq-answer {
    position: relative;
}

.faq-answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg,
            #EF8821,
            #ffd700);
    transition: height 0.5s ease;
}

.faq-item.active .faq-answer::before {
    height: 100%;
}

/* ============================================
   LOCATION/MAP - AURORA EFFECTS
   ============================================ */

/* Map with aurora border */
.map-section iframe {
    position: relative;
    border: 3px solid transparent;
    background: linear-gradient(#0f1c2e, #0f1c2e) padding-box,
        linear-gradient(135deg, #EF8821, #ffd700, #EF8821) border-box;
    animation: auroraBorder 3s linear infinite;
}

@keyframes auroraBorder {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* QR codes with scanning laser */
.qr-container img {
    position: relative;
    overflow: hidden;
}

.qr-container img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            #EF8821,
            transparent);
    animation: laserScan 2s linear infinite;
}

@keyframes laserScan {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Contact icons with ripple effect */
.map-section a[href^="tel:"] i,
.map-section a[href^="mailto:"] i {
    position: relative;
}

.map-section a[href^="tel:"] i::after,
.map-section a[href^="mailto:"] i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: iconRipple 1.5s ease infinite;
}

@keyframes iconRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ============================================
   SERVICES PAGE - FUTURISTIC EFFECTS
   ============================================ */

/* Hero services with particle rain */
.hero-services {
    position: relative;
    overflow: hidden;
}

.hero-services::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(180deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent);
    animation: particleRain 8s linear infinite;
}

@keyframes particleRain {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50%);
    }
}

/* Service detail cards with holographic effect */
.service-detail-card {
    position: relative;
    overflow: hidden;
}

.service-detail-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(239, 136, 33, 0.05) 50%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-detail-card:hover::before {
    opacity: 1;
    animation: holographicShift 2s ease infinite;
}

/* Quiz options with magnetic field */
.quiz-option {
    position: relative;
    overflow: hidden;
}

.quiz-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
            rgba(239, 136, 33, 0.3),
            transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.quiz-option:hover::after {
    width: 200px;
    height: 200px;
}

/* Quiz progress with neon glow */
#quizProgress {
    box-shadow:
        0 0 10px rgba(239, 136, 33, 0.5),
        0 0 20px rgba(239, 136, 33, 0.3),
        0 0 30px rgba(239, 136, 33, 0.1);
    animation: neonPulse 2s ease infinite;
}

@keyframes neonPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(239, 136, 33, 0.4);
    }
}

/* Consultant letter with typewriter cursor */
.letter-content p {
    position: relative;
}

.letter-content.typing p::after {
    content: '|';
    position: absolute;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ============================================
   FOOTER - NEON GLOW EFFECTS
   ============================================ */

/* Footer links with neon underline */
footer a {
    position: relative;
}

footer a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

footer a:hover::before {
    width: 100%;
}

/* Social icons with orbit effect */
footer a[href*="linkedin"],
footer a[href*="facebook"],
footer a[href*="instagram"] {
    position: relative;
}

footer a[href*="linkedin"]::after,
footer a[href*="facebook"]::after,
footer a[href*="instagram"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    border: 1px solid rgba(239, 136, 33, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitSpin 3s linear infinite;
}

@keyframes orbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================
   STICKY WIDGETS - PULSE EFFECTS
   ============================================ */

/* WhatsApp widget with pulse ring */
.sticky-widget.whatsapp {
    position: relative;
}

.sticky-widget.whatsapp::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: #25D366;
    border-radius: 50%;
    opacity: 0;
    animation: whatsappPulse 2s ease infinite;
}

@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Botim widget with pulse ring */
.sticky-widget.botim::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: #0088CC;
    border-radius: 50%;
    opacity: 0;
    animation: botimPulse 2s ease infinite;
}

@keyframes botimPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Phone widget with pulse ring */
.sticky-widget.phone::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    animation: phonePulse 2s ease infinite;
}

@keyframes phonePulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   GLOBAL - SCROLL EFFECTS
   ============================================ */

/* Scroll progress with gradient */
.scroll-progress-bar {
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700,
            #EF8821);
    background-size: 200% 100%;
    animation: gradientScroll 3s linear infinite;
}

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

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

/* Mesh background with morphing */
.mesh-bg {
    animation: meshMorph 20s ease infinite;
}

@keyframes meshMorph {

    0%,
    100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }

    50% {
        background-position: 100% 50%;
        filter: hue-rotate(30deg);
    }
}

/* Gradient orbs with color shift */
.gradient-orb {
    animation: orbColorShift 10s ease infinite;
}

.orb-1 {
    animation-delay: 0s;
}

.orb-2 {
    animation-delay: 3s;
}

.orb-3 {
    animation-delay: 6s;
}

@keyframes orbColorShift {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(60deg);
    }
}

/* Particles with glow effect */
.particle {
    box-shadow: 0 0 6px rgba(239, 136, 33, 0.5);
}

/* ============================================
   NAVIGATION - HOVER EFFECTS
   ============================================ */

/* Nav links with underline reveal */
.main-nav a {
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Logo with glow effect */
.logo:hover .logo-img {
    filter: drop-shadow(0 0 10px rgba(239, 136, 33, 0.5));
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* ============================================
   EXPERTISE SECTION - CARD EFFECTS
   ============================================ */

/* Expertise cards with glass morphism */
.expertise-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
}

.expertise-card:hover {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(239, 136, 33, 0.3);
}

/* Expertise icons with rotation */
.expertise-icon i {
    transition: transform 0.5s ease;
}

.expertise-card:hover .expertise-icon i {
    transform: rotate(360deg) scale(1.2);
}

/* ============================================
   TRUSTED PARTNER - CERTIFICATION EFFECTS
   ============================================ */

/* Certification badges with glow */
.trusted-partner-section i {
    position: relative;
}

.trusted-partner-section i::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s ease;
}

.trusted-partner-section i:hover::after {
    opacity: 0.3;
    animation: badgeGlow 1s ease infinite;
}

@keyframes badgeGlow {

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

    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Simplify animations on mobile */
    .hero-split::before,
    .hero-split::after,
    .trust-item::before,
    .service-card-modern::before,
    .expertise-card::before,
    .map-section iframe::before,
    .hero-services::before,
    .service-detail-card::before,
    .quiz-option::after,
    .sticky-widget::before {
        display: none;
    }

    /* Disable complex animations */
    .holographicShift,
    .pulseAura,
    .geometricFloat,
    .cyberpunkPulse,
    .cosmicRotate,
    .glitchText,
    .particleRing,
    .iconMorph,
    .liquidFill,
    .auroraBorder,
    .laserScan,
    .iconRipple,
    .particleRain,
    .holographicShift,
    .magneticField,
    .neonPulse,
    .cursorBlink,
    .orbitSpin,
    .whatsappPulse,
    .botimPulse,
    .phonePulse,
    .gradientScroll,
    .meshMorph,
    .orbColorShift,
    .badgeGlow {
        animation: none;
    }
}

/* 
 * MESMERIZING ANIMATION ENHANCEMENTS
 * Deep analysis implementation for wow-factor animations
 */

/* ============================================
   HERO SECTION ENHANCEMENTS
   ============================================ */

/* Text reveal animation */
.hero-text-col h1 {
    overflow: hidden;
}

.hero-text-col h1 .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    animation: charReveal 0.8s ease forwards;
}

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

/* Typing effect for subtext */
.hero-subtext.typing {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typing 3s steps(50, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color)
    }
}

/* Hero image parallax */
.hero-image-box img {
    transition: transform 0.5s ease;
}

.hero-image-box:hover img {
    transform: scale(1.05) rotate(1deg);
}

/* Floating icons around hero */
.hero-text-col::before,
.hero-text-col::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    opacity: 0.1;
    border-radius: 50%;
    animation: floatIcon 6s ease-in-out infinite;
}

.hero-text-col::before {
    top: 10%;
    left: -30px;
    animation-delay: 0s;
}

.hero-text-col::after {
    bottom: 20%;
    right: -20px;
    animation-delay: 3s;
}

@keyframes floatIcon {

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

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

/* Form field focus glow */
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.3);
    border-color: var(--primary-color);
}

/* Magnetic button effect */
.btn-submit.magnetic {
    transition: transform 0.3s ease;
}

/* Checklist items stagger animation */
.hero-checklist li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRight 0.5s ease forwards;
}

.hero-checklist li:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-checklist li:nth-child(2) {
    animation-delay: 0.2s;
}

.hero-checklist li:nth-child(3) {
    animation-delay: 0.3s;
}

.hero-checklist li:nth-child(4) {
    animation-delay: 0.4s;
}

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

/* ============================================
   TRUST SIGNALS ENHANCEMENTS
   ============================================ */

/* Counter animation */
.trust-stat {
    font-variant-numeric: tabular-nums;
}

.trust-item.animate-count .trust-stat {
    animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

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

/* DISABLED - Icon pulse glow hiding actual icons */
/*
.trust-icon {
    position: relative;
}

.trust-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: pulseGlow 2s ease-in-out infinite;
}
*/

/* DISABLED - Trust icons should show actual Font Awesome icons */
.trust-icon {
    position: relative;
    z-index: 1;
}

.trust-icon i {
    position: relative;
    z-index: 2;
    font-size: 32px;
    color: rgba(239, 136, 33, 0.9);
}

/* Make sure icons are visible */
.trust-icon::after,
.trust-icon::before {
    display: none !important;
    content: none !important;
}

@keyframes pulseGlow {

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

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.2;
    }
}

/* 3D tilt effect on hover */
.trust-item {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-10px) rotateX(5deg);
}

/* Progress circle around stats */
.trust-item::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trust-item:hover::before {
    opacity: 0.3;
    animation: rotateCircle 3s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* ============================================
   TRUSTED PARTNER SECTION
   ============================================ */

/* Certification badges float */
.trusted-partner-section .section-title+div>div>div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trusted-partner-section .section-title+div>div>div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.2);
}

/* Icon glow on hover */
.trusted-partner-section i {
    transition: color 0.3s ease, transform 0.3s ease;
}

.trusted-partner-section i:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

/* ============================================
   EXPERTISE SECTION ENHANCEMENTS
   ============================================ */

/* Icon animation on hover */
.expertise-card:hover .expertise-icon i {
    animation: iconBounce 0.5s ease;
}

@keyframes iconBounce {

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

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

/* Glass morphism effect */
.expertise-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}

/* Hover glow border */
.expertise-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--primary-color), transparent, var(--primary-color));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.expertise-card:hover::before {
    opacity: 1;
    animation: borderGlow 2s linear infinite;
}

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

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

/* ============================================
   SERVICES GRID ENHANCEMENTS
   ============================================ */

/* 3D tilt on hover */
.service-card-modern {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease;
}

.service-card-modern:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
}

/* Icon particle emission */
.service-card-modern:hover i {
    animation: emitParticles 1s ease infinite;
}

@keyframes emitParticles {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(239, 136, 33, 0);
    }

    50% {
        text-shadow:
            0 0 10px rgba(239, 136, 33, 0.5),
            0 0 20px rgba(239, 136, 33, 0.3),
            0 0 30px rgba(239, 136, 33, 0.1);
    }
}

/* Card lift with shadow expansion */
.service-card-modern:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(239, 136, 33, 0.1);
}

/* Staggered entrance from different directions */
.service-card-modern:nth-child(1) {
    animation: slideInLeft 0.6s ease forwards;
}

.service-card-modern:nth-child(2) {
    animation: fadeInUp 0.6s ease forwards;
}

.service-card-modern:nth-child(3) {
    animation: fadeInUp 0.6s ease forwards 0.1s;
}

.service-card-modern:nth-child(4) {
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

.service-card-modern:nth-child(5) {
    animation: slideInRight 0.6s ease forwards;
}

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

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

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

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

/* ============================================
   FAQ SECTION ENHANCEMENTS
   ============================================ */

/* Smooth accordion expansion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s ease,
        opacity 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
}

/* Icon rotation on expand */
.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Glow effect on active FAQ */
.faq-item.active {
    box-shadow: 0 0 30px rgba(239, 136, 33, 0.2);
    border-color: var(--primary-color);
}

/* Background gradient shift on hover */
.faq-item {
    transition: background 0.3s ease;
}

.faq-item:hover {
    background: linear-gradient(135deg, rgba(239, 136, 33, 0.05), transparent);
}

/* ============================================
   LOCATION/MAP SECTION ENHANCEMENTS
   ============================================ */

/* Interactive map pulse */
.map-section iframe {
    position: relative;
}

.map-section iframe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes mapPulse {

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

    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* QR code scanning animation */
.qr-container img {
    position: relative;
    overflow: hidden;
}

.qr-container img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(239, 136, 33, 0.3), transparent);
    animation: scanQR 3s linear infinite;
}

@keyframes scanQR {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Contact icons glow */
.map-section a[href^="tel:"] i,
.map-section a[href^="mailto:"] i {
    transition: color 0.3s ease, transform 0.3s ease;
}

.map-section a[href^="tel:"]:hover i,
.map-section a[href^="mailto:"]:hover i {
    color: var(--primary-color);
    transform: scale(1.2);
}

/* ============================================
   SERVICES PAGE ENHANCEMENTS
   ============================================ */

/* Hero services text reveal */
.hero-services h1 {
    overflow: hidden;
}

.hero-services h1 span {
    display: inline-block;
    animation: slideInUp 0.8s ease forwards;
}

/* Service detail cards 3D tilt */
.service-detail-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease;
}

.service-detail-card:hover {
    transform: translateY(-10px) rotateX(5deg);
}

/* Icon glow on hover */
.service-detail-card:hover .icon {
    animation: iconGlow 1s ease infinite;
}

@keyframes iconGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(239, 136, 33, 0);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
    }
}

/* Features tags glow */
.service-features span {
    transition: all 0.3s ease;
}

.service-features span:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Quiz options magnetic attraction */
.quiz-option {
    transition: all 0.3s ease;
}

.quiz-option:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Progress bar glow */
#quizProgress {
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

/* Result celebration */
.quiz-result.show {
    animation: celebrate 0.5s ease;
}

@keyframes celebrate {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

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

/* Consultant letter typewriter effect */
.letter-content p {
    overflow: hidden;
}

.letter-content.typing p {
    border-right: 2px solid var(--primary-color);
    animation: typing 4s steps(80, end), blink 0.75s step-end infinite;
}

/* Floating quote icon */
.letter-content i {
    animation: floatQuote 4s ease-in-out infinite;
}

@keyframes floatQuote {

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

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

/* ============================================
   FOOTER ENHANCEMENTS
   ============================================ */

/* Social icons hover animation */
footer a[href*="linkedin"]:hover i,
footer a[href*="facebook"]:hover i,
footer a[href*="instagram"]:hover i {
    animation: socialBounce 0.5s ease;
}

@keyframes socialBounce {

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

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

/* Links underline reveal */
footer a {
    position: relative;
}

footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

footer a:hover::after {
    width: 100%;
}

/* ============================================
   STICKY WIDGETS ENHANCEMENTS
   ============================================ */

/* Enhanced pulse */
.sticky-widget {
    position: relative;
}

.sticky-widget::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: widgetPulse 2s ease-in-out infinite;
}

.sticky-widget.whatsapp::after {
    background: #25D366;
}

.sticky-widget.botim::after {
    background: #0088CC;
}

.sticky-widget.phone::after {
    background: var(--primary-color);
}

@keyframes widgetPulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
}

/* Notification badge */
.sticky-widget .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    animation: badgePop 0.5s ease;
}

@keyframes badgePop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

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

/* ============================================
   GLOBAL ENHANCEMENTS
   ============================================ */

/* Scroll progress bar glow */
.scroll-progress-bar {
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

/* Enhanced mesh background */
.mesh-bg {
    opacity: 0.5;
    animation: meshFlow 20s linear infinite;
}

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

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

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

/* Enhanced gradient orbs */
.gradient-orb {
    animation: orbFloat 15s ease-in-out infinite;
}

.orb-1 {
    animation-delay: 0s;
}

.orb-2 {
    animation-delay: 5s;
}

.orb-3 {
    animation-delay: 10s;
}

@keyframes orbFloat {

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

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

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

    75% {
        transform: translate(-50px, -20px) scale(1.05);
    }
}

/* Custom cursor trail */
.cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.3;
    transition: transform 0.1s ease;
    z-index: 9999;
}

/* Section entrance animations */
.section-entrance {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-entrance.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Magnetic cursor enhancement */
.magnetic-cursor::before {
    content: '';
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.1s ease, opacity 0.3s ease;
}

.magnetic-cursor:hover::before {
    opacity: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Disable complex animations on mobile */
    .hero-text-col::before,
    .hero-text-col::after,
    .trust-icon::after,
    .service-card-modern::before,
    .expertise-card::before {
        display: none;
    }

    /* Simplify animations */
    .char,
    .typing,
    .slideInLeft,
    .slideInRight,
    .fadeInUp {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   WOW FACTOR - MESMERIZING ANIMATIONS
   Ultra-premium visual effects for Max Business Solution
   ============================================ */

/* Particle Background System */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particles-container::before,
.particles-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40%;
    height: 160%;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform;
    opacity: 0.95;
    mix-blend-mode: normal;
    filter: saturate(1.35) brightness(1.15) contrast(1.15);
    background-image:
        radial-gradient(circle, rgba(239, 136, 33, 0.95) 0 3px, transparent 6px),
        radial-gradient(circle, rgba(0, 212, 255, 0.90) 0 3px, transparent 6px),
        radial-gradient(circle, rgba(255, 215, 0, 0.85) 0 3px, transparent 6px),
        radial-gradient(circle, rgba(255, 105, 180, 0.75) 0 3px, transparent 6px),
        radial-gradient(circle, rgba(239, 136, 33, 0.75) 0 2px, transparent 5px),
        radial-gradient(circle, rgba(0, 212, 255, 0.70) 0 2px, transparent 5px),
        radial-gradient(circle, rgba(255, 215, 0, 0.65) 0 2px, transparent 5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 2px, transparent 4px),
        radial-gradient(circle, rgba(239, 136, 33, 0.40) 0 5px, transparent 9px),
        radial-gradient(circle, rgba(0, 212, 255, 0.32) 0 5px, transparent 9px),
        radial-gradient(circle, rgba(255, 215, 0, 0.28) 0 5px, transparent 9px);
    background-size:
        18px 18px,
        20px 20px,
        22px 22px,
        24px 24px,
        16px 16px,
        18px 18px,
        20px 20px,
        14px 14px,
        30px 30px,
        34px 34px,
        38px 38px;
    background-position:
        3% 92%,
        12% 108%,
        22% 96%,
        32% 112%,
        44% 90%,
        56% 106%,
        66% 94%,
        76% 110%,
        86% 88%,
        94% 104%,
        98% 97%;
}

.particles-container::before {
    animation: mbsRainRiseA 11s linear infinite;
}

.particles-container::after {
    opacity: 0.6;
    transform: translate3d(0, 18%, 0);
    animation: mbsRainRiseB 15s linear infinite;
}

.particles-container::before {
    opacity: 1;
}

@keyframes mbsRainRiseA {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, -70%, 0);
    }
}

@keyframes mbsRainRiseB {
    0% {
        transform: translate3d(0, 18%, 0);
    }

    100% {
        transform: translate3d(0, -85%, 0);
    }
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(239, 136, 33, 0.85);
    border-radius: 50%;
    animation: float-particle 15s infinite ease-in-out;
    box-shadow: 0 0 12px rgba(239, 136, 33, 0.55), 0 0 24px rgba(239, 136, 33, 0.25);
}

.particle:nth-child(2n) {
    background: rgba(0, 212, 255, 0.85);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.9), 0 0 40px rgba(0, 212, 255, 0.5);
    animation-duration: 20s;
    animation-delay: -5s;
}

.particle:nth-child(3n) {
    background: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.5);
    animation-duration: 25s;
    animation-delay: -10s;
}

.particle:nth-child(4n) {
    width: 8px;
    height: 8px;
    animation-duration: 18s;
    animation-delay: -15s;
}

@keyframes float-particle {

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Animated Gradient Mesh Background */
.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(239, 136, 33, 0.35), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 212, 255, 0.25), transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 107, 53, 0.2), transparent 50%),
        linear-gradient(180deg, #0a0e17 0%, #0f1419 50%, #0a0e17 100%);
    animation: meshShift 20s ease-in-out infinite;
}

@keyframes meshShift {

    0%,
    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        background-position: 25% 25%, 75% 75%, 25% 75%;
        filter: hue-rotate(10deg) brightness(1.05);
    }

    50% {
        background-position: 50% 50%, 50% 50%, 75% 25%;
        filter: hue-rotate(20deg) brightness(1.1);
    }

    75% {
        background-position: 75% 75%, 25% 25%, 100% 50%;
        filter: hue-rotate(10deg) brightness(1.05);
    }
}

/* Floating Gradient Orbs */
.gradient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(239, 136, 33, 0.7) 0%, transparent 70%);
    top: 10%;
    left: -10%;
    animation: orbFloat1 15s ease-in-out infinite;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.6) 0%, transparent 70%);
    top: 60%;
    right: -5%;
    animation: orbFloat2 18s ease-in-out infinite;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.55) 0%, transparent 70%);
    bottom: 20%;
    left: 30%;
    animation: orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {

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

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

@keyframes orbFloat2 {

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

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

@keyframes orbFloat3 {

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

    50% {
        transform: translate(40px, -40px) scale(1.05);
    }
}

/* 3D Card Tilt Effects */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

.tilt-card-inner {
    transform: translateZ(20px);
}

/* Glowing Border Effect */
.glow-border {
    position: relative;
    overflow: hidden;
}

.glow-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #EF8821, #ffd700);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: inherit;
    animation: glowRotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.glow-border:hover::before {
    opacity: 1;
}

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

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

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

/* Scroll Reveal Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Animation Aliases - Alternative Naming Convention */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-slide-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-slide-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-fade-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.animate-scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-scale-in.revealed {
    opacity: 1;
    transform: scale(1);
}

.animate-bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-bounce-in.revealed {
    opacity: 1;
    transform: scale(1);
}

.spiral-entrance {
    opacity: 0;
    transform: rotate(-720deg) scale(0);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.spiral-entrance.revealed {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Section Gradient Borders - Similar to Tailored Solutions */
.gradient-border-section {
    position: relative;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(var(--section-bg), var(--section-bg)) padding-box,
        linear-gradient(135deg, #EF8821, #00d4ff, #ffd700, #EF8821) border-box;
    animation: borderGlow 8s ease-in-out infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        filter: brightness(1) saturate(1);
    }

    50% {
        filter: brightness(1.2) saturate(1.3);
    }
}

/* Stagger Animation Delays */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

/* Text Shimmer Effect */
.shimmer-text {
    background: linear-gradient(90deg,
            #EF8821 0%,
            #ffd700 25%,
            #00d4ff 50%,
            #ffd700 75%,
            #EF8821 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

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

/* Neon Glow Effect */
.neon-glow {
    text-shadow:
        0 0 5px rgba(239, 136, 33, 0.8),
        0 0 10px rgba(239, 136, 33, 0.6),
        0 0 20px rgba(239, 136, 33, 0.4),
        0 0 40px rgba(239, 136, 33, 0.2);
}

.neon-glow-blue {
    text-shadow:
        0 0 5px rgba(0, 212, 255, 0.8),
        0 0 10px rgba(0, 212, 255, 0.6),
        0 0 20px rgba(0, 212, 255, 0.4),
        0 0 40px rgba(0, 212, 255, 0.2);
}

/* Pulsing Glow Button */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(239, 136, 33, 0.8), 0 0 60px rgba(239, 136, 33, 0.4);
    }
}

/* Magnetic Button Effect */
.magnetic-btn {
    transition: transform 0.2s ease;
}

/* Parallax Scroll Effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Floating Animation */
.float {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

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

    50% {
        transform: translateY(-20px);
    }
}

.float-delayed {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.float-delayed-2 {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 1s;
}

/* Rotate Animation */
.rotate-slow {
    animation: rotate360 20s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

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

/* Bounce Animation */
.bounce {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

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

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

/* Wave Animation */
.wave {
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {

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

    25% {
        transform: rotate(-5deg);
    }

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

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #EF8821 0%, #00d4ff 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Morphism */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 136, 33, 0.3);
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Cursor */
.custom-cursor {
    cursor: none;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background-color: #EF8821;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 2px solid #EF8821;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.15s ease-out;
}

/* Card Hover Lift Effect */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(239, 136, 33, 0.2);
}

/* Line Reveal Animation */
.line-reveal {
    position: relative;
    overflow: hidden;
}

.line-reveal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s ease;
}

.line-reveal:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Loading Animation */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(239, 136, 33, 0.3);
    border-top-color: #EF8821;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Morphing Blob */
.morph-blob {
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* Grid Pattern Overlay */
.grid-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(239, 136, 33, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 136, 33, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 1;
}

/* Particle Connection Lines */
.particle-connections {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Dark Section Enhancement */
.section-dark {
    background: linear-gradient(135deg, #0a0e17 0%, #0f1419 100%);
    position: relative;
    overflow: hidden;
}

.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(239, 136, 33, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Hover Glow Effect */
.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
}

/* Text Reveal on Scroll */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.text-reveal.revealed span {
    transform: translateY(0);
}

/* Interactive Underline */
.interactive-underline {
    position: relative;
    display: inline-block;
}

.interactive-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.interactive-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Confetti Effect Container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* Smooth Section Transitions */
section {
    position: relative;
    z-index: 2;
}

/* Animated Background Stripes */
.animated-stripes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(239, 136, 33, 0.03) 10px,
            rgba(239, 136, 33, 0.03) 20px);
    animation: stripeMove 20s linear infinite;
    pointer-events: none;
}

/* Sections inherit body dark – overridden by dark-luxury-override.css for single canvas */

/* Override inline white backgrounds on elements */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #f8f9fc"],
[style*="background: #eee"],
[style*="background-color: #f8"],
[style*="background: linear-gradient(135deg, #f8f9fc"],
[style*="background: linear-gradient(135deg, #ffffff"],
[style*="background: linear-gradient(135deg, #fff"] {
    background: transparent !important;
    background-color: rgba(10, 14, 23, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Fix white boxes with glass morphism */
div[style*="background: white"]:not(.hero-content),
div[style*="background-color: white"]:not(.hero-content),
div[style*="background: #fff"]:not(.hero-content) {
    background: rgba(15, 20, 30, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Fix text colors on dark backgrounds */
[style*="color: var(--secondary-color)"] {
    color: #ffffff !important;
}

[style*="color: var(--text-muted)"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure all text is readable */
section h2,
section h3,
section h4,
section p {
    color: #ffffff !important;
}

section p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix borders */
[style*="border-top: 1px solid #ddd"],
[style*="border-bottom: 1px solid #ddd"] {
    border-color: rgba(239, 136, 33, 0.3) !important;
}

/* Fix QR code containers */
[style*="border: 8px solid white"] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fix map section background */
[style*="background: #eee"] {
    background: rgba(10, 14, 23, 0.5) !important;
}

/* Service cards dark enhancement */
.service-card-modern,
.expertise-card,
.faq-item {
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
}

/* FAQ items dark */
.faq-question {
    background: rgba(15, 20, 30, 0.8) !important;
    color: #ffffff !important;
}

.faq-answer {
    background: rgba(10, 14, 23, 0.9) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Trust items dark */
.trust-item {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
}

/* Form containers dark */
.lead-form-container,
.contact-form-container {
    background: rgba(15, 20, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
}

/* AGGRESSIVE OVERRIDES - Force all sections to dark */
body section,
body .section-alternate,
body [class*="section"],
main section,
#main-content section {
    background-color: transparent !important;
}

/* Only remove background images if they contain white/light colors */
[style*="background-image"][style*="#fff"],
[style*="background-image"][style*="#ffffff"],
[style*="background-image"][style*="#f8f9fc"],
[style*="background-image"][style*="#eee"] {
    background-image: none !important;
}

/* Preserve hero background images */
.hero-split,
.hero-section,
.hero,
[class*="hero"] {
    background-image: inherit !important;
}

/* Override all inline white/light backgrounds - but NOT on hero */
*:not(.hero-split):not([class*="hero"])[style*="background: white"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: white"],
*:not(.hero-split):not([class*="hero"])[style*="background: #fff"],
*:not(.hero-split):not([class*="hero"])[style*="background: #ffffff"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #fff"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #ffffff"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f8f9fc"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #f8f9fc"],
*:not(.hero-split):not([class*="hero"])[style*="background: #eee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #eeeeee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f0f0f0"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #eee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #fafafa"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f5f5f5"] {
    background: rgba(15, 20, 30, 0.85) !important;
    background-color: rgba(15, 20, 30, 0.85) !important;
    background-image: none !important;
}

/* Force dark on all divs with white backgrounds */
body div[style*="white"],
body div[style*="#fff"],
body div[style*="#f8f9fc"],
body div[style*="#eeeeee"],
body div[style*="#f0f0f0"] {
    background: rgba(15, 20, 30, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
}

/* Override gradient backgrounds that go to white/light */
*[style*="linear-gradient"][style*="#ffffff"],
*[style*="linear-gradient"][style*="#fff"],
*[style*="linear-gradient"][style*="#f8f9fc"],
*[style*="linear-gradient"][style*="#eee"] {
    background: rgba(10, 14, 23, 0.7) !important;
    background-image: none !important;
}

/* Container backgrounds */
.container [style*="background"],
section .container [style*="white"],
section .container [style*="#fff"] {
    background: rgba(15, 20, 30, 0.8) !important;
}

/* Override box-shadow white cards */
[style*="box-shadow: 0 10px 40px rgba(0,0,0,0.05)"],
[style*="box-shadow: 0 10px 40px rgba(0,0,0,0.08)"],
[style*="box-shadow: 0 10px 30px rgba(0,0,0,0.1)"] {
    background: rgba(15, 20, 30, 0.85) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
}

/* ============================================
   ALWAYS-ON CONTINUOUS ANIMATIONS
   Mesmerizing effects that never stop
   ============================================ */

/* Continuous Float Animation - All Cards */
.service-card-modern,
.expertise-card,
.trust-item,
.faq-item,
.lead-form-container,
.professionals-cta,
.service-quiz {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(2n) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3n) {
    animation-delay: -2s;
}

.expertise-card:nth-child(2n) {
    animation-delay: -1.5s;
}

.trust-item:nth-child(2n) {
    animation-delay: -0.5s;
}

.trust-item:nth-child(3n) {
    animation-delay: -1s;
}

.faq-item:nth-child(2n) {
    animation-delay: -0.3s;
}

@keyframes subtleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

/* Continuous Pulsing Glow - All Primary Buttons */
.btn-primary,
.btn-submit,
.btn-gold,
.explore-now-btn {
    animation: pulseGlowContinuous 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes pulseGlowContinuous {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4), 0 0 40px rgba(239, 136, 33, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.6), 0 0 60px rgba(239, 136, 33, 0.3);
        transform: scale(1.02);
    }
}

/* Shimmer Effect on All Headings */
h1,
h2,
h3.section-title,
.hero-h1 {
    background: linear-gradient(90deg,
            #ffffff 0%,
            #EF8821 25%,
            #ffd700 50%,
            #EF8821 75%,
            #ffffff 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerContinuous 4s linear infinite;
}

@keyframes shimmerContinuous {
    0% {
        background-position: 200% center;
    }

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

/* Rotating Border Animation - Cards on Hover */
.service-card-modern::before,
.expertise-card::before,
.trust-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.service-card-modern:hover::before,
.expertise-card:hover::before,
.trust-item:hover::before {
    opacity: 1;
}

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

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

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

/* Icon Continuous Animations */
.expertise-icon i,
.trust-icon i,
.service-card-modern i {
    animation: iconPulse 4s ease-in-out infinite;
}

.expertise-icon i:nth-child(2n),
.trust-icon i:nth-child(2n) {
    animation-delay: -1s;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(0, 212, 255, 0.4);
    }
}

/* Continuous Rotation for Decorative Elements */
.rotate-slow {
    animation: rotate360 20s linear infinite;
}

.rotate-medium {
    animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

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

/* Breathing Effect - Subtle Scale Animation */
.breathing {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {

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

    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* Gradient Border Animation */
.gradient-border {
    position: relative;
}

.gradient-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientRotate 4s ease infinite;
}

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

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

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

/* Neon Flicker Effect */
.neon-flicker {
    animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        text-shadow:
            0 0 4px rgba(239, 136, 33, 0.8),
            0 0 11px rgba(239, 136, 33, 0.6),
            0 0 19px rgba(239, 136, 33, 0.4),
            0 0 40px rgba(239, 136, 33, 0.2);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

/* Sway Animation - Gentle Side to Side */
.sway {
    animation: sway 3s ease-in-out infinite;
}

@keyframes sway {

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

    25% {
        transform: translateX(-5px) rotate(-2deg);
    }

    75% {
        transform: translateX(5px) rotate(2deg);
    }
}

/* Magnetic Hover Effect Enhancement */
.magnetic-hover {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-hover:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Glitch Effect on Hover */
.glitch-hover:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Underline Slide Animation */
.slide-underline {
    position: relative;
    display: inline-block;
}

.slide-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.slide-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Ripple Effect on Click */
.ripple {
    position: relative;
    overflow: hidden;
}

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

.ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Scroll Progress Indicator - Always Visible */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #EF8821, #00d4ff, #ffd700);
    background-size: 200% 100%;
    z-index: 9999;
    animation: progressShimmer 2s linear infinite;
}

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

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

/* Card Lift with Shadow Animation */
.hover-lift-shadow {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift-shadow:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow:
        0 20px 40px rgba(239, 136, 33, 0.3),
        0 0 60px rgba(239, 136, 33, 0.1);
}

/* Text Wave Animation */
.text-wave span {
    display: inline-block;
    animation: textWave 2s ease-in-out infinite;
}

.text-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.text-wave span:nth-child(3) {
    animation-delay: 0.2s;
}

.text-wave span:nth-child(4) {
    animation-delay: 0.3s;
}

.text-wave span:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes textWave {

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

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

/* Ambient Glow - Subtle background pulsing */
.ambient-glow {
    animation: ambientGlow 5s ease-in-out infinite;
}

@keyframes ambientGlow {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.1);
    }

    50% {
        box-shadow: 0 0 50px rgba(239, 136, 33, 0.2), 0 0 80px rgba(0, 212, 255, 0.1);
    }
}

/* Infinite Marquee Scroll */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Apply always-on effects to key elements */
.section-title h2 {
    animation: shimmerContinuous 5s linear infinite;
}

.trust-stat {
    animation: breathing 3s ease-in-out infinite;
}

.service-card-modern i {
    animation: iconPulse 3s ease-in-out infinite;
}

.btn-primary,
.explore-now-btn {
    animation: pulseGlowContinuous 2.5s ease-in-out infinite;
}

.faq-question {
    animation: subtleFloat 5s ease-in-out infinite;
}

.expertise-card {
    animation: ambientGlow 4s ease-in-out infinite;
}

/* ============================================
   ALWAYS-ON CONTINUOUS ANIMATIONS
   No hover required - always visible
   ============================================ */

/* Continuous Floating Animation - All Cards */
.service-card-modern,
.expertise-card,
.trust-item,
.faq-item,
.lead-form-container {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -3s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -4s;
}

.expertise-card:nth-child(1) {
    animation-delay: -0.5s;
}

.expertise-card:nth-child(2) {
    animation-delay: -1.5s;
}

.expertise-card:nth-child(3) {
    animation-delay: -2.5s;
}

.trust-item:nth-child(1) {
    animation-delay: 0s;
}

.trust-item:nth-child(2) {
    animation-delay: -0.7s;
}

.trust-item:nth-child(3) {
    animation-delay: -1.4s;
}

.trust-item:nth-child(4) {
    animation-delay: -2.1s;
}

.faq-item:nth-child(1) {
    animation-delay: 0s;
}

.faq-item:nth-child(2) {
    animation-delay: -0.5s;
}

.faq-item:nth-child(3) {
    animation-delay: -1s;
}

.faq-item:nth-child(4) {
    animation-delay: -1.5s;
}

@keyframes subtleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

/* Shimmer Effect on All Headings */
h1,
h2,
h3.section-title {
    background: linear-gradient(90deg,
            #ffffff 0%,
            #EF8821 25%,
            #ffd700 50%,
            #EF8821 75%,
            #ffffff 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerContinuous 4s linear infinite;
}

@keyframes shimmerContinuous {
    0% {
        background-position: 200% center;
    }

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

/* Pulsing Glow - All Primary Buttons */
.btn-primary,
.btn-submit,
.btn-gold,
.explore-now-btn {
    animation: pulseGlowContinuous 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes pulseGlowContinuous {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4), 0 0 40px rgba(239, 136, 33, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.6), 0 0 60px rgba(239, 136, 33, 0.3);
        transform: scale(1.02);
    }
}

/* Rotating Border Animation - Cards */
.service-card-modern::before,
.expertise-card::before,
.trust-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.service-card-modern:hover::before,
.expertise-card:hover::before,
.trust-item:hover::before {
    opacity: 1;
}

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

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

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

/* Icon Continuous Pulse Animation */
.expertise-icon i,
.trust-icon i,
.service-card-modern i {
    animation: iconPulse 4s ease-in-out infinite;
}

.expertise-icon i:nth-child(2n),
.trust-icon i:nth-child(2n) {
    animation-delay: -1s;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(0, 212, 255, 0.4);
    }
}

/* Trust Stats Breathing Animation */
.trust-stat {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {

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

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

/* FAQ Items Gentle Sway */
.faq-question {
    animation: gentleSway 5s ease-in-out infinite;
}

.faq-item:nth-child(2n) .faq-question {
    animation-delay: -1s;
}

.faq-item:nth-child(3n) .faq-question {
    animation-delay: -2s;
}

@keyframes gentleSway {

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

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* Scroll Progress Bar Shimmer */
.scroll-progress-bar {
    animation: progressShimmer 2s linear infinite;
}

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

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

/* Grid Pattern Subtle Pulse */
.grid-pattern {
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.08;
    }
}

/* Sticky Widgets Continuous Animation */
.sticky-widget {
    animation: widgetBounce 4s ease-in-out infinite;
}

.sticky-widget:nth-child(2) {
    animation-delay: -1s;
}

.sticky-widget:nth-child(3) {
    animation-delay: -2s;
}

@keyframes widgetBounce {

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

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

/* 3D Card Tilt - All Service Cards */
.service-card-modern,
.expertise-card {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    perspective: 1000px;
}

.service-card-modern:hover,
.expertise-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.03);
}

/* Neon Pulse Border - Continuous */
.neon-pulse-border {
    position: relative;
}

.neon-pulse-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: neonPulse 3s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0.7;
}

@keyframes neonPulse {

    0%,
    100% {
        opacity: 0.5;
        filter: blur(8px);
    }

    50% {
        opacity: 0.8;
        filter: blur(12px);
    }
}

/* Holographic Effect */
.holographic {
    background: linear-gradient(135deg,
            rgba(239, 136, 33, 0.1) 0%,
            rgba(0, 212, 255, 0.1) 25%,
            rgba(255, 215, 0, 0.1) 50%,
            rgba(239, 136, 33, 0.1) 75%,
            rgba(0, 212, 255, 0.1) 100%);
    background-size: 400% 400%;
    animation: holographicShift 5s ease infinite;
}

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

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

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

/* Scanline Effect */
.scanlines {
    position: relative;
    overflow: hidden;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px);
    pointer-events: none;
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

/* Aurora Background Effect */
.aurora-bg {
    position: relative;
    overflow: hidden;
}

.aurora-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(239, 136, 33, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 215, 0, 0.2) 0%, transparent 50%);
    animation: auroraMove 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraMove {

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

    33% {
        transform: translate(5%, -5%) rotate(5deg);
    }

    66% {
        transform: translate(-5%, 5%) rotate(-5deg);
    }
}

/* Stardust Particles Effect */
.stardust {
    position: relative;
}

.stardust::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(239, 136, 33, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(0, 212, 255, 0.8), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(239, 136, 33, 0.6), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(0, 212, 255, 0.6), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: stardustTwinkle 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes stardustTwinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* Electric Border Effect */
.electric-border {
    position: relative;
}

.electric-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90deg, #EF8821, #00d4ff, #ffd700, #EF8821) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: electricPulse 2s linear infinite;
}

@keyframes electricPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Liquid Morphing Effect */
.liquid-morph {
    animation: liquidMorph 8s ease-in-out infinite;
}

@keyframes liquidMorph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
    }

    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

/* Infinity Loop Animation */
.infinity-loop {
    animation: infinityMove 3s linear infinite;
}

@keyframes infinityMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(100vw);
        opacity: 0;
    }
}

/* Heartbeat Pulse */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {

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

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

/* Elastic Bounce */
.elastic-bounce {
    animation: elasticBounce 2s ease-in-out infinite;
}

@keyframes elasticBounce {

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

    25% {
        transform: translateY(-20px) scale(1.1, 0.9);
    }

    50% {
        transform: translateY(0) scale(0.95, 1.05);
    }

    75% {
        transform: translateY(-10px) scale(1.05, 0.95);
    }
}

/* Flip Card Effect */
.flip-card {
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flip-card:hover {
    transform: rotateY(180deg);
}

/* Shake Animation */
.shake:hover {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Jello Effect */
.jello:hover {
    animation: jello 0.9s both;
}

@keyframes jello {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

/* Wobble Effect */
.wobble:hover {
    animation: wobble 1s ease-in-out;
}

@keyframes wobble {
    0% {
        transform: translateX(0%) rotate(0deg);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

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

/* Vibrate Effect */
.vibrate:hover {
    animation: vibrate 0.3s linear infinite;
}

@keyframes vibrate {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Apply advanced effects to elements */
.trust-item {
    animation: subtleFloat 5s ease-in-out infinite, ambientGlow 6s ease-in-out infinite;
}

.service-card-modern {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -3s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -4s;
}

.btn-primary,
.btn-submit {
    animation: pulseGlowContinuous 2.5s ease-in-out infinite, neonPulse 3s ease-in-out infinite;
}

.section-title h2 {
    animation: shimmerContinuous 4s linear infinite;
}

.faq-item {
    animation: subtleFloat 7s ease-in-out infinite;
}

.lead-form-container {
    animation: ambientGlow 5s ease-in-out infinite;
}

/* ============================================
   LAYERED PARALLAX SCROLL SYSTEM
   Tree-Branch Animation Philosophy
   Each section = different branch, same DNA
   ============================================ */

/* Scroll Container Setup */
html {
    scroll-behavior: smooth;
}

/* Hero Section - Split Convergence Effect */
.hero-split {
    position: relative;
    overflow: visible;
}

.hero-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

/* Hero Text Column - Moves LEFT on scroll up, CENTER on scroll down */
.hero-text-col {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    will-change: transform;
}

/* Hero Form Column - Moves RIGHT on scroll up, CENTER on scroll down */
.hero-form-col {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    will-change: transform;
}

/* Trust Signals - Expanding/Collapsing Cards */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    perspective: 1000px;
}

.trust-item {
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Each trust card has unique parallax speed */
.trust-item:nth-child(1) {
    --parallax-speed: 0.3;
}

.trust-item:nth-child(2) {
    --parallax-speed: 0.5;
}

.trust-item:nth-child(3) {
    --parallax-speed: 0.7;
}

/* Expertise Section - Fan-Out Cards */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.expertise-card {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    transform-style: preserve-3d;
}

/* Services Grid - Staggered Cascade */
.services-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.service-card-modern {
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

/* Each service card has unique depth layer */
.service-card-modern:nth-child(1) {
    --z-depth: 50px;
}

.service-card-modern:nth-child(2) {
    --z-depth: 100px;
}

.service-card-modern:nth-child(3) {
    --z-depth: 150px;
}

.service-card-modern:nth-child(4) {
    --z-depth: 100px;
}

.service-card-modern:nth-child(5) {
    --z-depth: 50px;
}

/* FAQ Section - Accordion with Depth */
.faq-accordion {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    position: relative;
    transition: all 0.3s ease;
    will-change: transform, opacity;
}

/* FAQ items spread vertically on scroll */
.faq-item:nth-child(odd) {
    transform-origin: left center;
}

.faq-item:nth-child(even) {
    transform-origin: right center;
}

/* Map Section - Converging Split */
.map-section .container>div[style*="display: grid"] {
    position: relative;
    perspective: 2000px;
}

.map-section .container>div[style*="display: grid"]>* {
    position: relative;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* ============================================
   SCROLL DIRECTION ANIMATIONS
   ============================================ */

/* When scrolling DOWN - Elements CONVERGE */
[data-scroll-direction="down"] .hero-text-col {
    animation: convergeLeft 0.8s ease forwards;
}

[data-scroll-direction="down"] .hero-form-col {
    animation: convergeRight 0.8s ease forwards;
}

[data-scroll-direction="down"] .trust-item {
    animation: trustConverge 0.6s ease forwards;
}

[data-scroll-direction="down"] .expertise-card {
    animation: expertiseConverge 0.7s ease forwards;
}

/* When scrolling UP - Elements DIVERGE */
[data-scroll-direction="up"] .hero-text-col {
    animation: divergeLeft 0.8s ease forwards;
}

[data-scroll-direction="up"] .hero-form-col {
    animation: divergeRight 0.8s ease forwards;
}

[data-scroll-direction="up"] .trust-item {
    animation: trustDiverge 0.6s ease forwards;
}

[data-scroll-direction="up"] .expertise-card {
    animation: expertiseDiverge 0.7s ease forwards;
}

@keyframes convergeLeft {
    from {
        transform: translateX(-50px) rotateY(5deg);
        opacity: 0.7;
    }

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

@keyframes convergeRight {
    from {
        transform: translateX(50px) rotateY(-5deg);
        opacity: 0.7;
    }

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

@keyframes divergeLeft {
    from {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: translateX(-80px) rotateY(8deg);
        opacity: 0.6;
    }
}

@keyframes divergeRight {
    from {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: translateX(80px) rotateY(-8deg);
        opacity: 0.6;
    }
}

@keyframes trustConverge {
    from {
        transform: scale(0.85) translateY(30px);
        opacity: 0.6;
    }

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

@keyframes trustDiverge {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    to {
        transform: scale(1.15) translateY(-40px);
        opacity: 0.5;
    }
}

@keyframes expertiseConverge {
    from {
        transform: translateZ(-100px) rotateX(10deg);
        opacity: 0.6;
    }

    to {
        transform: translateZ(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes expertiseDiverge {
    from {
        transform: translateZ(0) rotateX(0deg);
        opacity: 1;
    }

    to {
        transform: translateZ(200px) rotateX(-15deg);
        opacity: 0.5;
    }
}

/* ============================================
   SECTION-SPECIFIC PARALLAX SPEEDS
   Different speeds = different branch vibes
   ============================================ */

/* Hero - Slow majestic movement */
.hero-split {
    --parallax-speed: 0.2;
}

/* Trust - Medium bounce */
.trust-signals {
    --parallax-speed: 0.4;
}

/* Expertise - Fast snappy */
.expertise-section {
    --parallax-speed: 0.6;
}

/* Services - Variable speeds per card */
.services-modern {
    --parallax-speed: 0.5;
}

/* FAQ - Smooth liquid */
.faq-section {
    --parallax-speed: 0.3;
}

/* Map - Steady convergence */
.map-section {
    --parallax-speed: 0.45;
}

/* ============================================
   LAYER DEPTH SYSTEM
   Z-axis separation for 3D feel
   ============================================ */

.parallax-layer-1 {
    transform: translateZ(0);
}

.parallax-layer-2 {
    transform: translateZ(50px);
}

.parallax-layer-3 {
    transform: translateZ(100px);
}

.parallax-layer-4 {
    transform: translateZ(150px);
}

/* ============================================
   SCROLL PROGRESS INDICATORS
   Always-on visual feedback
   ============================================ */

.scroll-depth-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    z-index: 1000;
}

.scroll-depth-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #EF8821, #00d4ff);
    border-radius: 2px;
    transition: height 0.1s linear;
}

/* ============================================
   CONTINUOUS FLOATING ANIMATIONS
   Always-on regardless of scroll
   ============================================ */

/* Gentle ambient float for all cards */
.service-card-modern {
    animation: ambientFloat 8s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1.6s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -3.2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -4.8s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -6.4s;
}

@keyframes ambientFloat {

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

    25% {
        transform: translateY(-10px) rotate(0.5deg);
    }

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

    75% {
        transform: translateY(-15px) rotate(0.3deg);
    }
}

/* Trust items - Breathing effect */
.trust-item {
    animation: trustBreathe 6s ease-in-out infinite;
}

.trust-item:nth-child(1) {
    animation-delay: 0s;
}

.trust-item:nth-child(2) {
    animation-delay: -2s;
}

.trust-item:nth-child(3) {
    animation-delay: -4s;
}

@keyframes trustBreathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 20px 50px rgba(239, 136, 33, 0.2);
    }
}

/* Expertise cards - Subtle rotation */
.expertise-card {
    animation: expertiseGentleRotate 10s ease-in-out infinite;
}

.expertise-card:nth-child(1) {
    animation-delay: 0s;
}

.expertise-card:nth-child(2) {
    animation-delay: -3.3s;
}

.expertise-card:nth-child(3) {
    animation-delay: -6.6s;
}

@keyframes expertiseGentleRotate {

    0%,
    100% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    25% {
        transform: rotateY(3deg) rotateX(2deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    75% {
        transform: rotateY(-3deg) rotateX(-2deg);
    }
}

/* FAQ items - Liquid wave */
.faq-item {
    animation: faqWave 7s ease-in-out infinite;
}

.faq-item:nth-child(1) {
    animation-delay: 0s;
}

.faq-item:nth-child(2) {
    animation-delay: -1.4s;
}

.faq-item:nth-child(3) {
    animation-delay: -2.8s;
}

.faq-item:nth-child(4) {
    animation-delay: -4.2s;
}

.faq-item:nth-child(5) {
    animation-delay: -5.6s;
}

@keyframes faqWave {

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

    25% {
        transform: translateX(5px) skewX(0.5deg);
    }

    75% {
        transform: translateX(-5px) skewX(-0.5deg);
    }
}

/* Map container - Slow drift */
.map-section .container>div[style*="display: grid"] {
    animation: mapDrift 12s ease-in-out infinite;
}

@keyframes mapDrift {

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

    50% {
        transform: translateX(10px) scale(1.01);
    }
}

/* ============================================
   SCROLL-TRIGGERED REVEAL ANIMATIONS
   ============================================ */

.section-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children reveal */
.section-reveal.visible .trust-item:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .trust-item:nth-child(2) {
    transition-delay: 0.2s;
}

.section-reveal.visible .trust-item:nth-child(3) {
    transition-delay: 0.3s;
}

.section-reveal.visible .expertise-card:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .expertise-card:nth-child(2) {
    transition-delay: 0.25s;
}

.section-reveal.visible .expertise-card:nth-child(3) {
    transition-delay: 0.4s;
}

.section-reveal.visible .service-card-modern:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .service-card-modern:nth-child(2) {
    transition-delay: 0.2s;
}

.section-reveal.visible .service-card-modern:nth-child(3) {
    transition-delay: 0.3s;
}

.section-reveal.visible .service-card-modern:nth-child(4) {
    transition-delay: 0.4s;
}

.section-reveal.visible .service-card-modern:nth-child(5) {
    transition-delay: 0.5s;
}

/* ============================================
   RESPONSIVE PARALLAX ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Reduce parallax intensity on mobile */
    .hero-text-col,
    .hero-form-col {
        transition: transform 0.3s ease;
    }

    [data-scroll-direction="up"] .hero-text-col {
        animation: divergeLeftMobile 0.8s ease forwards;
    }

    [data-scroll-direction="up"] .hero-form-col {
        animation: divergeRightMobile 0.8s ease forwards;
    }

    @keyframes divergeLeftMobile {
        to {
            transform: translateX(-30px);
            opacity: 0.8;
        }
    }

    @keyframes divergeRightMobile {
        to {
            transform: translateX(30px);
            opacity: 0.8;
        }
    }

    /* Simplify trust grid */
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Reduce 3D effects */
    .expertise-card {
        animation: none;
    }

    .service-card-modern {
        animation: ambientFloat 10s ease-in-out infinite;
    }
}

/* ============================================
   PREFERS REDUCED MOTION
   Accessibility first
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .parallax-element {
        transform: none !important;
    }
}

/* ============================================
   SECTION-SPECIFIC UNIQUE BACKGROUNDS
   Each section has distinct visual identity
   ============================================ */

/* HERO - Keep with Burj Khalifa image */
.hero-split {
    background: linear-gradient(135deg, rgba(15, 28, 46, 0.92) 0%, rgba(30, 58, 95, 0.88) 100%),
        url('../assets/images/burj-khalifa-bg-wide-light.jpg') !important;
    background-size: cover !important;
    background-position: center 30% !important;
}

/* TRUST SIGNALS - Subtle gold shimmer always visible */
.trust-signals {
    background: linear-gradient(135deg, #0a0e17 0%, #0f1419 50%, #0a0e17 100%) !important;
    position: relative;
    overflow: hidden;
}

.trust-signals::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(239, 136, 33, 0.15) 50%,
            transparent 100%);
    animation: shimmer 4s infinite linear;
    z-index: 1;
}

.trust-signals .container {
    position: relative;
    z-index: 2;
}

@keyframes shimmer {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

/* TRUSTED PARTNER - Mesh gradient */
.trusted-partner-section {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(239, 136, 33, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        #0a0e17 !important;
}

/* EXPERTISE - Diagonal subtle pattern */
.expertise-section {
    background:
        linear-gradient(135deg, rgba(15, 20, 30, 0.97) 0%, rgba(20, 25, 35, 0.97) 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(239, 136, 33, 0.01) 10px,
            rgba(239, 136, 33, 0.01) 20px) !important;
}

/* SERVICES - Radial glow center */
.services-modern {
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 136, 33, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0, 212, 255, 0.05) 0%, transparent 40%),
        #0a0e17 !important;
}

/* FAQ - Clean minimal with accent line */
.faq-section {
    background: linear-gradient(180deg, #0a0e17 0%, #0c1018 50%, #0a0e17 100%) !important;
    position: relative;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
}

/* LOCATION - Transparent to show fixed orbs */
.map-section {
    background: transparent !important;
}

/* FOOTER - Deep black with subtle texture */
footer {
    background:
        linear-gradient(180deg, #050505 0%, #000000 100%) !important;
    border-top: 1px solid rgba(239, 136, 33, 0.1) !important;
}

/* SERVICES PAGE HERO - Palm Jumeirah theme */
.hero-services {
    background:
        linear-gradient(135deg, rgba(15, 28, 46, 0.95) 0%, rgba(30, 58, 95, 0.9) 100%),
        url('../assets/images/palm-jumeirah-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* SERVICE DETAIL CARDS - Glass morphism effect */
.service-detail-card {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
}

.service-detail-card:hover {
    background: rgba(20, 25, 35, 0.8) !important;
    border-color: rgba(239, 136, 33, 0.3) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* CONSULTANT LETTER - Transparent like homepage */
.consultant-letter {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 60px 0 !important;
}

.consultant-letter .letter-content {
    background: rgba(15, 28, 46, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* SERVICE QUIZ - Transparent like homepage sections */
.service-quiz {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* QUIZ OPTIONS - Interactive cards */
.quiz-option {
    background: rgba(15, 20, 30, 0.7) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.quiz-option:hover {
    background: rgba(25, 30, 40, 0.9) !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.02) !important;
}

/* EXPERTISE CARDS - Center highlight glow */
.expertise-card.center-highlight {
    background:
        linear-gradient(135deg, rgba(239, 136, 33, 0.15) 0%, rgba(239, 136, 33, 0.05) 100%) !important;
    border: 1px solid rgba(239, 136, 33, 0.3) !important;
    box-shadow:
        0 0 40px rgba(239, 136, 33, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* INDUSTRY CARDS - Subtle glow on hover */
.industry-card {
    background: rgba(15, 20, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

.industry-card:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 25, 35, 0.9) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* SERVICE CARDS MODERN - Clean with hover lift */
.service-card-modern {
    background: rgba(15, 20, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.service-card-modern:hover {
    background: rgba(20, 25, 35, 0.9) !important;
    border-color: rgba(239, 136, 33, 0.4) !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(239, 136, 33, 0.1) !important;
}

/* TRUST ITEMS - Subtle border */
.trust-item {
    background: rgba(15, 20, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.trust-item:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 25, 35, 0.7) !important;
}

/* LEAD FORM - Glass effect */
.lead-form-container {
    background: rgba(15, 20, 30, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 24px !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* FORM INPUTS - Dark theme */
.lead-form input,
.lead-form select,
.lead-form textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8e9ea !important;
    border-radius: 12px !important;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    border-color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.1) !important;
}

.lead-form input:focus,
.lead-form select:focus,
/* EXPLORE NOW Button - White hover with black text */
.service-card-modern .explore-now-btn:hover,
.service-card-modern .explore-now-btn:hover i,
.service-card-modern .explore-now-btn:hover span {
    background: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4) !important;
}

/* DARK LUXURY CARDS - Translucent glass effect */
.dark-luxury-card {
    background: rgba(15, 28, 46, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
}

.dark-luxury-card:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 35, 55, 0.35) !important;
}

/* PROFESSIONALS CTA - Gradient banner */
.professionals-cta {
    background:
        linear-gradient(135deg, rgba(239, 136, 33, 0.1) 0%, rgba(15, 20, 30, 0.9) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    text-align: center !important;
}

/* ============================================
   PROFESSIONAL MODAL SYSTEM - MBS Premium
   Glass morphism, smooth animations, financial-grade
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 100px rgba(239, 136, 33, 0.1);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.modal-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #1a2332 100%);
    padding: 40px;
    border-radius: 24px 24px 0 0;
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(239, 136, 33, 0.3) 0%, transparent 70%);
    animation: modalGlow 4s ease-in-out infinite;
}

@keyframes modalGlow {

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

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.modal-header h2 {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

/* Close Button */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.modal-close:hover {
    background: rgba(239, 136, 33, 0.9);
    transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
    padding: 40px;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #111a2b !important;
    color: #ffffff !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(239, 136, 33, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Submit Button */
.modal-submit {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.3);
}

.modal-submit i {
    transition: transform 0.3s ease;
}

.modal-submit:hover i {
    transform: translateX(5px);
}

/* Success Message */
.modal-success {
    text-align: center;
    padding: 40px;
}

.modal-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes successPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

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

.modal-success-icon i {
    font-size: 36px;
    color: white;
}

.modal-success h3 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.modal-success p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Service Selector in Modal */
.service-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.service-option {
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
}

.service-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.service-option.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(239, 136, 33, 0.1) 0%, rgba(239, 136, 33, 0.05) 100%);
}

.service-option i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.service-option span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color);
}

/* Trust Badges in Modal */
.modal-trust {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trust-badge i {
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        border-radius: 20px;
    }

    .modal-header {
        padding: 30px 24px;
    }

    .modal-header h2 {
        font-size: 1.4rem;
    }

    .modal-body {
        padding: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .service-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FLOATING CONTACT WIDGET - Premium Style
   ============================================ */
.floating-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.floating-main {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(239, 136, 33, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.floating-main:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(239, 136, 33, 0.5);
}

.floating-main.active {
    transform: rotate(45deg);
    background: var(--secondary-color);
}

/* Pulse Animation */
.floating-main::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: widgetPulse 2s ease-out infinite;
}

@keyframes widgetPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Floating Menu */
.floating-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-widget.active .floating-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.floating-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.floating-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.floating-item-icon.whatsapp {
    background: #25d366;
    color: white;
}

.floating-item-icon.phone {
    background: var(--primary-color);
    color: white;
}

.floating-item-icon.email {
    background: var(--secondary-color);
    color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .floating-widget {
        bottom: 20px;
        right: 20px;
    }

    .floating-main {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .floating-menu {
        right: -10px;
    }

    .floating-item {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

/* ============================================
   3D CARD TILT EFFECTS - Service Cards
   ============================================ */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease;
}

.tilt-card-inner {
    transform: translateZ(20px);
}

.tilt-card-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tilt-card:hover .tilt-card-glare {
    opacity: 1;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger Animation Delays */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

/* ============================================
   PROFESSIONAL ENQUIRY BUTTON
   ============================================ */
.enquiry-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.enquiry-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 136, 33, 0.4);
}

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

.enquiry-btn:hover i {
    transform: translateX(5px);
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   NOTIFICATION TOAST
   ============================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--secondary-color);
    color: white;
    padding: 16px 28px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.toast i {
    margin-right: 10px;
}

/* ============================================
   EMERGENCY FIX - Trust Icons Must Show
   ============================================ */

/* Fix trust signals icons visibility */
.trust-icon {
    background: rgba(239, 136, 33, 0.2) !important;
    border: 2px solid rgba(239, 136, 33, 0.4) !important;
    color: var(--primary-color) !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 15px auto !important;
    font-size: 24px !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;

}

/* Remove any pseudo elements that hide icons */
.trust-icon::before,
.trust-icon::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* Trust item hover */
.trust-item:hover .trust-icon {
    background: rgba(239, 136, 33, 0.1) !important;
    border-color: var(--primary-color) !important;
}

/* Explore All Services - Clean hover */
a.btn-primary.explore-all-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

a.btn-primary.explore-all-btn:hover i {
    color: #000 !important;
    background: transparent !important;
}

/* Remove any after/before pseudo elements on buttons */
a.btn-primary.explore-all-btn::after,
a.btn-primary.explore-all-btn::before {
    display: none !important;
    content: none !important;
}

/* ============================================
   FINAL BUTTON OVERRIDES - MAXIMUM SPECIFICITY
   ============================================ */

/* ALL BUTTONS - Default state with visible enclosure */
.btn-primary,
a.btn-primary,
.explore-now-btn,
a.explore-now-btn,
.explore-all-btn,
a.explore-all-btn,
.enquire-now-btn,
a.enquire-now-btn,
.service-card-modern .explore-now-btn,
.service-detail-card .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 28px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    position: relative !important;
    overflow: visible !important;
}

/* ALL BUTTONS - Hover state with white background and black text */
.btn-primary:hover,
a.btn-primary:hover,
.explore-now-btn:hover,
a.explore-now-btn:hover,
.explore-all-btn:hover,
a.explore-all-btn:hover,
.enquire-now-btn:hover,
a.enquire-now-btn:hover,
.service-card-modern .explore-now-btn:hover,
.service-detail-card .btn-primary:hover,
a.btn-primary.explore-now-btn:hover,
a.btn-primary.explore-all-btn:hover,
a.btn-primary.enquire-now-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ALL BUTTON ICONS - Hover state with black color */
.btn-primary:hover i,
a.btn-primary:hover i,
.explore-now-btn:hover i,
a.explore-now-btn:hover i,
.explore-all-btn:hover i,
a.explore-all-btn:hover i,
.enquire-now-btn:hover i,
a.enquire-now-btn:hover i,
.service-card-modern .explore-now-btn:hover i,
.service-detail-card .btn-primary:hover i,
a.btn-primary.explore-now-btn:hover i,
a.btn-primary.explore-all-btn:hover i,
a.btn-primary.enquire-now-btn:hover i {
    color: #000 !important;
    background: transparent !important;
}

/* DISABLE all pseudo-elements on buttons that might interfere */
.btn-primary::after,
a.btn-primary::after,
.explore-now-btn::after,
a.explore-now-btn::after,
.explore-all-btn::after,
a.explore-all-btn::after,
.enquire-now-btn::after,
a.enquire-now-btn::after,
.service-card-modern .explore-now-btn::after,
.service-detail-card .btn-primary::after,
.btn-primary::before,
a.btn-primary::before,
.explore-now-btn::before,
a.explore-now-btn::before,
.explore-all-btn::before,
a.explore-all-btn::before,
.enquire-now-btn::before,
a.enquire-now-btn::before,
.service-card-modern .explore-now-btn::before,
.service-detail-card .btn-primary::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Ensure button text and icons stay visible */
.btn-primary span,
a.btn-primary span,
.explore-now-btn span,
a.explore-now-btn span,
.explore-all-btn span,
a.explore-all-btn span,
.enquire-now-btn span,
a.enquire-now-btn span {
    position: relative !important;
    z-index: 2 !important;
    color: inherit !important;
}

/* Button icons should not have background */
.btn-primary i,
a.btn-primary i,
.explore-now-btn i,
a.explore-now-btn i,
.explore-all-btn i,
a.explore-all-btn i,
.enquire-now-btn i,
a.enquire-now-btn i {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    margin: 0 0 0 8px !important;
    display: inline-block !important;
    color: inherit !important;
}

/* ============================================
   CONSOLIDATED SECONDARY STYLES
   ============================================ */

/* ============================================
   WOW FACTOR - MESMERIZING ANIMATIONS
   Ultra-premium visual effects for Max Business Solution
   ============================================ */

/* Particle Background System */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(239, 136, 33, 0.85);
    border-radius: 50%;
    animation: float-particle 15s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.9), 0 0 40px rgba(239, 136, 33, 0.5);
}

.particle:nth-child(2n) {
    background: rgba(0, 212, 255, 0.85);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.9), 0 0 40px rgba(0, 212, 255, 0.5);
    animation-duration: 20s;
    animation-delay: -5s;
}

.particle:nth-child(3n) {
    background: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.5);
    animation-duration: 25s;
    animation-delay: -10s;
}

.particle:nth-child(4n) {
    width: 8px;
    height: 8px;
    animation-duration: 18s;
    animation-delay: -15s;
}

@keyframes float-particle {

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Animated Gradient Mesh Background */
.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(239, 136, 33, 0.35), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 212, 255, 0.25), transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 107, 53, 0.2), transparent 50%),
        linear-gradient(180deg, #0a0e17 0%, #0f1419 50%, #0a0e17 100%);
    animation: meshShift 20s ease-in-out infinite;
}

@keyframes meshShift {

    0%,
    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        background-position: 25% 25%, 75% 75%, 25% 75%;
        filter: hue-rotate(10deg) brightness(1.05);
    }

    50% {
        background-position: 50% 50%, 50% 50%, 75% 25%;
        filter: hue-rotate(20deg) brightness(1.1);
    }

    75% {
        background-position: 75% 75%, 25% 25%, 100% 50%;
        filter: hue-rotate(10deg) brightness(1.05);
    }
}

/* Floating Gradient Orbs */
.gradient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(239, 136, 33, 0.7) 0%, transparent 70%);
    top: 10%;
    left: -10%;
    animation: orbFloat1 15s ease-in-out infinite;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.6) 0%, transparent 70%);
    top: 60%;
    right: -5%;
    animation: orbFloat2 18s ease-in-out infinite;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.55) 0%, transparent 70%);
    bottom: 20%;
    left: 30%;
    animation: orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {

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

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

@keyframes orbFloat2 {

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

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

@keyframes orbFloat3 {

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

    50% {
        transform: translate(40px, -40px) scale(1.05);
    }
}

/* 3D Card Tilt Effects */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

.tilt-card-inner {
    transform: translateZ(20px);
}

/* Glowing Border Effect */
.glow-border {
    position: relative;
    overflow: hidden;
}

.glow-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #EF8821, #ffd700);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: inherit;
    animation: glowRotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.glow-border:hover::before {
    opacity: 1;
}

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

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

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

/* Scroll Reveal Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Animation Aliases - Alternative Naming Convention */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-slide-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-slide-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-fade-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.animate-scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.animate-scale-in.revealed {
    opacity: 1;
    transform: scale(1);
}

.animate-bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-bounce-in.revealed {
    opacity: 1;
    transform: scale(1);
}

.spiral-entrance {
    opacity: 0;
    transform: rotate(-720deg) scale(0);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.spiral-entrance.revealed {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Section Gradient Borders - Similar to Tailored Solutions */
.gradient-border-section {
    position: relative;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(var(--section-bg), var(--section-bg)) padding-box,
        linear-gradient(135deg, #EF8821, #00d4ff, #ffd700, #EF8821) border-box;
    animation: borderGlow 8s ease-in-out infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        filter: brightness(1) saturate(1);
    }

    50% {
        filter: brightness(1.2) saturate(1.3);
    }
}

/* Stagger Animation Delays */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

/* Text Shimmer Effect */
.shimmer-text {
    background: linear-gradient(90deg,
            #EF8821 0%,
            #ffd700 25%,
            #00d4ff 50%,
            #ffd700 75%,
            #EF8821 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

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

/* Neon Glow Effect */
.neon-glow {
    text-shadow:
        0 0 5px rgba(239, 136, 33, 0.8),
        0 0 10px rgba(239, 136, 33, 0.6),
        0 0 20px rgba(239, 136, 33, 0.4),
        0 0 40px rgba(239, 136, 33, 0.2);
}

.neon-glow-blue {
    text-shadow:
        0 0 5px rgba(0, 212, 255, 0.8),
        0 0 10px rgba(0, 212, 255, 0.6),
        0 0 20px rgba(0, 212, 255, 0.4),
        0 0 40px rgba(0, 212, 255, 0.2);
}

/* Pulsing Glow Button */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(239, 136, 33, 0.8), 0 0 60px rgba(239, 136, 33, 0.4);
    }
}

/* Magnetic Button Effect */
.magnetic-btn {
    transition: transform 0.2s ease;
}

/* Parallax Scroll Effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Floating Animation */
.float {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

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

    50% {
        transform: translateY(-20px);
    }
}

.float-delayed {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.float-delayed-2 {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 1s;
}

/* Rotate Animation */
.rotate-slow {
    animation: rotate360 20s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

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

/* Bounce Animation */
.bounce {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

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

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

/* Wave Animation */
.wave {
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {

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

    25% {
        transform: rotate(-5deg);
    }

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

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #EF8821 0%, #00d4ff 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Morphism */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 136, 33, 0.3);
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Cursor */
.custom-cursor {
    cursor: none;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background-color: #EF8821;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 2px solid #EF8821;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.15s ease-out;
}

/* Card Hover Lift Effect */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(239, 136, 33, 0.2);
}

/* Line Reveal Animation */
.line-reveal {
    position: relative;
    overflow: hidden;
}

.line-reveal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s ease;
}

.line-reveal:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Loading Animation */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(239, 136, 33, 0.3);
    border-top-color: #EF8821;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Morphing Blob */
.morph-blob {
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* Grid Pattern Overlay */
.grid-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(239, 136, 33, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 136, 33, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 1;
}

/* Particle Connection Lines */
.particle-connections {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Dark Section Enhancement */
.section-dark {
    background: linear-gradient(135deg, #0a0e17 0%, #0f1419 100%);
    position: relative;
    overflow: hidden;
}

.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(239, 136, 33, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Hover Glow Effect */
.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
}

/* Text Reveal on Scroll */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.text-reveal.revealed span {
    transform: translateY(0);
}

/* Interactive Underline */
.interactive-underline {
    position: relative;
    display: inline-block;
}

.interactive-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.interactive-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Confetti Effect Container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* Smooth Section Transitions */
section {
    position: relative;
    z-index: 2;
}

/* Animated Background Stripes */
.animated-stripes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(239, 136, 33, 0.03) 10px,
            rgba(239, 136, 33, 0.03) 20px);
    animation: stripeMove 20s linear infinite;
    pointer-events: none;
}

/* Sections inherit body dark – overridden by dark-luxury-override.css for single canvas */

/* Override inline white backgrounds on elements */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #f8f9fc"],
[style*="background: #eee"],
[style*="background-color: #f8"],
[style*="background: linear-gradient(135deg, #f8f9fc"],
[style*="background: linear-gradient(135deg, #ffffff"],
[style*="background: linear-gradient(135deg, #fff"] {
    background: transparent !important;
    background-color: rgba(10, 14, 23, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Fix white boxes with glass morphism */
div[style*="background: white"],
div[style*="background-color: white"],
div[style*="background: #fff"] {
    background: rgba(15, 20, 30, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Fix text colors on dark backgrounds */
[style*="color: var(--secondary-color)"] {
    color: #ffffff !important;
}

[style*="color: var(--text-muted)"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure all text is readable */
section h2,
section h3,
section h4,
section p {
    color: #ffffff !important;
}

section p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix borders */
[style*="border-top: 1px solid #ddd"],
[style*="border-bottom: 1px solid #ddd"] {
    border-color: rgba(239, 136, 33, 0.3) !important;
}

/* Fix QR code containers */
[style*="border: 8px solid white"] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fix map section background */
[style*="background: #eee"] {
    background: rgba(10, 14, 23, 0.5) !important;
}

/* Service cards dark enhancement */
.service-card-modern,
.expertise-card,
.faq-item {
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
}

/* FAQ items dark */
.faq-question {
    background: rgba(15, 20, 30, 0.8) !important;
    color: #ffffff !important;
}

.faq-answer {
    background: rgba(10, 14, 23, 0.9) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Trust items dark */
.trust-item {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
}

/* Form containers dark */
.lead-form-container,
.contact-form-container {
    background: rgba(15, 20, 30, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
}

/* AGGRESSIVE OVERRIDES - Force all sections to dark */
body section,
body .section-alternate,
body [class*="section"],
main section,
#main-content section {
    background-color: transparent !important;
}

/* Only remove background images if they contain white/light colors */
[style*="background-image"][style*="#fff"],
[style*="background-image"][style*="#ffffff"],
[style*="background-image"][style*="#f8f9fc"],
[style*="background-image"][style*="#eee"] {
    background-image: none !important;
}

/* Preserve hero background images */
.hero-split,
.hero-section,
.hero,
[class*="hero"] {
    background-image: inherit !important;
}

/* Override all inline white/light backgrounds - but NOT on hero */
*:not(.hero-split):not([class*="hero"])[style*="background: white"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: white"],
*:not(.hero-split):not([class*="hero"])[style*="background: #fff"],
*:not(.hero-split):not([class*="hero"])[style*="background: #ffffff"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #fff"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #ffffff"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f8f9fc"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #f8f9fc"],
*:not(.hero-split):not([class*="hero"])[style*="background: #eee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #eeeeee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f0f0f0"],
*:not(.hero-split):not([class*="hero"])[style*="background-color: #eee"],
*:not(.hero-split):not([class*="hero"])[style*="background: #fafafa"],
*:not(.hero-split):not([class*="hero"])[style*="background: #f5f5f5"] {
    background: rgba(15, 20, 30, 0.85) !important;
    background-color: rgba(15, 20, 30, 0.85) !important;
    background-image: none !important;
}

/* Force dark on all divs with white backgrounds */
body div[style*="white"],
body div[style*="#fff"],
body div[style*="#f8f9fc"],
body div[style*="#eeeeee"],
body div[style*="#f0f0f0"] {
    background: rgba(15, 20, 30, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
}

/* Override gradient backgrounds that go to white/light */
*[style*="linear-gradient"][style*="#ffffff"],
*[style*="linear-gradient"][style*="#fff"],
*[style*="linear-gradient"][style*="#f8f9fc"],
*[style*="linear-gradient"][style*="#eee"] {
    background: rgba(10, 14, 23, 0.7) !important;
    background-image: none !important;
}

/* Container backgrounds */
.container [style*="background"],
section .container [style*="white"],
section .container [style*="#fff"] {
    background: rgba(15, 20, 30, 0.8) !important;
}

/* Override box-shadow white cards */
[style*="box-shadow: 0 10px 40px rgba(0,0,0,0.05)"],
[style*="box-shadow: 0 10px 40px rgba(0,0,0,0.08)"],
[style*="box-shadow: 0 10px 30px rgba(0,0,0,0.1)"] {
    background: rgba(15, 20, 30, 0.85) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
}

/* ============================================
   ALWAYS-ON CONTINUOUS ANIMATIONS
   Mesmerizing effects that never stop
   ============================================ */

/* Continuous Float Animation - All Cards */
.service-card-modern,
.expertise-card,
.trust-item,
.faq-item,
.lead-form-container,
.professionals-cta,
.service-quiz {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(2n) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3n) {
    animation-delay: -2s;
}

.expertise-card:nth-child(2n) {
    animation-delay: -1.5s;
}

.trust-item:nth-child(2n) {
    animation-delay: -0.5s;
}

.trust-item:nth-child(3n) {
    animation-delay: -1s;
}

.faq-item:nth-child(2n) {
    animation-delay: -0.3s;
}

@keyframes subtleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

/* Continuous Pulsing Glow - All Primary Buttons */
.btn-primary,
.btn-submit,
.btn-gold,
.explore-now-btn {
    animation: pulseGlowContinuous 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes pulseGlowContinuous {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4), 0 0 40px rgba(239, 136, 33, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.6), 0 0 60px rgba(239, 136, 33, 0.3);
        transform: scale(1.02);
    }
}

/* Shimmer Effect on All Headings */
h1,
h2,
h3.section-title,
.hero-h1 {
    background: linear-gradient(90deg,
            #ffffff 0%,
            #EF8821 25%,
            #ffd700 50%,
            #EF8821 75%,
            #ffffff 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerContinuous 4s linear infinite;
}

@keyframes shimmerContinuous {
    0% {
        background-position: 200% center;
    }

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

/* Rotating Border Animation - Cards on Hover */
.service-card-modern::before,
.expertise-card::before,
.trust-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.service-card-modern:hover::before,
.expertise-card:hover::before,
.trust-item:hover::before {
    opacity: 1;
}

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

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

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

/* Icon Continuous Animations */
.expertise-icon i,
.trust-icon i,
.service-card-modern i {
    animation: iconPulse 4s ease-in-out infinite;
}

.expertise-icon i:nth-child(2n),
.trust-icon i:nth-child(2n) {
    animation-delay: -1s;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(0, 212, 255, 0.4);
    }
}

/* Continuous Rotation for Decorative Elements */
.rotate-slow {
    animation: rotate360 20s linear infinite;
}

.rotate-medium {
    animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

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

/* Breathing Effect - Subtle Scale Animation */
.breathing {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {

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

    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* Gradient Border Animation */
.gradient-border {
    position: relative;
}

.gradient-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientRotate 4s ease infinite;
}

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

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

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

/* Neon Flicker Effect */
.neon-flicker {
    animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        text-shadow:
            0 0 4px rgba(239, 136, 33, 0.8),
            0 0 11px rgba(239, 136, 33, 0.6),
            0 0 19px rgba(239, 136, 33, 0.4),
            0 0 40px rgba(239, 136, 33, 0.2);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

/* Sway Animation - Gentle Side to Side */
.sway {
    animation: sway 3s ease-in-out infinite;
}

@keyframes sway {

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

    25% {
        transform: translateX(-5px) rotate(-2deg);
    }

    75% {
        transform: translateX(5px) rotate(2deg);
    }
}

/* Magnetic Hover Effect Enhancement */
.magnetic-hover {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-hover:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Glitch Effect on Hover */
.glitch-hover:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Underline Slide Animation */
.slide-underline {
    position: relative;
    display: inline-block;
}

.slide-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #EF8821, #00d4ff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.slide-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Ripple Effect on Click */
.ripple {
    position: relative;
    overflow: hidden;
}

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

.ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Scroll Progress Indicator - Always Visible */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #EF8821, #00d4ff, #ffd700);
    background-size: 200% 100%;
    z-index: 9999;
    animation: progressShimmer 2s linear infinite;
}

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

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

/* Card Lift with Shadow Animation */
.hover-lift-shadow {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift-shadow:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow:
        0 20px 40px rgba(239, 136, 33, 0.3),
        0 0 60px rgba(239, 136, 33, 0.1);
}

/* Text Wave Animation */
.text-wave span {
    display: inline-block;
    animation: textWave 2s ease-in-out infinite;
}

.text-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.text-wave span:nth-child(3) {
    animation-delay: 0.2s;
}

.text-wave span:nth-child(4) {
    animation-delay: 0.3s;
}

.text-wave span:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes textWave {

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

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

/* Ambient Glow - Subtle background pulsing */
.ambient-glow {
    animation: ambientGlow 5s ease-in-out infinite;
}

@keyframes ambientGlow {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.1);
    }

    50% {
        box-shadow: 0 0 50px rgba(239, 136, 33, 0.2), 0 0 80px rgba(0, 212, 255, 0.1);
    }
}

/* Infinite Marquee Scroll */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Apply always-on effects to key elements */
.section-title h2 {
    animation: shimmerContinuous 5s linear infinite;
}

.trust-stat {
    animation: breathing 3s ease-in-out infinite;
}

.service-card-modern i {
    animation: iconPulse 3s ease-in-out infinite;
}

.btn-primary,
.explore-now-btn {
    animation: pulseGlowContinuous 2.5s ease-in-out infinite;
}

.faq-question {
    animation: subtleFloat 5s ease-in-out infinite;
}

.expertise-card {
    animation: ambientGlow 4s ease-in-out infinite;
}

/* ============================================
   ALWAYS-ON CONTINUOUS ANIMATIONS
   No hover required - always visible
   ============================================ */

/* Continuous Floating Animation - All Cards */
.service-card-modern,
.expertise-card,
.trust-item,
.faq-item,
.lead-form-container {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -3s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -4s;
}

.expertise-card:nth-child(1) {
    animation-delay: -0.5s;
}

.expertise-card:nth-child(2) {
    animation-delay: -1.5s;
}

.expertise-card:nth-child(3) {
    animation-delay: -2.5s;
}

.trust-item:nth-child(1) {
    animation-delay: 0s;
}

.trust-item:nth-child(2) {
    animation-delay: -0.7s;
}

.trust-item:nth-child(3) {
    animation-delay: -1.4s;
}

.trust-item:nth-child(4) {
    animation-delay: -2.1s;
}

.faq-item:nth-child(1) {
    animation-delay: 0s;
}

.faq-item:nth-child(2) {
    animation-delay: -0.5s;
}

.faq-item:nth-child(3) {
    animation-delay: -1s;
}

.faq-item:nth-child(4) {
    animation-delay: -1.5s;
}

@keyframes subtleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

/* Shimmer Effect on All Headings */
h1,
h2,
h3.section-title {
    background: linear-gradient(90deg,
            #ffffff 0%,
            #EF8821 25%,
            #ffd700 50%,
            #EF8821 75%,
            #ffffff 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerContinuous 4s linear infinite;
}

@keyframes shimmerContinuous {
    0% {
        background-position: 200% center;
    }

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

/* Pulsing Glow - All Primary Buttons */
.btn-primary,
.btn-submit,
.btn-gold,
.explore-now-btn {
    animation: pulseGlowContinuous 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes pulseGlowContinuous {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.4), 0 0 40px rgba(239, 136, 33, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.6), 0 0 60px rgba(239, 136, 33, 0.3);
        transform: scale(1.02);
    }
}

/* Rotating Border Animation - Cards */
.service-card-modern::before,
.expertise-card::before,
.trust-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.service-card-modern:hover::before,
.expertise-card:hover::before,
.trust-item:hover::before {
    opacity: 1;
}

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

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

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

/* Icon Continuous Pulse Animation */
.expertise-icon i,
.trust-icon i,
.service-card-modern i {
    animation: iconPulse 4s ease-in-out infinite;
}

.expertise-icon i:nth-child(2n),
.trust-icon i:nth-child(2n) {
    animation-delay: -1s;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(0, 212, 255, 0.4);
    }
}

/* Trust Stats Breathing Animation */
.trust-stat {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {

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

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

/* FAQ Items Gentle Sway */
.faq-question {
    animation: gentleSway 5s ease-in-out infinite;
}

.faq-item:nth-child(2n) .faq-question {
    animation-delay: -1s;
}

.faq-item:nth-child(3n) .faq-question {
    animation-delay: -2s;
}

@keyframes gentleSway {

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

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* Scroll Progress Bar Shimmer */
.scroll-progress-bar {
    animation: progressShimmer 2s linear infinite;
}

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

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

/* Grid Pattern Subtle Pulse */
.grid-pattern {
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.08;
    }
}

/* Sticky Widgets Continuous Animation */
.sticky-widget {
    animation: widgetBounce 4s ease-in-out infinite;
}

.sticky-widget:nth-child(2) {
    animation-delay: -1s;
}

.sticky-widget:nth-child(3) {
    animation-delay: -2s;
}

@keyframes widgetBounce {

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

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

/* 3D Card Tilt - All Service Cards */
.service-card-modern,
.expertise-card {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    perspective: 1000px;
}

.service-card-modern:hover,
.expertise-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.03);
}

/* Neon Pulse Border - Continuous */
.neon-pulse-border {
    position: relative;
}

.neon-pulse-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #EF8821, #00d4ff, #ffd700, #EF8821);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: neonPulse 3s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0.7;
}

@keyframes neonPulse {

    0%,
    100% {
        opacity: 0.5;
        filter: blur(8px);
    }

    50% {
        opacity: 0.8;
        filter: blur(12px);
    }
}

/* Holographic Effect */
.holographic {
    background: linear-gradient(135deg,
            rgba(239, 136, 33, 0.1) 0%,
            rgba(0, 212, 255, 0.1) 25%,
            rgba(255, 215, 0, 0.1) 50%,
            rgba(239, 136, 33, 0.1) 75%,
            rgba(0, 212, 255, 0.1) 100%);
    background-size: 400% 400%;
    animation: holographicShift 5s ease infinite;
}

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

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

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

/* Scanline Effect */
.scanlines {
    position: relative;
    overflow: hidden;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px);
    pointer-events: none;
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

/* Aurora Background Effect */
.aurora-bg {
    position: relative;
    overflow: hidden;
}

.aurora-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(239, 136, 33, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 215, 0, 0.2) 0%, transparent 50%);
    animation: auroraMove 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraMove {

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

    33% {
        transform: translate(5%, -5%) rotate(5deg);
    }

    66% {
        transform: translate(-5%, 5%) rotate(-5deg);
    }
}

/* Stardust Particles Effect */
.stardust {
    position: relative;
}

.stardust::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(239, 136, 33, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(0, 212, 255, 0.8), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(239, 136, 33, 0.6), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(0, 212, 255, 0.6), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: stardustTwinkle 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes stardustTwinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* Electric Border Effect */
.electric-border {
    position: relative;
}

.electric-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90deg, #EF8821, #00d4ff, #ffd700, #EF8821) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: electricPulse 2s linear infinite;
}

@keyframes electricPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Liquid Morphing Effect */
.liquid-morph {
    animation: liquidMorph 8s ease-in-out infinite;
}

@keyframes liquidMorph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
    }

    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

/* Infinity Loop Animation */
.infinity-loop {
    animation: infinityMove 3s linear infinite;
}

@keyframes infinityMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(100vw);
        opacity: 0;
    }
}

/* Heartbeat Pulse */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {

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

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

/* Elastic Bounce */
.elastic-bounce {
    animation: elasticBounce 2s ease-in-out infinite;
}

@keyframes elasticBounce {

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

    25% {
        transform: translateY(-20px) scale(1.1, 0.9);
    }

    50% {
        transform: translateY(0) scale(0.95, 1.05);
    }

    75% {
        transform: translateY(-10px) scale(1.05, 0.95);
    }
}

/* Flip Card Effect */
.flip-card {
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flip-card:hover {
    transform: rotateY(180deg);
}

/* Shake Animation */
.shake:hover {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Jello Effect */
.jello:hover {
    animation: jello 0.9s both;
}

@keyframes jello {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

/* Wobble Effect */
.wobble:hover {
    animation: wobble 1s ease-in-out;
}

@keyframes wobble {
    0% {
        transform: translateX(0%) rotate(0deg);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

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

/* Vibrate Effect */
.vibrate:hover {
    animation: vibrate 0.3s linear infinite;
}

@keyframes vibrate {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Apply advanced effects to elements */
.trust-item {
    animation: subtleFloat 5s ease-in-out infinite, ambientGlow 6s ease-in-out infinite;
}

.service-card-modern {
    animation: subtleFloat 6s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -3s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -4s;
}

.btn-primary,
.btn-submit {
    animation: pulseGlowContinuous 2.5s ease-in-out infinite, neonPulse 3s ease-in-out infinite;
}

.section-title h2 {
    animation: shimmerContinuous 4s linear infinite;
}

.faq-item {
    animation: subtleFloat 7s ease-in-out infinite;
}

.lead-form-container {
    animation: ambientGlow 5s ease-in-out infinite;
}

/* ============================================
   LAYERED PARALLAX SCROLL SYSTEM
   Tree-Branch Animation Philosophy
   Each section = different branch, same DNA
   ============================================ */

/* Scroll Container Setup */
html {
    scroll-behavior: smooth;
}

/* Hero Section - Split Convergence Effect */
.hero-split {
    position: relative;
    overflow: visible;
}

.hero-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

/* Hero Text Column - Moves LEFT on scroll up, CENTER on scroll down */
.hero-text-col {
    position: relative;
    transition: transform 0.1s linear;
    will-change: transform;
}

/* Hero Form Column - Moves RIGHT on scroll up, CENTER on scroll down */
.hero-form-col {
    position: relative;
    transition: transform 0.1s linear;
    will-change: transform;
}

/* Trust Signals - Expanding/Collapsing Cards */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    perspective: 1000px;
}

.trust-item {
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Each trust card has unique parallax speed */
.trust-item:nth-child(1) {
    --parallax-speed: 0.3;
}

.trust-item:nth-child(2) {
    --parallax-speed: 0.5;
}

.trust-item:nth-child(3) {
    --parallax-speed: 0.7;
}

/* Expertise Section - Fan-Out Cards */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.expertise-card {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    transform-style: preserve-3d;
}

/* Services Grid - Staggered Cascade */
.services-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.service-card-modern {
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

/* Each service card has unique depth layer */
.service-card-modern:nth-child(1) {
    --z-depth: 50px;
}

.service-card-modern:nth-child(2) {
    --z-depth: 100px;
}

.service-card-modern:nth-child(3) {
    --z-depth: 150px;
}

.service-card-modern:nth-child(4) {
    --z-depth: 100px;
}

.service-card-modern:nth-child(5) {
    --z-depth: 50px;
}

/* FAQ Section - Accordion with Depth */
.faq-accordion {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    position: relative;
    transition: all 0.3s ease;
    will-change: transform, opacity;
}

/* FAQ items spread vertically on scroll */
.faq-item:nth-child(odd) {
    transform-origin: left center;
}

.faq-item:nth-child(even) {
    transform-origin: right center;
}

/* Map Section - Converging Split */
.map-section .container>div[style*="display: grid"] {
    position: relative;
    perspective: 2000px;
}

.map-section .container>div[style*="display: grid"]>* {
    position: relative;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* ============================================
   SCROLL DIRECTION ANIMATIONS
   ============================================ */

/* When scrolling DOWN - Elements CONVERGE */
[data-scroll-direction="down"] .hero-text-col {
    animation: convergeLeft 0.8s ease forwards;
}

[data-scroll-direction="down"] .hero-form-col {
    animation: convergeRight 0.8s ease forwards;
}

[data-scroll-direction="down"] .trust-item {
    animation: trustConverge 0.6s ease forwards;
}

[data-scroll-direction="down"] .expertise-card {
    animation: expertiseConverge 0.7s ease forwards;
}

/* When scrolling UP - Elements DIVERGE */
[data-scroll-direction="up"] .hero-text-col {
    animation: divergeLeft 0.8s ease forwards;
}

[data-scroll-direction="up"] .hero-form-col {
    animation: divergeRight 0.8s ease forwards;
}

[data-scroll-direction="up"] .trust-item {
    animation: trustDiverge 0.6s ease forwards;
}

[data-scroll-direction="up"] .expertise-card {
    animation: expertiseDiverge 0.7s ease forwards;
}

@keyframes convergeLeft {
    from {
        transform: translateX(-50px) rotateY(5deg);
        opacity: 0.7;
    }

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

@keyframes convergeRight {
    from {
        transform: translateX(50px) rotateY(-5deg);
        opacity: 0.7;
    }

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

@keyframes divergeLeft {
    from {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: translateX(-80px) rotateY(8deg);
        opacity: 0.6;
    }
}

@keyframes divergeRight {
    from {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: translateX(80px) rotateY(-8deg);
        opacity: 0.6;
    }
}

@keyframes trustConverge {
    from {
        transform: scale(0.85) translateY(30px);
        opacity: 0.6;
    }

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

@keyframes trustDiverge {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    to {
        transform: scale(1.15) translateY(-40px);
        opacity: 0.5;
    }
}

@keyframes expertiseConverge {
    from {
        transform: translateZ(-100px) rotateX(10deg);
        opacity: 0.6;
    }

    to {
        transform: translateZ(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes expertiseDiverge {
    from {
        transform: translateZ(0) rotateX(0deg);
        opacity: 1;
    }

    to {
        transform: translateZ(200px) rotateX(-15deg);
        opacity: 0.5;
    }
}

/* ============================================
   SECTION-SPECIFIC PARALLAX SPEEDS
   Different speeds = different branch vibes
   ============================================ */

/* Hero - Slow majestic movement */
.hero-split {
    --parallax-speed: 0.2;
}

/* Trust - Medium bounce */
.trust-signals {
    --parallax-speed: 0.4;
}

/* Expertise - Fast snappy */
.expertise-section {
    --parallax-speed: 0.6;
}

/* Services - Variable speeds per card */
.services-modern {
    --parallax-speed: 0.5;
}

/* FAQ - Smooth liquid */
.faq-section {
    --parallax-speed: 0.3;
}

/* Map - Steady convergence */
.map-section {
    --parallax-speed: 0.45;
}

/* ============================================
   LAYER DEPTH SYSTEM
   Z-axis separation for 3D feel
   ============================================ */

.parallax-layer-1 {
    transform: translateZ(0);
}

.parallax-layer-2 {
    transform: translateZ(50px);
}

.parallax-layer-3 {
    transform: translateZ(100px);
}

.parallax-layer-4 {
    transform: translateZ(150px);
}

/* ============================================
   SCROLL PROGRESS INDICATORS
   Always-on visual feedback
   ============================================ */

.scroll-depth-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    z-index: 1000;
}

.scroll-depth-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #EF8821, #00d4ff);
    border-radius: 2px;
    transition: height 0.1s linear;
}

/* ============================================
   CONTINUOUS FLOATING ANIMATIONS
   Always-on regardless of scroll
   ============================================ */

/* Gentle ambient float for all cards */
.service-card-modern {
    animation: ambientFloat 8s ease-in-out infinite;
}

.service-card-modern:nth-child(1) {
    animation-delay: 0s;
}

.service-card-modern:nth-child(2) {
    animation-delay: -1.6s;
}

.service-card-modern:nth-child(3) {
    animation-delay: -3.2s;
}

.service-card-modern:nth-child(4) {
    animation-delay: -4.8s;
}

.service-card-modern:nth-child(5) {
    animation-delay: -6.4s;
}

@keyframes ambientFloat {

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

    25% {
        transform: translateY(-10px) rotate(0.5deg);
    }

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

    75% {
        transform: translateY(-15px) rotate(0.3deg);
    }
}

/* Trust items - Breathing effect */
.trust-item {
    animation: trustBreathe 6s ease-in-out infinite;
}

.trust-item:nth-child(1) {
    animation-delay: 0s;
}

.trust-item:nth-child(2) {
    animation-delay: -2s;
}

.trust-item:nth-child(3) {
    animation-delay: -4s;
}

@keyframes trustBreathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 20px 50px rgba(239, 136, 33, 0.2);
    }
}

/* Expertise cards - Subtle rotation */
.expertise-card {
    animation: expertiseGentleRotate 10s ease-in-out infinite;
}

.expertise-card:nth-child(1) {
    animation-delay: 0s;
}

.expertise-card:nth-child(2) {
    animation-delay: -3.3s;
}

.expertise-card:nth-child(3) {
    animation-delay: -6.6s;
}

@keyframes expertiseGentleRotate {

    0%,
    100% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    25% {
        transform: rotateY(3deg) rotateX(2deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    75% {
        transform: rotateY(-3deg) rotateX(-2deg);
    }
}

/* FAQ items - Liquid wave */
.faq-item {
    animation: faqWave 7s ease-in-out infinite;
}

.faq-item:nth-child(1) {
    animation-delay: 0s;
}

.faq-item:nth-child(2) {
    animation-delay: -1.4s;
}

.faq-item:nth-child(3) {
    animation-delay: -2.8s;
}

.faq-item:nth-child(4) {
    animation-delay: -4.2s;
}

.faq-item:nth-child(5) {
    animation-delay: -5.6s;
}

@keyframes faqWave {

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

    25% {
        transform: translateX(5px) skewX(0.5deg);
    }

    75% {
        transform: translateX(-5px) skewX(-0.5deg);
    }
}

/* Map container - Slow drift */
.map-section .container>div[style*="display: grid"] {
    animation: mapDrift 12s ease-in-out infinite;
}

@keyframes mapDrift {

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

    50% {
        transform: translateX(10px) scale(1.01);
    }
}

/* ============================================
   SCROLL-TRIGGERED REVEAL ANIMATIONS
   ============================================ */

.section-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children reveal */
.section-reveal.visible .trust-item:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .trust-item:nth-child(2) {
    transition-delay: 0.2s;
}

.section-reveal.visible .trust-item:nth-child(3) {
    transition-delay: 0.3s;
}

.section-reveal.visible .expertise-card:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .expertise-card:nth-child(2) {
    transition-delay: 0.25s;
}

.section-reveal.visible .expertise-card:nth-child(3) {
    transition-delay: 0.4s;
}

.section-reveal.visible .service-card-modern:nth-child(1) {
    transition-delay: 0.1s;
}

.section-reveal.visible .service-card-modern:nth-child(2) {
    transition-delay: 0.2s;
}

.section-reveal.visible .service-card-modern:nth-child(3) {
    transition-delay: 0.3s;
}

.section-reveal.visible .service-card-modern:nth-child(4) {
    transition-delay: 0.4s;
}

.section-reveal.visible .service-card-modern:nth-child(5) {
    transition-delay: 0.5s;
}

/* ============================================
   RESPONSIVE PARALLAX ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Reduce parallax intensity on mobile */
    .hero-text-col,
    .hero-form-col {
        transition: transform 0.3s ease;
    }

    [data-scroll-direction="up"] .hero-text-col {
        animation: divergeLeftMobile 0.8s ease forwards;
    }

    [data-scroll-direction="up"] .hero-form-col {
        animation: divergeRightMobile 0.8s ease forwards;
    }

    @keyframes divergeLeftMobile {
        to {
            transform: translateX(-30px);
            opacity: 0.8;
        }
    }

    @keyframes divergeRightMobile {
        to {
            transform: translateX(30px);
            opacity: 0.8;
        }
    }

    /* Simplify trust grid */
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Reduce 3D effects */
    .expertise-card {
        animation: none;
    }

    .service-card-modern {
        animation: ambientFloat 10s ease-in-out infinite;
    }
}

/* ============================================
   PREFERS REDUCED MOTION
   Accessibility first
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .parallax-element {
        transform: none !important;
    }
}

/* 
 * MESMERIZING ANIMATION ENHANCEMENTS
 * Deep analysis implementation for wow-factor animations
 */

/* ============================================
   HERO SECTION ENHANCEMENTS
   ============================================ */

/* Text reveal animation */
.hero-text-col h1 {
    overflow: hidden;
}

.hero-text-col h1 .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    animation: charReveal 0.8s ease forwards;
}

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

/* Typing effect for subtext */
.hero-subtext.typing {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typing 3s steps(50, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color)
    }
}

/* Hero image parallax */
.hero-image-box img {
    transition: transform 0.5s ease;
}

.hero-image-box:hover img {
    transform: scale(1.05) rotate(1deg);
}

/* Floating icons around hero */
.hero-text-col::before,
.hero-text-col::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    opacity: 0.1;
    border-radius: 50%;
    animation: floatIcon 6s ease-in-out infinite;
}

.hero-text-col::before {
    top: 10%;
    left: -30px;
    animation-delay: 0s;
}

.hero-text-col::after {
    bottom: 20%;
    right: -20px;
    animation-delay: 3s;
}

@keyframes floatIcon {

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

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

/* Form field focus glow */
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.3);
    border-color: var(--primary-color);
}

/* Magnetic button effect */
.btn-submit.magnetic {
    transition: transform 0.3s ease;
}

/* Checklist items stagger animation */
.hero-checklist li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRight 0.5s ease forwards;
}

.hero-checklist li:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-checklist li:nth-child(2) {
    animation-delay: 0.2s;
}

.hero-checklist li:nth-child(3) {
    animation-delay: 0.3s;
}

.hero-checklist li:nth-child(4) {
    animation-delay: 0.4s;
}

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

/* ============================================
   TRUST SIGNALS ENHANCEMENTS
   ============================================ */

/* Counter animation */
.trust-stat {
    font-variant-numeric: tabular-nums;
}

.trust-item.animate-count .trust-stat {
    animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

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

/* DISABLED - Icon pulse glow hiding actual icons */
/*
.trust-icon {
    position: relative;
}

.trust-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: pulseGlow 2s ease-in-out infinite;
}
*/

/* DISABLED - Trust icons should show actual Font Awesome icons */
.trust-icon {
    position: relative;
    z-index: 1;
}

.trust-icon i {
    position: relative;
    z-index: 2;
    font-size: 32px;
    color: rgba(239, 136, 33, 0.9);
}

/* Make sure icons are visible */
.trust-icon::after,
.trust-icon::before {
    display: none !important;
    content: none !important;
}

@keyframes pulseGlow {

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

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.2;
    }
}

/* 3D tilt effect on hover */
.trust-item {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-10px) rotateX(5deg);
}

/* Progress circle around stats */
.trust-item::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trust-item:hover::before {
    opacity: 0.3;
    animation: rotateCircle 3s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* ============================================
   TRUSTED PARTNER SECTION
   ============================================ */

/* Certification badges float */
.trusted-partner-section .section-title+div>div>div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trusted-partner-section .section-title+div>div>div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.2);
}

/* Icon glow on hover */
.trusted-partner-section i {
    transition: color 0.3s ease, transform 0.3s ease;
}

.trusted-partner-section i:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

/* ============================================
   EXPERTISE SECTION ENHANCEMENTS
   ============================================ */

/* Icon animation on hover */
.expertise-card:hover .expertise-icon i {
    animation: iconBounce 0.5s ease;
}

@keyframes iconBounce {

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

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

/* Glass morphism effect */
.expertise-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}

/* Hover glow border */
.expertise-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--primary-color), transparent, var(--primary-color));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.expertise-card:hover::before {
    opacity: 1;
    animation: borderGlow 2s linear infinite;
}

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

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

/* ============================================
   SERVICES GRID ENHANCEMENTS
   ============================================ */

/* 3D tilt on hover */
.service-card-modern {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease;
}

.service-card-modern:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
}

/* Icon particle emission */
.service-card-modern:hover i {
    animation: emitParticles 1s ease infinite;
}

@keyframes emitParticles {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(239, 136, 33, 0);
    }

    50% {
        text-shadow:
            0 0 10px rgba(239, 136, 33, 0.5),
            0 0 20px rgba(239, 136, 33, 0.3),
            0 0 30px rgba(239, 136, 33, 0.1);
    }
}

/* Card lift with shadow expansion */
.service-card-modern:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(239, 136, 33, 0.1);
}

/* Staggered entrance from different directions */
.service-card-modern:nth-child(1) {
    animation: slideInLeft 0.6s ease forwards;
}

.service-card-modern:nth-child(2) {
    animation: fadeInUp 0.6s ease forwards;
}

.service-card-modern:nth-child(3) {
    animation: fadeInUp 0.6s ease forwards 0.1s;
}

.service-card-modern:nth-child(4) {
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

.service-card-modern:nth-child(5) {
    animation: slideInRight 0.6s ease forwards;
}

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

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

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

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

/* ============================================
   FAQ SECTION ENHANCEMENTS
   ============================================ */

/* Smooth accordion expansion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s ease,
        opacity 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
}

/* Icon rotation on expand */
.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Glow effect on active FAQ */
.faq-item.active {
    box-shadow: 0 0 30px rgba(239, 136, 33, 0.2);
    border-color: var(--primary-color);
}

/* Background gradient shift on hover */
.faq-item {
    transition: background 0.3s ease;
}

.faq-item:hover {
    background: linear-gradient(135deg, rgba(239, 136, 33, 0.05), transparent);
}

/* ============================================
   LOCATION/MAP SECTION ENHANCEMENTS
   ============================================ */

/* Interactive map pulse */
.map-section iframe {
    position: relative;
}

.map-section iframe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes mapPulse {

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

    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* QR code scanning animation */
.qr-container img {
    position: relative;
    overflow: hidden;
}

.qr-container img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(239, 136, 33, 0.3), transparent);
    animation: scanQR 3s linear infinite;
}

@keyframes scanQR {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Contact icons glow */
.map-section a[href^="tel:"] i,
.map-section a[href^="mailto:"] i {
    transition: color 0.3s ease, transform 0.3s ease;
}

.map-section a[href^="tel:"]:hover i,
.map-section a[href^="mailto:"]:hover i {
    color: var(--primary-color);
    transform: scale(1.2);
}

/* ============================================
   SERVICES PAGE ENHANCEMENTS
   ============================================ */

/* Hero services text reveal */
.hero-services h1 {
    overflow: hidden;
}

.hero-services h1 span {
    display: inline-block;
    animation: slideInUp 0.8s ease forwards;
}

/* Service detail cards 3D tilt */
.service-detail-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease;
}

.service-detail-card:hover {
    transform: translateY(-10px) rotateX(5deg);
}

/* Icon glow on hover */
.service-detail-card:hover .icon {
    animation: iconGlow 1s ease infinite;
}

@keyframes iconGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(239, 136, 33, 0);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
    }
}

/* Features tags glow */
.service-features span {
    transition: all 0.3s ease;
}

.service-features span:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Quiz options magnetic attraction */
.quiz-option {
    transition: all 0.3s ease;
}

.quiz-option:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Progress bar glow */
#quizProgress {
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

/* Result celebration */
.quiz-result.show {
    animation: celebrate 0.5s ease;
}

@keyframes celebrate {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

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

/* Consultant letter typewriter effect */
.letter-content p {
    overflow: hidden;
}

.letter-content.typing p {
    border-right: 2px solid var(--primary-color);
    animation: typing 4s steps(80, end), blink 0.75s step-end infinite;
}

/* Floating quote icon */
.letter-content i {
    animation: floatQuote 4s ease-in-out infinite;
}

@keyframes floatQuote {

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

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

/* ============================================
   FOOTER ENHANCEMENTS
   ============================================ */

/* Social icons hover animation */
footer a[href*="linkedin"]:hover i,
footer a[href*="facebook"]:hover i,
footer a[href*="instagram"]:hover i {
    animation: socialBounce 0.5s ease;
}

@keyframes socialBounce {

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

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

/* Links underline reveal */
footer a {
    position: relative;
}

footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

footer a:hover::after {
    width: 100%;
}

/* ============================================
   STICKY WIDGETS ENHANCEMENTS
   ============================================ */

/* Enhanced pulse */
.sticky-widget {
    position: relative;
}

.sticky-widget::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: widgetPulse 2s ease-in-out infinite;
}

.sticky-widget.whatsapp::after {
    background: #25D366;
}

.sticky-widget.botim::after {
    background: #0088CC;
}

.sticky-widget.phone::after {
    background: var(--primary-color);
}

@keyframes widgetPulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
}

/* Notification badge */
.sticky-widget .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    animation: badgePop 0.5s ease;
}

@keyframes badgePop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

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

/* ============================================
   GLOBAL ENHANCEMENTS
   ============================================ */

/* Scroll progress bar glow */
.scroll-progress-bar {
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

/* Enhanced mesh background */
.mesh-bg {
    opacity: 0.5;
    animation: meshFlow 20s linear infinite;
}

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

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

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

/* Enhanced gradient orbs */
.gradient-orb {
    animation: orbFloat 15s ease-in-out infinite;
}

.orb-1 {
    animation-delay: 0s;
}

.orb-2 {
    animation-delay: 5s;
}

.orb-3 {
    animation-delay: 10s;
}

@keyframes orbFloat {

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

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

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

    75% {
        transform: translate(-50px, -20px) scale(1.05);
    }
}

/* Custom cursor trail */
.cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.3;
    transition: transform 0.1s ease;
    z-index: 9999;
}

/* Section entrance animations */
.section-entrance {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-entrance.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Magnetic cursor enhancement */
.magnetic-cursor::before {
    content: '';
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.1s ease, opacity 0.3s ease;
}

.magnetic-cursor:hover::before {
    opacity: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Disable complex animations on mobile */
    .hero-text-col::before,
    .hero-text-col::after,
    .trust-icon::after,
    .service-card-modern::before,
    .expertise-card::before {
        display: none;
    }

    /* Simplify animations */
    .char,
    .typing,
    .slideInLeft,
    .slideInRight,
    .fadeInUp {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* 
 * DEEP MESMERIZING ENHANCEMENTS
 * Additional wow-factor animations for maximum impact
 */

/* ============================================
   HERO SECTION - MIND-BLOWING EFFECTS
   ============================================ */

/* Holographic text effect */
.hero-h1 .gradient-text {
    background: linear-gradient(135deg,
            #EF8821 0%,
            #ffd700 25%,
            #EF8821 50%,
            #ff6b35 75%,
            #EF8821 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographicShift 4s ease infinite;
    text-shadow: 0 0 30px rgba(239, 136, 33, 0.5);
}

@keyframes holographicShift {

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

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

/* Glowing aura around hero */
.hero-split::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
            rgba(239, 136, 33, 0.15) 0%,
            transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulseAura 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes pulseAura {

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

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

/* Floating geometric shapes */
.hero-split::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(239, 136, 33, 0.03) 50%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(239, 136, 33, 0.03) 50%, transparent 52%);
    background-size: 60px 60px;
    animation: geometricFloat 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

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

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

/* Form fields with cyberpunk glow */
.lead-form input,
.lead-form select,
.lead-form textarea {
    position: relative;
    transition: all 0.3s ease;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    box-shadow:
        0 0 0 2px rgba(239, 136, 33, 0.3),
        0 0 20px rgba(239, 136, 33, 0.4),
        0 0 40px rgba(239, 136, 33, 0.2),
        inset 0 0 20px rgba(239, 136, 33, 0.1);
    border-color: #EF8821;
    animation: cyberpunkPulse 2s ease infinite;
}

@keyframes cyberpunkPulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(239, 136, 33, 0.3), 0 0 20px rgba(239, 136, 33, 0.4);
    }

    50% {
        box-shadow: 0 0 0 2px rgba(239, 136, 33, 0.5), 0 0 30px rgba(239, 136, 33, 0.6);
    }
}

/* Submit button with morphing effect */
.btn-submit {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.btn-submit::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;
}

.btn-submit:hover::before {
    width: 300px;
    height: 300px;
}

.btn-submit:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(239, 136, 33, 0.4);
}

/* Hero image with parallax layers */
.hero-image-box {
    position: relative;
    overflow: hidden;
}

.hero-image-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(239, 136, 33, 0.1) 50%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-image-box:hover::after {
    opacity: 1;
    animation: shimmerSweep 1.5s ease;
}

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

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

/* ============================================
   TRUST SIGNALS - COSMIC EFFECTS
   ============================================ */

/* Trust cards with cosmic glow */
.trust-item {
    position: relative;
    overflow: hidden;
}

.trust-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent,
            rgba(30, 58, 95, 0.1),
            transparent);
    animation: cosmicRotate 10s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trust-item:hover::before {
    opacity: 1;
}

@keyframes cosmicRotate {
    from {
        transform: rotate(0deg);
    }

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

/* Counter with digital glitch effect */
.trust-stat {
    position: relative;
}

.trust-stat::after {
    content: attr(data-value);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: glitchText 0.3s ease;
}

@keyframes glitchText {
    0% {
        opacity: 0;
        transform: translateX(-2px);
    }

    20% {
        opacity: 1;
        transform: translateX(2px);
    }

    40% {
        opacity: 0;
        transform: translateX(-2px);
    }

    60% {
        opacity: 1;
        transform: translateX(2px);
    }

    80% {
        opacity: 0;
        transform: translateX(-1px);
    }

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

/* Icon with particle emission - DISABLED to show actual icons */
.trust-icon i {
    position: relative;
    z-index: 2;
}

/* DISABLE pseudo-elements that hide icons */
.trust-icon i::after {
    display: none !important;
    content: none !important;
}

/* Ensure Font Awesome icons render inside trust signals */
.trust-icon i::before {
    display: inline-block !important;
}

/* Desktop sticky widgets should be bold + filled (match Email prominence) */
@media (min-width: 769px) {
    .sticky-widget {
        width: 60px !important;
        height: 60px !important;
        font-size: 26px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
    }

    .sticky-widget.email {
        background: #ea4335 !important;
        border-color: #ea4335 !important;
        color: #ffffff !important;
    }

    .sticky-widget.whatsapp {
        background: #25D366 !important;
        border-color: #25D366 !important;
        color: #ffffff !important;
    }

    .sticky-widget.phone {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #ffffff !important;
    }

    .sticky-widget i {
        color: #ffffff !important;
    }
}

@keyframes particleRing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================
   SERVICES GRID - QUANTUM EFFECTS
   ============================================ */

/* Service cards with quantum entanglement effect */
.service-card-modern {
    position: relative;
    overflow: hidden;
}

.service-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(239, 136, 33, 0.2),
            transparent);
    transition: left 0.5s ease;
}

.service-card-modern:hover::before {
    left: 100%;
}

/* Icon with morphing effect */
.service-card-modern i {
    transition: all 0.5s ease;
}

.service-card-modern:hover i {
    animation: iconMorph 1s ease;
}

@keyframes iconMorph {

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

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

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

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

/* Button with liquid fill effect - DISABLED for explore-now-btn to allow white hover */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700,
            #EF8821);
    transition: height 0.4s ease;
}

/* DISABLE liquid fill for explore-now-btn to allow white hover */
.service-card-modern .explore-now-btn::after,
.explore-now-btn::after,
.service-detail-card .btn-primary::after,
.btn-primary::after {
    display: none !important;
}

.btn-primary:hover::after {
    height: 0 !important;
}

/* DISABLE for explore-now-btn hover */
.service-card-modern .explore-now-btn:hover::after,
.explore-now-btn:hover::after,
.service-detail-card .btn-primary:hover::after,
.btn-primary:hover::after {
    height: 0 !important;
}

.btn-primary span {
    position: relative;
    z-index: 1;
}

/* ============================================
   FAQ SECTION - LIQUID METAL EFFECTS
   ============================================ */

/* FAQ items with liquid metal border */
.faq-item {
    position: relative;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9),
            rgba(240, 240, 240, 0.9));
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.faq-item:hover::before {
    transform: translateX(100%);
}

/* FAQ answer with smooth reveal */
.faq-answer {
    position: relative;
}

.faq-answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg,
            #EF8821,
            #ffd700);
    transition: height 0.5s ease;
}

.faq-item.active .faq-answer::before {
    height: 100%;
}

/* ============================================
   LOCATION/MAP - AURORA EFFECTS
   ============================================ */

/* Map with aurora border */
.map-section iframe {
    position: relative;
    border: 3px solid transparent;
    background: linear-gradient(#0f1c2e, #0f1c2e) padding-box,
        linear-gradient(135deg, #EF8821, #ffd700, #EF8821) border-box;
    animation: auroraBorder 3s linear infinite;
}

@keyframes auroraBorder {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* QR codes with scanning laser */
.qr-container img {
    position: relative;
    overflow: hidden;
}

.qr-container img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            #EF8821,
            transparent);
    animation: laserScan 2s linear infinite;
}

@keyframes laserScan {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Contact icons with ripple effect */
.map-section a[href^="tel:"] i,
.map-section a[href^="mailto:"] i {
    position: relative;
}

.map-section a[href^="tel:"] i::after,
.map-section a[href^="mailto:"] i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: iconRipple 1.5s ease infinite;
}

@keyframes iconRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ============================================
   SERVICES PAGE - FUTURISTIC EFFECTS
   ============================================ */

/* Hero services with particle rain */
.hero-services {
    position: relative;
    overflow: hidden;
}

.hero-services::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(180deg,
            transparent,
            rgba(239, 136, 33, 0.1),
            transparent);
    animation: particleRain 8s linear infinite;
}

@keyframes particleRain {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50%);
    }
}

/* Service detail cards with holographic effect */
.service-detail-card {
    position: relative;
    overflow: hidden;
}

.service-detail-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(239, 136, 33, 0.05) 50%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-detail-card:hover::before {
    opacity: 1;
    animation: holographicShift 2s ease infinite;
}

/* Quiz options with magnetic field */
.quiz-option {
    position: relative;
    overflow: hidden;
}

.quiz-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
            rgba(239, 136, 33, 0.3),
            transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.quiz-option:hover::after {
    width: 200px;
    height: 200px;
}

/* Quiz progress with neon glow */
#quizProgress {
    box-shadow:
        0 0 10px rgba(239, 136, 33, 0.5),
        0 0 20px rgba(239, 136, 33, 0.3),
        0 0 30px rgba(239, 136, 33, 0.1);
    animation: neonPulse 2s ease infinite;
}

@keyframes neonPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(239, 136, 33, 0.8), 0 0 40px rgba(239, 136, 33, 0.4);
    }
}

/* Consultant letter with typewriter cursor */
.letter-content p {
    position: relative;
}

.letter-content.typing p::after {
    content: '|';
    position: absolute;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ============================================
   FOOTER - NEON GLOW EFFECTS
   ============================================ */

/* Footer links with neon underline */
footer a {
    position: relative;
}

footer a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(239, 136, 33, 0.5);
}

footer a:hover::before {
    width: 100%;
}

/* Social icons with orbit effect */
footer a[href*="linkedin"],
footer a[href*="facebook"],
footer a[href*="instagram"] {
    position: relative;
}

footer a[href*="linkedin"]::after,
footer a[href*="facebook"]::after,
footer a[href*="instagram"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    border: 1px solid rgba(239, 136, 33, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitSpin 3s linear infinite;
}

@keyframes orbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================
   STICKY WIDGETS - PULSE EFFECTS
   ============================================ */

/* WhatsApp widget with pulse ring */
.sticky-widget.whatsapp {
    position: relative;
}

.sticky-widget.whatsapp::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: #25D366;
    border-radius: 50%;
    opacity: 0;
    animation: whatsappPulse 2s ease infinite;
}

@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Botim widget with pulse ring */
.sticky-widget.botim::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: #0088CC;
    border-radius: 50%;
    opacity: 0;
    animation: botimPulse 2s ease infinite;
}

@keyframes botimPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Phone widget with pulse ring */
.sticky-widget.phone::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    animation: phonePulse 2s ease infinite;
}

@keyframes phonePulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   GLOBAL - SCROLL EFFECTS
   ============================================ */

/* Scroll progress with gradient */
.scroll-progress-bar {
    background: linear-gradient(90deg,
            #EF8821,
            #ffd700,
            #EF8821);
    background-size: 200% 100%;
    animation: gradientScroll 3s linear infinite;
}

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

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

/* Mesh background with morphing */
.mesh-bg {
    animation: meshMorph 20s ease infinite;
}

@keyframes meshMorph {

    0%,
    100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }

    50% {
        background-position: 100% 50%;
        filter: hue-rotate(30deg);
    }
}

/* Gradient orbs with color shift */
.gradient-orb {
    animation: orbColorShift 10s ease infinite;
}

.orb-1 {
    animation-delay: 0s;
}

.orb-2 {
    animation-delay: 3s;
}

.orb-3 {
    animation-delay: 6s;
}

@keyframes orbColorShift {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(60deg);
    }
}

/* Particles with glow effect */
.particle {
    box-shadow: 0 0 6px rgba(239, 136, 33, 0.5);
}

/* ============================================
   NAVIGATION - HOVER EFFECTS
   ============================================ */

/* Nav links with underline reveal */
.main-nav a {
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Logo with glow effect */
.logo:hover .logo-img {
    filter: drop-shadow(0 0 10px rgba(239, 136, 33, 0.5));
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* ============================================
   EXPERTISE SECTION - CARD EFFECTS
   ============================================ */

/* Expertise cards with glass morphism */
.expertise-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
}

.expertise-card:hover {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(239, 136, 33, 0.3);
}

/* Expertise icons with rotation */
.expertise-icon i {
    transition: transform 0.5s ease;
}

.expertise-card:hover .expertise-icon i {
    transform: rotate(360deg) scale(1.2);
}

/* ============================================
   TRUSTED PARTNER - CERTIFICATION EFFECTS
   ============================================ */

/* Certification badges with glow */
.trusted-partner-section i {
    position: relative;
}

.trusted-partner-section i::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s ease;
}

.trusted-partner-section i:hover::after {
    opacity: 0.3;
    animation: badgeGlow 1s ease infinite;
}

@keyframes badgeGlow {

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

    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Simplify animations on mobile */
    .hero-split::before,
    .hero-split::after,
    .trust-item::before,
    .service-card-modern::before,
    .expertise-card::before,
    .map-section iframe::before,
    .hero-services::before,
    .service-detail-card::before,
    .quiz-option::after,
    .sticky-widget::before {
        display: none;
    }

    /* Disable complex animations */
    .holographicShift,
    .pulseAura,
    .geometricFloat,
    .cyberpunkPulse,
    .cosmicRotate,
    .glitchText,
    .particleRing,
    .iconMorph,
    .liquidFill,
    .auroraBorder,
    .laserScan,
    .iconRipple,
    .particleRain,
    .holographicShift,
    .magneticField,
    .neonPulse,
    .cursorBlink,
    .orbitSpin,
    .whatsappPulse,
    .botimPulse,
    .phonePulse,
    .gradientScroll,
    .meshMorph,
    .orbColorShift,
    .badgeGlow {
        animation: none;
    }
}

/* ============================================
   SECTION-SPECIFIC UNIQUE BACKGROUNDS
   Each section has distinct visual identity
   ============================================ */

/* HERO - Keep with Burj Khalifa image */
.hero-split {
    background: linear-gradient(135deg, rgba(15, 28, 46, 0.92) 0%, rgba(30, 58, 95, 0.88) 100%),
        url('../assets/images/burj-khalifa-bg-wide-light.jpg') !important;
    background-size: cover !important;
    background-position: center 30% !important;
}

/* TRUST SIGNALS - Subtle gold shimmer always visible */
.trust-signals {
    background: linear-gradient(135deg, #0a0e17 0%, #0f1419 50%, #0a0e17 100%) !important;
    position: relative;
    overflow: hidden;
}

.trust-signals::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(239, 136, 33, 0.15) 50%,
            transparent 100%);
    animation: shimmer 4s infinite linear;
    z-index: 1;
}

.trust-signals .container {
    position: relative;
    z-index: 2;
}

@keyframes shimmer {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

/* TRUSTED PARTNER - Mesh gradient */
.trusted-partner-section {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(239, 136, 33, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        #0a0e17 !important;
}

/* EXPERTISE - Diagonal subtle pattern */
.expertise-section {
    background:
        linear-gradient(135deg, rgba(15, 20, 30, 0.97) 0%, rgba(20, 25, 35, 0.97) 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(239, 136, 33, 0.01) 10px,
            rgba(239, 136, 33, 0.01) 20px) !important;
}

/* SERVICES - Radial glow center */
.services-modern {
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 136, 33, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0, 212, 255, 0.05) 0%, transparent 40%),
        #0a0e17 !important;
}

/* FAQ - Clean minimal with accent line */
.faq-section {
    background: linear-gradient(180deg, #0a0e17 0%, #0c1018 50%, #0a0e17 100%) !important;
    position: relative;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
}

/* LOCATION - Transparent to show fixed orbs */
.map-section {
    background: transparent !important;
}

/* FOOTER - Deep black with subtle texture */
footer {
    background:
        linear-gradient(180deg, #050505 0%, #000000 100%) !important;
    border-top: 1px solid rgba(239, 136, 33, 0.1) !important;
}

/* SERVICES PAGE HERO - Palm Jumeirah theme */
.hero-services {
    background:
        linear-gradient(135deg, rgba(15, 28, 46, 0.95) 0%, rgba(30, 58, 95, 0.9) 100%),
        url('../assets/images/palm-jumeirah-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* SERVICE DETAIL CARDS - Glass morphism effect */
.service-detail-card {
    background: rgba(15, 20, 30, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(239, 136, 33, 0.15) !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
}

.service-detail-card:hover {
    background: rgba(20, 25, 35, 0.8) !important;
    border-color: rgba(239, 136, 33, 0.3) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* CONSULTANT LETTER - Transparent like homepage */
.consultant-letter {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 60px 0 !important;
}

.consultant-letter .letter-content {
    background: rgba(15, 28, 46, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* SERVICE QUIZ - Transparent like homepage sections */
.service-quiz {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* QUIZ OPTIONS - Interactive cards */
.quiz-option {
    background: rgba(15, 20, 30, 0.7) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.quiz-option:hover {
    background: rgba(25, 30, 40, 0.9) !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.02) !important;
}

/* EXPERTISE CARDS - Center highlight glow */
.expertise-card.center-highlight {
    background:
        linear-gradient(135deg, rgba(239, 136, 33, 0.15) 0%, rgba(239, 136, 33, 0.05) 100%) !important;
    border: 1px solid rgba(239, 136, 33, 0.3) !important;
    box-shadow:
        0 0 40px rgba(239, 136, 33, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* INDUSTRY CARDS - Subtle glow on hover */
.industry-card {
    background: rgba(15, 20, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

.industry-card:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 25, 35, 0.9) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* SERVICE CARDS MODERN - Clean with hover lift */
.service-card-modern {
    background: rgba(15, 20, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.service-card-modern:hover {
    background: rgba(20, 25, 35, 0.9) !important;
    border-color: rgba(239, 136, 33, 0.4) !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(239, 136, 33, 0.1) !important;
}

/* TRUST ITEMS - Subtle border */
.trust-item {
    background: rgba(15, 20, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.trust-item:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 25, 35, 0.7) !important;
}

/* LEAD FORM - Glass effect */
.lead-form-container {
    background: rgba(15, 20, 30, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 24px !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* FORM INPUTS - Dark theme */
.lead-form input,
.lead-form select,
.lead-form textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8e9ea !important;
    border-radius: 12px !important;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    border-color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 20px rgba(239, 136, 33, 0.1) !important;
}

.lead-form input:focus,
.lead-form select:focus,
/* EXPLORE NOW Button - White hover with black text */
.service-card-modern .explore-now-btn:hover,
.service-card-modern .explore-now-btn:hover i,
.service-card-modern .explore-now-btn:hover span {
    background: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4) !important;
}

/* DARK LUXURY CARDS - Translucent glass effect */
.dark-luxury-card {
    background: rgba(15, 28, 46, 0.25) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
}

.dark-luxury-card:hover {
    border-color: rgba(239, 136, 33, 0.3) !important;
    background: rgba(20, 35, 55, 0.35) !important;
}

/* PROFESSIONALS CTA - Gradient banner */
.professionals-cta {
    background:
        linear-gradient(135deg, rgba(239, 136, 33, 0.1) 0%, rgba(15, 20, 30, 0.9) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
    border: 1px solid rgba(239, 136, 33, 0.2) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    text-align: center !important;
}

/* ============================================
   PROFESSIONAL MODAL SYSTEM - MBS Premium
   Glass morphism, smooth animations, financial-grade
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 100px rgba(239, 136, 33, 0.1);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.modal-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #1a2332 100%);
    padding: 40px;
    border-radius: 24px 24px 0 0;
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(239, 136, 33, 0.3) 0%, transparent 70%);
    animation: modalGlow 4s ease-in-out infinite;
}

@keyframes modalGlow {

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

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.modal-header h2 {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

/* Close Button */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.modal-close:hover {
    background: rgba(239, 136, 33, 0.9);
    transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
    padding: 40px;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #111a2b !important;
    color: #ffffff !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(239, 136, 33, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Submit Button */
.modal-submit {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(239, 136, 33, 0.3);
}

.modal-submit i {
    transition: transform 0.3s ease;
}

.modal-submit:hover i {
    transform: translateX(5px);
}

/* Success Message */
.modal-success {
    text-align: center;
    padding: 40px;
}

.modal-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes successPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

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

.modal-success-icon i {
    font-size: 36px;
    color: white;
}

.modal-success h3 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.modal-success p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Service Selector in Modal */
.service-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.service-option {
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
}

.service-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.service-option.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(239, 136, 33, 0.1) 0%, rgba(239, 136, 33, 0.05) 100%);
}

.service-option i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.service-option span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color);
}

/* Trust Badges in Modal */
.modal-trust {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trust-badge i {
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        border-radius: 20px;
    }

    .modal-header {
        padding: 30px 24px;
    }

    .modal-header h2 {
        font-size: 1.4rem;
    }

    .modal-body {
        padding: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .service-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FLOATING CONTACT WIDGET - Premium Style
   ============================================ */
.floating-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.floating-main {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(239, 136, 33, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.floating-main:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(239, 136, 33, 0.5);
}

.floating-main.active {
    transform: rotate(45deg);
    background: var(--secondary-color);
}

/* Pulse Animation */
.floating-main::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: widgetPulse 2s ease-out infinite;
}

@keyframes widgetPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Floating Menu */
.floating-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-widget.active .floating-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.floating-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.floating-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.floating-item-icon.whatsapp {
    background: #25d366;
    color: white;
}

.floating-item-icon.phone {
    background: var(--primary-color);
    color: white;
}

.floating-item-icon.email {
    background: var(--secondary-color);
    color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .floating-widget {
        bottom: 20px;
        right: 20px;
    }

    .floating-main {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .floating-menu {
        right: -10px;
    }

    .floating-item {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

/* ============================================
   3D CARD TILT EFFECTS - Service Cards
   ============================================ */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease;
}

.tilt-card-inner {
    transform: translateZ(20px);
}

.tilt-card-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tilt-card:hover .tilt-card-glare {
    opacity: 1;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger Animation Delays */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

/* ============================================
   PROFESSIONAL ENQUIRY BUTTON
   ============================================ */
.enquiry-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d97706 100%);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.enquiry-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 136, 33, 0.4);
}

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

.enquiry-btn:hover i {
    transform: translateX(5px);
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   NOTIFICATION TOAST
   ============================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--secondary-color);
    color: white;
    padding: 16px 28px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.toast i {
    margin-right: 10px;
}

/* 
   UNIFIED UI FIXES
   Source of Truth for Buttons, Card Borders, and Spacing
   Loads last to override all other fragmented styles.
*/

:root {
    --primary-color: #ef8821;
    --secondary-color: #0f1c2e;
    --text-muted: rgba(255, 255, 255, 0.7);
}

/* 1. BUTTONS - CONSOLIDATED SOURCE OF TRUTH */
.btn-primary,
a.btn-primary,
.explore-now-btn,
a.explore-now-btn,
.explore-all-btn,
a.explore-all-btn,
.enquire-now-btn,
a.enquire-now-btn,
.service-card-modern .explore-now-btn,
.service-detail-card .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 32px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 15px rgba(239, 136, 33, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Hover state: White background, black text */
.btn-primary:hover,
a.btn-primary:hover,
.explore-now-btn:hover,
a.explore-now-btn:hover,
.explore-all-btn:hover,
a.explore-all-btn:hover,
.enquire-now-btn:hover,
a.enquire-now-btn:hover,
.service-card-modern .explore-now-btn:hover,
.service-detail-card .btn-primary:hover {
    background: white !important;
    color: black !important;
    border-color: white !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Force icons to follow text color on hover */
.btn-primary:hover i,
a.btn-primary:hover i,
.explore-now-btn:hover i,
a.explore-now-btn:hover i,
.explore-all-btn:hover i,
a.explore-all-btn:hover i,
.enquire-now-btn:hover i,
a.enquire-now-btn:hover i,
.service-card-modern .explore-now-btn:hover i,
.service-detail-card .btn-primary:hover i {
    color: black !important;
    transform: translateX(3px) !important;
    transition: transform 0.3s ease !important;
}

/* Disable harmful pseudo-elements from other files */
.btn-primary::after,
.btn-primary::before,
a.btn-primary::after,
a.btn-primary::before,
.explore-now-btn::after,
.explore-now-btn::before,
.enquire-now-btn::after,
.enquire-now-btn::before {
    display: none !important;
    content: none !important;
}

/* 2. CARD BORDERS - GOLDEN AESTHETIC */
.service-card-modern,
.service-detail-card,
.expertise-card,
.dark-luxury-card,
.trust-item,
.location-map-card,
.location-details-card {
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
    transition: all 0.4s ease !important;
}

.service-card-modern:hover,
.service-detail-card:hover,
.expertise-card:hover,
.trust-item:hover {
    border-color: rgba(239, 136, 33, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(239, 136, 33, 0.1) !important;
}

/* 3. TRUST STATS - ICON VISIBILITY */
.trust-icon {
    background: rgba(239, 136, 33, 0.1) !important;
    border: 1px solid rgba(239, 136, 33, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: none !important;
}

.trust-icon i {
    color: var(--primary-color) !important;
    font-size: 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Disable pulse/oval overlays */
.trust-icon::before,
.trust-icon::after {
    display: none !important;
    content: none !important;
}

/* 4. SECTION SPACING & SYMMETRY */
section {
    padding: 60px 0;
    position: relative !important;
}

.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.section-title {
    margin-bottom: 40px !important;
    text-align: center !important;
}

/* 5. MOBILE REFINEMENTS */
@media (max-width: 768px) {
    section {
        padding: 40px 15px !important;
    }

    .btn-primary,
    a.btn-primary {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }

    .service-detail-card {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* 6. FINAL POLISH - GOLDEN TEXT & EMAIL WIDGET */
    .gold-text,
    .hero-h1 .gold-text,
    .hero-content .gold-text {
        color: var(--primary-color) !important;
        -webkit-text-fill-color: var(--primary-color) !important;
    }

    /* Force hero content to be transparent to fix dark artifact slabs */
    .hero-content,
    .hero-services .hero-content,
    .hero-split .hero-content,
    .hero-services {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .sticky-widget.email {
        background: #ea4335 !important;
        /* Force Gmail Red */
        color: white !important;
    }

    /* 7. MOBILE REFINEMENTS - TEXT CUTOFF & LOGO OVAL */
    @media (max-width: 768px) {
        .hero-h1 {
            font-size: 24px !important;
            /* Smaller to prevent cutoff */
            line-height: 1.3 !important;
            overflow-wrap: break-word !important;
            word-wrap: break-word !important;
            width: 100% !important;
        }

        /* Fix "Gray Oval" logo impact - Keep white background in mobile */
        #main-header {
            background: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
            border-radius: 50px !important;
            padding: 10px 20px !important;
            margin: 0 auto !important;
            position: static !important;
            top: auto !important;
        }

        .header-wrapper {
            position: static !important;
            top: auto !important;
        }

        .logo-img {
            height: 32px !important;
        }

        .sticky-widget.email {
            background: #ea4335 !important;
            color: #ffffff !important;
        }
    }
}

/* ============================================
   HOME PAGE UI REFINEMENTS - Clean Background & Widget Fixes
   ============================================ */

/* 1. OPTIMIZED TEXTURE BACKGROUND - Cleaner appearance */
.texture-bg {
    background-image: none !important;
    background: transparent !important;
}

/* Keep hero background but remove conflicting texture */
.hero-split.texture-bg {
    background-image: linear-gradient(rgba(15, 28, 46, 0.7), rgba(15, 28, 46, 0.7)), url('../assets/images/burj-khalifa-bg-wide-light.jpg') !important;
    background-position: center 25% !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* 2. CONSOLIDATED FLOATING WIDGET STYLES - Remove duplicates */
.floating-widget {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 1000 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background: var(--secondary-color) !important;
    color: white !important;
    animation: none !important;
}

.floating-widget:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Remove all pseudo-element animations */
.floating-widget::before,
.floating-widget::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* 3. MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    .floating-widget {
        bottom: 20px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
        background: var(--secondary-color) !important;
        border: 2px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
    }

    .floating-widget i {
        font-size: 24px !important;
        color: #ffffff !important;
    }

    .floating-widget:hover {
        transform: scale(1.1) !important;
    }
}

@media (max-width: 768px) {
    .sticky-widgets {
        top: auto !important;
        left: auto !important;
        bottom: 22px !important;
        right: 18px !important;
        transform: none !important;
        z-index: 10000 !important;
        gap: 12px !important;
    }
}

.sticky-widgets {
    z-index: 10000 !important;
}

.sticky-widget {
    pointer-events: auto !important;
}

.sticky-widget i {
    position: relative !important;
    z-index: 2 !important;
}

.sticky-widget.phone i {
    color: #ffffff !important;
}

.sticky-widget::before,
.sticky-widget::after {
    pointer-events: none !important;
}

.sticky-widget.whatsapp::before,
.sticky-widget.botim::before,
.sticky-widget.phone::before,
.sticky-widget.whatsapp::after,
.sticky-widget.botim::after,
.sticky-widget.phone::after {
    animation: none !important;
    opacity: 0 !important;
}

@media (max-width: 768px) {
    .header-wrapper {
        padding: 8px 0 !important;
    }

    #main-header {
        margin: 8px auto !important;
        top: 10px !important;
    }

    #main-header .header-container {
        padding-top: 4px !important;
        padding-bottom: 8px !important;
    }

    #main-header .logo-img {
        transform: translateY(-2px) !important;
    }

    .hero-split {
        min-height: 68svh !important;
        padding-top: 80px !important;
        padding-bottom: 22px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        background-image: linear-gradient(135deg, rgba(10, 14, 23, 0.92) 0%, rgba(15, 28, 46, 0.88) 100%), url('../assets/images/burj-khalifa-bg-wide-light.jpg') !important;
        background-size: cover !important;
        background-position: center 35% !important;
    }

    .hero-services {
        min-height: 62svh !important;
        padding-top: 80px !important;
        padding-bottom: 18px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        background-image: linear-gradient(135deg, rgba(10, 14, 23, 0.92) 0%, rgba(15, 28, 46, 0.88) 100%), url('../assets/images/palm-jumeirah-bg.png') !important;
        background-size: cover !important;
        background-position: center 30% !important;
    }

    .hero-services .container {
        padding-top: 8px !important;
    }

    .hero-services .hero-content {
        padding-top: 10px !important;
    }

    .hero-split .hero-bg-layer,
    .hero-services .hero-bg-layer,
    .hero-split .hero-tinge-layer,
    .hero-services .hero-tinge-layer {
        height: 100% !important;
    }

    .hero-split .hero-bg-layer img,
    .hero-services .hero-bg-layer img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-split .hero-bg-layer,
    .hero-split .hero-bg-layer img,
    .hero-split .hero-tinge-layer img {
        display: none !important;
    }

    .hero-services .hero-bg-layer,
    .hero-services .hero-bg-layer img,
    .hero-services .hero-tinge-layer img {
        display: none !important;
    }

    .particles-container {
        opacity: 0.78 !important;
    }

    .particles-container::before,
    .particles-container::after {
        opacity: 0.95 !important;
        filter: saturate(1.5) brightness(1.2) contrast(1.22) !important;
    }

    .particle {
        opacity: 0.7 !important;
        box-shadow: 0 0 10px rgba(239, 136, 33, 0.45), 0 0 20px rgba(239, 136, 33, 0.22) !important;
    }

    .dark-luxury-card,
    .lead-form-container,
    .letter-content,
    .expertise-card,
    .service-card-modern,
    .industry-card,
    .faq-item,
    .service-detail-card,
    .quiz-result,
    .trust-item {
        background: rgba(10, 14, 23, 0.9) !important;
    }

    .hero-image-box {
        display: none !important;
    }
}

@media (min-width: 769px) {

    .hero-split .hero-h1 .gold-text,
    .hero-services .hero-content .gold-text {
        color: var(--primary-color) !important;
        -webkit-text-fill-color: var(--primary-color) !important;
    }
}

/* 4. CLEAN UP VISUAL OVERLAYS - Reduce noise */
.mesh-bg,
.grid-pattern {
    opacity: 0.3 !important;
}

.particles-container {
    z-index: 0 !important;
    opacity: 0.8 !important;
}

.particles-container::before,
.particles-container::after {
    opacity: 0.9 !important;
    mix-blend-mode: normal !important;
    filter: saturate(1.35) brightness(1.18) contrast(1.18) !important;
    z-index: 0 !important;
}

.dark-luxury-card,
.lead-form-container,
.letter-content,
.expertise-card,
.service-card-modern,
.industry-card,
.faq-item,
.service-detail-card,
.quiz-result,
.trust-item {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(10, 14, 23, 0.92) !important;
}

@media (max-width: 768px) {
    .hero-image-box {
        display: none !important;
    }
}

.gradient-orb {
    opacity: 0.4 !important;
}

/* ============================================
   CRITICAL VISIBILITY FIXES - Blank Sections Issue
   ============================================ */

/* 1. TRUSTED PARTNER SECTION - Force visibility */
.trusted-partner-section,
.trusted-partner-section * {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.trusted-partner-section .dark-luxury-card {
    background: rgba(15, 28, 46, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 2. MAP SECTION - Force visibility */
.map-section,
.map-section * {
    opacity: 1 !important;
    visibility: visible !important;
}

.map-section iframe {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.map-section .dark-luxury-card {
    background: rgba(15, 28, 46, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. CONSULTANT LETTER SECTION - Force visibility */
.consultant-letter,
.consultant-letter * {
    opacity: 1 !important;
    visibility: visible !important;
}

.consultant-letter .letter-content {
    background: rgba(15, 28, 46, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 4. ENSURE TEXT VISIBILITY */
.trusted-partner-section h2,
.trusted-partner-section p,
.trusted-partner-section h3,
.map-section h2,
.map-section p,
.map-section h3,
.consultant-letter h2,
.consultant-letter p {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 5. IMAGE VISIBILITY FIXES */
.trusted-partner-section img,
.map-section img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Trusted Partner Section - Better spacing and symmetry */
.trusted-partner-section {
    padding: 80px 0 !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.trusted-partner-section .container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.trusted-partner-section .section-title {
    margin-bottom: 50px !important;
    padding: 0 20px !important;
}

.trusted-partner-section .section-title h2 {
    margin-bottom: 25px !important;
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
}

.trusted-partner-section .section-title p {
    margin-bottom: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Trusted Partner Card - Consistent spacing */
.trusted-partner-section .dark-luxury-card {
    margin: 0 auto !important;
    padding: 50px !important;
    max-width: 800px !important;
    border-radius: 20px !important;
    background: rgba(15, 20, 30, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(239, 136, 33, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.trusted-partner-section .dark-luxury-card h3 {
    margin-bottom: 30px !important;
    font-size: 1.6rem !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* Abu Dhabi Image - Better alignment */
.trusted-partner-section .dark-luxury-card img {
    width: 100% !important;
    max-width: 500px !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    margin: 30px auto !important;
    display: block !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(239, 136, 33, 0.2) !important;
}

/* Ensure section symmetry with next section */
.trusted-partner-section+.expertise-section {
    padding-top: 80px !important;
    margin-top: 0 !important;
}

/* Mobile responsive spacing */
@media (max-width: 768px) {
    .trusted-partner-section {
        padding: 60px 20px !important;
    }

    .trusted-partner-section .container {
        padding: 0 20px !important;
    }

    .trusted-partner-section .section-title {
        padding: 0 10px !important;
    }

    .trusted-partner-section .dark-luxury-card {
        padding: 30px 20px !important;
        margin: 0 10px !important;
    }
}

/* ============================================
   COMPREHENSIVE AESTHETIC OPTIMIZATION
   ============================================ */

/* 1. UNIFIED SECTION SPACING SYSTEM */
:root {
    --section-padding: 80px;
    --section-padding-small: 60px;
    --section-padding-large: 100px;
    --container-padding: 40px;
    --card-gap: 30px;
    --element-gap: 20px;
}

/* 2. CONSISTENT SECTION SPACING */
section {
    padding: var(--section-padding) 0 !important;
    position: relative;
    overflow: hidden;
}

/* Hero Section - Grand Entrance */
.hero-split {
    padding: 120px 0 var(--section-padding-large) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Trust Signals - Compact Impact */
.trust-signals {
    padding: var(--section-padding-small) 0 !important;
    background: #0a0e17 !important;
}

/* Trusted Partner - Balanced Content */
.trusted-partner-section {
    padding: var(--section-padding) 0 !important;
    background: transparent !important;
}

/* Expertise Section - Visual Breathing Room */
.expertise-section {
    padding: var(--section-padding-large) 0 !important;
    background: transparent !important;
}

/* Services Section - Content Focus */
.services-modern {
    padding: var(--section-padding) 0 !important;
    background: transparent !important;
}

/* FAQ Section - Clean Layout */
.faq-section {
    padding: var(--section-padding) 0 !important;
    background: transparent !important;
}

/* Map/Location Section - Final Impact */
.map-section {
    padding: var(--section-padding-large) 0 !important;
    background: transparent !important;
}

/* 3. CONTAINER ALIGNMENT & SYMMETRY */
.container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 var(--container-padding) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. GRID SYSTEM CONSISTENCY */
.trust-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--card-gap) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.expertise-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--card-gap) !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.services-modern-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--card-gap) !important;
    max-width: 1200px !important;
    margin: 40px auto 0 !important;
}

/* 5. CARD SYMMETRY & SPACING */
.dark-luxury-card {
    background: rgba(15, 28, 46, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: var(--section-padding-small) !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.expertise-card {
    background: rgba(15, 28, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: var(--element-gap) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.service-card-modern {
    background: rgba(15, 28, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: var(--section-padding-small) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

/* 6. TYPOGRAPHY HIERARCHY */
.section-title {
    text-align: center !important;
    margin-bottom: var(--section-padding-small) !important;
}

.section-title h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--element-gap) !important;
    color: white !important;
    line-height: 1.2 !important;
}

.section-title p {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* 7. VISUAL BALANCE & WHITE SPACE */
.trust-item {
    padding: var(--element-gap) !important;
    text-align: center !important;
}

.expertise-card h3,
.service-card-modern h3 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
    color: var(--primary-color) !important;
}

.expertise-card p,
.service-card-modern p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 8. RESPONSIVE SYMMETRY */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
        --section-padding-small: 40px;
        --section-padding-large: 80px;
        --container-padding: 20px;
        --card-gap: 20px;
        --element-gap: 15px;
    }

    .container {
        padding: 0 var(--container-padding) !important;
    }

    .trust-grid,
    .expertise-grid,
    .services-modern-grid {
        grid-template-columns: 1fr !important;
        gap: var(--element-gap) !important;
        max-width: 100% !important;
    }

    .section-title h2 {
        font-size: 2rem !important;
    }

    .dark-luxury-card {
        padding: var(--element-gap) !important;
        margin: 0 var(--element-gap) !important;
    }
}

/* ============================================
   COMPREHENSIVE DARK MODE AESTHETIC AUDIT FIXES
   ============================================ */

/* 1. REMOVE ALL LIGHT MODE REMNANTS */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: #f8f9fa"],
[style*="background: #f1f3f4"],
[style*="background: #eee"],
[style*="background: #fafafa"],
[style*="background: #fcfcfc"],
[style*="background: linear-gradient(135deg, #ffffff"],
[style*="background: linear-gradient(to right, #ffffff"],
[style*="background: linear-gradient(to bottom, #ffffff"] {
    background: rgba(15, 28, 46, 0.8) !important;
    background-color: rgba(15, 28, 46, 0.8) !important;
}

/* 2. REMOVE WHITE TEXT ON WHITE BACKGROUNDS */
[style*="color: white"][style*="background: white"],
[style*="color: #fff"][style*="background: #fff"],
[style*="color: #ffffff"][style*="background: #ffffff"] {
    color: var(--primary-color) !important;
    background: rgba(15, 28, 46, 0.9) !important;
}

/* 3. FIX INLINE COLOR STYLES */
[style*="color: #000"],
[style*="color: #000000"],
[style*="color: black"],
[style*="color: rgb(0, 0, 0)"] {
    color: #ffffff !important;
}

/* 4. REMOVE LIGHT BORDERS */
[style*="border: 1px solid #ddd"],
[style*="border: 1px solid #ccc"],
[style*="border: 1px solid #eee"],
[style*="border: 1px solid #f0f0f0"],
[style*="border-color: #ddd"],
[style*="border-color: #ccc"],
[style*="border-color: #eee"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. ENSURE DARK ICONS */
i.fas,
i.fab,
i.far,
.fa,
.fas,
.fab,
.far {
    color: var(--primary-color) !important;
}

/* 6. REMOVE LIGHT MODE SHADOWS */
[style*="box-shadow: 0 2px 4px rgba(0,0,0,0.1)"],
[style*="box-shadow: 0 4px 8px rgba(0,0,0,0.1)"],
[style*="box-shadow: 0 1px 3px rgba(0,0,0,0.12)"],
[style*="box-shadow: 0 2px 10px rgba(0,0,0,0.1)"] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 7. FIX FORM ELEMENTS */
input,
textarea,
select {
    background: rgba(15, 28, 46, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 8. REMOVE LIGHT MODE IMAGES STYLING */
img[style*="background: white"],
img[style*="background: #fff"] {
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 8px !important;
}

/* 9. ENSURE DARK LINKS */
a[style*="color: #000"],
a[style*="color: black"],
a[style*="color: #333"] {
    color: var(--primary-color) !important;
}

a[style*="color: #666"],
a[style*="color: #777"],
a[style*="color: #999"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 10. REMOVE LIGHT MODE BACKGROUNDS IN SECTIONS */
section[style*="background: white"],
section[style*="background: #fff"],
section[style*="background: #ffffff"],
section[style*="background: #f8f9fa"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* 11. FIX BUTTONS WITH LIGHT MODE STYLES */
button[style*="background: white"],
button[style*="background: #fff"],
.btn[style*="background: white"],
.btn[style*="background: #fff"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
}

/* 12. REMOVE LIGHT MODE OVERLAYS */
div[style*="background: rgba(255, 255, 255, 0.9)"],
div[style*="background: rgba(255, 255, 255, 0.8)"],
div[style*="background: rgba(255, 255, 255, 0.7)"] {
    background: rgba(15, 28, 46, 0.9) !important;
}

/* 13. ENSURE DARK MODE CARDS */
.card[style*="background: white"],
.card[style*="background: #fff"],
.service-card[style*="background: white"],
.expertise-card[style*="background: #fff"] {
    background: rgba(15, 28, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 14. FIX HOVER STATES */
:hover[style*="background: white"],
:hover[style*="background: #fff"] {
    background: rgba(239, 136, 33, 0.2) !important;
}

/* 15. REMOVE LIGHT MODE TEXT SHADOWS */
[style*="text-shadow: 0 1px 0 #fff"],
[style*="text-shadow: 0 1px 3px rgba(255,255,255,0.5)"],
[style*="text-shadow: 0 2px 4px rgba(255,255,255,0.3)"] {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 16. ENSURE DARK MODE IN MOBILE VIEW */
@media (max-width: 768px) {

    [style*="background: white"],
    [style*="background: #fff"],
    [style*="background: #ffffff"] {
        background: rgba(15, 28, 46, 0.95) !important;
    }

    [style*="color: #000"],
    [style*="color: black"] {
        color: #ffffff !important;
    }
}

/* 17. REMOVE LIGHT MODE VARIABLES */
:root {
    --light-bg: transparent !important;
    --light-text: #ffffff !important;
    --light-border: rgba(255, 255, 255, 0.1) !important;
}

/* 18. ENSURE DARK MODE FOR SCRIPT-GENERATED CONTENT */
.js-generated-content,
.dynamic-content,
.lazy-loaded {
    background: rgba(15, 28, 46, 0.8) !important;
    color: #ffffff !important;
}

/* 19. REMOVE WHITE SPACES AND GAPS */
.gap-white,
.spacer-white,
.divider-white {
    background: transparent !important;
    border: none !important;
}

/* 20. FINAL DARK MODE ENFORCEMENT */
* {
    scrollbar-color: var(--primary-color) rgba(15, 28, 46, 0.8) !important;
}

::-webkit-scrollbar {
    background: rgba(15, 28, 46, 0.8) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
}

/* 12. REMOVE LIGHT MODE OVERLAYS */
div[style*="background: rgba(255, 255, 255, 0.9)"],
div[style*="background: rgba(255, 255, 255, 0.8)"],
div[style*="background: rgba(255, 255, 255, 0.7)"] {
    background: rgba(15, 28, 46, 0.9) !important;
}

/* 13. ENSURE DARK MODE CARDS */
.card[style*="background: white"],
.card[style*="background: #fff"],
.service-card[style*="background: white"],
.expertise-card[style*="background: #fff"] {
    background: rgba(15, 28, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 14. FIX HOVER STATES */
:hover[style*="background: white"],
:hover[style*="background: #fff"] {
    background: rgba(239, 136, 33, 0.2) !important;
}

/* 15. REMOVE LIGHT MODE TEXT SHADOWS */
[style*="text-shadow: 0 1px 0 #fff"],
[style*="text-shadow: 0 1px 3px rgba(255,255,255,0.5)"],
[style*="text-shadow: 0 2px 4px rgba(255,255,255,0.3)"] {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 16. ENSURE DARK MODE IN MOBILE VIEW */
@media (max-width: 768px) {

    [style*="background: white"],
    [style*="background: #fff"],
    [style*="background: #ffffff"] {
        background: rgba(15, 28, 46, 0.95) !important;
    }

    [style*="color: #000"],
    [style*="color: black"] {
        color: #ffffff !important;
    }
}

/* 17. REMOVE LIGHT MODE VARIABLES */
:root {
    --light-bg: transparent !important;
    --light-text: #ffffff !important;
    --light-border: rgba(255, 255, 255, 0.1) !important;
}

/* 18. ENSURE DARK MODE FOR SCRIPT-GENERATED CONTENT */
.js-generated-content,
.dynamic-content,
.lazy-loaded {
    background: rgba(15, 28, 46, 0.8) !important;
    color: #ffffff !important;
}

/* 19. REMOVE WHITE SPACES AND GAPS */
.gap-white,
.spacer-white,
.divider-white {
    background: transparent !important;
    border: none !important;
}

/* 20. FINAL DARK MODE ENFORCEMENT */
* {
    scrollbar-color: var(--primary-color) rgba(15, 28, 46, 0.8) !important;
}

::-webkit-scrollbar {
    background: rgba(15, 28, 46, 0.8) !important;
}

/* 20. FINAL DARK MODE ENFORCEMENT */
* {
    scrollbar-color: var(--primary-color) rgba(15, 28, 46, 0.8) !important;
}

::-webkit-scrollbar {
    background: rgba(15, 28, 46, 0.8) !important;
}

/* ========================================================
   PHASE 5: ULTIMATE ALIGNMENT & OVERFLOW FIX (FINAL)
   Kills horizontal overflow and restores centered model image.
   ======================================================== */
/* ========================================================
   PHASE 6: ULTIMATE HERO RESTORATION (FINAL)
   Restores Burj Khalifa/Palm visibility & kills gaps.
   ======================================================== */
@media screen and (max-width: 768px) {

    /* 1. ROOT & OVERFLOW */
    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* 2. RESTORE LANDMARK CLARITY (PHASE 6c) */
    /* Kill duplicate backgrounds rendered via CSS (Leaving only HTML Img version) */
    .hero-split.texture-bg,
    .hero-services.texture-bg {
        background-image: none !important;
    }

    /* Kill the broad max-height constraint that cuts off hero images */
    img:not(.logo-img) {
        max-height: none !important;
        /* Restore height to 100% for hero use cases */
    }

    /* Gradient overlays: inherit from inline HTML (same as desktop) */
    .hero-split [style*="background: linear-gradient"],
    .hero-services [style*="background: linear-gradient"],
    .hero-split [style*="opacity: 0.95"],
    .hero-services [style*="opacity: 0.95"],
    .hero-bg-layer [style*="background"],
    .hero-split>div:first-child>div,
    .hero-services>div:first-child>div {
        display: block !important;
        visibility: visible !important;
    }

    /* Tinge animations: same rendering as desktop */
    [style*="animation: heroTingeHome"],
    [style*="animation: heroTinge"] {
        z-index: 1 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Landmark images: inherit opacity from HTML (same as desktop), just ensure layout */
    .hero-split img[src*="burj-khalifa"],
    .hero-services img[src*="palm-jumeirah"],
    .hero-bg-layer img,
    .hero-split>div:first-child img,
    .hero-services>div:first-child img {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        z-index: 0 !important;
        position: absolute !important;
        inset: 0 !important;
    }

    /* 3. MOBILE ARCHITECTURAL SPACING — no background override (same as desktop) */
    .hero-split,
    .hero-services {
        min-height: 280px !important;
        height: auto !important;
        padding-top: 50px !important;
        padding-bottom: 30px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow: hidden !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Restore breathing room for services page starting point */
    .services-detail {
        margin-top: 0 !important;
        padding-top: 60px !important;
        /* Elegant vertical void */
    }

    /* NUCLEAR JITTER FIX for LEAD FORM DROPDOWN (PHASE 7) */
    /* Ensure total removal of transitions and layout shifts on focus */
    .lead-form-container select {
        background-color: #111a2b !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: none !important;
        /* Killer of jitter */
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        padding: 12px 35px 12px 15px !important;
        /* Fixed padding */
        height: 48px !important;
        /* Force fixed height */
        line-height: normal !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 16px !important;
    }

    .lead-form-container select:focus,
    .lead-form-container select:active {
        border-color: var(--primary-color) !important;
        box-shadow: none !important;
        outline: none !important;
        background-color: #111a2b !important;
        transition: none !important;
    }

    .section-title {
        margin-bottom: 30px !important;
        padding-top: 20px !important;
    }

    /* 4. TRANSITION & ANIMATION PARITY (PHASE 6d) */
    /* Ensure reveal-on-scroll animations are active on mobile */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .reveal-on-scroll.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Re-enable card lift/hover vibe for mobile touch */
    .service-detail-card {
        transition: transform 0.3s ease, border-color 0.3s ease !important;
        margin-bottom: 15px !important;
    }

    /* 5. CONTAINER ALIGNMENT */
    .container,
    .hero-split-container,
    .hero-content {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* HIDE REDUNDANT MODEL PHOTO */
    .hero-split .hero-image-box,
    .hero-image-box {
        display: none !important;
    }

    /* 6. TYPOGRAPHY REFINEMENT */
    .hero-h1,
    .hero-services h1 {
        font-size: 2.1rem !important;
        line-height: 1.1 !important;
        margin-top: 25px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        font-weight: 700 !important;
    }

    .hero-services h1 {
        font-size: 2.4rem !important;
        margin-top: 35px !important;
    }

    .hero-subtext,
    .hero-services p {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        margin-bottom: 15px !important;
        max-width: 100% !important;
        opacity: 0.95 !important;
    }

    .hero-checklist {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto 15px !important;
        font-size: 0.95rem !important;
        padding: 0 !important;
    }

    /* ============================================
       PHASE 10: SERVICES HERO TEXT PROMINENCE
       Replicate the Home hero's dominant text feel
       ============================================ */

    /* Services Hero H1 - Match Home hero boldness */
    .hero-services h1 {
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 4px 12px rgba(0, 0, 0, 0.3) !important;
        letter-spacing: -0.02em !important;
        margin-top: 30px !important;
        margin-bottom: 12px !important;
    }

    /* Gold text glow - same as Home hero */
    .hero-services h1 .gold-text,
    .hero-services h1 span {
        color: #EF8821 !important;
        text-shadow:
            0 0 15px rgba(239, 136, 33, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* Services Hero Paragraph - same prominence as Home subtext */
    .hero-services p,
    .hero-services .hero-content p {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        font-weight: 400 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        margin-bottom: 15px !important;
        max-width: 100% !important;
    }

    /* Ensure hero-content fills width on mobile */
    .hero-services .hero-content {
        max-width: 100% !important;
        padding: 0 5px !important;
    }
}

/* ============================================
   SERVICE CARD BUTTON ALIGNMENT FIX
   Push Explore Now buttons to bottom of each card
   ============================================ */
.service-card-modern {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 100% !important;
}

.service-card-modern .explore-now-btn {
    margin-top: auto !important;
    align-self: center !important;
}

/* ============================================
   TRUSTED PARTNER SECTION — Center alignment fix
   Ensures title, description, and card are all centered
   ============================================ */
.trusted-partner-section .section-title,
.trusted-partner-section .section-title h2,
.trusted-partner-section .section-title p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.trusted-partner-section .section-title p {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}