/* ======================================================================
   AUCONNECTION DIGITAL DESIGN SYSTEM
   Brand: deep navy, electric blue, cyan, white and silver.
   Purpose: shared visual foundation for the AUconnection website.
   ====================================================================== */

/* 1. BRAND COLOURS AND DESIGN TOKENS */
:root {
    color-scheme: dark;

    --navy: #050b18;
    --navy-light: #0a1428;
    --navy-card: #0d1b32;
    --navy-deep: #030711;

    --blue: #0878f9;
    --blue-light: #3195ff;
    --cyan: #08c9e8;

    --white: #ffffff;
    --silver: #b8c5d6;
    --muted: #8494aa;
    --text: #e7edf7;

    --border: rgba(85, 164, 255, 0.18);
    --border-glow: rgba(8, 201, 232, 0.4);
    --gradient: linear-gradient(110deg, var(--blue), var(--cyan));
    --gradient-text: linear-gradient(100deg, #ffffff, #5bdfff);

    --container-width: 1200px;
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;

    --shadow-blue: 0 10px 40px rgba(8, 120, 249, 0.16);
    --transition: 0.3s ease;
}

/* 2. GLOBAL RESET AND BASE STYLES */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(8, 120, 249, 0.12), transparent 50%),
        var(--navy);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

ul {
    list-style: none;
}

::selection {
    color: var(--white);
    background: var(--blue);
}

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

.container {
    width: min(92%, var(--container-width));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 100px 0;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.section-heading h2 span {
    color: var(--cyan);
}

.section-heading p {
    color: var(--silver);
}

/* 3. SHARED BUTTON SYSTEM */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-size: 14px;
    font-weight: 700;
    transition: transform var(--transition), box-shadow var(--transition),
        background var(--transition), border-color var(--transition);
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    color: var(--white);
    background: var(--gradient);
    box-shadow: var(--shadow-blue);
}

.btn-primary:hover {
    box-shadow: 0 12px 35px rgba(8, 201, 232, 0.28);
}

.btn-secondary {
    color: var(--white);
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.22);
}

.btn-secondary:hover {
    border-color: var(--cyan);
    background: rgba(8, 201, 232, 0.08);
}

/* 4. WEBSITE HEADER AND NAVIGATION */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(5, 11, 24, 0.91);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}

.navbar {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--border-glow);
    background: var(--navy-deep);
    box-shadow: 0 0 18px rgba(8, 201, 232, 0.18);
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.brand-name {
    color: var(--white);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.brand-name::first-letter {
    color: var(--cyan);
}

.main-navigation {
    margin-left: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-links a {
    position: relative;
    padding: 10px 0;
    color: var(--silver);
    font-size: 13px;
    font-weight: 600;
    transition: color var(--transition);
}

.nav-links a::after {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 2px;
    content: "";
    background: var(--gradient);
    transition: width var(--transition);
}

.nav-links a:hover {
    color: var(--white);
}

.nav-links a:hover::after {
    width: 100%;
}

.external-indicator {
    color: var(--cyan);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--radius-small);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    background: var(--gradient);
    box-shadow: var(--shadow-blue);
    transition: transform var(--transition);
}

.nav-cta:hover {
    transform: translateY(-2px);
}

.menu-toggle {
    display: none;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--navy-card);
}

.menu-toggle span {
    width: 19px;
    height: 2px;
    background: var(--white);
    border-radius: 5px;
}

/* 5. HOMEPAGE HERO AND ANIMATED BRAND VISUAL */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 680px;
    padding: 90px 0;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 78% 45%, rgba(8, 120, 249, 0.18), transparent 40%),
        linear-gradient(135deg, var(--navy-deep), var(--navy-light));
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background-image:
        linear-gradient(rgba(8, 201, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 201, 232, 0.045) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero::after {
    position: absolute;
    top: 12%;
    right: 8%;
    z-index: -1;
    width: 340px;
    height: 340px;
    content: "";
    border: 1px solid rgba(8, 201, 232, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 70px rgba(8, 120, 249, 0.13),
        inset 0 0 70px rgba(8, 201, 232, 0.07);
    animation: network-pulse 7s ease-in-out infinite;
}

.hero-network-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#network-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.65;
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 45px;
    width: min(92%, 1200px);
    margin-inline: auto;
}

.hero-content {
    position: relative;
    max-width: 620px;
}

.hero-label {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border: 1px solid var(--border-glow);
    border-radius: 30px;
    background: rgba(8, 201, 232, 0.055);
}

.hero h1 {
    max-width: 800px;
    margin-bottom: 25px;
    color: var(--white);
    font-size: clamp(2.7rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.hero h1 span {
    color: transparent;
    background: var(--gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-description {
    max-width: 650px;
    margin-bottom: 32px;
    color: var(--silver);
    font-size: 16px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-trust-line {
    margin-top: 24px;
    color: var(--muted);
    font-size: 13px;
}

.status-indicator,
.floating-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cyan);
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 490px;
    aspect-ratio: 1 / 1;
    justify-self: center;
    display: grid;
    place-items: center;
}

.visual-glow {
    position: absolute;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 120, 249, 0.17), transparent 70%);
    filter: blur(15px);
}

.hero-logo-core {
    position: relative;
    z-index: 2;
    width: 78%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 55px rgba(8, 120, 249, 0.16);
}

.hero-logo-core img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    border-radius: 50%;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(8, 201, 232, 0.25);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 92%;
    height: 92%;
    animation: orbit-spin 24s linear infinite;
}

.orbit-two {
    width: 75%;
    height: 75%;
    animation: orbit-spin 18s linear infinite reverse;
}

.orbit-three {
    width: 105%;
    height: 105%;
    border-color: rgba(8, 120, 249, 0.13);
    animation: orbit-spin 32s linear infinite;
}

.orbit-node {
    position: absolute;
    z-index: 3;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 15px var(--cyan);
}

.node-one { top: 10%; left: 25%; }
.node-two { top: 45%; right: 5%; }
.node-three { bottom: 12%; left: 35%; }

.floating-label {
    position: absolute;
    z-index: 4;
    padding: 9px 14px;
    color: var(--white);
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: rgba(5, 11, 24, 0.92);
    box-shadow: var(--shadow-blue);
    white-space: nowrap;
}

.floating-label-one { top: 15%; right: -3%; }
.floating-label-two { bottom: 15%; left: -3%; }

.floating-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
}

/* 6. SERVICE CARDS */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.service-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: linear-gradient(145deg, rgba(16, 34, 60, 0.95), rgba(7, 17, 34, 0.96));
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    content: "";
    background: var(--gradient);
    transition: height var(--transition);
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: var(--border-glow);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.22);
}

.service-card:hover::before {
    height: 100%;
}

.service-number {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.service-card h3 {
    margin-bottom: 12px;
    color: var(--white);
    font-size: 19px;
    line-height: 1.4;
}

.service-card p {
    color: var(--silver);
    font-size: 14px;
    line-height: 1.8;
}

.services-section {
    position: relative;
    z-index: 1;
    padding-bottom: 90px;
}

.services-section .services-grid + div {
    position: relative;
    clear: both;
    margin-top: 40px;
}

/* 7. PROJECT AND MARKETPLACE COMPONENTS */
.projects-grid,
.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.project-card,
.marketplace-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--navy-card);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.project-card:hover,
.marketplace-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-blue);
}

.project-image,
.marketplace-image {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    font-size: 42px;
    background: radial-gradient(circle at 50% 50%, rgba(8, 120, 249, 0.2), transparent 65%), var(--navy-light);
}

.project-content,
.marketplace-content {
    padding: 25px;
}

.project-content h3,
.marketplace-content h3 {
    margin-bottom: 10px;
    color: var(--white);
}

.project-content p,
.marketplace-content p {
    color: var(--silver);
    font-size: 14px;
}

.project-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
}

/* 8. CALL-TO-ACTION SECTION */
.cta {
    position: relative;
    overflow: hidden;
    padding: 65px 35px;
    text-align: center;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-large);
    background: radial-gradient(ellipse at 50% 0%, rgba(8, 120, 249, 0.25), transparent 70%), var(--navy-card);
}

.cta h2 {
    margin-bottom: 15px;
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.cta p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: var(--silver);
}

.cta .btn {
    margin-top: 5px;
}

/* 9. COMPACT FOUR-COLUMN FOOTER */
.site-footer {
    position: relative;
    z-index: 1;
    clear: both;
    padding: 42px 0 18px;
    border-top: 1px solid var(--border);
    background: #030812;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1.2fr 1.45fr;
    align-items: start;
    gap: 24px;
    padding-bottom: 26px;
}

.footer-content h2 {
    margin-bottom: 10px;
    color: var(--white);
    font-size: 21px;
}

.footer-content h3 {
    margin-bottom: 11px;
    color: var(--white);
    font-size: 14px;
}

.footer-content p {
    margin: 0 10px 7px 0;
    color: var(--silver);
    font-size: 12px;
    line-height: 1.6;
}

.footer-content a {
    transition: color var(--transition);
}

.footer-content a:hover {
    color: var(--cyan);
}

/* Keep link lists compact and allow them to wrap naturally. */
.footer-links p,
.footer-services p {
    display: inline-block;
    margin-right: 9px;
    margin-bottom: 6px;
}

.footer-about p {
    max-width: 290px;
}

.footer-contact p {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.footer-contact p strong {
    display: inline;
}

.footer-contact p br {
    display: none;
}

.footer-bottom {
    padding-top: 16px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid var(--border);
}

/* 10. ANIMATIONS AND ACCESSIBILITY */
@keyframes network-pulse {
    0%, 100% { transform: scale(1); opacity: 0.65; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes orbit-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 11. TABLET AND SMALL-DESKTOP RESPONSIVENESS */
@media (max-width: 1000px) {
    .navbar { gap: 15px; }

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 22px 5%;
        background: rgba(5, 11, 24, 0.98);
        border-bottom: 1px solid var(--border);
    }

    .main-navigation.is-open { display: block; }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .nav-cta { display: none; }

    .services-grid,
    .projects-grid,
    .marketplace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 12. TABLET HERO LAYOUT */
@media (max-width: 900px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }

    .hero-content { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { max-width: 390px; }
}

/* 13. MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .section { padding: 70px 0; }

    .navbar { min-height: 74px; }

    .brand-logo {
        width: 45px;
        height: 45px;
    }

    .brand-name { font-size: 18px; }

    .hero {
        min-height: 0;
        padding: 75px 0;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 11vw, 3.6rem);
        letter-spacing: -1.5px;
    }

    .hero-description { font-size: 15px; }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn { width: 100%; }
    .hero-visual { max-width: 300px; }

    .floating-label-one { right: -2%; }
    .floating-label-two { left: -2%; }

    .services-grid,
    .projects-grid,
    .marketplace-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 190px;
        padding: 25px;
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .footer-contact p {
        display: block;
    }

    .footer-contact p br { display: initial; }

    .cta { padding: 45px 22px; }
}

/* 14. VERY SMALL SCREENS */
@media (max-width: 380px) {
    .footer-content { grid-template-columns: 1fr; }
    .hero-visual { max-width: 260px; }
    .floating-label { font-size: 10px; padding: 7px 10px; }
}



/* =========================================
   15. ABOUT PAGE DESIGN
   Styles for company introduction, mission,
   vision and core values.
========================================= */

.about-page {
    overflow: hidden;
}

.about-page .container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.about-hero {
    padding: 100px 0 75px;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 183, 255, 0.12),
            transparent 60%
        );
}

.about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    margin: 18px 0;
}

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

.about-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.8;
}

.section-label {
    display: inline-block;
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}

.about-introduction {
    padding: 75px 0;
}

.about-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: 55px;
}

.about-content h2,
.purpose-card h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.about-content p,
.purpose-card p,
.value-card p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 15px;
}

.about-highlight {
    padding: 35px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}

.about-highlight h3 {
    color: var(--cyan);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.about-purpose {
    padding: 75px 0;
    background: rgba(12, 31, 57, 0.35);
}

.about-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.purpose-card,
.value-card {
    padding: 32px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.purpose-card:hover,
.value-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan);
}

.purpose-card h2 {
    margin-top: 10px;
}

.about-values {
    padding: 85px 0;
}

.about-values .section-heading {
    text-align: center;
    margin-bottom: 40px;
}

.about-values .section-heading h2 {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.about-values .section-heading p {
    color: var(--text-muted);
}

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

.value-card h3 {
    color: var(--cyan);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* About page tablet layout */
@media (max-width: 900px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* About page mobile layout */
@media (max-width: 600px) {
    .about-page .container {
        width: calc(100% - 32px);
    }

    .about-hero {
        padding: 70px 0 50px;
    }

    .about-introduction,
    .about-purpose,
    .about-values {
        padding: 55px 0;
    }

    .about-purpose-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-highlight,
    .purpose-card,
    .value-card {
        padding: 25px;
    }
}




/* =========================================
   16. ABOUT PAGE - BUSINESS AREA CARDS
========================================= */

.about-business-areas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(
            ellipse at 15% 20%,
            rgba(0, 174, 255, 0.10),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 85% 80%,
            rgba(0, 225, 255, 0.07),
            transparent 45%
        ),
        #050d1c;
}

.about-business-areas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(0, 190, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 190, 255, 0.13) 1px, transparent 1px);
    background-size: 45px 45px;
}

.about-business-areas .section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px;
}

.about-business-areas .section-heading h2 {
    font-size: clamp(2rem, 4vw, 2.7rem);
    margin-bottom: 15px;
}

.about-business-areas .section-heading p {
    color: var(--text-muted);
    line-height: 1.8;
}

.business-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.business-area-card {
    position: relative;
    padding: 32px 28px;
    overflow: hidden;
    border: 1px solid rgba(0, 190, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 39, 69, 0.95),
            rgba(5, 15, 31, 0.98)
        );
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.20);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.business-area-card:hover {
    transform: translateY(-7px);
    border-color: #00d9ff;
}

.business-area-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    border-radius: 15px;
    color: #00d9ff;
    background: rgba(0, 190, 255, 0.12);
    border: 1px solid rgba(0, 190, 255, 0.3);
    font-size: 25px;
    font-weight: 800;
}

.business-area-card h3 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.business-area-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.business-area-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.business-area-card li {
    position: relative;
    padding: 9px 0 9px 23px;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.business-area-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00d9ff;
    font-weight: 800;
}

.business-area-link {
    display: inline-block;
    margin-top: 22px;
    color: #00d9ff;
    font-weight: 700;
    text-decoration: none;
}

.business-area-link:hover {
    color: #ffffff;
}

/* Digital technology atmosphere across About page */

.about-hero,
.about-introduction,
.about-purpose,
.about-values {
    position: relative;
    isolation: isolate;
}

.about-hero::before,
.about-introduction::before,
.about-purpose::before,
.about-values::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(0, 190, 255, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0, 110, 255, 0.09),
            transparent 28%
        );
}

.about-hero {
    background:
        linear-gradient(rgba(3, 12, 27, 0.75), rgba(3, 12, 27, 0.9)),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 49px,
            rgba(0, 190, 255, 0.035) 50px
        );
}

/* Responsive business-area cards */

@media (max-width: 950px) {
    .business-areas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .about-business-areas {
        padding: 60px 0;
    }

    .business-areas-grid {
        grid-template-columns: 1fr;
    }

    .business-area-card {
        padding: 26px 22px;
    }
}



/* =========================================
   17. AUCONNECTION ANIMATED MARQUEE
   Continuous horizontal scrolling strip.
========================================= */

.site-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 19px 0;
    background: linear-gradient(
        90deg,
        #06152a,
        #0b2340,
        #06152a
    );
    border-top: 1px solid rgba(0, 195, 255, 0.18);
    border-bottom: 1px solid rgba(0, 195, 255, 0.18);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: auc-marquee-scroll 35s linear infinite;
}

.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 35px;
    padding-right: 35px;
    white-space: nowrap;
}

.marquee-group span {
    color: #d8f5ff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.marquee-group span:nth-child(even) {
    color: #00d9ff;
    font-size: 1rem;
}

@keyframes auc-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause the marquee when a visitor hovers over it */
.site-marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .marquee-group[aria-hidden="true"] {
        display: none;
    }
}




/* =========================================
   18. SCROLL-REVEAL ANIMATIONS
   Elements enter smoothly when visitors
   scroll them into the visible screen area.
========================================= */

/* Initial hidden state for elements awaiting reveal */
.about-page .reveal-on-scroll {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* Visible state activated by JavaScript */
.about-page .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slightly different delays create a staggered effect */
.about-page .business-area-card:nth-child(2) {
    transition-delay: 0.12s;
}

.about-page .business-area-card:nth-child(3) {
    transition-delay: 0.24s;
}

.about-page .purpose-card:nth-child(2) {
    transition-delay: 0.15s;
}

/* Respect reduced-motion accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    .about-page .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* =========================================
   19. ABOUT PAGE DIGITAL NETWORK BACKGROUND
   Positions the animated canvas behind the
   About hero content without blocking clicks.
========================================= */

.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Full-size canvas container behind the hero text */
.about-network-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Canvas fills the entire hero background */
#about-network-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

/* Keep all hero text and buttons above the animation */
.about-hero > .container {
    position: relative;
    z-index: 2;
}



/* =========================================
   20. AUCONNECTION INTERACTIVE EFFECTS
   Adds glow, movement and smooth transitions
   to About page cards, icons and buttons.
========================================= */

/* Shared transition settings for interactive cards */
.about-page .business-area-card,
.about-page .purpose-card,
.about-page .value-card,
.about-page .about-highlight {
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* Business cards: glowing border and elevation */
.about-page .business-area-card:hover {
    transform: translateY(-9px);
    border-color: rgba(0, 217, 255, 0.85);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(0, 190, 255, 0.12),
        inset 0 0 20px rgba(0, 190, 255, 0.04);
}

/* Business icons: scale and glow */
.about-page .business-area-icon {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.about-page .business-area-card:hover .business-area-icon {
    transform: scale(1.1) rotate(-4deg);

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

    box-shadow:
        0 0 15px rgba(0, 217, 255, 0.25);
}

/* Mission and vision cards */
.about-page .purpose-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 217, 255, 0.7);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2),
        0 0 18px rgba(0, 190, 255, 0.1);
}

/* Core value cards */
.about-page .value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 217, 255, 0.7);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(0, 190, 255, 0.1);
}

/* Commitment panel */
.about-page .about-highlight:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 217, 255, 0.6);

    box-shadow:
        0 0 25px rgba(0, 190, 255, 0.12);
}

/* Marketplace link interaction */
.about-page .business-area-link {
    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}

.about-page .business-area-link:hover {
    color: #ffffff;
    letter-spacing: 0.4px;
}

/* Buttons: subtle lift and glow */
.about-page .btn:hover,
.about-page .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 190, 255, 0.25);
}

/* Keyboard accessibility */
.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 2px solid #00d9ff;
    outline-offset: 4px;
}

/* Disable decorative movement for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .about-page .business-area-card,
    .about-page .purpose-card,
    .about-page .value-card,
    .about-page .about-highlight,
    .about-page .business-area-icon,
    .about-page .business-area-link {
        transition: none;
    }

    .about-page .business-area-card:hover,
    .about-page .purpose-card:hover,
    .about-page .value-card:hover,
    .about-page .about-highlight:hover {
        transform: none;
    }
}



/* =========================================
   21. SERVICES PAGE DESIGN
   Establishes the layout, backgrounds and
   visual styling of the Services page.
========================================= */

.services-page {
    overflow: hidden;
}

/* Shared content width */
.services-page .container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

/* SERVICES HERO */
.services-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 90px;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0, 190, 255, 0.15),
            transparent 45%
        ),
        #050d1c;
}

/* Decorative digital grid behind hero content */
.services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(0, 190, 255, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 190, 255, 0.12) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}

/* Soft moving-looking light effect */
.services-hero-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 190, 255, 0.09);
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
}

.services-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin: 15px 0;
}

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

.services-hero p {
    max-width: 720px;
    margin: 0 auto 25px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* SERVICE DIVISION SECTIONS */
.service-category-section {
    position: relative;
    isolation: isolate;
    padding: 85px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 160, 255, 0.07),
            transparent 35%
        ),
        #050d1c;
}

.service-category-alt {
    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(0, 190, 255, 0.08),
            transparent 40%
        ),
        #091528;
}

/* Division headings */
.services-page .section-heading {
    max-width: 780px;
    margin: 0 auto 45px;
    text-align: center;
}

.services-page .section-heading h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 14px;
}

.services-page .section-heading p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* SERVICE CARD GRID */
.service-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Individual service cards */
.service-detail-card {
    position: relative;
    padding: 30px 26px;
    min-height: 225px;
    overflow: hidden;

    border: 1px solid rgba(0, 190, 255, 0.2);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 39, 69, 0.95),
            rgba(5, 15, 31, 0.98)
        );

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Service card hover effect */
.service-detail-card:hover {
    transform: translateY(-8px);
    border-color: var(--cyan);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(0, 190, 255, 0.12);
}

/* Service icon containers */
.service-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin-bottom: 22px;

    border-radius: 14px;
    border: 1px solid rgba(0, 190, 255, 0.3);

    background: rgba(0, 190, 255, 0.12);
    color: var(--cyan);

    font-size: 24px;
    font-weight: 800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Icon interaction when a card is hovered */
.service-detail-card:hover .service-detail-icon {
    transform: scale(1.1);
    box-shadow: 0 0 18px rgba(0, 190, 255, 0.25);
}

.service-detail-card h3 {
    font-size: 1.12rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.service-detail-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

/* E-COMMERCE HIGHLIGHT */
.commerce-highlight {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 35px;

    padding: 45px;
    border: 1px solid rgba(0, 190, 255, 0.3);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 190, 255, 0.14),
            transparent 40%
        ),
        #0b1c33;
}

.commerce-highlight-content h3 {
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.commerce-highlight-content p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 24px;
}

/* Decorative commerce visual */
.commerce-highlight-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 200px;

    border: 1px solid rgba(0, 190, 255, 0.2);
    border-radius: 18px;

    background: rgba(0, 190, 255, 0.06);
    color: var(--cyan);

    text-shadow: 0 0 20px rgba(0, 190, 255, 0.5);
}

.commerce-highlight-visual span:first-child {
    font-size: 5rem;
    font-weight: 900;
}

.commerce-highlight-visual span:last-child {
    font-size: 0.85rem;
    letter-spacing: 5px;
}

/* SERVICES CONTACT SECTION */
.services-contact-section {
    padding: 90px 24px;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 190, 255, 0.12),
            transparent 55%
        ),
        #050d1c;
}

.services-contact-section h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 15px 0;
}

.services-contact-section p {
    max-width: 680px;
    margin: 0 auto 25px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* TABLET RESPONSIVENESS */
@media (max-width: 950px) {
    .service-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-highlight {
        grid-template-columns: 1fr;
    }
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .services-page .container {
        width: calc(100% - 32px);
    }

    .services-hero {
        padding: 75px 0 65px;
    }

    .service-category-section {
        padding: 60px 0;
    }

    .service-list-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-card {
        min-height: auto;
        padding: 25px;
    }

    .commerce-highlight {
        padding: 25px;
    }

    .commerce-highlight-content h3 {
        font-size: 1.5rem;
    }

    .commerce-highlight-visual {
        min-height: 160px;
    }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    .service-detail-card,
    .service-detail-icon {
        transition: none;
    }

    .service-detail-card:hover,
    .service-detail-card:hover .service-detail-icon {
        transform: none;
    }
}



/* =========================================
   22. AUCONNECTION PROJECTS & PORTFOLIO
   Styles the portfolio hero, project cards,
   project previews, status badges and CTA.
========================================= */

/* Main portfolio page */
.projects-page {
    overflow: hidden;
}

/* Consistent content width */
.projects-page .container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

/* =========================================
   PROJECT HERO
========================================= */

.projects-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 95px;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0, 190, 255, 0.15),
            transparent 45%
        ),
        #050d1c;
}

/* Digital grid behind the hero content */
.projects-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.2;

    background-image:
        linear-gradient(
            rgba(0, 190, 255, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 190, 255, 0.13) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}

/* Decorative hero lighting */
.projects-hero-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 190, 255, 0.1);
    filter: blur(110px);
    z-index: -1;
    pointer-events: none;
}

.projects-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin: 18px 0;
}

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

.projects-hero p {
    max-width: 760px;
    margin: 0 auto 28px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* =========================================
   PORTFOLIO INTRODUCTION
========================================= */

.projects-introduction {
    padding: 65px 0;
    text-align: center;
    background: #071326;
}

.projects-introduction .container {
    max-width: 850px;
}

.projects-introduction h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.projects-introduction p {
    color: var(--text-muted);
    line-height: 1.9;
}

/* =========================================
   FEATURED PROJECTS SECTION
========================================= */

.featured-projects {
    padding: 85px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 150, 255, 0.06),
            transparent 35%
        ),
        #050d1c;
}

.projects-page .section-heading {
    text-align: center;
    margin-bottom: 45px;
}

.projects-page .section-heading h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 14px;
}

.projects-page .section-heading p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* Responsive three-column project grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

/* =========================================
   INDIVIDUAL PROJECT CARDS
========================================= */

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(0, 190, 255, 0.2);

    background: linear-gradient(
        145deg,
        rgba(15, 39, 69, 0.96),
        rgba(5, 15, 31, 0.99)
    );

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Project card hover glow */
.project-card:hover {
    transform: translateY(-8px);
    border-color: var(--cyan);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25),
        0 0 22px rgba(0, 190, 255, 0.13);
}

/* =========================================
   PROJECT PREVIEW AREAS
   These are CSS-generated placeholders,
   not screenshots of actual applications.
========================================= */

.project-visual {
    position: relative;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    gap: 10px;

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

    background:
        radial-gradient(
            circle at center,
            rgba(0, 190, 255, 0.2),
            transparent 60%
        ),
        linear-gradient(135deg, #102b4c, #061020);
}

/* Decorative grid inside project previews */
.project-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(0, 190, 255, 0.2) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 190, 255, 0.2) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}

/* Large project symbols */
.project-visual-symbol {
    position: relative;
    z-index: 1;
    color: var(--cyan);
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 25px rgba(0, 190, 255, 0.5);
}

/* Small preview captions */
.project-visual-caption {
    position: relative;
    z-index: 1;
    color: #c4eaff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}

/* Unique visual colour treatments */
.project-ai {
    background:
        radial-gradient(circle, rgba(0, 220, 255, 0.25), transparent 60%),
        #071a35;
}

.project-certificate {
    background:
        radial-gradient(circle, rgba(70, 120, 255, 0.25), transparent 60%),
        #101b40;
}

.project-kacs {
    background:
        radial-gradient(circle, rgba(0, 255, 190, 0.17), transparent 60%),
        #082c35;
}

.project-marketplace {
    background:
        radial-gradient(circle, rgba(0, 190, 255, 0.25), transparent 60%),
        #082344;
}

/* =========================================
   PROJECT INFORMATION
========================================= */

.project-content {
    padding: 25px;
}

.project-category {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--cyan);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.project-content h3 {
    font-size: 1.12rem;
    line-height: 1.5;
    margin-bottom: 13px;
}

.project-content p {
    color: var(--text-muted);
    font-size: 0.91rem;
    line-height: 1.8;
    margin: 13px 0 18px;
}

/* =========================================
   PROJECT STATUS BADGES
========================================= */

.project-status {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 700;
}

.project-status.completed {
    color: #6fffc3;
    background: rgba(0, 220, 140, 0.1);
    border: 1px solid rgba(0, 220, 140, 0.25);
}

.project-status.proposed {
    color: #ffd36b;
    background: rgba(255, 190, 50, 0.1);
    border: 1px solid rgba(255, 190, 50, 0.25);
}

.project-status.ongoing {
    color: #65dfff;
    background: rgba(0, 190, 255, 0.1);
    border: 1px solid rgba(0, 190, 255, 0.25);
}

/* =========================================
   PROJECT TECHNOLOGY TAGS
========================================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.project-tags span {
    padding: 6px 9px;
    border-radius: 6px;
    color: #c8eaff;
    background: rgba(0, 190, 255, 0.09);
    border: 1px solid rgba(0, 190, 255, 0.15);
    font-size: 0.7rem;
}

/* Project links */
.project-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-link:hover {
    color: #ffffff;
}

/* =========================================
   PROJECT ENQUIRY SECTION
========================================= */

.projects-contact {
    padding: 90px 24px;
    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 190, 255, 0.12),
            transparent 55%
        ),
        #071326;
}

.projects-contact h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 16px 0;
}

.projects-contact p {
    max-width: 700px;
    margin: 0 auto 25px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* =========================================
   RESPONSIVE PORTFOLIO LAYOUT
========================================= */

/* Tablet layout */
@media (max-width: 950px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile layout */
@media (max-width: 600px) {
    .projects-page .container {
        width: calc(100% - 32px);
    }

    .projects-hero {
        padding: 75px 0 65px;
    }

    .projects-introduction,
    .featured-projects {
        padding: 60px 0;
    }

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

    .project-visual {
        min-height: 170px;
    }

    .project-content {
        padding: 22px;
    }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .project-card {
        transition: none;
    }

    .project-card:hover {
        transform: none;
    }
}



/* =========================================
   23. EXPANDABLE PROJECT PORTFOLIO
   Styles the category filters, project visibility,
   and Load More control used by projects.php.
========================================= */

/* Ensure hidden cards and controls stay hidden even if other styles target them. */
.project-list-item[hidden],
.projects-load-more-wrap[hidden],
.projects-empty-message[hidden] {
    display: none !important;
}

/* Category filter row: horizontally scrollable on small screens. */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 32px;
}

.project-filter {
    appearance: none;
    border: 1px solid rgba(0, 190, 255, 0.25);
    border-radius: 30px;
    padding: 10px 16px;
    color: #c8eaff;
    background: rgba(0, 190, 255, 0.06);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-filter:hover,
.project-filter.active {
    color: #04101f;
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 190, 255, 0.2);
}

.project-filter:focus-visible,
#projects-load-more:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

/* Keep project cards aligned and let card content fill available space. */
.projects-grid {
    align-items: stretch;
}

.project-list-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-list-item .project-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.project-list-item .project-content p {
    flex: 1;
}

.project-list-item .project-link {
    margin-top: 18px;
}

.project-link-unavailable {
    opacity: 0.65;
    cursor: default;
}

/* Load More control and empty-category message. */
.projects-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.projects-empty-message {
    margin: 30px 0 0;
    color: var(--text-muted);
    text-align: center;
}

/* Small screens: make filter buttons easy to scroll and tap. */
@media (max-width: 600px) {
    .project-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px 2px 12px;
        scrollbar-width: thin;
    }

    .project-filter {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Respect visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .project-filter {
        transition: none;
    }
}



/* ==========================================================
   SECTION 23: AUCONNECTION ACADEMY
   ----------------------------------------------------------
   Purpose:
   Creates a premium technology education experience.

   Design:
   - Deep navy background
   - Electric blue and cyan highlights
   - Responsive programme cards
   - Animated visual effects
   - Interactive hover transitions

   IMPORTANT:
   All selectors are scoped to .academy-page or its sections
   to protect the styling of other website pages.
   ========================================================== */


/* ----------------------------------------------------------
   1. ACADEMY PAGE FOUNDATION
   ---------------------------------------------------------- */

.academy-page {
    position: relative;
    overflow: hidden;
    background: #050d1b;
    color: #eaf3ff;
}

.academy-page .container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.academy-page h1,
.academy-page h2,
.academy-page h3,
.academy-page p {
    margin-top: 0;
}

.academy-page p {
    color: #aebed2;
    line-height: 1.85;
}

.academy-page .section-label {
    display: inline-block;
    margin-bottom: 16px;
    color: #00d9ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   2. ACADEMY HERO SECTION
   ---------------------------------------------------------- */

.academy-hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    padding: 110px 0 100px;
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 80% 35%,
            rgba(0, 150, 255, 0.18),
            transparent 42%
        ),
        linear-gradient(120deg, #050d1b, #071a32 65%, #061126);
}

/* Decorative animated background layer. */
.academy-hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.academy-hero-background::before,
.academy-hero-background::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(0, 200, 255, 0.15);
    border-radius: 50%;
    animation: academy-orbit 18s linear infinite;
}

.academy-hero-background::before {
    top: 5%;
    right: -100px;
    box-shadow:
        0 0 60px rgba(0, 174, 255, 0.08),
        inset 0 0 60px rgba(0, 174, 255, 0.06);
}

.academy-hero-background::after {
    width: 300px;
    height: 300px;
    top: 20%;
    right: -35px;
    animation-direction: reverse;
}

@keyframes academy-orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.academy-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1180px;
}

.academy-hero h1 {
    max-width: 850px;
    margin-bottom: 22px;
    color: #ffffff;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -2.5px;
}

.academy-hero h1 span {
    display: block;
    color: #00cfff;
    background: linear-gradient(90deg, #00cfff, #4b8dff, #00f0dc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.academy-hero-content > p {
    max-width: 650px;
    margin-bottom: 30px;
    color: #bdcce0;
    font-size: 16px;
}

.academy-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

/* Hero buttons retain the shared website button classes. */
.academy-hero .btn,
.academy-enquiry .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 23px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 700;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.academy-hero .btn:hover,
.academy-enquiry .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 174, 255, 0.22);
}

.academy-hero-note {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #91a9c5;
    font-size: 13px;
}

.academy-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #00e6b8;
    box-shadow: 0 0 14px rgba(0, 230, 184, 0.8);
    animation: academy-pulse 2s infinite;
}

@keyframes academy-pulse {
    50% {
        opacity: 0.45;
        box-shadow: 0 0 4px rgba(0, 230, 184, 0.4);
    }
}


/* ----------------------------------------------------------
   3. ACADEMY INTRODUCTION
   ---------------------------------------------------------- */

.academy-introduction {
    position: relative;
    padding: 105px 0;
    background: #071326;
}

.academy-intro-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 65px;
}

.academy-intro-text h2,
.academy-advantages-heading h2 {
    max-width: 650px;
    margin-bottom: 22px;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    letter-spacing: -1px;
}

.academy-intro-text p {
    margin-bottom: 16px;
    font-size: 15px;
}

.academy-intro-panel {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 38px;
    border: 1px solid rgba(0, 200, 255, 0.2);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0, 183, 255, 0.18),
            transparent 55%
        ),
        linear-gradient(145deg, #102642, #09172b);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.academy-intro-panel:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 220, 255, 0.6);
}

.academy-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    border-radius: 15px;
    background: rgba(0, 196, 255, 0.13);
    color: #00d9ff;
    font-size: 25px;
    font-weight: 800;
}

.academy-intro-panel h3 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 24px;
}

.academy-intro-panel p {
    max-width: 350px;
    margin-bottom: 0;
}

.academy-panel-decoration {
    position: absolute;
    right: 30px;
    bottom: 25px;
    display: flex;
    align-items: end;
    gap: 7px;
    height: 65px;
    opacity: 0.65;
}

.academy-panel-decoration span {
    display: block;
    width: 7px;
    border-radius: 10px;
    background: linear-gradient(#00d9ff, #2875ff);
    animation: academy-bars 1.5s ease-in-out infinite alternate;
}

.academy-panel-decoration span:nth-child(1) {
    height: 35%;
}

.academy-panel-decoration span:nth-child(2) {
    height: 75%;
    animation-delay: 0.3s;
}

.academy-panel-decoration span:nth-child(3) {
    height: 55%;
    animation-delay: 0.6s;
}

@keyframes academy-bars {
    to {
        transform: scaleY(0.55);
    }
}


/* ----------------------------------------------------------
   4. TRAINING PROGRAMME SECTION
   ---------------------------------------------------------- */

.academy-programmes {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0, 110, 220, 0.11),
            transparent 55%
        ),
        #050d1b;
}

.academy-page .section-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.academy-page .section-heading h2 {
    margin-bottom: 16px;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -1.3px;
}

.academy-page .section-heading p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 15px;
}

.academy-programme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.academy-programme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(112, 160, 205, 0.15);
    border-radius: 17px;
    background: linear-gradient(
        145deg,
        rgba(17, 39, 66, 0.94),
        rgba(7, 19, 36, 0.97)
    );
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Subtle light effect inside each programme card. */
.academy-programme-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(0, 183, 255, 0.09);
    filter: blur(30px);
    transition: background 0.35s ease;
    pointer-events: none;
}

.academy-programme-card:hover {
    transform: translateY(-9px);
    border-color: rgba(0, 204, 255, 0.55);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 0 25px rgba(0, 170, 255, 0.08);
}

.academy-programme-card:hover::before {
    background: rgba(0, 183, 255, 0.2);
}

.academy-programme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 207, 255, 0.2);
    border-radius: 15px;
    background: rgba(0, 190, 255, 0.1);
    color: #00d9ff;
    font-size: 26px;
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.academy-programme-card:hover .academy-programme-icon {
    transform: rotate(-7deg) scale(1.08);
    background: rgba(0, 190, 255, 0.2);
}

.academy-programme-number {
    margin-bottom: 10px;
    color: #00cfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.academy-programme-card h3 {
    margin-bottom: 13px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.35;
}

.academy-programme-card p {
    margin-bottom: 20px;
    font-size: 13px;
}

.academy-programme-card ul {
    display: grid;
    gap: 11px;
    margin: auto 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(140, 175, 210, 0.13);
    list-style: none;
}

.academy-programme-card li {
    position: relative;
    padding-left: 19px;
    color: #c1d1e4;
    font-size: 12px;
    line-height: 1.5;
}

.academy-programme-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00d9ff;
    font-weight: 800;
}


/* ----------------------------------------------------------
   5. LEARNING APPROACH
   ---------------------------------------------------------- */

.academy-learning {
    padding: 110px 0;
    background: #08172b;
}

.academy-learning-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.academy-learning-item {
    position: relative;
    padding: 30px 24px;
    border: 1px solid rgba(125, 170, 215, 0.15);
    border-radius: 15px;
    background: rgba(13, 35, 60, 0.65);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.academy-learning-item:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(14, 48, 79, 0.9);
}

.academy-learning-number {
    display: block;
    margin-bottom: 24px;
    color: #00cfff;
    font-size: 30px;
    font-weight: 850;
    opacity: 0.85;
}

.academy-learning-item h3 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 17px;
}

.academy-learning-item p {
    margin-bottom: 0;
    font-size: 13px;
}


/* ----------------------------------------------------------
   6. WHY AUCONNECTION ACADEMY
   ---------------------------------------------------------- */

.academy-advantages {
    padding: 105px 0;
    background: #050d1b;
}

.academy-advantages-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.academy-advantages-heading p {
    max-width: 540px;
}

.academy-advantages-list {
    display: grid;
    gap: 14px;
}

.academy-advantage {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    border: 1px solid rgba(120, 170, 215, 0.13);
    border-radius: 11px;
    background: rgba(12, 31, 53, 0.7);
    color: #d7e6f7;
    font-size: 14px;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.academy-advantage:hover {
    transform: translateX(6px);
    border-color: rgba(0, 207, 255, 0.45);
}

.academy-advantage > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border-radius: 50%;
    background: rgba(0, 220, 180, 0.12);
    color: #00e6b8;
    font-weight: 900;
}


/* ----------------------------------------------------------
   7. TRAINING ENQUIRY CALL TO ACTION
   ---------------------------------------------------------- */

.academy-enquiry {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    text-align: center;
    background:
        radial-gradient(
            ellipse at 50% 120%,
            rgba(0, 200, 255, 0.2),
            transparent 65%
        ),
        linear-gradient(120deg, #0a1c34, #07142a);
}

.academy-enquiry::before,
.academy-enquiry::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(0, 205, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.academy-enquiry::before {
    top: -120px;
    left: -100px;
}

.academy-enquiry::after {
    right: -100px;
    bottom: -140px;
}

.academy-enquiry .container {
    position: relative;
    z-index: 1;
}

.academy-enquiry h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    color: #ffffff;
    font-size: clamp(29px, 4vw, 45px);
    letter-spacing: -1px;
}

.academy-enquiry p {
    max-width: 680px;
    margin: 0 auto 28px;
}

.academy-enquiry .btn {
    margin: 0 auto;
}


/* ----------------------------------------------------------
   8. RESPONSIVE TABLET LAYOUT
   ---------------------------------------------------------- */

@media (max-width: 950px) {

    .academy-programme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academy-learning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academy-intro-layout,
    .academy-advantages-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .academy-hero {
        min-height: 520px;
    }
}


/* ----------------------------------------------------------
   9. RESPONSIVE MOBILE LAYOUT
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .academy-page .container {
        width: min(100% - 32px, 1180px);
    }

    .academy-hero {
        min-height: auto;
        padding: 90px 0 75px;
    }

    .academy-hero h1 {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -1.5px;
    }

    .academy-hero-content > p {
        font-size: 14px;
    }

    .academy-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .academy-hero-actions .btn {
        width: 100%;
    }

    .academy-introduction,
    .academy-programmes,
    .academy-learning,
    .academy-advantages {
        padding: 75px 0;
    }

    .academy-intro-panel {
        min-height: auto;
        padding: 28px;
    }

    .academy-programme-grid,
    .academy-learning-grid {
        grid-template-columns: 1fr;
    }

    .academy-programme-card {
        min-height: 320px;
        padding: 25px;
    }

    .academy-page .section-heading {
        margin-bottom: 38px;
    }

    .academy-page .section-heading h2 {
        font-size: 31px;
    }

    .academy-learning-item {
        padding: 25px;
    }

    .academy-advantages-layout {
        gap: 30px;
    }

    .academy-enquiry {
        padding: 75px 0;
    }
}


/* ----------------------------------------------------------
   10. ACCESSIBILITY: REDUCED MOTION
   ---------------------------------------------------------- */

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

    .academy-page *,
    .academy-page *::before,
    .academy-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* END OF SECTION 23: AUCONNECTION ACADEMY */




/* ==========================================================
   SECTION 24: ACADEMY SCROLL-REVEAL STYLES
   ----------------------------------------------------------
   Controls how Academy elements appear while scrolling.
   ========================================================== */

/* Initial hidden state before an element enters the screen. */
.academy-page .academy-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--academy-reveal-delay, 0ms);
}

/* Final visible state after the element enters the screen. */
.academy-page .academy-reveal.academy-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keep content visible when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) {

    .academy-page .academy-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* END OF SECTION 24: ACADEMY SCROLL-REVEAL STYLES */




/* ==========================================================
   SECTION 25: ACADEMY DIGITAL NETWORK BACKGROUND
   ----------------------------------------------------------
   Styles the canvas used for the Academy hero animation.
   ========================================================== */

.academy-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Fill the entire hero background with the animation canvas. */
#academy-network-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

/* Keep the hero text and buttons above the animation. */
.academy-hero-content {
    position: relative;
    z-index: 2;
}

/* END OF SECTION 25 */



/* =========================================================
   SECTION 26: AUCONNECTION CONTACT PAGE
   Styles the contact hero, information cards and enquiry form.
   Append this section without replacing existing CSS.
========================================================= */

/* Main contact page background */
.contact-page {
    background: #050d1b;
    color: #f4f8ff;
    overflow: hidden;
}

/* Contact hero section */
.contact-hero {
    position: relative;
    padding: 115px 20px 100px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 174, 239, 0.14), transparent 45%),
        linear-gradient(135deg, #071629, #050d1b 65%);
    border-bottom: 1px solid rgba(0, 190, 255, 0.12);
}

/* Hero eyebrow label */
.contact-hero .section-eyebrow,
.contact-information .section-eyebrow,
.contact-form-wrapper .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #00d5ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Hero heading */
.contact-hero h1 {
    margin: 0 0 20px;
    color: #f5f8ff;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.12;
}

/* Cyan gradient heading text */
.contact-hero h1 span,
.contact-information h2 span {
    background: linear-gradient(90deg, #00d5ff, #398bff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero description */
.contact-hero p {
    max-width: 650px;
    margin: 0 auto;
    color: #aebed3;
    font-size: 15px;
    line-height: 1.9;
}

/* Main contact content section */
.contact-content {
    position: relative;
    padding: 100px 20px;
    background:
        radial-gradient(circle at 15% 30%, rgba(0, 150, 255, 0.07), transparent 30%),
        #050d1b;
}

/* Two-column contact layout */
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 65px;
    align-items: start;
    max-width: 1150px;
    margin: 0 auto;
}

/* Contact information heading */
.contact-information h2,
.contact-form-wrapper h2 {
    margin: 0 0 20px;
    color: #f4f8ff;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 750;
    line-height: 1.3;
}

/* Contact introduction */
.contact-information > p {
    margin-bottom: 35px;
    color: #aebed3;
    font-size: 14px;
    line-height: 1.9;
}

/* Individual contact information card */
.contact-info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 17px;
    padding: 22px;
    background: linear-gradient(
        135deg,
        rgba(16, 39, 67, 0.88),
        rgba(8, 22, 41, 0.95)
    );
    border: 1px solid rgba(0, 174, 239, 0.17);
    border-radius: 14px;
    transition: transform 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Contact card hover effect */
.contact-info-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 213, 255, 0.55);
    box-shadow: 0 12px 35px rgba(0, 174, 239, 0.1);
}

/* Contact icon container */
.contact-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #00d5ff;
    background: rgba(0, 174, 239, 0.12);
    border: 1px solid rgba(0, 213, 255, 0.2);
    border-radius: 12px;
    font-size: 23px;
    font-weight: 700;
}

/* Contact card title */
.contact-info-card h3 {
    margin: 0 0 6px;
    color: #f4f8ff;
    font-size: 15px;
}

/* Contact card description */
.contact-info-card p {
    margin: 0;
    color: #aebed3;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Contact form glass-style container */
.contact-form-wrapper {
    padding: 38px;
    background: linear-gradient(
        145deg,
        rgba(17, 40, 68, 0.94),
        rgba(7, 19, 36, 0.98)
    );
    border: 1px solid rgba(0, 174, 239, 0.2);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Contact form heading */
.contact-form-wrapper h2 {
    margin-bottom: 28px;
    font-size: 27px;
}

/* Individual form field group */
.contact-form .form-group {
    margin-bottom: 21px;
}

/* Form labels */
.contact-form label {
    display: block;
    margin-bottom: 9px;
    color: #dce8f8;
    font-size: 13px;
    font-weight: 600;
}

/* Form input and textarea fields */
.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    padding: 15px 16px;
    color: #f4f8ff;
    background: rgba(3, 13, 27, 0.85);
    border: 1px solid rgba(135, 172, 211, 0.2);
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Input placeholder appearance */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #71849e;
}

/* Input focus effect */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #00c8f5;
    box-shadow: 0 0 0 3px rgba(0, 200, 245, 0.1);
}

/* Textarea sizing */
.contact-form textarea {
    min-height: 145px;
    resize: vertical;
}

/* Contact form submit button */
.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    color: #ffffff;
    background: linear-gradient(100deg, #087df5, #00c9e9);
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 174, 239, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Submit button hover effect */
.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 174, 239, 0.35);
}

/* Keyboard accessibility for the submit button */
.contact-submit-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

/* Tablet and smaller laptop layout */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 700px;
    }

    .contact-hero {
        padding: 90px 20px 80px;
    }
}

/* Mobile phone layout */
@media (max-width: 600px) {
    .contact-hero {
        padding: 75px 18px 65px;
    }

    .contact-content {
        padding: 65px 18px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .contact-info-card {
        padding: 17px;
    }

    .contact-information h2,
    .contact-form-wrapper h2 {
        font-size: 26px;
    }
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .contact-info-card,
    .contact-submit-btn {
        transition: none;
    }

    .contact-info-card:hover,
    .contact-submit-btn:hover {
        transform: none;
    }
}




/* =========================================================
   SECTION 27: AUCONNECTION CONTACT SOCIAL MEDIA
   Complete styling for the social media connection area.
========================================================= */

/* Main social media container */
.contact-page .contact-social-section {
    display: block;
    width: 100%;
    margin-top: 32px;
    padding: 25px;
    background: linear-gradient(
        145deg,
        rgba(15, 39, 68, 0.95),
        rgba(7, 19, 36, 0.98)
    );
    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 16px;
    box-sizing: border-box;
}

/* Small social section label */
.contact-page .contact-social-section .section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #00d5ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

/* Social section heading */
.contact-page .contact-social-section h3 {
    margin: 0 0 9px;
    color: #f4f8ff;
    font-size: 21px;
    font-weight: 750;
}

/* Social section description */
.contact-page .contact-social-section .social-heading p {
    margin: 0 0 22px;
    color: #aebed3;
    font-size: 13px;
    line-height: 1.8;
}

/* Social buttons container */
.contact-page .contact-social-section .contact-social-links {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Individual social media buttons */
.contact-page .contact-social-section .social-link {
    display: inline-flex !important;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    color: #ffffff;
    background: rgba(0, 174, 239, 0.10);
    border: 1px solid rgba(0, 174, 239, 0.25);
    border-radius: 12px;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Properly size the inline platform SVG icons */
.contact-page .contact-social-section .social-link svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: none;
}

/* Platform colours */
.contact-page .contact-social-section .whatsapp {
    color: #25d366;
}

.contact-page .contact-social-section .facebook {
    color: #1877f2;
}

.contact-page .contact-social-section .x-social {
    color: #ffffff;
}

.contact-page .contact-social-section .youtube {
    color: #ff4444;
}

.contact-page .contact-social-section .telegram {
    color: #29a9eb;
}

/* Hover effects */
.contact-page .contact-social-section .social-link:hover {
    transform: translateY(-5px);
    background: rgba(0, 174, 239, 0.18);
    border-color: #00d5ff;
    box-shadow: 0 9px 25px rgba(0, 174, 239, 0.18);
}

/* Keyboard accessibility */
.contact-page .contact-social-section .social-link:focus-visible {
    outline: 2px solid #00d5ff;
    outline-offset: 4px;
}

/* Small note below the social buttons */
.contact-page .contact-social-section .social-follow-note {
    margin: 19px 0 0;
    color: #8299b5;
    font-size: 11px;
    line-height: 1.7;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .contact-page .contact-social-section {
        padding: 21px;
    }

    .contact-page .contact-social-section .contact-social-links {
        gap: 10px;
    }

    .contact-page .contact-social-section .social-link {
        flex-basis: 43px;
        width: 43px;
        min-width: 43px;
        height: 43px;
    }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-social-section .social-link {
        transition: none;
    }

    .contact-page .contact-social-section .social-link:hover {
        transform: none;
    }
}




/* =========================================================
   SECTION 28: CONTACT DETAILS AND FINAL ICON POLISH
   Styles clickable email, phone and WhatsApp information.
========================================================= */

/* Make contact card links readable and clickable */
.contact-page .contact-info-card a {
    color: #aebed3;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

/* Highlight contact links when hovered */
.contact-page .contact-info-card a:hover {
    color: #00d5ff;
}

/* Ensure contact icons use the AUconnection cyan palette */
.contact-page .contact-icon {
    color: #00d5ff;
    background: rgba(0, 174, 239, 0.12);
    border: 1px solid rgba(0, 213, 255, 0.2);
}

/* Style text-based contact icons */
.contact-page .contact-icon span {
    color: #00d5ff;
    font-size: 21px;
    font-weight: 800;
}

/* Special WhatsApp contact icon */
.contact-page .whatsapp-contact-icon {
    color: #25d366;
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
}

.contact-page .whatsapp-contact-icon span {
    color: #25d366;
    font-size: 15px;
}

/* Keep social media SVG icons properly visible */
.contact-page .contact-social-links .social-link svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: currentColor;
}

/* Social platform colours */
.contact-page .contact-social-links .whatsapp {
    color: #25d366;
}

.contact-page .contact-social-links .facebook {
    color: #1877f2;
}

.contact-page .contact-social-links .x-social {
    color: #ffffff;
}

.contact-page .contact-social-links .youtube {
    color: #ff4444;
}

.contact-page .contact-social-links .telegram {
    color: #29a9eb;
}



/* =========================================================
   SECTION 29: RESPONSIVE NAVIGATION INTERACTION SUPPORT
   ---------------------------------------------------------
   Keeps the mobile menu button above nearby content and
   gives the opened navigation a reliable stacking order.
   JavaScript must toggle .is-open on .main-navigation.
========================================================= */

/* Keep the header controls clickable above decorative layers. */
.site-header {
    position: sticky;
    isolation: isolate;
}

/* Ensure the hamburger button receives pointer and keyboard input. */
.menu-toggle {
    position: relative;
    z-index: 1002;
    pointer-events: auto;
    touch-action: manipulation;
}

/* Keep the dropdown above page content when it is opened. */
@media (max-width: 1000px) {
    .main-navigation {
        z-index: 1001;
        max-height: calc(100vh - 74px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-navigation.is-open {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .main-navigation:not(.is-open) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .main-navigation.is-open {
        pointer-events: auto;
    }

    /* Keep menu links comfortably tappable on touch screens. */
    .nav-links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* END OF SECTION 29: RESPONSIVE NAVIGATION INTERACTION SUPPORT */



/* =========================================================
   SECTION 30: CONTACT FORM STATUS NOTIFICATIONS
   Purpose:
   - Make success and error messages easy to notice.
   - Match AUconnection's dark navy, cyan and blue design.
   - Keep notifications readable on desktop and mobile.
   How to edit:
   - Change the background, border or text colours below.
   - Keep .is-success and .is-error class names unchanged;
     contact.php uses these classes to select the right style.
   ========================================================= */

/* Shared layout for all contact form status messages. */
.contact-form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 22px;
    padding: 17px 19px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    animation: contactFeedbackAppear 0.35s ease-out both;
}

/* Green success notification with a visible check icon. */
.contact-form-feedback.is-success {
    color: #dcfce7;
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.96), rgba(6, 78, 59, 0.88));
    border-color: rgba(74, 222, 128, 0.75);
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.10),
        0 10px 28px rgba(22, 163, 74, 0.16);
}

.contact-form-feedback.is-success::before {
    content: "✓";
    display: inline-flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    font-size: 16px;
    font-weight: 800;
}

/* Red error notification with a visible warning icon. */
.contact-form-feedback.is-error {
    color: #fee2e2;
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(88, 28, 28, 0.90));
    border-color: rgba(248, 113, 113, 0.78);
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.10),
        0 10px 28px rgba(220, 38, 38, 0.15);
}

.contact-form-feedback.is-error::before {
    content: "!";
    display: inline-flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5;
    font-size: 16px;
    font-weight: 800;
}

/* Subtle entrance animation draws attention to the feedback. */
@keyframes contactFeedbackAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .contact-form-feedback {
        animation: none;
    }
}

/* Keep the notification comfortable on narrow screens. */
@media (max-width: 600px) {
    .contact-form-feedback {
        margin-bottom: 18px;
        padding: 14px 15px;
        font-size: 13px;
    }
}

/* ======================================================================
   30. AUCONNECTION LIGHT-FIRST PUBLIC WEBSITE THEME
   This layer intentionally overrides the original dark palette while
   preserving the existing page layouts, responsive rules and animations.
   Admin pages are excluded. Dark hero sections remain as brand accents.
   ====================================================================== */

:root {
    color-scheme: light;

    /* Primary brand colours remain blue and cyan; surfaces become light. */
    --navy: #f4f7fb;
    --navy-light: #edf3fa;
    --navy-card: #ffffff;
    --navy-deep: #eaf0f7;

    --blue: #0878f9;
    --blue-light: #3195ff;
    --cyan: #009fbd;

    --white: #ffffff;
    --silver: #52647a;
    --muted: #718096;
    --text: #17263b;
    --text-muted: #52647a;

    --border: rgba(25, 55, 90, 0.13);
    --border-glow: rgba(0, 159, 189, 0.34);
    --card-bg: #ffffff;
    --border-color: rgba(25, 55, 90, 0.13);

    --gradient: linear-gradient(110deg, #0878f9, #00aeca);
    --gradient-text: linear-gradient(100deg, #ffffff, #a8edff);
    --shadow-blue: 0 10px 30px rgba(20, 75, 135, 0.10);
}

/* Global public-page canvas and default text contrast. */
body {
    background: #f4f7fb;
    color: #17263b;
}

.section-heading p,
.hero-description,
.service-card p,
.project-content p,
.marketplace-content p,
.footer-content p {
    color: #52647a;
}

/* Shared buttons: preserve strong blue calls to action and readable outlines. */
.btn-secondary {
    color: #17304e;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.20);
}

.btn-secondary:hover {
    color: #075dbd;
    border-color: #0878f9;
    background: #eef6ff;
}

/* Public navigation: clean white surface with a subtle divider. */
.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(25, 55, 90, 0.12);
    box-shadow: 0 4px 18px rgba(20, 45, 75, 0.045);
}

.brand-name {
    color: #14243a;
}

.nav-links a {
    color: #42546b;
}

.nav-links a:hover {
    color: #0878f9;
}

.menu-toggle {
    background: #f1f5fa;
    border-color: rgba(25, 55, 90, 0.16);
}

.menu-toggle span {
    background: #18304d;
}

/* Keep the homepage hero dark: it is the main branded visual statement. */
.hero {
    background:
        radial-gradient(ellipse at 78% 45%, rgba(8, 120, 249, 0.22), transparent 42%),
        linear-gradient(135deg, #071426, #102844);
}

.hero-description {
    color: #c7d5e5;
}

.hero-trust-line {
    color: #aabbd0;
}

.floating-label {
    background: rgba(5, 17, 34, 0.94);
}

/* Main homepage service cards become bright, separated surfaces. */
.services-section {
    background: #f4f7fb;
}

.service-card {
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.12);
    box-shadow: 0 8px 24px rgba(20, 45, 75, 0.045);
}

.service-card h3 {
    color: #172b45;
}

.service-card p {
    color: #52647a;
}

.service-card:hover {
    box-shadow: 0 16px 34px rgba(20, 65, 115, 0.10);
}

/* Project and marketplace cards use the same bright card language. */
.projects-grid,
.marketplace-grid {
    color: #17263b;
}

.project-card,
.marketplace-card {
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 8px 24px rgba(20, 45, 75, 0.05);
}

.project-content h3,
.marketplace-content h3 {
    color: #172b45;
}

.project-content p,
.marketplace-content p {
    color: #52647a;
}

.project-visual,
.marketplace-image {
    background-color: #eaf2fb;
}

/* Light call-to-action panel; blue/cyan remains the emphasis colour. */
.cta {
    color: #17263b;
    border-color: rgba(8, 120, 249, 0.18);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 120, 249, 0.10), transparent 72%),
        #ffffff;
    box-shadow: 0 12px 32px rgba(20, 45, 75, 0.06);
}

.cta h2 {
    color: #172b45;
}

.cta p {
    color: #52647a;
}

/* Footer stays visually distinct without becoming an almost-black block. */
.site-footer {
    background: #eaf0f7;
    border-top-color: rgba(25, 55, 90, 0.12);
}

.footer-content h2,
.footer-content h3 {
    color: #172b45;
}

.footer-content p {
    color: #52647a;
}

.footer-content a:hover {
    color: #0878f9;
}

.footer-bottom {
    color: #66788e;
    border-top-color: rgba(25, 55, 90, 0.12);
}

/* About page: light content sections, white cards and legible body copy. */
.about-page {
    background: #f4f7fb;
    color: #17263b;
}

.about-hero {
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 120, 249, 0.10), transparent 58%),
        #edf3fa;
}

.about-hero h1,
.about-content h2,
.purpose-card h2,
.about-values .section-heading h2 {
    color: #172b45;
}

.about-hero p,
.about-content p,
.purpose-card p,
.value-card p,
.about-values .section-heading p {
    color: #52647a;
}

.about-introduction,
.about-values {
    background: #f8fafd;
}

.about-purpose {
    background: #edf3fa;
}

.about-highlight,
.purpose-card,
.value-card {
    color: #17263b;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 28px rgba(20, 45, 75, 0.055);
}

.about-highlight h3,
.value-card h3 {
    color: #0878f9;
}

/* About business-area cards: override their individually hard-coded dark fills. */
.about-business-areas {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(0, 174, 255, 0.07), transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(0, 225, 255, 0.05), transparent 45%),
        #edf3fa;
}

.about-business-areas .section-heading h2 {
    color: #172b45;
}

.about-business-areas .section-heading p {
    color: #52647a;
}

.business-area-card {
    color: #17263b;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 28px rgba(20, 45, 75, 0.06);
}

.business-area-card h3 {
    color: #172b45;
}

.business-area-card p,
.business-area-card li {
    color: #52647a;
}

.business-area-card li {
    border-bottom-color: rgba(25, 55, 90, 0.09);
}

.business-area-link {
    color: #0878f9;
}

.business-area-link:hover {
    color: #005bbd;
}

/* Services page: retain the branded dark hero, brighten the service content. */
.services-page {
    background: #f4f7fb;
    color: #17263b;
}

.services-hero {
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 190, 255, 0.16), transparent 45%),
        linear-gradient(135deg, #071426, #102844);
}

.services-hero h1,
.services-hero .section-label {
    color: #ffffff;
}

.services-hero p {
    color: #c7d5e5;
}

.service-category-section {
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 160, 255, 0.045), transparent 35%),
        #f8fafd;
}

.service-category-alt {
    background:
        radial-gradient(circle at 90% 50%, rgba(0, 190, 255, 0.05), transparent 40%),
        #edf3fa;
}

.services-page .section-heading h2 {
    color: #172b45;
}

.services-page .section-heading p {
    color: #52647a;
}

.service-detail-card {
    color: #17263b;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 26px rgba(20, 45, 75, 0.055);
}

.service-detail-card h3 {
    color: #172b45;
}

.service-detail-card p {
    color: #52647a;
}

.service-detail-card:hover {
    box-shadow: 0 16px 34px rgba(20, 65, 115, 0.10);
}

.commerce-highlight {
    color: #17263b;
    background:
        radial-gradient(circle at 85% 50%, rgba(0, 190, 255, 0.08), transparent 40%),
        #ffffff;
    border-color: rgba(25, 55, 90, 0.14);
    box-shadow: 0 10px 28px rgba(20, 45, 75, 0.06);
}

.commerce-highlight-content h3 {
    color: #172b45;
}

.commerce-highlight-content p {
    color: #52647a;
}

.commerce-highlight-visual {
    background: #eef6ff;
    border-color: rgba(8, 120, 249, 0.16);
    color: #0878f9;
    text-shadow: none;
}

.services-contact-section {
    color: #17263b;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 190, 255, 0.07), transparent 55%),
        #edf3fa;
}

.services-contact-section h2 {
    color: #172b45;
}

.services-contact-section p {
    color: #52647a;
}

/* Projects and portfolio page: bright content area and readable project cards. */
.projects-page {
    background: #f4f7fb;
    color: #17263b;
}

.projects-hero {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 190, 255, 0.15), transparent 55%),
        linear-gradient(135deg, #071426, #102844);
}

.projects-hero h1 {
    color: #ffffff;
}

.projects-hero p {
    color: #c7d5e5;
}

.projects-introduction,
.featured-projects {
    background: #f8fafd;
}

.projects-introduction h2,
.projects-page .section-heading h2 {
    color: #172b45;
}

.projects-introduction p,
.projects-page .section-heading p {
    color: #52647a;
}

.project-card {
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 26px rgba(20, 45, 75, 0.055);
}

.project-content h3 {
    color: #172b45;
}

.project-content p {
    color: #52647a;
}

.project-category,
.project-link {
    color: #0878f9;
}

.project-filters {
    color: #17263b;
}

.project-filter {
    color: #42546b;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.15);
}

.project-filter.active {
    color: #ffffff;
    background: #0878f9;
    border-color: #0878f9;
}

.projects-contact {
    background: #edf3fa;
}

.projects-contact h2 {
    color: #172b45;
}

.projects-contact p {
    color: #52647a;
}

/* Academy: keep its hero dramatic, but make learning content light and calm. */
.academy-page {
    background: #f4f7fb;
    color: #17263b;
}

.academy-page p {
    color: #52647a;
}

.academy-hero {
    background:
        radial-gradient(ellipse at 50% 20%, rgba(0, 190, 255, 0.15), transparent 48%),
        linear-gradient(135deg, #071426, #102844);
}

.academy-hero h1,
.academy-hero .section-label {
    color: #ffffff;
}

.academy-hero-content > p,
.academy-hero-note {
    color: #c7d5e5;
}

.academy-introduction,
.academy-learning,
.academy-advantages {
    background: #f8fafd;
}

.academy-programmes {
    background: #edf3fa;
}

.academy-page .section-heading h2,
.academy-advantages-heading h2,
.academy-intro-text h2 {
    color: #172b45;
}

.academy-page .section-heading p,
.academy-intro-text p,
.academy-advantages-heading p {
    color: #52647a;
}

.academy-intro-panel,
.academy-programme-card,
.academy-learning-item,
.academy-advantage {
    color: #17263b;
    background: #ffffff;
    border-color: rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 26px rgba(20, 45, 75, 0.05);
}

.academy-intro-panel h3,
.academy-programme-card h3,
.academy-learning-item h3 {
    color: #172b45;
}

.academy-intro-panel p,
.academy-programme-card p,
.academy-learning-item p,
.academy-programme-card li {
    color: #52647a;
}

.academy-enquiry {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 190, 255, 0.08), transparent 60%),
        #eaf2fb;
}

.academy-enquiry h2 {
    color: #172b45;
}

.academy-enquiry p {
    color: #52647a;
}

/* Contact page: clear, welcoming form surfaces and strong field contrast. */
.contact-page {
    background: #f4f7fb;
    color: #17263b;
}

.contact-hero {
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 190, 255, 0.10), transparent 55%),
        #edf3fa;
}

.contact-hero h1,
.contact-information h2,
.contact-form-wrapper h2 {
    color: #172b45;
}

.contact-hero p,
.contact-information > p,
.contact-info-card p {
    color: #52647a;
}

.contact-content {
    background: #f8fafd;
}

.contact-info-card,
.contact-form-wrapper {
    color: #17263b;
    background: #ffffff;
    border: 1px solid rgba(25, 55, 90, 0.13);
    box-shadow: 0 10px 28px rgba(20, 45, 75, 0.055);
}

.contact-info-card h3 {
    color: #172b45;
}

.contact-form label {
    color: #263b55;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    color: #17263b;
    background: #f8fafd;
    border: 1px solid rgba(25, 55, 90, 0.20);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #718096;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #0878f9;
    outline-color: rgba(8, 120, 249, 0.22);
}

/* Public mobile menu: keep its dropdown readable on a light page. */
@media (max-width: 1000px) {
    .main-navigation {
        background: rgba(255, 255, 255, 0.99);
        border-bottom-color: rgba(25, 55, 90, 0.12);
        box-shadow: 0 12px 24px rgba(20, 45, 75, 0.08);
    }

    .nav-links a {
        color: #263b55;
    }
}

/* Motion accessibility remains in force; this theme adds no new animation. */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .service-card,
    .project-card,
    .marketplace-card,
    .business-area-card,
    .service-detail-card,
    .academy-programme-card,
    .contact-info-card {
        transition: none;
    }
}

/* End of AUconnection light-first theme layer. */

/* ======================================================================
   31. LIGHT THEME REFINEMENT
   Softer blue-grey surfaces reduce glare while retaining clear contrast.
   ====================================================================== */
:root {
    --navy: #eaf1f9;
    --navy-light: #e3edf8;
    --navy-card: #f8fbff;
    --navy-deep: #dce8f5;

    --silver: #435a75;
    --muted: #647b96;
    --text: #172d49;
    --text-muted: #4c6380;

    --border: rgba(24, 59, 99, 0.16);
    --border-glow: rgba(0, 145, 190, 0.38);
    --card-bg: #f8fbff;
    --border-color: rgba(24, 59, 99, 0.16);
}

/* A gentle blue-grey canvas instead of stark white or a fully dark page. */
body,
.services-section,
.about-page,
.services-page,
.projects-page,
.academy-page {
    background-color: #eaf1f9;
    color: #172d49;
}

.about-introduction,
.about-values,
.service-category-section,
.projects-introduction,
.featured-projects,
.academy-introduction,
.academy-learning {
    background-color: #f1f6fc;
}

.about-purpose,
.service-category-alt,
.projects-contact,
.academy-programmes,
.academy-enquiry,
.services-contact-section {
    background-color: #e5eef8;
}

/* Cards are slightly tinted, not stark white; keep headings and body copy dark. */
.service-card,
.project-card,
.marketplace-card,
.about-highlight,
.purpose-card,
.value-card,
.business-area-card,
.service-detail-card,
.commerce-highlight,
.academy-intro-panel,
.academy-programme-card,
.academy-learning-item,
.academy-advantage {
    background: #f8fbff;
    color: #172d49;
    border-color: rgba(24, 59, 99, 0.15);
}

.service-card h3,
.project-content h3,
.marketplace-content h3,
.about-content h2,
.purpose-card h2,
.about-values .section-heading h2,
.business-area-card h3,
.services-page .section-heading h2,
.service-detail-card h3,
.commerce-highlight-content h3,
.academy-page .section-heading h2,
.academy-advantages-heading h2,
.academy-intro-text h2 {
    color: #17395f;
}

.service-card p,
.project-content p,
.marketplace-content p,
.about-content p,
.purpose-card p,
.value-card p,
.business-area-card p,
.business-area-card li,
.services-page .section-heading p,
.service-detail-card p,
.commerce-highlight-content p,
.academy-page p {
    color: #4c6380;
}

.site-footer {
    background: #dfe9f5;
}

.footer-content h2,
.footer-content h3 {
    color: #17395f;
}

.footer-content p {
    color: #435a75;
}

/* Retain dark hero sections as deliberate brand contrast. */
.hero,
.services-hero,
.projects-hero,
.academy-hero {
    color: #ffffff;
}

/* ======================================================================
   32. MEDIUM BLUE PUBLIC THEME - REDUCE GLARE, PRESERVE CONTRAST
   ====================================================================== */
:root {
    --navy: #e3edf8;
    --navy-light: #dce8f5;
    --navy-card: #f1f6fc;
    --navy-deep: #d4e2f1;
    --silver: #435a75;
    --muted: #5c7390;
    --text: #183653;
    --text-muted: #536b86;
    --border: rgba(24, 59, 99, 0.18);
    --card-bg: #f1f6fc;
}
body,
.services-section,
.about-page,
.services-page,
.projects-page,
.academy-page {
    background-color: #e3edf8;
    color: #183653;
}
.service-card,
.project-card,
.marketplace-card,
.about-highlight,
.purpose-card,
.value-card,
.business-area-card,
.service-detail-card,
.commerce-highlight,
.academy-intro-panel,
.academy-programme-card,
.academy-learning-item,
.academy-advantage {
    background: #f1f6fc;
    color: #183653;
    border-color: #c6d7e9;
}
.service-card h3,
.project-content h3,
.marketplace-content h3,
.about-content h2,
.purpose-card h2,
.value-card h3,
.business-area-card h3,
.services-page .section-heading h2,
.service-detail-card h3,
.academy-page .section-heading h2 {
    color: #183653;
}
.service-card p,
.project-content p,
.marketplace-content p,
.about-content p,
.purpose-card p,
.value-card p,
.business-area-card p,
.service-detail-card p,
.academy-page p {
    color: #536b86;
}
.site-footer {
    background: #d4e2f1;
}

/* ======================================================================
   33. AUCONNECTION BRAND FOOTER - RESTORE DARK NAVY
   The footer is intentionally dark on every public/customer page.
   Text and links are explicitly light for accessible contrast.
   ====================================================================== */
.site-footer {
    color: #e7f0fb !important;
    background: #07182d !important;
    border-top: 1px solid rgba(0, 174, 220, 0.28) !important;
}

.site-footer .footer-content h2,
.site-footer .footer-content h3,
.site-footer .footer-content strong {
    color: #ffffff !important;
}

.site-footer .footer-content p,
.site-footer .footer-content li,
.site-footer .footer-content span,
.site-footer .footer-bottom {
    color: #c3d3e5 !important;
}

.site-footer .footer-content a {
    color: #c3d3e5 !important;
}

.site-footer .footer-content a:hover {
    color: #20c8ed !important;
}

.site-footer .footer-bottom {
    border-top-color: rgba(190, 215, 240, 0.18) !important;
}

/* Preserve footer contrast on small screens too. */
@media (max-width: 600px) {
    .site-footer {
        background: #07182d !important;
    }
}

/* ======================================================================
   34. PROJECT PAGE - FINAL READABILITY OVERRIDES
   The project page uses dedicated classes; these rules target them directly.
   Keep the medium blue-grey page and dark navy footer.
   ====================================================================== */

/* Project category labels above project names. */
.projects-page .project-category {
    color: #075fae !important;
    font-weight: 800 !important;
}

/* Preview captions such as "INTELLIGENT DIGITAL ASSISTANT". */
.projects-page .project-visual-caption {
    color: #17466f !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Preview symbols remain brand cyan, with enough contrast against the tint. */
.projects-page .project-visual-symbol {
    color: #007f9f !important;
    text-shadow: none !important;
}

/* Technology tags: dark navy text on a clearly visible blue-tinted pill. */
.projects-page .project-tags span {
    color: #17466f !important;
    -webkit-text-fill-color: #17466f !important;
    background: #d7e8f8 !important;
    border: 1px solid #a9c9e7 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* Project status labels: clear text for every state. */
.projects-page .project-status {
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

.projects-page .project-status.completed {
    color: #145a3a !important;
    background: #d9eee2 !important;
    border: 1px solid #9bcdb0 !important;
}

.projects-page .project-status.proposed {
    color: #79500b !important;
    background: #f9edcf !important;
    border: 1px solid #e6cf91 !important;
}

.projects-page .project-status.ongoing {
    color: #174d80 !important;
    background: #d8e9fb !important;
    border: 1px solid #a9c9ed !important;
}

/* Project card category, description and action links stay high contrast. */
.projects-page .project-content h3 {
    color: #183653 !important;
}

.projects-page .project-content p {
    color: #405b78 !important;
}

.projects-page .project-link {
    color: #075fae !important;
    font-weight: 800 !important;
}

.projects-page .project-link:hover {
    color: #003f78 !important;
}

/* Project filters: readable inactive labels as well as active filter. */
.projects-page .project-filter {
    color: #294866 !important;
    background: #f1f6fc !important;
    border-color: #bfd1e4 !important;
    opacity: 1 !important;
}

.projects-page .project-filter.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #0878f9 !important;
    border-color: #0878f9 !important;
}

/* Do not let a generic theme rule turn the branded footer light. */
.site-footer {
    color: #e7f0fb !important;
    background: #07182d !important;
}
.site-footer .footer-content h2,
.site-footer .footer-content h3,
.site-footer .footer-content strong {
    color: #ffffff !important;
}
.site-footer .footer-content p,
.site-footer .footer-content a,
.site-footer .footer-bottom {
    color: #c3d3e5 !important;
}
.site-footer .footer-content a:hover {
    color: #20c8ed !important;
}