:root {
            --subcity-primary: #000036;
            --subcity-secondary: #d0142c;
            --subcity-btnblue: #2b8aca;
            --subcity-text-gray: #4b5563;
            --subcity-text-light: #9ca3af;
            --subcity-bg-gray: #f9fafb;
        }

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

        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            background-color: var(--subcity-bg-gray);
            color: #1f2937;
            overflow-x: hidden;
            line-height: 1.5;
        }

      .birmigham-sec{
        text-align: center !important;
         margin-bottom: 20px !important;
          color: #000036 !important;
      }

        /* Layout & Containers */
        .subcity-container {
            max-width: 1700px !important;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 10;
        }

        

        .subcity-flex-row {
            display: flex;
            flex-direction: column;
            gap: 48px;
            align-items: center;
        }

        .subcity-flex-row-reverse {
            display: flex;
            flex-direction: column;
            gap: 64px;
            align-items: center;
        }

        @media (min-width: 1024px) {
            .subcity-flex-row { flex-direction: row; }
            .subcity-flex-row-reverse { flex-direction: row-reverse; }
            .subcity-col-60 { width: 60%; }
            .subcity-col-40 { width: 40%; }
            .subcity-col-50 { width: 50%; }
        }

        /* --- Section 1: Hero (Birmingham) --- */
        .subcity-hero-section {
            background-color: var(--subcity-primary);
            color: white;
            padding: 80px 0 96px 0;
            position: relative;
            /* border-bottom: 4px solid var(--subcity-secondary); */
            overflow: hidden;
            /* max-width: 1700px !important; */
        }

                        .subcity-container-table {
                    max-width: 1200px;
                    margin: 0 auto;    
                    padding: 0 20px;   
                    position: relative;
                    z-index: 10;
                    width: 100%;
                }

        .subcity-hero-bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            opacity: 0.2;
            z-index: 0;
        }

        .subcity-hero-bg-img {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            mix-blend-mode: overlay;
        }

        .subcity-hero-gradient {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to right, var(--subcity-primary), transparent);
        }

        .subcity-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #bfdbfe;
            margin-bottom: 24px;
        }

        .subcity-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #4ade80;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
            animation: subcity-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes subcity-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }

        .subcity-hero-title {
            font-size: 30px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.025em;
            margin-bottom: 32px;
        }

        @media (min-width: 768px) {
            .subcity-hero-title { font-size: 48px; }
        }

        .subcity-hero-desc p {
            color: #d1d5db;
            font-size: 16px;
            line-height: 1.625;
            margin-bottom: 20px;
        }

        @media (min-width: 768px) {
            .subcity-hero-desc p { font-size: 18px; }
        }

        .subcity-desc-border-blue {
            border-left: 2px solid var(--subcity-btnblue);
            padding-left: 16px;
        }

        .subcity-desc-border-none {
            border-left: 2px solid transparent;
            padding-left: 16px;
        }

        .subcity-hero-img-box {
            position: relative;
            background-color: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .subcity-decorative-dots {
            position: absolute;
            top: -12px; right: -12px;
            display: flex;
            gap: 4px;
            background-color: var(--subcity-primary);
            padding: 8px;
            border-radius: 8px;
        }
        .subcity-dot-red { width: 8px; height: 8px; border-radius: 50%; background-color: var(--subcity-secondary); }
        .subcity-dot-blue { width: 8px; height: 8px; border-radius: 50%; background-color: var(--subcity-btnblue); }

        .subcity-img-grayscale {
            width: 100%;
            height: 350px;
            object-fit: cover;
            border-radius: 8px;
            filter: grayscale(100%);
            transition: all 0.5s ease;
        }
        .subcity-img-grayscale:hover {
            filter: grayscale(0%);
        }

        /* --- Section 2: AMD Section --- */
        .subcity-amd-section {
            padding: 80px 0;
            background-color: #ffffff;
        }

        .subcity-subtitle-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .subcity-line-red { height: 2px; width: 48px; background-color: var(--subcity-secondary); }
        .subcity-subtitle-red { color: var(--subcity-secondary); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }

        .subcity-section-title {
            font-size: 30px;
            font-weight: 800;
            color: var(--subcity-primary);
            line-height: 1.25;
            margin-bottom: 24px;
        }
        @media (min-width: 768px) { .subcity-section-title { font-size: 36px; } }

        .subcity-content-text {
            color: var(--subcity-text-gray);
            font-size: 17px;
            line-height: 1.625;
            margin-bottom: 24px;
        }

        .subcity-tech-box {
            background-color: var(--subcity-bg-gray);
            border: 1px solid #e5e7eb;
            padding: 24px;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s;
        }
        .subcity-tech-box:hover { border-color: rgba(208, 20, 44, 0.3); }

        

        .subcity-tech-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            margin: 4px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 700;
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            color: var(--subcity-primary);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: border-color 0.3s;
        }
        .subcity-tech-box:hover .subcity-tech-badge { border-color: rgba(208, 20, 44, 0.5); }

        .subcity-amd-img-wrap {
            position: relative;
            width: 100%;
        }

        .subcity-img-frame-bg1 {
            position: absolute;
            top: -24px; left: -24px;
            width: 100%; height: 100%;
            border: 2px solid #f3f4f6;
            border-radius: 8px;
            z-index: 0;
        }
        .subcity-img-frame-bg2 {
            position: absolute;
            top: 24px; left: 24px;
            width: 100%; height: 100%;
            background-color: var(--subcity-bg-gray);
            border-radius: 8px;
            z-index: 0;
        }
        .subcity-img-front {
            position: relative;
            z-index: 10;
            background-color: #ffffff;
            padding: 8px;
            border-radius: 8px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid #f3f4f6;
        }
        .subcity-amd-img {
            width: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        /* --- Section 3: Intel Section --- */
        .subcity-intel-section {
            padding: 80px 0;
            background-color: #f8fafc;
            border-top: 1px solid #e5e7eb;
            position: relative;
            overflow: hidden;
        }

        .subcity-intel-bg-dots {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: 16px 16px;
            opacity: 0.5;
            z-index: 0;
        }

        .subcity-line-blue { height: 2px; width: 48px; background-color: var(--subcity-btnblue); }
        .subcity-subtitle-blue { color: var(--subcity-btnblue); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }

        .subcity-inline-badge {
            color: var(--subcity-primary);
            font-weight: 700;
            background-color: #eff6ff;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid #dbeafe;
        }

        .subcity-conclusion-box {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            border: 2px solid var(--subcity-btnblue);
            margin-top: 16px;
        }

        .subcity-conclusion-icon {
            color: var(--subcity-btnblue);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .subcity-conclusion-text {
            color: #374151;
            font-size: 15px;
            margin: 0;
        }
        @media (min-width: 768px) { .subcity-conclusion-text { font-size: 16px; } }
        
        .subcity-text-bold-primary { font-weight: 700; color: var(--subcity-primary); }

        .subcity-intel-img-wrap {
            position: relative;
            background-color: #ffffff;
            padding: 12px;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid #e5e7eb;
            overflow: hidden;
            cursor: pointer;
        }

        .subcity-intel-img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            border-radius: 8px;
            transition: transform 0.7s ease;
        }
        .subcity-intel-img-wrap:hover .subcity-intel-img { transform: scale(1.02); }

        .subcity-intel-img-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to top right, rgba(43, 138, 202, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 10;
        }
        .subcity-intel-img-wrap:hover .subcity-intel-img-overlay { opacity: 1; }

        .subcity-floating-stat {
            position: absolute;
            bottom: 24px; left: 24px;
            z-index: 20;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid #f3f4f6;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .subcity-stat-icon {
            width: 40px; height: 40px;
            border-radius: 4px;
            background-color: rgba(0, 0, 54, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--subcity-primary);
        }

        .subcity-stat-text-small { font-size: 12px; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
        .subcity-stat-text-large { font-size: 14px; font-weight: 700; color: var(--subcity-primary); }
      

        /* Subcity Latency Table Styles */
        .subcity-table-container {
            width: 100%;
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 1px solid #e5e7eb;
        }

        .subcity-latency-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            background-color: #ffffff;
        }

        .subcity-latency-table th {
            background-color: var(--subcity-primary);
            color: #ffffff;
            font-weight: 600;
            padding: 16px 24px;
            font-size: 16px;
        }

        .subcity-latency-table td {
            padding: 14px 24px;
            border-bottom: 1px solid #e5e7eb;
            color: var(--subcity-text-gray);
            font-size: 15px;
        }

        .subcity-latency-table tbody tr:nth-child(even) {
            background-color: #f9fafb;
        }

        .subcity-latency-table tbody tr:hover {
            background-color: #f3f4f6;
            transition: background-color 0.2s ease;
        }


         .infrastructure-section {
            font-family: 'Inter', sans-serif;
            background-color: var(--subcity-bg-gray);
            color: var(--subcity-text-gray);
            padding: 5rem 1.5rem;
            line-height: 1.6;
        }

        .infrastructure-container {
            max-width: 1700px;
            margin: 0 auto;
        }

        /* Two Column Layout */
        .split-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr; /* Right side gets slightly more space */
            gap: 4rem;
            align-items: start;
        }

        /* Left Column Styles */
        .infrastructure-header {
            text-align: left;
            position: sticky;
            top: 2rem; /* Sticks to top when scrolling right column */
        }

        .infrastructure-title {
            color: var(--subcity-primary);
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .infrastructure-description {
            font-size: 1.125rem;
            margin-bottom: 1.25rem;
            color: var(--subcity-text-gray);
        }

        /* Right Column (Use Cases) Styles */
        .usecase-header {
            text-align: left;
            margin-bottom: 2.5rem;
        }

        .usecase-title {
            color: var(--subcity-primary);
            font-size: 1.75rem;
            font-weight: 600;
            display: inline-block;
            position: relative;
            padding-bottom: 0.75rem;
        }

        /* Red underline accent */
        .usecase-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0; /* Aligned to left */
            width: 80px;
            height: 4px;
            background-color: var(--subcity-secondary);
            border-radius: 2px;
        }

        /* Cards Grid (1 column stack for the split layout) */
        .usecase-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        /* Individual Card - Adjusted for horizontal layout */
        .usecase-card {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            border: 1px solid #e5e7eb;
            border-left: 4px solid transparent; /* Changed border accent to left */
            transition: all 0.3s ease;
            display: flex;
            flex-direction: row; /* Icon on left, text on right */
            align-items: flex-start;
            gap: 1.5rem;
        }

        /* Card Hover Effect */
        .usecase-card:hover {
            transform: translateX(8px); /* Slide slightly to the right */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border-left-color: var(--subcity-btnblue);
        }

        /* Icon Container */
        .card-icon-wrapper {
            background-color: rgba(43, 138, 202, 0.1);
            color: var(--subcity-btnblue);
            width: 55px; /* Slightly larger for custom images */
            height: 55px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background-color 0.3s ease; /* Removed color transition as it affects text */
        }

        .usecase-card:hover .card-icon-wrapper {
            background-color: var(--subcity-btnblue);
        }

        /* Styling for custom images to fit well and adjust on hover if needed */
        .card-icon-wrapper img {
            width: 30px;
            height: 30px;
            object-fit: contain; /* Ensures the image aspect ratio is maintained */
            transition: filter 0.3s ease; /* Optional: for hover effects like inverting color */
        }
        
        /* Optional: If your images are black/dark, you can invert them to white when hovering the card */
        .usecase-card:hover .card-icon-wrapper img {
             filter: brightness(0) invert(1); /* Turns dark images white */
        }

        /* Card Typography */
        .card-content {
            flex-grow: 1;
        }

        .card-title {
            color: var(--subcity-primary);
            font-size: 1.2rem;
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }

        .card-description {
            color: var(--subcity-text-gray);
            font-size: 0.95rem;
            margin: 0;
            line-height: 1.5;
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .split-layout {
                grid-template-columns: 1fr; /* Stack columns on smaller screens */
                gap: 3rem;
            }
            .infrastructure-header {
                position: relative;
                top: 0;
            }
        }

        @media (max-width: 768px) {
            .infrastructure-title {
                font-size: 2rem;
            }
            .infrastructure-section {
                padding: 4rem 1rem;
            }
            .usecase-card {
                flex-direction: column; /* Stack icon and text on mobile */
                gap: 1rem;
            }
            .usecase-card:hover {
                transform: translateY(-5px); /* Change hover animation for mobile */
            }
        }

         /* =========================================
           SECTION 2: Admin Control (Dark Theme - 1700px)
           ========================================= */
        .admin-section {
            background-color: var(--subcity-primary);
            color: #ffffff;
            padding: 6rem 1.5rem;
        }

        .admin-container {
            max-width: 1700px; /* As requested */
            margin: 0 auto;
        }

        .admin-header {
            text-align: center;
            margin: 0 auto 4rem auto;
        }

        .admin-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #ffffff;
            line-height: 1.2;
        }

        .admin-description {
            font-size: 1.15rem;
            color: var(--subcity-text-light);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .admin-highlight-text {
            font-size: 1.2rem;
            font-weight: 500;
            color: #ffffff;
            margin-top: 2rem;
            display: inline-block;
            border-bottom: 2px solid var(--subcity-btnblue);
            padding-bottom: 0.5rem;
        }

        /* 3 Column Grid for Sub Points */
        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
        }

        .admin-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 2.5rem 2rem;
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Subtle glowing hover effect */
        .admin-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(43, 138, 202, 0.5); /* btnblue with opacity */
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
        }

        .admin-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--subcity-btnblue);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .admin-icon-wrapper {
            width: 75px;
            height: 75px;
            background: rgba(43, 138, 202, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.75rem;
            transition: transform 0.4s ease;
        }

        .admin-card:hover .admin-icon-wrapper {
            transform: scale(1.1);
            background: rgba(43, 138, 202, 0.25);
        }

        .admin-icon-wrapper img {
            filter: brightness(0) invert(1); /* Makes icons white */
            width: 32px;
            height: 32px;
        }

        .admin-card-title {
            font-size: 1.35rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #ffffff;
        }

        .admin-card-desc {
            font-size: 1rem;
            color: #ffffff;
            line-height: 1.6;
            margin: 0;
        }

        @media (max-width: 992px) {
            .split-layout {
                grid-template-columns: 1fr; 
                gap: 3rem;
            }
            .infrastructure-header {
                position: relative;
                top: 0;
            }
        }

        @media (max-width: 768px) {
            .infrastructure-title, .admin-title {
                font-size: 2rem;
            }
            .infrastructure-section, .admin-section {
                padding: 4rem 1rem;
            }
            .usecase-card {
                flex-direction: column;
                gap: 1rem;
            }
            .usecase-card:hover {
                transform: translateY(-5px); 
            }
        }
        /* Box 4 පේළියට 2 බැගින් Grid එකක් කිරීමට */
.usecase-two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns Layout */
    gap: 24px; /* Box අතර පරතරය */
    margin-top: 40px;
}

/* Header එක මුළු පළලටම ගැනීමට */
.infrastructure-top-header {
    width: 100%;
    margin-bottom: 30px;
    text-align: left; /* මැදට ගැනීමට අවශ්‍ය නම් center කරන්න */
}

/* Mobile Screen වලදී Auto 1 Column වීමට (Responsive) */
@media (max-width: 768px) {
    .usecase-two-column-grid {
        grid-template-columns: 1fr;
    }
}

.london-infrastructure-section{
    padding: 20px 80px 20px 80px !important;
}