/* =========================================================
   ONE SKY INNOVATIONS
   HOME PAGE
   LIGHT PROFESSIONAL DESIGN
========================================================= */

:root {

    --blue: #0070E0;

    --cyan: #00C2FF;

    --navy: #081226;

    --text: #0F172A;

    --muted: #52627a;

    --light: #64748B;

    --bg: #FFFFFF;

    --subtle: #F7FAFC;

    --border: #E2E8F0;

    --radius: 16px;

    --max: 1240px;

    --ease:
        cubic-bezier(.16, 1, .3, 1);

}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html {

    scroll-behavior: smooth;

}

body {

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

    color: var(--text);

    background: #fff;

    line-height: 1.6;

    overflow-x: hidden;

}

a {

    text-decoration: none;

    color: inherit;

}

button {

    font: inherit;

}

.container {

    width:
        min(var(--max),
            calc(100% - 40px));

    margin: auto;

    position: relative;

    z-index: 2;

}

.section {

    padding: 88px 0;

    position: relative;

}

.center-button {

    display: flex;

    justify-content: center;

    margin-top: 35px;

}


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

.light-streamers-canvas {

    position: fixed;

    inset: 0;

    z-index: -10;

    pointer-events: none;

    overflow: hidden;

    opacity: .5;

}

.streamer-column {

    position: absolute;

    top: -20%;

    width: 1px;

    height: 150%;

    background:
        linear-gradient(to bottom,
            transparent,
            rgba(0, 112, 224, .08),
            transparent);

    transform: rotate(16deg);

}

.streamer-column:nth-child(1) {
    left: 8%;
}

.streamer-column:nth-child(2) {
    left: 28%;
}

.streamer-column:nth-child(3) {
    left: 50%;
}

.streamer-column:nth-child(4) {
    left: 72%;
}

.streamer-column:nth-child(5) {
    left: 92%;
}


/* =========================================================
   GRADIENT
========================================================= */

.gradient {

    background:
        linear-gradient(110deg,
            #0052D4 0%,
            #0070E0 35%,
            #00C2FF 70%,
            #7C3AED 100%);

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        gradientMove 6s ease-in-out infinite alternate;

}

@keyframes gradientMove {

    to {
        background-position: 100% center;
    }

}


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

.bg-glow {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .12;

}

.glow-one {

    width: 460px;

    height: 460px;

    left: -180px;

    top: -140px;

    background: #00C2FF;

}

.glow-two {

    width: 500px;

    height: 500px;

    right: -200px;

    bottom: -160px;

    background: #6D5DFB;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(16px);

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

}

.nav-wrapper {

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}

.logo-symbol {

    width: 16px;

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.logo-symbol span {

    height: 4px;

    border-radius: 3px;

    background: var(--blue);

    display: block;

}

.logo-symbol .bar-2 {

    width: 12px;

    background: var(--cyan);

}

.logo-symbol .bar-3 {

    width: 9px;

}

.logo-text {

    font-weight: 800;

    font-size: 19px;

    letter-spacing: -.04em;

}

.logo-text strong {

    color: var(--blue);

}

.logo-text small {

    display: block;

    font-size: 7px;

    letter-spacing: .25em;

    color: var(--blue);

    line-height: 1;

}


/* NAV */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 24px;

}

.nav-link {

    font-size: 13px;

    font-weight: 650;

    color: #273449;

    position: relative;

}

.nav-link:not(.btn)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 2px;

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

    transition: .25s;

}

.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}

.btn-nav {

    margin-left: 5px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 21px;

    border-radius: 9px;

    font-weight: 750;

    font-size: 14px;

    transition:
        .25s var(--ease);

    border:
        1px solid transparent;

}

.btn:hover {

    transform:
        translateY(-3px);

}

.btn-primary {

    background:
        linear-gradient(135deg,
            var(--blue),
            #0056B3);

    color: #fff !important;

    box-shadow:
        0 8px 22px rgba(0, 112, 224, .22);

}

.btn-outline {

    border-color: #B9C6D8;

    background: #fff;

    color: var(--navy);

}

.btn-outline:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.menu-toggle {

    display: none;

    border: 0;

    background: none;

    width: 38px;

    height: 38px;

    cursor: pointer;

}

.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--navy);

    margin: 5px auto;

}


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

.hero {

    min-height: 680px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at 80% 20%,
            rgba(0, 194, 255, .10),
            transparent 30%),

        linear-gradient(180deg,
            #fff 0%,
            #f8fbff 100%);

}

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(0, 112, 224, .035) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(0, 112, 224, .035) 1px,
            transparent 1px);

    background-size: 52px 52px;

    mask-image:
        linear-gradient(to bottom,
            #000,
            transparent 90%);

}

.hero-grid {

    display: grid;

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

    gap: 60px;

    align-items: center;

}

.eyebrow {

    display: inline-flex;

    padding:
        7px 13px;

    border:
        1px solid rgba(0, 112, 224, .22);

    border-left:
        3px solid var(--blue);

    border-radius: 8px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;

    background: #fff;

    margin-bottom: 15px;

}

.hero-copy h1 {

    font-size:
        clamp(42px, 6vw, 74px);

    line-height: 1.02;

    letter-spacing: -.055em;

    margin-bottom: 24px;

    max-width: 780px;

}

.hero-copy p {

    font-size: 18px;

    color: var(--muted);

    max-width: 690px;

    margin-bottom: 30px;

}

.actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}

.hero-note {

    margin-top: 24px;

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    color: #66758c;

    font-size: 13px;

}

.hero-note span {

    display: flex;

    gap: 7px;

    align-items: center;

}

.hero-note b {

    color: var(--blue);

}


/* =========================================================
   ANIMATED ROUND
========================================================= */

.hero-visual {

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.orbit-card {

    width: 330px;

    height: 330px;

    border:
        1px solid rgba(0, 112, 224, .15);

    border-radius: 50%;

    position: relative;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, .95),
            rgba(240, 248, 255, .65));

    box-shadow:
        0 30px 80px rgba(0, 82, 212, .12);

}


/* rotating rings */

.orbit-ring {

    position: absolute;

    border:
        1px dashed rgba(0, 112, 224, .18);

    border-radius: 50%;

    pointer-events: none;

}

.ring-one {

    inset: 28px;

    animation:
        spin 18s linear infinite;

}

.ring-two {

    inset: 70px;

    animation:
        spinReverse 12s linear infinite;

}

.ring-three {

    inset: 105px;

    border-style: solid;

    border-color:
        rgba(0, 194, 255, .12);

    animation:
        spin 9s linear infinite;

}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}

@keyframes spinReverse {

    to {
        transform: rotate(-360deg);
    }

}


/* CENTER */

.core {

    position: absolute;

    inset: 0;

    margin: auto;

    width: 130px;

    height: 130px;

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            var(--navy),
            #10336a);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-align: center;

    box-shadow:
        0 18px 45px rgba(8, 18, 38, .25);

    z-index: 5;

}

.core strong {

    font-size: 18px;

    line-height: 1.3;

}

.core span {

    display: block;

    color: #43C8FF;

    font-size: 10px;

    letter-spacing: 1.5px;

    margin-top: 4px;

}


/* FLOATING PILLS */

.float-pill {

    position: absolute;

    background: #fff;

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

    padding:
        10px 14px;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(8, 18, 38, .10);

    font-size: 12px;

    font-weight: 800;

    color: var(--navy);

    z-index: 10;

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

    white-space: nowrap;

}

.pill-1 {

    top: 42px;

    left: 10px;

}

.pill-2 {

    right: 5px;

    top: 130px;

    animation-delay: 1s;

}

.pill-3 {

    bottom: 55px;

    left: 35px;

    animation-delay: 2s;

}

.pill-4 {

    right: 35px;

    bottom: 32px;

    animation-delay: 1.5s;

}

@keyframes float {

    50% {
        transform: translateY(-9px);
    }

}


/* ORBIT DOTS */

.orbit-dot {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 5px rgba(0, 112, 224, .08);

    z-index: 4;

}

.dot-1 {

    top: 65px;

    left: 105px;

}

.dot-2 {

    right: 68px;

    top: 92px;

}

.dot-3 {

    bottom: 70px;

    left: 88px;

}

.dot-4 {

    right: 92px;

    bottom: 48px;

}


/* =========================================================
   CLIENTS
========================================================= */

.clients {

    padding:
        30px 0 34px;

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

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

    background: #fff;

    overflow: hidden;

}

.clients-title {

    text-align: center;

    color: #66758c;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .1em;

    margin-bottom: 19px;

}

.marquee {

    overflow: hidden;

    mask-image:
        linear-gradient(to right,
            transparent,
            #000 9%,
            #000 91%,
            transparent);

}

.track {

    display: flex;

    width: max-content;

    gap: 16px;

    animation:
        marquee 35s linear infinite;

}

.track:hover {

    animation-play-state: paused;

}

@keyframes marquee {

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

}

.client-logo {

    width: 170px;

    height: 64px;

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

    border-radius: 11px;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        9px 18px;

    flex-shrink: 0;

}

.client-logo img {

    max-width: 100%;

    max-height: 42px;

    object-fit: contain;

}

.client-text {

    font-weight: 800;

    color: #52627a;

    font-size: 13px;

    text-align: center;

}


/* =========================================================
   SECTION HEAD
========================================================= */

.section-head {

    text-align: center;

    max-width: 800px;

    margin:
        0 auto 46px;

}

.section-head h2 {

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

    line-height: 1.12;

    letter-spacing: -.04em;

    margin-bottom: 14px;

}

.section-head p {

    color: var(--muted);

    font-size: 17px;

}


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

.services-preview {

    background: #f8fafc;

}

.service-grid {

    display: grid;

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

    gap: 18px;

}

.service-card {

    background: #fff;

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

    border-radius: 16px;

    padding: 28px;

    min-height: 245px;

    transition:
        .3s var(--ease);

    position: relative;

    overflow: hidden;

}

.service-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--blue),
            var(--cyan),
            #7C3AED);

    transform: scaleX(0);

    transform-origin: left;

    transition: .3s;

}

.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 18px 45px rgba(0, 70, 150, .09);

    border-color:
        #c9d8eb;

}

.service-card:hover::before {

    transform: scaleX(1);

}

.service-icon {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            rgba(0, 112, 224, .10),
            rgba(0, 194, 255, .13));

    display: grid;

    place-items: center;

    font-size: 22px;

    margin-bottom: 20px;

}

.service-card h3 {

    font-size: 19px;

    margin-bottom: 9px;

}

.service-card p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 13px;

}

.service-link {

    font-size: 13px;

    color: var(--blue);

    font-weight: 800;

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-grid {

    display: grid;

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

    gap: 20px;

}

.product {

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

    border-radius: 18px;

    padding: 28px;

    background: #fff;

    position: relative;

    overflow: hidden;

    min-height: 290px;

    transition:
        .3s var(--ease);

}

.product:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 45px rgba(0, 70, 150, .09);

}

.product:nth-child(1) {

    background:
        linear-gradient(145deg,
            #fff,
            #f1f8ff);

}

.product:nth-child(2) {

    background:
        linear-gradient(145deg,
            #fff,
            #f1fbff);

}

.product:nth-child(3) {

    background:
        linear-gradient(145deg,
            #fff,
            #f7f4ff);

}

.product-tag {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .1em;

    font-weight: 850;

    color: var(--blue);

}

.product h3 {

    font-size: 27px;

    margin:
        12px 0 9px;

}

.product p {

    color: var(--muted);

    font-size: 14px;

    max-width: 380px;

}

.product-arrow {

    position: absolute;

    right: 25px;

    bottom: 23px;

    color: var(--blue);

    font-size: 25px;

}

.product-shape {

    position: absolute;

    right: -60px;

    top: -60px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            rgba(0, 112, 224, .10),
            rgba(0, 194, 255, .04));

}


/* =========================================================
   WORK
========================================================= */

.work-preview {

    background: #f8fafc;

}

.work-grid {

    display: grid;

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

    gap: 18px;

}

.work-card {

    background: #fff;

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

    border-radius: 16px;

    padding: 26px;

    min-height: 220px;

    transition:
        .3s var(--ease);

}

.work-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0, 70, 150, .08);

}

.work-type {

    color: var(--blue);

    font-size: 11px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .1em;

}

.work-card h3 {

    margin:
        10px 0 8px;

    font-size: 20px;

}

.work-card p {

    color: var(--muted);

    font-size: 14px;

}

.chips {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}

.chips span {

    font-size: 11px;

    padding:
        5px 8px;

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

    border-radius: 6px;

    color: #607087;

    background: #fbfdff;

}


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

.why-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}

.why-card {

    padding: 28px;

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

    border-radius: 16px;

    background: #fff;

    display: flex;

    gap: 17px;

    transition:
        .3s var(--ease);

}

.why-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 40px rgba(0, 70, 150, .08);

}

.why-num {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    background: var(--navy);

    color: #fff;

    display: grid;

    place-items: center;

    font-weight: 850;

    flex: none;

}

.why-card h3 {

    font-size: 17px;

    margin-bottom: 5px;

}

.why-card p {

    font-size: 13px;

    color: var(--muted);

}


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

.cta {

    background: var(--navy);

    color: #fff;

    overflow: hidden;

}

.cta .bg-glow {

    opacity: .18;

}

.cta-inner {

    text-align: center;

    max-width: 850px;

    margin: auto;

}

.cta h2 {

    font-size:
        clamp(32px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -.04em;

    margin-bottom: 15px;

}

.cta p {

    color: #B9C7DA;

    font-size: 16px;

    margin-bottom: 27px;

}

.cta-outline {

    background: transparent;

    color: #fff;

    border-color: #50627e;

}

.cta-outline:hover {

    border-color: #fff;

    color: #fff;

}

.cta .gradient {

    background:
        linear-gradient(100deg,
            #4CC9FF,
            #9B8CFF,
            #fff);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}

.cta-eyebrow {

    background: transparent;

    color: #43C8FF;

    border-color: #28486f;

}


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

.footer {

    background: #061022;

    color: #B7C3D5;

    padding:
        60px 0 20px;

}

.footer-grid {

    display: grid;

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

    gap: 45px;

    padding-bottom: 45px;

}

.footer-brand {

    color: #fff;

    font-size: 22px;

    font-weight: 850;

    margin-bottom: 10px;

}

.footer-brand strong {

    color: #43C8FF;

}

.footer p {

    font-size: 13px;

    color: #8FA0B8;

}

.footer h4 {

    color: #fff;

    margin-bottom: 13px;

    font-size: 14px;

}

.footer-links {

    display: grid;

    gap: 8px;

}

.footer-links a,
.footer-links span {

    font-size: 13px;

    color: #9DAEC4;

}

.footer-links a:hover {

    color: #43C8FF;

}

.bottom {

    border-top:
        1px solid #172641;

    padding-top: 18px;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    font-size: 12px;

    color: #74869f;

}


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

@media (max-width: 1000px) {

    .hero-grid {

        grid-template-columns: 1fr;

    }

    .hero-copy {

        text-align: center;

    }

    .hero-copy p {

        margin-left: auto;

        margin-right: auto;

    }

    .actions {

        justify-content: center;

    }

    .hero-note {

        justify-content: center;

    }

    .hero-visual {

        min-height: 360px;

    }

    .service-grid,
    .products-grid,
    .work-grid {

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

    }

    .nav-menu {

        gap: 17px;

    }

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 760px) {

    .container {

        width:
            min(var(--max),
                calc(100% - 28px));

    }

    .section {

        padding: 64px 0;

    }

    .nav-wrapper {

        height: 66px;

    }

    .menu-toggle {

        display: block;

    }

    .nav-menu {

        display: none;

        position: absolute;

        top: 66px;

        left: 0;

        right: 0;

        background: #fff;

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

        box-shadow:
            0 16px 30px rgba(0, 0, 0, .08);

        padding: 18px;

        flex-direction: column;

        align-items: flex-start;

        gap: 17px;

    }

    .nav-menu.open {

        display: flex;

    }

    .nav-menu .btn-nav {

        width: 100%;

        text-align: center;

    }

    .hero {

        min-height: auto;

        padding:
            75px 0 55px;

    }

    .hero-grid {

        gap: 30px;

    }

    .hero-copy h1 {

        font-size:
            clamp(40px,
                12vw,
                56px);

    }

    .hero-copy p {

        font-size: 16px;

    }

    .hero-visual {

        min-height: 330px;

    }

    .orbit-card {

        width: 270px;

        height: 270px;

    }

    .core {

        width: 105px;

        height: 105px;

    }

    .float-pill {

        font-size: 10px;

        padding:
            8px 10px;

    }

    .pill-1 {
        left: 0;
    }

    .pill-2 {
        right: 0;
    }

    .pill-3 {
        left: 0;
    }

    .pill-4 {
        right: 0;
    }

    .service-grid,
    .products-grid,
    .work-grid,
    .why-grid {

        grid-template-columns: 1fr;

    }

    .section-head {

        margin-bottom: 32px;

    }

    .section-head h2 {

        font-size: 32px;

    }

    .client-logo {

        width: 145px;

        height: 58px;

    }

    .track {

        gap: 10px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .bottom {

        flex-direction: column;

        text-align: center;

    }

}


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

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

    /* =========================================================
   FOOTER - COMMON NEW DESIGN
========================================================= */

    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 70px;
        align-items: start;
    }

    .footer-brand-col {
        min-width: 0;
    }

    .footer-logo {
        display: inline-block;
        color: #fff;
        font-size: 21px;
        font-weight: 850;
        letter-spacing: -.03em;
        margin-bottom: 10px;
    }

    .footer-logo strong {
        color: #43C8FF;
    }

    .footer-logo small {
        display: block;
        font-size: 7px;
        letter-spacing: .24em;
        color: #43C8FF;
        line-height: 1;
    }

    .footer-tagline {
        color: #8FA0B8;
        font-size: 13px;
        margin: 0 0 20px;
    }


    /* SOCIAL ICONS */

    .footer-social {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;

        border: 1px solid #263954;
        border-radius: 9px;

        color: #9DAEC4;
        background: rgba(255, 255, 255, .025);

        transition:
            .25s ease;
    }

    .footer-social a:hover {
        color: #fff;
        border-color: #00C2FF;
        background: rgba(0, 194, 255, .10);
        transform: translateY(-3px);
    }

    .footer-social svg {
        width: 17px;
        height: 17px;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    .footer-social a:nth-child(2) svg,
    .footer-social a:nth-child(3) svg,
    .footer-social a:nth-child(4) svg,
    .footer-social a:nth-child(5) svg {
        fill: currentColor;
        stroke: none;
    }


    /* EXPLORE */

    .footer-col h4 {
        color: #fff;
        font-size: 14px;
        margin: 0 0 16px;
    }

    .footer-col ul {
        list-style: none;
        margin: 0;
        padding: 0;

        display: grid;
        gap: 9px;
    }

    .footer-col ul li a {
        color: #9DAEC4;
        font-size: 13px;
        transition: .2s ease;
    }

    .footer-col ul li a:hover {
        color: #43C8FF;
        padding-left: 3px;
    }


    /* CONTACT */

    .footer-contact {
        display: grid;
        gap: 11px;
    }

    .footer-contact a,
    .footer-contact span {
        color: #9DAEC4;
        font-size: 13px;
        line-height: 1.6;
    }

    .footer-contact a {
        transition: .2s ease;
    }

    .footer-contact a:hover {
        color: #43C8FF;
    }


    /* FOOTER BOTTOM */

    .footer-bottom {
        margin-top: 40px;
        padding-top: 18px;
        border-top: 1px solid #172641;
    }

    .footer-bottom p {
        margin: 0;
        color: #74869F;
        font-size: 12px;
    }


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

    @media (max-width: 760px) {

        .footer-grid {
            grid-template-columns: 1.2fr 1fr;
            gap: 35px 25px;
        }

        .footer-brand-col {
            grid-column: 1 / -1;
        }

    }

    @media (max-width: 480px) {

        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 30px 20px;
        }

        .footer-brand-col {
            grid-column: 1 / -1;
        }

    }



}

/* =========================================================
   NEW FOOTER DESIGN
   Social Icons + Explore + Contact
========================================================= */

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 70px;
    align-items: start;
    padding-bottom: 45px;
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.footer-brand-col {
    min-width: 0;
}

.footer-logo {
    display: inline-block;
    color: #fff;
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.footer-logo strong {
    color: #43C8FF;
}

.footer-logo small {
    display: block;
    margin-top: 4px;
    color: #43C8FF;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .24em;
    line-height: 1;
}

.footer-tagline {
    color: #8FA0B8;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 20px;
}


/* =========================================================
   SOCIAL MEDIA ICONS
========================================================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-social a {
    width: 37px;
    height: 37px;

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

    border: 1px solid #263954;
    border-radius: 9px;

    color: #9DAEC4;
    background: rgba(255, 255, 255, .025);

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

.footer-social a:hover {
    color: #ffffff;
    border-color: #00C2FF;
    background: rgba(0, 194, 255, .10);
    transform: translateY(-3px);
}

.footer-social svg {
    width: 17px;
    height: 17px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Instagram */

.footer-social a:nth-child(1) svg {
    fill: none;
    stroke: currentColor;
}


/* Facebook */

.footer-social a:nth-child(2) svg {
    fill: currentColor;
    stroke: none;
}


/* LinkedIn */

.footer-social a:nth-child(3) svg {
    fill: currentColor;
    stroke: none;
}


/* YouTube */

.footer-social a:nth-child(4) svg {
    fill: currentColor;
    stroke: none;
}


/* WhatsApp */

.footer-social a:nth-child(5) svg {
    fill: currentColor;
    stroke: none;
}


/* =========================================================
   EXPLORE COLUMN
========================================================= */

.footer-col h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
    margin: 0 0 16px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    gap: 9px;
}

.footer-col ul li {
    margin: 0;
    padding: 0;
}

.footer-col ul li a {
    display: inline-block;

    color: #9DAEC4;
    font-size: 13px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-col ul li a:hover {
    color: #43C8FF;
    transform: translateX(3px);
}


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

.footer-contact {
    display: grid;
    gap: 11px;
}

.footer-contact a,
.footer-contact span {
    display: block;

    color: #9DAEC4;
    font-size: 13px;
    line-height: 1.6;
}

.footer-contact a {
    transition: color .2s ease;
}

.footer-contact a:hover {
    color: #43C8FF;
}


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

.footer-bottom {
    margin-top: 0;
    padding-top: 18px;

    border-top: 1px solid #172641;
}

.footer-bottom p {
    margin: 0;
    color: #74869F;
    font-size: 12px;
}


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

@media (max-width: 1000px) {

    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 35px;
    }

}


@media (max-width: 760px) {

    .footer-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 35px 25px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
    }

}


@media (max-width: 480px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 18px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
    }

    .footer-social {
        gap: 7px;
    }

    .footer-social a {
        width: 35px;
        height: 35px;
    }

}