/* ==========================================================================

   AS TECH SOLUTION - Modern Dark Theme & responsive Design System

   ========================================================================== */



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



:root {

    /* Color Palette */

    --bg-main: #060A12;

    --bg-secondary: #0A101D;

    --bg-card: rgba(15, 23, 42, 0.7);

    --bg-card-hover: rgba(22, 33, 58, 0.85);

    --bg-glass: rgba(255, 255, 255, 0.03);



    --primary-blue: #0066FF;

    --primary-light: #0066FF;

    --primary-dark: #0047B3;

    --accent-cyan: #0066FF;

    --accent-glow: rgba(0, 102, 255, 0.4);



    --text-heading: #FFFFFF;

    --text-body: #94A3B8;

    --text-muted: #64748B;

    --text-bright: #F8FAFC;



    --border-color: rgba(255, 255, 255, 0.08);

    --border-glow: rgba(0, 102, 255, 0.3);



    /* Typography */

    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;



    /* Transitions */

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



    /* Radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-full: 10px;

}



/* Reset & Base Styles */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

    margin: 0;

    padding: 0;

}



body {

    font-family: var(--font-family);

    background-color: var(--bg-main);

    color: var(--text-body);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    margin: 0;

    padding: 0;

}



/* Site-wide premium page loader */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    background: radial-gradient(circle at 50% 45%, #0f274c 0%, #070e1c 42%, #03060d 100%);

    transition: opacity .55s ease, visibility .55s ease;

}



.page-loader.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



.loader-mark {

    position: relative;

    width: 104px;

    height: 104px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border: 1px solid rgba(0, 102, 255, .35);

    background: rgba(6, 16, 35, .72);

    box-shadow: 0 0 45px rgba(0, 102, 255, .4), inset 0 0 22px rgba(0, 102, 255, .15);

}



.loader-mark::before {

    content: '';

    position: absolute;

    inset: -8px;

    border: 3px solid transparent;

    border-top-color: #0066FF;

    border-right-color: #0052CC;

    border-radius: 50%;

    animation: loader-spin 1s linear infinite;

}



.loader-mark::after {

    content: '';

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(0, 102, 255, .3);

    border-radius: 50%;

    animation: loader-pulse 1.4s ease-in-out infinite;

}



.loader-mark img {

    position: relative;

    z-index: 1;

    width: 58px;

    height: 58px;

    object-fit: contain;

    border-radius: 50%;

}



.loader-text {

    margin-top: 1.25rem;

    color: #a0c4ff;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .24em;

    text-align: center;

}



.loader-wrap {

    display: flex;

    flex-direction: column;

    align-items: center;

}



@keyframes loader-spin {

    to {

        transform: rotate(360deg);

    }

}



@keyframes loader-pulse {

    50% {

        transform: scale(.83);

        opacity: .4;

    }

}



a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}



ul {

    list-style: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



button,

input {

    font-family: inherit;

    outline: none;

    border: none;

}



.container {

    width: 90%;

    max-width: 90%;

    margin: 0 auto;

    padding: 0;

}



/* Section Styling Helpers */

.section-padding {

    padding: 6rem 0;

}



.text-center {

    text-align: center;

}



.text-gradient {

    background: linear-gradient(135deg, #0066FF 0%, #0066FF 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    display: inline-block;

}



.section-badge {

    display: inline-flex;

    align-items: center;

    text-align: center;

    gap: 0.5rem;

    padding: 0.4rem 1rem;

    /* background: rgba(0, 102, 255, 0.12);

    border: 1px solid rgba(0, 102, 255, 0.3); */

    border-radius: var(--radius-full);

    color: var(--primary-light);

    font-size: 0.825rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 1rem;

}



.section-title {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--text-heading);

    line-height: 1.25;

    margin-bottom: 1rem;

}



.section-subtitle {

    font-size: 1.05rem;

    color: var(--text-body);

    max-width: 650px;

    margin: 0 auto 3rem auto;

}



/* Glassmorphism Cards */

.glass-card {

    background: var(--bg-card);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    transition: var(--transition);

}



.glass-card:hover {

    border-color: var(--border-glow);

    box-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.25);

    transform: translateY(-4px);

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.6rem;

    padding: 0.85rem 1.75rem;

    border-radius: var(--radius-full);

    font-weight: 600;

    font-size: 0.95rem;

    cursor: pointer;

    transition: var(--transition);

}



.btn-primary {

    background: #0066ff;

    color: #ffffff !important;

    border: 1px solid #0066ff;

    box-shadow: 0 4px 18px rgba(0, 102, 255, 0.35);

}



.btn-primary:hover {

    background: #0052cc !important;

    border-color: #0052cc !important;

    color: #ffffff !important;

    box-shadow: 0 8px 28px rgba(0, 102, 255, 0.45) !important;

    transform: translateY(-2px);

}



.btn-primary:hover i {

    color: #ffffff !important;

}



.btn-outline {

    background: transparent;

    border: 1px solid #0066ff;

    color: #0066ff !important;

}



.btn-outline:hover {

    background: #0066ff !important;

    border-color: #0066ff !important;

    color: #ffffff !important;

    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.35) !important;

    transform: translateY(-2px);

}



.btn-outline:hover i {

    color: #ffffff !important;

}



.btn-sm {

    padding: 0.5rem 1.25rem;

    font-size: 0.875rem;

}



/* ==========================================================================

   Header & Navigation

   ========================================================================== */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    padding: 1.5rem 0;

    transition: var(--transition);

    background: transparent;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    border-bottom: 1px solid transparent;

}



.nav-dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 200px;

    background: rgba(10, 16, 29, 0.95);

    border: 1px solid rgba(0, 200, 255, 0.2);

    border-radius: var(--radius-md);

    padding: 0.5rem 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);

    backdrop-filter: blur(10px);

    z-index: 1000;

}



.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* Mega Dropdown Menu */

.mega-dropdown {

    min-width: 550px;

    padding: 1.25rem;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    left: 50%;

    transform: translateX(-50%) translateY(10px);

}



/* Dark theme mega dropdown */

html[data-theme="dark"] .mega-dropdown {

    background: rgba(15, 23, 42, 0.95);

    border: none;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

}



/* Light theme mega dropdown */

html[data-theme="light"] .mega-dropdown {

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(0, 0, 0, 0.1);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

}



.nav-dropdown:hover .mega-dropdown {

    transform: translateX(-50%) translateY(0);

}



.dropdown-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}



.dropdown-column {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.dropdown-link-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: #2c3e50;

    text-decoration: none;

    transition: all 0.3s ease;

    border-radius: 8px;

    font-size: 0.9rem;

    font-weight: 500;

    background: transparent;

    border: none;

}



/* Dark theme dropdown link items */

html[data-theme="dark"] .dropdown-link-item {

    color: #e2e8f0;

}



html[data-theme="dark"] .dropdown-link-item i {

    color: #0066ff;

}



html[data-theme="dark"] .dropdown-link-item:hover {

    color: #0066ff;

    transform: translateX(3px);

}



html[data-theme="dark"] .dropdown-link-item:hover i {

    color: #0066ff;

}



/* Light theme dropdown link items */

html[data-theme="light"] .dropdown-link-item {

    color: #2c3e50;

    background: transparent !important;

}



html[data-theme="light"] .dropdown-link-item i {

    color: #007bff;

    background: transparent;

}



html[data-theme="light"] .dropdown-link-item:hover {

    color: #007bff !important;

    transform: translateX(3px);

    background: transparent !important;

}



html[data-theme="light"] .dropdown-link-item:hover i {

    color: #007bff !important;

    background: transparent !important;

}



.dropdown-link-item i {

    color: #007bff;

    font-size: 1rem;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

   

    padding: 6px;

    border-radius: 6px;

    flex-shrink: 0;

}



/* Proposal Button */

.btn-proposal {

    background: #007bff;

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 8px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

    border: none;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.btn-proposal:hover {

    background: #0056b3;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);

}



html[data-theme="light"] .btn-proposal {

    background: #007bff;

    color: white;

}



html[data-theme="light"] .btn-proposal:hover {

    background: #0056b3;

}



.dropdown-link {

    display: block;

    padding: 0.75rem 1.5rem;

    color: var(--text-muted);

    text-decoration: none;

    transition: var(--transition);

    font-size: 0.9rem;

}



.dropdown-link:hover {

    color: var(--accent-cyan);

    background: rgba(0, 102, 255, 0.1);

    padding-left: 2rem;

}



/* ==========================================================================

   Navbar Contact Dropdown Menu (Matching User Screenshot)

   ========================================================================== */

.contact-dropdown-menu {

    min-width: 290px;

    padding: 0.75rem;

    background: #ffffff;

    border-radius: 20px;

    border: none;

    box-shadow: 0 16px 45px rgba(0, 50, 150, 0.12);

}



html[data-theme="dark"] .contact-dropdown-menu {

    background: #0f172a;

    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);

}



.contact-dropdown-item {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.75rem 0.85rem;

    border-radius: 14px;

    text-decoration: none;

    transition: all 0.25s ease;

}



.contact-dropdown-item:hover {

    background: rgba(0, 102, 255, 0.06);

    transform: translateX(4px);

    padding-left: 0.85rem !important;

}



html[data-theme="dark"] .contact-dropdown-item:hover {

    background: #1e293b;

}



.c-drop-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.95rem;

    flex-shrink: 0;

}



.c-drop-icon.icon-blue { background: rgba(0, 102, 255, 0.1); color: #0066ff; }

.c-drop-icon.icon-cyan { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }

.c-drop-icon.icon-purple { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.c-drop-icon.icon-green { background: rgba(34, 197, 94, 0.1); color: #22c55e; }



.c-drop-title {

    display: block;

    font-size: 0.92rem;

    font-weight: 700;

    color: #1e293b;

}



html[data-theme="dark"] .c-drop-title {

    color: #f1f5f9;

}



.c-drop-sub {

    display: block;

    font-size: 0.72rem;

    color: #64748b;

}



html[data-theme="dark"] .c-drop-sub {

    color: #94a3b8;

}



/* ==========================================================================

   Multi-Form Contact Tabs & Styling

   ========================================================================== */

.contact-tabs-header {

    display: flex;

    justify-content: center;

    gap: 0.75rem;

    flex-wrap: wrap;

    margin-bottom: 2.5rem;

}



.c-tab-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.85rem 1.6rem;

    border-radius: 999px;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #4a5568;

    font-weight: 700;

    font-size: 0.92rem;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(0,0,0,0.03);

}



.c-tab-btn i {

    font-size: 1rem;

    color: #0066ff;

}



.c-tab-btn:hover,

.c-tab-btn.active {

    background: #0066ff;

    color: #ffffff !important;

    border-color: #0066ff;

    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);

}



.c-tab-btn:hover i,

.c-tab-btn.active i {

    color: #ffffff !important;

}



html[data-theme="dark"] .c-tab-btn {

    background: #0f172a;

    border-color: #334155;

    color: #cbd5e1;

}



html[data-theme="dark"] .c-tab-btn.active {

    background: #0066ff;

    color: #ffffff !important;

}



.contact-tab-pane {

    display: none;

}



.contact-tab-pane.active {

    display: block;

    animation: fadeIn 0.4s ease-in-out;

}



.site-header.scrolled {

    padding: 0.85rem 0;

    background: rgba(6, 10, 18, 0.92);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    border-bottom: 1px solid rgba(0, 102, 255, 0.2);

}



.header-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



/* Brand Logo */

.brand-logo {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-weight: 800;

    font-size: 1.35rem;

    color: var(--text-heading);

    letter-spacing: -0.02em;

}



.site-logo-img {

    height: 100px;

    width: 100px;

    object-fit: contain;

    display: block;

    filter: drop-shadow(0 2px 10px rgba(0, 102, 255, 0.3));

}



.logo-badge {

    width: 38px;

    height: 38px;

    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    font-weight: 900;

    font-size: 1.1rem;

    box-shadow: 0 0 15px var(--accent-glow);

}



.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}



.brand-title {

    color: #FFFFFF;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 0.05em;

}



.brand-subtitle {

    color: var(--primary-light);

    font-size: 0.65rem;

    letter-spacing: 0.2em;

    font-weight: 600;

}



/* Desktop Nav Links */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 2rem;

}



.nav-link {

    color: var(--text-body);

    font-size: 0.925rem;

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 0.35rem;

    position: relative;

    padding: 0.4rem 0;

}



.nav-link:hover,

.nav-link.active {

    color: var(--text-heading);

}



.nav-link.active::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));

    border-radius: 2px;

}



/* Header Right Actions */

.header-actions {

    display: flex;

    align-items: center;

    gap: 1.25rem;

}



.phone-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-full);

    color: var(--text-bright);

    font-size: 0.875rem;

    font-weight: 600;

    transition: var(--transition);

}



.phone-link:hover {

    background: linear-gradient(135deg, var(--primary-blue), var(--primary-light));

    border-color: transparent;

    color: #FFFFFF;

    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4);

    transform: translateY(-2px);

}



.phone-link:hover i {

    color: #FFFFFF !important;

}



/* Mobile Header Controls */

.mobile-hamburger-btn {

    display: none;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--border-color);

    color: var(--text-heading);

    width: 42px;

    height: 42px;

    border-radius: 10px;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    cursor: pointer;

    transition: var(--transition);

}



.mobile-hamburger-btn:hover {

    background: rgba(0, 102, 255, 0.2);

    border-color: var(--primary-blue);

}



.mobile-call-btn {

    display: none;

    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));

    color: #FFF;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}



/* Offcanvas Drawer (Mobile Navigation - Left to Right) */

.mobile-drawer-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(6px);

    z-index: 1001;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.mobile-drawer-backdrop.active {

    opacity: 1;

    visibility: visible;

}



.mobile-drawer {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    max-width: 100%;

    height: 100vh;

    background: #090E1A;

    border-right: 1px solid var(--border-glow);

    z-index: 1002;

    transform: translateX(-100%);

    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    padding: 1.75rem 1.5rem;

    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.8);

    overflow-y: auto;

}



.mobile-drawer.active {

    transform: translateX(0);

}



.drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

    margin-bottom: 1.5rem;

}



.drawer-close-btn {

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-heading);

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    cursor: pointer;

}



.drawer-nav-list {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    margin-bottom: 2rem;

}



.drawer-nav-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.85rem 1rem;

    color: var(--text-bright);

    font-size: 1rem;

    font-weight: 600;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid transparent;

}



.drawer-nav-link:hover,

.drawer-nav-link.active {

    background: rgba(0, 102, 255, 0.15);

    border-color: rgba(0, 102, 255, 0.4);

    color: var(--accent-cyan);

}



/* Mobile Drawer Dropdown Accordion (Services & Contact) */

.drawer-dropdown {

    width: 100%;

}



.drawer-dropdown-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.85rem 1rem;

    color: var(--text-bright);

    font-size: 1rem;

    font-weight: 600;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid transparent;

    cursor: pointer;

    transition: var(--transition);

}



.drawer-dropdown-btn .dropdown-arrow {

    font-size: 0.75rem;

    transition: transform 0.3s ease;

}



.drawer-dropdown.is-open .drawer-dropdown-btn {

    background: rgba(0, 102, 255, 0.15);

    border-color: rgba(0, 102, 255, 0.4);

    color: var(--primary-blue);

}



.drawer-dropdown.is-open .drawer-dropdown-btn .dropdown-arrow {

    transform: rotate(180deg);

}



.drawer-dropdown-menu {

    display: none;

    list-style: none;

    padding: 0.4rem 0 0.5rem 1.2rem;

    margin: 0;

    flex-direction: column;

    gap: 0.35rem;

}



.drawer-dropdown.is-open .drawer-dropdown-menu {

    display: flex;

}



.drawer-dropdown-link {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.55rem 0.85rem;

    color: var(--text-body);

    font-size: 0.9rem;

    font-weight: 500;

    border-radius: 8px;

    transition: var(--transition);

}



.drawer-dropdown-link i {

    font-size: 0.85rem;

    color: var(--primary-blue);

    width: 16px;

    text-align: center;

}



.drawer-dropdown-link:hover {

    color: var(--primary-blue);

    background: rgba(0, 102, 255, 0.08);

}



.drawer-footer {

    margin-top: auto;

    padding-top: 1.5rem;

    border-top: 1px solid var(--border-color);

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* ==========================================================================

   Hero Section

   ========================================================================== */

.hero-section {

    padding-top: 9rem;

    padding-bottom: 5rem;

    position: relative;

    overflow: hidden;

}



/* Full-screen video hero (home page) */

.video-hero {

    min-height: 100svh;

    padding: 9rem 0 3rem;

    display: flex;

    align-items: center;

    isolation: isolate;

    background: #060A12;

}



.video-hero-media,

.video-hero-overlay {

    position: absolute;

    inset: 0;

}



.video-hero-media {

    z-index: -2;

    overflow: hidden;

}



.video-hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 1.2s ease;

    filter: saturate(.8) contrast(1.08);

}



.video-hero-slide.is-active {

    opacity: 1;

}



.video-hero-overlay {

    z-index: -1;

    background: linear-gradient(120deg, rgba(3, 8, 20, .93) 4%, rgba(4, 12, 30, .78) 48%, rgba(0, 49, 104, .57) 100%);

}



.video-hero-overlay::after {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 50% 15%, rgba(0, 200, 255, .15), transparent 39%);

}



.video-hero-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3.2rem;

    text-align: center;

}



.video-hero-content {

    max-width: 890px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.video-hero-badge {

    opacity: 1;

    visibility: visible;

    width: max-content;

    margin-bottom: 1.25rem;

}



.video-hero .hero-title {

    max-width: 760px;

    font-size: clamp(2rem, 3.8vw, 3.5rem);

    text-shadow: 0 4px 25px rgba(0, 0, 0, .5);

}



.typing-cursor {

    color: var(--accent-cyan);

    font-weight: 400;

    animation: typing-cursor-blink .7s step-end infinite;

}



#animated-text .typing-primary {

    color: var(--text-heading);

}



#animated-text .typing-accent {

    color: var(--accent-cyan);

}



@keyframes typing-cursor-blink {

    50% {

        opacity: 0;

    }

}



.video-hero .hero-description {

    max-width: 700px;

    color: #d6e4f8;

    font-size: 1.1rem;

}



.video-hero .hero-btns {

    justify-content: center;

    margin-bottom: 0;

}



.video-hero .btn-outline {

    background: rgba(6, 10, 18, .42);

    border-color: rgba(255, 255, 255, .45);

    color: var(--text-heading);

}



.video-hero .btn-outline:hover {

    border-color: var(--accent-cyan);

    background: rgba(0, 102, 255, .2);

}



.video-hero-services {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 1rem;

}



.video-hero-service {

    position: relative;

    min-height: 110px;

    padding: 1.2rem .8rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: .65rem;

    overflow: hidden;

    border: 1px solid rgba(125, 196, 255, .3);

    border-radius: var(--radius-md);

    background: linear-gradient(45deg, rgba(255, 255, 255, .05), rgba(96, 165, 250, .16));

    backdrop-filter: blur(12px) saturate(180%);

    color: var(--text-bright);

    font-weight: 700;

    box-shadow: 0 8px 32px rgba(0, 0, 0, .2), inset 0 0 20px rgba(96, 165, 250, .12);

    animation: hero-card-float 6s ease-in-out infinite;

}



.video-hero-service::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(45deg, transparent 25%, rgba(96, 165, 250, .2) 45%, transparent 75%);

    transform: rotate(45deg);

    transition: transform .8s ease, opacity .5s ease;

    opacity: 0;

}



.video-hero-service:nth-child(2) {

    animation-delay: .75s;

}



.video-hero-service:nth-child(3) {

    animation-delay: 1.5s;

}



.video-hero-service:nth-child(4) {

    animation-delay: 2.25s;

}



.video-hero-service:nth-child(5) {

    animation-delay: 3s;

}



.video-hero-service i,

.video-hero-service span {

    position: relative;

    z-index: 1;

}



.video-hero-service i {

    color: var(--accent-cyan);

    font-size: 1.45rem;

    text-shadow: 0 0 18px rgba(96, 165, 250, .6);

    transition: transform .5s ease;

}



.video-hero-service:hover {

    color: #fff;

    border-color: var(--accent-cyan);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 0 30px rgba(96, 165, 250, .25);

    animation-play-state: paused;

    transform: scale(1.08) rotate3d(.5, -.5, 0, 5deg);

}



.video-hero-service:hover::before {

    opacity: 1;

    transform: rotate(45deg) translateY(115%);

}



.video-hero-service:hover i {

    transform: rotate(360deg) scale(1.16);

}



@keyframes hero-card-float {



    0%,

    100% {

        transform: translateY(0) rotate(-1deg);

    }



    50% {

        transform: translateY(-16px) rotate(1.5deg);

    }

}



/* Premium video treatments for the remaining home-page sections */

.about-section,

.services-section,

.projects-section,

.testimonials-section,

.metrics-section,

.blog-section,

.cta-section {

    position: relative;

    overflow: hidden;

}



.about-section>.container,

.services-section>.container,

.projects-section>.container {

    position: relative;

    z-index: 1;

}



.section-video-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background: #07101f;

}



.section-video-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(115deg, rgba(6, 10, 18, .94), rgba(5, 16, 37, .86));

}



.section-video-bg video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: .34;

    filter: saturate(.8) contrast(1.15);

}



.section-video-subtle video {

    opacity: .2;

}



.metrics-section {

    background: linear-gradient(90deg, #07182f, #0b1020 45%, #06172b);

    border-top: 1px solid rgba(0, 200, 255, .15);

    border-bottom: 1px solid rgba(0, 200, 255, .15);

}



.metric-card {

    transition: transform .35s ease, background .35s ease;

}



.metric-card:hover {

    transform: translateY(-8px);

    background: rgba(0, 102, 255, .12);

}



.about-img-box {

    box-shadow: 0 25px 70px rgba(0, 0, 0, .45);

}



.services-section::after,

.projects-section::after {

    content: '';

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: rgba(0, 102, 255, .14);

    filter: blur(70px);

    right: -180px;

    bottom: -180px;

    pointer-events: none;

}



.service-card,

.portfolio-card,

.testimonial-card,

.blog-card {

    border-color: rgba(92, 177, 255, .16);

}



.service-card:hover,

.portfolio-card:hover,

.testimonial-card:hover,

.blog-card:hover {

    border-color: rgba(0, 200, 255, .55);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .3), 0 0 30px rgba(0, 102, 255, .13);

}



.testimonials-section {

    background: radial-gradient(circle at 10% 15%, rgba(0, 102, 255, .16), transparent 31%), #080f1c;

}



.blog-section {

    background: linear-gradient(135deg, #080f1c, #07172b);

}



.cta-section {

    background: transparent;

}



.cta-box {

    border: 1px solid rgba(0, 200, 255, .3);

    box-shadow: 0 18px 55px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .06);

}



/* FAQ */

.faq-section {

    padding: 7rem 0;

    background: linear-gradient(145deg, #060a12, #09172a);

    position: relative;

    overflow: hidden;

}



.faq-section::before {

    content: '';

    position: absolute;

    width: 520px;

    height: 520px;

    left: -260px;

    top: 5%;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(0, 102, 255, .2), transparent 68%);

}



.faq-layout {

    position: relative;

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 6rem;

    align-items: center;

}



.faq-intro h2 {

    margin: 1.8rem 0 1.4rem;

    color: var(--text-heading);

    font-size: clamp(3.2rem, 5.4vw, 5.4rem);

    line-height: .95;

    letter-spacing: -.065em;

}



.faq-intro h2 span {

    color: var(--accent-cyan);

}



.faq-intro p {

    max-width: 370px;

    font-size: 1rem;

}



.faq-eyebrow {

    width: max-content;

    padding: .48rem 1rem;

    border: 1px solid rgba(0, 200, 255, .32);

    border-radius: 99px;

    background: rgba(0, 102, 255, .12);

    color: var(--accent-cyan);

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .09em;

}



.faq-eyebrow i {

    margin-right: .45rem;

}



.faq-letters {

    position: relative;

    height: 190px;

    margin: 2.5rem 0 0 1rem;

}



.faq-letters span {

    position: absolute;

    width: 112px;

    height: 112px;

    display: grid;

    place-items: center;

    border-radius: 32px;

    color: #fff;

    font-size: 3.7rem;

    font-weight: 800;

    box-shadow: 0 18px 35px rgba(0, 0, 0, .35);

    transform: rotate(-12deg);

}



.faq-letters span:nth-child(1) {

    left: 0;

    top: 0;

    background: linear-gradient(135deg, #0066ff, #0066ff);

}



.faq-letters span:nth-child(2) {

    left: 86px;

    top: 42px;

    z-index: 2;

    background: linear-gradient(135deg, #0066ff, #0066ff);

    transform: rotate(8deg);

}



.faq-letters span:nth-child(3) {

    left: 7px;

    top: 105px;

    background: linear-gradient(135deg, #0066ff, #0066ff);

    transform: rotate(12deg);

}



.faq-list {

    display: grid;

    gap: .85rem;

}



.faq-item {

    border: 1px solid var(--border-color);

    border-radius: 18px;

    background: rgba(255, 255, 255, .035);

    overflow: hidden;

    transition: var(--transition);

}



.faq-item.is-open {

    border-color: rgba(0, 200, 255, .66);

    background: linear-gradient(115deg, rgba(0, 102, 255, .15), rgba(10, 16, 29, .8));

    box-shadow: 0 14px 35px rgba(0, 0, 0, .22);

}



.faq-question {

    width: 100%;

    padding: 1.45rem 1.7rem;

    display: grid;

    grid-template-columns: 3.7rem 1fr 1.4rem;

    align-items: center;

    gap: .75rem;

    background: transparent;

    color: var(--text-heading);

    cursor: pointer;

    text-align: left;

    font-size: 1.03rem;

    font-weight: 700;

}



.faq-question i {

    color: var(--accent-cyan);

    text-align: right;

    font-size: 1rem;

}



.faq-number {

    color: var(--accent-cyan);

    font-size: 1.2rem;

    font-weight: 800;

}



.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows .35s ease;

}



.faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 4.85rem;

    color: #b8cce4;

}



.faq-item.is-open .faq-answer {

    grid-template-rows: 1fr;

}



.faq-item.is-open .faq-answer p {

    padding-bottom: 1.55rem;

}



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

    .typing-cursor {

        animation: none;

    }



    .video-hero-service {

        animation: none;

    }

}



.hero-glow-bg {

    position: absolute;

    top: -10%;

    left: 50%;

    transform: translateX(-50%);

    width: 800px;

    height: 600px;

    background: radial-gradient(circle, rgba(0, 102, 255, 0.25) 0%, rgba(0, 200, 255, 0.08) 40%, rgba(6, 10, 18, 0) 70%);

    pointer-events: none;

    z-index: 0;

}



.hero-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 3rem;

    align-items: center;

    position: relative;

    z-index: 1;

}



.hero-grid-centered {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 60vh;

}



.hero-content-centered {

    text-align: center;

    max-width: 800px;

    margin: 0 auto;

}



.hero-content-centered .hero-btns {

    justify-content: center;

}



.hero-content-centered .hero-rating {

    justify-content: center;

    margin-top: 2rem;

}



.hero-content-centered .hero-description {

    text-align: center !important;





}



.hero-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.hero-title {

    font-size: 3.25rem;

    font-weight: 800;

    line-height: 1.18;

    color: var(--text-heading);

    margin-bottom: 1.25rem;

    letter-spacing: -0.02em;

}



.hero-description {

    font-size: 1.1rem;

    color: var(--text-body);

    margin-bottom: 2rem;

    max-width: 580px;

}



.hero-btns {

    display: flex;

    align-items: center;

    gap: 1.25rem;

    margin-bottom: 2.5rem;

    flex-wrap: wrap;

}



.hero-rating {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.75rem 1.25rem;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

}



.avatar-group {

    display: flex;

    align-items: center;

}



.avatar-group img {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 2px solid var(--bg-main);

    margin-left: -8px;

}



.avatar-group img:first-child {

    margin-left: 0;

}



.stars-info {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}



.stars-row {

    color: #FFB800;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    gap: 0.25rem;

}



.rating-text {

    font-size: 0.8rem;

    color: var(--text-heading);

    font-weight: 600;

}



.trusted-text {

    font-size: 0.75rem;

    color: var(--text-muted);

}



/* Hero Right Mockup Graphics */

.hero-visual {

    position: relative;

    width: 100%;

}



.hero-main-mockup {

    position: relative;

    border-radius: var(--radius-lg);

    padding: 12px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border-glow);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);

}



.mockup-inner {

    border-radius: var(--radius-md);

    overflow: hidden;

    background: #0B1220;

    position: relative;

    aspect-ratio: 16/10;

}



.dashboard-screen {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Floating Badges on Hero Visual */

.floating-badge {

    position: absolute;

    padding: 0.85rem 1.25rem;

    background: rgba(10, 16, 29, 0.9);

    backdrop-filter: blur(16px);

    border: 1px solid var(--border-glow);

    border-radius: var(--radius-md);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    gap: 0.85rem;

    z-index: 2;

    animation: float 4s ease-in-out infinite alternate;

}



@keyframes float {

    0% {

        transform: translateY(0px);

    }



    100% {

        transform: translateY(-10px);

    }

}



.badge-top-left {

    top: -20px;

    left: -20px;

}



.badge-top-right {

    top: 15px;

    right: -20px;

    animation-delay: 1s;

}



.badge-bottom-right {

    bottom: -20px;

    right: 10px;

    animation-delay: 2s;

}



.badge-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    background: rgba(0, 102, 255, 0.2);

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}



.badge-val {

    font-weight: 800;

    color: var(--text-heading);

    font-size: 1rem;

}



.badge-label {

    font-size: 0.75rem;

    color: var(--text-muted);

}



.badge-green {

    color: #10B981;

    font-size: 0.75rem;

    font-weight: 700;

}



/* Hero Bottom Pill Features */

.hero-pill-bar {

    margin-top: 4rem;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.25rem;

}



.pill-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    padding: 1rem 1.25rem;

    background: rgba(255, 255, 255, 0.025);

    border-radius: var(--radius-md);

    color: var(--text-bright);

    font-weight: 600;

    font-size: 0.95rem;

    transition: var(--transition);

}



.pill-item i {

    color: var(--primary-light);

    font-size: 1.15rem;

}



.pill-item:hover {

    background: rgba(0, 102, 255, 0.1);

    border-color: var(--primary-blue);

    transform: translateY(-3px);

}



/* ==========================================================================

   Brand Logos Ticker / Marquee

   ========================================================================== */

.brand-ticker-section {

    padding: 2.5rem 0;

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

    background: rgba(10, 16, 29, 0.4);

}



.ticker-heading {

    text-align: center;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--text-muted);

    text-transform: uppercase;

    margin-bottom: 2rem;

}



/* Brand Logos Marquee (No Boxes, No Arrows) */

.brand-marquee-container {

    overflow: hidden;

    width: 100%;

    position: relative;

    padding: 0.5rem 0;

    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);

}



.brand-marquee-track {

    display: flex;

    align-items: center;

    gap: 3.5rem;

    width: max-content;

    animation: marqueeLoop 55s linear infinite;

    will-change: transform;

}



.brand-marquee-track:hover {

    animation-play-state: paused;

}



@keyframes marqueeLoop {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.brand-logo-item {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    font-weight: 700;

    font-size: 1.15rem;

    color: var(--text-body);

    transition: all 0.3s ease;

    background: transparent;

    border: none;

    padding: 0.25rem 0.5rem;

    white-space: nowrap;

    cursor: pointer;

    flex-shrink: 0;

}



.brand-logo-item i {

    font-size: 1.4rem;

    color: var(--text-muted);

    transition: color 0.3s ease, transform 0.3s ease;

}



/* Brand logos with their official brand colors (permanent) */

.brand-google,

.brand-google i {

    color: #4285F4 !important;

}



.brand-microsoft,

.brand-microsoft i {

    color: #00A4EF !important;

}



.brand-aws,

.brand-aws i {

    color: #FF9900 !important;

}



.brand-meta,

.brand-meta i {

    color: #0668E1 !important;

}



.brand-shopify,

.brand-shopify i {

    color: #96BF48 !important;

}



.brand-laravel,

.brand-laravel i {

    color: #FF2D20 !important;

}



.brand-wordpress,

.brand-wordpress i {

    color: #21759B !important;

}



.brand-react,

.brand-react i {

    color: #61DAFB !important;

}



.brand-nodejs,

.brand-nodejs i {

    color: #339933 !important;

}



.brand-flutter,

.brand-flutter i {

    color: #47C5FB !important;

}



/* ==========================================================================

   Metrics / Stats Grid (5 Cards - Individual Bordered)

   ========================================================================== */

.metrics-section {

    padding: 2.5rem 0;

}



.metrics-grid {

    display: flex;

    align-items: stretch;

    gap: 1rem;

}



.metric-card {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 1.1rem;

    padding: 1.6rem 1.4rem;

    background: rgba(13, 20, 38, 0.85);

    border: none;

    border-radius: var(--radius-md);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

    transition: var(--transition);

    position: relative;

}



.metric-card:hover {

    background: rgba(0, 102, 255, 0.06);

    box-shadow: 0 6px 32px rgba(0, 102, 255, 0.12);

    transform: translateY(-2px);

}



.metric-icon {

    font-size: 2rem;

    color: var(--accent-cyan);

    flex-shrink: 0;

    line-height: 1;

    transition: var(--transition);

}



.metric-card:hover .metric-icon {

    color: #fff;

}



.metric-text {

    display: flex;

    flex-direction: column;

}



.metric-num {

    font-size: 1.6rem;

    font-weight: 800;

    color: var(--text-heading);

    line-height: 1.1;

}



.metric-label {

    font-size: 0.775rem;

    color: var(--text-muted);

    font-weight: 500;

    margin-top: 0.15rem;

    white-space: nowrap;

}



/* ==========================================================================

   About Section

   ========================================================================== */

.about-section {

    padding: 6rem 0;

    position: relative;

}



.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.about-img-box {

    position: relative;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-color);

}



.about-img-box img {

    width: 100%;

    height: 450px;

    object-fit: cover;

    border-radius: var(--radius-lg);

    filter: brightness(0.85);

    display: block;

}



.about-showcase-video {

    width: 100%;

    height: 450px;

    object-fit: cover;

    display: block;

    border-radius: var(--radius-lg);

    filter: saturate(1.08) contrast(1.08);

}



.about-experience-badge {

    position: absolute;

    bottom: -20px;

    left: -20px;

    padding: 1.5rem 1.75rem;

    background: linear-gradient(135deg, #0066FF 0%, #0066FF 100%);

    border-radius: var(--radius-md);

    color: #FFF;

    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.45);

    border: 1px solid rgba(255, 255, 255, 0.15);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-width: 140px;

    z-index: 2;

}



.exp-num {

    font-size: 3.25rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.25rem;

}



.exp-txt {

    font-size: 0.825rem;

    font-weight: 600;

    line-height: 1.3;

    color: rgba(255, 255, 255, 0.9);

    text-align: center;

}



.about-features {

    display: flex;

    align-items: center;

    gap: 2rem;

    margin: 2rem 0;

    flex-wrap: wrap;

}



.about-feature-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.feature-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: rgba(0, 102, 255, 0.12);

    border: none;

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

    flex-shrink: 0;

}



.feature-title {

    font-size: 0.975rem;

    font-weight: 700;

    color: var(--text-heading);

    white-space: nowrap;

}



/* ==========================================================================

   Services Section (Concise Horizontal Cards - 4 Columns)

   ========================================================================== */

.services-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.3);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.25rem;

}



.service-card {

    padding: 1.25rem 1.35rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    text-align: left;

    height: 100%;

    position: relative;

    border-radius: var(--radius-md);

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    transition: var(--transition);

    text-decoration: none;

}



.service-card:hover {

    border-color: var(--border-glow);

    background: rgba(0, 102, 255, 0.08);

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);

}



.service-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;



    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

    margin-bottom: 0;

    transition: var(--transition);

}



.service-card:hover .service-icon {

    background: var(--primary-blue);

    color: #FFFFFF;

    box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);

}



.service-body {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    min-width: 0;

}



.service-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-heading);

    margin: 0;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.service-desc {

    font-size: 0.775rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.35;

}



.service-arrow {

    font-size: 0.85rem;

    color: var(--text-muted);

    transition: var(--transition);

    flex-shrink: 0;

}



.service-card:hover .service-arrow {

    color: var(--primary-light);

    transform: translateX(4px);

}



/* ==========================================================================

   Industries We Serve (Concise Horizontal Cards - 4 Columns Grid)

   ========================================================================== */

.industries-section {

    padding: 6rem 0;

}



.industries-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.25rem;

}



.industry-card {

    padding: 1.15rem 1.25rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    text-align: left;

    height: 100%;

    position: relative;

    border-radius: var(--radius-md);

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    transition: var(--transition);

    text-decoration: none;

}



.industry-card:hover {

    border-color: var(--border-glow);

    background: rgba(0, 102, 255, 0.08);

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);

}



.industry-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    flex-shrink: 0;

    margin-bottom: 0;

    transition: var(--transition);

}



.industry-card:hover .industry-icon {

    background: var(--primary-blue);

    color: #FFFFFF;

    box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);

}



.industry-body {

    flex: 1;

    min-width: 0;

}



.industry-name {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-heading);

    margin: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.industry-arrow {

    font-size: 0.85rem;

    color: var(--text-muted);

    transition: var(--transition);

    flex-shrink: 0;

}



.industry-card:hover .industry-arrow {

    color: var(--primary-light);

    transform: translateX(4px);

}



/* ==========================================================================

   Our Process (8 Steps)

   ========================================================================== */

.process-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.5);

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 1rem;

    position: relative;

    margin-top: 3rem;

}



.process-grid::before {

    content: '';

    position: absolute;

    top: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: 88%;

    height: 2px;

    background: linear-gradient(90deg, rgba(0, 102, 255, 0.1), var(--primary-blue), rgba(0, 102, 255, 0.1));

    z-index: 0;

}



.process-card {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: rgba(10, 16, 29, 0.5);



}



.process-node {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    /* background: rgba(10, 16, 29, 0.5) !important; */

    border-radius: 10px;

    background: #0B1220;

    /* border: 2px solid var(--primary-blue); */

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin-bottom: 1rem;

    /* box-shadow: 0 0 20px var(--accent-glow); */

    transition: var(--transition);

}



.process-card:hover .process-node {

    background: var(--primary-blue);

    color: #FFF;

    transform: scale(1.15);

}



.process-step-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-heading);

    margin-bottom: 0.35rem;

}



.process-step-desc {

    font-size: 0.775rem;

    color: var(--text-muted);

}



/* ==========================================================================

   Featured Projects Section

   ========================================================================== */

.projects-section {

    padding: 6rem 0;

}



.project-tabs {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    margin-bottom: 3rem;

    flex-wrap: wrap;

}



.tab-btn {

    padding: 0.6rem 1.35rem;

    border-radius: var(--radius-full);

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--border-color);

    color: var(--text-body);

    font-size: 0.875rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.tab-btn.active,

.tab-btn:hover {

    background: var(--primary-blue);

    color: #FFF;

    border-color: var(--primary-blue);

}



.projects-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.75rem;

    margin-bottom: 3rem;

}



.project-card {

    overflow: hidden;

    will-change: opacity, transform;

}



.project-card.pop-in {

    animation: cardPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}



@keyframes cardPopIn {

    0% {

        opacity: 0;

        transform: scale(0.65) translateY(30px);

    }



    65% {

        opacity: 1;

        transform: scale(1.05) translateY(-6px);

    }



    100% {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



.project-thumb {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.project-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.project-card:hover .project-thumb img {

    transform: scale(1.08);

}



.project-info {

    padding: 1.5rem;

}



.project-name {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--text-heading);

    margin-bottom: 0.25rem;

}



.project-cat {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin-bottom: 1rem;

}



.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-bottom: 1.25rem;

}



.tag-badge {

    padding: 0.25rem 0.65rem;

    border-radius: var(--radius-sm);

    background: rgba(0, 102, 255, 0.1);

    color: var(--primary-light);

    font-size: 0.75rem;

    font-weight: 600;

}



.project-action-link {

    color: var(--text-heading);

    font-size: 0.875rem;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}



.project-action-link:hover {

    color: var(--accent-cyan);

}



/* ==========================================================================

   Features Section

   ========================================================================== */

.features-section {

    padding: 4rem 0;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

}



.feature-card {

    padding: 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1rem;

    transition: var(--transition);

}



.feature-card:hover {

    transform: translateY(-8px);

    border-color: var(--border-glow);

    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.3);

}



.feature-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 2px solid rgba(0, 102, 255, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--accent-cyan);

    transition: var(--transition);

}



.feature-card:hover .feature-icon {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);

    border-color: var(--accent-cyan);

    transform: scale(1.1);

}



.feature-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

}



.feature-desc {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.5;

}



/* Hero Features Grid */

.hero-features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    margin-top: 0rem;

}



.hero-feature-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem;

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 200, 255, 0.05) 100%); */

    /* border: 1px solid rgba(0, 102, 255, 0.2); */

    border-radius: var(--radius-md);

    transition: var(--transition);

}



.hero-feature-item:hover {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border-color: rgba(0, 200, 255, 0.4);

    transform: translateY(-2px);

}



.hero-feature-icon {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%); */

    /* border: 1px solid rgba(0, 102, 255, 0.4); */

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--accent-cyan);

    flex-shrink: 0;

}



.hero-feature-text {

    flex: 1;

}



.hero-feature-number {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--accent-cyan);

    margin: 0;

    line-height: 1;

}



.hero-feature-title {

    font-size: 0.85rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

    line-height: 1.2;

}



.hero-feature-label {

    font-size: 0.75rem;

    color: var(--text-muted);

    margin: 0.25rem 0 0 0;

    line-height: 1.2;

}



/* ==========================================================================

   Technology Expertise Section

   ========================================================================== */

.tech-expertise-section {

    padding: 6rem 0;

}



.expertise-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 2rem;

}



.expertise-card {

    padding: 2.5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

    transition: var(--transition);

}



.expertise-card:hover {

    transform: translateY(-10px);

    border-color: var(--border-glow);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.3);

}



.expertise-icon {

    width: 70px;

    height: 70px;

    border-radius: var(--radius-lg);

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 2px solid rgba(0, 102, 255, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--accent-cyan);

    transition: var(--transition);

}



.expertise-card:hover .expertise-icon {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);

    border-color: var(--accent-cyan);

    transform: scale(1.1);

}



.expertise-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

    text-align: center;

}



.expertise-desc {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.6;

    flex: 1;

    text-align: center;

}



.expertise-link {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--accent-cyan);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    transition: var(--transition);

}



.expertise-link:hover {

    color: var(--primary-blue);

    gap: 0.75rem;

}



/* ==========================================================================

   Technologies Tabs Section

   ========================================================================== */

.tech-tabs-section {

    padding: 6rem 0;

    background: linear-gradient(180deg, rgba(10, 16, 29, 0.8) 0%, rgba(5, 10, 20, 0.9) 100%);

}



.tech-tabs-container {

    max-width: 1400px;

    margin: 0 auto;

}



.tech-tabs-wrapper {

    display: flex;

    gap: 3rem;

    align-items: flex-start;

}



.tech-tabs-nav {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    min-width: 250px;

    position: sticky;

    top: 100px;

}



.tech-tab-btn {

    padding: 1.25rem 1.75rem;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-lg);

    color: var(--text-muted);

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    gap: 1rem;

    text-align: left;

    backdrop-filter: blur(10px);

}



.tech-tab-btn:hover {

    background: rgba(0, 102, 255, 0.15);

    border-color: rgba(0, 200, 255, 0.4);

    color: var(--accent-cyan);

    transform: translateX(5px);

    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.2);

}



.tech-tab-btn.active {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.4) 0%, rgba(0, 200, 255, 0.3) 100%);

    border-color: var(--accent-cyan);

    color: #FFF;

    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.4);

}



.tech-tabs-content {

    flex: 1;

    position: relative;

    min-height: 500px;

}



.tech-tab-pane {

    display: none;

    animation: fadeIn 0.4s ease-in-out;

}



.tech-tab-pane.active {

    display: block;

}



.tab-title {

    font-size: 2.5rem;

    font-weight: 800;

    color: #FFF;

    margin: 0 0 0.75rem 0;

    background: linear-gradient(135deg, #FFF 0%, var(--accent-cyan) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-align: center;

}



.tab-subtitle {

    font-size: 1.1rem;

    color: var(--text-muted);

    margin: 0 0 2rem 0;

    line-height: 1.6;

    text-align: center;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(15px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ==========================================================================

   Contact Page

   ========================================================================== */

.contact-wrapper {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 3rem;

    align-items: start;

}



.contact-form-container {

    padding: 2.5rem;

}



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.form-group label {

    font-size: 0.9rem;

    font-weight: 600;

    color: #FFF;

}



.form-group input,

.form-group select,

.form-group textarea {

    padding: 1rem;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-md);

    color: #FFF;

    font-size: 0.95rem;

    transition: var(--transition);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--accent-cyan);

    background: rgba(0, 102, 255, 0.05);

}



.form-group select {

    cursor: pointer;

}



.contact-info-container {

    position: sticky;

    top: 100px;

}



.contact-info-card {

    padding: 2.5rem;

}



.contact-info-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: #FFF;

    margin: 0 0 0.5rem 0;

}



.contact-info-desc {

    color: var(--text-muted);

    margin: 0 0 2rem 0;

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.contact-detail-item {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.contact-detail-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 1px solid rgba(0, 200, 255, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent-cyan);

    font-size: 1.25rem;

}



.contact-detail-content h4 {

    font-size: 1rem;

    font-weight: 600;

    color: #FFF;

    margin: 0 0 0.25rem 0;

}



.contact-detail-content p {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin: 0;

}



.social-links-section {

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.social-links-section h4 {

    font-size: 1rem;

    font-weight: 600;

    color: #FFF;

    margin: 0 0 1rem 0;

}



.map-section {

    padding: 0;

}



.map-container {

    width: 100%;

    height: 450px;

    padding: 2rem 4rem;

}



.map-container iframe {

    border-radius: var(--radius-lg);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

}



.tech-tab-pane img {

    height: 350px;

    object-fit: cover;

}



/* ==========================================================================

   Portfolio Page

   ========================================================================== */

.portfolio-filter-section {

    padding: 6rem 0;

}



.portfolio-filter-tabs {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-bottom: 3rem;

    flex-wrap: wrap;

}



.filter-btn {

    padding: 0.75rem 1.5rem;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-md);

    color: var(--text-muted);

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.filter-btn:hover,

.filter-btn.active {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);

    border-color: var(--accent-cyan);

    color: #FFF;

}



.portfolio-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



.portfolio-card {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: var(--transition);

}



.portfolio-card:hover {

    transform: translateY(-10px);

    border-color: var(--accent-cyan);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.3);

}



.portfolio-image {

    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

}



.portfolio-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.portfolio-card:hover .portfolio-image img {

    transform: scale(1.1);

}



.portfolio-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 102, 255, 0.8);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    opacity: 0;

    transition: var(--transition);

}



.portfolio-card:hover .portfolio-overlay {

    opacity: 1;

}



.portfolio-link {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #FFF;

    color: var(--primary-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    transition: var(--transition);

}



.portfolio-link:hover {

    background: var(--accent-cyan);

    color: #FFF;

    transform: scale(1.1);

}



.portfolio-content {

    padding: 1.5rem;

}



.portfolio-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: #FFF;

    margin: 0 0 0.5rem 0;

}



.portfolio-category {

    font-size: 0.9rem;

    color: var(--accent-cyan);

    margin: 0;

}



/* ==========================================================================

   Blog Page

   ========================================================================== */

.blog-section {

    padding: 6rem 0;

}



.blog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



.blog-card {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: var(--transition);

}



.blog-card:hover {

    transform: translateY(-10px);

    border-color: var(--accent-cyan);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.3);

}



.blog-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.blog-card:hover .blog-image img {

    transform: scale(1.1);

}



.blog-category {

    position: absolute;

    top: 1rem;

    left: 1rem;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.8) 0%, rgba(0, 200, 255, 0.6) 100%);

    border-radius: var(--radius-md);

    color: #FFF;

    font-size: 0.8rem;

    font-weight: 600;

}



.blog-content {

    padding: 1.5rem;

}



.blog-meta {

    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;

}



.blog-meta span {

    font-size: 0.85rem;

    color: var(--text-muted);

}



.blog-meta i {

    margin-right: 0.25rem;

    color: var(--accent-cyan);

}



.blog-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: #FFF;

    margin: 0 0 0.75rem 0;

    line-height: 1.4;

}



.blog-excerpt {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin: 0 0 1.5rem 0;

    line-height: 1.6;

}



.blog-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--accent-cyan);

    font-weight: 600;

    font-size: 0.9rem;

    transition: var(--transition);

}



.blog-link:hover {

    gap: 0.75rem;

    color: #FFF;

}



/* ==========================================================================

   Tech Difference Section

   ========================================================================== */

.tech-difference-section {

    padding: 6rem 0;

    background: linear-gradient(180deg, rgba(5, 10, 20, 0.9) 0%, rgba(10, 16, 29, 0.8) 100%);

}



.difference-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 2rem;

}



.difference-card {

    padding: 1rem 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    height: 15rem;

    gap: 1.25rem;

    transition: var(--transition);

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.difference-card:hover {

    transform: translateY(-10px);

    border-color: var(--accent-cyan);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.3);

    background: rgba(0, 102, 255, 0.08);

}



.difference-icon {

    width: 70px;

    height: 70px;

    /* border-radius: 50%; */

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 1px solid rgba(0, 200, 255, 0.3); */

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    color: var(--accent-cyan);

    transition: var(--transition);

}



.difference-card:hover .difference-icon {

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.4) 0%, rgba(0, 200, 255, 0.3) 100%); */

    transform: scale(1.1);

    /* box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4); */

}



.difference-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

}



.difference-desc {

    font-size: 0.95rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.6;

}



/* ==========================================================================

   Technologies Page

   ========================================================================== */

.tech-category-section {

    padding: 6rem 0;

}



.tech-category-section:nth-child(even) {

    background: rgba(10, 16, 29, 0.4);

}



.tech-badges-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 1.5rem;

}



.tech-badge-item {

    padding: 2.5rem 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1.25rem;

    transition: var(--transition);

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.tech-badge-item:hover {

    transform: translateY(-12px);

    border-color: var(--accent-cyan);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.4);

    background: rgba(0, 102, 255, 0.08);

}



.tech-badge-item i,

.tech-badge-item img {

    font-size: 3.5rem;

    width: 70px;

    height: 70px;

    color: var(--accent-cyan);

    margin-bottom: 0.5rem;

    transition: var(--transition);

}



.tech-badge-item img {

    object-fit: contain;

}



.tech-badge-item:hover i {

    color: var(--primary-blue);

    transform: scale(1.15);

}



.tech-badge-item h4 {

    font-size: 1.2rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

}



.tech-badge-item p {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.5;

}



/* Technologies Hero Section */

.hero-image-wrapper {

    position: relative;

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.4);

}



.hero-tech-image {

    width: 100%;

    height: 400px;

    object-fit: cover;

    filter: brightness(0.85);

}



.hero-feature-cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-top: 1.5rem;

}



.hero-feature-card {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 1px solid rgba(0, 102, 255, 0.3);

    border-radius: var(--radius-md);

    padding: 1rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    transition: var(--transition);

}



.hero-feature-card:hover {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.25) 0%, rgba(0, 200, 255, 0.2) 100%);

    border-color: rgba(0, 200, 255, 0.5);

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);

}



.feature-icon-wrapper {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);

    border: 1px solid rgba(0, 102, 255, 0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    color: var(--accent-cyan);

    flex-shrink: 0;

}



.feature-content {

    flex: 1;

}



.feature-number {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--accent-cyan);

    margin: 0;

    line-height: 1;

}



.feature-title {

    font-size: 0.85rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

    line-height: 1.2;

}



.feature-text {

    font-size: 0.75rem;

    color: var(--text-muted);

    margin: 0.25rem 0 0 0;

    line-height: 1.2;

}



/* ==========================================================================

   Testimonials

   ========================================================================== */

.testimonials-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.testimonials-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 3rem;

}



.testimonials-title-wrapper {

    text-align: center;

    flex: 1;

}



.slider-controls {

    display: flex;

    gap: 0.75rem;

}



.ctrl-btn {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border-color);

    color: var(--text-heading);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--transition);

}



.ctrl-btn:hover {

    background: var(--primary-blue);

    border-color: var(--primary-blue);

}



/* Testimonials Carousel */

.testimonials-slider {

    position: relative;

    overflow: hidden;

}



.testimonials-track {

    display: flex;

    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;

}



.slide-group {

    flex: 0 0 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

}



.testimonial-card {

    padding: 2rem 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



/* Dots */

.testimonial-dots {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 1.75rem;

}



.t-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--border-color);

    border: none;

    cursor: pointer;

    transition: var(--transition);

    padding: 0;

}



.t-dot.active {

    background: var(--primary-blue);

    width: 24px;

    border-radius: 4px;

    box-shadow: 0 0 8px rgba(0, 102, 255, 0.5);

}





.reviewer-meta {

    display: flex;

    align-items: center;

    gap: 0.85rem;

}



.reviewer-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

}



.reviewer-name {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-heading);

}



.reviewer-location {

    font-size: 0.8rem;

    color: var(--text-muted);

}



.review-stars {

    color: #FFB800;

    font-size: 0.85rem;

    display: flex;

    gap: 0.2rem;

}



.review-text {

    font-size: 0.925rem;

    color: var(--text-body);

    line-height: 1.6;

    font-style: italic;

}



/* ==========================================================================

   Call To Action Banner

   ========================================================================== */

.cta-section {

    padding: 4rem 0;

}



.cta-box {

    padding: 2.25rem 2.75rem;

    background: rgba(10, 16, 29, 0.85);

    /* border: 1px solid rgba(0, 102, 255, 0.35); */

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 102, 255, 0.05);

    backdrop-filter: blur(10px);

}



.cta-main-text {

    flex: 1.2;

    min-width: 260px;

}



.cta-title {

    font-size: 1.35rem;

    font-weight: 700;

    color: #FFFFFF;

    margin-bottom: 0.35rem;

    line-height: 1.3;

}



.cta-desc {

    color: #94A3B8;

    font-size: 0.825rem;

    line-height: 1.45;

    margin-bottom: 0;

}



.cta-features-row {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    flex: 2;

    justify-content: space-evenly;

}



.cta-feature-item {

    display: flex;

    align-items: center;

    gap: 0.85rem;

}



.cta-feature-icon {

    font-size: 1.6rem;

    color: var(--primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.cta-feature-title {

    font-size: 0.875rem;

    font-weight: 700;

    color: #FFFFFF;

    margin: 0;

    line-height: 1.2;

    white-space: nowrap;

}



.cta-feature-sub {

    font-size: 0.75rem;

    color: #64748B;

    margin: 0;

    line-height: 1.2;

    white-space: nowrap;

}



.cta-feature-divider {

    width: 1px;

    height: 38px;

    background: rgba(255, 255, 255, 0.08);

}



.cta-action {

    flex-shrink: 0;

}



.cta-btn {

    padding: 0.85rem 1.65rem !important;

    font-size: 0.875rem !important;

    font-weight: 600 !important;

    border-radius: var(--radius-sm) !important;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);

}



@media (max-width: 1100px) {

    .cta-box {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

        gap: 1.75rem;

    }



    .cta-features-row {

        flex-wrap: wrap;

        justify-content: center;

        gap: 1.25rem;

    }



    .cta-feature-divider {

        display: none;

    }



    .cta-action {

        text-align: center;

    }

}



/* ==========================================================================

   Blog Section

   ========================================================================== */

.blog-section {

    padding: 6rem 0;

}



.blog-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 3rem;

}



.blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.75rem;

}



.blog-card {

    overflow: hidden;

}



.blog-thumb {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.blog-body {

    padding: 1.5rem;

}



.blog-meta {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 0.8rem;

    color: var(--text-muted);

    margin-bottom: 0.75rem;

}



.blog-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--text-heading);

    line-height: 1.4;

    margin-bottom: 1rem;

}



.blog-title a:hover {

    color: var(--primary-light);

}



/* ==========================================================================

   Azuro Hero Section

   ========================================================================== */

.azuro-hero {

    padding: 8rem 0 6rem;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 200, 255, 0.05) 100%);

    text-align: center;

}



.azuro-hero-content {

    max-width: 900px;

    margin: 0 auto;

}



.azuro-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.5rem;

    background: rgba(0, 102, 255, 0.2);

    border: 1px solid rgba(0, 102, 255, 0.3);

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--accent-cyan);

    margin-bottom: 2rem;

}



.azuro-hero-title {

    font-size: 3.5rem;

    font-weight: 800;

    color: #fff;

    margin: 0 0 1.5rem 0;

    line-height: 1.2;

}



.azuro-hero-description {

    font-size: 1.25rem;

    color: var(--text-muted);

    margin: 0 0 2rem 0;

    line-height: 1.6;

}



.azuro-hero-cta {

    display: flex;

    justify-content: center;

    gap: 1rem;

}



.azuro-btn {

    padding: 1rem 2rem;

    font-size: 1rem;

    font-weight: 600;

    border-radius: 8px;

    transition: var(--transition);

}



html[data-theme="light"] .azuro-hero {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, rgba(0, 200, 255, 0.02) 100%);

}



html[data-theme="light"] .azuro-hero-title {

    color: #1a1a1a;

}





html[data-theme="light"] .azuro-badge {

    background: rgba(0, 102, 255, 0.1);

    color: #0066ff;

}



/* ==========================================================================

   Split Hero Section

   ========================================================================== */

.hero-grid-split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.hero-image-col {

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-image-col dotlottie-wc {

    width: 100%;

    max-width: 500px;

    height: auto;

}



.hero-text-col {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



@media (max-width: 768px) {

    .hero-grid-split {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .hero-image-col {

        order: -1;

    }



    .hero-split-image {

        max-width: 100%;

    }

}



/* ==========================================================================

   Web Development Page Hero (Reference-style split layout)

   ========================================================================== */

.premium-inner-page .hero-section.webdev-hero {

    min-height: auto;

    padding: 7.5rem 0 5rem;

    background: #f4f7fb;

    overflow: hidden;

}



.premium-inner-page .hero-section.webdev-hero .page-hero-media,

.premium-inner-page .hero-section.webdev-hero .inner-scroll-cue {

    display: none !important;

}



.webdev-hero-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);

    gap: clamp(2rem, 4vw, 4.5rem);

    align-items: center;

}



.webdev-hero-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0;

}



.webdev-hero-eyebrow {

    margin: 0 0 1rem;

    color: #0066ff;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: -.01em;

}



.webdev-hero-title {

    margin: 0 0 1.35rem;

    max-width: 680px;

    color: #16243f;

    font-size: clamp(2.2rem, 4.2vw, 3.35rem);

    font-weight: 800;

    line-height: 1.14;

    letter-spacing: -.03em;

}



.webdev-hero-desc {

    margin: 0 0 2rem;

    max-width: 34rem;

    color: #64748b;

    font-size: 1.05rem;

    line-height: 1.75;

}



.webdev-hero-actions {

    display: flex;

    align-items: center;

    gap: 1.75rem;

    flex-wrap: wrap;

}



.webdev-hero-cta {

    padding: .95rem 1.65rem;

    border-radius: 999px;

    font-size: .98rem;

    box-shadow: 0 10px 24px rgba(0, 102, 255, .22);

}



.webdev-hero-rating {

    display: flex;

    align-items: center;

}



.webdev-rating-img {

    width: auto;

    height: 52px;

    object-fit: contain;

}



.webdev-hero-visual {

    display: flex;

    align-items: center;

    justify-content: center;

}



.webdev-lottie-frame {

    position: relative;

    width: 100%;

    max-width: 560px;

}



.webdev-lottie-frame::before {

    content: '';

    position: absolute;

    inset: 10%;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(0, 102, 255, .14) 0%, transparent 72%);

    pointer-events: none;

}



.webdev-hero-visual dotlottie-wc {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 560px;

    height: auto;

    aspect-ratio: 1 / 1;

    filter: hue-rotate(-16deg) saturate(1.28) brightness(1.02) contrast(1.05);

    transition: filter .35s ease;

}



html[data-theme="dark"] .webdev-hero-visual dotlottie-wc {

    filter: hue-rotate(-20deg) saturate(1.38) brightness(1.14) contrast(1.06);

}



html[data-theme="dark"] .premium-inner-page .hero-section.webdev-hero {

    background: linear-gradient(180deg, #0b1424 0%, #101b30 100%);

}



html[data-theme="dark"] .webdev-hero-title {

    color: #f1f5f9;

}



html[data-theme="dark"] .webdev-hero-desc {

    color: #94a3b8;

}



html[data-theme="dark"] .webdev-hero-eyebrow {

    color: #60a5fa;

}



@media (max-width: 992px) {

    .webdev-hero-grid {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }



    .webdev-hero-title {

        max-width: none;

    }



    .webdev-hero-visual {

        order: -1;

    }



    .webdev-hero-visual dotlottie-wc {

        max-width: 420px;

    }

}



@media (max-width: 768px) {

    .premium-inner-page .hero-section.webdev-hero {

        padding: 6.5rem 0 3.5rem;

    }



    .webdev-hero-content {

        align-items: center;

        text-align: center;

    }



    .webdev-hero-actions {

        justify-content: center;

    }



    .webdev-hero-desc {

        max-width: none;

    }

}



/* ==========================================================================

   Azuro Features Section

   ========================================================================== */

.azuro-features-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.5);

}



.azuro-features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}



.azuro-feature-card {

    padding: 2rem;

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    transition: var(--transition);

}



.azuro-feature-card:hover {

    background: rgba(22, 33, 58, 0.85);

    border-color: rgba(0, 102, 255, 0.3);

    transform: translateY(-5px);

}



.azuro-feature-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);

    border: 1px solid rgba(0, 200, 255, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--accent-cyan);

    margin-bottom: 1.5rem;

}



.azuro-feature-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: #fff;

    margin: 0 0 1rem 0;

}



.azuro-feature-desc {

    font-size: 0.95rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.6;

}



html[data-theme="light"] .azuro-features-section {

    background: #FFFFFF;

}



html[data-theme="light"] .azuro-feature-card {

    background: rgba(255, 255, 255, 0.8);

    border-color: rgba(0, 0, 0, 0.1);

}



html[data-theme="light"] .azuro-feature-card:hover {

    background: rgba(255, 255, 255, 1);

    border-color: rgba(0, 102, 255, 0.3);

}



html[data-theme="light"] .azuro-feature-title {

    color: #1a1a1a;

}



html[data-theme="light"] .azuro-feature-desc {

    color: #666;

}



/* ==========================================================================

   Azuro WOW Section

   ========================================================================== */

.azuro-wow-section {

    padding: 6rem 0;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15) 0%, rgba(0, 200, 255, 0.1) 100%);

    text-align: center;

}



.azuro-wow-content {

    max-width: 800px;

    margin: 0 auto;

}



.azuro-wow-title {

    font-size: 2.5rem;

    font-weight: 800;

    color: #fff;

    margin: 0 0 1.5rem 0;

}



.azuro-wow-desc {

    font-size: 1.1rem;

    color: var(--text-muted);

    margin: 0 0 2rem 0;

    line-height: 1.6;

}



html[data-theme="light"] .azuro-wow-section {

    background: #FFFFFF;

}



html[data-theme="light"] .azuro-wow-title {

    color: #1a1a1a;

}



html[data-theme="light"] .azuro-wow-desc {

    color: #666;

}



/* ==========================================================================

   Azuro Accessibility Section

   ========================================================================== */

/* ==========================================================================

   Azuro Accessibility Section

   ========================================================================== */

.azuro-accessibility-section {

    padding: 5rem 0;

    background: #f4f8ff;

    transition: background 0.3s ease;

}



.azuro-access-box {

    display: grid;

    grid-template-columns: minmax(0, 320px) 1fr;

    gap: clamp(2rem, 5vw, 4.5rem);

    align-items: center;

}



.azuro-access-left {

    display: flex;

    justify-content: center;

    align-items: center;

}



.azuro-badge-img {

    width: 100%;

    max-width: 320px;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 12px 28px rgba(0, 50, 150, 0.08));

    transition: transform 0.3s ease;

}



.azuro-badge-img:hover {

    transform: scale(1.02);

}



.azuro-access-right {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

}



.azuro-access-eyebrow {

    color: #0066ff;

    font-size: 1.15rem;

    font-weight: 600;

    margin: 0 0 1.25rem 0;

    letter-spacing: -0.01em;

}



.azuro-access-heading {

    color: #16243f;

    font-size: clamp(1.2rem, 2.2vw, 1.55rem);

    font-weight: 700;

    line-height: 1.45;

    margin: 0 0 2.25rem 0;

    letter-spacing: -0.01em;

}



.azuro-access-cta-row {

    display: flex;

    align-items: center;

    gap: 1.25rem;

    flex-wrap: wrap;

}



.btn-azuro-cert {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.85rem 2rem;

    background: #0066ff;

    color: #ffffff !important;

    font-size: 1rem;

    font-weight: 600;

    border-radius: 999px;

    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.25);

    transition: all 0.25s ease;

    text-decoration: none;

}



.btn-azuro-cert:hover {

    background: #0052cc;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(0, 102, 255, 0.35);

    color: #ffffff !important;

}



.wcag-level-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.6rem 1.15rem;

    background: #0047a5;

    color: #ffffff;

    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(0, 50, 150, 0.2);

}



.wcag-pill-text {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

    text-align: left;

}



.wcag-pill-text strong {

    font-size: 0.88rem;

    font-weight: 800;

    letter-spacing: 0.03em;

}



.wcag-pill-text span {

    font-size: 0.68rem;

    font-weight: 600;

    opacity: 0.88;

    letter-spacing: 0.06em;

}



.wcag-pill-check {

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: #4da1ff;

    color: #ffffff;

    display: grid;

    place-items: center;

    font-size: 0.75rem;

}



html[data-theme="dark"] .azuro-accessibility-section {

    background: #0d172a;

}



html[data-theme="dark"] .azuro-access-heading {

    color: #f1f5f9;

}



html[data-theme="dark"] .azuro-access-eyebrow {

    color: #60a5fa;

}



@media (max-width: 992px) {

    .azuro-access-box {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .azuro-access-right {

        align-items: center;

        text-align: center;

    }

    .azuro-access-cta-row {

        justify-content: center;

    }

}



/* ==========================================================================

   Web Development Page — Azuro-style sections

   ========================================================================== */

.webdev-section {

    background: var(--bg-main);

}



/* ==========================================================================

   Interactive Website Showcase / Iframe Mockup Section

   ========================================================================== */

.webdev-showcase-section {

    padding: 2rem 0 5rem;

}



.showcase-outer-card {

    position: relative;

    background: transparent;

    border-radius: 28px;

    padding: 0;

    border: none !important;

    box-shadow: none !important;

}



.floating-showcase-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 20;

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.95rem 2.2rem;

    background: #0066ff;

    color: #ffffff !important;

    font-size: 1.05rem;

    font-weight: 700;

    border-radius: 999px;

    box-shadow: 0 12px 32px rgba(0, 102, 255, 0.4);

    text-decoration: none;

    transition: all 0.3s ease;

    white-space: nowrap;

}



.floating-showcase-btn:hover {

    background: #0052cc;

    transform: translate(-50%, -50%) scale(1.05);

    box-shadow: 0 16px 40px rgba(0, 102, 255, 0.5);

    color: #ffffff !important;

}



.showcase-mockups-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

}



.showcase-mockup-window {

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    border: none !important;

    box-shadow: 0 14px 40px rgba(0, 50, 150, 0.07);

    display: flex;

    flex-direction: column;

    height: 560px;

    transition: transform 0.35s ease, box-shadow 0.35s ease;

}



.showcase-mockup-window:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.15);

}



.mockup-header-bar {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 12px 16px;

    background: rgba(0, 102, 255, 0.05);

    border-bottom: none !important;

    text-decoration: none;

    color: inherit;

    transition: background 0.25s ease;

}



.mockup-header-bar:hover {

    background: rgba(0, 102, 255, 0.1);

}



.mockup-header-bar .dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    display: inline-block;

}

.mockup-header-bar .dot-red { background: #ff5f56; }

.mockup-header-bar .dot-yellow { background: #ffbd2e; }

.mockup-header-bar .dot-green { background: #27c93f; }



.mockup-url-pill {

    margin-left: 8px;

    font-size: 0.72rem;

    font-weight: 600;

    color: #4a5568;

    background: #ffffff;

    padding: 3px 12px;

    border-radius: 999px;

    border: none !important;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}



.mockup-url-pill i {

    color: #38a169;

    font-size: 0.65rem;

}



.mockup-ext-link {

    margin-left: auto;

    font-size: 0.7rem;

    color: #a0aec0;

    transition: color 0.2s ease;

}



.mockup-header-bar:hover .mockup-ext-link {

    color: #0066ff;

}



.mockup-iframe-viewport {

    position: relative;

    flex: 1;

    overflow: hidden;

    background: #ffffff;

}



.mockup-iframe-track {

    width: 286%;

    height: 3200px;

    position: absolute;

    top: 0;

    left: 0;

    transform-origin: top left;

    transform: scale(0.35);

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}



.mockup-iframe {

    width: 100%;

    height: 100%;

    border: none;

    pointer-events: auto;

    background: #ffffff;

}



/* Keyframe Continuous Scrolling Animation for Embedded Live IFRAMEs */

@keyframes autoScrollIframe1 {

    0% { transform: scale(0.35) translateY(0px); }

    50% { transform: scale(0.35) translateY(-1800px); }

    100% { transform: scale(0.35) translateY(0px); }

}



@keyframes autoScrollIframe2 {

    0% { transform: scale(0.35) translateY(0px); }

    50% { transform: scale(0.35) translateY(-1600px); }

    100% { transform: scale(0.35) translateY(0px); }

}



@keyframes autoScrollIframe3 {

    0% { transform: scale(0.35) translateY(0px); }

    50% { transform: scale(0.35) translateY(-1700px); }

    100% { transform: scale(0.35) translateY(0px); }

}



.auto-iframe-1 { animation: autoScrollIframe1 22s ease-in-out infinite; }

.auto-iframe-2 { animation: autoScrollIframe2 26s ease-in-out infinite 2s; }

.auto-iframe-3 { animation: autoScrollIframe3 24s ease-in-out infinite 4s; }



.showcase-mockup-window:hover .mockup-iframe-track {

    animation-play-state: paused;

    transform: scale(0.35) translateY(-1200px);

}



/* Light & Dark Theme Adaptations for Interactive Showcase Section */

html[data-theme="dark"] .showcase-outer-card {

    background: transparent;

    border: none !important;

    box-shadow: none !important;

}



html[data-theme="dark"] .showcase-mockup-window {

    background: #0f172a;

    border: none !important;

    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);

}



html[data-theme="dark"] .showcase-mockup-window:hover {

    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.3);

    border: none !important;

}



html[data-theme="dark"] .mockup-header-bar {

    background: #1e293b;

    border-bottom: none !important;

    color: #f1f5f9;

}



html[data-theme="dark"] .mockup-header-bar:hover {

    background: #25334c;

}



html[data-theme="dark"] .mockup-url-pill {

    background: #0f172a;

    border: none !important;

    color: #cbd5e1;

}



html[data-theme="dark"] .mockup-ext-link {

    color: #64748b;

}



html[data-theme="dark"] .mockup-header-bar:hover .mockup-ext-link {

    color: #60a5fa;

}



html[data-theme="dark"] .mockup-iframe-viewport {

    background: #0f172a;

}



/* ==========================================================================

   Responsive Adaptations for Showcase Iframes Section

   ========================================================================== */

@media (max-width: 1024px) {

    .showcase-mockups-grid {

        gap: 1.25rem;

    }

    .showcase-mockup-window {

        height: 500px;

    }

}



@media (max-width: 991px) {

    .webdev-showcase-section {

        padding: 2rem 0 4rem;

    }

    .showcase-outer-card {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .floating-showcase-btn {

        position: static;

        order: 2;

        margin-top: 2rem;

        transform: none !important;

        left: auto;

        top: auto;

    }

    .floating-showcase-btn:hover {

        transform: translateY(-2px) scale(1.03) !important;

    }

    .showcase-mockups-grid {

        order: 1;

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

        width: 100%;

    }

    .showcase-mockup-window:last-child:nth-child(odd) {

        grid-column: span 2;

        max-width: 580px;

        width: 100%;

        margin: 0 auto;

    }

    .showcase-mockup-window {

        height: 480px;

    }

}



@media (max-width: 768px) {

    .webdev-showcase-section {

        padding: 1.5rem 0 3.5rem;

    }

    .showcase-mockups-grid {

        grid-template-columns: 1fr;

        max-width: 480px;

        margin: 0 auto;

        gap: 1.5rem;

    }

    .showcase-mockup-window:last-child:nth-child(odd) {

        grid-column: span 1;

        max-width: 100%;

    }

    .showcase-mockup-window {

        height: 440px;

        border-radius: 16px;

    }

    .mockup-header-bar {

        padding: 10px 14px;

    }

    .mockup-url-pill {

        font-size: 0.7rem;

        padding: 3px 10px;

        max-width: calc(100% - 35px);

    }

}



@media (max-width: 480px) {

    .webdev-showcase-section {

        padding: 1rem 0 2.5rem;

    }

    .showcase-mockups-grid {

        gap: 1.2rem;

        width: 100%;

    }

    .showcase-mockup-window {

        height: 380px;

        border-radius: 14px;

    }

    .mockup-header-bar {

        padding: 8px 12px;

    }

    .mockup-url-pill {

        font-size: 0.65rem;

        padding: 2px 8px;

        margin-left: 4px;

        max-width: calc(100% - 30px);

    }

    .floating-showcase-btn {

        width: 100%;

        justify-content: center;

        padding: 0.85rem 1.5rem;

        font-size: 0.95rem;

        margin-top: 1.5rem;

    }

}



/* ==========================================================================

   Azuro-Style Portfolio Page Layout & Showcase Cards (Matching Screenshot)

   ========================================================================== */

.portfolio-azuro-header {

    padding: 4rem 0 2.5rem;

    background: var(--bg-main);

}



.portfolio-azuro-head-grid {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 2rem;

    flex-wrap: wrap;

}



.portfolio-azuro-eyebrow {

    color: #0066ff;

    font-size: 0.95rem;

    font-weight: 700;

    margin-bottom: 0.85rem;

    display: block;

    letter-spacing: -0.01em;

}



.portfolio-azuro-title {

    color: #16243f;

    font-size: clamp(2.1rem, 3.8vw, 3rem);

    font-weight: 800;

    line-height: 1.2;

    max-width: 680px;

    letter-spacing: -0.02em;

    margin: 0;

}



.portfolio-ratings-col {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

    align-items: flex-end;

    padding-top: 0.5rem;

}



.rating-badge-item {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    font-size: 0.75rem;

    color: #64748b;

    font-weight: 600;

}



.rating-stars {

    color: #ff9900;

    font-size: 0.78rem;

}



.rating-badge-item strong {

    color: #16243f;

    font-weight: 800;

}



/* Showcase Section & Cards */

.portfolio-showcase-section {

    padding: 1rem 0 6rem;

    background: var(--bg-main);

}



.portfolio-showcase-block {

    margin-bottom: 5.5rem;

}



.portfolio-showcase-card {

    background: #ffffff;

    border-radius: 28px;

    padding: 3rem;

    box-shadow: 0 20px 60px rgba(0, 50, 150, 0.06);

    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 3.5rem;

    align-items: center;

    border: none;

    transition: transform 0.35s ease, box-shadow 0.35s ease;

}



.portfolio-showcase-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 24px 70px rgba(0, 50, 150, 0.1);

}



.p-showcase-left {

    position: relative;

    width: 100%;

}



.p-browser-frame {

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    height: 440px;

    box-shadow: 0 14px 40px rgba(0, 50, 150, 0.08);

    display: flex;

    flex-direction: column;

    border: none;

}



.p-browser-header {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 12px 16px;

    background: rgba(0, 102, 255, 0.05);

}



.p-browser-header .dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

}

.p-dot-red { background: #ff5f56; }

.p-dot-yellow { background: #ffbd2e; }

.p-dot-green { background: #27c93f; }



.p-url-pill {

    margin-left: 8px;

    font-size: 0.72rem;

    font-weight: 600;

    color: #4a5568;

    background: #ffffff;

    padding: 3px 12px;

    border-radius: 999px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.04);

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}



.p-iframe-viewport {

    position: relative;

    flex: 1;

    overflow: hidden;

    background: #ffffff;

}



.p-iframe-track {

    width: 286%;

    height: 3200px;

    position: absolute;

    top: 0;

    left: 0;

    transform-origin: top left;

    transform: scale(0.35);

}



.p-showcase-right {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

}



.p-domain-link {

    color: #0066ff;

    font-size: 1.05rem;

    font-weight: 700;

    text-decoration: none;

    margin-bottom: 1.25rem;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    transition: opacity 0.2s ease;

}



.p-domain-link:hover {

    opacity: 0.8;

}



.p-project-title {

    color: #16243f;

    font-size: clamp(2rem, 2.8vw, 2.5rem);

    font-weight: 800;

    margin: 0 0 1.15rem 0;

    letter-spacing: -0.02em;

    line-height: 1.25;

}



.p-project-desc {

    color: #64748b;

    font-size: 1rem;

    line-height: 1.65;

    margin-bottom: 2.25rem;

}



.btn-visit-site {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.85rem 2.2rem;

    border: 1px solid #0066ff;

    color: #0066ff;

    font-weight: 700;

    font-size: 0.98rem;

    border-radius: 999px;

    text-decoration: none;

    transition: all 0.3s ease;

    background: transparent;

}



.btn-visit-site:hover {

    background: #0066ff;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 10px 28px rgba(0, 102, 255, 0.3);

}



/* Testimonial Below Card */

.portfolio-testimonial-block {

    text-align: center;

    max-width: 740px;

    margin: 3.5rem auto 0;

    padding: 0 1rem;

}



.p-testi-logo {

    width: 44px;

    height: 44px;

    object-fit: contain;

    border-radius: 50%;

    margin: 0 auto 1.25rem;

    box-shadow: 0 4px 14px rgba(0,0,0,0.08);

    background: #ffffff;

    padding: 6px;

    border: 1px solid #e2e8f0;

}



.p-testi-quote {

    color: #16243f;

    font-size: clamp(1.1rem, 1.7vw, 1.3rem);

    font-weight: 700;

    line-height: 1.55;

    margin: 0 0 1.75rem 0;

    letter-spacing: -0.015em;

}



.p-author-details {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.4rem;

}



.p-author-img {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 0.35rem;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

}



.p-author-name {

    color: #16243f;

    font-size: 0.98rem;

    font-weight: 700;

    margin: 0;

}



.p-author-role {

    color: #64748b;

    font-size: 0.85rem;

    margin: 0;

    font-weight: 500;

}



/* Dark Mode Theme Adaptations */

html[data-theme="dark"] .portfolio-azuro-title,

html[data-theme="dark"] .p-project-title,

html[data-theme="dark"] .p-testi-quote,

html[data-theme="dark"] .p-author-name {

    color: #f1f5f9;

}



html[data-theme="dark"] .portfolio-showcase-card {

    background: #0f172a;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

}



html[data-theme="dark"] .p-browser-frame {

    background: #0f172a;

    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);

}



html[data-theme="dark"] .p-browser-header {

    background: #1e293b;

}



html[data-theme="dark"] .p-url-pill {

    background: #0f172a;

    color: #cbd5e1;

}



html[data-theme="dark"] .p-project-desc,

html[data-theme="dark"] .p-author-role,

html[data-theme="dark"] .rating-badge-item {

    color: #94a3b8;

}



html[data-theme="dark"] .rating-badge-item strong {

    color: #f1f5f9;

}



html[data-theme="dark"] .p-testi-logo {

    background: #1e293b;

    border-color: #334155;

}



@media (max-width: 992px) {

    .portfolio-showcase-card {

        grid-template-columns: 1fr;

        gap: 2rem;

        padding: 2rem 1.5rem;

    }

    .portfolio-azuro-head-grid {

        flex-direction: column;

        align-items: flex-start;

    }

    .portfolio-ratings-col {

        align-items: flex-start;

    }

    .p-browser-frame {

        height: 340px;

    }

}



.webdev-awards-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: .75rem;

    margin-bottom: 2rem;

}



.webdev-award-item {

    display: inline-flex;

    align-items: center;

    gap: .45rem;

    padding: .55rem .9rem;

    border: 1px solid var(--border-color);

    border-radius: 999px;

    background: rgba(255, 255, 255, .04);

    color: var(--text-heading);

    font-size: .78rem;

    font-weight: 600;

}



.webdev-award-item i {

    color: var(--accent-cyan);

}



.webdev-wow-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.webdev-clutch-img {

    height: 48px;

    width: auto;

}



.webdev-access-grid {

    display: grid;

    grid-template-columns: 160px 1fr 160px;

    gap: 2rem;

    align-items: center;

}



.webdev-access-grid .azuro-accessibility-content {

    text-align: center;

}



.webdev-badge-circle {

    width: 120px;

    height: 120px;

    margin: 0 auto;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: linear-gradient(135deg, rgba(0, 102, 255, .2), rgba(0, 200, 255, .1));

    border: 2px solid rgba(0, 102, 255, .35);

    color: var(--accent-cyan);

    font-size: 2rem;

    box-shadow: 0 12px 30px rgba(0, 102, 255, .15);

}



.webdev-access-badge span,

.webdev-wcag-badge {

    display: block;

    margin-top: .75rem;

    text-align: center;

    font-size: .82rem;

    font-weight: 700;

    color: var(--text-muted);

}



.webdev-badge-circle.webdev-wcag {

    flex-direction: column;

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.1;

}



.webdev-badge-circle.webdev-wcag small {

    font-size: .72rem;

    font-weight: 600;

    opacity: .8;

}



.webdev-industries-section,

.webdev-guides-section,

.webdev-portfolio-section,

.webdev-related-section {

    padding: 5rem 0;

}



.webdev-section-head {

    text-align: center;

    margin-bottom: 2.5rem;

}



.webdev-section-head-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    text-align: left;

}



.webdev-section-title {

    margin: 0 0 .5rem;

    color: var(--text-heading);

    font-size: clamp(1.8rem, 3vw, 2.4rem);

    font-weight: 800;

}



.webdev-section-sub {

    margin: 0;

    color: var(--text-muted);

    font-size: 1rem;

}



.webdev-section-actions {

    display: flex;

    justify-content: center;

    gap: .75rem;

    flex-wrap: wrap;

    margin-top: 1.25rem;

}



/* ==========================================================================

   Web Development Page — Serving All Industries Moving Slider Section

   ========================================================================== */

.webdev-industries-section {

    padding: 5rem 0 6rem;

    background: #f4f8ff;

    overflow: hidden;

    transition: background 0.3s ease;

}



.webdev-industries-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 3.5rem;

}



.webdev-ind-eyebrow {

    display: block;

    color: #0066ff;

    font-size: 1.05rem;

    font-weight: 600;

    margin-bottom: 0.5rem;

    letter-spacing: -0.01em;

}



.webdev-ind-main-title {

    color: #16243f;

    font-size: clamp(2rem, 3.8vw, 3rem);

    font-weight: 800;

    line-height: 1.15;

    margin: 0;

    letter-spacing: -0.02em;

}



.webdev-industries-header-actions {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.webdev-ind-slider-viewport {

    position: relative;

    width: 100%;

    overflow: hidden;

}



.webdev-ind-slider-track {

    display: flex;

    flex-direction: row;

    width: 100%;

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: transform;

}



.webdev-ind-slide {

    flex: 0 0 100%;

    min-width: 100%;

    width: 100%;

    opacity: 1;

    visibility: visible;

    position: relative;

    transform: none;

    pointer-events: auto;

}



.webdev-ind-card {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: clamp(2rem, 5vw, 4.5rem);

    align-items: center;

    background: transparent;

}



.webdev-ind-media {

    width: 100%;

    height: 380px;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 16px 40px rgba(0, 50, 150, 0.09);

}



.webdev-ind-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.webdev-ind-card:hover .webdev-ind-media img {

    transform: scale(1.03);

}



.webdev-ind-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding-right: 1.5rem;

}



.webdev-ind-icon-box {

    width: 52px;

    height: 52px;

    border-radius: 12px;

    background: rgba(0, 102, 255, 0.08);

    border: 1px solid rgba(0, 102, 255, 0.15);

    color: #0066ff;

    display: grid;

    place-items: center;

    font-size: 1.35rem;

    margin-bottom: 1.5rem;

}



.webdev-ind-title {

    color: #16243f;

    font-size: clamp(1.8rem, 2.5vw, 2.25rem);

    font-weight: 800;

    margin: 0 0 1rem 0;

    letter-spacing: -0.02em;

}



.webdev-ind-desc {

    color: #64748b;

    font-size: 1.05rem;

    line-height: 1.7;

    margin: 0 0 2rem 0;

}



.webdev-ind-link {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    color: #0066ff !important;

    font-size: 1rem;

    font-weight: 700;

    text-decoration: none;

    transition: gap 0.25s ease;

}



.webdev-ind-link:hover {

    gap: 0.9rem;

    color: #0052cc !important;

}



.webdev-ind-controls {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 0.85rem;

    margin-top: 1.5rem;

}



.webdev-ind-nav-btn {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #0066ff;

    font-size: 1rem;

    cursor: pointer;

    display: grid;

    place-items: center;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

    transition: all 0.25s ease;

}



.webdev-ind-nav-btn:hover {

    background: #0066ff;

    border-color: #0066ff;

    color: #ffffff;

    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);

    transform: translateY(-2px);

}



html[data-theme="dark"] .webdev-industries-section {

    background: #0b1424;

}



html[data-theme="dark"] .webdev-ind-main-title,

html[data-theme="dark"] .webdev-ind-title {

    color: #f1f5f9;

}



html[data-theme="dark"] .webdev-ind-desc {

    color: #94a3b8;

}



html[data-theme="dark"] .webdev-ind-nav-btn {

    background: #1e293b;

    border-color: #334155;

    color: #60a5fa;

}



html[data-theme="dark"] .webdev-ind-nav-btn:hover {

    background: #0066ff;

    border-color: #0066ff;

    color: #ffffff;

}



@media (max-width: 992px) {

    .webdev-industries-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 1.5rem;

    }

    .webdev-ind-card {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .webdev-ind-media {

        height: 280px;

    }

    .webdev-ind-content {

        padding-right: 0;

    }

    .webdev-ind-controls {

        justify-content: center;

    }

}



.webdev-guides-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

}



.webdev-guide-card {

    overflow: hidden;

    border-radius: 14px;

    border: 1px solid var(--border-color);

    background: var(--bg-card);

    transition: var(--transition);

}



.webdev-guide-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 14px 35px rgba(0, 0, 0, .12);

}



.webdev-guide-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.webdev-guide-body {

    padding: 1.25rem;

}



.webdev-guide-body h3 {

    margin: 0 0 .5rem;

    color: var(--text-heading);

    font-size: 1.05rem;

    line-height: 1.4;

}



.webdev-guide-body p {

    margin: 0 0 .85rem;

    color: var(--text-muted);

    font-size: .85rem;

}



.webdev-guide-body a {

    color: var(--accent-cyan);

    font-weight: 600;

    font-size: .88rem;

}



.webdev-faq-section {

    background: var(--bg-secondary);

}



.webdev-portfolio-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.25rem;

}



.webdev-portfolio-grid img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    border-radius: 12px;

    border: 1px solid var(--border-color);

    transition: var(--transition);

}



.webdev-portfolio-grid img:hover {

    transform: scale(1.02);

    box-shadow: 0 16px 40px rgba(0, 102, 255, .15);

}



.webdev-related-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

    max-width: 900px;

    margin: 0 auto;

}



.webdev-related-card {

    display: flex;

    flex-direction: column;

    gap: .75rem;

    padding: 2rem;

    border-radius: 14px;

    border: 1px solid var(--border-color);

    background: var(--bg-card);

    transition: var(--transition);

}



.webdev-related-card:hover {

    border-color: rgba(0, 102, 255, .35);

    transform: translateY(-3px);

}



.webdev-related-icon {

    width: 52px;

    height: 52px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: rgba(0, 102, 255, .12);

    color: var(--accent-cyan);

    font-size: 1.25rem;

}



.webdev-related-card h3 {

    margin: 0;

    color: var(--text-heading);

    font-size: 1.15rem;

}



.webdev-related-card span {

    color: var(--accent-cyan);

    font-weight: 600;

    font-size: .9rem;

}



.webdev-cta-section {

    padding: 5rem 0 6rem;

}



.webdev-cta-box {

    text-align: center;

    padding: 3rem 2rem;

    border-radius: 18px;

    background: linear-gradient(135deg, rgba(0, 102, 255, .18), rgba(0, 200, 255, .1));

    border: 1px solid rgba(0, 102, 255, .25);

}



.webdev-cta-box h2 {

    margin: 0 0 .75rem;

    color: var(--text-heading);

    font-size: clamp(1.6rem, 3vw, 2.2rem);

}



.webdev-cta-box p {

    margin: 0 0 1.5rem;

    color: var(--text-muted);

}



html[data-theme="light"] .webdev-award-item {

    background: #fff;

    border-color: rgba(0, 102, 255, .15);

}



html[data-theme="light"] .webdev-industry-card,

html[data-theme="light"] .webdev-guide-card,

html[data-theme="light"] .webdev-related-card {

    background: #fff;

    border-color: rgba(0, 0, 0, .08);

}



html[data-theme="light"] .webdev-cta-box {

    background: linear-gradient(135deg, rgba(0, 102, 255, .08), rgba(0, 200, 255, .05));

}



@media (max-width: 992px) {

    .azuro-features-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .webdev-access-grid {

        grid-template-columns: 1fr;

    }



    .webdev-access-badge,

    .webdev-wcag-badge {

        display: none;

    }



    .webdev-industries-grid,

    .webdev-guides-grid,

    .webdev-portfolio-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .azuro-features-grid {

        grid-template-columns: 1fr;

    }



    .webdev-section-head-row {

        flex-direction: column;

        align-items: flex-start;

    }



    .webdev-industries-grid,

    .webdev-guides-grid,

    .webdev-portfolio-grid,

    .webdev-related-grid {

        grid-template-columns: 1fr;

    }



    .webdev-wow-actions {

        flex-direction: column;

    }

}



/* ==========================================================================

   Footer

   ========================================================================== */

.site-footer {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background: #04070D;

    border-top: 1px solid var(--border-color);

    padding-top: 5rem;

    padding-bottom: 2rem;

}



.footer-video-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

}



.footer-video-bg video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: .38;

    filter: saturate(.8) contrast(1.05);

}



.footer-video-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(110deg, rgba(4, 7, 13, .72), rgba(5, 18, 40, .58));

}



.site-footer>.container {

    position: relative;

    z-index: 1;

}



/* Homepage — cohesive Gen-Z neon glass visual system */

body.homepage {

    background: #050814;

    background-image: radial-gradient(circle at 8% 18%, rgba(0, 200, 255, .1), transparent 24rem), radial-gradient(circle at 93% 35%, rgba(0, 102, 255, .13), transparent 27rem), linear-gradient(135deg, #050814 0%, #090d20 50%, #050b18 100%);

}



.homepage .brand-ticker-section,

.homepage .metrics-section,

.homepage .about-section,

.homepage .services-section,

.homepage .industries-section,

.homepage .process-section,

.homepage .projects-section,

.homepage .testimonials-section,

.homepage .faq-section,

.homepage .cta-section,

.homepage .blog-section {

    background-color: transparent;

}



.homepage .metrics-section,

.homepage .about-section,

.homepage .services-section,

.homepage .industries-section,

.homepage .process-section,

.homepage .projects-section,

.homepage .testimonials-section,

.homepage .faq-section,

.homepage .cta-section,

.homepage .blog-section {

    border-top: 1px solid rgba(167, 139, 250, .1);

}



.homepage .section-title {

    letter-spacing: -.045em;

}



.homepage .section-badge {

    background: #0066ff;

    box-shadow: 0 8px 24px rgba(72, 81, 255, .34);

    color: white;

}



.homepage .glass-card,

.homepage .metric-card,

.homepage .process-card,

.homepage .industry-card {

    background: linear-gradient(145deg, rgba(21, 33, 65, .68), rgba(8, 13, 30, .74));

    border: 1px solid rgba(148, 163, 255, .17);

    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 12px 30px rgba(0, 0, 0, .16);

    backdrop-filter: blur(16px);

}



.homepage .glass-card:hover,

.homepage .process-card:hover,

.homepage .industry-card:hover {

    border-color: rgba(0, 200, 255, .58);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .27), 0 0 25px rgba(0, 102, 255, .15);

}



.homepage .services-section::before,

.homepage .projects-section::before,

.homepage .blog-section::before {

    content: '';

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background: rgba(0, 102, 255, .09);

    filter: blur(80px);

    left: -230px;

    top: 12%;

    pointer-events: none;

}



.homepage .about-section .section-video-bg::after,

.homepage .services-section .section-video-bg::after,

.homepage .projects-section .section-video-bg::after {

    background: linear-gradient(120deg, rgba(5, 8, 20, .92), rgba(12, 13, 43, .8));

}



.homepage .faq-section {

    background: transparent;

}



.homepage .cta-box {

    background: linear-gradient(115deg, rgba(0, 102, 255, .23), rgba(0, 102, 255, .22));

    border-color: rgba(131, 179, 255, .35);

}



.homepage .site-header.scrolled {

    background: rgba(5, 8, 20, .78);

    backdrop-filter: blur(18px);

}



/* Homepage process: vertical alternating neon timeline */

.homepage .process-section {

    --process-section-bg: #050814;

    background: var(--process-section-bg);

}



.homepage .process-grid {

    display: flex;

    flex-direction: column;

    width: min(100%, 1040px);

    margin: 4rem auto 0;

    gap: 1.35rem;

    isolation: isolate;

}



.homepage .process-grid::before {

    top: 0;

    bottom: 0;

    left: 50%;

    z-index: 0;

    width: 2px;

    height: auto;

    transform: translateX(-50%);

    background: linear-gradient(to bottom, transparent, #0066ff 8%, #3385ff 88%, transparent);

    box-shadow: 0 0 16px rgba(0, 102, 255, .72);

}



.homepage .process-card {

    width: calc(50% - 48px);

    min-height: 150px;

    padding: 1.8rem 2.1rem;

    position: relative;

    display: block;

    text-align: right;

    border-radius: 0;

    background: linear-gradient(135deg, rgba(15, 35, 72, .84), rgba(8, 13, 30, .82));

    border: 1px solid rgba(122, 180, 255, .25);

    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;

}



.homepage .process-card:nth-child(odd) {

    margin-right: auto;

}



.homepage .process-card:nth-child(even) {

    margin-left: auto;

    text-align: left;

}



.homepage .process-card::before {

    position: absolute;

    top: 1.4rem;

    color: rgba(0, 200, 255, .32);

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: .12em;

}



.homepage .process-card:nth-child(1)::before {

    content: '01 / DISCOVER';

    left: 2rem;

}



.homepage .process-card:nth-child(2)::before {

    content: '02 / RESEARCH';

    right: 2rem;

}



.homepage .process-card:nth-child(3)::before {

    content: '03 / PLAN';

    left: 2rem;

}



.homepage .process-card:nth-child(4)::before {

    content: '04 / DESIGN';

    right: 2rem;

}



.homepage .process-card:nth-child(5)::before {

    content: '05 / DEVELOP';

    left: 2rem;

}



.homepage .process-card:nth-child(6)::before {

    content: '06 / TEST';

    right: 2rem;

}



.homepage .process-card:nth-child(7)::before {

    content: '07 / LAUNCH';

    left: 2rem;

}



.homepage .process-card:nth-child(8)::before {

    content: '08 / GROW';

    right: 2rem;

}



.homepage .process-node {

    position: absolute;

    z-index: 2;

    top: 50%;

    width: 62px;

    height: 62px;

    margin: 0;

    transform: translateY(-50%);

    border-radius: 0;

    background: var(--process-section-bg);

    border-color: #3385ff;

    color: #7dc9ff;

    box-shadow: none;

}



.homepage .process-card:nth-child(odd) .process-node {

    right: -80px;

}



.homepage .process-card:nth-child(even) .process-node {

    left: -80px;

}



.homepage .process-step-title {

    margin: 1.1rem 0 .35rem;

    color: #fff;

    font-size: 1.22rem;

}



.homepage .process-step-desc {

    margin: 0;

    color: #b6c9e3;

}



.homepage .process-card:hover {

    transform: translateY(-6px) scale(1.02);

    border-color: var(--accent-cyan);

    box-shadow: 0 20px 42px rgba(0, 0, 0, .32), 0 0 28px rgba(0, 102, 255, .16);

}



.homepage .process-card:hover .process-node {

    transform: translateY(-50%) scale(1.12) rotate(8deg);

    background: var(--process-section-bg);

    color: #fff;

}



@media (max-width: 768px) {

    .homepage .process-grid {

        gap: 1rem;

        margin-top: 2.5rem;

        padding-left: 3.6rem;

    }



    .homepage .process-grid::before {

        left: 30px;

    }



    .homepage .process-card,

    .homepage .process-card:nth-child(even),

    .homepage .process-card:nth-child(odd) {

        width: 100%;

        margin: 0;

        padding: 1.55rem 1.4rem 1.35rem;

        text-align: left;

    }



    .homepage .process-card:nth-child(odd) .process-node,

    .homepage .process-card:nth-child(even) .process-node {

        left: -3.6rem;

        right: auto;

        width: 54px;

        height: 54px;

    }



    .homepage .process-card::before,

    .homepage .process-card:nth-child(even)::before {

        left: 1.35rem;

        right: auto;

    }



    .homepage .process-step-title {

        margin-top: 1rem;

    }

}



.footer-grid {

    display: grid;

    grid-template-columns: 1.4fr 0.8fr 1fr 1.1fr 1.2fr;

    gap: 2.5rem;

    margin-bottom: 4rem;

}



/* Footer Ratings */

.footer-ratings {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.rating-badge {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.75rem;

    background: transparent;

    border: none;

    border-radius: 8px;

    transition: var(--transition);

    text-decoration: none;

}



.rating-badge:hover {

    background: transparent;

    border-color: rgba(0, 102, 255, 0.3);

    transform: translateY(-2px);

}



.rating-img {

    height: 40px;

    width: auto;

    object-fit: contain;

}



.rating-info {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.rating-text {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-heading);

}



.rating-count {

    font-size: 0.75rem;

    color: var(--text-muted);

}



html[data-theme="light"] .rating-badge {

    background: transparent;

    border: none;

}



html[data-theme="light"] .rating-badge:hover {

    background: transparent;

    border-color: rgba(0, 102, 255, 0.3);

}



html[data-theme="light"] .rating-text {

    color: #1a1a1a;

}



html[data-theme="light"] .rating-count {

    color: #666;

}



.footer-bio {

    font-size: 0.875rem;

    color: var(--text-muted);

    margin: 1.25rem 0;

    line-height: 1.6;

}



.social-links {

    display: flex;

    gap: 0.75rem;

}



.social-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border-color);

    color: var(--text-body);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.9rem;

}



.social-icon:hover {

    background: var(--primary-blue);

    color: #FFF;

    border-color: var(--primary-blue);

}



.footer-title {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-heading);

    margin-bottom: 1.25rem;

}



.footer-links {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.footer-links a {

    color: var(--text-body);

    font-size: 0.875rem;

}



.reveal-on-scroll {

    opacity: 0;

    transform: translateY(28px);

    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);

}



.reveal-on-scroll.is-revealed {

    opacity: 1;

    transform: translateY(0);

}



.reveal-on-scroll:nth-child(2) {

    transition-delay: .08s;

}



.reveal-on-scroll:nth-child(3) {

    transition-delay: .16s;

}



.reveal-on-scroll:nth-child(4) {

    transition-delay: .24s;

}



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

    .reveal-on-scroll {

        opacity: 1;

        transform: none;

        transition: none;

    }

}



.footer-links a:hover {

    color: var(--primary-light);

    padding-left: 4px;

}



.contact-list {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

    font-size: 0.875rem;

}



.contact-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--text-body);

}



.contact-item i {

    color: var(--primary-light);

}



.newsletter-form {

    display: flex;

    margin-top: 1rem;

}



.newsletter-form input {

    width: 100%;

    padding: 0.75rem 1rem;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-full) 0 0 var(--radius-full);

    color: var(--text-heading);

    font-size: 0.85rem;

}



.newsletter-form button {

    padding: 0 1.25rem;

    background: var(--primary-blue);

    color: #FFF;

    border-radius: 0 var(--radius-full) var(--radius-full) 0;

    cursor: pointer;

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding-top: 2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.825rem;

    color: var(--text-muted);

}



.legal-links {

    display: flex;

    gap: 1.5rem;

}



.legal-links a:hover {

    color: var(--text-heading);

}



/* Scroll To Top */

.scroll-top-btn {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--primary-blue);

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.5);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: 99;

}



.scroll-top-btn.visible {

    opacity: 1;

    visibility: visible;

}



/* ==========================================================================

   RESPONSIVE MEDIA QUERIES (Mobile Rules & Left-to-Right Hamburger Header)

   ========================================================================== */



@media (max-width: 1024px) {

    .video-hero-services {

        grid-template-columns: repeat(3, 1fr);

    }



    .faq-layout {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }



    .faq-letters {

        display: none;

    }



    .hero-grid,

    .about-grid {

        grid-template-columns: 1fr;

    }



    .metrics-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .process-grid {

        grid-template-columns: repeat(4, 1fr);

    }



    .process-grid::before {

        display: none;

    }



    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .cta-box {

        flex-direction: column;

        text-align: center;

    }

}



@media (max-width: 768px) {

    .video-hero {

        min-height: 720px;

        padding: 7.5rem 0 2.5rem;

    }



    .video-hero-container {

        gap: 2rem;

    }



    .video-hero-services {

        grid-template-columns: repeat(2, 1fr);

        gap: .75rem;

    }



    .video-hero-service:last-child {

        grid-column: 1 / -1;

    }



    .video-hero-service {

        min-height: 86px;

        font-size: .85rem;

    }



    .faq-section {

        padding: 5rem 0;

    }



    .faq-intro h2 {

        font-size: 3.4rem;

    }



    .faq-question {

        padding: 1.15rem;

        grid-template-columns: 2.8rem 1fr 1rem;

        font-size: .9rem;

    }



    .faq-number {

        font-size: 1rem;

    }



    .faq-answer p {

        padding-left: 3.95rem;

        padding-right: 1.15rem;

        font-size: .88rem;

    }



    /* Mobile Header Layout: Hamburger LEFT, Logo CENTER, Theme Switcher RIGHT */

    .desktop-nav,

    .header-actions .phone-link,

    .header-actions .btn,

    .mobile-call-btn {

        display: none !important;

    }



    .mobile-hamburger-btn {

        display: flex !important;

        order: 1;

    }



    .brand-logo {

        order: 2;

        margin: 0 auto;

    }



    .header-actions {

        order: 3;

        display: flex !important;

        align-items: center;

    }



    .header-actions .theme-toggle {

        display: inline-flex !important;

    }



    /* MOBILE SCREEN CONTENT CENTER ALIGNED BY DEFAULT AS REQUESTED */

    section,

    .hero-content,

    .about-content,

    .section-header,

    .cta-box,

    .footer-col,

    .text-center-mobile {

        text-align: center !important;

    }



    .hero-content {

        align-items: center !important;

    }



    .hero-btns,

    .about-features,

    .hero-rating,

    .section-badge,

    .cta-perks,

    .social-links,

    .blog-header,

    .testimonials-header {

        justify-content: center !important;

        margin-left: auto;

        margin-right: auto;

    }



    .footer-col {

        display: flex;

        flex-direction: column;

        align-items: center !important;

        text-align: center !important;

    }



    .footer-col .brand-logo {

        justify-content: center !important;

    }



    .contact-list {

        align-items: center !important;

    }



    .contact-item {

        justify-content: center !important;

    }



    .hero-title {

        font-size: 2.25rem;

    }



    .hero-pill-bar {

        grid-template-columns: repeat(2, 1fr);

    }



    .metrics-grid {

        flex-wrap: wrap;

    }



    .metric-card {

        flex: 1 1 calc(33.33% - 1px);

        min-width: 160px;

        justify-content: center;

        text-align: center;

    }



    .metric-divider {

        display: none;

    }



    .industries-bar {

        padding: 1.25rem 0.5rem;

    }



    .services-grid,

    .projects-grid,

    .blog-grid,

    .about-features,

    .industries-grid {

        grid-template-columns: 1fr;

    }



    .slide-group {

        grid-template-columns: 1fr !important;

        gap: 1.25rem;

    }



    .process-grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 1.75rem 1rem !important;

    }



    .process-grid::before {

        display: none !important;

    }



    .footer-grid {

        grid-template-columns: 1fr;

    }



    .testimonials-header,

    .blog-header {

        flex-direction: column;

        align-items: center;

        gap: 1rem;

    }

}



/* ==========================================================================

   ABOUT PAGE SPECIFIC VIP STYLES

   ========================================================================== */



/* About Hero Section */

.about-hero-section {

    padding: 9rem 0 5rem 0;

    position: relative;

    overflow: hidden;

}



.about-hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3.5rem;

    align-items: center;

}



.about-hero-title {

    font-size: 3rem;

    font-weight: 800;

    line-height: 1.15;

    color: #FFFFFF;

    margin-bottom: 1.25rem;

}



.text-gradient {

    background: linear-gradient(135deg, #0066FF 0%, #0066FF 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.about-hero-desc {

    font-size: 1.05rem;

    color: var(--text-body);

    line-height: 1.65;

    margin-bottom: 2rem;

}



.about-hero-pills {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.9rem;

    margin-top: 2rem;

}



@media (max-width: 991px) {

    .about-hero-pills {

        grid-template-columns: 1fr;

    }

}



.pill-item {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 1rem;

    padding: 0.9rem 1.15rem;

    /* background: rgba(0, 102, 255, 0.05); */

    /* border: 1px solid rgba(0, 200, 255, 0.12); */

    border-radius: var(--radius-md);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.pill-item::before {

    content: '';

    position: absolute;

    inset: 0;

    /* background: linear-gradient(120deg, rgba(0, 200, 255, 0.07) 0%, transparent 60%); */

    opacity: 0;

    transition: opacity 0.3s ease;

    border-radius: inherit;

}



.pill-item:hover {

    transform: translateY(-3px);

    border-color: rgba(0, 200, 255, 0.4);

    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.18);

}



.pill-item:hover::before {

    opacity: 1;

}



.pill-icon {

    font-size: 1.5rem;

    color: var(--accent-cyan);

    flex-shrink: 0;

    background: none;

    border: none;

    transition: all 0.3s ease;

    filter: drop-shadow(0 0 5px rgba(0, 200, 255, 0.35));

    width: 28px;

    text-align: center;

}



.pill-item:hover .pill-icon {

    color: #FFFFFF;

    transform: scale(1.15);

    filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.8));

}



.pill-text {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.pill-title {

    font-size: 0.875rem;

    font-weight: 700;

    color: #FFFFFF;

    letter-spacing: -0.01em;

    margin: 0;

    line-height: 1.3;

}



.pill-sub {

    font-size: 0.75rem;

    color: var(--text-muted);

    line-height: 1.4;

    margin: 0;

}



/* About Visual Showcase & Floating Badges */

.about-hero-visual {

    position: relative;

}



.visual-wrapper {

    position: relative;

    border-radius: var(--radius-lg);

    overflow: hidden;

    padding: 0.5rem;

    border: 1px solid rgba(0, 102, 255, 0.3);

}



.main-visual-img {

    width: 100%;

    height: 480px;

    object-fit: cover;

    border-radius: var(--radius-md);

    display: block;

}



.floating-badge {

    position: absolute;

    padding: 0.85rem 1.15rem;

    background: rgba(10, 16, 29, 0.88);

    backdrop-filter: blur(14px);

    border: 1px solid rgba(0, 102, 255, 0.4);

    border-radius: var(--radius-md);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    z-index: 5;

}



.badge-top-left {

    top: 25px;

    left: -20px;

}



.badge-top-right {

    top: 25px;

    right: -15px;

}



.badge-bottom-center {

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    min-width: 200px;

}



.badge-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.badge-label {

    font-size: 0.75rem;

    color: var(--text-muted);

    font-weight: 600;

}



.badge-status-dot {

    width: 7px;

    height: 7px;

    background: #00E676;

    border-radius: 50%;

    box-shadow: 0 0 8px #00E676;

}



.badge-val {

    font-size: 1.45rem;

    font-weight: 800;

    color: #FFFFFF;

    line-height: 1.2;

}



.badge-sub {

    font-size: 0.725rem;

    color: var(--accent-cyan);

    font-weight: 600;

}



.badge-stars {

    color: #FFB800;

    font-size: 0.75rem;

    margin-top: 0.2rem;

}



/* Our Story & Timeline Section */

.story-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.story-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 4rem;

    align-items: center;

}



.story-img-box {

    position: relative;

    padding: 0.5rem;

    border-radius: var(--radius-lg);

}



.story-img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    border-radius: var(--radius-md);

    display: block;

}



.exp-badge-floating {

    position: absolute;

    bottom: -20px;

    left: -20px;

    padding: 1.25rem 1.5rem;

    background: linear-gradient(135deg, #0066FF 0%, #0066FF 100%);

    border-radius: var(--radius-md);

    color: #FFF;

    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.45);

    border: 1px solid rgba(255, 255, 255, 0.15);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.exp-num {

    font-size: 2.5rem;

    font-weight: 800;

    line-height: 1;

}



.exp-txt {

    font-size: 0.8rem;

    font-weight: 600;

    line-height: 1.2;

}



.story-desc {

    font-size: 1rem;

    color: var(--text-body);

    line-height: 1.6;

    margin-bottom: 2rem;

}



.timeline-row {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0.75rem;

    border-top: 1px solid rgba(0, 102, 255, 0.25);

    padding-top: 1.5rem;

    position: relative;

}



.timeline-item {

    position: relative;

}



.timeline-item::before {

    content: '';

    position: absolute;

    top: -1.85rem;

    left: 0;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--primary-blue);

    box-shadow: 0 0 10px var(--accent-cyan);

}



.t-year {

    font-size: 0.85rem;

    font-weight: 800;

    color: var(--accent-cyan);

}



.t-title {

    font-size: 0.85rem;

    font-weight: 700;

    color: #FFF;

    margin: 0.2rem 0;

}



.t-desc {

    font-size: 0.725rem;

    color: var(--text-muted);

    line-height: 1.35;

}



/* Mission Vision Values */

.values-section {

    padding: 5rem 0;

}



.values-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.75rem;

}



/* Value Card — 1/4 Icon Left + 3/4 Content Right Layout */

.value-card {

    padding: 0;

    display: flex;

    height: 200px;

    flex-direction: row;

    align-items: stretch;

    overflow: hidden;

    transition: var(--transition);

    position: relative;

}



.value-card:hover {

    transform: translateY(-5px);

    border-color: rgba(0, 200, 255, 0.35);

    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.2);

}



/* Left 1/4: Icon Column */

.value-icon-col {

    width: 25%;

    min-width: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 2rem 0;

    flex-shrink: 0;

    position: relative;

}



.value-icon {

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 4rem;

    /* background: linear-gradient(135deg, rgba(0, 200, 255, 0.15) 0%, rgba(0, 102, 255, 0.1) 100%); */

    /* border: 1px solid rgba(0, 200, 255, 0.3); */

    border-radius: 16px;

    width: 75px;

    height: 75px;

    filter: drop-shadow(0 4px 15px rgba(0, 200, 255, 0.4));

    transition: var(--transition);

    /* box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */

}



.value-card:hover .value-icon {

    background: linear-gradient(135deg, rgba(0, 200, 255, 0.25) 0%, rgba(0, 102, 255, 0.2) 100%);

    border-color: rgba(0, 200, 255, 0.6);

    transform: scale(1.1);

    filter: drop-shadow(0 6px 20px rgba(0, 200, 255, 0.6));

    box-shadow: 0 12px 35px rgba(0, 102, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);

}



/* Right 3/4: Content Column */

.value-content-col {

    flex: 1;

    padding: 1.75rem 1.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.value-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: #FFF;

    margin-bottom: 0.65rem;

    letter-spacing: -0.01em;

}



.value-desc {

    font-size: 0.875rem;

    color: var(--text-body);

    line-height: 1.6;

    margin: 0;

}



/* Core Values List inside card */

.values-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.5rem;

    margin: 0;

}



.values-list li {

    font-size: 0.825rem;

    color: var(--text-body);

    display: flex;

    align-items: center;

    gap: 0.35rem;

    line-height: 1.3;

}



.values-list li i {

    color: var(--accent-cyan);

    font-size: 0.05rem;

    flex-shrink: 0;

    transform: scale(0.2);

    opacity: 0.8;

}



.bullet-dot {

    display: inline-block;

    width: 4px;

    height: 4px;

    background: var(--accent-cyan);

    border-radius: 50%;

    flex-shrink: 0;

    margin-right: 0.5rem;

}



/* Impact Section Grid */

.impact-section {

    padding: 5rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.impact-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 1.25rem;

}



.impact-card {

    padding: 1.75rem 1rem;

    text-align: center;

}



.impact-icon {

    font-size: 1.75rem;

    color: var(--accent-cyan);

    margin-bottom: 0.75rem;

}



.impact-num {

    font-size: 1.85rem;

    font-weight: 800;

    color: #FFF;

    margin-bottom: 0.25rem;

}



.impact-label {

    font-size: 0.775rem;

    color: var(--text-muted);

}



/* Why Choose Us Grid */

.why-choose-section {

    padding: 6rem 0;

}



.why-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

}



.why-card {

    padding: 1.5rem;

    display: flex;

    gap: 1rem;

    align-items: flex-start;

}



.why-icon {

    color: var(--accent-cyan);

    display: flex;

    margin-top: 1rem;

    align-items: center;

    font-size: 1.6rem;

    flex-shrink: 0;

    background: none;

    border: none;

    filter: drop-shadow(0 0 7px rgba(0, 200, 255, 0.4));

}



.why-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: #FFF;

    margin-bottom: 0.35rem;

}



.why-desc {

    font-size: 0.775rem;

    color: var(--text-muted);

    line-height: 1.4;

}



/* Leadership Team Grid */

.team-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.team-header {

    margin-bottom: 3rem;

    text-align: center;

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 1.25rem;

}



.team-card {

    padding: 1.5rem 1rem;

    text-align: center;

    transition: var(--transition);

}



.team-card:hover {

    transform: translateY(-5px);

    border-color: rgba(0, 102, 255, 0.5);

}



.team-avatar-box {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    margin: 0 auto 1.25rem auto;

    overflow: hidden;

    /* border: 2px solid var(--primary-blue); */

    box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);

}



.team-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.team-name {

    font-size: 1rem;

    font-weight: 700;

    color: #FFF;

    margin-bottom: 0.15rem;

}



.team-role {

    font-size: 0.775rem;

    color: var(--accent-cyan);

    font-weight: 600;

    margin-bottom: 0.65rem;

}



.team-bio {

    font-size: 0.75rem;

    color: var(--text-muted);

    line-height: 1.4;

    margin-bottom: 1rem;

}



.team-socials a {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 200, 255, 0.15) 100%);

    color: var(--primary-light);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    transition: var(--transition);

    /* border: 1px solid rgba(0, 102, 255, 0.3); */

    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);

}



.team-socials a:hover {

    background: linear-gradient(135deg, #0066FF 0%, #0066FF 100%);

    color: #FFF;

    border-color: #0066FF;

    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);

    transform: translateY(-2px);

}



/* Working Process Flow Steps */

.process-section {

    padding: 6rem 0;

}



.process-flow-grid {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

}



.process-flow-step {

    flex: 1;

    text-align: center;

}



.step-circle {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: #090E1A;

    border: 2px solid var(--primary-blue);

    color: var(--accent-cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    margin: 0 auto 0.85rem auto;

    box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);

}



.step-title {

    font-size: 0.875rem;

    font-weight: 700;

    color: #FFF;

    margin-bottom: 0.25rem;

}



.step-desc {

    font-size: 0.725rem;

    color: var(--text-muted);

    line-height: 1.3;

}



.process-connector {

    width: 30px;

    height: 2px;

    background: rgba(0, 102, 255, 0.3);

    flex-shrink: 0;

    margin-top: -2rem;

}



/* Tech Ecosystem Grid */

.tech-ecosystem-section {

    padding: 5rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.tech-badges-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 1.25rem;

}



.tech-badge-item {

    padding: 1.15rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    font-size: 0.9rem;

    font-weight: 700;

    color: #FFF;

}



.tech-badge-item i {

    font-size: 1.4rem;

}



/* Triple Grid: Impact, Industries, Awards */

.triple-grid-section {

    padding: 6rem 0;

}



.triple-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.75rem;

}



.triple-card {

    padding: 1.75rem;

}



.triple-title {

    font-size: 0.95rem;

    font-weight: 800;

    color: #FFF;

    margin-bottom: 1.5rem;

    letter-spacing: 0.05em;

}



.world-map-wrapper {

    position: relative;

    margin-bottom: 1.25rem;

    border-radius: var(--radius-sm);

    overflow: hidden;

}



.world-map-img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    opacity: 0.75;

}



.map-overlay-badge {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(6, 10, 18, 0.9);

    padding: 0.6rem 1.25rem;

    border-radius: var(--radius-md);

    border: 1px solid var(--primary-blue);

}



/* Global Impact Section (VIP Style) */

.global-impact-section {

    padding: 6rem 0;

    background: rgba(10, 16, 29, 0.4);

}



.global-impact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    padding: 2rem;

    overflow: hidden;

}



.impact-visual {

    position: relative;

    border-radius: var(--radius-md);

    overflow: hidden;

}



.impact-map {

    width: 100%;

    height: 100%;

    min-height: 300px;

    border-radius: var(--radius-md);

}



.leaflet-container {

    background: rgba(0, 20, 40, 0.8) !important;

}



/* Custom Popup Styling */

.custom-popup .leaflet-popup-content-wrapper {

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.95) 0%, rgba(0, 200, 255, 0.9) 100%);

    border-radius: var(--radius-md);

    border: 2px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);

    padding: 0;

}



.custom-popup .leaflet-popup-tip {

    background: rgba(0, 102, 255, 0.95);

}



.custom-popup .leaflet-popup-content {

    margin: 0;

    padding: 0.75rem 1.25rem;

    min-width: 120px;

}



.map-popup {

    text-align: center;

}



.popup-title {

    font-size: 0.85rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 0.25rem;

}



.popup-percentage {

    font-size: 1.5rem;

    font-weight: 800;

    color: #FFF;

    line-height: 1;

}



/* Region Marker Styling */

.region-marker {

    transition: all 0.3s ease;

}



.region-marker:hover {

    cursor: pointer;

}



.impact-badge {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.9) 0%, rgba(0, 200, 255, 0.8) 100%);

    padding: 1.25rem 2rem;

    border-radius: var(--radius-lg);

    border: 2px solid rgba(255, 255, 255, 0.2);

    text-align: center;

    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.4);

}



.impact-badge-number {

    display: block;

    font-size: 2.5rem;

    font-weight: 800;

    color: #FFF;

    line-height: 1;

}



.impact-badge-text {

    display: block;

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.9);

    margin-top: 0.25rem;

    font-weight: 600;

}



.impact-stats {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1.5rem;

    padding: 1rem 0;

}



.impact-stat-item {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.stat-label {

    font-size: 0.9rem;

    color: var(--text-body);

    font-weight: 600;

}



.stat-value {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--accent-cyan);

}



.stat-bar {

    width: 100%;

    height: 8px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

    overflow: hidden;

}



.stat-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));

    border-radius: 4px;

    transition: width 1s ease-out;

}



/* Awards & Certifications Section */

.awards-section {

    padding: 6rem 0;

}



.awards-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

}



.award-card {

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1rem;

    transition: var(--transition);

}



.award-card:hover {

    transform: translateY(-5px);

    border-color: var(--border-glow);

    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.25);

}



.award-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.15) 0%, rgba(0, 200, 255, 0.1) 100%); */

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.75rem;

    /* border: 1px solid rgba(0, 102, 255, 0.3); */

    /* box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2); */

}



.award-icon>i {

    font-size: 3rem;

}



.award-card:hover .award-icon {

    /* background: linear-gradient(135deg, rgba(0, 102, 255, 0.25) 0%, rgba(0, 200, 255, 0.2) 100%); */

    border-color: rgba(0, 200, 255, 0.5);

    transform: scale(1.1);

}



.award-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: #FFF;

    margin: 0;

}



.award-desc {

    font-size: 0.75rem;

    color: var(--text-muted);

    margin: 0;

    line-height: 1.4;

}



.map-badge-val {

    display: block;

    font-size: 1.35rem;

    font-weight: 800;

    color: #FFF;

}



.map-badge-txt {

    font-size: 0.7rem;

    color: var(--accent-cyan);

}



.impact-regions-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.5rem;

}



.region-row {

    font-size: 0.775rem;

    color: var(--text-muted);

    display: flex;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.02);

    padding: 0.4rem 0.6rem;

    border-radius: 6px;

}



.region-val {

    color: var(--accent-cyan);

    font-weight: 700;

}



.ind-icon-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.65rem;

}



.ind-item {

    font-size: 0.775rem;

    color: var(--text-body);

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: rgba(255, 255, 255, 0.02);

    padding: 0.5rem 0.65rem;

    border-radius: 6px;

}



.ind-item i {

    color: var(--primary-light);

}



.partner-badges-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.65rem;

}



.partner-badge {

    font-size: 0.775rem;

    color: #FFF;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: rgba(255, 255, 255, 0.03);

    padding: 0.55rem 0.75rem;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



/* About Extraordinary Call To Action */

.about-extraordinary-cta {

    padding: 3.5rem 3rem;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.35) 0%, rgba(6, 10, 18, 0.95) 100%);

    border: 1px solid rgba(0, 102, 255, 0.4);

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2.5rem;

    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.2);

}



.cta-banner-title {

    font-size: 2.2rem;

    font-weight: 800;

    color: #FFF;

    line-height: 1.2;

    margin-bottom: 0.75rem;

}



.cta-banner-desc {

    color: var(--text-body);

    font-size: 0.95rem;

}



.cta-right-btns {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-shrink: 0;

}



.btn-lg-glow {

    padding: 0.95rem 1.75rem !important;

    font-size: 0.9rem !important;

}



.cta-play-btn-wrapper {

    margin-left: 0.5rem;

}



.cta-play-btn {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(0, 102, 255, 0.2);

    border: 1px solid var(--accent-cyan);

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    cursor: pointer;

    box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);

    transition: var(--transition);

}



.cta-play-btn:hover {

    transform: scale(1.1);

    background: var(--primary-blue);

}



/* RESPONSIVE STYLES FOR ABOUT PAGE */

@media (max-width: 1024px) {



    .about-hero-grid,

    .story-grid {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .impact-grid,

    .tech-badges-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .why-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .team-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .triple-grid {

        grid-template-columns: 1fr;

    }



    .timeline-row {

        grid-template-columns: repeat(3, 1fr);

        gap: 1.5rem;

    }



    .about-extraordinary-cta {

        flex-direction: column;

        text-align: center;

    }



    .cta-right-btns {

        flex-wrap: wrap;

        justify-content: center;

    }



    /* New sections responsive */

    .global-impact-wrapper {

        grid-template-columns: 1fr;

    }



    .awards-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .industries-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .features-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .hero-features-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .expertise-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .about-hero-title {

        font-size: 2.2rem;

    }



    .values-grid {

        grid-template-columns: 1fr;

    }



    .impact-grid,

    .tech-badges-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .team-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .why-grid {

        grid-template-columns: 1fr;

    }



    /* New sections responsive */

    .awards-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .industries-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .features-grid {

        grid-template-columns: 1fr;

    }



    .hero-features-grid {

        grid-template-columns: 1fr;

    }



    .expertise-grid {

        grid-template-columns: 1fr;

    }



    .difference-grid {

        grid-template-columns: 1fr;

    }



    .tech-tabs-wrapper {

        flex-direction: column;

    }



    .tech-tabs-nav {

        flex-direction: row;

        flex-wrap: wrap;

        min-width: auto;

        margin-bottom: 2rem;

    }



    .testimonials-header {

        flex-direction: column;

        align-items: center;

        gap: 1rem;

    }



    .testimonials-title-wrapper {

        text-align: center;

    }



    .process-flow-grid {

        flex-direction: column;

        gap: 1.5rem;

    }



    .process-connector {

        display: none;

    }



    .badge-top-left,

    .badge-top-right {

        position: relative;

        top: auto;

        left: auto;

        right: auto;

        margin-bottom: 0.5rem;

    }



    .badge-bottom-center {

        position: relative;

        left: auto;

        transform: none;

        bottom: auto;

    }

}



@media (max-width: 480px) {



    .impact-grid,

    .tech-badges-grid,

    .team-grid {

        grid-template-columns: 1fr;

    }



    /* New sections responsive */

    .awards-grid {

        grid-template-columns: 1fr;

    }



    .industries-grid {

        grid-template-columns: 1fr;

    }



    .global-impact-wrapper {

        padding: 1rem;

    }



    .impact-badge {

        padding: 0.75rem 1.25rem;

    }



    .impact-badge-number {

        font-size: 1.75rem;

    }



    .impact-stats {

        gap: 1rem;

    }



    .stat-value {

        font-size: 1rem;

    }



    .timeline-row {

        grid-template-columns: 1fr;

    }



    /* Technologies page responsive */

    .hero-3d-scene {

        height: 300px;

    }



    .floating-card {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

}



/* Keep the vertical process timeline intact after shared responsive rules. */

@media (max-width: 1024px) and (min-width: 769px) {

    .homepage .process-grid {

        display: flex;

    }



    .homepage .process-grid::before {

        display: block;

    }

}



@media (max-width: 768px) {

    .homepage .process-grid {

        display: flex;

    }



    .homepage .process-grid::before {

        display: block !important;

    }

}



/* ===========================================================================

   INNER PAGES — CINEMATIC HERO & VIP FINISH

   =========================================================================== */

.premium-inner-page {

    background: #060a12;

}



.premium-inner-page .hero-section,

.premium-inner-page .about-hero-section {

    min-height: min(690px, 82svh);

    display: grid;

    align-items: center;

    isolation: isolate;

    padding: 8.5rem 0 4.5rem;

    background: #06101f;

}



.page-hero-media {

    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    background: #07101f;

}



.page-hero-media video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: .42;

    filter: saturate(.78) contrast(1.12);

    transform: scale(1.025);

}



.page-hero-media::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(110deg, rgba(3, 8, 20, .94) 5%, rgba(4, 14, 31, .78) 54%, rgba(0, 70, 145, .52)), radial-gradient(circle at 78% 22%, rgba(0, 200, 255, .18), transparent 31%);

}



.premium-inner-page .hero-glow-bg {

    z-index: -1;

    opacity: .82;

}



.premium-inner-page .hero-grid-centered,

.premium-inner-page .about-hero-grid {

    position: relative;

    z-index: 1;

}



.premium-inner-page .hero-content-centered {

    max-width: 900px;

    margin: auto;

}



.premium-inner-page .hero-title,

.premium-inner-page .about-hero-title {

    text-shadow: 0 6px 30px rgba(0, 0, 0, .48);

}



.premium-inner-page .hero-description {

    margin-left: auto !important;

    margin-right: auto;

    max-width: 700px;

    color: #d4e4f5;

}



.premium-inner-page .hero-btns .btn {

    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);

}



.premium-inner-page .hero-btns .btn-outline {

    background: rgba(5, 12, 25, .38);

    backdrop-filter: blur(9px);

}



/* Make every content area feel like a single, considered design system. */

.premium-inner-page section:not(.hero-section):not(.about-hero-section):not(.cta-section) {

    position: relative;

    overflow: hidden;

}



.premium-inner-page section:not(.hero-section):not(.about-hero-section):not(.cta-section)::before {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(0, 102, 255, .11), transparent 68%);

    top: -260px;

    right: -190px;

    pointer-events: none;

}



.premium-inner-page .tech-tabs-section,

.premium-inner-page .portfolio-filter-section,

.premium-inner-page .tech-expertise-section,

.premium-inner-page .blog-section,

.premium-inner-page .story-section {

    border-top: 1px solid rgba(110, 196, 255, .09);

    border-bottom: 1px solid rgba(110, 196, 255, .07);

}



.premium-inner-page .tech-tab-btn,

.premium-inner-page .filter-btn,

.premium-inner-page .tech-card,

.premium-inner-page .service-card,

.premium-inner-page .portfolio-card,

.premium-inner-page .blog-card,

.premium-inner-page .contact-card {

    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;

}



.premium-inner-page .tech-card:hover,

.premium-inner-page .service-card:hover,

.premium-inner-page .portfolio-card:hover,

.premium-inner-page .blog-card:hover,

.premium-inner-page .contact-card:hover {

    transform: translateY(-8px);

    border-color: rgba(0, 200, 255, .6);

    box-shadow: 0 20px 42px rgba(0, 0, 0, .28), 0 0 28px rgba(0, 119, 255, .13);

}



.premium-inner-page .section-title {

    letter-spacing: -.035em;

}



.premium-inner-page .section-badge {

    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 60, 150, .15);

}



.premium-inner-page .cta-box {

    position: relative;

    overflow: hidden;

}



.premium-inner-page .cta-box::after {

    content: '';

    position: absolute;

    inset: auto -12% -140% auto;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: rgba(0, 200, 255, .12);

    filter: blur(25px);

    pointer-events: none;

}



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

    .page-hero-media {

        display: none;

    }



    .premium-inner-page *,

    .premium-inner-page *::before,

    .premium-inner-page *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

    }

}



@media (max-width: 768px) {



    .premium-inner-page .hero-section,

    .premium-inner-page .about-hero-section {

        min-height: 620px;

        padding: 7.5rem 0 3.5rem;

    }



    .page-hero-media video {

        opacity: .31;

    }

}



/* About page: centred content lets the video be the hero visual. */

.premium-inner-page .about-hero-section .page-hero-media video {

    opacity: .52;

}



.premium-inner-page .about-hero-section .page-hero-media::after {

    background: linear-gradient(110deg, rgba(3, 8, 20, .72) 5%, rgba(4, 14, 31, .52) 54%, rgba(0, 70, 145, .32)), radial-gradient(circle at 78% 22%, rgba(0, 200, 255, .12), transparent 34%);

}



.premium-inner-page .about-hero-grid {

    display: block;

    max-width: 880px;

    margin: 0 auto;

    text-align: center;

}



.premium-inner-page .about-hero-text {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.premium-inner-page .about-hero-desc {

    max-width: 720px;

    color: #e0ecf8;

}



.premium-inner-page .about-hero-pills {

    width: min(100%, 760px);

    margin-left: auto;

    margin-right: auto;

    text-align: left;

}



@media (max-width: 768px) {

    .premium-inner-page .about-hero-section .page-hero-media video {

        opacity: .4;

    }

}



/* Stronger, conversion-focused About hero content. */

.premium-inner-page .about-hero-title {

    max-width: 960px;

    margin: 0 auto 1.2rem;

    font-size: clamp(2.55rem, 5vw, 4.5rem);

    line-height: 1.04;

    letter-spacing: -.055em;

}



.premium-inner-page .about-hero-section {

    min-height: 100svh;

    padding-top: 9rem;

    padding-bottom: 7rem;

}



.premium-inner-page .about-hero-desc {

    margin: 0 auto;

    font-size: clamp(1rem, 1.35vw, 1.18rem);

    line-height: 1.7;

}



.about-hero-actions {

    display: flex;

    justify-content: center;

    gap: .9rem;

    margin: 1.8rem 0 1.7rem;

}



.about-hero-actions .btn {

    min-width: 176px;

}



.about-hero-actions .btn-outline {

    border-color: rgba(170, 220, 255, .54);

    background: rgba(3, 13, 28, .35);

}



.about-hero-proof {

    display: flex;

    justify-content: center;

    gap: 0;

    width: min(100%, 650px);

    margin: 0 auto 2rem;

    padding: .7rem 0;

    border: 1px solid rgba(141, 208, 255, .15);

    border-radius: 16px;

    background: rgba(4, 19, 39, .36);

    backdrop-filter: blur(12px);

}



.about-hero-proof>div {

    flex: 1;

    padding: .15rem 1rem;

    border-right: 1px solid rgba(141, 208, 255, .16);

}



.about-hero-proof>div:last-child {

    border: 0;

}



.about-hero-proof strong {

    display: block;

    color: #fff;

    font-size: 1.28rem;

    line-height: 1.2;

}



.about-hero-proof strong span {

    color: var(--accent-cyan);

}



.about-hero-proof small {

    display: block;

    margin-top: .22rem;

    color: #a9bed4;

    font-size: .73rem;

    font-weight: 600;

}



.premium-inner-page .about-hero-pills {

    gap: .75rem;

}



.premium-inner-page .about-hero-pills .pill-item {

    padding: .85rem 1rem;

    border: 1px solid rgba(145, 210, 255, .14);

    background: linear-gradient(115deg, rgba(10, 40, 75, .5), rgba(7, 17, 34, .28));

    backdrop-filter: blur(10px);

    transition: transform .28s ease, border-color .28s ease, background .28s ease;

}



.premium-inner-page .about-hero-pills .pill-item:hover {

    transform: translateY(-4px);

    border-color: rgba(0, 200, 255, .58);

    background: rgba(9, 56, 104, .52);

}



.premium-inner-page .about-hero-pills .pill-title {

    margin-bottom: .13rem;

}



.about-scroll-cue {

    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: 1.6rem;

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: .42rem;

    color: rgba(229, 243, 255, .78);

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

    transform: translateX(-50%);

    transition: color .25s ease;

}



.about-scroll-cue i {

    display: grid;

    width: 50px;

    height: 50px;

    place-items: center;

    /* border: 1px solid rgba(151, 218, 255, .47); */

    border-radius: 50%;

    color: white;

    font-size: 1.2rem;

    background: transparent;

    /* box-shadow: 0 0 22px rgba(0, 174, 255, .16); */

    animation: about-scroll-bounce 1.7s ease-in-out infinite;

}



.about-scroll-cue:hover {

    color: #fff;

}



.about-scroll-cue:hover i {

    border-color: var(--accent-cyan);

    /* background: rgba(0, 102, 255, .32); */

}



@keyframes about-scroll-bounce {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(7px);

    }

}



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

    .about-scroll-cue i {

        animation: none;

    }

}



@media (max-width: 768px) {

    .premium-inner-page .about-hero-section {

        min-height: 100svh;

        padding: 7.5rem 0 5.5rem;

    }



    .about-scroll-cue {

        bottom: 1rem;

    }

}



@media (max-width: 600px) {

    .about-hero-actions {

        flex-direction: column;

        width: min(100%, 300px);

    }



    .about-hero-proof {

        gap: .2rem;

        padding: .65rem .25rem;

    }



    .about-hero-proof>div {

        padding: .15rem .4rem;

    }



    .about-hero-proof small {

        font-size: .62rem;

    }



    .about-hero-proof strong {

        font-size: 1.04rem;

    }

}



/* About label mirrors the bold home-page “We Build Digital Solutions” badge. */

.premium-inner-page .about-hero-badge {

    position: relative;

    isolation: isolate;

    gap: .55rem;

    margin: 0 auto 1.35rem;

    padding: .56rem 1.08rem;

    overflow: hidden;

    /* border: 1px solid rgba(177, 189, 255, .42); */

    border-radius: 10px;

    background: #0066ff;

    /* box-shadow: 0 10px 28px rgba(52, 86, 255, .42), inset 0 1px rgba(255, 255, 255, .28); */

    color: #fff;

    font-size: .76rem;

    letter-spacing: .095em;

}



.premium-inner-page .about-hero-badge::before {

    content: '';

    position: absolute;

    z-index: 0;

    top: -110%;

    left: -35%;

    width: 42%;

    height: 320%;

    background: rgba(255, 255, 255, .34);

    transform: rotate(24deg);

    animation: about-badge-shine 4.8s ease-in-out infinite;

}



.premium-inner-page .about-hero-badge i,

.premium-inner-page .about-hero-badge span {

    position: relative;

    z-index: 1;

}



.premium-inner-page .about-hero-badge i {

    color: #dff7ff;

    font-size: .86rem;

}



@keyframes about-badge-shine {



    0%,

    58% {

        transform: translateX(-260%) rotate(24deg);

    }



    78%,

    100% {

        transform: translateX(600%) rotate(24deg);

    }

}



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

    .premium-inner-page .about-hero-badge::before {

        animation: none;

    }

}



/* Shared VIP hero treatment for Services, Portfolio, Technology, Blog, Contact and Web Development. */

.premium-inner-page .hero-section:not(.video-hero) {

    min-height: 100svh;

    padding: 9rem 0 7rem;

}



.premium-inner-page .hero-section:not(.video-hero) .page-hero-media video {

    opacity: .52;

}



.premium-inner-page .hero-section:not(.video-hero) .page-hero-media::after {

    background: linear-gradient(110deg, rgba(3, 8, 20, .72) 5%, rgba(4, 14, 31, .52) 54%, rgba(0, 70, 145, .32)), radial-gradient(circle at 78% 22%, rgba(0, 200, 255, .12), transparent 34%);

}



.premium-inner-page .hero-section:not(.video-hero) .hero-grid-centered {

    width: 100%;

    text-align: center;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-content-centered {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.premium-inner-page .hero-section:not(.video-hero) .section-badge {

    position: relative;

    isolation: isolate;

    margin: 0 auto 1.35rem;

    padding: .56rem 1.08rem;

    overflow: hidden;

    border: 1px solid rgba(177, 189, 255, .42);

    background: #0066ff;

    box-shadow: 0 10px 28px rgba(52, 86, 255, .42), inset 0 1px rgba(255, 255, 255, .28);

    color: #fff;

    font-size: .76rem;

    letter-spacing: .095em;

}



.premium-inner-page .hero-section:not(.video-hero) .section-badge i {

    color: #dff7ff;

}



.premium-inner-page .hero-section:not(.video-hero) .section-badge::before {

    content: '';

    position: absolute;

    z-index: 0;

    top: -110%;

    left: -35%;

    width: 42%;

    height: 320%;

    pointer-events: none;

    background: rgba(255, 255, 255, .34);

    transform: rotate(24deg);

    animation: about-badge-shine 4.8s ease-in-out infinite;

}



.premium-inner-page .hero-section:not(.video-hero) .section-badge i {

    position: relative;

    z-index: 1;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-title {

    max-width: 980px;

    margin: 0 auto 1.2rem;

    font-size: clamp(2.55rem, 5vw, 4.5rem);

    line-height: 1.04;

    letter-spacing: -.055em;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-description {

    max-width: 720px;

    margin: 0 auto 1.85rem !important;

    color: #e0ecf8;

    font-size: clamp(1rem, 1.35vw, 1.18rem);

    line-height: 1.7;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-btns {

    justify-content: center;

    margin: 0;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-btns .btn {

    min-width: 176px;

}



.premium-inner-page .hero-section:not(.video-hero) .hero-btns .btn-outline {

    border-color: rgba(170, 220, 255, .54);

    background: rgba(3, 13, 28, .35);

}



.inner-scroll-cue {

    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: 1.6rem;

    display: grid;

    width: 50px;

    height: 50px;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background: transparent;

    transform: translateX(-50%);

    transition: color .25s ease;

}



.inner-scroll-cue i {

    color: #fff;

    font-size: 1.2rem;

    animation: about-scroll-bounce 1.7s ease-in-out infinite;

}



.inner-scroll-cue:hover {

    color: #fff;

}



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

    .inner-scroll-cue i {

        animation: none;

    }

}



@media (max-width: 768px) {

    .premium-inner-page .hero-section:not(.video-hero) {

        min-height: 100svh;

        padding: 7.5rem 0 5.5rem;

    }



    .premium-inner-page .hero-section:not(.video-hero) .page-hero-media video {

        opacity: .4;

    }



    .inner-scroll-cue {

        bottom: 1rem;

    }

}



/* About page — unified premium treatment for every section after the hero. */

.about-page .story-section,

.about-page .team-section,

.about-page .tech-ecosystem-section,

.about-page .global-impact-section {

    background: linear-gradient(135deg, rgba(8, 20, 40, .82), rgba(7, 11, 25, .94));

}



.about-page .values-section,

.about-page .why-choose-section,

.about-page .impact-section,

.about-page .process-section,

.about-page .industries-section,

.about-page .awards-section {

    background: radial-gradient(circle at 92% 8%, rgba(0, 103, 255, .12), transparent 28%), #080f1c;

}



.about-page .story-img-box {

    border: 1px solid rgba(115, 199, 255, .22);

    box-shadow: 0 26px 58px rgba(0, 0, 0, .38), 0 0 30px rgba(0, 100, 255, .1);

}



.about-page .story-img {

    filter: saturate(1.08) contrast(1.04);

}



.about-page .section-title {

    letter-spacing: -.045em;

}



.about-page section:not(.about-hero-section) .section-badge {

    border: 1px solid rgba(100, 188, 255, .26);

    background: rgba(0, 91, 210, .13);

    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 59, 150, .13);

}



.about-page .value-card,

.about-page .impact-card,

.about-page .why-card,

.about-page .process-card,

.about-page .tech-badge-item,

.about-page .industry-card,

.about-page .award-card {

    border: 1px solid rgba(116, 194, 255, .15);

    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 14px 32px rgba(0, 0, 0, .18);

    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;

}



.about-page .value-card:hover,

.about-page .impact-card:hover,

.about-page .why-card:hover,

.about-page .process-card:hover,

.about-page .tech-badge-item:hover,

.about-page .industry-card:hover,

.about-page .award-card:hover {

    transform: translateY(-7px);

    border-color: rgba(0, 200, 255, .62);

    background: linear-gradient(135deg, rgba(0, 91, 210, .2), rgba(12, 18, 36, .86));

    box-shadow: 0 22px 42px rgba(0, 0, 0, .28), 0 0 26px rgba(0, 129, 255, .12);

}



.about-page .team-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    max-width: 980px;

    margin: 0 auto;

    gap: 1.5rem;

}



.about-page .team-card {

    padding: 2rem 1.45rem;

    border: 1px solid rgba(112, 198, 255, .19);

    background: linear-gradient(145deg, rgba(18, 41, 72, .72), rgba(7, 13, 29, .88));

    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 18px 38px rgba(0, 0, 0, .22);

}



.about-page .team-card:hover {

    transform: translateY(-10px);

    border-color: rgba(0, 200, 255, .68);

    box-shadow: 0 24px 45px rgba(0, 0, 0, .32), 0 0 28px rgba(0, 119, 255, .15);

}



.about-page .team-avatar-box {

    width: 116px;

    height: 116px;

    border: 3px solid rgba(0, 200, 255, .52);

    box-shadow: 0 0 0 7px rgba(0, 102, 255, .12), 0 0 25px rgba(0, 184, 255, .22);

}



.about-page .team-name {

    font-size: 1.15rem;

}



.about-page .team-role {

    margin: .42rem 0 .7rem;

    letter-spacing: .04em;

}



.about-page .team-bio {

    min-height: 44px;

}



@media (max-width: 768px) {

    .about-page .team-grid {

        grid-template-columns: 1fr;

        max-width: 370px;

    }

}



/* About uses the exact alternating timeline treatment from the homepage process. */

.about-page .process-section {

    --process-section-bg: #050814;

    background: var(--process-section-bg);

}



.about-page .process-grid {

    display: flex;

    flex-direction: column;

    width: min(100%, 1040px);

    margin: 4rem auto 0;

    gap: 1.35rem;

    isolation: isolate;

}



.about-page .process-grid::before {

    top: 0;

    bottom: 0;

    left: 50%;

    z-index: 0;

    width: 2px;

    height: auto;

    transform: translateX(-50%);

    background: linear-gradient(to bottom, transparent, #0066ff 8%, #3385ff 88%, transparent);

    box-shadow: 0 0 16px rgba(0, 102, 255, .72);

}



.about-page .process-card {

    width: calc(50% - 48px);

    min-height: 150px;

    padding: 1.8rem 2.1rem;

    position: relative;

    display: block;

    text-align: right;

    border-radius: 0;

    background: linear-gradient(135deg, rgba(15, 35, 72, .84), rgba(8, 13, 30, .82));

    border: 1px solid rgba(122, 180, 255, .25);

    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;

}



.about-page .process-card:nth-child(odd) {

    margin-right: auto;

}



.about-page .process-card:nth-child(even) {

    margin-left: auto;

    text-align: left;

}



.about-page .process-card::before {

    position: absolute;

    top: 1.4rem;

    color: rgba(0, 200, 255, .32);

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: .12em;

}



.about-page .process-card:nth-child(1)::before {

    content: '01 / DISCOVER';

    left: 2rem;

}



.about-page .process-card:nth-child(2)::before {

    content: '02 / RESEARCH';

    right: 2rem;

}



.about-page .process-card:nth-child(3)::before {

    content: '03 / PLAN';

    left: 2rem;

}



.about-page .process-card:nth-child(4)::before {

    content: '04 / DESIGN';

    right: 2rem;

}



.about-page .process-card:nth-child(5)::before {

    content: '05 / DEVELOP';

    left: 2rem;

}



.about-page .process-card:nth-child(6)::before {

    content: '06 / TEST';

    right: 2rem;

}



.about-page .process-card:nth-child(7)::before {

    content: '07 / LAUNCH';

    left: 2rem;

}



.about-page .process-card:nth-child(8)::before {

    content: '08 / GROW';

    right: 2rem;

}



.about-page .process-node {

    position: absolute;

    z-index: 2;

    top: 50%;

    width: 62px;

    height: 62px;

    margin: 0;

    transform: translateY(-50%);

    border-radius: 0;

    background: var(--process-section-bg);

    border-color: #3385ff;

    color: #7dc9ff;

    box-shadow: none;

}



.about-page .process-card:nth-child(odd) .process-node {

    right: -80px;

}



.about-page .process-card:nth-child(even) .process-node {

    left: -80px;

}



.about-page .process-step-title {

    margin: 1.1rem 0 .35rem;

    color: #fff;

    font-size: 1.22rem;

}



.about-page .process-step-desc {

    margin: 0;

    color: #b6c9e3;

}



.about-page .process-card:hover {

    transform: translateY(-6px) scale(1.02);

    border-color: var(--accent-cyan);

    background: linear-gradient(135deg, rgba(15, 35, 72, .84), rgba(8, 13, 30, .82));

    box-shadow: 0 20px 42px rgba(0, 0, 0, .32), 0 0 28px rgba(0, 102, 255, .16);

}



.about-page .process-card:hover .process-node {

    transform: translateY(-50%) scale(1.12) rotate(8deg);

    background: var(--process-section-bg);

    color: #fff;

}



@media (max-width: 768px) {

    .about-page .process-grid {

        gap: 1rem;

        margin-top: 2.5rem;

        padding-left: 3.6rem;

    }



    .about-page .process-grid::before {

        left: 30px;

    }



    .about-page .process-card,

    .about-page .process-card:nth-child(even),

    .about-page .process-card:nth-child(odd) {

        width: 100%;

        margin: 0;

        padding: 1.5rem 1.4rem 1.5rem 2.2rem;

        text-align: left;

    }



    .about-page .process-node,

    .about-page .process-card:nth-child(odd) .process-node,

    .about-page .process-card:nth-child(even) .process-node {

        left: -3.6rem;

        right: auto;

        width: 60px;

        height: 60px;

    }



    .about-page .process-card::before,

    .about-page .process-card:nth-child(even)::before {

        position: static;

        display: block;

        margin-bottom: .45rem;

    }

}



/* Centred VIP technology ecosystem on the About page. */

.about-page .tech-ecosystem-section {

    padding: 7rem 0;

}



.about-page .tech-ecosystem-intro {

    max-width: 620px;

    margin: .8rem auto 0;

    color: #b8cbe0;

    font-size: 1.03rem;

    line-height: 1.65;

}



.about-page .tech-badges-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    max-width: 1080px;

    margin: 0 auto;

    gap: 1.25rem;

}



.about-page .tech-badge-item {

    min-height: 190px;

    padding: 1.8rem 1rem;

    flex-direction: column;

    gap: .9rem;

    border-radius: 18px;

    text-align: center;

    background: linear-gradient(145deg, rgba(19, 43, 76, .78), rgba(7, 14, 31, .9));

}



.about-page .tech-badge-item i {

    display: grid;

    width: 76px;

    height: 76px;

    place-items: center;

    margin: 0;

    border: 1px solid rgba(113, 205, 255, .28);

    border-radius: 22px;

    background: rgba(0, 100, 255, .1);

    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 24px rgba(0, 63, 170, .18);

    font-size: 2.45rem;

    transition: transform .32s ease, box-shadow .32s ease;

}



.about-page .tech-badge-item span {

    color: #f5f9ff;

    font-size: 1.06rem;

    font-weight: 800;

    letter-spacing: .015em;

}



.about-page .tech-badge-item:hover i {

    transform: translateY(-5px) scale(1.08);

    box-shadow: 0 14px 30px rgba(0, 152, 255, .26), inset 0 1px rgba(255, 255, 255, .16);

}



.about-page .tech-badge-item i,

.about-page .tech-badge-item:hover i {

    border: 0;

    background: transparent;

    box-shadow: none;

}



@media (max-width: 900px) {

    .about-page .tech-badges-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (max-width: 600px) {

    .about-page .tech-ecosystem-section {

        padding: 5rem 0;

    }



    .about-page .tech-badges-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: .8rem;

    }



    .about-page .tech-badge-item {

        min-height: 160px;

        padding: 1.25rem .6rem;

    }



    .about-page .tech-badge-item i {

        width: 62px;

        height: 62px;

        font-size: 2rem;

        border-radius: 18px;

    }

}



/* Mobile quality pass: Services and Contact. */

@media (max-width: 1024px) {

    .tech-tabs-wrapper {

        gap: 2rem;

    }



    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }



    .contact-info-container,

    .tech-tabs-nav {

        position: static;

    }

}



@media (max-width: 768px) {

    .tech-tabs-section {

        padding: 4rem 0;

    }



    .tech-tabs-wrapper {

        flex-direction: column;

        gap: 1.5rem;

    }



    .tech-tabs-nav {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;

        gap: .65rem;

        margin: 0;

    }



    .tech-tab-btn {

        min-width: 0;

        min-height: 58px;

        padding: .8rem;

        justify-content: center;

        gap: .45rem;

        text-align: center;

        font-size: .8rem;

        line-height: 1.25;

    }



    .tech-tabs-content {

        width: 100%;

        min-height: 0;

    }



    .tech-tab-pane>div[style*="grid-template-columns"] {

        grid-template-columns: 1fr !important;

        gap: 1.35rem !important;

    }



    .tech-tab-pane img {

        width: 100%;

        height: auto;

        max-height: 260px;

        object-fit: cover;

    }



    .contact-form-container,

    .contact-info-card {

        padding: 1.35rem;

    }



    .contact-form {

        gap: 1rem;

    }



    .form-row {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    .form-group input,

    .form-group select,

    .form-group textarea {

        width: 100%;

        font-size: 16px;

    }



    .contact-detail-item {

        align-items: flex-start;

        text-align: left;

    }



    .contact-detail-content {

        min-width: 0;

        overflow-wrap: anywhere;

    }



    .map-container {

        height: 320px;

        padding: 1rem;

    }



    .map-container iframe {

        height: 100% !important;

    }



    .hero-btns {

        width: 100%;

        gap: .75rem;

    }



    .hero-btns .btn {

        justify-content: center;

    }

}



@media (max-width: 420px) {

    .tech-tabs-nav {

        grid-template-columns: 1fr;

    }



    .tech-tab-btn {

        min-height: 50px;

        justify-content: flex-start;

        padding: .8rem 1rem;

        text-align: left;

    }



    .contact-form-container,

    .contact-info-card {

        padding: 1.1rem;

    }



    .contact-detail-icon {

        width: 42px;

        height: 42px;

        font-size: 1rem;

    }



    .hero-btns {

        flex-direction: column;

    }



    .hero-btns .btn {

        width: 100%;

    }

}



/* ==========================================================================

   VIP LIGHT / DARK THEME SWITCHER

   ========================================================================== */

.theme-toggle {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: .42rem;

    min-width: 92px;

    height: 40px;

    padding: 4px 8px 4px 5px;

    overflow: hidden;

    border: 1px solid rgba(111, 198, 255, .28);

    border-radius: 999px;

    background: rgba(7, 18, 37, .62);

    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 7px 22px rgba(0, 0, 0, .18);

    color: var(--text-bright);

    cursor: pointer;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;

}



.theme-toggle:hover {

    transform: translateY(-2px);

    border-color: var(--accent-cyan);

    box-shadow: 0 10px 26px rgba(0, 129, 255, .23);

}



.theme-toggle:focus-visible {

    outline: 3px solid rgba(0, 200, 255, .42);

    outline-offset: 3px;

}



.theme-toggle-icon,

.theme-toggle-thumb {

    display: grid;

    place-items: center;

    width: 30px;

    height: 30px;

    border-radius: 50%;

}



.theme-toggle-sun {

    color: #ffd166;

    font-size: .8rem;

    opacity: .62;

    transition: opacity .3s ease, color .3s ease;

}



.theme-toggle-thumb {

    position: absolute;

    left: 5px;

    background: linear-gradient(135deg, #0066FF, #0066FF);

    color: #fff;

    box-shadow: 0 3px 10px rgba(0, 96, 210, .45);

    transition: transform .34s cubic-bezier(.2, .8, .2, 1), background .3s ease;

}



.theme-toggle-text {

    margin-left: 29px;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .025em;

}



html[data-theme="light"] {

    --bg-main: #FFFFFF;

    --bg-secondary: #F8FAFC;

    --bg-card: rgba(255, 255, 255, .9);

    --bg-card-hover: rgba(255, 255, 255, 1);

    --bg-glass: rgba(0, 102, 255, .05);

    --primary-blue: #0066FF;

    --primary-light: #0066FF;

    --primary-dark: #0047B3;

    --accent-cyan: #0066FF;

    --accent-glow: rgba(0, 102, 255, .2);

    --text-heading: #1e293b;

    --text-body: #64748b;

    --text-muted: #94a3b8;

    --text-bright: #334155;

    --border-color: rgba(0, 102, 255, .15);

    --border-glow: rgba(0, 102, 255, .25);

}



html[data-theme="light"] body {

    background: var(--bg-main);

    color: var(--text-body);

}



html[data-theme="light"] .theme-toggle {

    background: rgba(255, 255, 255, .85);

    border-color: rgba(0, 99, 225, .23);

    color: #18365d;

}



html[data-theme="light"] .theme-toggle-thumb {

    transform: translateX(52px);

    background: linear-gradient(135deg, #ffae18, #ffda64);

    color: #734400;

    box-shadow: 0 3px 10px rgba(220, 142, 0, .27);

}



html[data-theme="light"] .theme-toggle-sun {

    opacity: 1;

    color: #d58a00;

}



.theme-toggle-thumb .fa-sun {

    display: none;

}



.theme-toggle-thumb .fa-moon {

    display: inline-block;

}



html[data-theme="light"] .theme-toggle-thumb .fa-moon {

    display: none !important;

}



html[data-theme="light"] .theme-toggle-thumb .fa-sun {

    display: inline-block !important;

}



html[data-theme="light"] .site-header.scrolled {

    background: rgba(247, 250, 255, .88);

    box-shadow: 0 10px 30px rgba(26, 62, 112, .13);

}



html[data-theme="light"] .dropdown-menu,

html[data-theme="light"] .mobile-drawer {

    background: rgba(248, 251, 255, .96);

    box-shadow: 0 18px 45px rgba(30, 62, 110, .17);

}



html[data-theme="light"] .mega-dropdown {

    background: rgba(255, 255, 255, 0.98);

    border-color: rgba(0, 0, 0, 0.08);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

}



html[data-theme="light"] .dropdown-link-item {

    color: #2c3e50;

    background: transparent;

}



html[data-theme="light"] .dropdown-link-item i {

    color: #007bff;

    background: transparent;

}



html[data-theme="light"] .dropdown-link-item:hover {

    background: transparent;

    color: #007bff;

}



html[data-theme="light"] .dropdown-link-item:hover i {

    color: #007bff;

    background: transparent;

}



html[data-theme="light"] .phone-link,

html[data-theme="light"] .mobile-hamburger-btn {

    background: rgba(255, 255, 255, .7);

}



html[data-theme="light"] .glass-card,

html[data-theme="light"] .metric-card,

html[data-theme="light"] .faq-item,

html[data-theme="light"] .tech-tab-btn,

html[data-theme="light"] .contact-form-container,

html[data-theme="light"] .contact-info-card {

    background-color: rgba(255, 255, 255, .8);

    border-color: rgba(0, 102, 255, .15);

}



html[data-theme="light"] section:not(.hero-section):not(.about-hero-section),

html[data-theme="light"] .brand-ticker-section {

    background-color: var(--bg-main);

}



html[data-theme="light"] .site-footer {

    background: var(--bg-secondary);

}



html[data-theme="light"] .page-loader {

    background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F8FAFC 42%, #F1F5F9 100%);

}



html[data-theme="light"] .loader-mark {

    background: rgba(255, 255, 255, .82);

}



html[data-theme="light"] .loader-mark img {

    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));

}



html[data-theme="light"] .loader-text {

    color: #334155;

}



html[data-theme="light"] .premium-inner-page .hero-section:not(.video-hero) .hero-description {

    color: #64748b;

}



@media (max-width: 768px) {

    .header-actions .theme-toggle {

        display: inline-flex !important;

        order: 3;

        min-width: 40px;

        width: 40px;

        padding: 4px;

    }



    .header-actions .theme-toggle-text,

    .header-actions .theme-toggle-sun {

        display: none;

    }



    .header-actions .theme-toggle-thumb {

        left: 4px;

    }



    html[data-theme="light"] .header-actions .theme-toggle-thumb {

        transform: translateX(0);

    }



    .header-actions {

        gap: 0;

    }

}



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



    .theme-toggle,

    .theme-toggle-thumb,

    .theme-toggle-sun {

        transition: none;

    }

}



/* Light mode needs its own visual treatment for the cinematic and VIP layers,

   not only different design tokens. */

html[data-theme="light"] .video-hero,

html[data-theme="light"] .premium-inner-page .hero-section,

html[data-theme="light"] .premium-inner-page .about-hero-section {

    background: #FFFFFF;

}



html[data-theme="light"] .video-hero-slide {

    display: block;

    opacity: 0;

}



html[data-theme="light"] .video-hero-slide.is-active {

    opacity: 0.55;

}



html[data-theme="light"] .page-hero-media video {

    display: block;

    opacity: 0.45;

}



html[data-theme="light"] .video-hero-overlay {

    display: block;

    background: linear-gradient(120deg, rgba(255, 255, 255, .82) 4%, rgba(248, 250, 252, .68) 48%, rgba(224, 236, 255, .45) 100%);

}



html[data-theme="light"] .video-hero-overlay::after {

    display: block;

    background: radial-gradient(circle at 50% 15%, rgba(0, 102, 255, .08), transparent 43%);

}



html[data-theme="light"] .premium-inner-page .hero-section:not(.video-hero) .page-hero-media::after,

html[data-theme="light"] .premium-inner-page .about-hero-section .page-hero-media::after {

    display: block;

    background: linear-gradient(110deg, rgba(255, 255, 255, .84) 5%, rgba(248, 250, 252, .70) 54%, rgba(219, 234, 254, .50) 100%);

}



html[data-theme="light"] .video-hero .hero-title,

html[data-theme="light"] .premium-inner-page .hero-title,

html[data-theme="light"] .premium-inner-page .about-hero-title,

html[data-theme="light"] .premium-inner-page .about-hero-section h1 {

    color: #1e293b;

    text-shadow: none;

}



html[data-theme="light"] #animated-text .typing-primary {

    color: #1e293b;

}



html[data-theme="light"] #animated-text .typing-accent {

    color: #0066FF;

}



html[data-theme="light"] .video-hero .hero-description,

html[data-theme="light"] .premium-inner-page .hero-section:not(.video-hero) .hero-description,

html[data-theme="light"] .premium-inner-page .about-hero-desc {

    color: #64748b;

}



html[data-theme="light"] .inner-scroll-cue,

html[data-theme="light"] .inner-scroll-cue i,

html[data-theme="light"] .about-scroll-cue,

html[data-theme="light"] .about-scroll-cue i {

    color: #0066FF;

}



html[data-theme="light"] .video-hero-service {

    color: #334155;

    border-color: rgba(0, 102, 255, .2);

    background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(248, 250, 252, .9));

    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);

}



html[data-theme="light"] .video-hero-service:hover {

    color: #1e293b;

    border-color: #0066FF;

    background: #FFFFFF;

    box-shadow: 0 8px 20px rgba(0, 102, 255, .15);

}



html[data-theme="light"] .video-hero-service i {

    text-shadow: none;

}



html[data-theme="light"] .video-hero .btn-outline,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline {

    color: #0066ff !important;

    border-color: #0066ff;

    background: rgba(0, 102, 255, 0.06);

}



html[data-theme="light"] .video-hero .btn-outline:hover,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline:hover {

    color: #ffffff !important;

    border-color: #0066ff;

    background: #0066ff !important;

    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.35);

}



html[data-theme="light"] .section-video-bg {

    background: #060A12;

}



html[data-theme="light"] .section-video-bg::after {

    background: linear-gradient(115deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .70));

}



html[data-theme="light"] .section-video-bg video {

    display: block;

    opacity: 0.35;

}



html[data-theme="light"] .about-page .story-section,

html[data-theme="light"] .about-page .team-section,

html[data-theme="light"] .about-page .tech-ecosystem-section,

html[data-theme="light"] .about-page .global-impact-section,

html[data-theme="light"] .about-page .values-section,

html[data-theme="light"] .about-page .why-choose-section,

html[data-theme="light"] .about-page .impact-section,

html[data-theme="light"] .about-page .process-section,

html[data-theme="light"] .about-page .industries-section,

html[data-theme="light"] .about-page .awards-section {

    background: var(--bg-main);

}



html[data-theme="light"] .about-page .process-section {

    --process-section-bg: var(--bg-secondary);

}



html[data-theme="light"] .about-page .value-card,

html[data-theme="light"] .about-page .impact-card,

html[data-theme="light"] .about-page .why-card,

html[data-theme="light"] .about-page .process-card,

html[data-theme="light"] .about-page .tech-badge-item,

html[data-theme="light"] .about-page .industry-card,

html[data-theme="light"] .about-page .award-card,

html[data-theme="light"] .about-page .team-card {

    background: rgba(255, 255, 255, .88);

    border-color: rgba(22, 101, 187, .17);

    box-shadow: 0 14px 30px rgba(40, 99, 158, .1);

}



html[data-theme="light"] .about-page .process-step-title,

html[data-theme="light"] .about-page .tech-badge-item span {

    color: #183b68;

}



html[data-theme="light"] .about-page .process-step-desc,

html[data-theme="light"] .about-page .tech-ecosystem-intro {

    color: #55708e;

}



/* About-page cards have light backgrounds in light mode, so their legacy

   white headings and counter values need an explicit dark counterpart. */

html[data-theme="light"] .about-page .impact-num,

html[data-theme="light"] .about-page .t-title,

html[data-theme="light"] .about-page .value-title,

html[data-theme="light"] .about-page .why-title,

html[data-theme="light"] .about-page .team-name,

html[data-theme="light"] .about-page .step-title,

html[data-theme="light"] .about-page .triple-title,

html[data-theme="light"] .about-page .glass-card :is(h1, h2, h3, h4, h5, h6) {

    color: #183b68;

}



html[data-theme="light"] .about-page .process-card:hover,

html[data-theme="light"] .about-page .team-card:hover {

    background: #fff;

    box-shadow: 0 20px 36px rgba(40, 99, 158, .16);

}



html[data-theme="light"] .form-group input,

html[data-theme="light"] .form-group select,

html[data-theme="light"] .form-group textarea,

html[data-theme="light"] .newsletter-form input {

    color: #1e3c61;

    background: rgba(255, 255, 255, .88);

    border-color: rgba(23, 95, 178, .2);

}



html[data-theme="light"] .form-group input::placeholder,

html[data-theme="light"] .form-group textarea::placeholder,

html[data-theme="light"] .newsletter-form input::placeholder {

    color: #7a8da5;

}



html[data-theme="light"] .faq-question,

html[data-theme="light"] .faq-answer,

html[data-theme="light"] .testimonial-card,

html[data-theme="light"] .blog-card {

    color: var(--text-body);

}



/* Premium light-mode hover pass: surfaces lift without reverting to dark glass. */

html[data-theme="light"] .glass-card:hover,

html[data-theme="light"] .metric-card:hover,

html[data-theme="light"] .service-card:hover,

html[data-theme="light"] .project-card:hover,

html[data-theme="light"] .testimonial-card:hover,

html[data-theme="light"] .blog-card:hover,

html[data-theme="light"] .industry-card:hover,

html[data-theme="light"] .tech-badge-item:hover,

html[data-theme="light"] .award-card:hover,

html[data-theme="light"] .faq-item:hover {

    background: #ffffff;

    border-color: rgba(0, 112, 218, .42);

    box-shadow: 0 18px 38px rgba(30, 97, 162, .16), 0 0 0 1px rgba(0, 153, 227, .06);

}



html[data-theme="light"] .nav-link:hover,

html[data-theme="light"] .dropdown-link:hover,

html[data-theme="light"] .footer-links a:hover,

html[data-theme="light"] .faq-question:hover {

    color: #075ed4;

}



html[data-theme="light"] .service-card:hover .service-title,

html[data-theme="light"] .project-card:hover .project-title,

html[data-theme="light"] .blog-card:hover .blog-title a {

    color: #123b6b;

}



/* Full light-surface audit: replace legacy hard-coded dark backgrounds. */

html[data-theme="light"] .brand-ticker-section,

html[data-theme="light"] .metrics-section,

html[data-theme="light"] .about-section,

html[data-theme="light"] .services-section,

html[data-theme="light"] .process-section,

html[data-theme="light"] .projects-section,

html[data-theme="light"] .testimonials-section,

html[data-theme="light"] .blog-section,

html[data-theme="light"] .faq-section,

html[data-theme="light"] .cta-section {

    background: linear-gradient(135deg, #f9fcff 0%, #eaf4ff 52%, #f7fbff 100%) !important;

    border-color: rgba(28, 113, 200, .15);

}



html[data-theme="light"] .metrics-section {

    background: var(--bg-secondary) !important;

}



html[data-theme="light"] .about-section .section-video-bg,

html[data-theme="light"] .services-section .section-video-bg {

    background: var(--bg-secondary) !important;

}



html[data-theme="light"] .about-section .section-video-bg::after,

html[data-theme="light"] .services-section .section-video-bg::after {

    background: linear-gradient(115deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .9)) !important;

}



html[data-theme="light"] .metric-card,

html[data-theme="light"] .process-card,

html[data-theme="light"] .cta-box,

html[data-theme="light"] .service-card,

html[data-theme="light"] .portfolio-card,

html[data-theme="light"] .testimonial-card,

html[data-theme="light"] .blog-card,

html[data-theme="light"] .faq-item {

    background: rgba(255, 255, 255, .9) !important;

    border: 1px solid rgba(28, 113, 200, .16) !important;

    box-shadow: 0 12px 30px rgba(29, 91, 152, .1);

}



html[data-theme="light"] .metric-card:hover,

html[data-theme="light"] .process-card:hover {

    background: #fff !important;

}



html[data-theme="light"] .metric-card:hover .metric-icon {

    color: #0870d8;

}



html[data-theme="light"] .metric-num,

html[data-theme="light"] .process-step-title,

html[data-theme="light"] .service-title,

html[data-theme="light"] .project-title,

html[data-theme="light"] .reviewer-name,

html[data-theme="light"] .faq-question {

    color: #183b68;

}



/* CTA copy was using legacy white text, which disappears on its light surface. */

html[data-theme="light"] .cta-title,

html[data-theme="light"] .cta-feature-title {

    color: #183b68;

}



html[data-theme="light"] .cta-desc,

html[data-theme="light"] .cta-feature-sub {

    color: #526d8a;

}



html[data-theme="light"] .cta-feature-divider {

    background: rgba(28, 113, 200, .2);

}



html[data-theme="light"] .process-grid::before,

html[data-theme="light"] .process-flow-grid::before {

    background: linear-gradient(to right, transparent, #2583e8 15%, #62b8ff 85%, transparent);

    box-shadow: 0 0 12px rgba(28, 124, 224, .34);

}



html[data-theme="light"] .process-node {

    background: #fff;

    border-color: #2b8aea;

    color: #126ac5;

    box-shadow: 0 7px 18px rgba(35, 113, 200, .17);

}



html[data-theme="light"] .process-card:hover .process-node {

    background: #1675dd;

    color: #fff;

}



html[data-theme="light"] .faq-section::before {

    background: radial-gradient(circle, rgba(43, 145, 238, .14), transparent 68%);

}



/* Featured projects and portfolio cards: explicit light treatment, including

   the homepage's higher-specificity neon rules. */

html[data-theme="light"] .homepage .projects-section .section-video-bg,

html[data-theme="light"] .homepage .projects-section .section-video-bg::after {

    background: var(--bg-secondary) !important;

}



html[data-theme="light"] .homepage .projects-section::before,

html[data-theme="light"] .homepage .projects-section::after,

html[data-theme="light"] .homepage .services-section::before,

html[data-theme="light"] .homepage .blog-section::before {

    background: rgba(0, 102, 255, .05);

}



html[data-theme="light"] .homepage .glass-card,

html[data-theme="light"] .homepage .project-card,

html[data-theme="light"] .homepage .process-card,

html[data-theme="light"] .homepage .industry-card {

    background: rgba(255, 255, 255, .92) !important;

    border-color: rgba(22, 106, 194, .17) !important;

    box-shadow: 0 13px 30px rgba(25, 89, 153, .1) !important;

}



html[data-theme="light"] .project-name,

html[data-theme="light"] .project-action-link,

html[data-theme="light"] .portfolio-title {

    color: #163b6a !important;

}



html[data-theme="light"] .project-cat {

    color: #617993;

}



html[data-theme="light"] .tag-badge {

    background: #e7f3ff;

    color: #0967c9;

    border: 1px solid rgba(21, 115, 208, .13);

}



html[data-theme="light"] .project-action-link:hover {

    color: #0876dc;

}



html[data-theme="light"] .tab-btn,

html[data-theme="light"] .filter-btn {

    background: rgba(255, 255, 255, .82);

    border-color: rgba(20, 105, 195, .2);

    color: #496783;

}



html[data-theme="light"] .tab-btn:hover,

html[data-theme="light"] .tab-btn.active,

html[data-theme="light"] .filter-btn:hover,

html[data-theme="light"] .filter-btn.active {

    background: #1475dc;

    border-color: #1475dc;

    color: #fff;

}



html[data-theme="light"] .portfolio-card {

    background: #fff !important;

}



html[data-theme="light"] .portfolio-overlay {

    background: rgba(16, 113, 214, .76);

}



/* Technologies page: its original dark panels use hard-coded white headings. */

html[data-theme="light"] .tech-expertise-section,

html[data-theme="light"] .tech-tabs-section {

    background: linear-gradient(135deg, #f9fcff, #e8f4ff) !important;

}



html[data-theme="light"] .expertise-card,

html[data-theme="light"] .tech-badge-item {

    background: rgba(255, 255, 255, .92) !important;

    border-color: rgba(23, 108, 197, .17) !important;

    box-shadow: 0 12px 28px rgba(29, 89, 150, .1);

}



html[data-theme="light"] .expertise-title,

html[data-theme="light"] .tech-badge-item h4,

html[data-theme="light"] .tab-title {

    color: #183b68;

    background: none;

    -webkit-text-fill-color: currentColor;

}



html[data-theme="light"] .expertise-desc,

html[data-theme="light"] .tech-badge-item p,

html[data-theme="light"] .tab-subtitle {

    color: #526d8a;

}



html[data-theme="light"] .tech-difference-section {

    background: linear-gradient(135deg, #f9fcff, #e8f4ff) !important;

}



html[data-theme="light"] .difference-card {

    background: rgba(255, 255, 255, .92) !important;

    border-color: rgba(23, 108, 197, .17) !important;

    box-shadow: 0 12px 28px rgba(29, 89, 150, .1);

}



html[data-theme="light"] .difference-title {

    color: #183b68;

}



html[data-theme="light"] .difference-desc {

    color: #526d8a;

}



/* Every regular inner-page content band gets a real light canvas instead of

   inheriting one of the legacy dark gradients. */

html[data-theme="light"] .premium-inner-page section:not(.hero-section):not(.about-hero-section) {

    background: #FFFFFF !important;

}



html[data-theme="light"] .premium-inner-page .service-card,

html[data-theme="light"] .premium-inner-page .tech-card,

html[data-theme="light"] .premium-inner-page .portfolio-card,

html[data-theme="light"] .premium-inner-page .blog-card,

html[data-theme="light"] .premium-inner-page .contact-card,

html[data-theme="light"] .premium-inner-page .contact-info-card,

html[data-theme="light"] .premium-inner-page .contact-form-container {

    background: rgba(255, 255, 255, .92) !important;

    border-color: rgba(23, 108, 197, .17) !important;

    box-shadow: 0 12px 28px rgba(29, 89, 150, .1);

}



/* Footer must accommodate pages where the shared script supplies a newsletter

   column, without squeezing or overflowing the existing columns. */

.site-footer>.container {

    width: min(92%, 1440px);

    max-width: 1440px;

}



.footer-grid {

    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));

}



.footer-col {

    min-width: 0;

}



.footer-col .footer-links a,

.footer-col .contact-item span,

.footer-bio {

    overflow-wrap: anywhere;

}



@media (max-width: 768px) {

    .site-footer>.container {

        width: 90%;

    }



    .footer-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

        margin-bottom: 2.5rem;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

}



/* Home About highlights have dedicated dark text in light mode. */

html[data-theme="light"] .about-feature-item .feature-title,

html[data-theme="light"] .about-feature-item .feature-title *,

html[data-theme="light"] .feature-title {

    color: #17395f !important;

}



html[data-theme="light"] .about-feature-item .feature-icon {

    background: #e7f3ff;

    border: 1px solid rgba(22, 112, 206, .16);

    color: #0876d8;

}



/* Contact form delivery feedback and invisible anti-spam field. */

.form-honeypot {

    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

}



.form-status {

    min-height: 1.4rem;

    margin: .9rem 0 0;

    font-size: .88rem;

    font-weight: 600;

}



.form-status.is-success {

    color: #1e9b62;

}



.form-status.is-error {

    color: #d34c5d;

}



.contact-form button[disabled] {

    cursor: wait;

    opacity: .78;

}



/* Premium branded page loader. */

.page-loader {

    overflow: hidden;

    background: radial-gradient(circle at 50% 42%, #0a1836 0%, #061024 45%, #020610 85%) !important;

}



.page-loader::before,

.page-loader::after {

    content: '';

    position: absolute;

    pointer-events: none;

}



.page-loader::before {

    inset: 0;

    opacity: .2;

    background-image: linear-gradient(rgba(0, 102, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 102, 255, .15) 1px, transparent 1px);

    background-size: 42px 42px;

    mask-image: radial-gradient(circle at center, black, transparent 72%);

}



.page-loader::after {

    width: 46vw;

    aspect-ratio: 1;

    left: 50%;

    top: 50%;

    border: 1px solid rgba(0, 102, 255, .25);

    border-radius: 50%;

    box-shadow: 0 0 0 60px rgba(0, 102, 255, .03), 0 0 0 120px rgba(0, 102, 255, .02);

    transform: translate(-50%, -50%);

    animation: loader-halo 3.5s ease-in-out infinite;

}



.loader-scene {

    position: absolute;

    inset: 0;

    overflow: hidden;

}



.loader-scene::before,

.loader-scene::after {

    content: '';

    position: absolute;

    width: 30vw;

    height: 30vw;

    border-radius: 50%;

    filter: blur(35px);

    opacity: .25;

}



.loader-scene::before {

    left: -10vw;

    top: -9vw;

    background: #0066ff;

    animation: loader-drift 7s ease-in-out infinite alternate;

}



.loader-scene::after {

    right: -10vw;

    bottom: -9vw;

    background: #0052cc;

    animation: loader-drift 8s ease-in-out infinite alternate-reverse;

}



.loader-wrap {

    position: relative;

    z-index: 1;

    min-width: min(88vw, 340px);

    padding: 2.25rem 2.3rem 2rem;

    border: 1px solid rgba(0, 102, 255, .3);

    border-radius: 24px;

    background: linear-gradient(145deg, rgba(10, 25, 55, .88), rgba(4, 12, 30, .92));

    box-shadow: 0 28px 75px rgba(0, 0, 0, .45), inset 0 1px rgba(0, 102, 255, .2);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}



.loader-kicker {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .55rem;

    color: #0066ff;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .2em;

}



.loader-kicker span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #0066ff;

    box-shadow: 0 0 12px #0066ff;

    animation: loader-dot 1.2s ease-in-out infinite;

}



.loader-mark {

    width: 118px;

    height: 118px;

    margin: 1.5rem auto 1.25rem;

    border: 2px solid rgba(0, 102, 255, .4);

    background: radial-gradient(circle, rgba(0, 102, 255, .25), rgba(5, 17, 39, .88));

    box-shadow: 0 0 45px rgba(0, 102, 255, .35), inset 0 0 26px rgba(0, 102, 255, .15);

}



.loader-mark::before {

    inset: -11px;

    border-width: 2px;

    border-top-color: #0066ff;

    border-right-color: transparent;

    border-bottom-color: #0052cc;

    border-left-color: transparent;

    animation-duration: 1.65s;

}



.loader-mark::after {

    inset: 9px;

    border-color: rgba(0, 102, 255, .3);

    animation: loader-pulse 1.8s ease-in-out infinite;

}



.loader-mark img {

    width: 64px;

    height: 64px;

    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .28));

}



.loader-orbit {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}



.loader-orbit-one {

    inset: -20px;

    border: 1px dashed rgba(0, 102, 255, .45);

    animation: loader-spin 7s linear infinite;

}



.loader-orbit-two {

    inset: -30px;

    border-top: 2px solid rgba(0, 102, 255, .7);

    border-right: 2px solid transparent;

    animation: loader-spin 3s linear infinite reverse;

}



.loader-brand {

    color: #ffffff !important;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: .15em;

    text-align: center;

    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);

}



.loader-brand span {

    color: #0066ff !important;

    text-shadow: 0 0 15px rgba(0, 102, 255, 0.6);

}



.loader-text {

    margin-top: .42rem;

    color: #a0c4ff;

    font-size: .75rem;

    font-weight: 500;

    letter-spacing: .04em;

}



.loader-progress-circle {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    margin: 1.35rem auto 0;

    color: #0066ff;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

}



.loader-progress-circle svg {

    width: 34px;

    height: 34px;

    transform: rotate(-90deg);

}



.loader-progress-circle circle {

    fill: none;

    stroke-width: 3;

}



.loader-circle-track {

    stroke: rgba(0, 102, 255, .2);

}



.loader-circle-value {

    stroke: #0066ff;

    stroke-linecap: round;

    stroke-dasharray: 34 80;

    filter: drop-shadow(0 0 6px rgba(0, 102, 255, .8));

    animation: loader-circle 1.25s ease-in-out infinite;

}



@keyframes loader-circle {

    0% {

        stroke-dasharray: 8 105;

        stroke-dashoffset: 0;

    }



    50% {

        stroke-dasharray: 64 105;

        stroke-dashoffset: -18;

    }



    100% {

        stroke-dasharray: 8 105;

        stroke-dashoffset: -105;

    }

}



@keyframes loader-halo {

    50% {

        opacity: .45;

        transform: translate(-50%, -50%) scale(1.05);

    }

}



@keyframes loader-drift {

    to {

        transform: translate(7vw, 5vw) scale(1.15);

    }

}



@keyframes loader-dot {

    50% {

        opacity: .35;

        transform: scale(.65);

    }

}



html[data-theme="light"] .page-loader {

    background: radial-gradient(circle at 50% 42%, #f0f6ff 0%, #e2ecfe 42%, #d0e2fe 100%) !important;

}



html[data-theme="light"] .loader-wrap {

    border-color: rgba(0, 102, 255, .22);

    background: rgba(255, 255, 255, .94);

    box-shadow: 0 28px 70px rgba(0, 102, 255, .15), inset 0 1px rgba(255, 255, 255, .9);

}



html[data-theme="light"] .loader-brand {

    color: #1e293b !important;

    text-shadow: none !important;

}



html[data-theme="light"] .loader-brand span {

    color: #0066ff !important;

    text-shadow: none !important;

}



html[data-theme="light"] .loader-text {

    color: #475569;

}



html[data-theme="light"] .loader-kicker {

    color: #0066ff;

}



html[data-theme="light"] .loader-progress-circle {

    color: #0066ff;

}



html[data-theme="light"] .loader-circle-track {

    stroke: rgba(0, 102, 255, .18);

}



html[data-theme="light"] .loader-circle-value {

    stroke: #0066ff;

}



@media (max-width: 480px) {

    .loader-wrap {

        min-width: min(88vw, 310px);

        padding: 1.9rem 1.5rem 1.6rem;

    }



    .loader-mark {

        transform: scale(.9);

        margin: 1.15rem auto 1rem;

    }

}



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



    .page-loader *,

    .page-loader::before,

    .page-loader::after {

        animation: none !important;

    }



    .loader-circle-value {

        stroke-dasharray: 64 105;

    }

}



/* Compact professional theme control for the navbar. */

.theme-toggle {

    width: 42px;

    min-width: 42px;

    height: 42px;

    padding: 0;

    justify-content: center;

    border: 1px solid rgba(132, 186, 242, .28);

    border-radius: 12px;

    background: rgba(13, 30, 55, .54);

    box-shadow: none;

    display: inline-flex;

    align-items: center;

    gap: 0;

    position: relative;

    cursor: pointer;

    overflow: hidden;

    pointer-events: auto;

    z-index: 2;

    flex-shrink: 0;

}



.theme-toggle:hover {

    transform: translateY(-1px);

    background: rgba(19, 47, 84, .78);

    box-shadow: 0 8px 18px rgba(0, 83, 173, .16);

}



.theme-toggle-thumb {

    position: static;

    width: 100%;

    height: 100%;

    background: transparent;

    color: #c7e8ff;

    box-shadow: none;

    transform: none;

    font-size: .95rem;

    display: grid;

    place-items: center;

}



.theme-toggle-icon,

.theme-toggle-text {

    display: none;

}



.theme-toggle-sun {

    display: none;

}



.theme-toggle-thumb .fa-sun {

    display: none;

}



.theme-toggle-thumb .fa-moon {

    display: inline-block;

}



html[data-theme="light"] .theme-toggle-thumb .fa-moon {

    display: none !important;

}



html[data-theme="light"] .theme-toggle-thumb .fa-sun {

    display: inline-block !important;

}



html[data-theme="light"] .theme-toggle {

    background: rgba(255, 255, 255, .8);

    border-color: rgba(18, 104, 192, .2);

    color: #125caa;

}



html[data-theme="light"] .theme-toggle:hover {

    background: #fff;

    box-shadow: 0 8px 18px rgba(20, 97, 174, .13);

}



html[data-theme="light"] .theme-toggle-thumb {

    transform: none !important;

    background: transparent;

    color: #d48700;

    box-shadow: none;

}



@media (max-width: 768px) {

    .header-actions .theme-toggle {

        width: 42px;

        min-width: 42px;

        height: 42px;

        padding: 0;

    }



    .header-actions .theme-toggle-thumb {

        left: auto;

    }

}



/* ==========================================================================

   Ultra-Premium UI Components for Dedicated Contact & Career Pages

   ========================================================================== */



/* Trust Rating Badges Container */

.trust-badges-bar {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2.5rem;

    flex-wrap: wrap;

    padding: 1.75rem 2rem;

    background: rgba(255, 255, 255, 0.7);

    border-radius: 20px;

    border: 1px solid rgba(0, 102, 255, 0.12);

    box-shadow: 0 10px 30px rgba(0, 50, 150, 0.05);

    backdrop-filter: blur(12px);

}



html[data-theme="dark"] .trust-badges-bar {

    background: rgba(15, 23, 42, 0.75);

    border-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.rating-badge-item {

    display: flex;

    align-items: center;

    gap: 0.85rem;

}



.rating-badge-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    font-size: 1.2rem;

    font-weight: 800;

}



.rating-badge-icon.clutch-badge { background: #e63946; color: #ffffff; }

.rating-badge-icon.google-badge { background: #4285f4; color: #ffffff; }



.rating-stars {

    color: #ffb703;

    letter-spacing: 2px;

    font-size: 0.95rem;

}



/* Electric SLA 1-Hour Live Pulse Badge */

.sla-pulse-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.6rem 1.4rem;

    border-radius: 999px;

    background: rgba(34, 197, 94, 0.12);

    border: 1px solid rgba(34, 197, 94, 0.35);

    color: #16a34a;

    font-size: 0.88rem;

    font-weight: 700;

    letter-spacing: 0.02em;

}



html[data-theme="dark"] .sla-pulse-pill {

    background: rgba(34, 197, 94, 0.16);

    color: #4ade80;

    border-color: rgba(74, 222, 128, 0.4);

}



.sla-dot-pulse {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 12px #22c55e;

    animation: slaPulseGlow 1.8s infinite ease-in-out;

}



@keyframes slaPulseGlow {

    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }

    70% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }

    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }

}



/* Form Container & Glass Cards */

.contact-form-container {

    background: #ffffff;

    border-radius: 24px;

    padding: 2.5rem;

    border: 1px solid rgba(0, 102, 255, 0.1);

    box-shadow: 0 20px 50px rgba(0, 60, 180, 0.07);

    transition: all 0.3s ease;

}



html[data-theme="dark"] .contact-form-container {

    background: #0f172a;

    border-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);

}



.form-group label {

    font-weight: 700;

    font-size: 0.88rem;

    margin-bottom: 0.5rem;

    color: #1e293b;

    display: block;

}



html[data-theme="dark"] .form-group label {

    color: #e2e8f0;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 0.85rem 1.15rem;

    border-radius: 12px;

    border: 1px solid #cbd5e1;

    background: #f8fafc;

    color: #0f172a;

    font-size: 0.95rem;

    font-weight: 500;

    transition: all 0.25s ease;

    font-family: inherit;

}



html[data-theme="dark"] .form-group input,

html[data-theme="dark"] .form-group select,

html[data-theme="dark"] .form-group textarea {

    background: #1e293b;

    border-color: #334155;

    color: #f8fafc;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: #0066ff;

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);

}



html[data-theme="dark"] .form-group input:focus,

html[data-theme="dark"] .form-group select:focus,

html[data-theme="dark"] .form-group textarea:focus {

    background: #0f172a;

    border-color: #3b82f6;

    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);

}



/* Premium Review Cards */

.m-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    transition: all 0.3s ease;

}



.m-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 40px rgba(0, 102, 255, 0.12);

    border-color: #0066ff;

}



html[data-theme="dark"] .m-card {

    background: #0f172a;

    border-color: #1e293b;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



html[data-theme="dark"] .m-card:hover {

    border-color: #3b82f6;

    box-shadow: 0 18px 40px rgba(0, 102, 255, 0.3);

}



/* Light Theme Hero Secondary Button (.btn-outline) Override */

html[data-theme="light"] .btn-outline,

html[data-theme="light"] .hero-btns .btn-outline,

html[data-theme="light"] .about-hero-actions .btn-outline,

html[data-theme="light"] .hero-section .btn-outline,

html[data-theme="light"] .video-hero .btn-outline,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline {

    background: #ffffff !important;

    border: 1px solid #0066ff !important;

    color: #0066ff !important;

    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.12) !important;

}



html[data-theme="light"] .btn-outline i,

html[data-theme="light"] .hero-btns .btn-outline i,

html[data-theme="light"] .about-hero-actions .btn-outline i,

html[data-theme="light"] .hero-section .btn-outline i,

html[data-theme="light"] .video-hero .btn-outline i,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline i {

    color: #0066ff !important;

}



html[data-theme="light"] .btn-outline:hover,

html[data-theme="light"] .hero-btns .btn-outline:hover,

html[data-theme="light"] .about-hero-actions .btn-outline:hover,

html[data-theme="light"] .hero-section .btn-outline:hover,

html[data-theme="light"] .video-hero .btn-outline:hover,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline:hover {

    background: #0066ff !important;

    border-color: #0066ff !important;

    color: #ffffff !important;

    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.35) !important;

    transform: translateY(-2px);

}



html[data-theme="light"] .btn-outline:hover i,

html[data-theme="light"] .hero-btns .btn-outline:hover i,

html[data-theme="light"] .about-hero-actions .btn-outline:hover i,

html[data-theme="light"] .hero-section .btn-outline:hover i,

html[data-theme="light"] .video-hero .btn-outline:hover i,

html[data-theme="light"] .premium-inner-page .hero-btns .btn-outline:hover i {

    color: #ffffff !important;

}



/* Technology Category Sections (No Tabs Layout) */

.tech-category-section {

    position: relative;

}



.category-header {

    display: flex;

    align-items: center;

    gap: 1.25rem;

    margin-bottom: 2rem;

    padding-bottom: 1.25rem;

    border-bottom: 1px solid var(--border-color);

}



.cat-icon-badge {

    width: 56px;

    height: 56px;

    border-radius: 16px;

    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 204, 255, 0.15));

    border: 1px solid rgba(0, 102, 255, 0.28);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.6rem;

    color: #0066ff;

    flex-shrink: 0;

    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.12);

}



.category-title {

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--text-heading);

    margin-bottom: 0.3rem;

}



.category-desc {

    font-size: 0.95rem;

    color: var(--text-muted);

    margin: 0;

    max-width: 800px;

}



/* ==========================================================================

   VIP FULL-WIDTH EXECUTIVE LEADERSHIP SHOWCASE (NO HARD BORDERS)

   ========================================================================== */

.executive-leadership-section {

    padding: 5.5rem 0;

    position: relative;

}



.vip-leadership-wrapper {

    display: flex;

    flex-direction: column;

    gap: 3.5rem;

    max-width: 1100px;

    margin: 0 auto;

}



.vip-executive-banner {

    background: var(--bg-card, rgba(15, 23, 42, 0.5));

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 28px;

    padding: 3.5rem 3rem;

    position: relative;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.vip-executive-banner:hover {

    transform: translateY(-6px);

    box-shadow: 0 25px 60px rgba(0, 102, 255, 0.15);

}



html[data-theme="light"] .vip-executive-banner {

    background: #ffffff;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);

}



html[data-theme="light"] .vip-executive-banner:hover {

    box-shadow: 0 25px 55px rgba(0, 102, 255, 0.12);

}



.vip-executive-grid {

    display: grid;

    grid-template-columns: 320px 1fr;

    gap: 3.5rem;

    align-items: center;

}



.vip-executive-banner.reverse-layout .vip-executive-grid {

    grid-template-columns: 1fr 320px;

}



@media (max-width: 992px) {

    .vip-executive-grid,

    .vip-executive-banner.reverse-layout .vip-executive-grid {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

}



.vip-image-frame {

    position: relative;

    width: 100%;

    max-width: 320px;

    aspect-ratio: 4/5;

    border-radius: 22px;

    overflow: hidden;

    margin: 0 auto;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);

}



.vip-exec-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}



.vip-executive-banner:hover .vip-exec-img {

    transform: scale(1.04);

}



.vip-image-glow {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35) 100%);

    pointer-events: none;

}



.vip-role-tag {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 1.1rem;

    border-radius: 30px;

    background: rgba(0, 102, 255, 0.12);

    color: #0066ff;

    font-size: 0.825rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    margin-bottom: 0.85rem;

}



.vip-role-tag.cyan-tag {

    background: rgba(0, 210, 255, 0.12);

    color: #00c8ff;

}



.vip-exec-name {

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--text-heading);

    margin-bottom: 0.25rem;

    letter-spacing: -0.02em;

}



.vip-exec-tagline {

    font-size: 1.05rem;

    font-weight: 600;

    color: #0066ff;

    margin-bottom: 1.25rem;

}



.vip-exec-bio {

    font-size: 1rem;

    color: var(--text-heading);

    line-height: 1.7;

    margin-bottom: 0.85rem;

    opacity: 0.92;

}



.vip-exec-bio-secondary {

    font-size: 0.935rem;

    color: var(--text-muted);

    line-height: 1.65;

    margin-bottom: 1.75rem;

}



.vip-key-highlights {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 2rem;

}



.vip-highlight-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.45rem 1rem;

    border-radius: 12px;

    background: var(--bg-surface, rgba(255, 255, 255, 0.06));

    color: var(--text-heading);

    font-size: 0.85rem;

    font-weight: 600;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

}



html[data-theme="light"] .vip-highlight-pill {

    background: #f1f5f9;

    color: #334155;

}



.vip-highlight-pill i {

    color: #0066ff;

}



.vip-exec-actions {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.exec-social-btn {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--bg-surface, rgba(255, 255, 255, 0.06));

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-heading);

    font-size: 0.95rem;

    transition: all 0.3s ease;

}



html[data-theme="light"] .exec-social-btn {

    background: #f1f5f9;

    color: #475569;

}



.exec-social-btn:hover {

    background: #0066ff !important;

    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow: 0 6px 18px rgba(0, 102, 255, 0.35);

}



.exec-email-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.55rem 1.25rem;

    border-radius: 30px;

    font-size: 0.875rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



html[data-theme="light"] .exec-email-btn {

    background: #f8fafc !important;

    border: 1px solid #cbd5e1 !important;

    color: #0066ff !important;

}



html[data-theme="light"] .exec-email-btn:hover {

    background: #0066ff !important;

    border-color: #0066ff !important;

    color: #ffffff !important;

    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3) !important;

}



/* ==========================================

   VIP WEB DEVELOPMENT PRICING PACKAGES

   ========================================== */

.webdev-pricing-section {

    position: relative;

    padding: 5rem 0;

}



.webdev-section-desc {

    max-width: 650px;

    margin: 0.8rem auto 0;

    color: var(--text-body);

    font-size: 1.05rem;

    line-height: 1.6;

}



.pricing-cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2.2rem;

    margin-top: 3rem;

    align-items: stretch;

}



.pricing-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 2.5rem 2rem;

    border-radius: 20px;

    background: rgba(13, 22, 41, 0.65);

    border: 1px solid rgba(0, 102, 255, 0.2);

    backdrop-filter: blur(16px);

    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

}



.pricing-card:hover {

    transform: translateY(-8px);

    border-color: rgba(0, 102, 255, 0.5);

    box-shadow: 0 20px 45px rgba(0, 102, 255, 0.22);

}



.pricing-card-featured {

    background: linear-gradient(145deg, rgba(0, 102, 255, 0.14) 0%, rgba(13, 22, 41, 0.9) 100%);

    border: 2px solid #0066ff;

    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.28);

    transform: scale(1.03);

}



.pricing-card-featured:hover {

    transform: scale(1.03) translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 102, 255, 0.38);

}



.popular-ribbon {

    position: absolute;

    top: -14px;

    right: 24px;

    background: linear-gradient(135deg, #0066ff, #00d2ff);

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    padding: 0.4rem 1.1rem;

    border-radius: 20px;

    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4);

    text-transform: uppercase;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}



.pricing-tier-badge {

    display: inline-block;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    color: var(--primary-blue);

    text-transform: uppercase;

    margin-bottom: 0.5rem;

}



.pricing-tier-title {

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--text-heading);

    margin-bottom: 0.5rem;

}



.pricing-tier-desc {

    font-size: 0.88rem;

    color: var(--text-muted);

    line-height: 1.55;

    min-height: 48px;

    margin-bottom: 1.5rem;

}



.pricing-price-box {

    display: flex;

    align-items: baseline;

    gap: 0.25rem;

}



.pricing-currency {

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--primary-blue);

}



.pricing-amount {

    font-size: 3.2rem;

    font-weight: 800;

    color: var(--text-heading);

    line-height: 1;

}



.pricing-period {

    font-size: 0.88rem;

    color: var(--text-muted);

    margin-left: 0.2rem;

}



.pricing-divider {

    border: 0;

    height: 1px;

    background: var(--border-color);

    margin: 1.8rem 0;

}



.pricing-features-list {

    list-style: none;

    padding: 0;

    margin: 0 0 2rem 0;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;

    flex-grow: 1;

}



.pricing-features-list li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 0.92rem;

    color: var(--text-body);

}



.pricing-features-list li i.fa-check-circle {

    color: #10b981;

    font-size: 1.1rem;

    flex-shrink: 0;

}



.pricing-features-list li i.fa-times-circle {

    color: var(--text-muted);

    opacity: 0.5;

    font-size: 1.1rem;

    flex-shrink: 0;

}



.pricing-features-list li.disabled {

    opacity: 0.45;

    text-decoration: line-through;

}



.pricing-card-footer {

    margin-top: auto;

}



.btn-block {

    width: 100%;

    justify-content: center;

    text-align: center;

    padding: 0.85rem 1.5rem;

    border-radius: 12px;

}



/* Light Theme Overrides for VIP Pricing */

html[data-theme="light"] .pricing-card {

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(0, 102, 255, 0.15);

    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.08);

}



html[data-theme="light"] .pricing-card:hover {

    box-shadow: 0 20px 45px rgba(0, 102, 255, 0.18);

    border-color: rgba(0, 102, 255, 0.4);

}



html[data-theme="light"] .pricing-card-featured {

    background: linear-gradient(145deg, rgba(235, 243, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%);

    border: 2px solid #0066ff;

    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.18);

}



html[data-theme="light"] .pricing-card-featured:hover {

    box-shadow: 0 25px 50px rgba(0, 102, 255, 0.28);

}



html[data-theme="light"] .pricing-tier-title,

html[data-theme="light"] .pricing-amount {

    color: #1e293b;

}



html[data-theme="light"] .pricing-tier-desc,

html[data-theme="light"] .pricing-period,

html[data-theme="light"] .webdev-section-desc {

    color: #64748b;

}



html[data-theme="light"] .pricing-features-list li {

    color: #334155;

}



html[data-theme="light"] .pricing-divider {

    background: rgba(0, 102, 255, 0.12);

}



/* ==========================================

   PRICING CURRENCY SWITCHER STYLES

   ========================================== */

.pricing-currency-switcher {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin: 1.5rem auto 2.5rem;

}



.switcher-label {

    font-size: 0.92rem;

    font-weight: 700;

    color: var(--text-heading);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.switcher-label i {

    color: var(--primary-blue);

}



.currency-tabs {

    display: inline-flex;

    padding: 4px;

    background: rgba(13, 22, 41, 0.7);

    border: 1px solid rgba(0, 102, 255, 0.25);

    border-radius: 35px;

    backdrop-filter: blur(10px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



.currency-btn {

    border: none;

    background: transparent;

    color: var(--text-body);

    font-size: 0.88rem;

    font-weight: 700;

    padding: 0.55rem 1.25rem;

    border-radius: 30px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

}



.currency-btn:hover {

    color: #ffffff;

}



.currency-btn.active {

    background: linear-gradient(135deg, #0066ff, #0052cc);

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4);

}



.currency-flag {

    font-size: 1.1rem;

}



/* Light Theme Overrides for Currency Switcher */

html[data-theme="light"] .currency-tabs {

    background: rgba(241, 245, 249, 0.95);

    border: 1px solid rgba(0, 102, 255, 0.18);

    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.08);

}



html[data-theme="light"] .currency-btn {

    color: #475569;

}



html[data-theme="light"] .currency-btn:hover {

    color: #0066ff;

}



html[data-theme="light"] .currency-btn.active {

    background: #0066ff;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.35);

}