/* ============================================================
           CUSTOM PROPERTIES
           ============================================================ */
        :root {
            --primary: #0b2b4a;
            --primary-light: #1a3f62;
            --accent: #2563eb;
            --accent-light: #3b82f6;
            --gold: #f59e0b;
        }

        /* ============================================================
           KEYFRAME ANIMATIONS
           ============================================================ */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(36px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes pulseGlow {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.25);
            }
            50% {
                box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
            }
        }

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

        @keyframes countUp {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        .animate-slide-in-left {
            animation: slideInLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .animate-slide-in-right {
            animation: slideInRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        /* ============================================================
           SCROLL REVEAL
           ============================================================ */
        .reveal {
            opacity: 0;
            transform: translateY(32px) scale(0.96);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Stagger children */
        .stagger-children>* {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .stagger-children.visible>*:nth-child(1) {
            transition-delay: 0.05s;
        }
        .stagger-children.visible>*:nth-child(2) {
            transition-delay: 0.12s;
        }
        .stagger-children.visible>*:nth-child(3) {
            transition-delay: 0.19s;
        }
        .stagger-children.visible>*:nth-child(4) {
            transition-delay: 0.26s;
        }
        .stagger-children.visible>*:nth-child(5) {
            transition-delay: 0.33s;
        }
        .stagger-children.visible>*:nth-child(6) {
            transition-delay: 0.40s;
        }
        .stagger-children.visible>*:nth-child(7) {
            transition-delay: 0.47s;
        }
        .stagger-children.visible>*:nth-child(8) {
            transition-delay: 0.54s;
        }

        .stagger-children.visible>* {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================================
           HERO BACKGROUND
           ============================================================ */
        .hero-gradient {
            background: linear-gradient(160deg, #0b2b4a 0%, #1a3f62 40%, #2563eb 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-gradient::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 10% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 90% 70%, rgba(37, 99, 235, 0.10) 0%, transparent 50%),
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        /* Floating shapes */
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            animation: float 8s ease-in-out infinite alternate;
        }

        .floating-shape:nth-child(1) {
            width: 300px;
            height: 300px;
            top: -80px;
            right: -60px;
            animation-delay: 0s;
        }

        .floating-shape:nth-child(2) {
            width: 200px;
            height: 200px;
            bottom: -40px;
            left: -40px;
            animation-delay: 2s;
            background: rgba(59, 130, 246, 0.05);
        }

        /* ============================================================
           STAT COUNTER
           ============================================================ */
        .stat-number {
            font-variant-numeric: tabular-nums;
            display: inline-block;
        }

        /* ============================================================
           BRANCH CARD
           ============================================================ */
        .branch-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                background 0.3s ease;
            will-change: transform;
            position: relative;
            overflow: hidden;
        }

        .branch-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                    rgba(37, 99, 235, 0.04),
                    rgba(37, 99, 235, 0.01));
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            border-radius: inherit;
        }

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

        .branch-card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 24px 48px -16px rgba(37, 99, 235, 0.18),
                0 8px 24px -6px rgba(37, 99, 235, 0.06);
            border-color: rgba(37, 99, 235, 0.15);
            background: rgba(255, 255, 255, 0.92);
        }

        .branch-card .icon-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                color 0.3s ease;
        }

        .branch-card:hover .icon-circle {
            transform: scale(1.1) rotate(-4deg);
        }

        /* HQ Card special styling */
        .hq-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
        }

        .hq-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -12px rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.12);
        }

        .hq-badge {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.2rem 0.75rem;
            border-radius: 9999px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        /* ============================================================
           SEARCH BAR
           ============================================================ */
        .search-input {
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
        }

        .search-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
            transform: scale(1.01);
        }

        .search-input:hover {
            border-color: #93bbfc;
        }

        /* ============================================================
           BREADCRUMB
           ============================================================ */
        .breadcrumb-link {
            transition: color 0.2s ease;
        }

        .breadcrumb-link:hover {
            color: #93bbfc;
        }
.edit-text{
    justify-content:center;
    margin-top:5px;
}
        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 640px) {
            .floating-shape {
                display: none;
            }
            .stat-number {
                font-size: 2rem !important;
            }
            .hq-card {
                padding: 1.25rem !important;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .stat-number {
                font-size: 2.5rem !important;
            }
        }