/* ==========================================================================
   KALAHARI ASSOCIATES
   ENTERPRISE ICT WEBSITE — MASTER STYLESHEET
   ==========================================================================
   Design Language
   --------------------------------------------------------------------------
   • Premium enterprise ICT
   • Executive / professional visual hierarchy
   • Narrow / sleek proportions
   • Light technology interface
   • Blue / cyan brand accents
   • Manrope primary typography
   • Eriga reserved for brand typography
   • Responsive-first component structure

   HTML Integration
   --------------------------------------------------------------------------
   The stylesheet is intentionally organised around the structural classes
   used by the PHP/HTML components. This makes the relationship between
   markup and styling easier to maintain as the website evolves.

   Primary Components
   --------------------------------------------------------------------------
   • Global foundation
   • Site header / navigation
   • Services dropdown
   • Hero background system
   • Hero content
   • Hero CTA
   • Hero credibility metrics
   • Hero company branding
   • Hero expertise / solution panel
   • Typewriter engine
   • Services
   • Service detail
   • About
   • Contact
   • Footer
   • Reveal animation
   • Responsive breakpoints

   Typography
   --------------------------------------------------------------------------
   Primary: Manrope
   Secondary: Inter / Segoe UI
   Brand fallback: Eriga
========================================================================== */


/* ==========================================================================
   01. CUSTOM FONT — ERIGA
   ==========================================================================
   Eriga is intentionally restricted to brand-oriented typography.
   The primary website interface remains Manrope for consistency and
   enterprise readability.
========================================================================== */




/* ==========================================================================
   02. DESIGN TOKENS
   ==========================================================================
   Centralised design variables allow the visual identity to be adjusted
   without having to search through individual components.
========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Brand colours
    ---------------------------------------------------------------------- */

    --primary: #0066CC;
    --primary-dark: #004A99;

    --secondary: #00A6D6;
    --accent: #38BDF8;


    /* ----------------------------------------------------------------------
       Dark interface surfaces
    ---------------------------------------------------------------------- */

    --dark: #0F172A;
    --dark-soft: #1E293B;


    /* ----------------------------------------------------------------------
       Typography colours
    ---------------------------------------------------------------------- */

    --text: #334155;
    --text-light: #64748B;
    --text-muted: #94A3B8;


    /* ----------------------------------------------------------------------
       Page surfaces
    ---------------------------------------------------------------------- */

    --background: #F8FBFF;
    --background-soft: #F1F6FB;
    --surface: #FFFFFF;


    /* ----------------------------------------------------------------------
       Borders
    ---------------------------------------------------------------------- */

    --border: #DCE7F3;
    --border-soft: rgba(220, 231, 243, 0.75);


    /* ----------------------------------------------------------------------
       Status
    ---------------------------------------------------------------------- */

    --success: #10B981;


    /* ----------------------------------------------------------------------
       Radius system
    ---------------------------------------------------------------------- */

    --radius: 16px;
    --radius-lg: 20px;


    /* ----------------------------------------------------------------------
       Shadow system
    ---------------------------------------------------------------------- */

    --shadow:
        0 15px 40px rgba(15, 23, 42, 0.07);

    --shadow-hover:
        0 25px 55px rgba(15, 23, 42, 0.12);


    /* ----------------------------------------------------------------------
       Motion
    ---------------------------------------------------------------------- */

    --transition:
        all 0.3s ease;

    --ease-premium:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   03. GLOBAL RESET
   ==========================================================================
   Establishes predictable rendering across browsers and prevents browser
   defaults from interfering with the design system.
========================================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--background);

    color: var(--text);

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


main {
    flex: 1;
}


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


a {
    color: inherit;
}


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


button {
    cursor: pointer;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   04. GLOBAL CONTAINERS
========================================================================== */

.container {

    width: min(1100px, 90%);

    margin: 0 auto;
}


.narrow-container {

    width: min(900px, 90%);

    margin: 0 auto;
}


/* ==========================================================================
   05. GLOBAL TYPOGRAPHY
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--dark);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.025em;
}


p {
    margin: 0;
}


strong {
    font-weight: 800;
}


/* ==========================================================================
   06. SITE HEADER
   ==========================================================================
   Dark executive navigation surface. The subtle cyan line at the bottom
   acts as a visual technology signature without becoming distracting.
========================================================================== */

.site-header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background:
        rgba(7, 17, 31, 0.96);

    border-bottom:
        1px solid
        rgba(56, 189, 248, 0.10);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.18);

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


.site-header::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 180px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56, 189, 248, 0.65),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================================
   07. NAVBAR CONTAINER
========================================================================== */

.navbar-container {

    width: min(1200px, 92%);

    min-height: 72px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ==========================================================================
   08. PRIMARY LOGO
   ==========================================================================
   Supports both the image-based logo and the optional Eriga text fallback.
========================================================================== */

.logo {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: auto;

    min-height: 58px;

    padding:
        5px
        10px;

    text-decoration: none;

    isolation: isolate;

    transition:
        transform 0.45s var(--ease-premium);
}


.logo::before {

    content: "";

    position: absolute;

    inset: 5px 4px;

    z-index: -2;

    border-radius: 14px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(56, 189, 248, 0.13),
            transparent 68%
        );

    filter: blur(12px);

    opacity: 0;

    transform: scale(0.82);

    transition:
        opacity 0.45s ease,
        transform 0.55s var(--ease-premium);
}


.logo::after {

    content: "";

    position: absolute;

    inset: 2px 0;

    z-index: -1;

    border:
        1px solid
        rgba(125, 211, 252, 0.08);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.005)
        );

    opacity: 0;

    transition:
        opacity 0.35s ease,
        border-color 0.35s ease;
}


.logo img {

    position: relative;

    z-index: 2;

    display: block;

    width: auto;

    height: 48px;

    max-width: 180px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 12px
            rgba(0, 0, 0, 0.18)
        );

    transition:
        transform 0.5s var(--ease-premium),
        opacity 0.35s ease,
        filter 0.5s var(--ease-premium);
}


.logo:hover {
    transform: translateY(-1px);
}


.logo:hover::before {

    opacity: 1;

    transform: scale(1);
}


.logo:hover::after {

    opacity: 1;

    border-color:
        rgba(56, 189, 248, 0.14);
}


.logo:hover img {

    transform:
        scale(1.035)
        translateY(-1px);

    filter:
        drop-shadow(
            0 8px 20px
            rgba(0, 166, 214, 0.20)
        );
}


.logo:focus-visible {

    outline: none;

    border-radius: 14px;

    box-shadow:
        0 0 0 2px
        rgba(56, 189, 248, 0.20),

        0 0 0 5px
        rgba(56, 189, 248, 0.06);
}


/* ==========================================================================
   09. TEXT LOGO FALLBACK
========================================================================== */

.logo-name {

    position: relative;

    display: inline-block;

    color: #ffffff;

    font-family:
        "Eriga",
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.035em;
}


.logo-name::after {

    content: "";

    position: absolute;

    left: 1px;
    bottom: -7px;

    width: 34px;
    height: 2px;

    border-radius: 999px;

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

    transform: scaleX(0.55);

    transform-origin: left center;

    opacity: 0.75;

    transition:
        width 0.4s var(--ease-premium),
        transform 0.4s var(--ease-premium),
        opacity 0.3s ease;
}


.logo:hover .logo-name::after {

    width: 62px;

    transform: scaleX(1);

    opacity: 1;
}


.logo-dot {

    position: relative;

    display: inline-block;

    margin-left: 2px;

    color: var(--accent);

    font-family:
        "Eriga",
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1;

    text-shadow:
        0 0 18px
        rgba(56, 189, 248, 0.20);

    transition:
        color 0.3s ease,
        text-shadow 0.4s ease,
        transform 0.35s ease;
}


.logo:hover .logo-dot {

    color: #7DD3FC;

    transform: translateY(-1px);

    text-shadow:
        0 0 8px
        rgba(56, 189, 248, 0.45),

        0 0 22px
        rgba(56, 189, 248, 0.22);
}


/* ==========================================================================
   10. MAIN NAVIGATION
========================================================================== */

.main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


.main-nav > a,
.main-nav .dropdown-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding:
        0
        18px;

    color:
        rgba(226, 232, 240, 0.78);

    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: 0.01em;

    text-decoration: none;

    border-radius: 8px;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}


.main-nav > a:hover,
.main-nav .dropdown-link:hover {

    color: #ffffff;

    background:
        rgba(56, 189, 248, 0.08);
}


.main-nav > a::after,
.main-nav .dropdown-link::after {

    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 3px;

    height: 2px;

    border-radius: 10px;

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

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.25s ease;
}


.main-nav > a:hover::after,
.main-nav .dropdown-link:hover::after {

    transform: scaleX(1);
}


/* ==========================================================================
   11. SERVICES DROPDOWN
========================================================================== */

.nav-dropdown {
    position: relative;
}


.dropdown-arrow {

    width: 7px;
    height: 7px;

    border-right:
        1.5px solid
        currentColor;

    border-bottom:
        1.5px solid
        currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform 0.25s ease;
}


.nav-dropdown:hover .dropdown-arrow {

    transform:
        rotate(225deg)
        translateY(-1px);
}


.dropdown-menu {

    position: absolute;

    top: calc(100% + 14px);
    left: 50%;

    width: 330px;

    padding: 8px;

    opacity: 0;

    visibility: hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(8, 29, 51, 0.99),
            rgba(4, 18, 33, 0.99)
        );

    border:
        1px solid
        rgba(125, 211, 252, 0.16);

    border-radius: 12px;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.40),

        inset 0 1px 0
        rgba(255, 255, 255, 0.05);

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

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


.dropdown-menu::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 18px;
    right: 18px;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent),
            transparent
        );
}


.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

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


.dropdown-inner {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.dropdown-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 50px;

    padding:
        0
        14px;

    color:
        rgba(226, 232, 240, 0.82);

    font-size: 0.79rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: 7px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        padding 0.25s ease;
}


.dropdown-item:hover {

    padding-left: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(0, 102, 204, 0.18),
            rgba(56, 189, 248, 0.06)
        );
}


.dropdown-item-title {
    line-height: 1.4;
}


.dropdown-item-arrow {

    flex-shrink: 0;

    color: var(--accent);

    font-size: 1rem;

    opacity: 0;

    transform: translateX(-6px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.dropdown-item:hover .dropdown-item-arrow {

    opacity: 1;

    transform: translateX(0);
}


/* ==========================================================================
   12. HERO — CORE STRUCTURE
   ==========================================================================
   Matches the supplied hero HTML:

       .hero
         ├── .hero-banner-image
         ├── .hero-overlay
         ├── .hero-background
         ├── .hero-glow
         └── .hero-container
               ├── .hero-content
               └── .hero-right
                     ├── .hero-branding
                     └── .hero-panel
========================================================================== */

.hero {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EAF4FF
        );
}


/* ==========================================================================
   13. HERO BACKGROUND IMAGE
========================================================================== */

.hero-banner-image {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/hero-banner.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.18;

    transform: scale(1.03);

    animation:
        heroImageMotion
        16s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


@keyframes heroImageMotion {

    from {

        transform:
            scale(1.03)
            translateX(0);
    }

    to {

        transform:
            scale(1.08)
            translateX(-12px);
    }
}


/* ==========================================================================
   14. HERO BACKGROUND LIGHTING
========================================================================== */

.hero-background {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 166, 214, 0.20),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(0, 102, 204, 0.15),
            transparent 40%
        );

    pointer-events: none;
}


/* ==========================================================================
   15. HERO IMAGE OVERLAY
   ==========================================================================
   Protects text readability while allowing the infrastructure imagery
   to remain visible behind the interface.
========================================================================== */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(248, 251, 255, 0.98),
            rgba(248, 251, 255, 0.84),
            rgba(248, 251, 255, 0.45)
        );

    pointer-events: none;
}


/* ==========================================================================
   16. HERO AMBIENT GLOW
========================================================================== */

.hero-glow {

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.14),
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;

    animation:
        heroGlowMotion
        12s
        ease-in-out
        infinite
        alternate;
}


.hero-glow-one {

    top: 8%;
    right: 5%;
}


.hero-glow-two {

    bottom: 5%;
    left: 4%;

    animation-delay: -4s;
}


@keyframes heroGlowMotion {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(0.95);
    }

    to {
        transform:
            translate3d(20px, -15px, 0)
            scale(1.05);
    }
}


/* ==========================================================================
   17. HERO CONTAINER
========================================================================== */

.hero-container {

    position: relative;

    z-index: 2;

    width: min(1100px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: 60px;

    align-items: center;
}


/* ==========================================================================
   18. HERO CONTENT — LEFT COLUMN
========================================================================== */

.hero-content {
    position: relative;
    z-index: 3;
}


.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    color: var(--primary);

    font-size: px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.hero-eyebrow::before {

    content: "";

    width: 24px;
    height: 2px;

    margin-right: 10px;

    border-radius: 10px;

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


.hero h1 {

    margin-bottom: 25px;

    color: var(--dark);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.2rem
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.055em;
}


.hero h1 span {

    display: block;

    color: var(--primary);
}


.hero-description {

    max-width: 620px;

    margin-bottom: 32px;

    color: var(--text);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;
}


/* ==========================================================================
   19. HERO ACTIONS
========================================================================== */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        0
        25px;

    border-radius: 9px;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    text-decoration: none;

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


.btn-primary {

    color: #ffffff;

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

    box-shadow:
        0 8px 22px
        rgba(0, 102, 204, 0.14);
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0, 102, 204, 0.25);
}


.btn-arrow {

    position: relative;

    width: 16px;
    height: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


.btn-arrow::before {

    content: "→";

    font-size: 15px;

    transition:
        transform 0.3s var(--ease-premium);
}


.btn-primary:hover .btn-arrow::before {

    transform:
        translateX(4px);
}


.btn-secondary {

    color: var(--primary);

    background: #ffffff;

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


.btn-secondary:hover {

    transform:
        translateY(-3px);

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


/* ==========================================================================
   20. HERO CREDIBILITY METRICS
========================================================================== */

.hero-metrics {

    display: flex;

    gap: 35px;

    margin-top: 45px;
}


.metric {

    padding-left: 15px;

    border-left:
        3px solid
        var(--secondary);
}


.metric strong {

    display: block;

    color: var(--dark);

    font-size: 28px;

    font-weight: 800;

    line-height: 1.2;
}


.metric span {

    display: block;

    margin-top: 4px;

    color: var(--text-light);

    font-size: 16px;

    font-weight: 600;
}


/* ==========================================================================
   21. HERO RIGHT COLUMN
   ==========================================================================
   The right column deliberately stacks branding ABOVE the expertise panel.
   This corresponds directly with the supplied HTML structure.
========================================================================== */

.hero-right {

    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 24px;
}

/* ==========================================================================
   AREAS OF EXPERTISE — TITLE ONLY
========================================================================== */

.panel-title {
    margin: 0;

    color: var(--dark);

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.02em;

    text-transform: uppercase;
}




/* ==========================================================================
   30. EXPERTISE PANEL DIVIDER
========================================================================== */

.panel-divider {

    width: 100%;

    height: 0px;

    margin-bottom: 2px;

    background:
        linear-gradient(
            90deg,
            var(--border),
            rgba(220, 231, 243, 0.30),
            transparent
        );
}


/* ==========================================================================
   31. SOLUTION ITEMS
========================================================================== */

.solution {

    position: relative;

    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        13px
        0;

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

    color: var(--text);

    font-size: 16px;

    font-weight: 600;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.solution:last-of-type {

    border-bottom: none;
}


.solution:hover {

    color: var(--primary);

    transform:
        translateX(4px);
}


/* Solution indicator */
.dot {

    position: relative;

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 4px
        rgba(0, 166, 214, 0.08);
}


.solution:hover .dot {

    box-shadow:
        0 0 0 5px
        rgba(0, 166, 214, 0.12),

        0 0 14px
        rgba(0, 166, 214, 0.20);
}


.solution-text {

    display: inline;

    min-width: 0;
}


/* ==========================================================================
   32. TYPEWRITER CURSOR
========================================================================== */

.solution-cursor {

    display: inline-block;

    margin-left: 3px;

    color: var(--primary);

    font-weight: 800;

    opacity: 0;
}


.solution-cursor.active {

    opacity: 1;

    animation:
        typewriterCursor
        0.65s
        steps(1)
        infinite;
}


.solution-cursor.done {

    opacity: 0;

    animation: none;
}


@keyframes typewriterCursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}


/* ==========================================================================
   33. EXPERTISE PANEL CTA
========================================================================== */

/* ==========================================================================
   SERVICES CTA
   Centered / Seamless / Premium
   ========================================================================== */

.panel-services-link {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin: 18px auto 0;

    padding: 7px 2px;

    gap: 8px;

    color: var(--dark);

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.015em;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}


/* --------------------------------------------------------------------------
   SUBTLE ACCENT LINE
   -------------------------------------------------------------------------- */

.panel-services-link::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 2px;

    width: 0;

    height: 1px;

    margin: auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            transparent
        );

    transition:
        width 0.3s ease;
}


/* --------------------------------------------------------------------------
   CTA TEXT
   -------------------------------------------------------------------------- */

.panel-services-text {

    display: inline-block;

    color: inherit;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


/* --------------------------------------------------------------------------
   ARROW
   -------------------------------------------------------------------------- */

.panel-services-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 14px;

    font-weight: 500;

    line-height: 1;

    transform: translateX(0);

    transition:
        transform 0.3s var(--ease-premium),
        color 0.25s ease;
}


/* --------------------------------------------------------------------------
   HOVER
   -------------------------------------------------------------------------- */

.panel-services-link:hover {

    color: var(--primary);

    gap: 11px;
}


.panel-services-link:hover::after {

    width: 100%;
}


.panel-services-link:hover
.panel-services-arrow {

    transform: translateX(3px);

}


/* --------------------------------------------------------------------------
   KEYBOARD ACCESSIBILITY
   -------------------------------------------------------------------------- */

.panel-services-link:focus-visible {

    outline: none;

    color: var(--primary);

    border-radius: 3px;

    box-shadow:
        0 0 0 3px
        rgba(0, 102, 204, 0.08);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .panel-services-link {

        margin-top: 16px;

        font-size: 11px;

    }

}


/* ==========================================================================
   34. HERO SCROLL INDICATOR
========================================================================== */

.hero-scroll {

    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transform:
        translateX(-50%);

    color:
        rgba(71, 85, 105, 0.70);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    text-decoration: none;

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


.hero-scroll:hover {

    color: var(--primary);

    transform:
        translateX(-50%)
        translateY(-3px);
}


.scroll-line {

    width: 40px;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            rgba(56, 189, 248, 0.15)
        );

    transform-origin: left center;

    animation:
        scrollPulse
        2s
        ease-in-out
        infinite;

    transition:
        width 0.3s ease;
}


.hero-scroll:hover .scroll-line {
    width: 55px;
}


@keyframes scrollPulse {

    0%,
    100% {

        opacity: 0.45;

        transform:
            scaleX(0.8);
    }

    50% {

        opacity: 1;

        transform:
            scaleX(1);
    }
}


/* ==========================================================================
   35. GENERAL SECTIONS
========================================================================== */

section {
    padding: 80px 0;
}


section h2 {
    color: var(--dark);
}


/* ==========================================================================
   36. SERVICES SECTION
   KALAHARI ASSOCIATES — LIGHT BLUE BODY THEME
========================================================================== */

.services-section {

    position: relative;

    background:
        linear-gradient(
            180deg,
            #eef8ff 0%,
            #f4faff 50%,
            #eef8ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   SUBTLE TECHNOLOGY ATMOSPHERE
========================================================================== */

.services-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(0, 150, 255, 0.075),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(0, 190, 255, 0.065),
            transparent 32%
        );
}


/* Very subtle technology grid */

.services-section::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.25;

    background-image:

        linear-gradient(
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* ==========================================================================
   CONTAINER
========================================================================== */

.services-section .container {

    position: relative;

    z-index: 2;
}


/* ==========================================================================
   SERVICES TITLE
========================================================================== */

.services-section h2 {

    margin-bottom: 45px;

    text-align: center;

    color: var(--dark);

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

    letter-spacing: -0.04em;
}


/* Small brand accent */

.services-section h2::after {

    content: "";

    display: block;

    width: 50px;
    height: 3px;

    margin:
        16px auto 0;

    background:
        linear-gradient(
            90deg,
            #0077b6,
            #00a8e8
        );

    border-radius: 10px;
}


/* ==========================================================================
   SERVICE GRID
========================================================================== */

.cards {

    width: 100%;

    display: grid;

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

    gap: 22px;
}


.service-link {

    display: flex;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================================
   SERVICE CARD
========================================================================== */

.card {

    position: relative;

    width: 100%;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    padding: 28px;

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

    border:
        1px solid
        rgba(0, 119, 190, 0.10);

    border-radius:
        var(--radius);

    box-shadow:
        0 14px 38px
        rgba(0, 80, 130, 0.06);

    backdrop-filter:
        blur(8px);

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

    overflow: hidden;

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


/* Subtle cyan line across card */

.card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 150, 220, 0.25),
            transparent
        );
}


/* Soft corner glow */

.card::after {

    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 190px;
    height: 190px;

    background:
        radial-gradient(
            circle,
            rgba(0, 168, 232, 0.07),
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================================================
   CARD HOVER
========================================================================== */

.card:hover {

    transform:
        translateY(-6px);

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

    border-color:
        rgba(0, 119, 190, 0.22);

    box-shadow:
        var(--shadow-hover);
}


/* ==========================================================================
   SERVICE ICON
========================================================================== */

.card .service-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    background:
        #EAF4FF;

    border:
        1px solid
        rgba(0, 119, 190, 0.08);

    border-radius: 12px;

    color: var(--primary);

    font-size: 30px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.card:hover .service-icon {

    transform:
        translateY(-2px);

    background:
        #E2F2FF;
}


/* ==========================================================================
   CARD TITLE
========================================================================== */

.card h3 {

    margin-bottom: 10px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 800;

    line-height: 1.3;
}


/* ==========================================================================
   CARD DESCRIPTION
========================================================================== */

.card p {

    flex-grow: 1;

    margin: 0;

    color: var(--text-light);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.7;
}


/* ==========================================================================
   LEARN MORE
========================================================================== */

.learn-more {

    display: inline-flex;

    align-items: center;

    margin-top: 20px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease;
}


.learn-more:hover {

    transform:
        translateX(4px);
}


/* ==========================================================================
   FEATURED SERVICE
========================================================================== */

.featured-service {

    border:
        1px solid
        rgba(0, 119, 190, 0.30);

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

    box-shadow:
        0 15px 40px
        rgba(0, 100, 160, 0.08);
}


/* ==========================================================================
   37. SERVICE DETAIL
========================================================================== */

.service-detail-section {

    position: relative;

    min-height: 70vh;

    padding:
        80px 0
        110px;

    /*
     * Continues directly from the Services background.
     */

    background:
        linear-gradient(
            180deg,
            #eef8ff 0%,
            #f4faff 50%,
            #eef8ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DETAIL TECHNOLOGY ATMOSPHERE
========================================================================== */

.service-detail-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(0, 150, 255, 0.07),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(0, 190, 255, 0.06),
            transparent 32%
        );
}


.service-detail-section::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.20;

    background-image:

        linear-gradient(
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


/* ==========================================================================
   DETAIL CONTAINER
========================================================================== */

.service-detail-section .container {

    position: relative;

    z-index: 2;
}


/* ==========================================================================
   SERVICE DETAIL CARD
========================================================================== */

.service-detail-card {

    position: relative;

    width:
        min(
            850px,
            100%
        );

    margin: 0 auto;

    padding: 45px;

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

    border:
        1px solid
        rgba(0, 119, 190, 0.10);

    border-radius:
        20px;

    box-shadow:
        0 18px 48px
        rgba(0, 80, 130, 0.065);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* ==========================================================================
   DETAIL ICON
========================================================================== */

.service-detail-card .service-icon {

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    background:
        #EAF4FF;

    border:
        1px solid
        rgba(0, 119, 190, 0.08);

    border-radius: 15px;

    color: var(--primary);

    font-size: 32px;
}


/* ==========================================================================
   DETAIL TITLE
========================================================================== */

.service-detail-card h1 {

    margin-bottom: 18px;

    color: var(--dark);

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

    line-height: 1.15;

    letter-spacing: -0.035em;
}


/* ==========================================================================
   DETAIL INTRODUCTION
========================================================================== */

.service-detail-card > p {

    margin-bottom: 28px;

    color: var(--text-light);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;
}


/* ==========================================================================
   SERVICE DETAILS
========================================================================== */

.service-details {

    margin-bottom: 30px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;
}


.service-details p {

    margin-bottom: 15px;
}


.service-details p:last-child {

    margin-bottom: 0;
}


/* ==========================================================================
   DETAIL HEADING
========================================================================== */

.service-detail-card h3 {

    margin-bottom: 18px;

    color: var(--dark);

    font-size: 20px;

    font-weight: 800;
}


/* ==========================================================================
   DETAIL FEATURES
========================================================================== */

.service-detail-card ul {

    display: grid;

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

    gap: 12px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.service-detail-card ul li {

    position: relative;

    padding:
        13px
        15px
        13px
        38px;

    background:
        rgba(244, 248, 252, 0.78);

    border:
        1px solid
        rgba(0, 119, 190, 0.07);

    border-radius: 10px;

    color: var(--text);

    font-size: 16px;

    font-weight: 600;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.service-detail-card ul li:hover {

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

    border-color:
        rgba(0, 119, 190, 0.16);

    transform:
        translateY(-1px);
}


/* ==========================================================================
   FEATURE CHECK
========================================================================== */

.service-detail-card ul li::before {

    content: "✓";

    position: absolute;

    left: 14px;
    top: 50%;

    width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #EAF4FF;

    border-radius: 50%;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    transform:
        translateY(-50%);
}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width: 900px) {

    .cards {

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

}


@media (max-width: 768px) {

    .services-section {

        padding:
            70px 0
            80px;
    }


    .cards {

        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .card {

        min-height: 270px;

        padding: 25px;
    }


    .service-detail-section {

        padding:
            65px 0
            80px;
    }


    .service-detail-card {

        padding: 35px 25px;

        border-radius: 16px;
    }


    .service-detail-card ul {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 480px) {

    .services-section {

        padding:
            55px 0
            65px;
    }


    .services-section h2 {

        margin-bottom: 35px;
    }


    .card {

        min-height: 250px;

        padding: 22px;
    }


    .service-detail-section {

        padding:
            50px 0
            65px;
    }


    .service-detail-card {

        padding: 28px 20px;

        border-radius: 14px;
    }


    .service-detail-card .service-icon {

        width: 58px;
        height: 58px;

        font-size: 28px;
    }


    .service-detail-card h1 {

        font-size: 2rem;
    }

}


/* ==========================================================================
   38. ABOUT PAGE
   KALAHARI ASSOCIATES — LIGHT BLUE BODY THEME
========================================================================== */

.about-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        90px
        0
        100px;

    /*
     * IMPORTANT:
     * Allow the website.jpg background from index.php
     * to remain visible.
     */
    background: transparent !important;

    overflow: hidden;
}


/* ==========================================================================
   BACKGROUND TECHNOLOGY GLOW
========================================================================== */

.about-page::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(0, 150, 255, 0.075),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 25%,
            rgba(0, 190, 255, 0.065),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(0, 119, 190, 0.045),
            transparent 35%
        );
}


/* ==========================================================================
   SUBTLE TECHNOLOGY GRID
========================================================================== */

.about-page::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:

        linear-gradient(
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 12%,
            black 88%,
            transparent
        );
}


/* ==========================================================================
   ABOUT CONTAINER
========================================================================== */

.about-page .container {

    position: relative;

    z-index: 2;

    width:
        min(
            980px,
            90%
        );

    margin:
        0 auto;
}


/* ==========================================================================
   39. ABOUT HEADER
========================================================================== */

.about-header {

    width: 100%;

    max-width: 850px;

    margin:
        0
        auto
        65px;

    text-align: center;
}


/* ==========================================================================
   ABOUT BADGE
========================================================================== */

.about-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        8px
        16px;

    margin-bottom: 18px;

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

    border:
        1px solid
        rgba(0, 119, 190, 0.12);

    border-radius:
        50px;

    color:
        var(--primary);

    font-size: 16px;

    font-weight: 800;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 25px
        rgba(0, 80, 130, 0.05);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   ABOUT TITLE
========================================================================== */

.about-header h1 {

    margin:
        0
        0
        25px;

    color:
        var(--dark);

    font-size:
        clamp(
            2.3rem,
            5vw,
            3.7rem
        );

    font-weight: 800;

    line-height:
        1.1;

    letter-spacing:
        -0.055em;
}


/* Cyan accent below title */

.about-header h1::after {

    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin:
        18px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            #0077b6,
            #00a8e8
        );

    border-radius:
        10px;
}


/* ==========================================================================
   41. ABOUT JOURNEY — LIGHT BLUE ENTERPRISE DESIGN
   ==========================================================================
   Design direction:
   --------------------------------------------------------------------------
   • Light blue / white enterprise interface
   • Minimal glass effect
   • Refined cyan-blue accents
   • Compact right-side company branding
   • Soft depth instead of heavy shadows
   • Subtle technology-inspired motion
========================================================================== */


/* ==========================================================================
   JOURNEY CONTAINER
========================================================================== */

/* ==========================================================================
   ABOUT JOURNEY — COMPACT EXECUTIVE WIDTH
========================================================================== */

.journey-steps {

    width:
        100%;

    max-width:
        820px;

    margin:
        34px auto 0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


/* ==========================================================================
   COMPACT JOURNEY CARD
========================================================================== */

.step-card {

    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    column-gap:
        18px;

    width:
        100%;

    padding:
        20px 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 250, 255, 0.92)
        );

    border:
        1px solid
        rgba(14, 165, 233, 0.12);

    border-radius:
        16px;

    box-shadow:
        0 10px 28px
        rgba(14, 116, 144, 0.055);

    backdrop-filter:
        blur(8px);

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

    overflow:
        hidden;

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


/* ==========================================================================
   LEFT ACCENT
========================================================================== */

.step-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        17px;

    bottom:
        17px;

    width:
        3px;

    border-radius:
        0 6px 6px 0;

    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #0ea5e9
        );
}


/* ==========================================================================
   NUMBER
========================================================================== */

.step-number {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        #e5f5ff;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #0ea5e9,
            #38bdf8
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 5px 14px
        rgba(14, 165, 233, 0.14);
}


/* ==========================================================================
   CONTENT
========================================================================== */

.step-content {

    min-width:
        0;

    padding:
        0;
}


/* ==========================================================================
   TITLE
========================================================================== */

.step-content h2 {

    margin:
        0 0 5px;

    color:
        #0f3b57;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.3;
}


/* ==========================================================================
   DESCRIPTION
========================================================================== */

.step-description {

    color:
        #527083;

    font-size:
        12.5px;

    font-weight:
        500;

    line-height:
        1.65;
}


/* ==========================================================================
   RIGHT LOGO AREA
========================================================================== */

.step-branding {

    position:
        relative;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding-left:
        14px;

    border-left:
        1px solid
        rgba(14, 165, 233, 0.11);
}


/* ==========================================================================
   LOGO
========================================================================== */

.step-logo {

    width:
        48px;

    max-height:
        32px;

    object-fit:
        contain;

    opacity:
        0.78;

    animation:
        aboutLogoFloat 5s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* ==========================================================================
   HOVER
========================================================================== */

.step-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(14, 165, 233, 0.20);

    box-shadow:
        0 14px 34px
        rgba(14, 116, 144, 0.075);
}


.step-card:hover .step-logo {

    opacity:
        1;

    transform:
        scale(1.04);
}

/* ==========================================================================
   STEP NUMBER
========================================================================== */

.step-number {

    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-left:
        3px;

    border:
        3px solid
        #e8f6ff;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #0ea5e9,
            #38bdf8
        );

    color:
        #ffffff;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    box-shadow:
        0 7px 18px
        rgba(14, 165, 233, 0.16);

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


.step-card:hover .step-number {

    transform:
        scale(1.04);

    box-shadow:
        0 9px 22px
        rgba(14, 165, 233, 0.22);
}


/* ==========================================================================
   STEP CONTENT
========================================================================== */

.step-content {

    min-width:
        0;

    padding:
        2px 4px 2px 0;
}


/* ==========================================================================
   STEP TITLE
========================================================================== */

.step-content h2 {

    margin:
        0 0 8px;

    color:
        #0f3b57;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;
}


/* ==========================================================================
   STEP DESCRIPTION
========================================================================== */

.step-description {

    color:
        #527083;

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.75;
}


/* ==========================================================================
   RIGHT-SIDE BRANDING
   --------------------------------------------------------------------------
   Small, clean and deliberately secondary to the content.
========================================================================== */

.step-branding {

    position:
        relative;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding-left:
        16px;

    border-left:
        1px solid
        rgba(14, 165, 233, 0.12);

    isolation:
        isolate;
}


/* ==========================================================================
   BRANDING ATMOSPHERIC GLOW
========================================================================== */

.step-branding::before {

    content:
        "";

    position:
        absolute;

    width:
        54px;

    height:
        54px;

    top:
        50%;

    left:
        50%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.16),
            rgba(56, 189, 248, 0.05) 45%,
            transparent 72%
        );

    filter:
        blur(7px);

    opacity:
        0.65;

    z-index:
        -1;

    animation:
        aboutLogoGlow 5s ease-in-out infinite;
}


/* ==========================================================================
   SUBTLE TECH RING
========================================================================== */

.step-branding::after {

    content:
        "";

    position:
        absolute;

    width:
        50px;

    height:
        50px;

    top:
        50%;

    left:
        50%;

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

    border:
        1px solid
        rgba(56, 189, 248, 0.08);

    border-radius:
        50%;

    opacity:
        0.55;

    z-index:
        -1;

    animation:
        aboutLogoRing 10s linear infinite;
}


/* ==========================================================================
   COMPANY LOGO
========================================================================== */

.step-logo {

    display:
        block;

    width:
        60px;

    max-height:
        40px;

    object-fit:
        contain;

    opacity:
        0.78;

    filter:
        drop-shadow(
            0 5px 12px
            rgba(14, 116, 144, 0.07)
        );

    animation:
        aboutLogoFloat 5s ease-in-out infinite;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        filter 0.35s ease;
}


/* ==========================================================================
   LOGO HOVER
========================================================================== */

.step-card:hover .step-logo {

    opacity:
        1;

    transform:
        translateY(-2px)
        scale(1.035);

    filter:
        drop-shadow(
            0 8px 18px
            rgba(14, 165, 233, 0.12)
        );
}


/* ==========================================================================
   LOGO MOTION — AMBIENT GLOW
========================================================================== */

@keyframes aboutLogoGlow {

    0%,
    100% {

        opacity:
            0.42;

        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {

        opacity:
            0.72;

        transform:
            translate(-50%, -50%)
            scale(1.07);
    }
}


/* ==========================================================================
   LOGO MOTION — SLOW RING
========================================================================== */

@keyframes aboutLogoRing {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* ==========================================================================
   LOGO MOTION — FLOAT
========================================================================== */

@keyframes aboutLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-2px);
    }
}


/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 768px) {

    .journey-steps {

        max-width:
            680px;

        margin-top:
            32px;
    }


    .step-card {

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

        column-gap:
            17px;

        padding:
            22px;
    }


    .step-number {

        width:
            44px;

        height:
            44px;
    }


    .step-branding {

        height:
            56px;

        padding-left:
            12px;
    }


    .step-logo {

        width:
            52px;

        max-height:
            36px;
    }

}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 560px) {

    .journey-steps {

        gap:
            15px;
    }


    .journey-steps::before {

        left:
            24px;
    }


    .step-card {

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

        column-gap:
            15px;

        padding:
            20px 17px;

        border-radius:
            15px;
    }


    .step-number {

        width:
            42px;

        height:
            42px;

        margin-left:
            2px;
    }


    .step-content h2 {

        font-size:
            17px;
    }


    .step-description {

        font-size:
            12px;

        line-height:
            1.7;
    }


    .step-branding {

        grid-column:
            2;

        justify-content:
            flex-start;

        height:
            48px;

        margin-top:
            4px;

        padding:
            10px 0 0;

        border-left:
            0;

        border-top:
            1px solid
            rgba(14, 165, 233, 0.10);
    }


    .step-logo {

        width:
            56px;

        max-height:
            36px;
    }

}


/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================================== */

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

    .step-branding::before,
    .step-branding::after,
    .step-logo {

        animation:
            none;
    }


    .step-card,
    .step-number,
    .step-logo {

        transition:
            none;
    }

}

/* ==========================================================================
   42. CONTACT SECTION
   KALAHARI ASSOCIATES — LIGHT BLUE BODY THEME
========================================================================== */

.contact-section {

    position: relative;

    width: 100%;

    min-height: 70vh;

    padding:
        90px
        0
        100px;

    background:
        linear-gradient(
            180deg,
            #eef8ff 0%,
            #f4faff 50%,
            #eef8ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   TECHNOLOGY ATMOSPHERE
========================================================================== */

.contact-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 8% 18%,
            rgba(0, 150, 255, 0.075),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 22%,
            rgba(0, 190, 255, 0.065),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(0, 119, 190, 0.045),
            transparent 35%
        );
}


/* ==========================================================================
   SUBTLE TECHNOLOGY GRID
========================================================================== */

.contact-section::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:

        linear-gradient(
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 119, 190, 0.025) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 12%,
            black 88%,
            transparent
        );
}


/* ==========================================================================
   43. CONTACT SECTION HEADER
========================================================================== */

.section-header {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 720px;

    margin:
        0
        auto
        50px;

    text-align:
        center;
}


/* ==========================================================================
   CONTACT TITLE
========================================================================== */

.section-header h2 {

    margin:
        0
        0
        18px;

    color:
        var(--dark);

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

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -0.04em;
}


/* Cyan title accent */

.section-header h2::after {

    content: "";

    display: block;

    width: 50px;
    height: 3px;

    margin:
        17px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            #0077b6,
            #00a8e8
        );

    border-radius:
        10px;
}


/* ==========================================================================
   CONTACT INTRO
========================================================================== */

.section-header p {

    margin:
        0;

    color: #ffffff;
    

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.8;
}


/* ==========================================================================
   44. CONTACT BOX
========================================================================== */

.contact-box {

    position: relative;

    z-index: 2;

    width:
        min(
            1050px,
            92%
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.1fr;

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

    border:
        1px solid
        rgba(0, 119, 190, 0.10);

    border-radius:
        18px;

    overflow:
        hidden;

    box-shadow:
        0 18px 50px
        rgba(0, 80, 130, 0.07);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* ==========================================================================
   CONTACT INFO
========================================================================== */

.contact-info {

    position: relative;

    padding:
        40px;

    background:
        rgba(255, 255, 255, 0.72);
}


/* Subtle separator */

.contact-info::after {

    content: "";

    position: absolute;

    top: 30px;
    bottom: 30px;

    right: 0;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 119, 190, 0.12),
            transparent
        );
}


/* ==========================================================================
   CONTACT INFO HEADING
========================================================================== */

.contact-info h3 {

    margin:
        0
        0
        28px;

    color:
        var(--dark);

    font-size:
        22px;

    font-weight:
        800;

    line-height:
        1.3;
}


/* Small cyan line */

.contact-info h3::after {

    content: "";

    display: block;

    width: 35px;
    height: 2px;

    margin-top:
        10px;

    background:
        linear-gradient(
            90deg,
            #0077b6,
            #00a8e8
        );

    border-radius:
        10px;
}


/* ==========================================================================
   CONTACT DETAILS
========================================================================== */

.contact-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


/* ==========================================================================
   CONTACT ITEM
========================================================================== */

.contact-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;
}


/* ==========================================================================
   CONTACT ICON
========================================================================== */

.contact-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #EAF4FF;

    border:
        1px solid
        rgba(0, 119, 190, 0.08);

    border-radius:
        10px;

    color:
        var(--primary);

    font-size:
        16px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.contact-item:hover .contact-icon {

    transform:
        translateY(-2px);

    background:
        #E0F2FF;
}


/* ==========================================================================
   CONTACT LABEL
========================================================================== */

.contact-item strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--text-light);

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* ==========================================================================
   CONTACT VALUE
========================================================================== */

.contact-item p {

    margin:
        0;

    color:
        var(--text);

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.6;
}


/* ==========================================================================
   CONTACT LINK
========================================================================== */

.contact-item a {

    color:
        var(--primary);

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.6;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.contact-item a:hover {

    color:
        #005f91;

    text-decoration:
        underline;
}


/* ==========================================================================
   45. SUPPORT BOX
========================================================================== */

.support-box {

    position: relative;

    margin-top:
        28px;

    padding:
        18px;

    background:
        rgba(240, 249, 255, 0.78);

    border:
        1px solid
        rgba(0, 168, 232, 0.16);

    border-radius:
        12px;

    overflow:
        hidden;
}


/* Accent */

.support-box::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #0077b6,
            #00a8e8
        );
}


.support-box strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        800;
}


.support-box span {

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.6;
}


/* ==========================================================================
   46. CONTACT MAP
========================================================================== */

.contact-map {

    position: relative;

    min-height:
        400px;

    background:
        #eaf4ff;

    overflow:
        hidden;
}


/* ==========================================================================
   MAP IFRAME
========================================================================== */

.contact-map iframe {

    width:
        100%;

    height:
        100%;

    min-height:
        400px;

    display:
        block;

    border:
        0;

    filter:
        saturate(0.85)
        contrast(0.96);
}


/* ==========================================================================
   DIRECTIONS BUTTON
========================================================================== */

.directions-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        25px;

    padding:
        11px
        18px;

    background:
        linear-gradient(
            135deg,
            #0077b6,
            #00a8e8
        );

    border-radius:
        9px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 8px 20px
        rgba(0, 119, 182, 0.16);

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


.directions-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(0, 119, 182, 0.20);
}


/* ==========================================================================
   47. TABLET
========================================================================== */

@media (max-width: 850px) {

    .contact-section {

        padding:
            75px
            0
            85px;
    }


    .contact-box {

        grid-template-columns:
            1fr;
    }


    .contact-info::after {

        display:
            none;
    }


    .contact-info {

        padding:
            35px;
    }


    .contact-map {

        min-height:
            350px;
    }


    .contact-map iframe {

        min-height:
            350px;
    }

}


/* ==========================================================================
   48. MOBILE
========================================================================== */

@media (max-width: 480px) {

    .contact-section {

        padding:
            55px
            0
            65px;
    }


    .section-header {

        margin-bottom:
            38px;
    }


    .section-header h2 {

        font-size:
            2rem;
    }


    .section-header p {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .contact-box {

        width:
            92%;

        border-radius:
            14px;
    }


    .contact-info {

        padding:
            28px
            22px;
    }


    .contact-info h3 {

        font-size:
            20px;
    }


    .contact-details {

        gap:
            17px;
    }


    .contact-icon {

        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;

        font-size:
            14px;
    }


    .contact-item strong {

        font-size:
            9px;
    }


    .contact-item p,
    .contact-item a {

        font-size:
            12px;
    }


    .support-box {

        padding:
            16px;
    }


    .contact-map {

        min-height:
            280px;
    }


    .contact-map iframe {

        min-height:
            280px;
    }

}


/* ==========================================================================
   47. FOOTER
========================================================================== */

.site-footer {

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #07111f 0%,
            #050c16 100%
        );

    color: #CBD5E1;

    border-top:
        1px solid
        rgba(56, 189, 248, 0.12);
}


.footer-container {

    width: min(1100px, 90%);

    margin: 0 auto;

    padding:
        20px
        0
        10px;
}


.footer-top {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap: 45px;

    align-items: start;
}


.footer-brand {
    max-width: 330px;
}


.footer-logo {

    display: inline-block;

    margin-bottom: 7px;

    color: #ffffff;

    font-family:
        "Eriga",
        Georgia,
        serif;

    font-size: 1.8rem;

    text-decoration: none;
}


.footer-description {

    margin-bottom: 15px;

    color: var(--accent);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.footer-text {

    color:
        rgba(203, 213, 225, 0.68);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;
}


.footer-column h3 {

    margin-bottom: 17px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.footer-column ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


.footer-column li {
    margin-bottom: 9px;
}


.footer-column a {

    color:
        rgba(203, 213, 225, 0.68);

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.footer-column a:hover {
    color: var(--accent);
}


.footer-contact p {

    margin-bottom: 13px;

    color:
        rgba(203, 213, 225, 0.68);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


.footer-contact a {

    display: block;

    margin-bottom: 8px;
}


.footer-divider {

    width: 100%;

    height: 1px;

    margin:
        38px
        0
        0px;

    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.25),
            rgba(255, 255, 255, 0.06),
            transparent
        );
}


.footer-bottom {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        5px
        0
        5px;

    text-align: center;

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


.footer-bottom p {

    margin: 0;

    color:
        rgba(203, 213, 225, 0.55);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.6;

    text-align: center;
}


/* ==========================================================================
   48. SCROLL REVEAL
========================================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.reveal.active {

    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================================
   49. TABLET — <= 900px
========================================================================== */

@media (max-width: 900px) {

    /* ----------------------------------------------------------------------
       Navigation
    ---------------------------------------------------------------------- */

    .navbar-container {
        min-height: 68px;
    }


    .main-nav {
        gap: 3px;
    }


    .main-nav > a,
    .main-nav .dropdown-link {

        padding:
            0
            12px;

        font-size: 0.74rem;
    }


    /* ----------------------------------------------------------------------
       Hero
       Two-column layout becomes vertically stacked.
    ---------------------------------------------------------------------- */

    .hero {

        min-height: auto;

        padding:
            90px
            0;
    }


    .hero-container {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .hero-content {
        max-width: 760px;
    }


    .hero-panel {

        min-height: auto;

        justify-content: flex-start;
    }


    .hero-right {

        align-items: flex-start;
    }


    .hero-branding {

        max-width: 600px;

        justify-content: flex-start;

        text-align: left;
    }


    .hero-branding-content {

        align-items: flex-start;
    }


    .hero-company-name::after {

        margin-left: 0;
        margin-right: auto;
    }


    .hero-company-sector {

        justify-content: flex-start;

        padding-left: 0;

        text-align: left;
    }


    .hero-company-sector::before {
        display: none;
    }


    .solution-panel {

        width: min(600px, 100%);

        max-width: 600px;
    }


    /* ----------------------------------------------------------------------
       Services
    ---------------------------------------------------------------------- */

    .cards {

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


    /* ----------------------------------------------------------------------
       Footer
    ---------------------------------------------------------------------- */

    .footer-top {

        grid-template-columns:
            1fr
            1fr;

        gap: 40px;
    }
}


/* ==========================================================================
   50. MOBILE — <= 768px
========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       Navbar
    ---------------------------------------------------------------------- */

    .navbar-container {

        width: 94%;

        min-height: auto;

        padding:
            12px
            0;

        flex-direction: column;

        gap: 8px;
    }


    .logo img {

        height: 40px;

        max-width: 145px;
    }


    .main-nav {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 2px;
    }


    .main-nav > a,
    .main-nav .dropdown-link {

        min-height: 36px;

        padding:
            0
            9px;

        font-size: 0.70rem;
    }


    .main-nav > a::after,
    .main-nav .dropdown-link::after {

        left: 9px;
        right: 9px;
    }


    .dropdown-menu {
        width: 290px;
    }


    /* ----------------------------------------------------------------------
       Hero
    ---------------------------------------------------------------------- */

    .hero {

        padding:
            75px
            0
            90px;
    }


    .hero-container {

        width: 92%;
    }


    .hero h1 {

        font-size: 38px;

        letter-spacing: -0.045em;
    }


    .hero-description {

        font-size: 16px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .btn {
        width: 100%;
    }


    .hero-metrics {

        flex-direction: column;

        gap: 20px;

        margin-top: 35px;
    }


    /* ----------------------------------------------------------------------
       Hero branding
    ---------------------------------------------------------------------- */

    .hero-branding {

        max-width: 100%;

        gap: 15px;

        padding:
            8px
            0
            18px;
    }


    .hero-company-name {

        font-size: 1.35rem;
    }


    .hero-company-sector {

        max-width: 290px;

        font-size: 0.58rem;

        letter-spacing: 0.12em;
    }


    .hero-logo-placeholder {

        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }


    /* ----------------------------------------------------------------------
       Expertise panel
    ---------------------------------------------------------------------- */

    .hero-panel {

        width: 100%;
    }


    .solution-panel {

        width: 100%;

        padding: 25px;
    }


    .network-grid {
        display: none;
    }


    .hero-scroll {
        display: none;
    }


    /* ----------------------------------------------------------------------
       Services
    ---------------------------------------------------------------------- */

    .services-section {

        padding:
            65px
            0;
    }


    .cards {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .card {

        min-height: auto;

        padding: 25px;
    }


    /* ----------------------------------------------------------------------
       Service detail
    ---------------------------------------------------------------------- */

    .service-detail-card {

        padding: 30px;
    }


    .service-detail-card ul {

        grid-template-columns: 1fr;
    }


    /* ----------------------------------------------------------------------
       About
    ---------------------------------------------------------------------- */

    .about-page {

        padding:
            65px
            0
            75px;
    }


    .about-page .container {
        width: 92%;
    }


    .about-header {
        margin-bottom: 45px;
    }


    .about-header h1 {

        font-size: 32px;

        letter-spacing: -0.045em;
    }


    .about-intro {

        padding:
            25px
            27px;

        font-size: 13px;
    }


    .about-card {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 25px;
    }


    .about-number {

        width: 48px;
        height: 48px;
    }


    .about-card-content h2 {
        font-size: 19px;
    }


    /* ----------------------------------------------------------------------
       Contact
    ---------------------------------------------------------------------- */

    .contact-section {

        padding:
            60px
            0;
    }


    .contact-box {

        grid-template-columns: 1fr;
    }


    .contact-info {
        padding: 30px;
    }


    .contact-map,
    .contact-map iframe {

        min-height: 300px;
    }


    /* ----------------------------------------------------------------------
       Footer
    ---------------------------------------------------------------------- */

    .footer-container {

        width: 90%;

        padding:
            45px
            0
            20px;
    }


    .footer-top {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .footer-brand {
        max-width: 100%;
    }


    .footer-text {
        max-width: 100%;
    }
}


/* ==========================================================================
   51. SMALL MOBILE — <= 520px
========================================================================== */

@media (max-width: 520px) {

    /* ----------------------------------------------------------------------
       Navbar
    ---------------------------------------------------------------------- */

    .navbar-container {

        width: 94%;

        padding:
            10px
            0;
    }


    .logo img {

        height: 36px;

        max-width: 125px;
    }


    .main-nav {

        gap: 0;
    }


    .main-nav > a,
    .main-nav .dropdown-link {

        min-height: 34px;

        padding:
            0
            7px;

        font-size: 0.65rem;
    }


    .main-nav > a::after,
    .main-nav .dropdown-link::after {

        left: 7px;
        right: 7px;
    }


    .dropdown-arrow {

        width: 5px;
        height: 5px;
    }


    .dropdown-menu {

        width:
            min(
                290px,
                calc(100vw - 30px)
            );
    }


    /* ----------------------------------------------------------------------
       Hero
    ---------------------------------------------------------------------- */

    .hero {

        padding:
            60px
            0
            75px;
    }


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


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


    .hero-branding {

        gap: 12px;
    }


    .hero-logo-placeholder {

        width: 52px;
        height: 52px;

        flex-basis: 52px;

        padding: 7px;

        border-radius: 11px;
    }


    .hero-company-name {

        font-size: 1.12rem;
    }


    .hero-company-sector {

        max-width: 235px;

        font-size: 0.52rem;

        letter-spacing: 0.09em;
    }


    .solution-panel {

        padding: 220px;
    }


    .panel-title {
        font-size: 10px;
    }


    .solution {

        min-height: 45px;

        padding:
            11px
            10;

        font-size: 12px;
    }


    /* ----------------------------------------------------------------------
       About
    ---------------------------------------------------------------------- */

    .about-page {

        padding:
            50px
            0
            60px;
    }


    .about-page .container {
        width: 92%;
    }


    .about-header h1 {
        font-size: 28px;
    }


    .about-badge {

        font-size: 9px;

        padding:
            7px
            12px;
    }


    .about-intro {

        padding: 22px;

        font-size: 12.5px;
    }


    .about-card {

        padding: 20px;

        border-radius: 15px;
    }


    .about-number {

        width: 45px;
        height: 45px;

        border-radius: 11px;
    }


    .about-card-content h2 {
        font-size: 17px;
    }


    .about-card-text p {

        font-size: 12.5px;

        line-height: 1.7;
    }


    /* ----------------------------------------------------------------------
       Service detail
    ---------------------------------------------------------------------- */

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


    .service-detail-card h1 {
        font-size: 27px;
    }


    /* ----------------------------------------------------------------------
       Contact
    ---------------------------------------------------------------------- */

    .contact-info {
        padding: 25px;
    }


    /* ----------------------------------------------------------------------
       Footer
    ---------------------------------------------------------------------- */

    .footer-container {
        width: 92%;
    }


    .footer-bottom p {
        font-size: 9px;
    }
}


/* ==========================================================================
   52. ACCESSIBILITY — REDUCED MOTION
   ==========================================================================
   Disables non-essential animation for visitors who explicitly request
   reduced motion through their operating system or browser.
========================================================================== */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }


    .solution-cursor {
        animation: none !important;
    }


    .hero-banner-image,
    .hero-glow,
    .panel-status,
    .scroll-line {
        animation: none !important;
    }
}



/* ==========================================================================
   KALAHARI ASSOCIATES
   AREAS OF EXPERTISE — FIXED PANEL DIMENSIONS
   --------------------------------------------------------------------------
   The expertise panel must retain its shape regardless of how much text
   is present inside it.
========================================================================== */

.hero-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Main outer expertise box */
.hero-panel {
    position: relative;

    width: 100%;
    min-width: 0;

    /*
     * The panel keeps its dimensions even when content changes.
     */
    height: 520px;
    min-height: 520px;
    max-height: 520px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}

/* Inner expertise container */
.solution-panel {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    padding: 30px;
}

/* Header never changes the panel dimensions */
.panel-header {
    flex: 0 0 auto;
}

/* Divider remains fixed */
.panel-divider {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   EXPERTISE ITEMS
-------------------------------------------------------------------------- */

.solution {
    /*
     * Each item gets a controlled amount of vertical space.
     * Long text wraps inside the item rather than expanding the panel.
     */
    min-height: 48px;
    height: 48px;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;
}

/* Expertise text */
.solution-text {
    display: block;

    min-width: 0;
    max-width: 100%;

    line-height: 1.35;

    /*
     * Long expertise names wrap instead of pushing the box wider.
     */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Cursor stays beside the text */
.solution-cursor {
    flex: 0 0 auto;

    margin-left: 3px;
}

/* Expertise bullet */
.solution .dot {
    flex: 0 0 auto;

    margin-right: 12px;
}

/* --------------------------------------------------------------------------
   CTA
-------------------------------------------------------------------------- */

.panel-cta-divider {
    flex: 0 0 auto;
    margin-top: auto;
}

.panel-cta {
    flex: 0 0 auto;

    min-height: 55px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .hero-panel {
        height: 500px;
        min-height: 500px;
        max-height: 500px;
    }

    .solution-panel {
        padding: 25px;
    }

}


@media (max-width: 600px) {

    .hero-panel {
        height: auto;
        min-height: 500px;
        max-height: none;
    }

    .solution-panel {
        padding: 22px;
    }

    .solution {
        min-height: 50px;
        height: auto;
    }

    .solution-text {
        line-height: 1.4;
    }

}

/* ==========================================================================
   KALAHARI ASSOCIATES
   PREMIUM LIGHT-BLUE GLASS HERO
   --------------------------------------------------------------------------
   Visual direction:
   • Light blue enterprise theme
   • Background image remains clearly visible
   • Soft transparent glass
   • Moderate contrast for text
   • No heavy navy/dark overlay
   • Professional and subtle
   ========================================================================== */


/* ==========================================================================
   HERO FOUNDATION
   ========================================================================== */

.hero {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 760px;

    background:
        #eaf7ff;

    --glass-mouse-x: 0px;
    --glass-mouse-y: 0px;

}


/* ==========================================================================
   BACKGROUND IMAGE
   ========================================================================== */

.hero-background {

    position: absolute;

    inset: -25px;

    z-index: -6;

    background-image:
        url("../images/background hero image.jpg");

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    transform:
        scale(1.04)
        translate3d(
            var(--glass-mouse-x),
            var(--glass-mouse-y),
            0
        );

    transform-origin:
        center center;

    will-change:
        transform;

    animation:
        heroBackgroundZoom
        18s
        ease-in-out
        infinite
        alternate;

}


/* ==========================================================================
   SUBTLE BACKGROUND MOTION
   ========================================================================== */

@keyframes heroBackgroundZoom {

    from {

        transform:
            scale(1.04)
            translateX(0);

    }

    to {

        transform:
            scale(1.075)
            translateX(-8px);

    }

}


/* ==========================================================================
   LIGHT-BLUE GLASS OVERLAY
   --------------------------------------------------------------------------
   This is intentionally much lighter than the previous version.
   ========================================================================== */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            /* Text area */
            rgba(224, 244, 255, 0.78) 0%,

            rgba(224, 244, 255, 0.64) 22%,

            /* Middle transition */
            rgba(224, 244, 255, 0.40) 45%,

            /* Image area */
            rgba(224, 244, 255, 0.24) 70%,

            rgba(224, 244, 255, 0.30) 100%
        );

    backdrop-filter:
        blur(2px)
        saturate(108%);

    -webkit-backdrop-filter:
        blur(2px)
        saturate(108%);

}


/* ==========================================================================
   SOFT WHITE GLASS SHEEN
   ========================================================================== */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,

            rgba(255,255,255,0.22) 0%,

            rgba(255,255,255,0.08) 35%,

            rgba(255,255,255,0.015) 65%,

            rgba(56,189,248,0.07) 100%
        );

}


/* ==========================================================================
   SOFT EDGE CONTROL
   ========================================================================== */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at center,

            transparent 48%,

            rgba(7,89,133,0.045) 82%,

            rgba(7,89,133,0.09) 100%
        );

}


/* ==========================================================================
   HERO CONTENT
   --------------------------------------------------------------------------
   Light glass contrast zone behind text.
   ========================================================================== */

.hero-content {

    position: relative;

    isolation: isolate;

}


/*
 * Soft blue-white atmosphere behind the headline.
 * This prevents bright parts of the photograph from interfering
 * with the text without creating a visible card.
 */

.hero-content::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: -80px;

    left: -100px;

    width: 720px;

    height: 650px;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at center,

            rgba(224,244,255,0.48) 0%,

            rgba(224,244,255,0.28) 35%,

            rgba(224,244,255,0.10) 58%,

            transparent 78%
        );

    filter:
        blur(25px);

}


/* ==========================================================================
   HERO HEADLINE
   ========================================================================== */

.hero h1 {

    color:
        #063b5c;

    text-shadow:
        0 1px 2px rgba(255,255,255,0.60);

}


/* ==========================================================================
   HERO HEADLINE ACCENT
   ========================================================================== */

.hero h1 span {

    color:
        #075985;

}


/* ==========================================================================
   HERO DESCRIPTION
   ========================================================================== */

.hero-description {

    color:
        hsl(0, 0%, 0%);

    text-shadow:
        0 1px 2px rgba(255,255,255,0.45);

    max-width:
        680px;

}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

.hero .btn-primary {

    background:

        linear-gradient(
            135deg,
            rgba(7,89,133,0.94),
            rgba(14,165,233,0.92)
        );

    color:
        #ffffff;

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

    box-shadow:

        0 12px 30px
        rgba(7,89,133,0.18),

        inset 0 1px 0
        rgba(255,255,255,0.22);

    backdrop-filter:
        blur(8px);

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

}


/* ==========================================================================
   METRICS GLASS
   ========================================================================== */

.hero-metrics {

    position: relative;

}


/* Subtle glass surface */

.hero-metrics::before {

    content: "";

    position: absolute;

    inset:
        -14px -18px;

    z-index:
        -1;

    background:

        rgba(255,255,255,0.20);

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

    border-radius:
        16px;

    box-shadow:
        0 10px 30px
        rgba(7,89,133,0.06);

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================================
   METRIC TEXT
   ========================================================================== */

.hero .metric strong {

    color:
        #075985;

}


.hero .metric span {

    color:
        #416579;

}


/* ==========================================================================
   RIGHT EXPERTISE GLASS PANEL
   ========================================================================== */

.hero-panel {

    background:

        linear-gradient(
            135deg,

            rgba(255,255,255,0.22),

            rgba(255,255,255,0.09)
        );

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

    box-shadow:

        0 24px 60px
        rgba(7,89,133,0.12),

        inset 0 1px 0
        rgba(255,255,255,0.50);

    backdrop-filter:

        blur(18px)
        saturate(115%);

    -webkit-backdrop-filter:

        blur(18px)
        saturate(115%);

}


/* ==========================================================================
   SOLUTION PANEL
   ========================================================================== */

.solution-panel {

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

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

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================================
   SOFT BLUE AMBIENT GLOW — LEFT
   ========================================================================== */

.hero-glow-one {

    position: absolute;

    width:
        480px;

    height:
        480px;

    left:
        -180px;

    top:
        5%;

    z-index:
        -2;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle,

            rgba(56,189,248,0.20) 0%,

            rgba(56,189,248,0.08) 38%,

            transparent 72%
        );

    filter:
        blur(55px);

    opacity:
        0.75;

}


/* ==========================================================================
   SOFT BLUE AMBIENT GLOW — RIGHT
   ========================================================================== */

.hero-glow-two {

    position: absolute;

    width:
        500px;

    height:
        500px;

    right:
        -180px;

    bottom:
        -130px;

    z-index:
        -2;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle,

            rgba(14,165,233,0.17) 0%,

            rgba(14,165,233,0.06) 40%,

            transparent 72%
        );

    filter:
        blur(60px);

    opacity:
        0.70;

}


/* ==========================================================================
   ENTRANCE TRANSITION
   ========================================================================== */

.hero-background,
.hero-overlay {

    transition:

        opacity 1.4s ease,

        transform 1.5s
        cubic-bezier(.22,1,.36,1);

}


.hero:not(.hero-loaded)
.hero-background {

    opacity:
        0.82;

    transform:
        scale(1.07);

}


.hero.hero-loaded
.hero-background {

    opacity:
        1;

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .hero {

        min-height:
            850px;

    }


    .hero-background {

        background-position:
            center center;

        animation-duration:
            22s;

    }


    .hero-overlay {

        background:

            linear-gradient(
                180deg,

                rgba(224,244,255,0.70) 0%,

                rgba(224,244,255,0.52) 42%,

                rgba(224,244,255,0.34) 68%,

                rgba(224,244,255,0.50) 100%
            );

    }


    .hero-content::before {

        left:
            -100px;

        width:
            520px;

        height:
            620px;

    }

}


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

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

    .hero-background {

        animation:
            none;

        transform:
            scale(1.04);

    }

}

/* ==========================================================================
   KALAHARI ASSOCIATES
   GLOBAL WEBSITE BACKGROUND
   --------------------------------------------------------------------------
   Used by:
   • Services
   • Individual Service
   • About
   • Contact
   • Other internal pages

   The homepage hero keeps its own background.
   This background is for the rest of the website.
   ========================================================================== */


/* ==========================================================================
   GLOBAL PAGE BACKGROUND
   ========================================================================== */

.page-wrapper {

    position: relative;

    isolation: isolate;

    min-height: 100vh;

    background:
        #f4fbff;

}


/* ==========================================================================
   WEBSITE IMAGE
   --------------------------------------------------------------------------
   Slow zoom creates continuity with the homepage hero.
   ========================================================================== */

.page-background {

    position: fixed;

    inset: -35px;

    z-index: -10;

    pointer-events: none;

    background-image:
        url("assets/images/website image.jpg");

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    transform:
        scale(1.035);

    transform-origin:
        center center;

    animation:
        websiteBackgroundZoom
        24s
        ease-in-out
        infinite
        alternate;

    will-change:
        transform;

}


/* ==========================================================================
   LIGHT-BLUE GLASS FILTER
   --------------------------------------------------------------------------
   Keeps the image visible but establishes the Kalahari light-blue theme.
   ========================================================================== */

.page-background-glass {

    position: fixed;

    inset: 0;

    z-index: -9;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,

            rgba(238,248,255,0.88) 0%,

            rgba(244,251,255,0.78) 35%,

            rgba(255,255,255,0.68) 65%,

            rgba(224,244,255,0.78) 100%
        );

    backdrop-filter:
        blur(2px)
        saturate(105%);

    -webkit-backdrop-filter:
        blur(2px)
        saturate(105%);

}


/* ==========================================================================
   SOFT BLUE ATMOSPHERE
   ========================================================================== */

.page-background-glow {

    position: fixed;

    inset: 0;

    z-index: -8;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 20%,

            rgba(56,189,248,0.12),

            transparent 32%
        ),

        radial-gradient(
            circle at 85% 75%,

            rgba(14,165,233,0.08),

            transparent 34%
        );

}


/* ==========================================================================
   SUBTLE BACKGROUND ZOOM
   ========================================================================== */

@keyframes websiteBackgroundZoom {

    from {

        transform:
            scale(1.035);

    }

    to {

        transform:
            scale(1.065);

    }

}


/* ==========================================================================
   MAIN CONTENT GLASS SURFACE
   --------------------------------------------------------------------------
   Keeps page sections readable while allowing the background to show through.
   ========================================================================== */

main {

    position: relative;

    z-index: 1;

}


/* ==========================================================================
   INTERNAL PAGE GLASS CONTAINER
   --------------------------------------------------------------------------
   Use this class around major internal-page content where appropriate.
   ========================================================================== */

.page-glass {

    background:

        rgba(255,255,255,0.62);

    border:

        1px solid
        rgba(255,255,255,0.70);

    box-shadow:

        0 20px 60px
        rgba(7,89,133,0.06),

        inset 0 1px 0
        rgba(255,255,255,0.70);

    backdrop-filter:

        blur(14px)
        saturate(110%);

    -webkit-backdrop-filter:

        blur(14px)
        saturate(110%);

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .page-background {

        animation-duration:
            28s;

        background-position:
            center center;

    }


    .page-background-glass {

        background:

            linear-gradient(
                180deg,

                rgba(238,248,255,0.90),

                rgba(248,252,255,0.82)
            );

    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .page-background {

        animation:
            none;

        transform:
            scale(1.035);

    }

}

/* ==========================================================================
   KALAHARI ASSOCIATES
   INTERNAL PAGES — WEBSITE BACKGROUND
   ========================================================================== */

/* ==========================================================================
   INTERNAL PAGE — FULL LIGHT-BLUE CANVAS
   --------------------------------------------------------------------------
   Removes white gaps above/below internal pages and ensures the complete
   viewport uses the Kalahari Associates light-blue visual theme.
   ========================================================================== */

html,
body {

    margin: 0;

    padding: 0;

    min-height: 100%;

    background: #f8fbff;

}


/* ==========================================================================
   MAIN WEBSITE AREA
   ========================================================================== */

main {

    margin: 0;

    padding: 0;

    background: #f8fbff;

}


/* ==========================================================================
   INTERNAL PAGE
   ========================================================================== */

.internal-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background:

        linear-gradient(
            180deg,
            #eef8ff 0%,
            #f4faff 42%,
            #f8fbff 100%
        );

}


/* ==========================================================================
   INTERNAL PAGE CONTENT
   ========================================================================== */

.internal-page-content {

    position: relative;

    z-index: 1;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    background: transparent;

}


/* ==========================================================================
   REMOVE UNWANTED FIRST/FINAL SECTION GAPS
   ========================================================================== */

.internal-page-content > section:first-child,
.internal-page-content > div:first-child {

    margin-top: 0;

}


/* ==========================================================================
   PREVENT PAGE SECTIONS FROM CREATING WHITE CANVAS
   ========================================================================== */

.internal-page section {

    background-color: transparent;

}


/* ==========================================================================
   LIGHT BLUE ATMOSPHERIC GLOW
   --------------------------------------------------------------------------
   Gives the pages a subtle premium enterprise ICT appearance instead of
   a flat white background.
   ========================================================================== */

.internal-page::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(56, 189, 248, 0.12),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 25%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            rgba(224, 242, 254, 0.28),
            transparent 45%
        );

    z-index: 0;

}


/* ==========================================================================
   KEEP CONTENT ABOVE ATMOSPHERIC BACKGROUND
   ========================================================================== */

.internal-page-content {

    isolation: isolate;

}


/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */

.page-wrapper {

    min-height: 100vh;

    background: #f8fbff;

}

/* --------------------------------------------------------------------------
   ACTUAL WEBSITE BACKGROUND IMAGE
   -------------------------------------------------------------------------- */

body .internal-page .internal-page-background {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    z-index: -3 !important;

    background-image: url("../assets/images/website.jpg") !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    transform: scale(1.03);

}


/* --------------------------------------------------------------------------
   IMAGE OVERLAY
   -------------------------------------------------------------------------- */

body .internal-page .internal-page-overlay {

    position: absolute !important;

    inset: 0 !important;

    z-index: -2 !important;

    background:
        linear-gradient(
            135deg,
            rgba(248, 251, 255, 0.70),
            rgba(240, 249, 255, 0.62),
            rgba(224, 242, 254, 0.72)
        ) !important;

    pointer-events: none !important;

}


/* --------------------------------------------------------------------------
   PAGE CONTENT
   -------------------------------------------------------------------------- */

body .internal-page .internal-page-content {

    position: relative !important;

    z-index: 1 !important;

    min-height: 100vh !important;

    background: transparent !important;

}


/* --------------------------------------------------------------------------
   REMOVE OLD BACKGROUND PSEUDO ELEMENTS
   -------------------------------------------------------------------------- */

body .internal-page::before,
body .internal-page::after {

    display: none !important;

    content: none !important;

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    body .internal-page .internal-page-background {

        background-position: center center !important;

        background-size: cover !important;

        transform: scale(1.02);

    }

}


/* ==========================================================================
   INTERNAL PAGE BACKGROUND
   --------------------------------------------------------------------------
   Background image is controlled by index.php.
   ========================================================================== */

.internal-page .services-section,
.internal-page .service-section,
.internal-page .about-section,
.internal-page .contact-section,
.internal-page .page-section,
.internal-page .content-section,
.internal-page .main-section {

    background: transparent !important;

}


/* ==========================================================================
   ABOUT INTRODUCTION BOX
   ========================================================================== */

.about-intro-box {

    position: relative;

    width: min(900px, 94%);

    margin: 0 auto 70px;

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 34px 38px;

    /*
     * Very light transparency.
     * The website.jpg background remains visible.
     */

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

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

    border-radius: 22px;

    backdrop-filter:
        blur(10px);

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

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.07);

    overflow: hidden;

    isolation: isolate;

}


/* ==========================================================================
   VERY SUBTLE LIGHT
   ========================================================================== */

.about-intro-box::before {

    content: "";

    position: absolute;

    top: -100px;

    left: -100px;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:
        rgba(56, 189, 248, 0.08);

    filter:
        blur(55px);

    pointer-events: none;

    z-index: -1;

}


/* ==========================================================================
   INTRODUCTION LOGO
   ========================================================================== */

.about-intro-logo {

    flex:
        0 0 78px;

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

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

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

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.07);

}


/* ==========================================================================
   INTRODUCTION LOGO IMAGE
   ========================================================================== */

.about-intro-logo img {

    width: 58px;

    height: 58px;

    object-fit: contain;

    display: block;

}


/* ==========================================================================
   INTRODUCTION CONTENT
   ========================================================================== */

.about-intro-content {

    flex: 1;

    min-width: 0;

}


/* ==========================================================================
   ABOUT BADGE
   ========================================================================== */

.about-intro-label {

    display: inline-block;

    margin-bottom: 8px;

    color:
        #075985;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


/* ==========================================================================
   ABOUT TITLE
   ========================================================================== */

.about-intro-content h1 {

    margin: 0;

    color:
        #0f172a;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.035em;

}


/* ==========================================================================
   ABOUT INTRO TEXT
   ========================================================================== */

.about-intro-text {

    margin-top: 14px;

    max-width: 720px;

    color:
        #334155;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.75;

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .about-intro-box {

        width: 94%;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        padding: 28px 24px;

        margin-bottom: 50px;

    }


    .about-intro-logo {

        flex-basis: 68px;

        width: 68px;

        height: 68px;

    }


    .about-intro-logo img {

        width: 50px;

        height: 50px;

    }


    .about-intro-content h1 {

        font-size: 29px;

    }


    .about-intro-text {

        font-size: 13px;

        line-height: 1.7;

    }

}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        90px
        0
        100px;

    /*
     * IMPORTANT:
     * Keep transparent so website.jpg from index.php
     * remains visible.
     */

    background:
        transparent !important;

    overflow:
        hidden;

}


/* ==========================================================================
   CONTACT INTRODUCTION BOX
   ========================================================================== */

.contact-intro-box {

    position: relative;

    width: min(900px, 94%);

    margin:
        0 auto 65px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        32px 38px;

    /*
     * Very subtle glass.
     */

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

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

    border-radius:
        22px;

    backdrop-filter:
        blur(10px);

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

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.07);

    overflow:
        hidden;

    isolation:
        isolate;

}


/* ==========================================================================
   SUBTLE BLUE LIGHT
   ========================================================================== */

.contact-intro-box::before {

    content:
        "";

    position:
        absolute;

    top:
        -100px;

    left:
        -100px;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:
        rgba(56, 189, 248, 0.08);

    filter:
        blur(55px);

    pointer-events:
        none;

    z-index:
        -1;

}


/* ==========================================================================
   CONTACT INTRO LOGO
   ========================================================================== */

.contact-intro-logo {

    flex:
        0 0 78px;

    width:
        78px;

    height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

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

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

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.07);

}


/* ==========================================================================
   LOGO IMAGE
   ========================================================================== */

.contact-intro-logo img {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

    display:
        block;

}


/* ==========================================================================
   INTRO CONTENT
   ========================================================================== */

.contact-intro-content {

    flex:
        1;

    min-width:
        0;

}


/* ==========================================================================
   CONTACT LABEL
   ========================================================================== */

.contact-intro-label {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        #075985;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


/* ==========================================================================
   CONTACT TITLE
   ========================================================================== */

.contact-intro-content h1 {

    margin:
        0;

    color:
        #0f172a;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -0.035em;

}


/* ==========================================================================
   CONTACT DESCRIPTION
   ========================================================================== */

.contact-intro-content p {

    max-width:
        700px;

    margin:
        14px 0 0;

    color:
        #334155;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    line-height:
        1.75;

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .contact-intro-box {

        width:
            94%;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            20px;

        padding:
            28px 24px;

        margin-bottom:
            50px;

    }


    .contact-intro-logo {

        flex-basis:
            68px;

        width:
            68px;

        height:
            68px;

    }


    .contact-intro-logo img {

        width:
            50px;

        height:
            50px;

    }


    .contact-intro-content h1 {

        font-size:
            29px;

    }


    .contact-intro-content p {

        font-size:
            13px;

        line-height:
            1.7;

    }

}

/* ==========================================================================
   KALAHARI ASSOCIATES
   CONTACT INFORMATION — LIGHT BLUE GLASS THEME
   ========================================================================== */


/* ==========================================================================
   CONTACT INFORMATION PANEL
   ========================================================================== */

.contact-info {

    position: relative;

    padding:
        34px 36px;

    /*
     * LIGHT BLUE GLASS
     * --------------------------------------------------------------
     * Keep this translucent so website.jpg from index.php remains
     * visible underneath the panel.
     */

    background:
        linear-gradient(
            145deg,
            rgba(239, 248, 255, 0.78),
            rgba(248, 252, 255, 0.62)
        ) !important;

    border:
        1px solid
        rgba(125, 211, 252, 0.28);

    border-radius:
        22px;

    backdrop-filter:
        blur(10px);

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

    box-shadow:
        0 18px 45px
        rgba(7, 89, 133, 0.08);

    overflow:
        hidden;

    isolation:
        isolate;

}


/* ==========================================================================
   SUBTLE BLUE AMBIENT LIGHT
   ========================================================================== */

.contact-info::before {

    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -100px;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        rgba(56, 189, 248, 0.10);

    filter:
        blur(60px);

    pointer-events:
        none;

    z-index:
        -1;

}


/* ==========================================================================
   SECONDARY BLUE LIGHT
   ========================================================================== */

.contact-info::after {

    content:
        "";

    position:
        absolute;

    bottom:
        -120px;

    left:
        -100px;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    background:
        rgba(14, 165, 233, 0.06);

    filter:
        blur(60px);

    pointer-events:
        none;

    z-index:
        -1;

}


/* ==========================================================================
   COMPANY NAME
   ========================================================================== */

.contact-info h3 {

    position:
        relative;

    margin:
        0 0 28px;

    color:
        #075985;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        21px;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

}


/* ==========================================================================
   BLUE ACCENT LINE
   ========================================================================== */

.contact-info h3::after {

    content:
        "";

    display:
        block;

    width:
        44px;

    height:
        3px;

    margin-top:
        12px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #075985,
            #0ea5e9,
            #38bdf8
        );

}


/* ==========================================================================
   CONTACT DETAILS
   ========================================================================== */

.contact-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* ==========================================================================
   CONTACT ITEM
   ========================================================================== */

.contact-item {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    padding:
        15px 16px;

    border-radius:
        15px;

    /*
     * Slight blue tint.
     */

    background:
        rgba(239, 248, 255, 0.52);

    border:
        1px solid
        rgba(125, 211, 252, 0.18);

    box-shadow:
        0 6px 20px
        rgba(7, 89, 133, 0.035);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


/* ==========================================================================
   CONTACT ITEM HOVER
   ========================================================================== */

.contact-item:hover {

    transform:
        translateX(4px);

    background:
        rgba(224, 242, 254, 0.70);

    border-color:
        rgba(56, 189, 248, 0.28);

    box-shadow:
        0 10px 28px
        rgba(7, 89, 133, 0.07);

}


/* ==========================================================================
   CONTACT ICON
   ========================================================================== */

.contact-icon {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    /*
     * Light blue icon surface.
     */

    background:
        linear-gradient(
            145deg,
            rgba(224, 242, 254, 0.92),
            rgba(240, 249, 255, 0.78)
        );

    border:
        1px solid
        rgba(14, 165, 233, 0.16);

    color:
        #075985;

    font-size:
        17px;

    box-shadow:
        0 7px 18px
        rgba(7, 89, 133, 0.07);

}


/* ==========================================================================
   CONTACT LABEL
   ========================================================================== */

.contact-item strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #0c4a6e;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.045em;

}


/* ==========================================================================
   CONTACT TEXT
   ========================================================================== */

.contact-item p {

    margin:
        0;

    color:
        #334155;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        15px;

    line-height:
        1.65;

}


/* ==========================================================================
   CONTACT LINKS
   ========================================================================== */

.contact-item a {

    color:
        #075985;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        color 0.2s ease;

}


.contact-item a:hover {

    color:
        #0ea5e9;

}


/* ==========================================================================
   CONTACT SECTION — KEEP BACKGROUND IMAGE VISIBLE
   ========================================================================== */

.contact-section {

    background:
        transparent !important;

}


/* ==========================================================================
   CONTACT BOX
   ========================================================================== */

.contact-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        28px;

}


/* ==========================================================================
   GOOGLE MAP
   ========================================================================== */

.contact-map {

    position:
        relative;

    min-height:
        520px;

    overflow:
        hidden;

    border-radius:
        22px;

    border:
        1px solid
        rgba(125, 211, 252, 0.28);

    background:
        rgba(239, 248, 255, 0.38);

    box-shadow:
        0 18px 45px
        rgba(7, 89, 133, 0.08);

    backdrop-filter:
        blur(6px);

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

}


.contact-map iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        520px;

    border:
        0;

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .contact-box {

        grid-template-columns:
            1fr;

    }


    .contact-map {

        min-height:
            420px;

    }


    .contact-map iframe {

        min-height:
            420px;

    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .contact-info {

        padding:
            28px 22px;

        border-radius:
            18px;

    }


    .contact-info h3 {

        font-size:
            19px;

        margin-bottom:
            24px;

    }


    .contact-item {

        padding:
            13px;

        gap:
            13px;

    }


    .contact-icon {

        flex:
            0 0 36px;

        width:
            36px;

        height:
            36px;

        font-size:
            15px;

    }


    .contact-item strong {

        font-size:
            10px;

    }


    .contact-item p {

        font-size:
            12px;

    }


    .contact-map {

        min-height:
            360px;

        border-radius:
            18px;

    }


    .contact-map iframe {

        min-height:
            360px;

    }

}


/* ==========================================================================
   END OF KALAHARI ASSOCIATES MASTER STYLESHEET
   ==========================================================================
   Maintenance Notes
   --------------------------------------------------------------------------
   1. Keep global design tokens in :root.
   2. Keep hero-specific styling together.
   3. Do not introduce component styling into unrelated sections.
   4. Preserve the HTML class names unless the corresponding PHP markup
      is intentionally refactored.
   5. Add new responsive behaviour to the appropriate breakpoint rather
      than scattering media queries throughout the stylesheet.
   6. Use the existing colour tokens instead of introducing arbitrary
      colours for individual components.
========================================================================== */