/* =========================================================
   NEXUS — IMMERSIVE DIGITAL WEBSITE
   STYLE.CSS
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
    --black: #030303;
    --black-2: #070707;
    --black-3: #0d0d0d;

    --white: #ffffff;
    --white-soft: #d8d8d8;

    --gray: #777777;
    --gray-dark: #333333;
    --gray-light: #aaaaaa;

    /* VISIBLE LIGHT-GREY BORDERS */
    --line: rgba(255, 255, 255, 0.30);
    --soft-line: rgba(255, 255, 255, 0.20);

    --transition:
        cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    width: 100%;
    height: 100%;

    scroll-behavior: smooth;

}


body {

    width: 100%;
    height: 100%;

    margin: 0;

    background: var(--black);

    color: var(--white);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;

    cursor: none;

}


body,
button,
a,
input,
textarea,
select {

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

}


button {

    cursor: none;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    max-width: 100%;

    display: block;

}


/* =========================================================
   LOADER
========================================================= */

.loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    background: #020202;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;

}


.loader.hide {

    opacity: 0;

    visibility: hidden;

}


.loader-logo {

    width: 70px;

    height: 70px;

    border: 1px solid #ffffff;

    display: grid;

    place-items: center;

    font-size: 32px;

    font-weight: 900;

    letter-spacing: -2px;

    margin-bottom: 35px;

}


.loader-line {

    width: 220px;

    height: 1px;

    background: #222222;

    overflow: hidden;

}


.loader-line span {

    display: block;

    width: 0;

    height: 100%;

    background: #ffffff;

    transition: width 0.2s linear;

}


.loader-text {

    margin-top: 16px;

    color: #555555;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.background {

    position: fixed;

    inset: 0;

    z-index: -20;

    background: #030303;

    overflow: hidden;

}


#particleCanvas {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.background-grid {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: -20%;

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

    background-size: 80px 80px;

    transform:
        perspective(800px)
        rotateX(64deg)
        translateY(0);

    transform-origin: center top;

    /* REMOVE MOVEMENT */
    animation: none;
}





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

.background-glow {

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0.025;

    filter: blur(140px);

    pointer-events: none;

    animation:
        glowAnimation 10s
        ease-in-out
        infinite
        alternate;

}


.glow-one {

    top: -280px;

    left: -220px;

}


.glow-two {

    right: -280px;

    bottom: -280px;

    animation-delay: -5s;

}


@keyframes glowAnimation {

    from {

        transform:
            translate(0, 0)
            scale(1);

    }

    to {

        transform:
            translate(120px, 80px)
            scale(1.3);

    }

}


/* =========================================================
   NOISE
========================================================= */

.noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.035;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='.65'/%3E%3C/svg%3E");

}


/* =========================================================
   SCANLINES
========================================================= */

.scanlines {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.012) 4px
        );

}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

.cursor-dot {

    position: fixed;

    left: 0;

    top: 0;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #ffffff;

    z-index: 100000;

    pointer-events: none;

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

}


.cursor-ring {

    position: fixed;

    left: 0;

    top: 0;

    width: 35px;

    height: 35px;

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

    border-radius: 50%;

    z-index: 99999;

    pointer-events: none;

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

    transition:

        width 0.3s ease,
        height 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;

}


.cursor-ring.hover {

    width: 75px;

    height: 75px;

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

    border-color: #ffffff;

}


.cursor-text {

    position: fixed;

    left: 0;

    top: 0;

    z-index: 100001;

    pointer-events: none;

    font-size: 7px;

    letter-spacing: 2px;

    color: #ffffff;

    opacity: 0;

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

}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    padding:
        0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 500;

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

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

    backdrop-filter:
        blur(4px);

}


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

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-symbol {

    width: 34px;

    height: 34px;

    border:
        1px solid #ffffff;

    display: grid;

    place-items: center;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: -1px;

    transition: 0.4s
        var(--transition);

}


.brand:hover .brand-symbol {

    background: #ffffff;

    color: #000000;

    transform:
        rotate(45deg);

}


.brand-name {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.system-status {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color: #555555;

    font-size: 8px;

    letter-spacing: 3px;

    white-space: nowrap;

}


.status-dot {

    display: inline-block;

    width: 5px;

    height: 5px;

    margin-right: 8px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 12px
        rgba(255, 255, 255, 0.6);

    animation:
        statusPulse 1.5s
        ease-in-out
        infinite;

}


@keyframes statusPulse {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.2;

    }

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button {

    width: 40px;

    height: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

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

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

    transition: 0.4s
        var(--transition);

}


.menu-button:hover {

    background: #ffffff;

}


.menu-button span {

    width: 16px;

    height: 1px;

    background: #ffffff;

    transition: 0.3s;

}


.menu-button:hover span {

    background: #000000;

}


/* =========================================================
   SIDE INFORMATION
========================================================= */

.side-info {

    position: fixed;

    z-index: 100;

    top: 50%;

    display: flex;

    gap: 20px;

    color: #3f3f3f;

    font-size: 7px;

    letter-spacing: 3px;

    white-space: nowrap;

}


.left-info {

    left: 25px;

    transform:
        rotate(-90deg)
        translateX(-50%);

    transform-origin:
        left center;

}


.right-info {

    right: 25px;

    transform:
        rotate(90deg)
        translateX(50%);

    transform-origin:
        right center;

}


/* =========================================================
   MAIN EXPERIENCE
========================================================= */

#experience {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

}


/* =========================================================
   SCREEN
========================================================= */

.screen {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    padding:
        100px
        10%
        80px;

    overflow-y: auto;

    scrollbar-width: none;

    opacity: 0;

    visibility: hidden;

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

    transition:

        opacity 0.8s ease,

        transform
        1s
        var(--transition),

        visibility 0.8s ease;

}


.screen::-webkit-scrollbar {

    display: none;

}


.screen.active {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1)
        translateY(0);

}


/* =========================================================
   HOME
========================================================= */

#home {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.home-content {

    position: relative;

    z-index: 20;

    width: 720px;

    margin-top: -30px;

}


.micro-label {

    margin-bottom: 30px;

    color: #555555;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 4px;

}


.home-content h1 {

    font-size:
        clamp(50px, 8vw, 110px);

    line-height: 0.85;

    font-weight: 800;

    letter-spacing: -6px;

}


.home-content h1 span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255, 255, 255, 0.9);

}


.home-content p {

    max-width: 500px;

    margin:
        35px auto;

    color: #666666;

    font-size: 16px;

    line-height: 1.8;

}


.explore-button {

    display: inline-flex;

    align-items: center;

    gap: 35px;

    padding:
        17px 25px;

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

    background:
        transparent;

    color: #ffffff;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 2px;

    transition:
        0.4s
        var(--transition);

}


.explore-button b {

    font-size: 15px;

    font-weight: 400;

}


.explore-button:hover {

    background: #ffffff;

    color: #000000;

    transform:
        translateY(-4px);

}


/* =========================================================
   DIGITAL CORE
========================================================= */

.core-wrapper {

    position: absolute;

    width: 550px;

    height: 550px;

    top: 50%;

    left: 50%;

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

    pointer-events: none;

    opacity: 0.72;

    transition:
        transform 0.3s
        ease-out;

}


.core {

    position: absolute;

    width: 150px;

    height: 150px;

    top: 50%;

    left: 50%;

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

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.08),
            transparent 65%
        );

    box-shadow:

        0 0 70px
        rgba(255, 255, 255, 0.035),

        inset 0 0 40px
        rgba(255, 255, 255, 0.025);

}


.core-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );

    background-size: 15px 15px;

    animation:
        coreGridMove 8s
        linear
        infinite;

}


@keyframes coreGridMove {

    from {

        transform:
            translate(0, 0);

    }

    to {

        transform:
            translate(15px, 15px);

    }

}


.core-symbol {

    position: relative;

    z-index: 2;

    font-size: 45px;

    font-weight: 900;

    letter-spacing: -4px;

}


.core-ring {

    position: absolute;

    width: 190px;

    height: 190px;

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

    border-radius: 50%;

    animation:
        corePulse 3s
        ease-in-out
        infinite;

}


@keyframes corePulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 0.8;

    }

    50% {

        transform:
            scale(1.18);

        opacity: 0.2;

    }

}


/* =========================================================
   ORBITS
========================================================= */

.orbit {

    position: absolute;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

}


.orbit-1 {

    width: 270px;

    height: 270px;

    transform:
        translate(-50%, -50%)
        rotateX(65deg);

    animation:
        orbitOne 12s
        linear
        infinite;

}


.orbit-2 {

    width: 390px;

    height: 180px;

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

    animation:
        orbitTwo 15s
        linear
        infinite
        reverse;

}


.orbit-3 {

    width: 470px;

    height: 240px;

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

    animation:
        orbitThree 20s
        linear
        infinite;

}


@keyframes orbitOne {

    from {

        transform:
            translate(-50%, -50%)
            rotateX(65deg)
            rotateZ(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotateX(65deg)
            rotateZ(360deg);

    }

}


@keyframes orbitTwo {

    from {

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

    }

    to {

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

    }

}


@keyframes orbitThree {

    from {

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

    }

    to {

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

    }

}


/* =========================================================
   CORE LABELS
========================================================= */

.core-label {

    position: absolute;

    color: #4d4d4d;

    font-size: 7px;

    letter-spacing: 3px;

}


.label-top {

    top: 0;

    left: 50%;

    transform:
        translateX(-50%);

}


.label-bottom {

    bottom: 0;

    left: 50%;

    transform:
        translateX(-50%);

}


/* =========================================================
   HOME BOTTOM
========================================================= */

.home-bottom {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 15px;

    color: #414141;

    font-size: 7px;

    letter-spacing: 2px;

    white-space: nowrap;

}


.mouse-line {

    width: 50px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

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

}


@keyframes mouseLine {

    0%,
    100% {

        opacity: 0.2;

        transform:
            scaleX(0.5);

    }

    50% {

        opacity: 1;

        transform:
            scaleX(1);

    }

}


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

.section-content {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


.section-number {

    position: absolute;

    top: 120px;

    left: 4%;

    color: #303030;

    font-size: 9px;

    letter-spacing: 3px;

}


.section-tag {

    margin-bottom: 25px;

    color: #555555;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 4px;

}


.section-content h2 {

    max-width: 900px;

    font-size:
        clamp(45px, 7vw, 95px);

    line-height: 0.85;

    font-weight: 800;

    letter-spacing: -5px;

}


.section-content h2 span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px #ffffff;

}


.section-intro {

    max-width: 550px;

    margin:
        35px 0 50px;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-grid {

    display: grid;

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

    gap: 1px;

    margin-top: 50px;

    border:
        1px solid
        var(--soft-line);

}


.about-card {

    min-height: 230px;

    padding: 30px;

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

    border-right:
        1px solid
        var(--soft-line);

    transition:
        0.5s
        var(--transition);

}


.about-card:last-child {

    border-right: none;

}


.about-card:hover {

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

    transform:
        translateY(-5px);

}


.about-card strong {

    color: #444444;

    font-size: 8px;

}


.about-card h3 {

    margin-top: 60px;

    font-size: 25px;

    font-weight: 600;

    letter-spacing: -1px;

}


.about-card p {

    margin-top: 15px;

    color: #555555;

    font-size: 16px;

    line-height: 1.7;

}


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

.service-interface {

    margin-top: 50px;

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

}


.service-item {

    position: relative;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        70px
        1.3fr
        1fr
        50px;

    align-items: center;

    gap: 30px;

    padding:
        0 20px;

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

    overflow: hidden;

    transition:
        0.5s
        var(--transition);

}


.service-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 100%;

    background: #ffffff;

    z-index: -1;

    transition:
        width 0.6s
        var(--transition);

}


.service-item:hover {

    color: #000000;

    padding-left: 40px;

}


.service-item:hover::before {

    width: 100%;

}


.service-index {

    color: #555555;

    font-size: 9px;

}


.service-name {

    font-size:
        clamp(25px, 4vw, 45px);

    font-weight: 500;

    letter-spacing: -2px;

}


.service-description {

    max-width: 220px;

    color: #555555;

    font-size: 10px;

    line-height: 1.6;

}


.service-arrow {

    font-size: 20px;

    transition:
        transform 0.4s;

}


.service-item:hover
.service-arrow {

    transform:
        translate(5px, -5px);

}


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

.service-detail {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    padding:
        10%;

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

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.05);

    transition:
        0.7s
        var(--transition);

}


.service-detail.open {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1);

}


.close-detail {

    position: absolute;

    top: 35px;

    right: 45px;

    width: 45px;

    height: 45px;

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

    background: transparent;

    color: #ffffff;

    font-size: 25px;

    line-height: 1;

    transition:
        0.3s;

}


.close-detail:hover {

    background: #ffffff;

    color: #000000;

}


.detail-number {

    position: absolute;

    top: 35px;

    left: 45px;

    color: #333333;

    font-size: 8px;

    letter-spacing: 3px;

}


.detail-label {

    color: #555555;

    font-size: 8px;

    letter-spacing: 4px;

}


.detail-content h3 {

    margin:
        25px 0;

    font-size:
        clamp(50px, 7vw, 100px);

    line-height: 0.85;

    letter-spacing: -5px;

}


.detail-content p {

    max-width: 450px;

    color: #777777;

    font-size: 12px;

    line-height: 1.8;

}


.detail-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 35px;

}


.detail-list span {

    padding:
        10px 14px;

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

    color: #aaaaaa;

    font-size: 8px;

    letter-spacing: 1px;

}


.detail-visual {

    position: relative;

    height: 450px;

    display: grid;

    place-items: center;

}


.visual-circle {

    position: relative;

    width: 250px;

    height: 250px;

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

    border-radius: 50%;

    animation:
        visualRotation 10s
        linear
        infinite;

}


.visual-circle::before {

    content: "";

    position: absolute;

    inset: 25px;

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

    border-radius: 50%;

}


.visual-circle::after {

    content: "";

    position: absolute;

    inset: 65px;

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

    border-radius: 50%;

}


@keyframes visualRotation {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


.visual-lines {

    position: absolute;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

}


.detail-visual span {

    position: absolute;

    bottom: 20px;

    color: #444444;

    font-size: 7px;

    letter-spacing: 4px;

}


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

.portfolio-container {

    display: grid;

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

    gap: 20px;

    margin-top: 50px;

}


.project {

    border:
        1px solid
        var(--soft-line);

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

    transition:
        0.5s
        var(--transition);

}


.project:hover {

    transform:
        translateY(-10px);

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

}


.project-image {

    position: relative;

    height: 260px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}


.project-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            #333333,
            #050505 65%
        );

    transition:
        transform 0.8s
        var(--transition);

}


.project:hover
.project-image::before {

    transform:
        scale(1.2);

}


.project-two::before {

    background:
        repeating-linear-gradient(
            45deg,
            #111111 0px,
            #111111 20px,
            #222222 20px,
            #222222 21px
        );

}


.project-three::before {

    background:
        radial-gradient(
            circle at 50% 50%,
            #444444,
            #050505 65%
        );

}


.project-image span,
.project-image strong {

    position: relative;

    z-index: 2;

}


.project-image span {

    color: #777777;

    font-size: 8px;

    letter-spacing: 2px;

}


.project-image strong {

    color: #ffffff;

    font-size: 55px;

    font-weight: 800;

    letter-spacing: -4px;

}


.project-info {

    padding: 25px;

}


.project-info small {

    color: #555555;

    font-size: 7px;

    letter-spacing: 2px;

}


.project-info h3 {

    margin:
        10px 0;

    font-size: 20px;

    font-weight: 600;

}


.project-info p {

    color: #555555;

    font-size: 16px;

    line-height: 1.6;

}


.project-info a {

    display: inline-block;

    margin-top: 25px;

    font-size: 8px;

    letter-spacing: 2px;

    transition:
        0.3s;

}


.project-info a:hover {

    letter-spacing: 3px;

}


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

.contact-layout {

    display: grid;

    grid-template-columns:
        0.7fr 1.3fr;

    gap: 100px;

    margin-top: 50px;

}


.contact-details {

    display: flex;

    flex-direction: column;

    gap: 35px;

}


.contact-details small {

    display: block;

    margin-bottom: 10px;

    color: #444444;

    font-size: 12px;

    letter-spacing: 3px;

}


.contact-details a,
.contact-details span {

    color: #aaaaaa;

    font-size: 16px;

    transition:
        color 0.3s;

}


.contact-details a:hover {

    color: #ffffff;

}


/* =========================================================
   CONTACT FORM
========================================================= */

#contactForm {

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

}


.input-group {

    position: relative;

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

}


.input-group input,
.input-group textarea,
.input-group select {

    width: 100%;

    padding:
        25px 0;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 12px;

}


.input-group textarea {

    resize: vertical;

    min-height: 130px;

}


.input-group select {

    color: #777777;

}


.input-group select option {

    background: #080808;

    color: #ffffff;

}


.input-group label {

    position: absolute;

    top: 25px;

    left: 0;

    color: #444444;

    font-size: 12px;

    letter-spacing: 2px;

    pointer-events: none;

    transition:
        0.3s
        var(--transition);

}


.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label {

    top: 6px;

    font-size: 6px;

    color: #777777;

}


.submit-button {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 30px;

    padding:
        18px 25px;

    border:
        1px solid #ffffff;

    background: #ffffff;

    color: #000000;

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        0.4s
        var(--transition);

}


.submit-button span {

    font-size: 14px;

}


.submit-button:hover {

    background: transparent;

    color: #ffffff;

    transform:
        translateY(-4px);

}


.form-message {

    margin-top: 15px;

    color: #777777;

    font-size: 9px;

    letter-spacing: 1px;

}


/* =========================================================
   RADIAL NAVIGATION
========================================================= */

.radial-nav {

    position: fixed;

    right: 35px;

    bottom: 30px;

    width: 190px;

    height: 190px;

    z-index: 400;

}


.radial-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

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

    font-size: 12px;

    font-weight: 800;

}


.radial-item {

    position: absolute;

    border: none;

    background: transparent;

    color: #444444;

    font-size: 7px;

    letter-spacing: 2px;

    transition:
        0.3s;

}


.radial-item:hover,
.radial-item.active {

    color: #ffffff;

}


.item-home {

    top: 0;

    left: 50%;

    transform:
        translateX(-50%);

}


.item-about {

    top: 35%;

    left: 0;

}


.item-services {

    top: 35%;

    right: 0;

}


.item-portfolio {

    bottom: 10px;

    left: 20%;

}


.item-contact {

    right: 15%;

    bottom: 10px;

}


/* =========================================================
   MENU OVERLAY
========================================================= */

.menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 3000;

    display: flex;

    align-items: center;

    justify-content: center;

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

    opacity: 0;

    visibility: hidden;

    transition:
        0.5s
        var(--transition);

}


.menu-overlay.open {

    opacity: 1;

    visibility: visible;

}


.menu-overlay-inner {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.menu-title {

    margin-bottom: 30px;

    color: #444444;

    font-size: 8px;

    letter-spacing: 4px;

}


.menu-overlay button {

    padding: 0;

    border: none;

    background: none;

    color: #666666;

    text-align: left;

    font-size:
        clamp(35px, 5vw, 65px);

    font-weight: 600;

    letter-spacing: -3px;

    transition:
        0.4s
        var(--transition);

}


.menu-overlay button:hover {

    padding-left: 20px;

    color: #ffffff;

}


/* =========================================================
   DESKTOP HOVER EFFECT
========================================================= */

@media (min-width: 901px) {

    .service-item,
    .project,
    .about-card,
    .explore-button,
    .submit-button,
    .radial-item,
    .menu-button,
    a {

        cursor: none;

    }

}


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

@media (max-width: 1100px) {

    .screen {

        padding:
            120px 7% 80px;

    }


    .core-wrapper {

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

    }


    .about-grid {

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

    }


    .portfolio-container {

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

    }


    .contact-layout {

        gap: 60px;

    }

}


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

@media (max-width: 900px) {

    body {

        cursor: auto;

        overflow: hidden;

    }


    .cursor-dot,
    .cursor-ring,
    .cursor-text {

        display: none;

    }


    .topbar {

        height: 75px;

        padding:
            0 20px;

    }


    .brand-name {

        font-size: 11px;

        letter-spacing: 4px;

    }


    .system-status {

        display: none;

    }


    .side-info {

        display: none;

    }


    .screen {

        padding:
            105px 25px 100px;

    }


    .section-number {

        top: 90px;

        left: 25px;

    }


    .home-content {

        width: 100%;

    }


    .home-content h1 {

        font-size:
            clamp(45px, 13vw, 75px);

        letter-spacing: -4px;

    }


    .home-content p {

        font-size: 11px;

    }


    .core-wrapper {

        opacity: 0.22;

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

    }


    .home-bottom {

        bottom: 20px;

        font-size: 6px;

    }


    .section-content h2 {

        font-size:
            clamp(42px, 11vw, 70px);

        letter-spacing: -4px;

    }


    .about-grid {

        grid-template-columns: 1fr;

    }


    .about-card {

        min-height: 200px;

        border-right: none;

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

    }


    .about-card:last-child {

        border-bottom: none;

    }


    .service-item {

        grid-template-columns:
            40px
            1fr
            30px;

        gap: 15px;

        min-height: 90px;

        padding:
            0 10px;

    }


    .service-item:hover {

        padding-left: 20px;

    }


    .service-description {

        display: none;

    }


    .service-name {

        font-size:
            clamp(22px, 7vw, 38px);

        letter-spacing: -1px;

    }


    .service-detail {

        display: block;

        padding:
            120px 30px 80px;

        overflow-y: auto;

    }


    .detail-content h3 {

        font-size:
            clamp(45px, 13vw, 80px);

    }


    .detail-visual {

        display: none;

    }


    .close-detail {

        top: 25px;

        right: 25px;

    }


    .detail-number {

        top: 25px;

        left: 25px;

    }


    .portfolio-container {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .project-image {

        height: 220px;

    }


    .contact-layout {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .radial-nav {

        right: 0;

        bottom: 0;

        transform:
            scale(0.72);

        transform-origin:
            bottom right;

    }


    .menu-overlay-inner {

        width: 85%;

    }


    .menu-overlay button {

        font-size:
            clamp(32px, 10vw, 55px);

    }

}


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

@media (max-width: 500px) {

    .topbar {

        padding:
            0 15px;

    }


    .brand-symbol {

        width: 30px;

        height: 30px;

    }


    .brand-name {

        font-size: 10px;

        letter-spacing: 3px;

    }


    .menu-button {

        width: 35px;

        height: 35px;

    }


    .screen {

        padding:
            100px 20px 90px;

    }


    .home-content h1 {

        font-size: 48px;

        letter-spacing: -3px;

    }


    .home-content p {

        margin:
            25px auto;

    }


    .explore-button {

        padding:
            15px 18px;

        gap: 20px;

        font-size: 8px;

    }


    .core-wrapper {

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

    }


    .section-content h2 {

        font-size: 47px;

        letter-spacing: -3px;

    }


    .section-intro {

        font-size: 11px;

    }


    .about-card {

        padding: 25px;

    }


    .service-item {

        min-height: 80px;

    }


    .service-index {

        font-size: 8px;

    }


    .service-name {

        font-size: 21px;

    }


    .service-arrow {

        font-size: 16px;

    }


    .project-image {

        height: 190px;

    }


    .project-image strong {

        font-size: 45px;

    }


    .project-info {

        padding: 20px;

    }


    .contact-details {

        gap: 25px;

    }


    .radial-nav {

        transform:
            scale(0.6);

        right: -15px;

        bottom: -15px;

    }

}


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

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

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}

/* LOON TECHNOLOGIES */
.loader-logo img{width:48px;height:48px;object-fit:contain;}
.brand-logo{width:42px;height:42px;object-fit:contain;}
.core-symbol img{width:58px;height:58px;object-fit:contain;}
.radial-center img{width:27px;height:27px;object-fit:contain;}
.item-products{top:0;left:0;}
.project-four::before{background:linear-gradient(135deg,#050505,#333333 50%,#0a0a0a);}
@media (max-width:900px){.item-products{left:8%;top:15%;}}

/* =========================================================
   LOON TECHNOLOGIES - PREMIUM MENU
========================================================= */

.menu-overlay {
    position: fixed;
    inset: 0;

    z-index: 3000;

    background: #030303;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-100%);

    transition:
        transform 0.8s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   OPEN MENU
========================================================= */

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.menu-overlay::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 90px 90px;

    opacity: 0.35;

    pointer-events: none;
}


/* =========================================================
   MAIN MENU CONTAINER
========================================================= */

.menu-overlay-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    padding: 65px 8vw 40px;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.menu-back {
    position: absolute;

    top: 25px;
    right: 35px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

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

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

    color: #666;

    font-family: inherit;

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        0.4s ease;
}


/* BACK ARROW */

.menu-back span {
    font-size: 13px;

    line-height: 1;

    transition:
        transform 0.4s ease;
}


/* BACK HOVER */

.menu-back:hover {
    color: #fff;

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

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


.menu-back:hover span {
    transform:
        translateX(-3px);
}


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

.menu-title {
    margin-bottom: 25px;

    color: #fff;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 5px;
}


/* TITLE SUBTEXT */

.menu-title::after {
    content:
        "DIGITAL • CREATIVE • TECHNOLOGY";

    display: block;

    margin-top: 10px;

    color: #444;

    font-size: 6px;

    font-weight: 400;

    letter-spacing: 2.5px;
}


/* =========================================================
   MENU LINKS CONTAINER
========================================================= */

.menu-links {
    width: 100%;

    max-width: 950px;

    margin-left: auto;
    margin-right: auto;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   MENU LINK
========================================================= */

.menu-links a {
    position: relative;

    display: grid;

    grid-template-columns:
        55px 1fr 40px;

    align-items: center;

    width: 100%;

    padding: 13px 0;

    color: #555;

    text-decoration: none;

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

    transition:
        color 0.4s ease,
        padding-left 0.5s
        cubic-bezier(0.16,1,0.3,1);
}


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

.menu-number {
    color: #444;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    transition:
        color 0.4s ease;
}


/* =========================================================
   MENU NAME
========================================================= */

.menu-name {
    font-size:
        clamp(20px, 2.5vw, 32px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -1px;

    transition:
        transform 0.5s
        cubic-bezier(0.16,1,0.3,1);
}


/* =========================================================
   MENU ARROW
========================================================= */

.menu-arrow {
    justify-self: end;

    font-size: 17px;

    font-weight: 300;

    color: #444;

    opacity: 0;

    transform:
        translate(-10px, 5px);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease,
        color 0.4s ease;
}


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

.menu-links a:hover {
    color: #fff;

    padding-left: 12px;
}


.menu-links a:hover .menu-number {
    color: #fff;
}


.menu-links a:hover .menu-name {
    transform:
        translateX(7px);
}


.menu-links a:hover .menu-arrow {
    opacity: 1;

    color: #fff;

    transform:
        translate(0, 0);
}


/* =========================================================
   MENU FOOTER
========================================================= */

.menu-footer {
    margin-top: auto;

    padding-top: 18px;

    color: #333;

    font-size: 15px;

    letter-spacing: 3px;
}


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

@media (max-width: 800px) {

    .menu-overlay-inner {
        padding:
            70px 25px 30px;
    }


    /* BACK BUTTON */

    .menu-back {
        top: 20px;

        right: 22px;

        padding: 6px 9px;

        font-size: 6px;

        letter-spacing: 1.5px;
    }


    .menu-back span {
        font-size: 11px;
    }


    /* TITLE */

    .menu-title {
        margin-bottom: 25px;

        font-size: 9px;

        letter-spacing: 4px;
    }


    /* LINKS */

    .menu-links a {
        grid-template-columns:
            35px 1fr 30px;

        padding: 12px 0;
    }


    /* NAME */

    .menu-name {
        font-size:
            clamp(19px, 6vw, 30px);

        letter-spacing: -1px;
    }


    /* NUMBER */

    .menu-number {
        font-size: 7px;

        letter-spacing: 1.5px;
    }


    /* ARROW */

    .menu-arrow {
        font-size: 15px;
    }
}


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

@media (max-width: 500px) {

    .menu-overlay-inner {
        padding:
            65px 20px 25px;
    }


    /* BACK BUTTON */

    .menu-back {
        top: 16px;

        right: 17px;

        padding: 5px 8px;

        gap: 5px;

        font-size: 5.5px;

        letter-spacing: 1px;
    }


    .menu-back span {
        font-size: 10px;
    }


    /* TITLE */

    .menu-title {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .menu-title::after {
        margin-top: 8px;

        font-size: 5px;

        letter-spacing: 2px;
    }


    /* LINKS */

    .menu-links a {
        grid-template-columns:
            28px 1fr 25px;

        padding: 10px 0;
    }


    /* NAME */

    .menu-name {
        font-size: 22px;

        letter-spacing: -0.8px;
    }


    /* NUMBER */

    .menu-number {
        font-size: 6px;

        letter-spacing: 1px;
    }


    /* ARROW */

    .menu-arrow {
        font-size: 13px;
    }


    /* FOOTER */

    .menu-footer {
        font-size: 5px;

        letter-spacing: 2px;
    }
}
/* =========================================================
   SMALL BACK BUTTON
========================================================= */

.menu-back {
    top: 60px !important;
    right: 50px !important;

    padding: 4px 7px !important;

    gap: 4px !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    letter-spacing: 1.5px !important;

    line-height: 1 !important;

    width: auto !important;
    height: auto !important;

    transform: none !important;
}

.menu-back span {
    font-size: 9px !important;
    line-height: 1 !important;
}
/* =========================================================
   CONTACT MAP
========================================================= */

.contact-map {
    width: 100%;
    margin-top: 45px;
}


/* MAP HEADER */

.contact-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom: 1px solid
        rgba(255,255,255,0.10);

    margin-bottom: 15px;
}

.contact-map-header span {
    color: #ffffff;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-map-header small {
    color: #444;

    font-size: 6px;

    letter-spacing: 2px;
}


/* MAP */

.map-frame {
    position: relative;

    width: 100%;

    height: 280px;

    overflow: hidden;

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

    background: #050505;
}


/* GOOGLE MAP */

.map-frame iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    filter:
        grayscale(100%)
        invert(90%)
        contrast(85%)
        brightness(70%);

    opacity: 0.75;

    transition:
        filter 0.5s ease,
        opacity 0.5s ease;
}


/* MAP HOVER */

.map-frame:hover iframe {
    filter:
        grayscale(100%)
        invert(90%)
        contrast(95%)
        brightness(80%);

    opacity: 0.9;
}


/* =========================================================
   MAP CORNER DETAILS
========================================================= */

.map-frame::before {
    content: "LOON / LOCATION";

    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 2;

    padding: 7px 10px;

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

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

    color: #777;

    font-size: 6px;

    letter-spacing: 2px;

    pointer-events: none;
}


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

@media (max-width: 800px) {

    .contact-map {
        margin-top: 30px;
    }

    .map-frame {
        height: 240px;
    }

}


@media (max-width: 500px) {

    .contact-map-header span {
        font-size: 7px;
    }

    .contact-map-header small {
        font-size: 5px;
    }

    .map-frame {
        height: 210px;
    }

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

.map-frame iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    /* Black & white by default */
    filter:
        grayscale(100%)
        invert(90%)
        contrast(85%)
        brightness(70%);

    opacity: 0.75;

    transition:
        filter 0.6s ease,
        opacity 0.6s ease;
}


/* =========================================================
   MAP HOVER - ORIGINAL COLOUR
========================================================= */

.map-frame:hover iframe {
    filter: none;

    opacity: 1;
}
/* =========================================================
   LOON TECHNOLOGIES — UNIQUE FOOTER
========================================================= */

.loon-footer {

    position: relative;

    width: 100%;

    background: #030303;

    color: #fff;

    overflow: hidden;

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

}


/* =========================================================
   FOOTER CTA
========================================================= */

.footer-cta {

    position: relative;

    padding:
        110px 8vw
        100px;

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

    overflow: hidden;
}


/* GRID BACKGROUND */

.footer-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    opacity: .6;

    pointer-events: none;

}


/* GLOW */

.footer-cta::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    bottom: -300px;

    border-radius: 50%;

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

    filter: blur(80px);

    pointer-events: none;

}


/* CTA LABEL */

.footer-cta-label {

    position: relative;

    z-index: 2;

    margin-bottom: 25px;

    color: #555;

    font-size: 7px;

    letter-spacing: 4px;

}


/* CTA TITLE */

.footer-cta h2 {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0;

    font-size:
        clamp(45px, 8vw, 120px);

    line-height: .9;

    font-weight: 700;

    letter-spacing: -6px;

    color: #fff;

}


.footer-cta h2 span {

    display: block;

    color: #444;

    transition:
        color .5s ease;

}


.footer-cta:hover h2 span {

    color: #fff;

}


/* CTA BUTTON */

.footer-cta-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 40px;

    padding:
        13px 18px;

    color: #777;

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

    text-decoration: none;

    font-size: 7px;

    letter-spacing: 2px;

    transition:
        .4s ease;

}


.footer-cta-button span {

    font-size: 15px;

    transition:
        transform .4s ease;

}


.footer-cta-button:hover {

    color: #fff;

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

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

}


.footer-cta-button:hover span {

    transform:
        translate(4px,-4px);

}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {

    display: grid;

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

    gap: 60px;

    padding:
        70px 8vw;

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

}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {

    max-width: 320px;

}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;

}


.footer-logo img {

    width: 38px;

    height: 38px;

    object-fit: contain;

}


.footer-logo span {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.footer-brand p {

    margin-top: 25px;

    max-width: 290px;

    color: #555;

    font-size: 9px;

    line-height: 1.8;

}


/* STATUS */

.footer-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    color: #555;

    font-size: 6px;

    letter-spacing: 2px;

}


.footer-status-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px
        rgba(255,255,255,.8);

}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-column small {

    margin-bottom: 22px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;

}


.footer-column a,
.footer-column span {

    margin-bottom: 12px;

    color: #666;

    font-size: 8px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;

}


.footer-column a:hover {

    color: #fff;

    transform:
        translateX(5px);

}


.footer-contact a {

    word-break: break-word;

}


/* =========================================================
   LARGE MARQUEE
========================================================= */

.footer-marquee {

    width: 100%;

    overflow: hidden;

    padding:
        25px 0;

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

}


.footer-marquee-track {

    display: flex;

    align-items: center;

    gap: 30px;

    width: max-content;

    animation:
        footerMarquee
        25s linear infinite;

}


.footer-marquee-track span {

    color: #151515;

    font-size:
        clamp(55px, 9vw, 130px);

    line-height: .8;

    font-weight: 800;

    letter-spacing: -5px;

    white-space: nowrap;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.08);

}


/* MARQUEE ANIMATION */

@keyframes footerMarquee {

    from {
        transform:
            translateX(0);
    }

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

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    position: relative;

    display: flex;

    align-items: center;

    gap: 35px;

    padding:
        22px 8vw;

    color: #333;

    font-size: 15px;

    letter-spacing: 2px;

}


.footer-bottom > span:nth-child(2) {

    margin-left: auto;

}


/* =========================================================
   SOCIAL
========================================================= */

.footer-socials {

    display: flex;

    gap: 7px;

}


.footer-socials a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

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

    color: #555;

    font-size: 6px;

    text-decoration: none;

    transition:
        .3s ease;

}


.footer-socials a:hover {

    color: #fff;

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

}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-top {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    margin-left: auto;

    background: transparent;

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

    color: #555;

    font-size: 13px;

    cursor: pointer;

    transition:
        .4s ease;

}


.footer-top:hover {

    color: #fff;

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

    transform:
        translateY(-3px);

}


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

@media (max-width: 900px) {

    .footer-main {

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

        gap: 50px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

        max-width: 500px;

    }


    .footer-cta {

        padding:
            80px 6vw;

    }


    .footer-main {

        padding:
            55px 6vw;

    }

}


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

@media (max-width: 600px) {

    .footer-cta {

        padding:
            65px 25px
            70px;

    }


    .footer-cta h2 {

        font-size:
            clamp(42px, 14vw, 70px);

        letter-spacing:
            -3px;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            45px 25px;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-bottom {

        flex-wrap: wrap;

        gap: 15px;

        padding:
            20px 25px;

    }


    .footer-bottom > span:nth-child(2) {

        margin-left: 0;

        width: 100%;

    }


    .footer-top {

        margin-left: auto;

    }


    .footer-marquee-track span {

        font-size: 60px;

    }

}
/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    color: #555;
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;

    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}
/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page-content {
    max-width: 1200px;
}


/* =========================================================
   ABOUT HEADING
========================================================= */

.about-heading {
    max-width: 900px;

    margin: 15px 0 25px;

    font-size:
        clamp(45px, 7vw, 100px);

    line-height: 0.9;

    font-weight: 700;

    letter-spacing: -5px;

    color: #fff;
}

.about-heading span {
    display: block;

    color: #555;

    transition:
        color 0.5s ease;
}

.about-heading:hover span {
    color: #fff;
}


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

.about-intro {
    max-width: 650px;

    margin-bottom: 55px;
}


/* =========================================================
   ABOUT STATEMENT
========================================================= */

.about-statement {

    position: relative;

    padding:
        35px 0;

    margin-bottom: 45px;

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

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);
}


.about-statement-number {

    margin-bottom: 18px;

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


.about-statement h2 {

    max-width: 850px;

    margin: 0;

    color: #777;

    font-size:
        clamp(25px, 4vw, 48px);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -2px;
}


.about-statement h2 span {

    color: #fff;
}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-grid {

    display: grid;

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

    gap: 1px;

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

    margin-bottom: 55px;
}


.about-card {

    position: relative;

    min-height: 240px;

    padding: 25px;

    background: #030303;

    overflow: hidden;

    transition:
        background 0.5s ease;
}


.about-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.05),
            transparent 50%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;
}


.about-card:hover {

    background: #080808;
}


.about-card:hover::before {

    opacity: 1;
}


.about-card strong {

    position: relative;

    color: #444;

    font-size: 8px;

    letter-spacing: 2px;
}


.about-card-label {

    position: relative;

    margin-top: 35px;

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


.about-card h3 {

    position: relative;

    margin:
        8px 0 15px;

    color: #fff;

    font-size: 27px;

    letter-spacing: -1px;
}


.about-card p {

    position: relative;

    max-width: 280px;

    margin: 0;

    color: #555;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.about-values {

    width: 100%;

    margin-bottom: 60px;
}


.about-values-title {

    margin-bottom: 15px;

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


.about-value-row {

    display: grid;

    grid-template-columns:
        60px 220px 1fr;

    align-items: center;

    gap: 20px;

    padding: 18px 0;

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

    transition:
        padding-left 0.4s ease;
}


.about-value-row:last-child {

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


.about-value-row:hover {

    padding-left: 10px;
}


.about-value-row span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.about-value-row strong {

    color: #777;

    font-size: 11px;

    letter-spacing: 2px;

    transition:
        color 0.3s ease;
}


.about-value-row:hover strong {

    color: #fff;
}


.about-value-row p {

    margin: 0;

    color: #444;

    font-size: 8px;
}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding:
        45px 0;

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


.about-cta small {

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


.about-cta h2 {

    max-width: 650px;

    margin:
        12px 0 0;

    color: #fff;

    font-size:
        clamp(25px, 4vw, 48px);

    line-height: 0.95;

    letter-spacing: -2px;
}


.about-cta h2 span {

    color: #555;
}


.about-cta-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 16px;

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

    color: #666;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        0.4s ease;
}


.about-cta-button span {

    font-size: 14px;

    transition:
        transform 0.4s ease;
}


.about-cta-button:hover {

    color: #fff;

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

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


.about-cta-button:hover span {

    transform:
        translate(3px,-3px);
}


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

@media (max-width: 800px) {

    .about-heading {

        font-size:
            clamp(40px, 9vw, 70px);

        letter-spacing:
            -3px;
    }


    .about-grid {

        grid-template-columns:
            1fr;
    }


    .about-card {

        min-height: 200px;
    }


    .about-value-row {

        grid-template-columns:
            45px 150px 1fr;
    }


    .about-cta {

        align-items: flex-start;

        flex-direction: column;
    }

}


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

@media (max-width: 500px) {

    .about-heading {

        font-size: 40px;

        letter-spacing: -2px;
    }


    .about-intro {

        margin-bottom: 35px;
    }


    .about-statement {

        padding:
            25px 0;
    }


    .about-statement h2 {

        font-size: 25px;

        letter-spacing: -1px;
    }


    .about-card {

        min-height: auto;

        padding: 20px;
    }


    .about-card h3 {

        font-size: 24px;
    }


    .about-value-row {

        grid-template-columns:
            30px 1fr;

        gap: 10px;
    }


    .about-value-row p {

        grid-column:
            2;

        margin-top: 3px;
    }


    .about-cta h2 {

        font-size: 30px;
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   SERVICES PAGE
========================================================= */

.services-content {

    width: min(1200px, 86vw);

    margin: 0 auto;

    padding-top: 0px;

    padding-bottom: 100px;
}


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

.services-title {

    max-width: 1000px;

    margin: 15px 0 25px;

    color: #fff;

    font-size:
        clamp(45px, 7vw, 95px);

    line-height: .88;

    font-weight: 700;

    letter-spacing: -5px;
}


.services-title span {

    display: block;

    color: #444;

    transition:
        color .5s ease;
}


.services-title:hover span {

    color: #fff;
}


.services-intro {

    max-width: 700px;

    color: #555;

    line-height: 1.8;

    margin-bottom: 45px;
}


/* =========================================================
   INTRO STATS
========================================================= */

.service-intro-stats {

    display: grid;

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

    margin-bottom: 70px;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.service-intro-stats > div {

    padding: 25px;

    border-right:
        1px solid
        rgba(255,255,255,.08);
}


.service-intro-stats > div:last-child {

    border-right: none;
}


.service-intro-stats strong {

    display: block;

    color: #fff;

    font-size: 32px;

    font-weight: 500;

    letter-spacing: -2px;

    margin-bottom: 8px;
}


.service-intro-stats span {

    color: #444;

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.service-section-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    margin-bottom: 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.service-section-heading span {

    color: #fff;

    font-size: 7px;

    letter-spacing: 3px;
}


.service-section-heading small {

    color: #444;

    font-size: 6px;

    letter-spacing: 2px;
}


/* =========================================================
   SERVICE INTERFACE
========================================================= */

.service-interface {

    width: 100%;
}


.service-item {

    position: relative;

    display: grid;

    grid-template-columns:
        60px
        minmax(280px, 1.4fr)
        minmax(190px, .8fr)
        40px;

    align-items: center;

    gap: 25px;

    min-height: 170px;

    padding: 25px 0;

    color: #555;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    overflow: hidden;

    transition:
        color .4s ease,
        padding-left .5s
        cubic-bezier(.16,1,.3,1);
}


.service-item::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.045),
            transparent 75%
        );

    opacity: 0;

    transform: translateX(-30px);

    transition:
        .5s ease;

    pointer-events: none;
}


.service-item:hover {

    color: #fff;

    padding-left: 15px;
}


.service-item:hover::before {

    opacity: 1;

    transform: translateX(0);
}


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

.service-index {

    position: relative;

    z-index: 2;

    color: #444;

    font-size: 8px;

    letter-spacing: 3px;

    transition:
        color .3s ease;
}


.service-item:hover .service-index {

    color: #fff;
}


/* =========================================================
   SERVICE MAIN
========================================================= */

.service-main {

    position: relative;

    z-index: 2;
}


.service-label {

    margin-bottom: 8px;

    color: #3c3c3c;

    font-size: 6px;

    letter-spacing: 2px;
}


.service-name {

    color: #666;

    font-size:
        clamp(25px, 3vw, 43px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -2px;

    transition:
        color .4s ease,
        transform .5s ease;
}


.service-item:hover .service-name {

    color: #fff;

    transform:
        translateX(5px);
}


.service-description {

    max-width: 520px;

    margin: 14px 0 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SERVICE FEATURES
========================================================= */

.service-features {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.service-features span {

    color: #3c3c3c;

    font-size: 12px;

    letter-spacing: 1.5px;

    transition:
        .3s ease;
}


.service-item:hover
.service-features span {

    color: #666;

    transform:
        translateX(3px);
}


/* =========================================================
   SERVICE ARROW
========================================================= */

.service-arrow {

    position: relative;

    z-index: 2;

    justify-self: end;

    color: #444;

    font-size: 22px;

    opacity: 0;

    transform:
        translate(-15px,10px);

    transition:
        opacity .4s ease,
        transform .5s ease;
}


.service-item:hover .service-arrow {

    opacity: 1;

    color: #fff;

    transform:
        translate(0,0);
}


/* =========================================================
   WHAT WE SOLVE
========================================================= */

.solve-section {

    margin-top: 80px;
}


.solve-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.solve-card {

    min-height: 270px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}


.solve-card:hover {

    background: #080808;
}


.solve-card > span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.solve-card h3 {

    margin:
        55px 0 15px;

    color: #777;

    font-size: 20px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}


.solve-card:hover h3 {

    color: #fff;
}


.solve-card p {

    max-width: 450px;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


.solve-card strong {

    display: block;

    margin-top: 25px;

    color: #555;

    font-size: 12px;

    letter-spacing: 1.5px;
}


/* =========================================================
   WHY LOON
========================================================= */

.why-loon {

    margin-top: 80px;
}


.why-loon-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.why-loon-card {

    min-height: 250px;

    padding: 28px;

    background: #030303;

    transition:
        background .4s ease;
}


.why-loon-card:hover {

    background: #080808;
}


.why-loon-card > span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.why-loon-card h3 {

    margin:
        55px 0 15px;

    color: #777;

    font-size: 18px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}


.why-loon-card:hover h3 {

    color: #fff;
}


.why-loon-card p {

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PROCESS
========================================================= */

.services-process {

    margin-top: 80px;
}


.process-line {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.process-step {

    position: relative;

    min-height: 260px;

    padding: 28px;

    background: #030303;
}


.process-step-number {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.process-step h3 {

    margin:
        55px 0 15px;

    color: #777;

    font-size: 19px;

    letter-spacing: -1px;
}


.process-step p {

    max-width: 220px;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


.process-step::after {

    content: "→";

    position: absolute;

    right: 20px;

    top: 25px;

    color: #333;

    font-size: 16px;
}


.process-step:last-child::after {

    content: "✓";
}


/* =========================================================
   CAPABILITIES
========================================================= */

.service-capabilities {

    margin-top: 80px;
}


.capability-list {

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.capability-item {

    display: grid;

    grid-template-columns:
        150px
        1fr
        30px;

    align-items: center;

    gap: 20px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        padding-left .4s ease;
}


.capability-item:last-child {

    border-bottom: none;
}


.capability-item:hover {

    padding-left: 10px;
}


.capability-item span {

    color: #444;

    font-size: 15px;

    letter-spacing: 2px;
}


.capability-item strong {

    color: #666;

    font-size: 12px;

    font-weight: 400;

    transition:
        color .3s ease;
}


.capability-item:hover strong {

    color: #fff;
}


.capability-item b {

    color: #444;

    font-size: 16px;

    font-weight: 300;

    opacity: 0;

    transform:
        translateX(-8px);

    transition:
        .4s ease;
}


.capability-item:hover b {

    opacity: 1;

    color: #fff;

    transform:
        translateX(0);
}


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

.technology-section {

    margin-top: 80px;
}


.technology-content {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    padding:
        55px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.technology-text h2 {

    margin: 0;

    color: #666;

    font-size:
        clamp(30px,4vw,55px);

    line-height: .95;

    letter-spacing: -3px;
}


.technology-text h2 span {

    color: #fff;
}


.technology-text p {

    max-width: 500px;

    margin-top: 25px;

    color: #444;

    font-size: 16px;

    line-height: 1.9;
}


.technology-tags {

    display: flex;

    align-content: flex-start;

    flex-wrap: wrap;

    gap: 8px;

    padding-top: 5px;
}


.technology-tags span {

    padding:
        10px 13px;

    border:
        1px solid
        rgba(255,255,255,.10);

    color: #555;

    font-size: 16px;

    letter-spacing: 1.5px;

    transition:
        .3s ease;
}


.technology-tags span:hover {

    color: #fff;

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

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


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {

    margin-top: 80px;
}


.industries-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.industry {

    min-height: 220px;

    padding: 25px;

    background: #030303;

    transition:
        background .4s ease;
}


.industry:hover {

    background: #080808;
}


.industry > span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.industry h3 {

    margin:
        50px 0 12px;

    color: #777;

    font-size: 16px;

    letter-spacing: -1px;
}


.industry p {

    max-width: 260px;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SERVICE STATEMENT
========================================================= */

.services-statement {

    display: grid;

    grid-template-columns:
        150px 1fr;

    gap: 35px;

    margin-top: 80px;

    padding:
        65px 0;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.services-statement-number {

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


.services-statement h2 {

    max-width: 800px;

    margin: 0;

    color: #666;

    font-size:
        clamp(30px,4vw,55px);

    line-height: .95;

    letter-spacing: -3px;
}


.services-statement h2 span {

    color: #fff;
}


.services-statement p {

    max-width: 650px;

    color: #444;

    font-size: 16px;

    line-height: 1.9;
}


.services-statement p:first-of-type {

    margin-top: 30px;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.services-final {

    margin-top: 80px;

    padding:
        65px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.services-final-label {

    margin-bottom: 20px;

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


.services-final h2 {

    max-width: 1000px;

    margin: 0;

    color: #666;

    font-size:
        clamp(32px,5vw,70px);

    line-height: .93;

    letter-spacing: -4px;
}


.services-final h2 span {

    color: #fff;
}


/* =========================================================
   CTA
========================================================= */

.services-cta {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    padding:
        70px 0;
}


.services-cta small {

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


.services-cta h2 {

    margin:
        12px 0 0;

    color: #fff;

    font-size:
        clamp(35px,5vw,65px);

    line-height: .9;

    letter-spacing: -3px;
}


.services-cta h2 span {

    color: #444;
}


.services-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        13px 17px;

    border:
        1px solid
        rgba(255,255,255,.15);

    color: #666;

    text-decoration: none;

    font-size: 7px;

    letter-spacing: 2px;

    transition:
        .4s ease;
}


.services-cta-button span {

    font-size: 15px;

    transition:
        transform .4s ease;
}


.services-cta-button:hover {

    color: #fff;

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

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


.services-cta-button:hover span {

    transform:
        translate(4px,-4px);
}


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

@media (max-width: 1000px) {

    .service-item {

        grid-template-columns:
            50px
            1fr
            35px;
    }


    .service-features {

        display: none;
    }


    .why-loon-grid {

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


    .process-line {

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


    .technology-content {

        grid-template-columns:
            1fr;
    }


    .industries-grid {

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

}


@media (max-width: 600px) {

    .services-content {

        width: calc(100% - 40px);

        padding-top: 90px;

        padding-bottom: 70px;
    }


    .services-title {

        font-size: 42px;

        letter-spacing: -2px;
    }


    .services-intro {

        font-size: 8px;

        margin-bottom: 35px;
    }


    .service-intro-stats {

        grid-template-columns:
            1fr;
    }


    .service-intro-stats > div {

        border-right: none;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .service-intro-stats > div:last-child {

        border-bottom: none;
    }


    .service-item {

        grid-template-columns:
            30px
            1fr
            25px;

        min-height: 135px;

        gap: 10px;

        padding:
            20px 0;
    }


    .service-item:hover {

        padding-left: 7px;
    }


    .service-name {

        font-size: 23px;

        letter-spacing: -1px;
    }


    .service-description {

        font-size: 7px;

        line-height: 1.7;
    }


    .service-arrow {

        font-size: 17px;
    }


    .solve-grid {

        grid-template-columns:
            1fr;
    }


    .why-loon-grid {

        grid-template-columns:
            1fr;
    }


    .process-line {

        grid-template-columns:
            1fr;
    }


    .process-step {

        min-height: 200px;
    }


    .capability-item {

        grid-template-columns:
            80px
            1fr
            20px;

        gap: 10px;
    }


    .capability-item strong {

        font-size: 7px;

        line-height: 1.6;
    }


    .technology-content {

        gap: 35px;

        padding:
            40px 0;
    }


    .technology-text h2 {

        font-size: 32px;

        letter-spacing: -1.5px;
    }


    .industries-grid {

        grid-template-columns:
            1fr;
    }


    .services-statement {

        display: block;

        padding:
            45px 0;
    }


    .services-statement-number {

        margin-bottom: 25px;
    }


    .services-statement h2 {

        font-size: 32px;

        letter-spacing: -1.5px;
    }


    .services-statement p {

        font-size: 8px;
    }


    .services-final {

        padding:
            45px 0;
    }


    .services-final h2 {

        font-size: 34px;

        letter-spacing: -2px;
    }


    .services-cta {

        flex-direction: column;

        align-items: flex-start;

        padding:
            50px 0;
    }


    .services-cta h2 {

        font-size: 38px;

        letter-spacing: -2px;
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   BRANDING PAGE
========================================================= */

.branding-content {

    width: min(1200px, 86vw);

    margin: 0 auto;

    padding-top: 50px;

    padding-bottom: 100px;
}


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

.branding-hero {

    min-height: 620px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    align-items: center;

    gap: 50px;
}


.branding-hero-left {

    position: relative;

    z-index: 2;
}


.branding-hero h1 {

    margin:
        18px 0 25px;

    color: #fff;
	    font-size: clamp(55px, 8vw, 110px);
	    line-height: 0.84;
	    font-weight: 800;
	    letter-spacing: -6px;

}


.branding-hero h1 span {

    display: block;
    color: transparent;
	    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);

}





.branding-intro {

    max-width: 570px;

    margin-bottom: 30px;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   TAGS
========================================================= */

.branding-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-width: 650px;
}


.branding-tags span {

    padding:
        10px 13px;

    border:
        1px solid
        rgba(255,255,255,.12);

    color: #555;

    font-size: 12px;

    letter-spacing: 1.5px;

    transition:
        .35s ease;
}


.branding-tags span:hover {

    color: #fff;

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

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

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.branding-visual {

    position: relative;

    height: 470px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.025),
            transparent 55%
        );
}


.visual-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;
}


.visual-circle {

    position: absolute;

    left: 50%;

    top: 50%;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

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

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


.circle-one {

    width: 160px;

    height: 160px;
}


.circle-two {

    width: 260px;

    height: 260px;

    animation-delay: .7s;
}


.circle-three {

    width: 360px;

    height: 360px;

    animation-delay: 1.4s;
}


.visual-line {

    position: absolute;

    left: 0;

    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,.25);
}


.visual-line::after {

    content: "";

    position: absolute;

    left: 50%;

    top: -70px;

    width: 1px;

    height: 140px;

    background:
        rgba(255,255,255,.2);
}


.visual-center {

    position: absolute;

    left: 50%;

    top: 50%;

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

    color: #fff;

    font-size: 10px;

    letter-spacing: 4px;
}


.visual-label {

    position: absolute;

    left: 25px;

    bottom: 20px;

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


@keyframes brandingPulse {

    0%,
    100% {

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

        opacity: .7;
    }

    50% {

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

        opacity: .3;
    }

}


/* =========================================================
   BRANDING SHOWCASE IMAGE
========================================================= */

.branding-showcase {

    margin-top: 30px;
}


.showcase-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}


.showcase-header span {

    color: #fff;

    font-size: 7px;

    letter-spacing: 3px;
}


.showcase-header small {

    color: #444;

    font-size: 6px;

    letter-spacing: 2px;
}


.branding-image-frame {

    position: relative;

    width: 100%;

    margin-top: 25px;

    overflow: hidden;

    background: #050505;

    border:
        1px solid
        rgba(255,255,255,.08);
}


.branding-image-frame img {

    display: block;

    width: 100%;

    height: auto;

    filter:
        grayscale(100%)
        brightness(.65);

    transition:
        transform 1s
        cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}


.branding-image-frame:hover img {

    transform:
        scale(1.025);

    filter:
        grayscale(0%)
        brightness(.85);
}


.image-overlay {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    pointer-events: none;
}


.image-overlay span {

    color: #fff;

    font-size: 7px;

    letter-spacing: 3px;
}


.image-overlay small {

    color: #777;

    font-size: 6px;

    letter-spacing: 2px;
}


.showcase-caption {

    display: grid;

    grid-template-columns:
        180px 1fr;

    gap: 30px;

    padding:
        20px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.showcase-caption span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.showcase-caption p {

    max-width: 650px;

    margin: 0;

    color: #444;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   STORY
========================================================= */

.branding-story {

    display: grid;

    grid-template-columns:
        180px 1fr;

    gap: 40px;

    padding:
        90px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}


.story-number {

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


.small-label {

    margin-bottom: 18px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.story-content h2 {

    max-width: 800px;

    margin: 0;

    color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;

}


.story-content h2 span {

     color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


.story-content p {

    max-width: 650px;

    color: #666666;
    font-size: 16px;

    line-height: 1.9;
}


.story-content p:first-of-type {

    margin-top: 35px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}


.section-heading span {

    color: #fff;

    font-size: 15px;

    letter-spacing: 3px;
}


.section-heading small {

    color: #444;

    font-size: 6px;

    letter-spacing: 2px;
}


/* =========================================================
   PROCESS
========================================================= */

.branding-process {

    padding-top: 80px;
}


.branding-process-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.process-card {

    min-height: 250px;

    padding: 28px;

    background: #030303;

    transition:
        background .4s ease;
}


.process-card:hover {

    background: #080808;
}


.process-card > span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.process-card h3 {

    margin:
        55px 0 15px;

    color: #777;

    font-size: 19px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}


.process-card:hover h3 {

    color: #fff;
}


.process-card p {

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.branding-capabilities {

    padding-top: 80px;
}


.capability-list {

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.capability-row {

    display: grid;

    grid-template-columns:
        50px
        230px
        1fr
        30px;

    gap: 20px;

    align-items: center;

    padding:
        22px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        padding-left .4s ease;
}


.capability-row:last-child {

    border-bottom: none;
}


.capability-row:hover {

    padding-left: 10px;
}


.capability-row > span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.capability-row strong {

    color: #666;

    font-size: 14px;

    font-weight: 500;
}


.capability-row p {

    margin: 0;

    color: #666666;

    font-size: 17px;

    line-height: 1.7;
}


.capability-row b {

    color: #444;

    opacity: 0;

    transition:
        .3s ease;
}


.capability-row:hover b {

    color: #fff;

    opacity: 1;
}


/* =========================================================
   BRAND EXPERIENCE
========================================================= */

.brand-experience {

    padding-top: 80px;
}


.experience-grid {

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}


.experience-grid > div {

    min-height: 220px;

    padding: 28px;

    background: #030303;
}


.experience-grid span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.experience-grid h3 {

    margin:
        50px 0 12px;

    color: #777;

    font-size: 17px;
}


.experience-grid p {

    color: #666666;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   STATEMENT
========================================================= */

.branding-statement {

    padding:
        90px 0;

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

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

    margin-top: 80px;
}


.statement-label {

    margin-bottom: 25px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.branding-statement h2 {

    max-width: 950px;

    margin: 0;
color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;                                               

}


.branding-statement h2 span {

 color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


.branding-statement p {

    max-width: 600px;

    margin-top: 35px;

    color: #444;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   CTA
========================================================= */

.branding-cta {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    padding:
        70px 0;
}


.branding-cta small {

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.branding-cta h2 {

    max-width: 700px;

    margin:
        15px 0 0;

   color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;                                               

}


.branding-cta h2 span {

    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


.branding-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    padding:
        13px 17px;

    color: #666;

    border:
        1px solid
        rgba(255,255,255,.15);

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        .4s ease;
}


.branding-cta-button span {

    font-size: 16px;

    transition:
        transform .4s ease;
}


.branding-cta-button:hover {

    color: #fff;

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

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


.branding-cta-button:hover span {

    transform:
        translate(4px,-4px);
}


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

@media (max-width: 1000px) {

    .branding-hero {

        grid-template-columns:
            1fr;

        min-height: auto;

        padding-top: 50px;
    }


    .branding-visual {

        height: 400px;

        margin-top: 30px;
    }


    .branding-process-grid {

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


    .experience-grid {

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

}


@media (max-width: 650px) {

    .branding-content {

        width: calc(100% - 40px);

        padding-top: 90px;
    }


    .branding-hero h1 {

        font-size: 58px;

        letter-spacing: -3px;
    }


    .branding-visual {

        height: 300px;
    }


    .circle-one {

        width: 110px;

        height: 110px;
    }


    .circle-two {

        width: 180px;

        height: 180px;
    }


    .circle-three {

        width: 250px;

        height: 250px;
    }


    .branding-image-frame img {

        min-height: 230px;

        object-fit: cover;
    }


    .showcase-caption {

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .branding-story {

        display: block;

        padding:
            60px 0;
    }


    .story-number {

        margin-bottom: 25px;
    }


    .story-content h2 {

        font-size: 40px;

        letter-spacing: -2px;
    }


    .branding-process-grid {

        grid-template-columns:
            1fr;
    }


    .capability-row {

        grid-template-columns:
            30px
            1fr
            20px;

        gap: 10px;
    }


    .capability-row p {

        grid-column:
            2 / 4;
    }


    .experience-grid {

        grid-template-columns:
            1fr;
    }


    .branding-statement {

        padding:
            60px 0;
    }


    .branding-statement h2 {

        font-size: 42px;

        letter-spacing: -2px;
    }


    .branding-cta {

        flex-direction: column;

        align-items: flex-start;

        padding:
            55px 0;
    }


    .branding-cta h2 {

        font-size: 40px;

        letter-spacing: -2px;
    }

}
/* =========================================================
   SERVICE LINKS
========================================================= */

.service-item {
    display: grid;

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

    align-items: center;

    width: 100%;

    padding: 24px 0;

    color: #555;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);

    cursor: pointer;

    transition:
        color 0.4s ease,
        padding-left 0.5s
        cubic-bezier(0.16,1,0.3,1),
        border-color 0.4s ease;
}


/* NUMBER */

.service-index {
    color: #444;

    font-size: 10px;

    letter-spacing: 3px;

    transition:
        color 0.4s ease;
}


/* SERVICE NAME */

.service-name {
    color: #555;

    font-size:
        clamp(22px, 3vw, 42px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1.5px;

    transition:
        transform 0.5s
        cubic-bezier(0.16,1,0.3,1),
        color 0.4s ease;
}


/* DESCRIPTION */

.service-description {
    color: #444;

    font-size: 16px;

    line-height: 1.7;

    letter-spacing: 1px;

    max-width: 300px;

    transition:
        color 0.4s ease;
}


/* ARROW */

.service-arrow {
    justify-self: end;

    color: #444;

    font-size: 22px;

    opacity: 0;

    transform:
        translate(-15px, 10px);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease,
        color 0.4s ease;
}


/* HOVER */

.service-item:hover {
    color: #fff;

    padding-left: 18px;

    border-color:
        rgba(255,255,255,0.35);
}


.service-item:hover .service-index {
    color: #fff;
}


.service-item:hover .service-name {
    color: #fff;

    transform:
        translateX(8px);
}


.service-item:hover .service-description {
    color: #aaa;
}


.service-item:hover .service-arrow {
    opacity: 1;

    color: #fff;

    transform:
        translate(0, 0);
}


/* =========================================================
   SERVICES BOTTOM
========================================================= */

.services-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 28px;

    color: #333;

    font-size: 7px;

    letter-spacing: 3px;
}


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

@media (max-width: 800px) {

    .service-item {

        grid-template-columns:
            40px
            1fr
            35px;

        padding: 18px 0;
    }

    .service-name {

        font-size:
            clamp(20px, 6vw, 32px);

        letter-spacing: -1px;
    }

    .service-description {

        display: none;
    }

    .service-arrow {

        font-size: 18px;
    }

    .services-bottom {

        gap: 15px;

        flex-wrap: wrap;

        font-size: 6px;
    }

}


/* SMALL MOBILE */

@media (max-width: 500px) {

    .service-item {

        grid-template-columns:
            30px
            1fr
            25px;

        padding: 15px 0;
    }

    .service-index {

        font-size: 7px;
    }

    .service-name {

        font-size: 22px;

        letter-spacing: -0.8px;
    }

    .service-arrow {

        font-size: 16px;
    }

    .services-bottom {

        display: none;
    }

}
    /* =========================================================
   LOON TECHNOLOGIES
   DIGITAL MARKETING PAGE
   COMPLETE CSS
========================================================= */


/* =========================================================
   MAIN CONTENT WRAPPER
========================================================= */

.digital-marketing-content {
    width: min(1200px, 86vw);
    margin: 0 auto;

    padding-top: 0px;
    padding-bottom: 100px;

    box-sizing: border-box;
}


/* =========================================================
   COMMON SECTION SETTINGS
========================================================= */

.digital-marketing-content > section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;

    box-sizing: border-box;
}


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

.dm-hero {
    width: 100%;
    min-height: 620px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 60px;

    padding-top: 20px;
    padding-bottom: 90px;

    box-sizing: border-box;
}


.dm-hero-content {
    width: 100%;
    position: relative;
    z-index: 2;
}


.dm-hero h1 {
    margin: 20px 0 25px;

    color: #fff;

    font-size:
        clamp(58px, 8vw, 115px);

      line-height: 0.84;
	    font-weight: 800;
	    letter-spacing: -6px;

}


.dm-hero h1 span {
  display: block;
	    color: transparent;
	    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);

}





.dm-hero-intro {
    max-width: 560px;

    margin:
        0 0 30px;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   DIGITAL MARKETING TAGS
========================================================= */

.dm-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-width: 620px;
}


.dm-tags span {
    padding:
        10px 14px;

    color: #555;

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

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        0.35s ease;
}


.dm-tags span:hover {
    color: #fff;

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

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

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.dm-hero-visual {
    position: relative;

    width: 100%;
    height: 480px;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.035),
            transparent 60%
        );

    box-sizing: border-box;
}


/* =========================================================
   HERO GRID
========================================================= */

.dm-grid {
    position: absolute;

    inset: 0;

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

    background-size:
        55px 55px;
}


/* =========================================================
   GROWTH ORBITS
========================================================= */

.growth-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

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

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


.orbit-a {
    width: 150px;
    height: 150px;
}


.orbit-b {
    width: 250px;
    height: 250px;

    animation-delay:
        0.7s;
}


.orbit-c {
    width: 350px;
    height: 350px;

    animation-delay:
        1.4s;
}


@keyframes dmOrbitPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 0.7;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.04);

        opacity: 0.3;
    }

}


/* =========================================================
   VISUAL LINES
========================================================= */

.growth-line {
    position: absolute;

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


.line-horizontal {
    left: 0;
    right: 0;

    top: 50%;

    height: 1px;
}


.line-vertical {
    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;
}


/* =========================================================
   GROWTH POINTS
========================================================= */

.growth-point {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #fff;

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

    animation:
        pointPulse
        3s
        ease-in-out
        infinite;
}


.point-one {
    top: 29%;
    left: 36%;
}


.point-two {
    top: 66%;
    left: 67%;

    animation-delay:
        0.8s;
}


.point-three {
    top: 40%;
    left: 76%;

    animation-delay:
        1.5s;
}


@keyframes pointPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            0.35;
    }

    50% {
        transform:
            scale(1.8);

        opacity:
            1;
    }

}


/* =========================================================
   GROWTH CORE
========================================================= */

.growth-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 110px;
    height: 110px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

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

    border-radius: 50%;

    background:
        rgba(0,0,0,0.5);
}


.growth-core span {
    color: #555;

    font-size: 6px;

    letter-spacing: 3px;
}


.growth-core strong {
    margin-top: 8px;

    color: #fff;

    font-size: 20px;

    font-weight: 400;
}


.visual-status {
    position: absolute;

    left: 20px;
    bottom: 18px;

    color: #444;

    font-size: 6px;

    letter-spacing: 3px;
}


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

.dm-introduction {
    width: 100%;

    display: grid;

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

    gap: 50px;

    padding:
        90px 0;

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

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

    box-sizing: border-box;
}


.dm-section-label {
    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-top: 3px;
}


.dm-section-label span {
    color: #fff;

    font-size: 7px;

    letter-spacing: 3px;
}


.dm-section-label small {
    color: #333;

    font-size: 6px;

    letter-spacing: 2px;
}


.dm-intro-content {
    width: 100%;
}


.dm-intro-content h2 {
    max-width: 900px;

    margin: 0;

   color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;                                               


    font-size:
        clamp(40px, 6vw, 76px);

    
}


.dm-intro-content h2 span {
  color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


.dm-intro-content p {
    max-width: 680px;

    margin:
        0;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;
}


.dm-intro-content p:first-of-type {
    margin-top: 38px;
}


.dm-intro-content p + p {
    margin-top: 18px;
}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.dm-heading {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 16px;

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

    box-sizing: border-box;
}


.dm-heading span {
    color: #fff;

    font-size: 15px;

    letter-spacing: 3px;
}


.dm-heading small {
    color: #444;

    font-size: 6px;

    letter-spacing: 2px;
}


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

.dm-services {
    width: 100%;

    padding:
        90px 0;

    box-sizing: border-box;
}


.dm-service-list {
    width: 100%;

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


.dm-service-row {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width: 100%;

    padding:
        25px 0;

    color: #555;

    text-decoration: none;

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

    box-sizing: border-box;

    transition:
        padding-left 0.45s ease,
        background 0.35s ease;
}


.dm-service-row:last-child {
    border-bottom:
        none;
}


.dm-service-row:hover {
    padding-left:
        15px;

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


.dm-service-number {
    color: #444;

    font-size: 8px;

    letter-spacing: 2px;
}


.dm-service-row h3 {
    margin:
        0 0 10px;

    color: #666;

    font-size:
        clamp(18px, 2.5vw, 30px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: -1px;

    transition:
        color 0.35s ease;
}


.dm-service-row p {
    max-width: 620px;

    margin: 0;

    color: #444;

    font-size: 12px;

    line-height: 1.8;
}


.dm-service-row b {
    justify-self: end;

    color: #444;

    font-size: 20px;

    opacity: 0;

    transform:
        translate(-12px, 8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        color 0.4s ease;
}


.dm-service-row:hover h3 {
    color: #fff;
}


.dm-service-row:hover b {
    opacity: 1;

    color: #fff;

    transform:
        translate(0, 0);
}


/* =========================================================
   DETAIL SECTIONS
========================================================= */

.dm-detail-section {
    width: 100%;

    display: grid;

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

    gap: 50px;

    padding:
        90px 0;

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

    box-sizing: border-box;
}


.dm-detail-number {
    color: #444;

    font-size: 7px;

    letter-spacing: 3px;

    padding-top: 4px;
}


.dm-detail-content {
    width: 100%;
}


.dm-small-label {
    margin-bottom: 20px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.dm-detail-content h2 {
    max-width: 900px;

    margin: 0;

    color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;
    font-size:
        clamp(38px, 5.5vw, 72px);

}


.dm-detail-content h2 span {
    color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


.dm-detail-content > p {
    max-width: 680px;

    margin:
        35px 0 0;

    color: #444;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   SEO MINI GRID
========================================================= */

.dm-mini-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    margin-top: 50px;

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


.dm-mini-grid > div {
    min-height: 180px;

    padding: 25px;

    background:
        #030303;

    box-sizing: border-box;
}


.dm-mini-grid strong {
    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.dm-mini-grid h4 {
    margin:
        35px 0 10px;

    color: #777;

    font-size: 13px;

    font-weight: 500;
}


.dm-mini-grid p {
    margin: 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SOCIAL MEDIA FEATURE LIST
========================================================= */

.dm-feature-list {
    width: 100%;

    margin-top: 45px;

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


.dm-feature-list div {
    display: flex;

    align-items: center;

    gap: 25px;

    padding:
        18px 0;

    color: #666;

    font-size: 12px;

    letter-spacing: 1px;

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

    transition:
        padding-left 0.35s ease,
        color 0.35s ease;
}


.dm-feature-list div:hover {
    padding-left:
        12px;

    color: #fff;
}


.dm-feature-list span {
    color: #444;

    font-size: 7px;
}


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

.content-pill-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 40px;
}


.content-pill-grid span {
    padding:
        12px 15px;

    color: #555;

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

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        0.35s ease;
}


.content-pill-grid span:hover {
    color: #fff;

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

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

    transform:
        translateY(-2px);
}


/* =========================================================
   PAID ADVERTISING
========================================================= */

.ad-platforms {
    display: grid;

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

    gap: 1px;

    width: 100%;

    margin-top: 50px;

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


.ad-platforms div {
    min-height: 150px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 22px;

    background:
        #030303;

    box-sizing: border-box;

    transition:
        background 0.35s ease;
}


.ad-platforms div:hover {
    background:
        #080808;
}


.ad-platforms strong {
    color: #777;

    font-size: 14px;

    font-weight: 500;
}


.ad-platforms span {
    margin-top: 8px;

    color: #444;

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.performance-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    margin-top: 50px;

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


.performance-grid div {
    min-height: 210px;

    padding: 28px;

    background:
        #030303;

    box-sizing: border-box;
}


.performance-grid span {
    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.performance-grid h3 {
    margin:
        50px 0 12px;

    color: #777;

    font-size: 15px;

    font-weight: 500;
}


.performance-grid p {
    margin: 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   ANALYTICS
========================================================= */

.analytics-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    margin-top: 50px;

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


.analytics-grid div {
    min-height: 130px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

    background:
        #030303;

    box-sizing: border-box;
}


.analytics-grid strong {
    color: #777;

    font-size: 15px;

    font-weight: 500;
}


.analytics-grid span {
    margin-top: 8px;

    color: #444;

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================================================
   PROCESS
========================================================= */

.dm-process {
    width: 100%;

    padding:
        90px 0;

    box-sizing: border-box;
}


.dm-process-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    margin-top: 1px;

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


.dm-process-card {
    min-height: 240px;

    padding: 28px;

    background:
        #030303;

    box-sizing: border-box;

    transition:
        background 0.35s ease;
}


.dm-process-card:hover {
    background:
        #080808;
}


.dm-process-card > span {
    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.dm-process-card h3 {
    margin:
        55px 0 15px;

    color: #777;

    font-size: 17px;

    font-weight: 500;
}


.dm-process-card p {
    margin: 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   WHY LOON
========================================================= */

.dm-why {
    width: 100%;

    padding:
        90px 0;

    box-sizing: border-box;
}


.dm-why-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

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


.dm-why-grid > div {
    min-height: 250px;

    padding: 28px;

    background:
        #030303;

    box-sizing: border-box;
}


.dm-why-grid span {
    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.dm-why-grid h3 {
    margin:
        60px 0 15px;

    color: #777;

    font-size: 14px;

    font-weight: 500;
}


.dm-why-grid p {
    margin: 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   STATEMENT
========================================================= */

.dm-statement {
    width: 100%;

    margin-top: 0;

    padding:
        90px 0;

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

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

    box-sizing: border-box;
}


.dm-statement-label {
    margin-bottom: 25px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.dm-statement h2 {
    max-width: 950px;

    margin: 0;

  color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;                                               


    font-size:
        clamp(40px, 6vw, 80px);

   
}


.dm-statement h2 span {
     color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);


}


.dm-statement p {
    max-width: 600px;

    margin:
        35px 0 0;

    color: #444;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.dm-cta {
    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding:
        90px 0;

    box-sizing: border-box;
}


.dm-cta small {
    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.dm-cta h2 {
    max-width: 750px;

    margin:
        15px 0 0;

   color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;                                               
    font-size:
        clamp(38px, 5vw, 65px);

   
}


.dm-cta h2 span {
   color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);


}


.dm-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    padding:
        14px 18px;

    color: #666;

    text-decoration: none;

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

    font-size: 13px;

    letter-spacing: 2px;

    transition:
        0.4s ease;
}


.dm-cta-button span {
    font-size: 17px;

    transition:
        transform 0.4s ease;
}


.dm-cta-button:hover {
    color: #fff;

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

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


.dm-cta-button:hover span {
    transform:
        translate(4px, -4px);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {
    position: relative;

    width: 100%;

    padding:
        18px 20px 25px;

    text-align: center;

    color: #333;

    font-size: 6px;

    letter-spacing: 3px;

    box-sizing: border-box;
}


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

@media (max-width: 1100px) {

    .dm-hero {
        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding-top:
            50px;
    }


    .dm-hero-visual {
        height:
            400px;

        margin-top:
            20px;
    }


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


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

}


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

@media (max-width: 800px) {

    .digital-marketing-content {
        width:
            calc(100% - 50px);

        margin:
            0 auto;

        padding-top:
            90px;

        padding-bottom:
            70px;
    }


    .dm-hero {
        grid-template-columns:
            1fr;

        gap:
            40px;

        padding-top:
            30px;

        padding-bottom:
            70px;
    }


    .dm-introduction,
    .dm-detail-section {
        grid-template-columns:
            1fr;

        gap:
            25px;

        padding-top:
            70px;

        padding-bottom:
            70px;
    }


    .dm-services,
    .dm-process,
    .dm-why,
    .dm-statement,
    .dm-cta {
        padding-top:
            70px;

        padding-bottom:
            70px;
    }


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


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


    .dm-cta {
        align-items:
            flex-start;
    }

}


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

@media (max-width: 600px) {

    .digital-marketing-content {
        width:
            calc(100% - 35px);

        padding-top:
            80px;

        padding-bottom:
            60px;
    }


    /* HERO */

    .dm-hero {
        padding-top:
            20px;

        padding-bottom:
            60px;
    }


    .dm-hero h1 {
        font-size:
            58px;

        letter-spacing:
            -4px;
    }


    .dm-hero-intro {
        font-size:
            9px;
    }


    .dm-hero-visual {
        height:
            300px;
    }


    .orbit-a {
        width:
            100px;

        height:
            100px;
    }


    .orbit-b {
        width:
            170px;

        height:
            170px;
    }


    .orbit-c {
        width:
            240px;

        height:
            240px;
    }


    .growth-core {
        width:
            80px;

        height:
            80px;
    }


    /* INTRO */

    .dm-introduction {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-intro-content h2,
    .dm-detail-content h2,
    .dm-statement h2 {
        font-size:
            40px;

        letter-spacing:
            -2px;
    }


    /* SERVICES */

    .dm-services {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-service-row {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            25px;

        gap:
            10px;

        padding:
            20px 0;
    }


    .dm-service-row h3 {
        font-size:
            18px;

        line-height:
            1.05;
    }


    .dm-service-row p {
        font-size:
            7px;
    }


    /* DETAILS */

    .dm-detail-section {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-mini-grid {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    .dm-mini-grid > div {
        min-height:
            150px;
    }


    /* SOCIAL */

    .dm-feature-list {
        margin-top:
            35px;
    }


    .dm-feature-list div {
        font-size:
            13px;
    }


    /* CONTENT */

    .content-pill-grid {
        margin-top:
            30px;
    }


    /* ADS */

    .ad-platforms {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    /* PERFORMANCE */

    .performance-grid {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    /* ANALYTICS */

    .analytics-grid {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    /* PROCESS */

    .dm-process {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-process-grid {
        grid-template-columns:
            1fr;
    }


    .dm-process-card {
        min-height:
            200px;
    }


    /* WHY */

    .dm-why {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-why-grid {
        grid-template-columns:
            1fr;
    }


    .dm-why-grid > div {
        min-height:
            200px;
    }


    /* STATEMENT */

    .dm-statement {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    /* CTA */

    .dm-cta {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .dm-cta h2 {
        font-size:
            40px;

        letter-spacing:
            -2px;
    }


    .dm-cta-button {
        font-size:
            6px;
    }


    /* COPYRIGHT */

    .copyright {
        padding:
            15px 15px 20px;

        font-size:
            5px;

        letter-spacing:
            2px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .digital-marketing-content {
        width:
            calc(100% - 28px);

        padding-top:
            75px;
    }


    .dm-hero h1 {
        font-size:
            48px;

        letter-spacing:
            -3px;
    }


    .dm-intro-content h2,
    .dm-detail-content h2,
    .dm-statement h2,
    .dm-cta h2 {
        font-size:
            34px;

        letter-spacing:
            -1.5px;
    }


    .dm-tags span {
        padding:
            8px 10px;

        font-size:
            5px;
    }


    .dm-hero-visual {
        height:
            260px;
    }


    .growth-core {
        width:
            70px;

        height:
            70px;
    }


    .growth-core strong {
        font-size:
            16px;
    }

}
/* =========================================================
   DETAIL SECTIONS
   SAME LEFT / VERTICAL ALIGNMENT AS SERVICE LIST
========================================================= */

.dm-detail-section {

    width: 100%;

    display: grid;

    /*
       50px = section number
       30px = gap
       Content starts exactly where
       service names start.
    */
    grid-template-columns:
        50px
        minmax(0, 1fr);

    gap: 30px;

    padding:
        90px 0;

    margin: 0;

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

    box-sizing: border-box;
}


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

.dm-detail-number {

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;

    padding-top: 4px;

    line-height: 1;
}


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

.dm-detail-content {

    width: 100%;

    margin: 0;

    padding: 0;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.dm-small-label {

    margin:
        0 0 20px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;

    line-height: 1;
}


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

.dm-detail-content h2 {

    max-width: 900px;

    margin: 0;

    color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;                                               


    font-size:
        clamp(38px, 5.5vw, 72px);

   
}


.dm-detail-content h2 span {

   color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


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

.dm-detail-content > p {

    max-width: 680px;

    margin:
        35px 0 0;

    color: #444;

    font-size: 16px;

    line-height: 1.9;
}
.dm-detail-section {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 30px;
    padding: 90px 0;
}
/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    color: #555;
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;

    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}
/* =========================================================
   HEADER LOGO — INCREASE SIZE
========================================================= */

.brand-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
}
/* =========================================================
   WHO WE ARE
========================================================= */

.who-we-are {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 30px 0 100px;
}


/* SMALL LABEL */

.who-we-are-label {
    margin-bottom: 22px;

    color: #444;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 4px;
}


/* MAIN HEADING */

.who-we-are-heading {
    margin: 0 0 45px;

    color: #fff;

    font-size: clamp(45px, 7vw, 85px);

    line-height: 0.9;

    font-weight: 800;

    letter-spacing: -5px;
}


/* CONTENT */

.who-we-are-content {

    display: grid;

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

    gap: 35px 80px;

    max-width: 1000px;
}


/* PARAGRAPHS */

.who-we-are-content p {

    margin: 0;

    max-width: 430px;

    color: #666666;

    font-size: 14px;

    line-height: 1.9;

    font-weight: 300;
}


/* =========================================================
   BUILT FOR THE UNEXPECTED
========================================================= */

.about-main-statement {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding:
        80px 0
        120px;
}


.about-main-statement .section-tag {

    margin-bottom: 30px;

    color: #555;

    font-size: 8px;

    letter-spacing: 4px;
}


.about-heading {

    max-width: 1000px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(55px, 8vw, 110px);

    line-height: 0.85;

    font-weight: 800;

    letter-spacing: -6px;
}


.about-heading span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.9);
}


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

@media (max-width: 900px) {

    .who-we-are {

        padding:
            20px 0 70px;
    }

    .who-we-are-content {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .who-we-are-content p {

        max-width: 650px;

        font-size: 13px;

        line-height: 1.8;
    }

    .about-main-statement {

        padding:
            60px 0 90px;
    }

    .about-heading {

        font-size:
            clamp(48px, 11vw, 80px);

        letter-spacing: -4px;
    }

}


@media (max-width: 600px) {

    .who-we-are-heading {

        font-size: 48px;

        letter-spacing: -3px;
    }

    .who-we-are-content p {

        font-size: 12px;

        line-height: 1.75;
    }

    .about-heading {

        font-size: 45px;

        letter-spacing: -2.5px;
    }

}
/* =========================================================
   ABOUT PAGE — SCROLL FIX
========================================================= */

body:has(.about-experience) {
    overflow-x: hidden;
    overflow-y: auto;
}


/* MAIN ABOUT CONTAINER */

#experience.about-experience {

    position: relative;

    width: 100%;

    min-height: 100vh;

    height: auto;

    overflow: visible;

    padding:
        130px 10% 100px;

    box-sizing: border-box;
}


/* =========================================================
   COMMON ABOUT WIDTH
   Keeps every section aligned
========================================================= */

.about-experience .who-we-are,
.about-experience .about-main-statement {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   WHO WE ARE
========================================================= */

.about-experience .who-we-are {

    padding:
        30px 0 90px;

    margin-top: 0;
}


/* LABEL */

.about-experience .who-we-are-label {

    margin-bottom: 18px;

    color: #444;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 4px;
}


/* HEADING */

.about-experience .who-we-are-heading {

    margin:
        0 0 55px;

    color: #fff;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height: 0.9;

    font-weight: 800;

    letter-spacing: -5px;
}


/* =========================================================
   WHO WE ARE CONTENT
========================================================= */

.about-experience .who-we-are-content {

    width: 100%;

    max-width: 1050px;

    display: grid;

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

    column-gap: 90px;

    row-gap: 35px;

    margin: 0;
}


.about-experience .who-we-are-content p {

    margin: 0;

    max-width: 470px;

    color: #777;

    font-size: 16px;

    line-height: 1.9;

    font-weight: 300;
}


/* =========================================================
   BUILT FOR THE UNEXPECTED
========================================================= */

.about-experience .about-main-statement {

    padding:
        100px 0 120px;

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


/* SMALL LABEL */

.about-experience .about-main-statement .section-tag {

    margin-bottom: 30px;

    color: #555;

    font-size: 15px;

    letter-spacing: 4px;
}


/* MAIN HEADING */

.about-experience .about-heading {

    width: 100%;

    max-width: 1100px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(55px, 8vw, 110px);

    line-height: 0.84;

    font-weight: 800;

    letter-spacing: -6px;
}


.about-experience .about-heading span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.9);
}


/* =========================================================
   EXISTING ABOUT CONTENT
   KEEP SAME ALIGNMENT
========================================================= */

.about-experience .about-main-statement > * {

    box-sizing: border-box;
}


/* INTRO */

.about-experience .about-intro {

    max-width: 700px;

    margin:
        40px 0 80px;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   ABOUT STATEMENT
========================================================= */

.about-experience .about-statement {

    width: 100%;

    max-width: 1000px;

    margin:
        0 0 90px;

    padding:
        45px 0;

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

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


.about-experience .about-statement-number {

    margin-bottom: 25px;

    color: #444;

    font-size: 12px;

    letter-spacing: 3px;
}


.about-experience .about-statement h2 {

    margin: 0;

    max-width: 900px;

     color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;
}


.about-experience .about-statement h2 span {

  color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}


/* =========================================================
   THINK / CREATE / BUILD
========================================================= */

.about-experience .about-grid {

    width: 100%;

    display: grid;

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

    gap: 1px;

    margin:
        0 0 100px;

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


.about-experience .about-card {

    position: relative;

    min-height: 240px;

    padding: 30px;

    background: #030303;

    box-sizing: border-box;

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


.about-experience .about-card:hover {

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

    transform:
        translateY(-5px);
}


.about-experience .about-card strong {

    color: #444;

    font-size: 8px;

    letter-spacing: 3px;
}


.about-experience .about-card-label {

    margin-top: 35px;

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


.about-experience .about-card h3 {

    margin:
        12px 0 15px;

    color: #fff;

    font-size: 25px;

    letter-spacing: -1px;
}


.about-experience .about-card p {

    max-width: 260px;

    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.about-experience .about-values {

    width: 100%;

    max-width: 1000px;

    margin-bottom: 100px;
}


.about-experience .about-values-title {

    margin-bottom: 25px;

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.about-experience .about-value-row {

    display: grid;

    grid-template-columns:
        50px 180px 1fr;

    align-items: center;

    gap: 30px;

    padding:
        22px 0;

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


.about-experience .about-value-row span {

    color: #444;

    font-size: 7px;

    letter-spacing: 2px;
}


.about-experience .about-value-row strong {

    color: #777;

    font-size: 14px;

    letter-spacing: 2px;
}


.about-experience .about-value-row p {

    margin: 0;

    color: #666;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.about-experience .about-cta {

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    padding:
        70px 0 30px;

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


.about-experience .about-cta small {

    color: #444;

    font-size: 15px;

    letter-spacing: 3px;
}


.about-experience .about-cta h2 {

    margin-top: 20px;

    color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;
}


.about-experience .about-cta h2 span {

        color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.about-experience ~ .copyright {

    position: relative;

    width: 100%;

    padding:
        30px 10% 35px;

    text-align: center;

    box-sizing: border-box;
}


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

@media (max-width: 900px) {

    body:has(.about-experience) {

        overflow-y: auto;
    }


    #experience.about-experience {

        padding:
            110px 7% 60px;
    }


    .about-experience .who-we-are {

        padding:
            20px 0 70px;
    }


    .about-experience .who-we-are-content {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .about-experience .who-we-are-content p {

        max-width: 100%;

        font-size: 13px;
    }


    .about-experience .about-main-statement {

        padding:
            70px 0 90px;
    }


    .about-experience .about-heading {

        font-size:
            clamp(48px, 11vw, 80px);

        letter-spacing: -4px;
    }


    .about-experience .about-grid {

        grid-template-columns: 1fr;
    }


    .about-experience .about-value-row {

        grid-template-columns:
            35px 120px 1fr;

        gap: 15px;
    }


    .about-experience .about-cta {

        flex-direction: column;

        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    #experience.about-experience {

        padding:
            100px 6% 50px;
    }


    .about-experience .who-we-are-heading {

        font-size: 45px;

        letter-spacing: -3px;
    }


    .about-experience .who-we-are-content p {

        font-size: 12px;

        line-height: 1.8;
    }


    .about-experience .about-heading {

        font-size: 45px;

        letter-spacing: -3px;
    }


    .about-experience .about-value-row {

        grid-template-columns:
            30px 1fr;

        gap: 10px;
    }


    .about-experience .about-value-row p {

        grid-column: 2;
    }
}
/* =========================================================
   WHO WE ARE
   SAME STYLE AS BUILT FOR THE UNEXPECTED
========================================================= */

.who-we-are-heading {
    width: 100%;
    max-width: 1200px;

    margin: 0 0 50px;
}


.who-we-are-heading h2 {
    margin: 0;

    color: #ffffff;

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

    font-size: clamp(
        58px,
        8vw,
        112px
    );

    font-weight: 800;

    line-height: 0.84;

    letter-spacing: -6px;

    text-transform: uppercase;
}


/* OUTLINE "ARE" */

.who-we-are-heading h2 span {

    display: block;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke:
        1.5px rgba(255,255,255,0.9);

    text-stroke:
        1.5px rgba(255,255,255,0.9);

    margin-top: 5px;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .who-we-are-heading h2 {
        font-size: 110px;
        letter-spacing: -7px;
    }

}


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

@media (max-width: 900px) {

    .who-we-are-heading h2 {
        font-size:
            clamp(55px, 10vw, 85px);

        letter-spacing: -5px;

        line-height: 0.86;
    }

}


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

@media (max-width: 600px) {

    .who-we-are-heading h2 {
        font-size:
            clamp(43px, 12vw, 65px);

        letter-spacing: -3px;

        line-height: 0.88;
    }

    .who-we-are-heading h2 span {
        -webkit-text-stroke:
            1px rgba(255,255,255,0.9);
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   WEB DEVELOPMENT PAGE
========================================================= */


/* =========================================================
   PAGE SCROLL
========================================================= */

body:has(.services-page) {
    overflow-x: hidden;
    overflow-y: auto;
}

.services-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
}

.services-content {
    width: min(1200px, 86vw);
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 100px;
}


/* =========================================================
   SECTION COMMON
========================================================= */

.service-intro-section,
.service-interface-section,
.solve-section,
.why-loon,
.services-process,
.service-capabilities,
.technology-section,
.industries-section,
.services-statement,
.services-final,
.services-cta {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.service-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding-bottom: 16px;

    margin-bottom: 35px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}

.service-section-heading span {
    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.service-section-heading small {
    color: #444444;

    font-size: 7px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.services-title {
    max-width: 1050px;

    margin:
        20px 0 30px;

    color: #fff;
    font-size: clamp(55px, 8vw, 110px);
	    line-height: 0.84;
	    font-weight: 800;
	    letter-spacing: -6px;


    text-transform: uppercase;
}

.services-title span {
    display: block;
	    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);

}




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

.services-intro {
    max-width: 720px;

    margin-bottom: 55px;

    color: #777777;

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;
}


/* =========================================================
   INTRO STATS
========================================================= */

.service-intro-stats {
    display: grid;

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

    margin-bottom: 90px;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.service-intro-stats > div {
    padding: 28px 25px;

    border-right:
        1px solid
        rgba(255,255,255,.08);

    transition:
        background .4s ease;
}

.service-intro-stats > div:last-child {
    border-right: none;
}

.service-intro-stats > div:hover {
    background:
        rgba(255,255,255,.025);
}

.service-intro-stats strong {
    display: block;

    margin-bottom: 10px;

    color: #444444;

    font-size: 34px;

    font-weight: 500;

    letter-spacing: -2px;
}

.service-intro-stats span {
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================================
   SERVICE INTERFACE
========================================================= */

.service-interface-section {
    margin-top: 20px;
}

.service-interface {
    width: 100%;
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.service-item {
    position: relative;

    display: grid;

    grid-template-columns:
        60px
        minmax(280px, 1.4fr)
        minmax(190px, .8fr)
        40px;

    align-items: center;

    gap: 25px;

    min-height: 175px;

    padding:
        28px 0;

    color: #555555;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    overflow: hidden;

    transition:
        color .4s ease,
        padding-left .5s
        cubic-bezier(.16,1,.3,1);
}


/* Hover background */

.service-item::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.055),
            transparent 75%
        );

    opacity: 0;

    transform:
        translateX(-40px);

    transition:
        opacity .5s ease,
        transform .6s
        cubic-bezier(.16,1,.3,1);

    pointer-events: none;
}

.service-item:hover {
    color: #ffffff;

    padding-left: 15px;
}

.service-item:hover::before {
    opacity: 1;

    transform:
        translateX(0);
}


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

.service-index {
    position: relative;

    z-index: 2;

    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;

    transition:
        color .3s ease;
}

.service-item:hover .service-index {
    color: #ffffff;
}


/* =========================================================
   SERVICE MAIN
========================================================= */

.service-main {
    position: relative;

    z-index: 2;
}

.service-label {
    margin-bottom: 8px;

    color: #3c3c3c;

    font-size: 7px;

    letter-spacing: 3px;

    text-transform: uppercase;

    transition:
        color .3s ease;
}

.service-item:hover .service-label {
    color: #777777;
}

.service-name {
    color: #666666;

    font-size:
        clamp(27px, 3vw, 45px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -2px;

    transition:
        color .4s ease,
        transform .5s ease;
}

.service-item:hover .service-name {
    color: #ffffff;

    transform:
        translateX(5px);
}

.service-description {
    max-width: 520px;

    margin:
        15px 0 0;

    color: #444444;

    font-size: 16px;

    line-height: 1.8;

    transition:
        color .3s ease;
}

.service-item:hover .service-description {
    color: #666666;
}


/* =========================================================
   SERVICE FEATURES
========================================================= */

.service-features {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.service-features span {
    color: #3c3c3c;

    font-size: 12px;

    letter-spacing: 1.5px;

    transition:
        color .3s ease,
        transform .3s ease;
}

.service-item:hover
.service-features span {
    color: #777777;

    transform:
        translateX(4px);
}


/* =========================================================
   SERVICE ARROW
========================================================= */

.service-arrow {
    position: relative;

    z-index: 2;

    justify-self: end;

    color: #444444;

    font-size: 23px;

    opacity: 0;

    transform:
        translate(-15px, 10px);

    transition:
        opacity .4s ease,
        transform .5s ease;
}

.service-item:hover .service-arrow {
    opacity: 1;

    color: #ffffff;

    transform:
        translate(0,0);
}


/* =========================================================
   WHAT WE SOLVE
========================================================= */

.solve-section {
    margin-top: 110px;
}

.solve-grid {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}

.solve-card {
    position: relative;

    min-height: 290px;

    padding: 32px;

    background: #030303;

    overflow: hidden;

    transition:
        background .5s ease;
}

.solve-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #ffffff;

    transition:
        width .6s
        cubic-bezier(.16,1,.3,1);
}

.solve-card:hover {
    background: #080808;
}

.solve-card:hover::after {
    width: 100%;
}

.solve-card > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.solve-card h3 {
    margin:
        60px 0 16px;

    color: #777777;

    font-size: 21px;

    letter-spacing: -1px;

    transition:
        color .3s ease,
        transform .4s ease;
}

.solve-card:hover h3 {
    color: #ffffff;

    transform:
        translateX(5px);
}

.solve-card p {
    max-width: 470px;

    color: #444444;

    font-size: 16px;

    line-height: 1.9;
}

.solve-card strong {
    display: block;

    margin-top: 28px;

    color: #555555;

    font-size: 12px;

    letter-spacing: 3px;
}


/* =========================================================
   WHY LOON
========================================================= */

.why-loon {
    margin-top: 110px;
}

.why-loon-grid {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}

.why-loon-card {
    position: relative;

    min-height: 270px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}

.why-loon-card:hover {
    background: #080808;
}

.why-loon-card > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.why-loon-card h3 {
    margin:
        60px 0 15px;

    color: #777777;

    font-size: 18px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.why-loon-card:hover h3 {
    color: #ffffff;
}

.why-loon-card p {
    color: #444444;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   DEVELOPMENT PROCESS
========================================================= */

.services-process {
    margin-top: 110px;
}

.process-line {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}

.process-step {
    position: relative;

    min-height: 285px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}

.process-step:hover {
    background: #080808;
}

.process-step-number {
    color: #444444;

    font-size: 8px;

    letter-spacing: 2px;
}

.process-step h3 {
    margin:
        60px 0 15px;

    color: #777777;

    font-size: 19px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.process-step:hover h3 {
    color: #ffffff;
}

.process-step p {
    max-width: 230px;

    color: #444444;

    font-size: 16px;

    line-height: 1.9;
}

.process-step::after {
    content: "→";

    position: absolute;

    top: 25px;
    right: 25px;

    color: #333333;

    font-size: 18px;

    transition:
        color .3s ease,
        transform .4s ease;
}

.process-step:hover::after {
    color: #ffffff;

    transform:
        translateX(5px);
}

.process-step:last-child::after {
    content: "✓";
}


/* =========================================================
   CAPABILITIES
========================================================= */

.service-capabilities {
    margin-top: 110px;
}

.capability-list {
    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.capability-item {
    display: grid;

    grid-template-columns:
        150px
        1fr
        30px;

    align-items: center;

    gap: 20px;

    padding:
        24px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        padding-left .4s ease;
}

.capability-item:last-child {
    border-bottom: none;
}

.capability-item:hover {
    padding-left: 12px;
}

.capability-item span {
    color: #444444;

    font-size: 15px;

    letter-spacing: 2px;
}

.capability-item strong {
    color: #666666;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    transition:
        color .3s ease;
}

.capability-item:hover strong {
    color: #ffffff;
}

.capability-item b {
    color: #444444;

    font-size: 17px;

    font-weight: 300;

    opacity: 0;

    transform:
        translateX(-10px);

    transition:
        .4s ease;
}

.capability-item:hover b {
    opacity: 1;

    color: #ffffff;

    transform:
        translateX(0);
}


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

.technology-section {
    margin-top: 110px;
}

.technology-content {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    padding:
        60px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.technology-text h2 {
    margin: 0;

    color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;

}

.technology-text h2 span {
     color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);


}

.technology-text p {
    max-width: 520px;

    margin-top: 28px;

    color: #444444;

    font-size: 13px;

    line-height: 1.9;
}

.technology-tags {
    display: flex;

    align-content: flex-start;

    flex-wrap: wrap;

    gap: 9px;

    padding-top: 5px;
}

.technology-tags span {
    padding:
        11px 14px;

    border:
        1px solid
        rgba(255,255,255,.10);

    color: #666666;

    font-size: 13px;

    letter-spacing: 1.5px;

    transition:
        .3s ease;
}

.technology-tags span:hover {
    color: #ffffff;

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

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

    transform:
        translateY(-3px);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {
    margin-top: 110px;
}

.industries-grid {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}

.industry {
    position: relative;

    min-height: 240px;

    padding: 28px;

    background: #030303;

    transition:
        background .4s ease;
}

.industry:hover {
    background: #080808;
}

.industry > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.industry h3 {
    margin:
        55px 0 13px;

    color: #777777;

    font-size: 17px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.industry:hover h3 {
    color: #ffffff;
}

.industry p {
    max-width: 280px;

    color: #444444;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   STATEMENT
========================================================= */

.services-statement {
    display: grid;

    grid-template-columns:
        150px 1fr;

    gap: 40px;

    margin-top: 110px;

    padding:
        70px 0;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.services-statement-number {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.services-statement h2 {
    max-width: 900px;

    margin: 0;

   color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;

}

.services-statement h2 span {
   color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}

.services-statement p {
    max-width: 680px;

    color: #444444;

    font-size: 16px;

    line-height: 1.9;
}

.services-statement p:first-of-type {
    margin-top: 35px;
}

.services-statement p + p {
    margin-top: 15px;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.services-final {
    margin-top: 110px;

    padding:
        70px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.services-final-label {
    margin-bottom: 22px;

    color: #444444;

    font-size: 15px;

    letter-spacing: 3px;
}

.services-final h2 {
    max-width: 1100px;

    margin: 0;

    color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;

}

.services-final h2 span {
     color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


/* =========================================================
   CTA
========================================================= */

.services-cta {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    padding:
        80px 0;
}

.services-cta small {
    color: #444444;

    font-size: 15px;

    letter-spacing: 3px;
}

.services-cta h2 {
    margin:
        15px 0 0;

   color: #fff;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -3px;

}

.services-cta h2 span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


/* =========================================================
   CTA BUTTON
========================================================= */

.services-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        15px 20px;

    border:
        1px solid
        rgba(255,255,255,.15);

    color: #666666;

    font-size: 13px;

    letter-spacing: 2px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        .4s ease;
}

.services-cta-button span {
    font-size: 17px;

    transition:
        transform .4s ease;
}

.services-cta-button:hover {
    color: #ffffff;

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

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

.services-cta-button:hover span {
    transform:
        translate(5px,-5px);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {
    padding:
        25px 0;

    color: #333333;

    font-size: 7px;

    letter-spacing: 3px;

    text-align: center;

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


/* =========================================================
   TEXT SELECTION
========================================================= */

.services-page ::selection {
    color: #000000;

    background: #ffffff;
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

    .services-content {
        width: min(1000px, 88vw);
    }


    .service-item {
        grid-template-columns:
            45px
            minmax(250px,1.3fr)
            minmax(160px,.8fr)
            35px;

        gap: 18px;
    }


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


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


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

}


/* =========================================================
   RESPONSIVE — 800px
========================================================= */

@media (max-width: 800px) {

    .services-content {
        width: calc(100% - 60px);

        padding-top: 110px;
    }


    .services-title {
        font-size: 65px;

        letter-spacing: -4px;
    }


    .service-intro-stats {
        grid-template-columns:
            repeat(3,1fr);
    }


    .service-item {
        grid-template-columns:
            40px
            1fr
            30px;
    }


    .service-features {
        display: none;
    }


    .service-name {
        font-size: 30px;
    }


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


    .technology-content {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .services-statement {
        grid-template-columns:
            100px 1fr;

        gap: 25px;
    }


    .services-cta {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE — 600px
========================================================= */

@media (max-width: 600px) {

    .services-content {
        width: calc(100% - 40px);

        padding-top: 95px;

        padding-bottom: 70px;
    }


    /* PAGE TITLE */

    .services-title {
        margin:
            15px 0 25px;

        font-size: 48px;

        line-height: .88;

        letter-spacing: -3px;
    }


    /* INTRO */

    .services-intro {
        margin-bottom: 35px;

        font-size: 10px;

        line-height: 1.8;
    }


    /* SECTION HEADING */

    .service-section-heading {
        padding-bottom: 12px;

        margin-bottom: 25px;
    }

    .service-section-heading span {
        font-size: 13px;

        letter-spacing: 2px;
    }

    .service-section-heading small {
        font-size: 5px;
    }


    /* STATS */

    .service-intro-stats {
        grid-template-columns:
            1fr;

        margin-bottom: 60px;
    }

    .service-intro-stats > div {
        padding: 20px;

        border-right: none;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

    .service-intro-stats > div:last-child {
        border-bottom: none;
    }

    .service-intro-stats strong {
        font-size: 26px;
    }

    .service-intro-stats span {
        font-size: 13px;
    }


    /* SERVICE ITEMS */

    .service-item {
        grid-template-columns:
            30px
            1fr
            25px;

        min-height: 140px;

        gap: 10px;

        padding:
            20px 0;
    }

    .service-item:hover {
        padding-left: 7px;
    }


    .service-index {
        font-size: 7px;
    }


    .service-label {
        font-size: 5px;

        letter-spacing: 2px;
    }


    .service-name {
        font-size: 22px;

        letter-spacing: -1px;
    }


    .service-description {
        max-width: 100%;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.7;
    }


    .service-arrow {
        font-size: 17px;
    }


    /* SECTIONS */

    .solve-section,
    .why-loon,
    .services-process,
    .service-capabilities,
    .technology-section,
    .industries-section,
    .services-statement,
    .services-final {
        margin-top: 70px;
    }


    /* SOLVE */

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

    .solve-card {
        min-height: 220px;

        padding: 22px;
    }

    .solve-card h3 {
        margin-top: 40px;

        font-size: 18px;
    }

    .solve-card p {
        font-size: 9px;
    }


    /* WHY */

    .why-loon-grid {
        grid-template-columns:
            1fr;
    }

    .why-loon-card {
        min-height: 210px;

        padding: 22px;
    }

    .why-loon-card h3 {
        margin-top: 40px;

        font-size: 17px;
    }

    .why-loon-card p {
        font-size: 9px;
    }


    /* PROCESS */

    .process-line {
        grid-template-columns:
            1fr;
    }

    .process-step {
        min-height: 210px;

        padding: 22px;
    }

    .process-step h3 {
        margin-top: 40px;

        font-size: 18px;
    }

    .process-step p {
        font-size: 9px;
    }


    /* CAPABILITIES */

    .capability-item {
        grid-template-columns:
            80px
            1fr
            20px;

        gap: 10px;

        padding:
            18px 0;
    }

    .capability-item span {
        font-size: 13px;

        letter-spacing: 1px;
    }

    .capability-item strong {
        font-size: 14px;

        line-height: 1.6;
    }

    .capability-item b {
        font-size: 13px;
    }


    /* TECHNOLOGY */

    .technology-content {
        grid-template-columns:
            1fr;

        gap: 30px;

        padding:
            35px 0;
    }

    .technology-text h2 {
        font-size: 31px;

        letter-spacing: -2px;
    }

    .technology-text p {
        font-size: 9px;

        line-height: 1.8;
    }

    .technology-tags {
        gap: 6px;
    }

    .technology-tags span {
        padding:
            8px 10px;

        font-size: 13px;
    }


    /* INDUSTRIES */

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

    .industry {
        min-height: 190px;

        padding: 22px;
    }

    .industry h3 {
        margin-top: 40px;

        font-size: 15px;
    }

    .industry p {
        font-size: 9px;
    }


    /* STATEMENT */

    .services-statement {
        display: block;

        padding:
            45px 0;
    }

    .services-statement-number {
        margin-bottom: 25px;
    }

    .services-statement h2 {
        font-size: 30px;

        letter-spacing: -2px;
    }

    .services-statement p {
        font-size: 9px;
    }


    /* FINAL */

    .services-final {
        padding:
            45px 0;
    }

    .services-final-label {
        font-size: 12px;
    }

    .services-final h2 {
        font-size: 34px;

        letter-spacing: -2px;
    }


    /* CTA */

    .services-cta {
        padding:
            50px 0;
    }

    .services-cta h2 {
        font-size: 38px;

        letter-spacing: -2px;
    }

    .services-cta-button {
        padding:
            12px 15px;

        font-size: 6px;
    }


    /* COPYRIGHT */

    .copyright {
        padding:
            15px 0 20px;

        font-size: 5px;

        letter-spacing: 2px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — 400px
========================================================= */

@media (max-width: 400px) {

    .services-content {
        width: calc(100% - 28px);

        padding-top: 90px;
    }


    .services-title {
        font-size: 40px;

        letter-spacing: -2px;
    }


    .services-intro {
        font-size: 8px;
    }


    .service-name {
        font-size: 20px;
    }


    .service-description {
        font-size: 7px;
    }


    .solve-card,
    .why-loon-card,
    .process-step,
    .industry {
        padding: 18px;
    }


    .technology-text h2 {
        font-size: 27px;
    }


    .services-statement h2 {
        font-size: 26px;
    }


    .services-final h2 {
        font-size: 30px;
    }


    .services-cta h2 {
        font-size: 32px;
    }

}


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

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

    .service-item,
    .service-item::before,
    .service-name,
    .service-arrow,
    .solve-card,
    .why-loon-card,
    .process-step,
    .technology-tags span,
    .services-cta-button {
        transition: none !important;
    }

}
/* =========================================================
   INCREASE PARAGRAPH FONT SIZE
========================================================= */

/* CAPABILITIES */
.capability-item strong {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}


/* TECHNOLOGY */
.technology-text p {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    max-width: 600px;
}


/* INDUSTRIES */
.industry p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    max-width: 330px;
}


/* LARGE STATEMENT */
.services-statement p {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    max-width: 720px;
}


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

@media (max-width: 600px) {

    .capability-item strong {
        font-size: 12px;
        line-height: 1.7;
    }

    .technology-text p {
        font-size: 12px;
        line-height: 1.8;
    }

    .industry p {
        font-size: 12px;
        line-height: 1.8;
    }

    .services-statement p {
        font-size: 12px;
        line-height: 1.8;
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   SOFTWARE DEVELOPMENT PAGE
   UNIQUE SOFTWARE-* CLASSES
========================================================= */


/* =========================================================
   PAGE / SCROLL
========================================================= */

body:has(.software-page) {
    overflow-x: hidden;
    overflow-y: auto;
}

.software-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
}

.software-page-inner {
    width: min(1200px, 86vw);

    margin: 0 auto;

    padding-top: 158px;
    padding-bottom: 100px;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.software-introduction,
.software-solutions,
.software-problems,
.software-features,
.software-process,
.software-technology,
.software-security,
.software-applications,
.software-belief,
.software-final,
.software-cta {
    position: relative;
    width: 100%;
}


/* =========================================================
   SECTION MARKER
========================================================= */

.software-section-marker {
    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    padding-bottom: 16px;

    margin-bottom: 38px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);
}

.software-section-marker span {
    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.software-section-marker small {
    color: #444444;

    font-size: 7px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.software-main-title {
    max-width: 1100px;

    margin:
        20px 0 35px;

    color: #ffffff;

    font-size:
        clamp(55px, 8.5vw, 120px);

    line-height: 0.82;

    font-weight: 800;

    letter-spacing: -7px;

    text-transform: uppercase;
}

.software-main-title span {
    display: block;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(255,255,255,0.85);

    text-stroke:
        1.5px
        rgba(255,255,255,0.85);
}


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

.software-main-description {
    max-width: 760px;

    margin-bottom: 60px;

    color: #777777;

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;
}


/* =========================================================
   INTRO METRICS
========================================================= */

.software-intro-metrics {
    display: grid;

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

    margin-bottom: 110px;

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

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);
}

.software-metric {
    min-height: 125px;

    padding: 28px 25px;

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

    transition:
        background 0.4s ease;
}

.software-metric:last-child {
    border-right: none;
}

.software-metric:hover {
    background:
        rgba(255,255,255,0.025);
}

.software-metric strong {
    display: block;

    margin-bottom: 12px;

    color: #444444;

    font-size: 32px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -2px;
}

.software-metric span {
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =========================================================
   SOFTWARE SOLUTIONS
========================================================= */

.software-solutions {
    margin-top: 20px;
}

.software-solution-list {
    width: 100%;
}


/* =========================================================
   SOLUTION ITEM
========================================================= */

.software-solution {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(300px, 1.4fr)
        minmax(190px, .8fr)
        35px;

    align-items: center;

    gap: 25px;

    min-height: 180px;

    padding:
        28px 0;

    color: #555555;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);

    overflow: hidden;

    transition:
        color 0.4s ease,
        padding-left 0.5s
        cubic-bezier(.16,1,.3,1);
}

.software-solution::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05),
            transparent 75%
        );

    opacity: 0;

    transform:
        translateX(-40px);

    transition:
        opacity .5s ease,
        transform .6s
        cubic-bezier(.16,1,.3,1);

    pointer-events: none;
}

.software-solution:hover {
    color: #ffffff;

    padding-left: 15px;
}

.software-solution:hover::before {
    opacity: 1;

    transform:
        translateX(0);
}


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

.software-solution-number {
    position: relative;

    z-index: 2;

    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;

    transition:
        color .3s ease;
}

.software-solution:hover
.software-solution-number {
    color: #ffffff;
}


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

.software-solution-content {
    position: relative;

    z-index: 2;
}

.software-solution-content small {
    display: block;

    margin-bottom: 9px;

    color: #3f3f3f;

    font-size: 7px;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.software-solution-content h2 {
    margin: 0;

    color: #666666;

    font-size:
        clamp(26px, 3vw, 44px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -2px;

    transition:
        color .4s ease,
        transform .5s ease;
}

.software-solution:hover
.software-solution-content h2 {
    color: #ffffff;

    transform:
        translateX(5px);
}

.software-solution-content p {
    max-width: 550px;

    margin:
        15px 0 0;

    color: #444444;

    font-size: 16px;

    line-height: 1.85;

    transition:
        color .3s ease;
}

.software-solution:hover
.software-solution-content p {
    color: #666666;
}


/* =========================================================
   SOLUTION TAGS
========================================================= */

.software-solution-tags {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.software-solution-tags span {
    color: #3c3c3c;

    font-size: 12px;

    letter-spacing: 1.5px;

    transition:
        color .3s ease,
        transform .3s ease;
}

.software-solution:hover
.software-solution-tags span {
    color: #777777;

    transform:
        translateX(4px);
}


/* =========================================================
   SOLUTION ARROW
========================================================= */

.software-solution-arrow {
    position: relative;

    z-index: 2;

    justify-self: end;

    color: #444444;

    font-size: 23px;

    opacity: 0;

    transform:
        translate(-15px, 10px);

    transition:
        opacity .4s ease,
        transform .5s ease,
        color .4s ease;
}

.software-solution:hover
.software-solution-arrow {
    opacity: 1;

    color: #ffffff;

    transform:
        translate(0,0);
}


/* =========================================================
   PROBLEMS
========================================================= */

.software-problems {
    margin-top: 110px;
}

.software-problem-grid {
    display: grid;

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

    gap: 1px;

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

.software-problem-card {
    position: relative;

    min-height: 290px;

    padding: 32px;

    background: #030303;

    overflow: hidden;

    transition:
        background .4s ease;
}

.software-problem-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 1px;

    background: #ffffff;

    transition:
        width .6s
        cubic-bezier(.16,1,.3,1);
}

.software-problem-card:hover {
    background: #080808;
}

.software-problem-card:hover::after {
    width: 100%;
}

.software-problem-card > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.software-problem-card h3 {
    margin:
        60px 0 16px;

    color: #777777;

    font-size: 21px;

    line-height: 1;

    letter-spacing: -1px;

    transition:
        color .3s ease,
        transform .4s ease;
}

.software-problem-card:hover h3 {
    color: #ffffff;

    transform:
        translateX(5px);
}

.software-problem-card p {
    max-width: 470px;

    color: #555555;

    font-size: 16px;

    line-height: 1.85;
}

.software-problem-card strong {
    display: block;

    margin-top: 28px;

    color: #444444;

    font-size: 7px;

    letter-spacing: 3px;
}


/* =========================================================
   CORE FEATURES
========================================================= */

.software-features {
    margin-top: 110px;
}

.software-feature-grid {
    display: grid;

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

    gap: 1px;

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

.software-feature {
    position: relative;

    min-height: 250px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}

.software-feature:hover {
    background: #080808;
}

.software-feature > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.software-feature h3 {
    margin:
        55px 0 15px;

    color: #777777;

    font-size: 18px;

    line-height: 1;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.software-feature:hover h3 {
    color: #ffffff;
}

.software-feature p {
    color: #555555;

    font-size: 16px;

    line-height: 1.85;
}


/* =========================================================
   DEVELOPMENT PROCESS
========================================================= */

.software-process {
    margin-top: 110px;
}

.software-process-grid {
    display: grid;

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

    gap: 1px;

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

.software-process-step {
    position: relative;

    min-height: 275px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}

.software-process-step:hover {
    background: #080808;
}

.software-process-step > span {
    color: #444444;

    font-size: 7px;

    letter-spacing: 2px;
}

.software-process-step h3 {
    margin:
        55px 0 15px;

    color: #777777;

    font-size: 20px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.software-process-step:hover h3 {
    color: #ffffff;
}

.software-process-step p {
    max-width: 300px;

    color: #555555;

    font-size: 16px;

    line-height: 1.85;
}

.software-process-step::after {
    content: "→";

    position: absolute;

    top: 25px;

    right: 25px;

    color: #333333;

    font-size: 18px;

    transition:
        color .3s ease,
        transform .4s ease;
}

.software-process-step:hover::after {
    color: #ffffff;

    transform:
        translateX(5px);
}

.software-process-step:last-child::after {
    content: "✓";
}


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

.software-technology {
    margin-top: 110px;
}

.software-technology-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    padding:
        60px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);
}

.software-technology-copy h2 {
    margin: 0;

   color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px; 

    font-size:
        clamp(38px, 5vw, 65px);

   
}

.software-technology-copy h2 span {
    display: block;

   color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}

.software-technology-copy p {
    max-width: 540px;

    margin-top: 28px;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}

.software-technology-copy p + p {
    margin-top: 15px;
}

.software-technology-stack {
    display: flex;

    align-content: flex-start;

    flex-wrap: wrap;

    gap: 9px;

    padding-top: 5px;
}

.software-technology-stack span {
    padding:
        11px 14px;

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

    color: #555555;

    font-size: 12px;

    letter-spacing: 1.5px;

    transition:
        .3s ease;
}

.software-technology-stack span:hover {
    color: #ffffff;

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

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

    transform:
        translateY(-3px);
}


/* =========================================================
   SECURITY / ENGINEERING
========================================================= */

.software-security {
    margin-top: 110px;
}

.software-security-grid {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.08);
}

.software-security-card {
    min-height: 270px;

    padding: 30px;

    background: #030303;

    transition:
        background .4s ease;
}

.software-security-card:hover {
    background: #080808;
}

.software-security-card > span {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.software-security-card h3 {
    margin:
        60px 0 15px;

    color: #777777;

    font-size: 18px;

    letter-spacing: -1px;

    transition:
        color .3s ease;
}

.software-security-card:hover h3 {
    color: #ffffff;
}

.software-security-card p {
    color: #555555;

    font-size: 16px;

    line-height: 1.85;
}


/* =========================================================
   APPLICATION AREAS
========================================================= */

.software-applications {
    margin-top: 110px;
}

.software-application-list {
    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.software-application-item {
    display: grid;

    grid-template-columns:
        230px 1fr;

    gap: 30px;

    align-items: center;

    padding:
        25px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        padding-left .4s ease;
}

.software-application-item:hover {
    padding-left: 12px;
}

.software-application-item span {
    color: #444444;

    font-size: 12px;

    letter-spacing: 2px;
}

.software-application-item strong {
    color: #666666;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;

    transition:
        color .3s ease;
}

.software-application-item:hover strong {
    color: #ffffff;
}


/* =========================================================
   BELIEF
========================================================= */

.software-belief {
    display: grid;

    grid-template-columns:
        150px 1fr;

    gap: 40px;

    margin-top: 110px;

    padding:
        70px 0;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.software-belief-number {
    color: #444444;

    font-size: 8px;

    letter-spacing: 3px;
}

.software-belief-content h2 {
    max-width: 900px;

    margin: 0;

    color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;

    font-size:
        clamp(38px, 5vw, 70px);

}

.software-belief-content h2 span {
    display: block;

     color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}

.software-belief-content p {
    max-width: 700px;

    margin-top: 30px;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}

.software-belief-content p + p {
    margin-top: 15px;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.software-final {
    margin-top: 110px;

    padding:
        70px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.software-final-label {
    margin-bottom: 22px;

    color: #444444;

    font-size: 15px;

    letter-spacing: 3px;
}

.software-final h2 {
    max-width: 1100px;

    margin: 0;
color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px; 

    font-size:
        clamp(42px, 6vw, 80px);

 
}

.software-final h2 span {
    display: block;

     color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}


/* =========================================================
   CTA
========================================================= */

.software-cta {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    padding:
        85px 0;
}

.software-cta-content small {
    color: #444444;

    font-size: 15px;

    letter-spacing: 3px;
}

.software-cta-content h2 {
    margin:
        15px 0 20px;

   color: #fff;
line-height: 0.95;
font-weight: 700;
letter-spacing: -3px;                                               


    font-size:
        clamp(42px, 5vw, 72px);

   
}

.software-cta-content h2 span {
    display: block;

    color: transparent;
 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

}

.software-cta-content p {
    max-width: 600px;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.software-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        16px 21px;

    border:
        1px solid
        rgba(255,255,255,.15);

    color: #666666;

    font-size: 12px;

    letter-spacing: 2px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        .4s ease;
}

.software-cta-button span {
    font-size: 18px;

    transition:
        transform .4s ease;
}

.software-cta-button:hover {
    color: #ffffff;

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

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

.software-cta-button:hover span {
    transform:
        translate(5px,-5px);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.software-copyright {
    padding:
        25px 0;

    color: #333333;

    font-size: 7px;

    letter-spacing: 3px;

    text-align: center;

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


/* =========================================================
   SELECTION
========================================================= */

.software-page ::selection {
    color: #000000;

    background: #ffffff;
}


/* =========================================================
   TABLET — 1100px
========================================================= */

@media (max-width: 1100px) {

    .software-page-inner {
        width: 88vw;
    }

    .software-solution {
        grid-template-columns:
            45px
            minmax(250px,1.3fr)
            minmax(160px,.8fr)
            30px;

        gap: 18px;
    }

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

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

    .software-metric:nth-child(2) {
        border-right: none;
    }

    .software-metric:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

}


/* =========================================================
   TABLET — 900px
========================================================= */

@media (max-width: 900px) {

    .software-solution {
        grid-template-columns:
            40px
            1fr
            30px;
    }

    .software-solution-tags {
        display: none;
    }

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

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

    .software-technology-layout {
        grid-template-columns:
            1fr;

        gap: 45px;
    }

    .software-cta {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE — 600px
========================================================= */

@media (max-width: 600px) {

    .software-page-inner {
        width:
            calc(100% - 40px);

        padding-top: 100px;

        padding-bottom: 70px;
    }


    /* SECTION MARKER */

    .software-section-marker {
        padding-bottom: 12px;

        margin-bottom: 25px;
    }

    .software-section-marker span {
        font-size: 6px;

        letter-spacing: 2px;
    }

    .software-section-marker small {
        font-size: 5px;
    }


    /* MAIN TITLE */

    .software-main-title {
        margin:
            15px 0 25px;

        font-size: 48px;

        line-height: .86;

        letter-spacing: -3px;
    }

    .software-main-title span {
        -webkit-text-stroke:
            1px
            rgba(255,255,255,.85);
    }


    /* INTRO */

    .software-main-description {
        margin-bottom: 35px;

        font-size: 11px;

        line-height: 1.8;
    }


    /* METRICS */

    .software-intro-metrics {
        grid-template-columns:
            1fr;

        margin-bottom: 70px;
    }

    .software-metric {
        min-height: auto;

        padding: 20px;

        border-right: none;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

    .software-metric:last-child {
        border-bottom: none;
    }

    .software-metric strong {
        font-size: 27px;
    }

    .software-metric span {
        font-size: 6px;
    }


    /* SOLUTIONS */

    .software-solution {
        grid-template-columns:
            28px
            1fr
            25px;

        min-height: 145px;

        gap: 10px;

        padding:
            20px 0;
    }

    .software-solution:hover {
        padding-left: 7px;
    }

    .software-solution-number {
        font-size: 7px;
    }

    .software-solution-content small {
        font-size: 5px;

        letter-spacing: 2px;
    }

    .software-solution-content h2 {
        font-size: 22px;

        letter-spacing: -1px;
    }

    .software-solution-content p {
        margin-top: 9px;

        font-size: 9px;

        line-height: 1.7;
    }

    .software-solution-arrow {
        font-size: 17px;
    }


    /* COMMON SPACING */

    .software-problems,
    .software-features,
    .software-process,
    .software-technology,
    .software-security,
    .software-applications,
    .software-belief,
    .software-final {
        margin-top: 70px;
    }


    /* PROBLEMS */

    .software-problem-grid {
        grid-template-columns:
            1fr;
    }

    .software-problem-card {
        min-height: 220px;

        padding: 22px;
    }

    .software-problem-card h3 {
        margin-top: 40px;

        font-size: 18px;
    }

    .software-problem-card p {
        font-size: 10px;

        line-height: 1.8;
    }


    /* FEATURES */

    .software-feature-grid {
        grid-template-columns:
            1fr;
    }

    .software-feature {
        min-height: 205px;

        padding: 22px;
    }

    .software-feature h3 {
        margin-top: 40px;

        font-size: 17px;
    }

    .software-feature p {
        font-size: 10px;

        line-height: 1.8;
    }


    /* PROCESS */

    .software-process-grid {
        grid-template-columns:
            1fr;
    }

    .software-process-step {
        min-height: 210px;

        padding: 22px;
    }

    .software-process-step h3 {
        margin-top: 40px;

        font-size: 18px;
    }

    .software-process-step p {
        font-size: 10px;

        line-height: 1.8;
    }


    /* TECHNOLOGY */

    .software-technology-layout {
        grid-template-columns:
            1fr;

        gap: 30px;

        padding:
            40px 0;
    }

    .software-technology-copy h2 {
        font-size: 32px;

        letter-spacing: -2px;
    }

    .software-technology-copy p {
        font-size: 10px;

        line-height: 1.8;
    }

    .software-technology-stack {
        gap: 6px;
    }

    .software-technology-stack span {
        padding:
            8px 10px;

        font-size: 6px;
    }


    /* SECURITY */

    .software-security-grid {
        grid-template-columns:
            1fr;
    }

    .software-security-card {
        min-height: 205px;

        padding: 22px;
    }

    .software-security-card h3 {
        margin-top: 40px;

        font-size: 17px;
    }

    .software-security-card p {
        font-size: 10px;

        line-height: 1.8;
    }


    /* APPLICATIONS */

    .software-application-item {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            20px 0;
    }

    .software-application-item span {
        font-size: 6px;
    }

    .software-application-item strong {
        font-size: 10px;

        line-height: 1.7;
    }


    /* BELIEF */

    .software-belief {
        display: block;

        padding:
            45px 0;
    }

    .software-belief-number {
        margin-bottom: 25px;
    }

    .software-belief-content h2 {
        font-size: 32px;

        letter-spacing: -2px;
    }

    .software-belief-content p {
        font-size: 11px;

        line-height: 1.8;
    }


    /* FINAL */

    .software-final {
        padding:
            45px 0;
    }

    .software-final-label {
        font-size: 5px;
    }

    .software-final h2 {
        font-size: 35px;

        letter-spacing: -2px;
    }


    /* CTA */

    .software-cta {
        padding:
            55px 0;
    }

    .software-cta-content h2 {
        font-size: 37px;

        letter-spacing: -2px;
    }

    .software-cta-content p {
        font-size: 10px;

        line-height: 1.8;
    }

    .software-cta-button {
        padding:
            12px 15px;

        font-size: 6px;
    }


    /* COPYRIGHT */

    .software-copyright {
        padding:
            15px 0 20px;

        font-size: 5px;

        letter-spacing: 2px;
    }

}


/* =========================================================
   SMALL MOBILE — 400px
========================================================= */

@media (max-width: 400px) {

    .software-page-inner {
        width:
            calc(100% - 28px);
    }

    .software-main-title {
        font-size: 40px;

        letter-spacing: -2px;
    }

    .software-main-description {
        font-size: 9px;
    }

    .software-solution-content h2 {
        font-size: 20px;
    }

    .software-solution-content p {
        font-size: 8px;
    }

    .software-technology-copy h2 {
        font-size: 28px;
    }

    .software-belief-content h2 {
        font-size: 27px;
    }

    .software-final h2 {
        font-size: 30px;
    }

    .software-cta-content h2 {
        font-size: 31px;
    }

}


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

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

    .software-solution,
    .software-solution::before,
    .software-solution-content h2,
    .software-solution-arrow,
    .software-problem-card,
    .software-feature,
    .software-process-step,
    .software-technology-stack span,
    .software-application-item,
    .software-cta-button {
        transition: none !important;
    }

}
/* =========================================================
   LOADER LOGO — NO SQUARE BORDER
========================================================= */

.loader-logo {
    width: 70px;
    height: 70px;

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

    border: none;
    background: transparent;

    font-size: 32px;
    font-weight: 900;
    letter-spacing: -2px;

    margin-bottom: 35px;
}

.loader-logo img {
    width: 58px;
    height: 58px;

    object-fit: contain;

    border: none;
    outline: none;
    box-shadow: none;
}
/* =========================================================
   LOON TECHNOLOGIES
   CONTACT PAGE
========================================================= */


/* =========================================================
   PAGE SCROLLING
========================================================= */

html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================================
   CONTACT EXPERIENCE
========================================================= */

.contact-experience {
    position: relative;
    z-index: 5;

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

    padding-top: 130px;
    padding-bottom: 100px;

    box-sizing: border-box;
}


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
    position: relative;

    width: 100%;
    min-height: 65vh;

    display: flex;
    align-items: center;

    padding: 25px 8vw;

    box-sizing: border-box;
}


.contact-hero-inner {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


.contact-section-number {
    margin-bottom: 20px;

    color: #555;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;
}


.contact-section-tag {
    margin-bottom: 25px;

    color: #777;

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 5px;
}


.contact-hero h1 {
    max-width: 1100px;

    margin: 0;

    color: #fff;

    font-size: clamp(52px, 8vw, 125px);

    line-height: 0.9;

    font-weight: 800;

    letter-spacing: -6px;
}


.contact-hero h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,0.55);
}


.contact-hero p {
    max-width: 680px;

    margin-top: 40px;

    color: #666666;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-main {
    position: relative;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 70px 8vw 100px;

    display: grid;

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

    gap: 90px;

    box-sizing: border-box;
}


/* =========================================================
   HEADINGS
========================================================= */

.contact-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 18px;

    margin-bottom: 45px;

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}


.contact-heading span {
    color: #fff;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 500;
}


.contact-heading small {
    color: #444;

    font-size: 12px;

    letter-spacing: 3px;
}


/* =========================================================
   FORM INTRO
========================================================= */

.contact-form-intro {
    margin-bottom: 45px;
}


.contact-form-intro h2,
.contact-location-intro h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(38px, 4vw, 65px);

    line-height: 0.95;

    font-weight: 700;

    letter-spacing: -3px;
}


.contact-form-intro h2 span,
.contact-location-intro h2 span {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.5);
}


.contact-form-intro p,
.contact-location-intro p {
    max-width: 580px;

    margin-top: 25px;

    color: #777;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   FORM
========================================================= */

.loon-contact-form {
    width: 100%;
}


.contact-form-row {
    display: grid;

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

    gap: 20px;

    margin-bottom: 25px;
}


.contact-field {
    position: relative;

    width: 100%;
}


.contact-field input,
.contact-field select,
.contact-field textarea {

    width: 100%;

    box-sizing: border-box;

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

    outline: none;

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

    color: #fff;

    font-family: inherit;

    font-size: 15px;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;

}


.contact-field input,
.contact-field select {

    height: 62px;

    padding:
        20px 18px;
}


.contact-field textarea {

    min-height: 190px;

    padding:
        25px 18px;

    resize: vertical;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

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

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


/* =========================================================
   FLOATING LABEL
========================================================= */

.contact-field label {

    position: absolute;

    left: 18px;

    top: 22px;

    color: #555;

    font-size: 9px;

    letter-spacing: 3px;

    pointer-events: none;

    transition:
        0.3s ease;
}


.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label {

    top: 8px;

    font-size: 7px;

    color: #aaa;

    letter-spacing: 2px;
}


.contact-field input:focus,
.contact-field textarea:focus {

    padding-top: 25px;
}


/* =========================================================
   SELECT
========================================================= */

.contact-field select {

    appearance: none;

    cursor: pointer;

    color: #777;
}


.contact-field select option {

    background: #050505;

    color: #fff;
}


.contact-field select:focus {

    color: #fff;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    width: 100%;

    min-height: 64px;

    margin-top: 10px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

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

    color: #fff;

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    cursor: pointer;

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


.contact-submit b {

    font-size: 20px;

    font-weight: 300;

    transition:
        transform 0.3s ease;
}


.contact-submit:hover {

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

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

    transform:
        translateY(-3px);
}


.contact-submit:hover b {

    transform:
        translate(5px,-5px);
}


.contact-form-message {

    margin-top: 18px;

    color: #aaa;

    font-size: 10px;

    letter-spacing: 1px;

    line-height: 1.6;
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location-section {
    width: 100%;
}


.contact-location-intro {
    margin-bottom: 40px;
}


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

.loon-map-container {

    position: relative;

    width: 100%;

    height: 520px;

    overflow: hidden;

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

    background: #050505;
}


.loon-map-container iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

    filter:
        grayscale(100%)
        contrast(1.1)
        brightness(0.72);

    transition:
        filter 0.6s ease;
}


/* MAP BECOMES COLOUR ON HOVER */

.loon-map-container:hover iframe {

    filter:
        grayscale(0%)
        contrast(1)
        brightness(1);
}


/* =========================================================
   MAP MARKER
========================================================= */

.map-location-marker {

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 4;

    pointer-events: none;
}


.map-pulse {

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 8px
        rgba(255,255,255,0.12),

        0 0 0 18px
        rgba(255,255,255,0.05);

    animation:
        mapPulse 2s infinite;
}


@keyframes mapPulse {

    0% {
        box-shadow:
            0 0 0 5px
            rgba(255,255,255,0.18),
            0 0 0 12px
            rgba(255,255,255,0.05);
    }

    50% {
        box-shadow:
            0 0 0 12px
            rgba(255,255,255,0.08),
            0 0 0 25px
            rgba(255,255,255,0.02);
    }

    100% {
        box-shadow:
            0 0 0 5px
            rgba(255,255,255,0.18),
            0 0 0 12px
            rgba(255,255,255,0.05);
    }

}


.map-location-box {

    position: absolute;

    left: 30px;

    top: -25px;

    width: 170px;

    padding: 14px;

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

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


.map-location-box strong {

    display: block;

    color: #fff;

    font-size: 9px;

    letter-spacing: 2px;
}


.map-location-box span {

    display: block;

    margin-top: 6px;

    color: #777;

    font-size: 7px;

    letter-spacing: 2px;
}


/* =========================================================
   MAP LABELS
========================================================= */

.map-top-label,
.map-bottom-label {

    position: absolute;

    z-index: 5;

    padding: 10px 14px;

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

    color: #aaa;

    font-size: 7px;

    letter-spacing: 3px;

    pointer-events: none;
}


.map-top-label {

    top: 15px;

    left: 15px;
}


.map-bottom-label {

    bottom: 15px;

    right: 15px;
}


/* =========================================================
   LOCATION DETAILS
========================================================= */

.location-details {

    display: grid;

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

    margin-top: 25px;

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

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


.location-detail {

    min-height: 95px;

    padding: 20px 15px;

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


.location-detail:last-child {

    border-right: none;
}


.location-detail span {

    display: block;

    margin-bottom: 14px;

    color: #444;

    font-size: 12px;

    letter-spacing: 3px;
}


.location-detail strong,
.location-detail a {

    color: #aaa;

    font-size: 16px;

    line-height: 1.5;

    text-decoration: none;
}


.location-detail a:hover {

    color: #fff;
}


/* =========================================================
   MAP BUTTON
========================================================= */

.map-open-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 58px;

    margin-top: 20px;

    padding: 0 20px;

    box-sizing: border-box;

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

    color: #777;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 3px;

    transition:
        0.3s ease;
}


.map-open-button b {

    color: #555;

    font-size: 18px;

    font-weight: 300;
}


.map-open-button:hover {

    color: #fff;

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

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


.map-open-button:hover b {

    color: #fff;

    transform:
        translate(4px,-4px);
}


/* =========================================================
   BOTTOM CONTACT INFORMATION
========================================================= */

.contact-bottom {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding:
        50px 8vw 70px;

    display: grid;

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

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

    box-sizing: border-box;
}


.contact-bottom-item {

    padding: 10px 25px;

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


.contact-bottom-item:first-child {

    padding-left: 0;
}


.contact-bottom-item:last-child {

    border-right: none;
}


.contact-bottom-item span {

    display: block;

    margin-bottom: 12px;

    color: #444;

    font-size: 12px;

    letter-spacing: 3px;
}


.contact-bottom-item a,
.contact-bottom-item strong {

    color: #888;

    font-size: 16px;

    line-height: 1.5;

    text-decoration: none;
}


.contact-bottom-item a:hover {

    color: #fff;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {

    position: relative;

    z-index: 20;

    width: 100%;

    padding: 18px 30px;

    box-sizing: border-box;

    text-align: center;

    color: #333;

    font-size: 7px;

    letter-spacing: 3px;
}


/* =========================================================
   MENU SHOULD STAY ABOVE EVERYTHING
========================================================= */

.menu-overlay {

    z-index: 3000 !important;
}


.topbar {

    z-index: 2000 !important;
}


.cursor-dot,
.cursor-ring,
.cursor-text {

    z-index: 5000 !important;
}


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

@media (max-width: 1000px) {

    .contact-main {

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .contact-hero {

        min-height: 55vh;

        padding:
            80px 7vw;

    }


    .contact-hero h1 {

        font-size:
            clamp(48px, 10vw, 90px);

    }


    .loon-map-container {

        height: 480px;

    }

}


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

@media (max-width: 700px) {

    .contact-experience {

        padding-top: 100px;

    }


    .contact-hero {

        min-height: auto;

        padding:
            100px 25px 70px;

    }


    .contact-hero h1 {

        font-size:
            clamp(42px, 12vw, 70px);

        letter-spacing:
            -3px;

    }


    .contact-hero p {

        font-size: 13px;

        line-height: 1.7;

    }


    .contact-main {

        padding:
            40px 25px 70px;

    }


    .contact-form-row {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .location-details {

        grid-template-columns: 1fr;

    }


    .location-detail {

        border-right: none;

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

    }


    .location-detail:last-child {

        border-bottom: none;

    }


    .contact-bottom {

        grid-template-columns: 1fr;

        padding:
            40px 25px;

    }


    .contact-bottom-item {

        padding:
            20px 0;

        border-right: none;

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

    }


    .contact-bottom-item:last-child {

        border-bottom: none;

    }


    .loon-map-container {

        height: 400px;

    }


    .contact-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

    }

}


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

@media (max-width: 450px) {

    .contact-hero {

        padding:
            90px 20px 60px;

    }


    .contact-main {

        padding:
            30px 20px 60px;

    }


    .contact-hero h1 {

        font-size: 43px;

    }


    .contact-form-intro h2,
    .contact-location-intro h2 {

        font-size: 38px;

    }


    .loon-map-container {

        height: 340px;

    }


    .map-location-box {

        left: 20px;

        width: 145px;

    }


    .contact-submit {

        min-height: 58px;

        font-size: 8px;

    }

}
/* =========================================================
   PHONE LINK
========================================================= */

.location-detail a {
    display: inline-block;

    color: #888;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.5;

    transition:
        color 0.3s ease;
}

.location-detail a:hover {
    color: #fff;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.contact-social {

    margin-top: 35px;

    width: 100%;
}


/* SOCIAL HEADING */

.contact-social-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 16px;

    margin-bottom: 0;

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


.contact-social-heading span {

    color: #fff;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;
}


.contact-social-heading small {

    color: #444;

    font-size: 7px;

    letter-spacing: 3px;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.social-links {

    width: 100%;
}


.social-links a {

    position: relative;

    display: grid;

    grid-template-columns:
        35px 1fr 30px;

    align-items: center;

    min-height: 58px;

    padding: 0 10px;

    box-sizing: border-box;

    color: #666;

    text-decoration: none;

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

    transition:
        color 0.35s ease,
        background 0.35s ease,
        padding-left 0.35s ease;
}


.social-links a:hover {

    color: #fff;

    padding-left: 18px;

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


/* =========================================================
   SOCIAL ICON
========================================================= */

.social-icon {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 25px;

    color: #555;

    font-size: 14px;

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


.social-links a:hover .social-icon {

    color: #fff;

    transform:
        scale(1.08);
}


/* =========================================================
   SOCIAL NAME
========================================================= */

.social-name {

    color: inherit;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3px;
}


/* =========================================================
   SOCIAL ARROW
========================================================= */

.social-arrow {

    justify-self: end;

    color: #444;

    font-size: 18px;

    font-weight: 300;

    opacity: 0;

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

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


.social-links a:hover .social-arrow {

    opacity: 1;

    color: #fff;

    transform:
        translate(0, 0);
}


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

@media (max-width: 700px) {

    .contact-social {

        margin-top: 30px;

    }


    .contact-social-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .social-links a {

        min-height: 55px;

        grid-template-columns:
            35px 1fr 25px;

    }

}
/* =========================================================
   SOCIAL MEDIA
========================================================= */

.contact-social {
    width: 100%;
    margin-top: 35px;
}


/* HEADING */

.contact-social-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.contact-social-heading span {
    color: #fff;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;
}

.contact-social-heading small {
    color: #444;

    font-size: 7px;
    letter-spacing: 3px;
}


/* =========================================================
   ICON ROW
========================================================= */

.social-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 30px;

    width: 100%;
}


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

.social-row a {
    width: 42px;
    height: 42px;

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

    color: #555;

    text-decoration: none;

    background: transparent;

    border: none;

    outline: none;

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


.social-row a i {
    font-size: 21px;

    font-weight: 400;

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


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

.social-row a:hover {
    color: #fff;

    background: transparent;

    border: none;

    transform: translateY(-3px);
}


.social-row a:hover i {
    color: #fff;

    transform: scale(1.15);
}


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

@media (max-width: 600px) {

    .social-row {
        gap: 20px;
    }

    .social-row a {
        width: 35px;
        height: 35px;
    }

    .social-row a i {
        font-size: 18px;
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   PORTFOLIO
========================================================= */


/* =========================================================
   PORTFOLIO MAIN
========================================================= */

.portfolio-experience {

    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 100vh;

    padding:
        145px 7vw 100px;

    box-sizing: border-box;

    overflow-y: auto;

    overflow-x: hidden;

}


/* =========================================================
   PORTFOLIO SECTION
========================================================= */

.portfolio-section {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

}


/* =========================================================
   4 COLUMN GRID
========================================================= */

.portfolio-grid {

    width: 100%;

    display: grid;

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

    gap: 18px;

}


/* =========================================================
   PORTFOLIO IMAGE
========================================================= */

.portfolio-image {

    position: relative;

    display: block;

    width: 100%;

    height: 300px;

    padding: 0;

    margin: 0;

    overflow: hidden;

    border: none;

    outline: none;

    background: #080808;

    cursor: pointer;

    appearance: none;

}


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

.portfolio-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.78;

    filter:
        grayscale(100%)
        contrast(1.05);

    transform:
        scale(1);

    transition:
        transform 0.8s
        cubic-bezier(0.16, 1, 0.3, 1),

        filter 0.6s ease,

        opacity 0.6s ease;

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.portfolio-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 45%,
            rgba(0,0,0,0.30)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.5s ease;

}


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

.portfolio-image:hover img {

    transform:
        scale(1.07);

    filter:
        grayscale(0%)
        contrast(1);

    opacity: 1;

}


.portfolio-image:hover::after {

    opacity: 1;

}


/* =========================================================
   FOCUS
========================================================= */

.portfolio-image:focus {

    outline: none;

}


.portfolio-image:focus-visible {

    outline:
        1px solid rgba(255,255,255,0.6);

    outline-offset: 4px;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.portfolio-lightbox {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 70px;

    box-sizing: border-box;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

}


/* =========================================================
   ACTIVE LIGHTBOX
========================================================= */

.portfolio-lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   LIGHTBOX IMAGE WRAPPER
========================================================= */

.lightbox-image-wrapper {

    position: relative;

    max-width: 88vw;

    max-height: 84vh;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        scale(0.92);

    opacity: 0;

    transition:
        transform 0.5s
        cubic-bezier(0.16,1,0.3,1),
        opacity 0.4s ease;

}


/* ACTIVE IMAGE */

.portfolio-lightbox.active
.lightbox-image-wrapper {

    transform:
        scale(1);

    opacity: 1;

}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.lightbox-image-wrapper img {

    display: block;

    max-width: 88vw;

    max-height: 82vh;

    width: auto;

    height: auto;

    object-fit: contain;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.7);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.lightbox-close {

    position: absolute;

    top: 30px;

    right: 35px;

    z-index: 5;

    width: 45px;

    height: 45px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

}


/* CLOSE LINES */

.lightbox-close span {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 25px;

    height: 1px;

    background: #777;

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

}


.lightbox-close span:first-child {

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

}


.lightbox-close span:last-child {

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

}


.lightbox-close:hover span {

    background: #fff;

}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.lightbox-prev,
.lightbox-next {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #555;

    cursor: pointer;

    transform:
        translateY(-50%);

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

}


.lightbox-prev {

    left: 30px;

}


.lightbox-next {

    right: 30px;

}


.lightbox-prev span,
.lightbox-next span {

    font-size: 30px;

    font-weight: 300;

}


.lightbox-prev:hover,
.lightbox-next:hover {

    color: #fff;

}


.lightbox-prev:hover {

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

}


.lightbox-next:hover {

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

}


/* =========================================================
   COUNTER
========================================================= */

.lightbox-counter {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    color: #555;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

}


/* =========================================================
   BODY WHEN LIGHTBOX OPEN
========================================================= */

body.lightbox-open {

    overflow: hidden;

}


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

@media (max-width: 1100px) {

    .portfolio-experience {

        padding:
            130px 5vw 90px;

    }


    .portfolio-grid {

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

        gap: 16px;

    }


    .portfolio-image {

        height: 280px;

    }

}


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

@media (max-width: 800px) {

    .portfolio-experience {

        padding:
            120px 30px 80px;

    }


    .portfolio-grid {

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

        gap: 15px;

    }


    .portfolio-image {

        height: 280px;

    }


    .portfolio-lightbox {

        padding: 50px 20px;

    }


    .lightbox-image-wrapper {

        max-width: 90vw;

        max-height: 80vh;

    }


    .lightbox-image-wrapper img {

        max-width: 90vw;

        max-height: 78vh;

    }


    .lightbox-prev {

        left: 8px;

    }


    .lightbox-next {

        right: 8px;

    }

}


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

@media (max-width: 500px) {

    .portfolio-experience {

        padding:
            105px 18px 70px;

    }


    .portfolio-grid {

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

        gap: 10px;

    }


    .portfolio-image {

        height: 190px;

    }


    .lightbox-close {

        top: 15px;

        right: 15px;

    }


    .lightbox-prev,
    .lightbox-next {

        width: 40px;

        height: 40px;

    }


    .lightbox-prev span,
    .lightbox-next span {

        font-size: 22px;

    }


    .lightbox-counter {

        bottom: 18px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .portfolio-image {

        height: 160px;

    }

}
/* =========================================================
   HOME PAGE PORTFOLIO GALLERY
========================================================= */

.portfolio-home-content {
    padding-bottom: 100px;
}


/* =========================================================
   PORTFOLIO INTRO
========================================================= */

.portfolio-home-intro {
    max-width: 560px;
    margin-bottom: 35px;
}


/* =========================================================
   IMAGE GRID
========================================================= */

.home-portfolio-grid {

    width: 100%;

    display: grid;

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

    gap: 15px;

    margin-top: 35px;

}


/* =========================================================
   IMAGE ITEM
========================================================= */

.home-portfolio-item {

    position: relative;

    display: block;

    width: 100%;

    height: 220px;

    padding: 0;

    border: none;

    outline: none;

    overflow: hidden;

    background: #080808;

    cursor: pointer;

    appearance: none;

}


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

.home-portfolio-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 0.72;

    filter:
        grayscale(100%)
        contrast(1.05);

    transform: scale(1);

    transition:
        transform 0.8s
        cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease,
        filter 0.6s ease;

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.home-portfolio-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 45%,
            rgba(0,0,0,0.35)
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;

    pointer-events: none;

}


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

.home-portfolio-item:hover img {

    transform: scale(1.08);

    opacity: 1;

    filter:
        grayscale(0%)
        contrast(1);

}


.home-portfolio-item:hover::after {

    opacity: 1;

}


/* =========================================================
   FOCUS
========================================================= */

.home-portfolio-item:focus-visible {

    outline:
        1px solid #ffffff;

    outline-offset: 4px;

}


/* =========================================================
   VIEW ALL
========================================================= */

.home-portfolio-footer {

    display: flex;

    justify-content: flex-end;

    margin-top: 25px;

}


.home-portfolio-view {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    color: #777777;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 3px;

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

}


.home-portfolio-view span {

    font-size: 17px;

    transition:
        transform 0.3s ease;

}


.home-portfolio-view:hover {

    color: #ffffff;

    transform: translateX(4px);

}


.home-portfolio-view:hover span {

    transform:
        translate(4px, -4px);

}


/* =========================================================
   PORTFOLIO POPUP
========================================================= */

.home-portfolio-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

}


.home-portfolio-lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   POPUP IMAGE
========================================================= */

.home-lightbox-image {

    max-width: 88vw;

    max-height: 82vh;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.7);

    transform: scale(0.92);

    opacity: 0;

    transition:
        transform 0.5s
        cubic-bezier(0.16,1,0.3,1),
        opacity 0.4s ease;

}


.home-portfolio-lightbox.active
.home-lightbox-image {

    transform: scale(1);

    opacity: 1;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.home-lightbox-close {

    position: absolute;

    top: 25px;

    right: 30px;

    width: 45px;

    height: 45px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

}


.home-lightbox-close::before,
.home-lightbox-close::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 26px;

    height: 1px;

    background: #777777;

    transition:
        background 0.3s ease;

}


.home-lightbox-close::before {

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

}


.home-lightbox-close::after {

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

}


.home-lightbox-close:hover::before,
.home-lightbox-close:hover::after {

    background: #ffffff;

}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.home-lightbox-prev,
.home-lightbox-next {

    position: absolute;

    top: 50%;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #666666;

    font-size: 30px;

    font-weight: 300;

    cursor: pointer;

    transform:
        translateY(-50%);

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

}


.home-lightbox-prev {

    left: 25px;

}


.home-lightbox-next {

    right: 25px;

}


.home-lightbox-prev:hover,
.home-lightbox-next:hover {

    color: #ffffff;

}


.home-lightbox-prev:hover {

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

}


.home-lightbox-next:hover {

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

}


/* =========================================================
   COUNTER
========================================================= */

.home-lightbox-counter {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    color: #555555;

    font-size: 8px;

    letter-spacing: 4px;

}


/* =========================================================
   BODY POPUP
========================================================= */

body.home-lightbox-open {

    overflow: hidden;

}


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

@media (max-width: 1100px) {

    .home-portfolio-grid {

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

    }


    .home-portfolio-item {

        height: 210px;

    }

}


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

@media (max-width: 800px) {

    .home-portfolio-grid {

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

        gap: 12px;

    }


    .home-portfolio-item {

        height: 220px;

    }


    .portfolio-home-content {

        padding-bottom: 80px;

    }

}


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

@media (max-width: 500px) {

    .home-portfolio-grid {

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

        gap: 8px;

    }


    .home-portfolio-item {

        height: 150px;

    }


    .portfolio-home-intro {

        font-size: 13px;

    }


    .home-portfolio-lightbox {

        padding: 40px 15px;

    }


    .home-lightbox-image {

        max-width: 92vw;

        max-height: 78vh;

    }


    .home-lightbox-prev {

        left: 5px;

    }


    .home-lightbox-next {

        right: 5px;

    }


    .home-lightbox-prev,
    .home-lightbox-next {

        width: 40px;

        height: 40px;

        font-size: 22px;

    }

}
/* =========================================================
   NORMAL WEBSITE SCROLLING
   ========================================================= */

/* Allow the complete website to scroll normally */
html {
    width: 100%;
    min-height: 100%;
    height: auto;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100%;
    height: auto;

    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior-y: auto;
}


/* Main website container */
#experience {
    position: relative;

    width: 100%;
    min-height: 100vh;
    height: auto;

    overflow: visible;
}


/* Every section becomes a normal document section */
.screen {
    position: relative;

    inset: auto;

    width: 100%;
    min-height: 100vh;
    height: auto;

    padding: 120px 10% 100px;

    overflow: visible;

    opacity: 1;
    visibility: visible;

    transform: none;

    transition: none;
}


/* Do NOT hide inactive sections */
.screen.active {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* Remove screen animation states */
.screen.screen-next,
.screen.screen-prev {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.screen + .screen {
    margin-top: 0;
}


/* =========================================================
   MOBILE NORMAL SCROLLING
   ========================================================= */

@media (max-width: 900px) {

    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto;

        cursor: auto;
    }

    #experience {
        width: 100%;
        min-height: 100vh;
        height: auto;

        overflow: visible;
    }

    .screen {
        position: relative;

        width: 100%;
        min-height: 100vh;
        height: auto;

        padding:
            110px
            25px
            80px;

        overflow: visible;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

}


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

@media (max-width: 600px) {

    .screen {
        min-height: auto;

        padding:
            100px
            20px
            80px;
    }

}
/* =========================================================
   REMOVE EXCESSIVE SECTION GAPS
   ========================================================= */

#experience {
    min-height: auto;
    height: auto;
    overflow: visible;
}

.screen {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: auto;
    height: auto;

    padding: 90px 10% 60px;

    overflow: visible;

    opacity: 1;
    visibility: visible;
    transform: none;
}

.screen + .screen {
    margin-top: 0;
    padding-top: 70px;
}

/* Keep the first section slightly larger */
#home {
    min-height: 100vh;
}

/* Reduce unnecessary portfolio spacing */
.portfolio-home-content {
    padding-bottom: 40px;
}

/* Reduce services spacing */
.services-content {
    padding-top: 0;
    padding-bottom: 50px;
}

/* Reduce intro-to-content gaps */
.section-intro {
    margin-top: 25px;
    margin-bottom: 30px;
}

.service-interface {
    margin-top: 30px;
}

/* Contact section */
.contact-content {
    padding-bottom: 40px;
}

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

@media (max-width: 1100px) {
    .screen {
        padding: 85px 7% 55px;
    }

    .screen + .screen {
        padding-top: 60px;
    }
}

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

@media (max-width: 900px) {
    .screen {
        min-height: auto;
        height: auto;
        padding: 90px 25px 55px;
    }

    .screen + .screen {
        padding-top: 55px;
    }
}

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

@media (max-width: 600px) {
    .screen {
        min-height: auto;
        padding: 80px 20px 45px;
    }

    .screen + .screen {
        padding-top: 45px;
    }
}
.screen {
    position: relative;
    width: 100%;
    min-height: auto;
    height: auto;
    padding: 90px 10% 60px;

    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.portfolio-home-content {
    padding-bottom: 40px;
}
/* =========================================================
   PORTFOLIO - REDUCE TOP SPACE
   ========================================================= */

#portfolio {
    min-height: auto !important;
    height: auto !important;
    padding-top: 2px !important;
    padding-bottom: 45px !important;
}

#portfolio .portfolio-home-content {
    padding-top: 0 !important;
    padding-bottom: 30px !important;
}

#portfolio .section-tag {
    margin-bottom: 15px !important;
}

#portfolio .section-intro {
    margin-top: 20px !important;
    margin-bottom: 25px !important;
}

#portfolio .home-portfolio-grid {
    margin-top: 20px !important;
}
/* =========================================================
   REDUCE GAP BETWEEN ABOUT CARDS AND SERVICES SECTION
   ========================================================= */

/* Previous section */
#experience .screen {
    padding-bottom: 20px !important;
}

/* Services section */
#services {
    padding-top: 2px !important;
    margin-top: 0 !important;
}

/* Services content */
#services .section-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Heading spacing */
#services .section-tag {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Intro spacing */
#services .section-intro {
    margin-top: 20px !important;
    margin-bottom: 25px !important;
}

/* Remove extra margin from service interface */
#services .service-interface {
    margin-top: 20px !important;
}
/* =========================================================
   MENU BUTTON + FULLSCREEN MENU FIX
========================================================= */

.topbar {
    position: fixed;
    z-index: 5000 !important;
}

.menu-button {
    position: relative;
    z-index: 6000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5500 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.menu-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.menu-overlay-inner {
    position: relative;
    z-index: 2;
}

.menu-overlay a,
.menu-overlay button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Menu button animation */

.menu-button.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.menu-button span {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
/* =========================================================
   LOON TECHNOLOGIES
   FINAL PORTFOLIO LIGHTBOX
========================================================= */

.portfolio-lightbox {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 40px !important;

    background: rgba(0, 0, 0, 0.97) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 999999 !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;
}


/* OPEN */

.portfolio-lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.lightbox-image-wrapper {
    position: relative !important;

    width: auto !important;
    height: auto !important;

    max-width: 90vw !important;
    max-height: 85vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 1000000 !important;
}


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

.lightbox-image-wrapper img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 90vw !important;
    max-height: 85vh !important;

    object-fit: contain !important;

    opacity: 1 !important;

    transform: scale(1) !important;

    border: none !important;
    outline: none !important;

    box-shadow:
        0 20px 80px
        rgba(0, 0, 0, 0.8) !important;

    user-select: none !important;

    -webkit-user-drag: none !important;
}


/* =========================================================
   CLOSE
========================================================= */

.lightbox-close {
    position: fixed !important;

    top: 25px !important;
    right: 30px !important;

    width: 55px !important;
    height: 55px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;

    background: transparent !important;

    color: white !important;

    z-index: 1000005 !important;

    cursor: pointer !important;
}


.lightbox-close span {
    position: absolute !important;

    width: 30px !important;
    height: 1px !important;

    background: white !important;

    display: block !important;

    transition:
        background 0.2s ease !important;
}


.lightbox-close span:first-child {
    transform: rotate(45deg) !important;
}


.lightbox-close span:last-child {
    transform: rotate(-45deg) !important;
}


.lightbox-close:hover span {
    background: #ff3333 !important;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.lightbox-prev,
.lightbox-next {
    position: fixed !important;

    top: 50% !important;

    transform:
        translateY(-50%) !important;

    width: 65px !important;
    height: 65px !important;

    display: flex !important;

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

    border: none !important;

    background: transparent !important;

    color: white !important;

    font-size: 32px !important;

    line-height: 1 !important;

    z-index: 1000005 !important;

    cursor: pointer !important;

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


.lightbox-prev {
    left: 20px !important;
}


.lightbox-next {
    right: 20px !important;
}


.lightbox-prev:hover {
    color: #ff3333 !important;

    transform:
        translateY(-50%)
        translateX(-5px) !important;
}


.lightbox-next:hover {
    color: #ff3333 !important;

    transform:
        translateY(-50%)
        translateX(5px) !important;
}


/* =========================================================
   COUNTER
========================================================= */

.lightbox-counter {
    position: fixed !important;

    left: 50% !important;
    bottom: 25px !important;

    transform:
        translateX(-50%) !important;

    color: rgba(255,255,255,0.65) !important;

    font-size: 10px !important;

    font-weight: 500 !important;

    letter-spacing: 4px !important;

    z-index: 1000005 !important;

    pointer-events: none !important;
}


/* =========================================================
   PREVENT BACKGROUND SCROLL
========================================================= */

body.lightbox-open {
    overflow: hidden !important;
}


/* =========================================================
   PORTFOLIO IMAGE
========================================================= */

.portfolio-image {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;

    background: transparent !important;

    cursor: pointer !important;

    overflow: hidden !important;
}


.portfolio-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    cursor: pointer !important;
}


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

@media (max-width: 768px) {

    .portfolio-lightbox {
        padding: 20px !important;
    }


    .lightbox-image-wrapper {
        max-width: 92vw !important;
        max-height: 78vh !important;
    }


    .lightbox-image-wrapper img {
        max-width: 92vw !important;
        max-height: 78vh !important;
    }


    .lightbox-close {
        top: 15px !important;
        right: 10px !important;

        width: 45px !important;
        height: 45px !important;
    }


    .lightbox-prev,
    .lightbox-next {
        width: 45px !important;
        height: 45px !important;

        font-size: 24px !important;
    }


    .lightbox-prev {
        left: 2px !important;
    }


    .lightbox-next {
        right: 2px !important;
    }


    .lightbox-counter {
        bottom: 15px !important;

        font-size: 8px !important;
    }

}
/* =========================================================
   SERVICES PAGE ONLY — FINAL HEADER FIX
========================================================= */

#services.services-screen {
    padding-top: 150px !important;
    padding-bottom: 60px !important;
    margin-top: 0 !important;
}

/* Services content only */
#services.services-screen .services-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Services heading */
#services.services-screen .services-title {
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    position: relative;
    z-index: 10;
}

/* Services intro */
#services.services-screen .services-intro {
    margin-top: 0 !important;
}

/* Services stats */
#services.services-screen .service-intro-stats {
    margin-top: 0 !important;
}

/* Our Services heading */
#services.services-screen .service-section-heading {
    position: relative;
    z-index: 10;
}
/* =========================================================
   WEB DEVELOPMENT PAGE — FINAL HEADER SPACING FIX
========================================================= */

.services-page .services-content {
    width: min(1200px, 86vw);
    margin: 0 auto;
    
    /* Space below fixed 90px header */
    padding-top: 158px !important;
    padding-bottom: 100px !important;
}

/* Keep the first heading completely below the header */
.services-page .service-intro-section {
    position: relative;
    z-index: 5;
}

/* Service label */
.services-page .service-section-heading {
    position: relative;
    z-index: 10;
}

/* Main WEB DEVELOPMENT title */
.services-page .services-title {
    position: relative;
    z-index: 10;
    margin-top: 20px !important;
}

/* Intro paragraph */
.services-page .services-intro {
    position: relative;
    z-index: 10;
}

/* Stats */
.services-page .service-intro-stats {
    position: relative;
    z-index: 10;
}
/* =========================================================
   FINAL DESKTOP + LAPTOP MENU FIX
========================================================= */

/* Header must always stay clickable */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

/* Hamburger button */
.menu-button {
    position: relative !important;
    z-index: 10001 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.01) !important;
}

/* Hamburger lines */
.menu-button span {
    display: block !important;
    width: 16px !important;
    height: 1px !important;
    background: #fff !important;
    pointer-events: none !important;
}

/* Fullscreen menu */
.menu-overlay {
    position: fixed !important;
    inset: 0 !important;

    z-index: 9999 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-100%) !important;

    background: #030303 !important;

    transition:
        transform .6s ease,
        opacity .4s ease,
        visibility .4s ease !important;
}

/* OPEN */
.menu-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Menu content */
.menu-overlay-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Menu links/buttons */
.menu-overlay a,
.menu-overlay button {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Keep hamburger above opened menu */
.menu-button.active {
    z-index: 10002 !important;
}
/* =========================================================
   FINAL BACK BUTTON POSITION FIX
========================================================= */

.menu-overlay .menu-back {
    position: absolute !important;

    top: 25px !important;
    right: 35px !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px 12px !important;

    margin: 0 !important;

    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.03) !important;

    color: #777 !important;

    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;

    line-height: 1 !important;

    z-index: 100 !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    transform: none !important;
}

/* Arrow */
.menu-overlay .menu-back span {
    display: inline-block !important;

    margin-right: 6px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    transform: none !important;
}

/* Hover */
.menu-overlay .menu-back:hover {
    color: #fff !important;

    border-color: rgba(255,255,255,0.5) !important;

    background: rgba(255,255,255,0.07) !important;
}

.menu-overlay .menu-back:hover span {
    transform: translateX(-3px) !important;
}
/* =========================================================
   FINAL LOON TECHNOLOGIES MENU HEADER FIX
========================================================= */

/* Menu overlay */
.menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5500 !important;

    background: #030303 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Menu inner */
.menu-overlay .menu-overlay-inner {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    padding: 125px 8vw 40px !important;

    display: flex !important;
    flex-direction: column !important;

    z-index: 10 !important;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.menu-overlay .menu-back {
    position: absolute !important;

    /* Put BACK on the left */
    top: 125px !important;
    left: 8vw !important;

    /* Remove old positioning */
    right: auto !important;
    bottom: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    border: 1px solid rgba(255,255,255,0.16) !important;

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

    color: #777 !important;

    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 500 !important;

    letter-spacing: 2px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 50 !important;

    transform: none !important;
}


/* Back arrow */
.menu-overlay .menu-back span {
    display: inline-block !important;

    margin-right: 6px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    transform: none !important;
}


/* Back hover */
.menu-overlay .menu-back:hover {
    color: #fff !important;

    border-color: rgba(255,255,255,0.45) !important;

    background: rgba(255,255,255,0.07) !important;
}

.menu-overlay .menu-back:hover span {
    transform: translateX(-3px) !important;
}


/* =========================================================
   LOON TECHNOLOGIES TITLE
========================================================= */

.menu-overlay .menu-title {
    position: relative !important;

    margin: 35px 0 25px 0 !important;

    padding: 0 !important;

    color: #fff !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: 5px !important;

    line-height: 1.2 !important;

    z-index: 20 !important;
}


/* Subtitle */
.menu-overlay .menu-title::after {
    display: block !important;

    margin-top: 10px !important;

    color: #444 !important;

    font-size: 6px !important;
    font-weight: 400 !important;

    letter-spacing: 2.5px !important;

    line-height: 1.5 !important;
}


/* =========================================================
   MENU LINKS
========================================================= */

.menu-overlay .menu-links {
    position: relative !important;

    z-index: 20 !important;

    width: 100% !important;
    max-width: 950px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   KEEP X MENU BUTTON ABOVE EVERYTHING
========================================================= */

.menu-button {
    position: relative !important;

    z-index: 6000 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}
/* =========================================================
   FINAL MENU FIX - LAPTOP + DESKTOP
   ========================================================= */

/* Keep header above the fullscreen menu */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5000 !important;
}

/* Menu button must always be clickable */
.menu-button {
    position: relative !important;
    z-index: 5001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fullscreen menu stays below the header */
.menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-100%) !important;

    background: #030303 !important;

    transition:
        transform 0.6s ease,
        opacity 0.4s ease,
        visibility 0.4s ease !important;
}

/* OPEN MENU */
.menu-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Menu content */
.menu-overlay-inner {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
}

/* Menu links */
.menu-overlay a,
.menu-overlay button {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* BACK BUTTON */
.menu-overlay .menu-back {
    position: absolute !important;

    top: 125px !important;
    left: 8vw !important;

    right: auto !important;
    bottom: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.03) !important;

    color: #777 !important;

    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;

    line-height: 1 !important;

    z-index: 100 !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    transform: none !important;
}

/* Back arrow */
.menu-overlay .menu-back span {
    display: inline-block !important;
    margin-right: 6px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    transform: none !important;
}

/* Back hover */
.menu-overlay .menu-back:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.07) !important;
}

.menu-overlay .menu-back:hover span {
    transform: translateX(-3px) !important;
}

/* Menu button X animation */
.menu-button.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
}

.menu-button.active span:nth-child(2) {
    opacity: 0 !important;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
}

.menu-button span {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    .topbar {
        z-index: 5000 !important;
    }

    .menu-button {
        z-index: 5001 !important;
        pointer-events: auto !important;
    }

    .menu-overlay {
        z-index: 4000 !important;
    }

}


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

@media (max-width: 900px) {

    .topbar {
        z-index: 5000 !important;
    }

    .menu-button {
        z-index: 5001 !important;
        pointer-events: auto !important;
    }

    .menu-overlay {
        z-index: 4000 !important;
    }

    .menu-overlay .menu-back {
        top: 90px !important;
        left: 25px !important;
    }

}


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

@media (max-width: 500px) {

    .menu-overlay .menu-back {
        top: 80px !important;
        left: 20px !important;
    }

}
/* =========================================================
   MOBILE READABILITY FIX
   ONE BLOCK — DO NOT CHANGE OTHER MOBILE CSS
========================================================= */

@media (max-width: 900px) {

    /* Main paragraphs */
    p {
        font-size: 15px !important;
        line-height: 1.85 !important;
        color: #8a8a8a !important;
    }


    /* Home page */
    .home-content p {
        max-width: 90% !important;
        font-size: 15px !important;
        line-height: 1.85 !important;
        margin: 25px auto !important;
    }


    /* Normal page intro */
    .section-intro {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.85 !important;
        margin: 25px 0 40px !important;
        color: #888 !important;
    }


    /* About / service cards */
    .about-card p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #888 !important;
    }


    /* Portfolio */
    .project-info p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #888 !important;
    }


    /* Service detail */
    .detail-content p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #888 !important;
    }


    /* Contact */
    .contact-details a,
    .contact-details span {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }


    /* Contact form */
    .input-group input,
    .input-group textarea,
    .input-group select {
        font-size: 15px !important;
    }


    .input-group label {
        font-size: 11px !important;
    }


    /* Service descriptions */
    .service-description {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 500px) {

    p {
        font-size: 15px !important;
        line-height: 1.85 !important;
    }

    .home-content p {
        font-size: 15px !important;
    }

    .section-intro {
        font-size: 15px !important;
    }

    .about-card p {
        font-size: 15px !important;
    }

    .project-info p {
        font-size: 15px !important;
    }

    .detail-content p {
        font-size: 15px !important;
    }

}
/* =========================================================
   DIGITAL MARKETING
   MOBILE DETAIL ALIGNMENT FIX
========================================================= */

@media (max-width: 900px) {

    /* All digital marketing detail sections */
    .digital-marketing-screen .dm-detail-section {
        display: block !important;

        width: 100% !important;

        padding:
            65px 0 !important;

        margin: 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,0.08) !important;
    }


    /* Remove the desktop number column */
    .digital-marketing-screen .dm-detail-number {
        display: block !important;

        width: 100% !important;

        margin:
            0 0 22px !important;

        padding: 0 !important;

        color: #444 !important;

        font-size: 7px !important;

        line-height: 1 !important;

        letter-spacing: 2.5px !important;
    }


    /* Main content starts at exactly the same left position */
    .digital-marketing-screen .dm-detail-content {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ORGANIC GROWTH / SOCIAL PRESENCE /
       CONTENT SYSTEM / TARGETED REACH /
       MEASURABLE GROWTH / DATA / INSIGHTS */

    .digital-marketing-screen .dm-small-label {
        display: block !important;

        width: 100% !important;

        margin:
            0 0 20px !important;

        color: #555 !important;

        font-size: 14px !important;

        line-height: 1.2 !important;

        letter-spacing: 2.5px !important;
    }


    /* All detail headings */
    .digital-marketing-screen .dm-detail-content h2 {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        font-size:
            clamp(
                42px,
                10vw,
                62px
            ) !important;

        line-height: 0.9 !important;

        letter-spacing: -3px !important;

        font-weight: 700 !important;
    }


    .digital-marketing-screen .dm-detail-content h2 span {
        display: inline !important;

        color: transparent !important;

        -webkit-text-stroke:
            1px
            rgba(255,255,255,0.65) !important;
    }


    /* Detail paragraph */
    .digital-marketing-screen .dm-detail-content > p {
        width: 100% !important;

        max-width: 680px !important;

        margin:
            25px 0 0 !important;

        color: #777 !important;

        font-size: 14px !important;

        line-height: 1.85 !important;
    }


    /* SEO mini cards */
    .digital-marketing-screen .dm-mini-grid {
        width: 100% !important;

        grid-template-columns:
            1fr !important;

        gap: 10px !important;

        margin-top: 30px !important;
    }


    /* Analytics cards */
    .digital-marketing-screen .analytics-grid {
        width: 100% !important;

        grid-template-columns:
            1fr !important;

        gap: 10px !important;

        margin-top: 30px !important;
    }


    /* Other detail grids */
    .digital-marketing-screen .performance-grid,
    .digital-marketing-screen .ad-platforms {
        width: 100% !important;

        grid-template-columns:
            1fr !important;

        gap: 10px !important;

        margin-top: 30px !important;
    }

}


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

@media (max-width: 600px) {

    .digital-marketing-screen .dm-detail-section {
        padding:
            55px 0 !important;
    }


    .digital-marketing-screen .dm-detail-number {
        margin-bottom:
            20px !important;
    }


    .digital-marketing-screen .dm-small-label {
        font-size:
            14px !important;

        letter-spacing:
            2.2px !important;

        margin-bottom:
            18px !important;
    }


    .digital-marketing-screen .dm-detail-content h2 {
        font-size:
            40px !important;

        line-height:
            0.9 !important;

        letter-spacing:
            -2.5px !important;
    }


    .digital-marketing-screen .dm-detail-content > p {
        font-size:
            14px !important;

        line-height:
            1.8 !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .digital-marketing-screen .dm-detail-section {
        padding:
            50px 0 !important;
    }


    .digital-marketing-screen .dm-small-label {
        font-size:
            8px !important;

        letter-spacing:
            2px !important;
    }


    .digital-marketing-screen .dm-detail-content h2 {
        font-size:
            34px !important;

        line-height:
            0.92 !important;

        letter-spacing:
            -1.8px !important;
    }

}
/* =========================================================
   FINAL DESKTOP FIX
   ========================================================= */

@media (min-width: 901px) {

    /* Fix the main scrolling layout */
    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #experience {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    /* Normal desktop sections */
    .screen {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        min-height: auto !important;
        height: auto !important;

        padding: 120px 10% 70px !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Keep home section full screen */
    #home {
        min-height: 100vh !important;
        height: 100vh !important;

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

        padding-top: 90px !important;
        padding-bottom: 60px !important;
    }

    /* =====================================================
       PORTFOLIO FIX
       ===================================================== */

    #portfolio {
        position: relative !important;

        min-height: auto !important;
        height: auto !important;

        /* IMPORTANT: prevents heading going underneath navbar */
        padding-top: 120px !important;
        padding-bottom: 80px !important;

        overflow: visible !important;
    }

    #portfolio .section-content {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    #portfolio .section-number {
        position: absolute;
        top: 0;
        left: -45px;
    }

    #portfolio .section-tag {
        margin-bottom: 25px !important;
    }

    #portfolio .section-intro {
        margin-top: 30px !important;
        margin-bottom: 35px !important;
        max-width: 560px;
    }

    /* Portfolio grid */
    #portfolio .home-portfolio-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 15px !important;

        margin-top: 35px !important;

        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Portfolio cards */
    #portfolio .portfolio-image {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: 250px !important;

        padding: 0 !important;
        margin: 0 !important;

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

        background: #080808 !important;

        overflow: hidden !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer;
    }

    /* Portfolio images */
    #portfolio .portfolio-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        opacity: 0.85 !important;

        visibility: visible !important;

        filter:
            grayscale(100%)
            contrast(1.05);

        transition:
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.5s ease,
            opacity 0.5s ease;
    }

    #portfolio .portfolio-image:hover img {
        transform: scale(1.06);

        filter:
            grayscale(0%)
            contrast(1);

        opacity: 1 !important;
    }

    /* View all button */
    #portfolio .home-portfolio-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 25px;
    }

    #portfolio .home-portfolio-view {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        color: #777;
        font-size: 10px;
        letter-spacing: 3px;

        transition: color 0.3s ease;
    }

    #portfolio .home-portfolio-view:hover {
        color: #fff;
    }

    /* =====================================================
       SERVICES FIX
       ===================================================== */

    #services {
        padding-top: 120px !important;
        padding-bottom: 70px !important;
    }

    /* =====================================================
       ABOUT FIX
       ===================================================== */

    #about {
        padding-top: 120px !important;
        padding-bottom: 70px !important;
    }

    /* =====================================================
       CONTACT FIX
       ===================================================== */

    #contact {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    #portfolio .home-portfolio-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

    #portfolio .portfolio-image {
        height: 280px !important;
    }
}


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

@media (min-width: 601px) and (max-width: 1100px) {

    #portfolio {
        padding-top: 110px !important;
    }

    #portfolio .home-portfolio-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    #portfolio .portfolio-image {
        height: 220px !important;
    }
}
/* =========================
   FOOTER COPYRIGHT
========================= */

.copyright {
    width: 100%;
    text-align: center;
    padding: 25px 20px;
    margin-top: 40px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.6;

    color: #999;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
    .copyright {
        font-size: 10px;
        padding: 20px 15px;
        letter-spacing: 1.5px;
    }
}
/* =========================================================
   PORTFOLIO IMAGE - FULL IMAGE FIX
   ========================================================= */

.portfolio-grid .portfolio-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
}

.portfolio-grid .portfolio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}
/* =========================================================
   PARAGRAPH VISIBILITY FIX
   ========================================================= */

.section-intro,
.home-content p,
.about-card p,
.project-info p,
.detail-content p {
    color: #b8b8b8 !important;
}

/* Service descriptions */
.service-description {
    color: #aaaaaa !important;
}

/* Contact text */
.contact-details a,
.contact-details span {
    color: #b8b8b8 !important;
}
/* =========================================================
   GLOBAL PARAGRAPH & DESCRIPTION VISIBILITY FIX
   Applies to ALL pages
   ========================================================= */

p,
.section-intro,
.home-content p,
.about-card p,
.project-info p,
.detail-content p,

.service-description,
.software-main-description,
.software-solution-content p,
.software-problem-card p,
.software-feature p,
.solve-card p,
.why-loon-card p,

.technology-text p,
.industry p,
.services-statement p,

.dm-hero-intro,
.dm-intro-content p,
.dm-detail-content > p,
.dm-service-row p,
.dm-statement p,
.dm-cta p,

.portfolio-home-intro,
.portfolio-home-content p {
    color: #b8b8b8 !important;
}


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

.service-description,
.software-main-description,
.software-solution-content p,
.software-problem-card p,
.software-feature p,
.solve-card p,
.why-loon-card p,
.technology-text p,
.industry p,
.services-statement p {
    color: #b8b8b8 !important;
}


/* =========================================================
   DIGITAL MARKETING DESCRIPTIONS
   ========================================================= */

.dm-hero-intro,
.dm-intro-content p,
.dm-detail-content > p,
.dm-service-row p,
.dm-statement p,
.dm-cta p {
    color: #b8b8b8 !important;
}


/* =========================================================
   HOME / ABOUT / PORTFOLIO / SERVICE
   ========================================================= */

.home-content p,
.section-intro,
.about-card p,
.project-info p,
.detail-content p {
    color: #b8b8b8 !important;
}


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

.contact-details a,
.contact-details span {
    color: #b8b8b8 !important;
}


/* =========================================================
   MOBILE — KEEP SAME COLOUR
   ========================================================= */

@media (max-width: 900px) {

    p,
    .section-intro,
    .home-content p,
    .about-card p,
    .project-info p,
    .detail-content p,
    .service-description,
    .software-main-description,
    .software-solution-content p,
    .software-problem-card p,
    .software-feature p,
    .solve-card p,
    .why-loon-card p,
    .why-loon-card p,
    .technology-text p,
    .industry p,
    .services-statement p,
    .dm-hero-intro,
    .dm-intro-content p,
    .dm-detail-content > p,
    .dm-service-row p,
    .dm-statement p,
    .dm-cta p {
        color: #b8b8b8 !important;
    }

}


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

@media (max-width: 500px) {

    p,
    .section-intro,
    .home-content p,
    .about-card p,
    .project-info p,
    .detail-content p,
    .service-description,
    .software-main-description,
    .software-solution-content p,
    .software-problem-card p,
    .software-feature p,
    .solve-card p,
    .why-loon-card p,
    .technology-text p,
    .industry p,
    .services-statement p,
    .dm-hero-intro,
    .dm-intro-content p,
    .dm-detail-content > p,
    .dm-service-row p,
    .dm-statement p,
    .dm-cta p {
        color: #b8b8b8 !important;
    }

}
/* =========================================================
   PRODUCTS PAGE — MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .product-page-screen {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .product-page-content {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            20px 0 70px !important;
    }


    /* PRODUCT HERO */

    .product-hero {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 35px !important;

        min-height: auto !important;

        padding:
            30px 0 70px !important;
    }

    .product-hero-left {
        width: 100% !important;

        transform: none !important;
    }

    .product-hero-left h1 {
        width: 100% !important;

        font-size:
            clamp(48px, 13vw, 70px) !important;

        line-height: 0.88 !important;

        letter-spacing: -4px !important;

        overflow-wrap: normal;
    }

    .product-hero-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 25px !important;

        color: #b8b8b8 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;
    }


    /* PRODUCT ANIMATION */

    .product-hero-visual {
        width: 260px !important;
        height: 260px !important;

        margin: 0 auto !important;

        transform: none !important;
    }


    /* INTRODUCTION */

    .product-introduction {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 25px !important;

        padding:
            70px 0 !important;
    }

    .product-introduction-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-introduction-content h2 {
        width: 100% !important;

        font-size:
            clamp(40px, 11vw, 60px) !important;

        line-height: 0.9 !important;

        letter-spacing: -3px !important;
    }

    .product-introduction-content p {
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;
    }


    /* PRODUCT SELECTION */

    .product-selection {
        width: 100% !important;

        padding:
            60px 0 80px !important;
    }

    .product-selection-grid {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 1px !important;
    }

    .product-selection-card {
        width: 100% !important;

        min-height: 220px !important;

        padding: 25px !important;
    }

    .product-selection-card strong {
        margin-top: 45px !important;

        font-size: 38px !important;
    }

    .product-selection-card p {
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 14px !important;

        line-height: 1.7 !important;
    }


    /* PRODUCT DETAILS */

    .product-detail-block {
        width: 100% !important;

        padding:
            75px 0 90px !important;

        overflow: visible !important;
    }

    .product-detail-header {
        width: 100% !important;

        display: flex !important;

        justify-content: space-between !important;

        gap: 15px;

        margin-bottom: 45px !important;
    }

    .product-detail-header span,
    .product-detail-header small {
        font-size: 9px !important;

        letter-spacing: 1.5px !important;
    }


    /* PRODUCT DETAIL HERO */

    .product-detail-hero {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 40px !important;
    }

    .product-detail-title {
        width: 100% !important;
    }

    .product-detail-title h2 {
        width: 100% !important;

        font-size:
            clamp(58px, 17vw, 85px) !important;

        line-height: 0.82 !important;

        letter-spacing: -5px !important;

        overflow-wrap: break-word;
    }

    .ecommerce-title {
        font-size:
            clamp(48px, 14vw, 70px) !important;

        letter-spacing: -4px !important;
    }

    .product-detail-copy {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
    }

    .product-detail-copy h3 {
        width: 100% !important;

        font-size:
            clamp(28px, 8vw, 40px) !important;

        line-height: 0.9 !important;

        letter-spacing: -2px !important;
    }

    .product-detail-copy p {
        width: 100% !important;
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        margin-top: 18px !important;
    }


    /* PRODUCT CAPABILITIES */

    .product-capability-area {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 35px !important;

        margin-top: 65px !important;

        padding-top: 50px !important;
    }

    .product-capability-title {
        width: 100% !important;

        padding: 0 !important;
    }

    .product-capability-title h3,
    .product-capability-title h3 span {
        width: 100% !important;

        max-width: 100% !important;

        font-size:
            clamp(42px, 12vw, 58px) !important;

        line-height: 0.88 !important;

        letter-spacing: -3px !important;
    }

    .product-capability-list {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .product-capability-list article {
        width: 100% !important;

        min-height: auto !important;

        padding: 22px !important;
    }

    .product-capability-list h4 {
        margin-top: 25px !important;

        font-size: 14px !important;
    }

    .product-capability-list p {
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 13px !important;

        line-height: 1.7 !important;
    }


    /* CRM / E-COMMERCE FLOWS */

    .crm-journey,
    .commerce-flow {
        width: 100% !important;

        margin-top: 55px !important;

        overflow: hidden !important;
    }

    .crm-journey-line,
    .commerce-flow-line {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 8px !important;

        padding: 18px !important;
    }

    .crm-journey-line > div,
    .commerce-flow-line > div {
        width: 100% !important;

        min-height: 95px !important;

        padding: 18px !important;
    }

    .crm-journey-line > i,
    .commerce-flow-line > i {
        display: none !important;
    }


    /* TECHNOLOGY */

    .product-technology {
        width: 100% !important;

        padding:
            80px 0 70px !important;
    }

    .product-tech-layout {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 40px !important;

        padding-top: 40px !important;
    }

    .product-tech-content {
        width: 100% !important;

        padding: 0 !important;
    }

    .product-tech-content h2 {
        width: 100% !important;

        font-size:
            clamp(42px, 12vw, 62px) !important;

        line-height: 0.86 !important;

        letter-spacing: -3px !important;
    }

    .product-tech-content p {
        width: 100% !important;
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 13px !important;

        line-height: 1.8 !important;
    }

    .product-tech-stack {
        width: 100% !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;
    }

    .tech-box {
        min-height: 52px !important;

        padding: 0 10px !important;

        font-size: 9px !important;

        letter-spacing: 1px !important;
    }


    /* FINAL PRODUCT SECTION */

    .product-final {
        width: 100% !important;

        padding:
            50px 0 80px !important;
    }

    .product-final h2 {
        width: 100% !important;

        font-size:
            clamp(42px, 12vw, 62px) !important;

        line-height: 0.86 !important;

        letter-spacing: -3px !important;
    }

    .product-final > p {
        width: 100% !important;
        max-width: 100% !important;

        color: #b8b8b8 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;
    }

}
/* =========================================================
   LOON TECHNOLOGIES
   PORTFOLIO — FINAL MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    /* Portfolio page */
    #portfolioExperience {
        width: 100% !important;
        max-width: 100% !important;

        height: 100vh !important;
        min-height: 100vh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        padding:
            95px 0 60px !important;

        box-sizing: border-box;
    }


    /* Main portfolio section */
    .portfolio-section {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding:
            0 18px !important;

        box-sizing: border-box;
    }


    /* ==========================================
       MOBILE GRID
       2 IMAGES PER ROW
       ========================================== */

    .portfolio-grid {
        width: 100% !important;

        display: grid !important;

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

        gap: 12px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box;
    }


    /* ==========================================
       PORTFOLIO IMAGE
       SQUARE IMAGE
       ========================================== */

    .portfolio-grid .portfolio-image {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 1 / 1 !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        border: none !important;

        background: #080808 !important;

        box-sizing: border-box !important;
    }


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

    .portfolio-grid .portfolio-image img {
        display: block !important;

        width: 100% !important;

        height: 100% !important;

        max-width: none !important;

        object-fit: cover !important;

        object-position: center !important;

        opacity: 0.8 !important;

        filter:
            grayscale(100%)
            contrast(1.05) !important;

        transform: scale(1) !important;
    }


    /* ==========================================
       REMOVE HOVER EFFECT ON TOUCH DEVICES
       ========================================== */

    .portfolio-grid .portfolio-image:hover img {
        transform: scale(1) !important;

        filter:
            grayscale(100%)
            contrast(1.05) !important;

        opacity: 0.8 !important;
    }


    /* ==========================================
       REMOVE EXTRA OVERLAY
       ========================================== */

    .portfolio-grid .portfolio-image::after {
        opacity: 0 !important;
    }


    /* ==========================================
       TOUCH
       ========================================== */

    .portfolio-grid .portfolio-image {
        -webkit-tap-highlight-color: transparent;

        touch-action: manipulation;
    }

}


/* =========================================================
   VERY SMALL PHONES
   320px - 380px
   ========================================================= */

@media (max-width: 380px) {

    #portfolioExperience {
        padding-top: 90px !important;
    }

    .portfolio-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .portfolio-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .portfolio-grid .portfolio-image {
        aspect-ratio: 1 / 1 !important;
    }

}
/* =========================================================
   INDEX PAGE PORTFOLIO - SQUARE IMAGES
   ========================================================= */

#portfolio .home-portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 15px !important;
}

#portfolio .home-portfolio-grid .portfolio-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

#portfolio .home-portfolio-grid .portfolio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}


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

@media (max-width: 900px) {

    #portfolio .home-portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

}


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

@media (max-width: 600px) {

    #portfolio .home-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #portfolio .home-portfolio-grid .portfolio-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

}
/* =========================================================
   GLOBAL VISIBLE BORDERS - ALL PAGES
   ========================================================= */

/* Header / top bar */
.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Menu button */
.menu-button {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

/* About cards */
.about-grid {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.about-card {
    border-color: rgba(255, 255, 255, 0.20) !important;
}

/* Services */
.service-interface {
    border-top: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.service-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* Portfolio */
.portfolio-container .project {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.portfolio-container .project:hover {
    border-color: rgba(255, 255, 255, 0.50) !important;
}

/* Contact form */
#contactForm {
    border-top: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.input-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Buttons */
.explore-button {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.submit-button {
    border: 1px solid rgba(255, 255, 255, 0.50) !important;
}

/* Service detail */
.close-detail {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.detail-list span {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Menu */
.menu-back {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Radial navigation */
.radial-center {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
/* =========================================================
   SERVICE PAGES — VISIBLE BORDERS
   BRANDING / MARKETING / WEB DEVELOPMENT / SOFTWARE
   ========================================================= */

/* Main service page sections */
.service-page,
.service-section,
.service-content {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Service cards */
.service-card,
.service-box,
.service-item,
.service-feature {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Service cards hover */
.service-card:hover,
.service-box:hover,
.service-item:hover,
.service-feature:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Service capability / feature grids */
.capabilities-grid,
.features-grid,
.service-grid {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Individual grid items */
.capability-card,
.feature-card,
.service-grid > div {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Horizontal separators */
.service-page hr,
.service-section hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Technology / tools boxes */
.tech-list span,
.technology-list span,
.tech-item {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Buttons */
.service-page .button,
.service-page .btn,
.service-page a.button {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

/* Header remains consistent on every service page */
.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Menu button */
.menu-button {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

/* =========================================================
   RESPONSIVE — SAME BORDER VISIBILITY
   ========================================================= */

@media (max-width: 991px) {

    .service-card,
    .service-box,
    .service-item,
    .service-feature,
    .capability-card,
    .feature-card {
        border-color: rgba(255, 255, 255, 0.24) !important;
    }

}

@media (max-width: 767px) {

    .service-card,
    .service-box,
    .service-item,
    .service-feature,
    .capability-card,
    .feature-card {
        border: 1px solid rgba(255, 255, 255, 0.26) !important;
    }

    .topbar {
        border-bottom-color: rgba(255, 255, 255, 0.28) !important;
    }

    .menu-button {
        border-color: rgba(255, 255, 255, 0.32) !important;
    }

}

@media (max-width: 480px) {

    .service-card,
    .service-box,
    .service-item,
    .service-feature,
    .capability-card,
    .feature-card {
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

}
/* =========================================================
   LARGE OVAL ROTATING BACKGROUND
   ALL PAGES EXCEPT PRODUCTS
   ========================================================= */

body:not(.products-page)::after {
    content: "";
    position: fixed;

    width: 780px;
    height: 360px;

    left: 50%;
    top: 50%;

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

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    pointer-events: none;
    z-index: 1;

    animation: ovalRotate 18s linear infinite;
}


/* Second thinner oval */
body:not(.products-page)::before {
    content: "";

    position: fixed;

    width: 620px;
    height: 280px;

    left: 50%;
    top: 50%;

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

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;

    pointer-events: none;
    z-index: 1;

    animation: ovalRotateReverse 14s linear infinite;
}


/* =========================================================
   CONTINUOUS OVAL ROTATION
   ========================================================= */

@keyframes ovalRotate {

    from {
        transform: translate(-50%, -50%) rotate(-18deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(342deg);
    }

}


@keyframes ovalRotateReverse {

    from {
        transform: translate(-50%, -50%) rotate(25deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-335deg);
    }

}


/* Keep content above the oval */

.topbar,
main,
section,
footer,
.menu-overlay,
.radial-nav {
    position: relative;
    z-index: 2;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    body:not(.products-page)::after {
        width: 650px;
        height: 310px;
    }

    body:not(.products-page)::before {
        width: 520px;
        height: 240px;
    }

}


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

@media (max-width: 900px) {

    body:not(.products-page)::after {
        width: 520px;
        height: 270px;
    }

    body:not(.products-page)::before {
        width: 430px;
        height: 220px;
    }

}


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

@media (max-width: 600px) {

    body:not(.products-page)::after {
        width: 390px;
        height: 210px;

        border-color: rgba(255, 255, 255, 0.15);
    }

    body:not(.products-page)::before {
        width: 330px;
        height: 170px;

        border-color: rgba(255, 255, 255, 0.09);
    }

}