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

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:"DM Sans",sans-serif;
    background:#ffffff;
    color:#101828;
    overflow-x:hidden;
}


a{
    text-decoration:none;
}


ul{
    list-style:none;
}


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


/* ========================================
   VARIABLES
======================================== */

:root{

    --primary:#10cbff;

    --dark:#0a0e1a;

    --dark-blue:#101828;

    --white:#ffffff;

    --gray:#667085;

    --light:#f5f7fa;

    --dark: #07111f;

    --accent: #10cbff;

    --white: #ffffff;

    --accent-glow: rgba(16, 203, 255, 0.35);

    --text: rgba(255, 255, 255, 0.88);

    --muted: rgba(255, 255, 255, 0.64);

}


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

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}


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

.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:22px 0;

    transition:.4s ease;

}


.header.scrolled{

    position:fixed;

    background:#0a0e1a;

    padding:14px 0;

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

}


.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}
/* ========================================
   DROPDOWN MENU
======================================== */

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:45px;
    left:0;
    width:300px;
    background:#ffffff;
    padding:12px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:0.3s ease;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.dropdown-menu li{
    width:100%;
}

.dropdown-menu li a{
    display:block;
    padding:14px 22px;
    color:#101828 !important;
    font-size:14px;
    white-space:nowrap;
    transition:0.3s;
}

.dropdown-menu li a:hover{
    /* background:#f5f7fa; */
    color:#10cbff !important;
    padding-left:25px;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-img {
    width: 200px;
    height: 100px;
    object-fit: contain;
    display: block;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}


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

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

}


.nav-menu li a{

    position:relative;

    color:rgba(255,255,255,.82);

    font-size:15px;

    font-weight:500;

    transition:.3s;

}


.nav-menu li a i{

    font-size:10px;

    margin-left:5px;

}


.nav-menu li a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    left:0;

    bottom:-8px;

    background:var(--primary);

    transition:.3s;

}


.nav-menu li a:hover::after,

.nav-menu li a.active::after{

    width:100%;

}


.nav-menu li a:hover,

.nav-menu li a.active{

    color:#fff;

}


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

.contact-btn{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    background:var(--primary);

    padding:14px 22px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}


.contact-btn:hover{

    background:#fff;

    color:var(--dark);

}


.contact-btn i{

    font-size:12px;

}


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

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

.menu-btn {
    display: none;

    width: 40px;
    height: 40px;

    padding: 5px;

    background: transparent;
    border: none;

    cursor: pointer;

    position: relative;
    z-index: 10001;
}

.menu-btn span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: #fff;

    border-radius: 2px;

    transition: all 0.3s ease;
}
/* ========================================
   ACTIVE NAVIGATION
======================================== */

.navbar ul li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.navbar ul li a.active {
    color: #2bbdd9;
}

.navbar ul li a.active::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    background: #2bbdd9;

    border-radius: 10px;

}

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

@media (max-width: 1000px) {

    /* Show hamburger */
    .menu-btn {
        display: block;
    }


    /* Hide navbar initially */
    .navbar {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: #111;

        padding: 20px;

        box-sizing: border-box;

        z-index: 10000;
    }


    /* SHOW NAVBAR WHEN BUTTON IS CLICKED */
    .navbar.show-menu {
        display: block;
    }


    /* Mobile menu list */
    .navbar ul {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        width: 100%;
    }


    .navbar ul li {
        width: 100%;

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


    .navbar ul li a {
        display: block;

        width: 100%;

        padding: 15px 5px;

        color: #fff;

        text-decoration: none;
    }



    /* ========================================
       HAMBURGER → X
    ======================================== */

    .menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* Hide tech card */
    .tech-card {
        display: none;
    }
}
/* Tablet */
@media (max-width: 991px) {
    .contact-btn {
        padding: 12px 18px;
        font-size: 13px;
        gap: 8px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .contact-btn {
        padding: 11px 16px;
        font-size: 13px;
        gap: 7px;
        width: fit-content;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .contact-btn {
        padding: 10px 14px;
        font-size: 12px;
        gap: 6px;
    }
}
/* ========================================
   HERO
======================================== */


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

        .tech-hero {

    --hero-dark: #06101d;
    --hero-dark-2: #071522;

    --hero-accent: #10cbff;

    --hero-white: #ffffff;

    --hero-text: rgba(255,255,255,.68);

    position: relative;

    width: 100%;

    min-height: 760px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(16,203,255,.055),
            transparent 32%
        ),
        var(--hero-dark);

    color: var(--hero-white);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

}



        .tech-hero {

            position: relative;

            width: 100%;

            min-height: 760px;

            overflow: hidden;

            background: var(--dark);
        }


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

        .hero-grid {

            position: absolute;

            inset: 0;

            pointer-events: none;

            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: 78px 78px;

            opacity: .7;
        }


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

        .hero-glow-left {

            position: absolute;

            width: 620px;

            height: 620px;

            left: -390px;

            bottom: -390px;

            border-radius: 50%;

            background: var(--accent);

            opacity: .08;

            filter: blur(110px);

            pointer-events: none;
        }


        .hero-glow-right {

            position: absolute;

            width: 520px;

            height: 520px;

            right: -320px;

            top: -270px;

            border-radius: 50%;

            background: var(--accent);

            opacity: .07;

            filter: blur(110px);

            pointer-events: none;
        }


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

        .hero-container {

            position: relative;

            z-index: 5;

            width: 100%;

            max-width: 1780px;

            min-height: 760px;

            margin: auto;

            padding: 0 56px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 40px;
            padding-top: 60px;
        }


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

        .hero-content {

            width: 51%;

            animation:
                heroContentIn .9s ease forwards;
        }


        @keyframes heroContentIn {

            from {

                opacity: 0;

                transform:
                    translateX(-35px);
            }

            to {

                opacity: 1;

                transform:
                    translateX(0);
            }
        }


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

        .hero-label {

            display: inline-flex;

            align-items: center;

            gap: 15px;

            padding: 10px 20px;

            margin-bottom: 30px;

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

            border-radius: 50px;

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

            transition: .3s ease;
        }


        .hero-label:hover {

            border-color:
                var(--accent);

            box-shadow:
                0 0 25px
                rgba(16,203,255,.12);
        }


        .hero-label-dot {

            width: 10px;

            height: 10px;

            flex-shrink: 0;

            border-radius: 50%;

            background: var(--accent);

            box-shadow:
                0 0 8px var(--accent),
                0 0 18px
                rgba(16,203,255,.65);

            animation:
                labelDotPulse 2s infinite;
        }


        @keyframes labelDotPulse {

            0%,
            100% {

                transform: scale(1);

                opacity: .75;
            }

            50% {

                transform: scale(1.15);

                opacity: 1;
            }
        }


        .hero-label-text {

            color: var(--white);

            font-size: 15px;

            font-weight: 700;

            letter-spacing: 1.7px;

            text-transform: uppercase;
        }


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

        .hero-title {

            max-width: 850px;

            margin-bottom: 27px;

            color: var(--white);

            font-size: 70px;

            line-height: 1.065;

            letter-spacing: -3.5px;

            font-weight: 800;
        }


        .hero-title .accent {

            color: var(--accent);

            text-shadow:
                0 0 35px
                rgba(16,203,255,.12);
        }


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

        .hero-description {

            max-width: 850px;

            margin-bottom: 34px;

            color: var(--text);

            font-size: 22px;

            line-height: 1.55;

            font-weight: 400;
        }


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

        .hero-buttons {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: flex-start;

            gap: 14px;

            flex-direction: row;

            flex-wrap: nowrap;
        }


        .hero-btn {

            height: 57px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            border-radius: 50px;

            font-size: 16px;

            font-weight: 700;

            white-space: nowrap;

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


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

        .btn-primary {

            width: 278px;

            color: var(--dark);

            background: var(--accent);

            box-shadow:
                0 9px 24px
                rgba(16,203,255,.22);
        }


        .btn-primary:hover {

            transform:
                translateY(-3px);

            color: var(--dark);

            background: var(--white);

            box-shadow:
                0 13px 30px
                rgba(16,203,255,.32);
        }


        .btn-primary i {

            margin-left: 14px;

            font-size: 14px;

            transition:
                transform .3s ease;
        }


        .btn-primary:hover i {

            transform:
                translateX(5px);
        }


        /* =========================================================
           SECONDARY BUTTON
        ========================================================= */

        .btn-secondary {

            width: 230px;

            color: var(--white);

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

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

            box-shadow:
                inset 0 0 20px
                rgba(255,255,255,.015);
        }


        .btn-secondary:hover {

            transform:
                translateY(-3px);

            color: var(--dark);

            border-color:
                var(--accent);

            background:
                var(--accent);

            box-shadow:
                0 12px 28px
                rgba(16,203,255,.20);
        }


        .btn-secondary i {

            margin-right: 13px;

            font-size: 12px;

            transition:
                transform .3s ease;
        }


        .btn-secondary:hover i {

            transform:
                scale(1.15);
        }


      /* =========================================================
   RIGHT SIDE HERO VISUAL
========================================================= */

.tech-hero-visual {
    position: relative;
    width: 50%;
    height: 640px;

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

    animation: heroVisualIn 1s ease forwards;
}

@keyframes heroVisualIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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


/* =========================================================
   MAIN VISUAL BOX
========================================================= */

.tech-visual-box {
    position: relative;

    width: 100%;
    max-width: 790px;
    height: 570px;

    overflow: hidden;

    border-radius: 35px;

    border: 1px solid rgba(16, 203, 255, 0.20);

    background:
        radial-gradient(
            circle at center,
            rgba(16, 203, 255, 0.035),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #071421,
            #050e19
        );

    box-shadow:
        inset 0 0 80px rgba(16, 203, 255, 0.035),
        0 30px 75px rgba(0, 0, 0, 0.30);
}


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

.tech-visual-box::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: 45px 45px;

    pointer-events: none;

    z-index: 0;
}


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

.visual-center-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    left: 50%;
    top: 44%;

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

    border-radius: 50%;

    background: var(--hero-accent);

    opacity: 0.055;

    filter: blur(75px);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.visual-ring {
    position: absolute;

    left: 50%;
    top: 44%;

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

    border-radius: 50%;

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

    pointer-events: none;

    z-index: 2;
}


/* Large outer ring */

.ring-one {
    width: 465px;
    height: 465px;

    animation:
        decorativeRotate 25s linear infinite;
}


/* Middle dashed ring */

.ring-two {
    width: 360px;
    height: 360px;

    border-style: dashed;

    border-color:
        rgba(16, 203, 255, 0.12);

    animation:
        decorativeRotateReverse 20s linear infinite;
}


/* Inner ring */

.ring-three {
    width: 275px;
    height: 275px;

    border-color:
        rgba(16, 203, 255, 0.15);
}


@keyframes decorativeRotate {

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

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

}


@keyframes decorativeRotateReverse {

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

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

}


/* =========================================================
   CENTRAL TECHNOLOGY HUB
========================================================= */

.technology-hub {
    position: absolute;

    left: 50%;
    top: 44%;

    width: 215px;
    height: 215px;

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

    z-index: 10;

    pointer-events: none;
}


/* =========================================================
   OUTER HUB RING
========================================================= */

.hub-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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


.hub-ring-outer {

    width: 205px;
    height: 205px;

    border:
        1px solid rgba(16, 203, 255, 0.55);

    box-shadow:
        0 0 25px rgba(16, 203, 255, 0.10);

    animation:
        hubRotate 13s linear infinite;
}


.hub-ring-middle {

    width: 155px;
    height: 155px;

    border:
        1px solid rgba(16, 203, 255, 0.40);
}


@keyframes hubRotate {

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

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

}


/* =========================================================
   HUB DOTS
========================================================= */

.ring-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--hero-accent);

    box-shadow:
        0 0 12px var(--hero-accent);
}


.ring-dot-one {
    top: 10px;
    left: 50%;

    transform:
        translateX(-50%);
}


.ring-dot-two {
    right: 12px;
    bottom: 30px;
}


.hub-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    top: 10px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--hero-accent);

    box-shadow:
        0 0 12px var(--hero-accent);
}


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

.hub-logo {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 105px;
    height: 105px;

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

    display: flex;

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

    border-radius: 50%;

    border:
        1px solid rgba(16, 203, 255, 0.55);

    background:
        rgba(5, 15, 27, 0.97);

    box-shadow:
        0 0 35px rgba(16, 203, 255, 0.25),
        inset 0 0 25px rgba(16, 203, 255, 0.07);

    z-index: 10;
}


.hub-logo-glow {

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    background:
        var(--hero-accent);

    opacity: 0.08;

    filter: blur(15px);
}


.hub-logo img {

    position: relative;

    z-index: 2;

    width: 64px;
    height: 64px;

    object-fit: contain;
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.connection {

    position: absolute;

    height: 1px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(16, 203, 255, 0.65),
            transparent
        );

    opacity: 0.45;

    box-shadow:
        0 0 8px rgba(16, 203, 255, 0.35);

    pointer-events: none;
}


/* =========================================================
   DISCOVER CONNECTION
   Top-left card → Hub
========================================================= */

.connection-discover {

    width: 170px;

    left: 27%;

    top: 31%;

    transform:
        rotate(28deg);

}


/* =========================================================
   ENGINEER CONNECTION
   Top-right card → Hub
========================================================= */

.connection-engineer {

    width: 170px;

    right: 27%;

    top: 31%;

    transform:
        rotate(-28deg);

}


/* =========================================================
   OPERATE CONNECTION
   Hub → Bottom card
========================================================= */

.connection-operate {

    width: 105px;

    left: 50%;

    top: 56%;

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

}


/* =========================================================
   WORKFLOW WRAPPER
========================================================= */

.tech-workflow {

    position: absolute;

    inset: 0;

    z-index: 30;

    pointer-events: none;
}


/* =========================================================
   COMMON CARD
========================================================= */

.tech-workflow-card {

    position: absolute;

    width: 212px;
    height: 170px;

    padding: 17px;

    box-sizing: border-box;

    border-radius: 18px;

    border:
        1px solid rgba(16, 203, 255, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(9, 28, 45, 0.98),
            rgba(4, 13, 24, 0.99)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32),
        inset 0 0 30px rgba(16, 203, 255, 0.025);

    backdrop-filter:
        blur(14px);

    pointer-events: auto;

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

    overflow: hidden;
}


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

.tech-workflow-card::before {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -60px;

    border-radius: 50%;

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

    filter: blur(25px);

    pointer-events: none;
}


/* =========================================================
   DISCOVER CARD
   TOP LEFT
========================================================= */

.workflow-discover {

    left: 25px;

    top: 25px;

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


/* =========================================================
   ENGINEER CARD
   TOP RIGHT
========================================================= */

.workflow-engineer {

    right: 25px;

    top: 25px;

    animation:
        engineerFloat 5.5s ease-in-out infinite;
}


/* =========================================================
   OPERATE CARD
   BOTTOM CENTER
========================================================= */

.workflow-operate {

    left: 50%;

    bottom: 25px;

    margin-left: -102.5px;

    animation:
        operateFloat 6s ease-in-out infinite;
}


/* =========================================================
   CARD FLOAT ANIMATIONS
========================================================= */

@keyframes discoverFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -6px;
    }

}


@keyframes engineerFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: 6px;
    }

}


@keyframes operateFloat {

    0%,
    100% {
        margin-bottom: 0;
    }

    50% {
        margin-bottom: 6px;
    }

}


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

.tech-workflow-card:hover {

    border-color:
        rgba(16, 203, 255, 0.70);

    background:
        linear-gradient(
            145deg,
            rgba(10, 34, 52, 0.99),
            rgba(4, 14, 26, 1)
        );

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(16, 203, 255, 0.12);
}


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

.workflow-card-header {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
}


.workflow-number {

    color:
        var(--hero-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.workflow-status {

    padding:
        4px 8px;

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

    border-radius: 20px;

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

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;
}


/* =========================================================
   CARD BODY
========================================================= */

.workflow-card-body {

    position: relative;

    width: 100%;

    height: 105px;
}


/* =========================================================
   CARD HEADING
========================================================= */

.tech-workflow-card h3 {

    margin:
        0 0 8px;

    color:
        #ffffff;

    font-family:
        "Space Grotesk",
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 19px;

    font-weight: 700;
}


/* =========================================================
   CARD LINE
========================================================= */

.workflow-line {

    width: 42px;

    height: 2px;

    margin-bottom: 10px;

    border-radius: 10px;

    background:
        var(--hero-accent);

    box-shadow:
        0 0 10px rgba(16,203,255,0.35);
}


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

.tech-workflow-card p {

    width: 128px;

    margin: 0;

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

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================================
   CARD ICON
========================================================= */

.workflow-icon {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 50%;

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

    color:
        var(--hero-accent);

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

    font-size: 15px;

    transition:
        all 0.3s ease;
}


.tech-workflow-card:hover .workflow-icon {

    color:
        var(--hero-dark);

    background:
        var(--hero-accent);

    box-shadow:
        0 0 20px rgba(16,203,255,0.30);

    transform:
        scale(1.08);
}

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

.visual-floor-glow {

    position: absolute;

    left: 50%;

    bottom: -15px;

    width: 75%;

    height: 70px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(16,203,255,0.35),
            transparent 70%
        );

    filter: blur(15px);

    opacity: 0.55;

    z-index: 1;
}


/* =========================================================
   FLOOR LINE
========================================================= */

.visual-floor-line {

    position: absolute;

    left: 50%;

    bottom: 20px;

    width: 65%;

    height: 1px;

    transform:
        translateX(-50%);

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

    box-shadow:
        0 0 8px rgba(16,203,255,0.4);

    z-index: 3;
}


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

@media (max-width: 1250px) {

    .tech-hero-visual {
        width: 50%;
    }

    .tech-visual-box {
        max-width: 690px;
    }

    .tech-workflow-card {
        width: 180px;
    }

    .workflow-operate {
        margin-left: -90px;
    }

    .workflow-discover {
        left: 15px;
    }

    .workflow-engineer {
        right: 15px;
    }

    .connection-discover,
    .connection-engineer {
        width: 125px;
    }

}


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

@media (max-width: 992px) {

    .tech-hero-visual {

        width: 100%;

        max-width: 820px;

        height: 620px;

        margin: 0 auto;
    }

    .tech-visual-box {

        height: 570px;

        max-width: 790px;
    }

}


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

@media (max-width: 700px) {

    .tech-hero-visual {

        width: 100%;

        height: 680px;
    }


    .tech-visual-box {

        width: 100%;

        height: 660px;

        border-radius: 24px;
    }


    /* -----------------------------------------
       RINGS
    ----------------------------------------- */

    .ring-one {

        width: 350px;
        height: 350px;
    }

    .ring-two {

        width: 285px;
        height: 285px;
    }

    .ring-three {

        width: 220px;
        height: 220px;
    }


    /* -----------------------------------------
       CENTER HUB
    ----------------------------------------- */

    .technology-hub {

        top: 150px;

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


    .visual-center-glow,
    .visual-ring {

        top: 150px;
    }


    /* -----------------------------------------
       HIDE CONNECTIONS
    ----------------------------------------- */

    .connection {

        display: none;
    }


    /* -----------------------------------------
       WORKFLOW
    ----------------------------------------- */

    .tech-workflow {

        position: absolute;

        inset: 0;

        z-index: 30;
    }


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

    .tech-workflow-card {

        width:
            calc(100% - 30px);

        max-width: 330px;

        height: 112px;

        min-height: 112px;

        padding: 12px;

        border-radius: 14px;
    }


    /* DISCOVER */

    .workflow-discover {

        left: 15px;

        top: 270px;

        right: auto;

        bottom: auto;

        margin: 0;

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


    /* ENGINEER */

    .workflow-engineer {

        right: 15px;

        top: 395px;

        left: auto;

        bottom: auto;

        margin: 0;

        animation:
            mobileEngineerFloat
            5.5s ease-in-out infinite;
    }


    /* OPERATE */

    .workflow-operate {

        left: 15px;

        top: 520px;

        right: auto;

        bottom: auto;

        margin: 0;

        animation:
            mobileOperateFloat
            6s ease-in-out infinite;
    }


    /* -----------------------------------------
       MOBILE CARD ANIMATIONS
    ----------------------------------------- */

    @keyframes mobileDiscoverFloat {

        0%,
        100% {
            margin-top: 0;
        }

        50% {
            margin-top: -4px;
        }

    }


    @keyframes mobileEngineerFloat {

        0%,
        100% {
            margin-top: 0;
        }

        50% {
            margin-top: 4px;
        }

    }


    @keyframes mobileOperateFloat {

        0%,
        100% {
            margin-top: 0;
        }

        50% {
            margin-top: -4px;
        }

    }


    /* -----------------------------------------
       MOBILE CARD CONTENT
    ----------------------------------------- */

    .workflow-card-header {

        margin-bottom: 6px;
    }


    .workflow-number {

        font-size: 9px;
    }


    .workflow-status {

        font-size: 6px;

        padding:
            3px 5px;
    }


    .workflow-card-body {

        height: 72px;
    }


    .tech-workflow-card h3 {

        font-size: 14px;

        margin-bottom: 4px;
    }


    .workflow-line {

        width: 28px;

        height: 1px;

        margin-bottom: 6px;
    }


    .tech-workflow-card p {

        width: 175px;

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

        font-size: 8px;

        line-height: 1.45;
    }


    .workflow-icon {

        width: 31px;

        height: 31px;

        right: 4px;

        bottom: 3px;

        font-size: 10px;
    }


    /* -----------------------------------------
       PLATFORM
    ----------------------------------------- */

    .visual-platform {

        display: none;
    }


    .visual-floor-glow {

        display: none;
    }


    .visual-floor-line {

        bottom: 10px;
    }

}


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

@media (max-width: 480px) {

    .tech-hero-visual {

        height: 620px;
    }


    .tech-visual-box {

        height: 600px;

        border-radius: 20px;
    }


    .technology-hub {

        top: 130px;

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


    .visual-center-glow,
    .visual-ring {

        top: 130px;
    }


    .ring-one {

        width: 285px;

        height: 285px;
    }


    .ring-two {

        width: 235px;

        height: 235px;
    }


    .ring-three {

        width: 185px;

        height: 185px;
    }


    /* CARD SIZE */

    .tech-workflow-card {

        width:
            calc(100% - 20px);

        max-width: 300px;

        height: 102px;

        min-height: 102px;

        padding: 10px;
    }


    /* DISCOVER */

    .workflow-discover {

        top: 235px;

        left: 10px;
    }


    /* ENGINEER */

    .workflow-engineer {

        top: 345px;

        right: 10px;
    }


    /* OPERATE */

    .workflow-operate {

        top: 455px;

        left: 10px;
    }


    .workflow-card-header {

        margin-bottom: 4px;
    }


    .workflow-number {

        font-size: 7px;
    }


    .workflow-status {

        display: none;
    }


    .workflow-card-body {

        height: 66px;
    }


    .tech-workflow-card h3 {

        font-size: 12px;
    }


    .workflow-line {

        width: 24px;

        margin-bottom: 4px;
    }


    .tech-workflow-card p {

        width: 150px;

        font-size: 7px;

        line-height: 1.4;
    }


    .workflow-icon {

        width: 28px;

        height: 28px;

        font-size: 9px;
    }

}


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

@media (max-width: 360px) {

    .tech-hero-visual {

        height: 590px;
    }


    .tech-visual-box {

        height: 570px;
    }


    .technology-hub {

        top: 120px;

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


    .visual-center-glow,
    .visual-ring {

        top: 120px;
    }


    .workflow-discover {

        top: 220px;
    }


    .workflow-engineer {

        top: 325px;
    }


    .workflow-operate {

        top: 430px;
    }


    .tech-workflow-card {

        width:
            calc(100% - 16px);

        height: 98px;

        min-height: 98px;
    }


    .tech-workflow-card p {

        width: 135px;

        font-size: 6.5px;
    }

}

        @keyframes floatingLight {

            0%,
            100% {

                transform:
                    translateY(0);

                opacity: .25;
            }

            50% {

                transform:
                    translateY(-14px);

                opacity: .75;
            }
        }


        /* =========================================================
           1450px
        ========================================================= */

        @media (max-width: 1450px) {

            .hero-title {

                font-size: 61px;

                letter-spacing: -3px;
            }


            .hero-description {

                font-size: 20px;
            }


            .hero-visual {

                height: 610px;
            }


            .visual-box {

                height: 560px;
            }


            .screen {

                transform:
                    translateX(-50%)
                    scale(.88);

                transform-origin:
                    top center;
            }


            .tech-workflow {

                bottom: 82px;
            }


            .tech-floor-glow {

                bottom: 28px;
            }


            .tech-floor-line {

                bottom: 53px;
            }
        }


        /* =========================================================
           1100px
        ========================================================= */

        @media (max-width: 1100px) {

            .tech-hero {

                min-height: auto;
            }


            .hero-container {

                min-height: auto;

                padding: 75px 40px;

                flex-direction: column;
            }


            .hero-content {

                width: 100%;

                text-align: center;

                display: flex;

                align-items: center;

                flex-direction: column;
            }


            .hero-title {

                max-width: 850px;

                font-size: 57px;
            }


            .hero-description {

                max-width: 780px;
            }


            .hero-buttons {

                justify-content: center;
            }


            .hero-visual {

                width: 100%;

                max-width: 850px;

                height: 610px;
            }


            .visual-box {

                height: 560px;
            }


            .hero-bottom-line {

                display: none;
            }


            .floating-light {

                display: none;
            }
        }


        /* =========================================================
           768px
        ========================================================= */

        @media (max-width: 768px) {

            .hero-container {

                padding:
                    60px 25px;
            }


            .hero-label {

                padding:
                    9px 16px;

                gap: 11px;

                margin-bottom: 24px;
            }


            .hero-label-text {

                font-size: 11px;

                letter-spacing: 1.2px;
            }


            .hero-label-dot {

                width: 8px;

                height: 8px;
            }


            .hero-title {

                font-size: 43px;

                line-height: 1.08;

                letter-spacing: -1.8px;

                margin-bottom: 22px;
            }


            .hero-description {

                font-size: 17px;

                line-height: 1.55;

                margin-bottom: 28px;
            }


            /* =====================================================
               BUTTONS STAY SIDE-BY-SIDE
            ===================================================== */

            .hero-buttons {

                width: 100%;

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                justify-content: center;

                align-items: center;

                gap: 10px;
            }


            .hero-btn {

                width: auto;

                max-width: none;

                flex: 1 1 0;

                height: 52px;

                padding:
                    0 12px;

                font-size: 13px;
            }


            .btn-primary,
            .btn-secondary {

                width: auto;

                max-width: none;
            }


            .btn-primary i {

                margin-left: 8px;
            }


            .btn-secondary i {

                margin-right: 8px;
            }


            .hero-visual {

                height: 475px;
            }


            .visual-box {

                height: 475px;

                border-radius: 28px;
            }


            .screen {

                width: 235px;

                height: 210px;

                top: 40px;
            }


            .orbit-large {

                width: 118px;

                height: 118px;

                top: 40px;
            }


            .orbit-middle {

                width: 90px;

                height: 90px;

                top: 13px;
            }


            .orbit-small {

                width: 64px;

                height: 64px;

                top: 13px;
            }


            .center-logo {

                width: 49px;

                height: 49px;
            }


            .center-logo::before {

                width: 33px;

                height: 33px;
            }


            .center-logo::after {

                width: 18px;

                height: 18px;

                left: 14px;

                top: 15px;
            }


            .tech-workflow {

                bottom: 70px;

                width: 94%;

                gap: 7px;
            }


            .tech-workflow-card {

                height: 140px;

                padding:
                    11px 9px;

                border-radius: 13px;
            }


            .tech-workflow-number {

                font-size: 9px;

                margin-bottom: 7px;
            }


            .tech-workflow-title {

                font-size: 12px;

                margin-bottom: 7px;
            }


            .tech-workflow-line {

                width: 42px;

                height: 2px;

                margin-bottom: 7px;
            }


            .tech-workflow-text {

                max-width: 90px;

                font-size: 7px;
            }


            .tech-workflow-icon {

                width: 31px;

                height: 31px;

                right: 8px;

                bottom: 8px;

                font-size: 11px;
            }


            .tech-workflow::before {

                top: 60px;
            }


            .tech-floor-glow {

                bottom: 30px;
            }


            .tech-floor-line {

                bottom: 52px;
            }
        }


        /* =========================================================
           480px
        ========================================================= */

        @media (max-width: 480px) {

            .hero-container {

                padding:
                    100px 18px 52px;
            }


            .hero-label {

                padding:
                    8px 12px;

                gap: 8px;
            }


            .hero-label-text {

                font-size: 8px;

                letter-spacing: .9px;
            }


            .hero-title {

                font-size: 33px;

                letter-spacing: -1.2px;
            }


            .hero-description {

                font-size: 15px;

                line-height: 1.5;
            }


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

            .hero-buttons {

                width: 100%;

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                justify-content: center;

                align-items: center;

                gap: 7px;
            }


            .hero-btn {

                width: auto;

                max-width: none;

                flex: 1 1 0;

                height: 48px;

                padding:
                    0 7px;

                font-size: 10px;

                letter-spacing: -.1px;
            }


            .btn-primary,
            .btn-secondary {

                width: auto;

                max-width: none;
            }


            .btn-primary i {

                margin-left: 5px;

                font-size: 9px;
            }


            .btn-secondary i {

                margin-right: 5px;

                font-size: 9px;
            }


            .hero-visual {

                height: 365px;
            }


            .visual-box {

                height: 365px;

                border-radius: 23px;
            }


            .screen {

                width: 174px;

                height: 154px;

                top: 28px;

                border-radius: 16px;
            }


            .orbit-large {

                width: 84px;

                height: 84px;

                top: 29px;
            }


            .orbit-middle {

                width: 65px;

                height: 65px;

                top: 9px;
            }


            .orbit-small {

                width: 44px;

                height: 44px;

                top: 10px;
            }


            .center-logo {

                width: 35px;

                height: 35px;
            }


            .center-logo::before {

                width: 23px;

                height: 23px;

                top: 4px;
            }


            .center-logo::after {

                display: none;
            }


            .tech-workflow {

                bottom: 48px;

                gap: 5px;
            }


            .tech-workflow-card {

                height: 109px;

                padding:
                    8px 6px;

                border-radius: 10px;
            }


            .tech-workflow-number {

                font-size: 7px;

                margin-bottom: 5px;
            }


            .tech-workflow-title {

                font-size: 9px;

                margin-bottom: 5px;
            }


            .tech-workflow-line {

                width: 29px;

                height: 2px;

                margin-bottom: 5px;
            }


            .tech-workflow-text {

                max-width: 67px;

                font-size: 5.5px;

                line-height: 1.4;
            }


            .tech-workflow-icon {

                display: none;
            }


            .tech-workflow::before {

                top: 46px;
            }


            .tech-floor-glow {

                bottom: 17px;

                height: 50px;
            }


            .tech-floor-line {

                bottom: 35px;
            }
        }

/* ===========================
   Large Desktop
=========================== */
@media (max-width:1400px){

    .right-box{
        width:760px;
        height:640px;
    }

    .logo-panel{
        width:300px;
        height:300px;
    }

    .platform{
        width:470px;
    }

}

/* ===========================
   Laptop
=========================== */
@media (max-width:1200px){

    .hero{
        padding:30px;
    }

    .right-box{
        width:100%;
        max-width:700px;
        height:620px;
    }

    .logo-panel{
        width:270px;
        height:270px;
    }

    .logo-ring{
        width:150px;
        height:150px;
    }

    .logo-ring img{
        width:95px;
    }

    .circle1{
        width:430px;
        height:430px;
    }

    .circle2{
        width:360px;
        height:360px;
    }

    .circle3{
        width:300px;
        height:300px;
    }

    .cards{
        gap:12px;
    }

    .card{
        width:150px;
        height:190px;
        padding:18px;
    }

    .card-title{
        font-size:24px;
    }

    .card-number{
        font-size:28px;
    }

    .card p{
        font-size:13px;
    }

    .connector{
        width:430px;
    }

    .platform{
        width:420px;
    }

}

/* ===========================
   Tablet
=========================== */
@media (max-width:992px){

    .hero{
        padding:20px;
    }

    .right-box{
        height:auto;
        min-height:900px;
        padding:40px 20px;
    }

    .logo-panel{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        margin:0 auto 40px;
    }

    .circle1,
    .circle2,
    .circle3{
        display:none;
    }

    .connector{
        display:none;
    }

    .platform{
        display:none;
    }

    .cards{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;

        flex-direction:column;
        align-items:center;
        width:100%;
    }

    .card{
        width:100%;
        max-width:400px;
        height:auto;
        min-height:220px;
    }

}

/* ===========================
   Mobile
=========================== */
@media (max-width:768px){

    .hero{
        padding:15px;
    }

    .right-box{

        border-radius:24px;

        min-height:auto;

        padding:30px 15px;

    }

    .logo-panel{

        width:220px;
        height:220px;

        border-radius:24px;

    }

    .logo-ring{

        width:130px;
        height:130px;

    }

    .logo-ring img{

        width:82px;

    }

    .card{

        padding:20px;

        border-radius:18px;

    }

    .card-number{

        font-size:24px;

    }

    .card-title{

        font-size:22px;

    }

    .card p{

        font-size:14px;
        line-height:1.7;

    }

    .icon{

        width:46px;
        height:46px;

        font-size:18px;

    }

}

/* ===========================
   Small Mobile
=========================== */
@media (max-width:480px){

    .hero{

        padding:10px;

    }

    .right-box{

        padding:20px 12px;

    }

    .logo-panel{

        width:180px;
        height:180px;

    }

    .logo-ring{

        width:110px;
        height:110px;

    }

    .logo-ring img{

        width:70px;

    }

    .logo-ring::before{

        width:150px;
        height:150px;

    }

    .logo-ring::after{

        width:175px;
        height:175px;

    }

    .card{

        max-width:100%;

        padding:18px;

    }

    .card-title{

        font-size:20px;

    }

    .card-number{

        font-size:22px;

    }

    .card p{

        font-size:13px;

    }

}/* =========================================
   RESPONSIVE HERO BUTTONS
========================================= */

.hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 22px;
    white-space: nowrap;
    flex: 1 1 0;
}

.btn-primary,
.btn-secondary {
    width: auto;
}


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

@media (max-width: 768px) {

    .hero-buttons {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
    }

    .hero-btn {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        height: 50px;
        padding: 0 16px;
        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hero-btn {
        flex: 1 1 0;
        width: 50%;
        min-width: 0;
        max-width: none;

        height: 46px;
        padding: 0 8px;

        font-size: 11px;
        white-space: nowrap;
    }

    .hero-btn i {
        font-size: 10px;
    }

}

/* =========================================================
   RIGHT HERO — TABLET RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .tech-hero-visual {
        width: 50%;
        height: 600px;
        padding: 0 10px;
    }

    .tech-visual-box {
        width: 100%;
        max-width: 700px;
        height: 550px;
        border-radius: 28px;
    }

    .technology-hub {
        width: 190px;
        height: 190px;
    }

    .hub-ring.hub-ring-outer {
        width: 180px;
        height: 180px;
    }

    .hub-ring.hub-ring-middle {
        width: 135px;
        height: 135px;
    }

    .hub-logo {
        width: 92px;
        height: 92px;
    }

    .hub-logo img {
        width: 55px;
        height: 55px;
    }

    /* Cards */

    .tech-workflow-card {
        width: 180px;
        min-height: 150px;
        padding: 15px;
    }

    .workflow-discover {
        left: 18px;
        top: 25px;
    }

    .workflow-engineer {
        right: 18px;
        top: 25px;
    }

    .workflow-operate {
        right: 18px;
        left: auto;
        bottom: 22px;
        margin-left: 0;
    }

    /* Connections */

    .connection-discover {
        width: 125px;
        left: 25%;
        top: 38%;
    }

    .connection-engineer {
        width: 125px;
        right: 25%;
        top: 38%;
    }

    .connection-operate {
        width: 125px;
        right: 25%;
        left: auto;
        top: 62%;
        transform: rotate(-28deg);
    }
}


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

@media (max-width: 992px) {

    .tech-hero-visual {
        width: 100%;
        height: 590px;
        margin-top: 30px;
    }

    .tech-visual-box {
        width: 100%;
        max-width: 760px;
        height: 560px;
        margin: 0 auto;
    }

    .technology-hub {
        left: 50%;
        top: 44%;
    }

    .visual-center-glow {
        left: 50%;
        top: 44%;
    }

    .visual-ring {
        left: 50%;
        top: 44%;
    }

    .workflow-discover {
        left: 25px;
        top: 25px;
    }

    .workflow-engineer {
        right: 25px;
        top: 25px;
    }

    .workflow-operate {
        right: 25px;
        bottom: 25px;
    }

    .tech-workflow-card {
        width: 190px;
        min-height: 145px;
    }
}


/* =========================================================
   MOBILE — 700px
========================================================= */

@media (max-width: 700px) {

    .tech-hero-visual {
        width: 100%;
        height: auto;
        padding: 0 10px;
        margin-top: 20px;
    }

    .tech-visual-box {
        width: 100%;
        max-width: 100%;
        height: 700px;
        border-radius: 24px;
    }

    /* -----------------------------------------
       CENTER HUB
    ----------------------------------------- */

    .technology-hub {
        width: 155px;
        height: 155px;

        left: 50%;
        top: 145px;

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

    .hub-ring.hub-ring-outer {
        width: 150px;
        height: 150px;
    }

    .hub-ring.hub-ring-middle {
        width: 115px;
        height: 115px;
    }

    .hub-logo {
        width: 78px;
        height: 78px;
    }

    .hub-logo img {
        width: 46px;
        height: 46px;
    }

    .visual-center-glow {
        width: 220px;
        height: 220px;

        left: 50%;
        top: 145px;
    }

    .visual-ring {
        left: 50%;
        top: 145px;
    }

    .ring-one {
        width: 300px;
        height: 300px;
    }

    .ring-two {
        width: 240px;
        height: 240px;
    }

    .ring-three {
        width: 185px;
        height: 185px;
    }


    /* -----------------------------------------
       HIDE CONNECTIONS
    ----------------------------------------- */

    .connection {
        display: none;
    }


    /* -----------------------------------------
       WORKFLOW AREA
    ----------------------------------------- */

    .tech-workflow {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }


    /* -----------------------------------------
       DISCOVER CARD
    ----------------------------------------- */

    .workflow-discover {
        left: 15px;
        right: auto;
        top: 245px;
    }


    /* -----------------------------------------
       ENGINEER CARD
    ----------------------------------------- */

    .workflow-engineer {
        left: auto;
        right: 15px;
        top: 365px;
    }


    /* -----------------------------------------
       OPERATE CARD
    ----------------------------------------- */

    .workflow-operate {
        left: 15px;
        right: auto;
        top: 485px;
        bottom: auto;

        margin-left: 0;
    }


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

    .tech-workflow-card {
        width: calc(50% - 22px);
        max-width: 300px;
        min-height: 105px;

        padding: 14px;

        border-radius: 16px;
    }

    .tech-workflow-card h3 {
        font-size: 15px;
    }

    .tech-workflow-card p {
        font-size: 11px;
        line-height: 1.5;
    }

    .tech-workflow-card .card-icon {
        width: 32px;
        height: 32px;
    }

    .tech-workflow-card .card-icon i {
        font-size: 13px;
    }


    /* -----------------------------------------
       PLATFORM
    ----------------------------------------- */

    .visual-platform {
        width: 65%;
        left: 17.5%;
        bottom: 18px;
    }

    .visual-floor-line {
        bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media (max-width: 480px) {

    .tech-hero-visual {
        padding: 0 7px;
    }

    .tech-visual-box {
        height: 650px;
        border-radius: 20px;
    }


    /* -----------------------------------------
       HUB
    ----------------------------------------- */

    .technology-hub {
        width: 135px;
        height: 135px;

        top: 125px;
    }

    .hub-ring.hub-ring-outer {
        width: 130px;
        height: 130px;
    }

    .hub-ring.hub-ring-middle {
        width: 100px;
        height: 100px;
    }

    .hub-logo {
        width: 68px;
        height: 68px;
    }

    .hub-logo img {
        width: 40px;
        height: 40px;
    }


    .visual-center-glow {
        width: 190px;
        height: 190px;

        top: 125px;
    }

    .visual-ring {
        top: 125px;
    }

    .ring-one {
        width: 260px;
        height: 260px;
    }

    .ring-two {
        width: 205px;
        height: 205px;
    }

    .ring-three {
        width: 155px;
        height: 155px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .tech-workflow-card {
        width: calc(100% - 30px);
        max-width: none;

        min-height: 92px;

        padding: 12px;

        border-radius: 14px;
    }


    .workflow-discover {
        left: 15px;
        top: 220px;
    }

    .workflow-engineer {
        left: 15px;
        right: auto;
        top: 330px;
    }

    .workflow-operate {
        left: 15px;
        right: auto;
        top: 440px;
    }


    .tech-workflow-card h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .tech-workflow-card p {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .tech-workflow-card .card-icon {
        width: 30px;
        height: 30px;
    }


    .visual-platform {
        width: 75%;
        left: 12.5%;
        bottom: 15px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE — 360px
========================================================= */

@media (max-width: 360px) {

    .tech-visual-box {
        height: 620px;
    }


    /* Hub */

    .technology-hub {
        width: 120px;
        height: 120px;
        top: 110px;
    }

    .hub-ring.hub-ring-outer {
        width: 115px;
        height: 115px;
    }

    .hub-ring.hub-ring-middle {
        width: 88px;
        height: 88px;
    }

    .hub-logo {
        width: 60px;
        height: 60px;
    }

    .hub-logo img {
        width: 35px;
        height: 35px;
    }


    .visual-center-glow {
        width: 165px;
        height: 165px;
        top: 110px;
    }

    .visual-ring {
        top: 110px;
    }

    .ring-one {
        width: 225px;
        height: 225px;
    }

    .ring-two {
        width: 180px;
        height: 180px;
    }

    .ring-three {
        width: 140px;
        height: 140px;
    }


    /* Cards */

    .tech-workflow-card {
        width: calc(100% - 24px);
        left: 12px !important;
        right: auto !important;

        padding: 10px;

        min-height: 88px;
    }

    .workflow-discover {
        top: 195px;
    }

    .workflow-engineer {
        top: 300px;
    }

    .workflow-operate {
        top: 405px;
    }


    .tech-workflow-card h3 {
        font-size: 13px;
    }

    .tech-workflow-card p {
        font-size: 10px;
    }

    .tech-workflow-card .card-icon {
        width: 27px;
        height: 27px;
    }

    .visual-platform {
        bottom: 12px;
    }
}
/* ==============================================SOLUTIONS=========================================== */

/* ========================================
   ARKANOVA SOLUTIONS SECTION
======================================== */

.arkanova-solutions-section{

    padding:80px 0;

    background:#f7f8fa;

    position:relative;

    overflow:hidden;

}


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

.arkanova-solutions-header{

    max-width:800px;

}


.arkanova-solutions-label{

    display:inline-block;

    color:var(--primary);

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:20px;

}


.arkanova-solutions-header h2{

    font-family:"Space Grotesk", sans-serif;

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

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:22px;

    color:#101828;

}


.arkanova-solutions-header h2 span{

    color:var(--primary);

}


.arkanova-solutions-header p{

    max-width:620px;

    color:#667085;

    font-size:17px;

    line-height:1.8;

}


/* ========================================
   SOLUTIONS GRID
======================================== */

.arkanova-solutions-grid{

    display:grid;

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

    gap:20px;

    margin-top:65px;

}


/* ========================================
   SOLUTION CARD
======================================== */

.arkanova-solution-card{

    background:#ffffff;

    padding:38px 28px;

    border:1px solid #e4e7ec;

    min-height:330px;

    position:relative;

    overflow:hidden;

    opacity:0;

    transform:translateY(40px);

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        opacity .6s ease;

}


/* Scroll Animation */

.arkanova-solution-card.solution-visible{

    opacity:1;

    transform:translateY(0);

}


/* Card Delay */

.arkanova-solution-card:nth-child(1){

    transition-delay:.1s;

}


.arkanova-solution-card:nth-child(2){

    transition-delay:.2s;

}


.arkanova-solution-card:nth-child(3){

    transition-delay:.3s;

}


.arkanova-solution-card:nth-child(4){

    transition-delay:.4s;

}


/* Hover Effect */

.arkanova-solution-card:hover{

    transform:translateY(-12px);

    background:#0a0e1a;

    border-color:#0a0e1a;

    color:#ffffff;

    box-shadow:0 20px 50px rgba(16,24,40,.18);

}


/* ========================================
   SOLUTION ICON
======================================== */

.arkanova-solution-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f2f4f7;

    color:var(--primary);

    font-size:22px;

    margin-bottom:30px;

    transition:.4s ease;

}


.arkanova-solution-card:hover
.arkanova-solution-icon{

    background:var(--primary);

    color:#ffffff;

    transform:rotateY(360deg);

}


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

.arkanova-solution-card h3{

    font-family:"Space Grotesk", sans-serif;

    font-size:23px;

    font-weight:600;

    margin-bottom:14px;

    transition:.4s ease;

}


.arkanova-solution-card p{

    color:#667085;

    font-size:14px;

    line-height:1.7;

    transition:.4s ease;

}


.arkanova-solution-card:hover p{

    color:#98a2b3;

}


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

.arkanova-solution-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#101828;

    font-size:14px;

    font-weight:600;

    margin-top:25px;

    transition:.3s ease;

}


.arkanova-solution-card:hover a{

    color:#ffffff;

}


.arkanova-solution-card a i{

    transition:.3s ease;

}


.arkanova-solution-card:hover a i{

    transform:translateX(6px);

}


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

@media(max-width:1000px){

    .arkanova-solutions-grid{

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

    }

}


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

@media(max-width:700px){

    .arkanova-solutions-section{

        padding:80px 0;

    }


    .arkanova-solutions-header h2{

        letter-spacing:-1px;

    }


    .arkanova-solutions-grid{

        grid-template-columns:1fr;

        margin-top:45px;

    }


    .arkanova-solution-card{

        min-height:auto;

        padding:35px 25px;

    }

}

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

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

.services-section {
    position: relative;
    padding: 120px 0;
    background: #07111f;
    overflow: hidden;
    color: #ffffff;
}

.services-container {
    width: 90%;
    max-width: 1250px;
    margin: auto;
    position: relative;
    z-index: 5;
}


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

.services-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(0, 170, 255, 0.10);
    filter: blur(100px);
    border-radius: 50%;
    top: -250px;
    left: -200px;
}

.services-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(100, 50, 255, 0.10);
    filter: blur(100px);
    border-radius: 50%;
    bottom: -250px;
    right: -150px;
}

.services-bg-shape {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 50%;
    animation: rotateShape 20s linear infinite;
}

.shape-one {
    width: 450px;
    height: 450px;
    right: -200px;
    top: 100px;
    background-color: #10cbff23;
}

.shape-two {
    width: 250px;
    height: 250px;
    left: -100px;
    bottom: 100px;
    animation-duration: 14s;
}

@keyframes rotateShape {
    from {
        transform: rotate(0deg);
    }

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


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

.services-heading {
    max-width: 720px;
    margin-bottom: 70px;
}

.small-title {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 700;
    color: #45caff;
    margin-bottom: 20px;
}

.services-heading h2 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    margin: 0;
    font-weight: 800;
}

.services-heading h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        #ffffff,
        #44caff,
        #7a6cff
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-heading p {
    margin-top: 25px;
    max-width: 620px;
    color: #9baabd;
    line-height: 1.8;
    font-size: 16px;
}


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

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


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

.service-card {
    position: relative;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(15px);
    transform-style: preserve-3d;
}

.service-card:hover {
    transform: translateY(-15px) rotateX(2deg) rotateY(-2deg);
    border-color: rgba(70,200,255,0.5);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.35),
        0 0 40px rgba(30,180,255,0.08);
}


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

.card-number {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

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

    font-size: 12px;
    font-weight: 700;

    transition: 0.4s ease;
}

.service-card:hover .card-number {
    transform: rotate(360deg) scale(1.1);
    background: #1ebeff;
    color: #00101c;
}


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

.service-image {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}

.service-card:hover .service-image img {
    transform: scale(1.12);
}


/* Image overlay */

.service-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 30%,
            rgba(7,17,31,0.95) 100%
        );

    pointer-events: none;
}


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

.image-glow {
    position: absolute;
    width: 120px;
    height: 120px;

    background: #24c8ff;
    filter: blur(70px);

    opacity: 0;
    right: -20px;
    bottom: -20px;

    transition: 0.6s ease;
}

.service-card:hover .image-glow {
    opacity: 0.4;
}


/* ========================================
   FLOATING ICONS
======================================== */

.floating-icon {
    position: absolute;
    z-index: 4;

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

    border-radius: 15px;

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

    backdrop-filter: blur(10px);

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

    color: white;
    font-weight: 800;

    transition: 0.5s ease;
}

.icon-one {
    width: 55px;
    height: 55px;
    left: 25px;
    top: 30px;

    font-size: 17px;

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

.icon-two {
    width: 38px;
    height: 38px;
    right: 70px;
    bottom: 35px;

    font-size: 16px;

    animation: floatingTwo 2.5s ease-in-out infinite;
}

@keyframes floatingOne {

    0%,100% {
        transform: translateY(0);
    }

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

@keyframes floatingTwo {

    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(180deg);
    }
}


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

.service-content {
    padding: 28px;
}

.service-content > span {
    font-size: 10px;
    letter-spacing: 2px;
    color: #55cfff;
    font-weight: 700;
}

.service-content h3 {
    font-size: 25px;
    margin: 12px 0;
    transition: 0.4s ease;
}

.service-card:hover .service-content h3 {
    transform: translateX(5px);
    color: #5dd3ff;
}

.service-content p {
    color: #8f9cac;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 25px;
}


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

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: 0.4s ease;
}

.service-link span {
    width: 32px;
    height: 32px;

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

    border-radius: 50%;

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

    transition: 0.4s ease;
}

.service-link:hover {
    color: #4bcaff;
}

.service-link:hover span {
    transform: rotate(45deg);
    background: #4bcaff;
    color: #00101c;
}


/* ========================================
   SCROLL REVEAL
======================================== */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* Different card delays */

.service-card:nth-child(1) {
    transition-delay: 0.05s;
}

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

.service-card:nth-child(3) {
    transition-delay: 0.25s;
}

.service-card:nth-child(4) {
    transition-delay: 0.35s;
}

.service-card:nth-child(5) {
    transition-delay: 0.45s;
}

.service-card:nth-child(6) {
    transition-delay: 0.55s;
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 650px) {

    .services-section {
        padding: 80px 0;
    }

    .services-container {
        width: 92%;
    }

    .services-heading {
        margin-bottom: 45px;
    }

    .services-heading h2 {
        font-size: 42px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-image {
        height: 230px;
    }

    .service-content {
        padding: 24px;
    }

}


/* ==================================================WHY CHOOSE US============================================= */

 /* =====================================================
           WHY CHOOSE US SECTION
        ===================================================== */

        .why-section {
            position: relative;
            padding: 110px 0 90px;
            background: #f7f8fa;
            overflow: hidden;
        }

        /* Soft background decorations */

        .why-bg-circle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .why-bg-circle.one {
            width: 420px;
            height: 420px;
            top: -220px;
            left: -180px;
            background: #10cbff1a;
            filter: blur(10px);
        }

        .why-bg-circle.two {
            width: 350px;
            height: 350px;
            right: -160px;
            bottom: -150px;
            background: rgba(35, 55, 150, 0.06);
            filter: blur(10px);
        }

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

        .why-container {
            width: 92%;
            max-width: 1400px;
            margin: auto;
            position: relative;
            z-index: 2;
        }

        /* =====================================================
           TOP AREA
        ===================================================== */

        .why-top {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 80px;
            align-items: center;
        }

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

        .why-left {
            position: relative;
        }

        .why-eyebrow {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 25px;

            color: #10cbff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .why-eyebrow::before {
            content: "";
            width: 42px;
            height: 2px;
            background: #10cbff;
        }

        .why-heading {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.9s cubic-bezier(.2,.8,.2,1);
        }

        .why-heading.active {
            opacity: 1;
            transform: translateY(0);
        }

        .why-heading h2 {
            font-size: clamp(45px, 5vw, 72px);
            line-height: 0.98;
            letter-spacing: -4px;
            color: #111936;
            font-weight: 800;
            max-width: 620px;
        }

        .why-heading h2 span {
            color: #10cbff;
        }

        .why-description {
            margin-top: 28px;
            max-width: 540px;
            color: #687086;
            font-size: 15px;
            line-height: 1.9;
        }

        /* =====================================================
           SCORE TAG
        ===================================================== */

        .why-score {
            display: inline-flex;
            align-items: center;
            gap: 13px;

            margin-top: 35px;
            padding: 10px 16px;

            background: #ffffff;
            border: 1px solid #e8eaf0;
            border-radius: 50px;

            box-shadow: 0 12px 35px rgba(20, 31, 70, 0.08);

            transform: translateY(20px);
            opacity: 0;

            transition: all 0.8s ease 0.25s;
        }

        .why-score.active {
            opacity: 1;
            transform: translateY(0);
        }

        .score-icon {
            width: 32px;
            height: 32px;

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

            border-radius: 50%;
            background: #fff3df;
            color: #10cbff;
            font-size: 13px;
        }

        .score-content {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .score-number {
            color: #111936;
            font-size: 14px;
            font-weight: 800;
        }

        .score-text {
            color: #7a8194;
            font-size: 11px;
            font-weight: 600;
        }

        /* =====================================================
           BENEFITS
        ===================================================== */

        .why-benefits {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        /* =====================================================
           BENEFIT CARD
        ===================================================== */

        .why-benefit {
            position: relative;

            padding: 27px 25px;

            min-height: 155px;

            background: #ffffff;

            border: 1px solid #e7e9ef;
            border-radius: 20px;

            box-shadow: 0 8px 30px rgba(17, 25, 54, 0.055);

            display: flex;
            gap: 17px;

            overflow: hidden;

            opacity: 0;
            transform: translateY(45px);

            transition:
                opacity 0.7s ease,
                transform 0.7s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
        }

        .why-benefit.active {
            opacity: 1;
            transform: translateY(0);
        }

        .why-benefit:hover {
            transform: translateY(-8px);
            border-color: #10cbff;
            box-shadow: 0 22px 50px rgba(17, 25, 54, 0.12);
        }

        /* Bottom orange line */

        .why-benefit::after {
            content: "";

            position: absolute;
            left: 0;
            bottom: 0;

            width: 0;
            height: 3px;

            background: #10cbff;

            transition: width 0.5s ease;
        }

        .why-benefit:hover::after {
            width: 100%;
        }

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

        .benefit-icon {
            width: 43px;
            height: 43px;

            flex-shrink: 0;

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

            border-radius: 13px;

            background: #10cbff17;
            color: #10cbff;

            font-size: 17px;

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

        .why-benefit:hover .benefit-icon {
            transform: rotate(-8deg) scale(1.1);
            background: #10cbff;
            color: #ffffff;
        }

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

        .benefit-content {
            padding-right: 20px;
        }

        .benefit-content h3 {
            margin-bottom: 9px;

            color: #151d3c;

            font-size: 16px;
            line-height: 1.4;
            font-weight: 700;
        }

        .benefit-content p {
            color: #747b8e;

            font-size: 12px;
            line-height: 1.7;
        }

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

        .benefit-number {
            position: absolute;
            top: 17px;
            right: 20px;

            color: #eef0f4;

            font-size: 35px;
            line-height: 1;
            font-weight: 800;

            transition: color 0.4s ease;
        }

        .why-benefit:hover .benefit-number {
            color: #9deaf4;
        }

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

        .why-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

            margin-top: 90px;

            background: #ffffff;

            border: 1px solid #e7e9ef;
            border-radius: 24px;

            box-shadow: 0 15px 45px rgba(17, 25, 54, 0.06);

            overflow: hidden;
        }

        /* =====================================================
           STAT
        ===================================================== */

        .why-stat {
            position: relative;

            min-height: 180px;

            padding: 35px 35px;

            border-right: 1px solid #eceef2;

            opacity: 0;
            transform: translateY(35px);

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

        .why-stat.active {
            opacity: 1;
            transform: translateY(0);
        }

        .why-stat:last-child {
            border-right: none;
        }

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

        .stat-number {
            display: flex;
            align-items: baseline;

            color: #111936;

            font-size: 48px;
            line-height: 1;
            font-weight: 800;

            letter-spacing: -2px;
        }

        .stat-number span {
            color: #10cbff;
            font-size: 27px;
            margin-left: 4px;
        }

        .stat-label {
            margin-top: 15px;

            color: #70778a;

            font-size: 13px;
            font-weight: 500;
        }

        /* =====================================================
           STAT PROGRESS LINE
        ===================================================== */

        .stat-line {
            position: absolute;

            left: 35px;
            right: 35px;
            bottom: 25px;

            height: 3px;

            background: #f0f1f4;

            overflow: hidden;
            border-radius: 20px;
        }

        .stat-line span {
            display: block;

            width: 0;
            height: 100%;

            background: linear-gradient(
                90deg,
                #10cbff,
                #10cbff
            );

            border-radius: 20px;

            transition:
                width 1.5s cubic-bezier(.2,.8,.2,1);
        }

        .why-stat.active .stat-line span {
            width: var(--progress);
        }

        /* =====================================================
           BOTTOM SCROLL AREA
        ===================================================== */

        .why-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-top: 45px;

            opacity: 0;
            transform: translateY(30px);

            transition: all 0.8s ease 0.4s;
        }

        .why-bottom.active {
            opacity: 1;
            transform: translateY(0);
        }

        .why-bottom-label {
            color: #a0a5b2;

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

            letter-spacing: 2.5px;
            text-transform: uppercase;
        }

        .why-bottom-text {
            display: flex;
            align-items: center;
            gap: 16px;

            color: #777e90;

            font-size: 13px;
        }

        .why-bottom-text strong {
            color: #10cbff;
        }

        /* =====================================================
           SCROLL INDICATOR
        ===================================================== */

        .why-scroll {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .why-scroll-line {
            position: relative;

            width: 60px;
            height: 2px;

            background: #e8e9ed;

            overflow: hidden;
        }

        .why-scroll-line span {
            position: absolute;

            left: -20px;
            top: 0;

            width: 20px;
            height: 2px;

            background: #10cbff;

            animation: scrollMove 2s ease-in-out infinite;
        }

        @keyframes scrollMove {

            0% {
                left: -20px;
            }

            50% {
                left: 60px;
            }

            100% {
                left: -20px;
            }

        }

        .why-scroll small {
            color: #a0a5b2;

            font-size: 9px;
            font-weight: 700;

            letter-spacing: 1.5px;
        }

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

        @media (max-width: 1050px) {

            .why-top {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .why-heading h2 {
                max-width: 800px;
            }

            .why-description {
                max-width: 650px;
            }

        }

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

        @media (max-width: 750px) {

            .why-section {
                padding: 75px 0 60px;
            }

            .why-container {
                width: 90%;
            }

            .why-heading h2 {
                font-size: 44px;
                letter-spacing: -2.5px;
            }

            .why-benefits {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .why-benefit {
                min-height: auto;
                padding: 24px 20px;
            }

            .why-stats {
                grid-template-columns: 1fr 1fr;
                margin-top: 60px;
            }

            .why-stat {
                min-height: 150px;
                padding: 25px 20px;
            }

            .why-stat:nth-child(2) {
                border-right: none;
            }

            .why-stat:nth-child(3),
            .why-stat:nth-child(4) {
                border-top: 1px solid #eceef2;
            }

            .why-stat:nth-child(4) {
                border-right: none;
            }

            .stat-number {
                font-size: 37px;
            }

            .stat-number span {
                font-size: 22px;
            }

            .stat-label {
                font-size: 11px;
            }

            .stat-line {
                left: 20px;
                right: 20px;
            }

            .why-bottom {
                display: block;
            }

            .why-bottom-text {
                margin-top: 15px;
                flex-wrap: wrap;
            }

            .why-scroll {
                margin-top: 20px;
            }

        }

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

        @media (max-width: 450px) {

            .why-heading h2 {
                font-size: 38px;
            }

            .why-description {
                font-size: 13px;
            }

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

            .why-stat {
                border-right: none !important;
                border-bottom: 1px solid #eceef2;
            }

            .why-stat:last-child {
                border-bottom: none;
            }

            .why-stat:nth-child(3),
            .why-stat:nth-child(4) {
                border-top: none;
            }

        }


        /* ====================================================================INDUSTRIAL CSS===================================== */


        .industries-section,
.industries-section * {
    box-sizing: border-box;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.industries-section {

    position: relative;

    width: 100%;

    padding: 125px 0 100px;

    background: #07111f;

    color: #ffffff;

    overflow: hidden;

}


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

.industry-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

}


.orb-one {

    width: 500px;
    height: 500px;

    top: -280px;
    right: -220px;

    background:
        radial-gradient(
            circle,
            rgba(239, 152, 30, 0.12) 0%,
            rgba(239, 152, 30, 0.03) 45%,
            transparent 70%
        );

}


.orb-two {

    width: 550px;
    height: 550px;

    bottom: -350px;
    left: -280px;

    background:
        radial-gradient(
            circle,
            rgba(50, 93, 180, 0.13) 0%,
            rgba(50, 93, 180, 0.03) 45%,
            transparent 70%
        );

}


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

.industry-grid-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    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: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


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

.industries-container {

    position: relative;

    z-index: 3;

    width: 92%;

    max-width: 1400px;

    margin: auto;

}


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

.industries-header {

    margin-bottom: 65px;

}


.industries-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 26px;

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.industries-label span {

    width: 42px;

    height: 2px;

    background: #10cbff;

    box-shadow:
        0 0 12px rgba(239,152,30,0.5);

}


/* =========================================================
   HEADING ROW
========================================================= */

.industries-heading-row {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 80px;

    align-items: end;

}


.industries-title h2 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        45px,
        5.5vw,
        76px
    );

    line-height: 0.98;

    letter-spacing: -4px;

    font-weight: 800;

}


.industries-title h2 strong {

    color: #10cbff;

    font-weight: 800;

}


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

.industries-intro {

    max-width: 480px;

}


.industries-intro p {

    margin: 0;

    color: #91a0b2;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   SCROLL HINT
========================================================= */

.industry-scroll-hint {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 28px;

}


.industry-scroll-line {

    position: relative;

    width: 65px;

    height: 2px;

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

    overflow: hidden;

}


.industry-scroll-line span {

    position: absolute;

    top: 0;

    left: -25px;

    width: 25px;

    height: 2px;

    background: #10cbff;

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

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

}


@keyframes industryScroll {

    0% {
        left: -25px;
    }

    50% {
        left: 65px;
    }

    100% {
        left: -25px;
    }

}


.industry-scroll-hint small {

    color: #657386;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


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

.industries-grid {

    display: grid;

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

    gap: 18px;

}


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

.industry-card {

    position: relative;

    min-height: 325px;

    padding: 30px 27px;

    background:
        linear-gradient(
            145deg,
            #0d1a2a,
            #0a1726
        );

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

    border-radius: 22px;

    overflow: hidden;

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

    opacity: 0;

    transform:
        translateY(45px);

    transition:

        opacity 0.7s ease,

        transform
        0.7s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),

        background 0.45s ease,

        border-color 0.45s ease,

        box-shadow 0.45s ease;

}


/* =========================================================
   ACTIVE CARD
========================================================= */

.industry-card.active {

    opacity: 1;

    transform:
        translateY(0);

}


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

.industry-card:hover {

    transform:
        translateY(-10px);

    background:
        linear-gradient(
            145deg,
            #112237,
            #0d1c2e
        );

    border-color:
        rgba(30, 194, 239, 0.55);

    box-shadow:
        0 28px 70px
        rgba(
            0,
            0,
            0,
            0.38
        );

}


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

.industry-number {

    position: absolute;

    top: 20px;

    right: 22px;

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

    font-size: 42px;

    line-height: 1;

    font-weight: 800;

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

}


.industry-card:hover
.industry-number {

    color:
        rgba(
            239,
            152,
            30,
            0.12
        );

    transform:
        translateY(-4px);

}


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

.industry-icon {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 55px;

    border-radius: 16px;

    background:
        rgba(30, 194, 239, 0.1);

    border:
        1px solid
        rgba(30, 232, 239, 0.12);

    color: #10cbff;

    font-size: 20px;

    transition:

        transform 0.45s ease,

        background 0.4s ease,

        color 0.4s ease,

        box-shadow 0.4s ease;

}


.industry-card:hover
.industry-icon {

    transform:
        rotate(-7deg)
        scale(1.08);

    background:
        #10cbff;

    border-color:
        #10cbff;

    color:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(
            239,
            152,
            30,
            0.25
        );

}


/* =========================================================
   TAG
========================================================= */

.industry-tag {

    display: block;

    margin-bottom: 8px;

    color: #64758a;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


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

.industry-content {

    position: relative;

    z-index: 2;

    padding-right: 15px;

}


.industry-content h3 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 750;

}


.industry-content p {

    margin: 0;

    color: #8494a7;

    font-size: 12px;

    line-height: 1.75;

}


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

.industry-arrow {

    position: absolute;

    right: 24px;

    bottom: 25px;

    width: 37px;

    height: 37px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #708094;

    font-size: 11px;

    transition:

        transform 0.4s ease,

        background 0.4s ease,

        color 0.4s ease,

        border-color 0.4s ease;

}


.industry-card:hover
.industry-arrow {

    transform:
        rotate(45deg);

    background:
        #10cbff;

    border-color:
        #10cbff;

    color:
        #ffffff;

}
/* =========================================================
   BOTTOM LINE
========================================================= */

.industry-bottom-line {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #10cbff,
            #40b4d4
        );

    box-shadow:
        0 0 15px
        rgba(
            239,
            152,
            30,
            0.35
        );

    transition:
        width 0.55s ease;

}


.industry-card:hover
.industry-bottom-line {

    width: 100%;

}
/* =========================================================
   TABLET SMALL
========================================================= */

@media (max-width: 800px) {

    .industries-section {

        padding:
            90px 0
            75px;

    }


    .industries-footer {

        grid-template-columns:
            1fr 1fr;

        gap: 28px;

    }


    .industry-footer-intro {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 650px) {

    .industries-section {

        padding:
            75px 0
            65px;

    }


    .industries-container {

        width: 90%;

    }


    .industries-header {

        margin-bottom: 42px;

    }


    .industries-label {

        font-size: 9px;

        letter-spacing: 2.2px;

    }


    .industries-title h2 {

        font-size: 43px;

        letter-spacing: -2.5px;

    }


    .industries-intro p {

        font-size: 13px;

        line-height: 1.8;

    }


    .industries-grid {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .industry-card {

        min-height: 300px;

        padding:
            25px 22px;

    }


    .industry-icon {

        margin-bottom: 52px;

    }


    .industry-content h3 {

        font-size: 17px;

    }


    .industries-footer {

        grid-template-columns:
            1fr 1fr;

        gap: 25px;

    }


    .industry-footer-intro {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 430px) {

    .industries-title h2 {

        font-size: 37px;

        letter-spacing: -2px;

    }


    .industry-card {

        min-height: 285px;

    }


    .industry-number {

        font-size: 36px;

    }


    .industry-stat strong {

        font-size: 22px;

    }


    .industry-stat strong span {

        font-size: 14px;

    }

}
/* =========================================================PARTNERSHIP CSS====================================================== */


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

.partnership-section {

    position: relative;

    width: 100%;

    padding: 105px 0 90px;

    background: #ffffff;

    overflow: hidden;

    color: #111936;

}


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

.partnership-container {

    width: 92%;

    max-width: 1400px;

    margin: auto;

}


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

.partnership-header {

    margin-bottom: 60px;

}


.partnership-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 25px;

    color: #10cbff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.partnership-label span {

    width: 42px;

    height: 2px;

    background: #10cbff;

}


.partnership-heading-row {

    display: grid;

    grid-template-columns:
        1fr 0.7fr;

    gap: 80px;

    align-items: end;

}


.partnership-heading-row h2 {

    margin: 0;

    color: #111936;

    font-size: clamp(
        48px,
        5.5vw,
        75px
    );

    line-height: 0.95;

    letter-spacing: -4px;

    font-weight: 800;

}


.partnership-heading-row h2 span {

    color: #10cbff;

}


.partnership-heading-row p {

    max-width: 500px;

    margin: 0;

    color: #747c8f;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   MARQUEE OUTER
========================================================= */

.partner-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 10px 0;

}


/* =========================================================
   SIDE FADE
========================================================= */

.partner-marquee::before,
.partner-marquee::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 150px;

    z-index: 3;

    pointer-events: none;

}


.partner-marquee::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            rgba(255,255,255,0)
        );

}


.partner-marquee::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            #ffffff,
            rgba(255,255,255,0)
        );

}


/* =========================================================
   TRACK
========================================================= */

.partner-track {

    display: flex;

    align-items: center;

    width: max-content;

    gap: 25px;

    animation:
        partnershipScroll
        28s
        linear
        infinite;

}


/* =========================================================
   CONTINUOUS SCROLL
========================================================= */

@keyframes partnershipScroll {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(
                calc(-50% - 12.5px)
            );

    }

}


/* =========================================================
   PARTNER CARD
========================================================= */

.partner-logo {

    width: 205px;

    height: 120px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background: #ffffff;

    border:
        1px solid
        #e8eaf0;

    border-radius: 18px;

    box-shadow:
        0 8px 28px
        rgba(
            17,
            25,
            54,
            0.045
        );

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

}


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

.partner-logo img {

    display: block;

    width: 100%;

    max-width: 145px;

    max-height: 65px;

    object-fit: contain;

    filter:
        grayscale(100%);

    opacity: 0.62;

    transition:
        filter 0.4s ease,
        opacity 0.4s ease,
        transform 0.4s ease;

}


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

.partner-logo:hover {

    transform:
        translateY(-6px);

    border-color:
        #10cbff72;

    box-shadow:
        0 18px 40px
        rgba(
            17,
            25,
            54,
            0.10
        );

}


.partner-logo:hover img {

    filter:
        grayscale(0%);

    opacity: 1;

    transform:
        scale(1.05);

}


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

.partnership-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 55px;

}


.partnership-bottom span {

    color: #a0a6b3;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.partnership-line {

    width: 70px;

    height: 1px;

    background: #e5e7ec;

}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.partner-marquee:hover
.partner-track {

    animation-play-state:
        paused;

}


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

@media (max-width: 900px) {

    .partnership-heading-row {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .partnership-heading-row p {

        max-width: 650px;

    }

}


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

@media (max-width: 600px) {

    .partnership-section {

        padding:
            75px 0
            65px;

    }

    .partnership-container {

        width: 90%;

    }

    .partnership-header {

        margin-bottom: 40px;

    }

    .partnership-heading-row h2 {

        font-size: 43px;

        letter-spacing: -2.5px;

    }

    .partnership-heading-row p {

        font-size: 16px;

        line-height: 1.8;

    }

    .partner-logo {

        width: 170px;

        height: 105px;

    }

    .partner-logo img {

        max-width: 120px;

        max-height: 55px;

    }

    .partner-track {

        gap: 15px;

        animation-duration:
            22s;

    }

    .partner-marquee::before,
    .partner-marquee::after {

        width: 70px;

    }

    .partnership-bottom {

        margin-top: 40px;

    }

}


/* ================================================================FOOTER SECTION START======================================= */


        .site-footer {

            position: relative;

            width: 100%;

            background: #07111f;

            color: #ffffff;

            overflow: hidden;

        }


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

        .footer-glow-one {

            position: absolute;

            width: 500px;
            height: 500px;

            top: -300px;
            left: -180px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(16, 203, 255, 0.13),
                    transparent 70%
                );

            filter: blur(10px);

            pointer-events: none;

        }


        .footer-glow-two {

            position: absolute;

            width: 450px;
            height: 450px;

            right: -200px;
            bottom: -250px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(16, 203, 255, 0.09),
                    transparent 70%
                );

            filter: blur(15px);

            pointer-events: none;

        }


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

        .footer-container {

            position: relative;

            z-index: 2;

            width: 92%;

            max-width: 1400px;

            margin: auto;

        }


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

        .footer-cta {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 60px;

            padding:
                95px 0 75px;

        }


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

        .footer-mini-label {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 20px;

            color: #10cbff;

            font-size: 16px;

            font-weight: 800;

            letter-spacing: 3px;

        }


        .footer-mini-label::before {

            content: "";

            width: 35px;

            height: 2px;

            background: #10cbff;

        }


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

        .footer-cta-content h2 {

            max-width: 800px;

            color: #ffffff;

            font-size:
                clamp(
                    40px,
                    5.2vw,
                    68px
                );

            line-height: 1;

            letter-spacing: -3.5px;

            font-weight: 800;

        }


        .footer-cta-content h2 span {

            color: #10cbff;

        }


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

        .footer-cta-content p {

            max-width: 610px;

            margin-top: 25px;

            color: #8191a5;

            font-size: 16px;

            line-height: 1.9;

        }


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

        .footer-cta-button {

            position: relative;

            display: inline-flex;

            align-items: center;

            gap: 15px;

            flex-shrink: 0;

            padding:
                7px 8px 7px 24px;

            color: #ffffff;

            background: #10cbff;

            border: none;

            border-radius: 50px;

            text-decoration: none;

            font-size: 16px;

            font-weight: 700;

            overflow: hidden;

            box-shadow:
                0 12px 35px
                rgba(
                    16,
                    203,
                    255,
                    0.16
                );

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

        }


        .footer-cta-button::before {

            content: "";

            position: absolute;

            top: 0;
            left: -120%;

            width: 80%;
            height: 100%;

            background:
                linear-gradient(
                    100deg,
                    transparent,
                    rgba(
                        255,
                        255,
                        255,
                        0.35
                    ),
                    transparent
                );

            transform: skewX(-20deg);

            transition:
                left 0.7s ease;

        }


        .footer-cta-button:hover::before {

            left: 140%;

        }


        .footer-cta-button:hover {

            transform:
                translateY(-5px);

            box-shadow:
                0 20px 45px
                rgba(
                    16,
                    203,
                    255,
                    0.28
                );

        }


        .footer-cta-button i {

            width: 38px;
            height: 38px;

            display: flex;

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

            border-radius: 50%;

            color: #07111f;

            background: #ffffff;

            font-size: 16px;

            transition:
                transform 0.4s ease;

        }


        .footer-cta-button:hover i {

            transform:
                rotate(45deg);

        }


        /* =====================================================
           DIVIDER
        ====================================================== */

        .footer-divider {

            width: 100%;

            height: 1px;

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

        }


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

        .footer-main {

            display: grid;

            grid-template-columns:
                1.45fr
                0.75fr
                1fr
                1fr;

            gap: 65px;

            padding:
                75px 0;

        }


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

        .footer-brand {

            max-width: 360px;

        }


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

        .footer-logo {

            display: inline-block;

            margin-bottom: 25px;

        }


        .footer-logo img {

            display: block;

            width: 155px;

            height: auto;

            max-height: 60px;

            object-fit: contain;

        }


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

        .footer-brand-description {

            color: #7d8da1;

            font-size: 16px;

            line-height: 1.9;

        }


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

        .footer-socials {

            display: flex;

            align-items: center;

            gap: 9px;

            margin-top: 28px;

        }


        .footer-socials a {

            width: 38px;
            height: 38px;

            display: flex;

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

            color: #7e8ea2;

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

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

            border-radius: 50%;

            text-decoration: none;

            font-size: 16px;

            transition:
                all 0.35s ease;

        }


        .footer-socials a:hover {

            color: #07111f;

            background: #10cbff;

            border-color: #10cbff;

            transform:
                translateY(-5px);

            box-shadow:
                0 8px 20px
                rgba(
                    16,
                    203,
                    255,
                    0.20
                );

        }


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

        .footer-column h3 {

            margin-bottom: 25px;

            color: #ffffff;

            font-size: 13px;

            font-weight: 700;

        }


        .footer-column ul {

            margin: 0;
            padding: 0;

            list-style: none;

        }


        .footer-column li {

            margin-bottom: 14px;

        }


        .footer-column li a {

            position: relative;

            color: #7e8ea2;

            text-decoration: none;

            font-size: 16px;

            transition:
                color 0.3s ease,
                padding-left 0.3s ease;

        }


        .footer-column li a::before {

            content: "";

            position: absolute;

            left: -14px;

            top: 50%;

            width: 0;

            height: 1px;

            background: #10cbff;

            transition:
                width 0.3s ease;

        }


        .footer-column li a:hover {

            color: #ffffff;

            padding-left: 9px;

        }


        .footer-column li a:hover::before {

            width: 7px;

        }


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

        .footer-contact-item {

            display: flex;

            align-items: flex-start;

            gap: 13px;

            margin-bottom: 21px;

        }


        .contact-icon {

            width: 34px;
            height: 34px;

            flex-shrink: 0;

            display: flex;

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

            color: #10cbff;

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

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

            border-radius: 9px;

            font-size: 11px;

        }


        .footer-contact-item small {

            display: block;

            margin-bottom: 5px;

            color: #526277;

            font-size: 16px;

            font-weight: 800;

            letter-spacing: 1.5px;

            text-transform: uppercase;

        }


        .footer-contact-item p {

            margin: 0;

            color: #8291a4;

            font-size: 16px;

            line-height: 1.7;

        }


        .footer-contact-item a {

            color: #8291a4;

            font-size: 16px;

            text-decoration: none;

            transition:
                color 0.3s ease;

        }


        .footer-contact-item a:hover {

            color: #10cbff;

        }


        /* =====================================================
           NEWSLETTER
        ====================================================== */

        .footer-newsletter {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 40px;

            padding:
                28px 0;

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

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

        }


        .newsletter-title {

            display: block;

            margin-bottom: 7px;

            color: #10cbff;

            font-size: 16px;

            font-weight: 800;

            letter-spacing: 2px;

        }


        .newsletter-description {

            margin: 0;

            color: #728297;

            font-size: 10px;

        }


        /* =====================================================
           NEWSLETTER FORM
        ====================================================== */

        .footer-form {

            display: flex;

            width: 400px;

            max-width: 100%;

            padding: 5px;

            background: #0b1929;

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

            border-radius: 50px;

        }


        .footer-form input {

            flex: 1;

            min-width: 0;

            padding:
                11px 16px;

            color: #ffffff;

            background: transparent;

            border: none;

            outline: none;

            font-family: inherit;

            font-size: 10px;

        }


        .footer-form input::placeholder {

            color: #526277;

        }


        .footer-form button {

            display: flex;

            align-items: center;

            gap: 8px;

            padding:
                10px 17px;

            color: #07111f;

            background: #10cbff;

            border: none;

            border-radius: 50px;

            cursor: pointer;

            font-family: inherit;

            font-size: 10px;

            font-weight: 800;

            transition:
                all 0.3s ease;

        }


        .footer-form button:hover {

            background: #ffffff;

            transform:
                translateX(2px);

        }


        .footer-form button i {

            font-size: 16px;

        }


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

        .footer-bottom {

            position: relative;

            min-height: 85px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 30px;

        }


        .footer-copyright {

            margin: 0;

            color: #526277;

            font-size: 16px;

        }


        .footer-legal {

            display: flex;

            align-items: center;

            gap: 15px;

        }


        .footer-legal a {

            color: #65758a;

            font-size: 16px;

            text-decoration: none;

            transition:
                color 0.3s ease;

        }


        .footer-legal a:hover {

            color: #10cbff;

        }


        .footer-legal span {

            width: 3px;
            height: 3px;

            border-radius: 50%;

            background: #3c4d61;

        }


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

        .footer-top-button {

            position: absolute;

            right: 0;

            bottom: 20px;

            width: 40px;
            height: 40px;

            display: flex;

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

            color: #10cbff;

            background: #0b1929;

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

            border-radius: 50%;

            cursor: pointer;

            transition:
                all 0.35s ease;

        }


        .footer-top-button:hover {

            color: #07111f;

            background: #10cbff;

            border-color: #10cbff;

            transform:
                translateY(-5px);

            box-shadow:
                0 10px 25px
                rgba(
                    16,
                    203,
                    255,
                    0.20
                );

        }


        /* =====================================================
           ANIMATION
        ====================================================== */

        .footer-reveal {

            opacity: 0;

            transform:
                translateY(30px);

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

        }


        .footer-reveal.active {

            opacity: 1;

            transform:
                translateY(0);

        }


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

        @media (max-width: 1100px) {

            .footer-main {

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

                gap: 50px;

            }


            .footer-brand {

                grid-column:
                    1 / -1;

                max-width: 600px;

            }

        }


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

        @media (max-width: 800px) {

            .footer-cta {

                display: block;

                padding:
                    75px 0 60px;

            }


            .footer-cta-button {

                margin-top: 30px;

            }


            .footer-main {

                grid-template-columns:
                    1fr 1fr;

                gap: 45px;

            }


            .footer-brand {

                grid-column:
                    1 / -1;

            }


            .footer-newsletter {

                display: block;

            }


            .footer-form {

                margin-top: 20px;

            }

        }


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

        @media (max-width: 600px) {

            .footer-container {

                width: 90%;

            }


            .footer-cta {

                padding:
                    65px 0 50px;

            }


            .footer-cta-content h2 {

                font-size: 40px;

                letter-spacing: -2.5px;

            }


            .footer-cta-content p {

                font-size: 12px;

            }


            .footer-main {

                grid-template-columns: 1fr;

                gap: 38px;

                padding:
                    55px 0;

            }


            .footer-brand {

                grid-column: auto;

            }


            .footer-newsletter {

                padding:
                    25px 0;

            }


            .footer-form {

                width: 100%;

            }


            .footer-bottom {

                display: block;

                min-height: auto;

                padding:
                    25px 0 85px;

            }


            .footer-legal {

                flex-wrap: wrap;

                margin-top: 15px;

                gap: 10px;

            }


            .footer-top-button {

                right: 0;

                bottom: 20px;

            }

        }


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

        @media (max-width: 400px) {

            .footer-cta-content h2 {

                font-size: 34px;

            }


            .footer-cta-button {

                font-size: 10px;

            }


            .footer-form button {

                padding:
                    10px 12px;

            }

        }


        /* =====================================================================ABOUT PAGE ========================================= */
        
        
        /* =========================================================
          ABOUT US INNER PAGE BANNER
        ========================================================= */

        .inner-banner {
            position: relative;
            min-height: 330px;

            display: flex;
            align-items: center;

            background: #07111f;

            overflow: hidden;
            padding: 80px 0 80px;
        }


        /* Background glow */

        .inner-banner::before {
            content: "";

            position: absolute;

            width: 500px;
            height: 500px;

            top: -300px;
            right: -120px;

            border-radius: 50%;

            background: rgba(101, 218, 250, 0.059);

            filter: blur(20px);
        }


        .inner-banner::after {
            content: "";

            position: absolute;

            width: 350px;
            height: 350px;

            bottom: -250px;
            left: 8%;

            border-radius: 50%;

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

            filter: blur(20px);
        }


        /* Grid */

        .banner-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;

            mask-image: linear-gradient(
                to right,
                transparent,
                black,
                transparent
            );
        }


        .banner-content {
            position: relative;
            z-index: 2;
            padding-top: 60px;
            padding: 70px 0;
        }


        .banner-small {
            display: flex;
            align-items: center;
            gap: 12px;

            margin-bottom: 18px;

            color: #10cbff;

            font-size: 12px;
            font-weight: 700;

            letter-spacing: 2.5px;
            text-transform: uppercase;
        }


        .banner-small::before {
            content: "";

            width: 35px;
            height: 2px;

            background: #10cbff;
        }


        .banner-content h1 {
            color: #ffffff;

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

            line-height: 1;

            font-weight: 800;

            letter-spacing: -3px;

            margin-bottom: 20px;
        }


        .banner-content h1 span {
            color: #10cbff;
        }

        .banner-content p{
            color: #fff;
            line-height: 1.8;
            width: 80%;
        }


        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 20px;
            line-height: 4;

            color: #9ba7b7;

            font-size: 13px;
        }


        .breadcrumb a {
            transition: 0.3s;
            color: #fff;
        }


        .breadcrumb a:hover {
            color: #10cbff;
        }


        .breadcrumb i {
            font-size: 9px;
            color: #667383;
        }


        .breadcrumb strong {
            color: #ffffff;
            font-weight: 500;
        }



        .banner-line::after {
            content: "";

            position: absolute;

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: #10cbff;

            right: 0;
            top: -4px;

            box-shadow:
                0 0 15px #10cbff,
                0 0 30px rgba(16,203,255,0.5);
        }


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

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

.about-intro {
    padding: 110px 0;
    background: #ffffff;
}


.about-intro .container {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}


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


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

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: #10cbff;

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

    letter-spacing: 2px;
    text-transform: uppercase;
}


.section-tag::before {
    content: "";

    width: 35px;
    height: 2px;

    background: #10cbff;
}


.about-content h2 {
    margin-bottom: 25px;

    color: #07111f;

    font-size: clamp(38px, 4.5vw, 60px);
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -2px;
}


.about-content h2 span {
    color: #10cbff;
}


.about-content p {
    margin-bottom: 18px;

    color: #697586;

    font-size: 15px;
    line-height: 1.9;
}


/* =====================================================
   NORMAL IMAGE
===================================================== */

.about-image {
    width: 100%;
    height: 500px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(7, 17, 31, 0.12);
}


.about-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.about-image:hover img {
    transform: scale(1.05);
}


/* =====================================================
   SCROLL ANIMATION
===================================================== */

.reveal-left,
.reveal-right {
    opacity: 0;

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


.reveal-left {
    transform: translateX(-50px);
}


.reveal-right {
    transform: translateX(50px);
}


.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}


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

@media (max-width: 1000px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 600px) {

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


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


    .about-image {
        height: 350px;
        border-radius: 15px;
    }

}

        /* =========================================================
           MISSION VISION
        ========================================================= */

        .mission-section {
            padding: 100px 0;

            background: #f7fafc;
        }


        .center-heading {
            text-align: center;

            max-width: 700px;

            margin: 0 auto 60px;
        }


        .center-heading h2 {
            font-size: clamp(35px, 4vw, 52px);

            letter-spacing: -2px;

            margin-bottom: 18px;
        }


        .center-heading p {
            color: #707a89;

            font-size: 14px;

            line-height: 1.8;
        }


        .mission-grid {
            display: grid;

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

            gap: 25px;
        }


        .mission-card {
            position: relative;

            padding: 45px;

            background: #ffffff;

            border: 1px solid #e8edf1;

            border-radius: 24px;

            overflow: hidden;

            transition: 0.4s ease;
        }


        .mission-card:hover {
            transform: translateY(-8px);

            border-color: rgba(16,203,255,0.4);

            box-shadow:
                0 25px 60px rgba(7,17,31,0.08);
        }


        .mission-number {
            position: absolute;

            right: 30px;
            top: 20px;

            font-size: 70px;

            font-weight: 800;

            color: #f2f5f7;
        }


        .mission-icon {
            width: 55px;
            height: 55px;

            border-radius: 15px;

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

            background: rgba(16,203,255,0.1);

            color: #10cbff;

            font-size: 20px;

            margin-bottom: 25px;
        }


        .mission-card h3 {
            font-size: 23px;

            margin-bottom: 15px;

            position: relative;
        }


        .mission-card p {
            color: #707a89;

            font-size: 14px;

            line-height: 1.8;

            position: relative;
        }


        /* =========================================================
           WHY CHOOSE US
        ========================================================= */

        .why-section {
            padding: 110px 0;

            background: #ffffff;
        }


        .why-grid {
            display: grid;

            grid-template-columns: 0.8fr 1.2fr;

            gap: 80px;

            align-items: center;
        }


        .why-title h2 {
            font-size: clamp(36px, 4vw, 55px);

            line-height: 1.05;

            letter-spacing: -2.5px;

            margin-bottom: 25px;
        }


        .why-title h2 span {
            color: #10cbff;
        }


        .why-title p {
            color: #707a89;

            font-size: 14px;

            line-height: 1.9;

            max-width: 500px;
        }


        .why-list {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 18px;
        }


        .why-item {
            padding: 28px;

            border: 1px solid #e8edf1;

            border-radius: 18px;

            background: #f0f0f0;

            transition: 0.4s ease;
        }


        .why-item:hover {
            transform: translateY(-6px);

            box-shadow:
                0 20px 45px rgba(7,17,31,0.08);

            border-color: rgba(16,203,255,0.4);
        }


        .why-item-icon {
            width: 45px;
            height: 45px;

            border-radius: 12px;

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

            color: #10cbff;

            background: rgba(16,203,255,0.09);

            margin-bottom: 18px;
        }


        .why-item h3 {
            font-size: 16px;

            margin-bottom: 9px;
        }


        .why-item p {
            color: #7b8492;

            font-size: 12px;

            line-height: 1.7;
        }


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

        .stats-section {
            padding: 80px 0;

            background: #07111f;
        }


        .stats-grid {
            display: grid;

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

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

            border-radius: 24px;

            overflow: hidden;
        }


        .stat-box {
            text-align: center;

            padding: 45px 20px;

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


        .stat-box:last-child {
            border-right: none;
        }


        .counter {
            color: #ffffff;

            font-size: 48px;

            font-weight: 800;

            letter-spacing: -2px;
        }


        .counter span {
            color: #10cbff;
        }


        .stat-box p {
            color: #8c98a8;

            font-size: 12px;

            margin-top: 10px;
        }


        /* =========================================================
           OUR APPROACH
        ========================================================= */

        .approach-section {
            padding: 110px 0;

            background: #ffffff;
        }


        .approach-grid {
            display: grid;

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

            gap: 20px;
        }


        .approach-card {
            position: relative;

            padding: 32px 25px;

            border-radius: 20px;

            background: #f8fafc;

            border: 1px solid #e9eef2;

            transition: 0.4s ease;
        }


        .approach-card:hover {
            background: #07111f;

            transform: translateY(-8px);
        }


        .approach-number {
            color: #10cbff;

            font-size: 13px;

            font-weight: 800;

            letter-spacing: 2px;

            margin-bottom: 30px;
        }


        .approach-card h3 {
            font-size: 18px;

            margin-bottom: 12px;

            transition: 0.3s;
        }


        .approach-card p {
            color: #737d8b;

            font-size: 12px;

            line-height: 1.7;

            transition: 0.3s;
        }


        .approach-card:hover h3 {
            color: #ffffff;
        }


        .approach-card:hover p {
            color: #9da9b7;
        }


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

        .about-cta {
            padding: 90px 0;
        }


        .cta-box {
            position: relative;

            padding: 70px;

            border-radius: 28px;

            overflow: hidden;

            background: #07111f;

            text-align: center;
        }


        .cta-box::before {
            content: "";

            position: absolute;

            width: 400px;
            height: 400px;

            border-radius: 50%;

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

            filter: blur(20px);

            top: -250px;
            left: 50%;

            transform: translateX(-50%);
        }


        .cta-box > * {
            position: relative;
            z-index: 2;
        }


        .cta-box h2 {
            color: #ffffff;

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

            letter-spacing: -2px;

            margin-bottom: 15px;
        }


        .cta-box h2 span {
            color: #10cbff;
        }


        .cta-box p {
            color: #9aa6b5;

            max-width: 600px;

            margin: 0 auto 30px;

            line-height: 1.8;

            font-size: 14px;
        }


        .cta-button {
            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 14px 25px;

            border-radius: 8px;

            background: #10cbff;

            color: #07111f;

            font-size: 13px;

            font-weight: 700;

            transition: 0.3s;
        }


        .cta-button:hover {
            transform: translateY(-3px);

            box-shadow:
                0 12px 30px rgba(16,203,255,0.25);
        }


        /* =========================================================
           REVEAL ANIMATION
        ========================================================= */

        .reveal {
            opacity: 0;

            transform: translateY(35px);

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


        .reveal.show {
            opacity: 1;

            transform: translateY(0);
        }


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

        @media (max-width: 1000px) {

            .about-grid,
            .why-grid {
                grid-template-columns: 1fr;

                gap: 50px;
            }


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


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


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


            .stat-box:nth-child(2) {
                border-right: none;
            }


            .stat-box:nth-child(3),
            .stat-box:nth-child(4) {
                border-top: 1px solid rgba(255,255,255,0.1);
            }


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

        }


        @media (max-width: 650px) {

            .inner-banner {
                min-height: 280px;
            }


            .banner-content {
                padding: 55px 0;
            }


            .banner-content h1 {
                font-size: 43px;

                letter-spacing: -2px;
            }


            .about-intro,
            .why-section,
            .approach-section {
                padding: 75px 0;
            }


            .visual-box {
                width: 100%;
            }


            .mission-card {
                padding: 30px;
            }


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


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


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


            .stat-box {
                border-right: none;

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


            .stat-box:last-child {
                border-bottom: none;
            }


            .stat-box:nth-child(3),
            .stat-box:nth-child(4) {
                border-top: none;
            }


            .cta-box {
                padding: 45px 25px;
            }


            .banner-line {
                display: none;
            }

        }




/* ==========================================
   MAIN SECTION
========================================== */

.overview-section {
    width: 100%;
    padding: 110px 20px;

    background: #f7fafc;
}

.overview-container {

    max-width: 1220px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 85px;
}


/* ==========================================
   LEFT IMAGE
========================================== */

.overview-image {

    position: relative;

    width: 100%;

    height: 590px;

    overflow: hidden;

    border-radius: 6px;

    box-shadow:
        0 25px 60px rgba(20, 45, 60, 0.14);
}

.overview-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s ease;
}

.overview-image:hover img {

    transform: scale(1.05);
}


/* Image Gradient */

.image-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12, 39, 53, 0.02) 30%,
            rgba(12, 39, 53, 0.55) 100%
        );
}


/* ==========================================
   IMAGE BADGE
========================================== */

.overview-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 17px 23px;

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

    border-left: 4px solid #2bbdd9;

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

.badge-number {

    font-size: 32px;

    font-weight: 800;

    color: #10cbff;

    line-height: 1;
}

.overview-badge strong {

    display: block;

    font-size: 14px;

    font-weight: 700;

    color: #17232d;
}

.overview-badge small {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: #71808a;
}


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

.overview-content {

    width: 100%;

    max-width: 570px;
}


/* Section Label */

.section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #10cbff;
}

.section-label span {

    width: 35px;

    height: 2px;

    background: #2bbdd9;
}


/* ==========================================
   MAIN HEADING
========================================== */

.overview-content h2 {

    margin: 0 0 23px;

    font-size: 45px;

    line-height: 1.16;

    font-weight: 800;

    letter-spacing: -1px;

    color: #17232d;
}

.overview-content h2 span {

    color: #10cbff;
}


/* ==========================================
   PARAGRAPHS
========================================== */

.main-description {

    margin: 0 0 15px;

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;

    color: #626364;
}

.secondary-description {

    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color: #74838c;
}


/* ==========================================
   SOLUTION FEATURES
========================================== */

.solution-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #dfe8ec;
}


/* Feature */

.solution-feature {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e5edf1;

    border-radius: 7px;

    transition:
        all 0.3s ease;
}

.solution-feature:hover {

    transform: translateY(-5px);

    border-color: #c9e9ef;

    box-shadow:
        0 12px 30px rgba(30, 75, 90, 0.08);
}


/* Feature Icon */

.feature-icon {

    flex-shrink: 0;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #e8f8fb;

    color: #10cbff;

    font-size: 17px;
}

.digital-icon {

    background: #edf3f8;

    color: #10cbff;
}


/* Feature Text */

.feature-text h4 {

    margin: 2px 0 6px;

    font-size: 15px;

    font-weight: 750;

    color: #17232d;
}

.feature-text p {

    margin: 0;

    font-size: 12.5px;

    line-height: 1.55;

    color: #7a8991;
}


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

.overview-bottom {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 30px;
}


/* Button */

.overview-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 22px;

    background: #10cbff;

    color: #ffffff;

    text-decoration: none;

    border-radius: 4px;

    font-size: 13px;

    font-weight: 700;

    transition:
        all 0.3s ease;
}

.overview-button i {

    transition:
        transform 0.3s ease;
}

.overview-button:hover {

    background: #17232d;

    transform: translateY(-3px);
}

.overview-button:hover i {

    transform: translateX(6px);
}


/* Trusted Text */

.trusted-text {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;

    font-weight: 600;

    color: #87949b;
}

.trusted-text i {

    font-size: 14px;

    color: #2bbdd9;
}


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

@media (max-width: 1000px) {

    .overview-container {

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .overview-image {

        height: 500px;
    }

    .overview-content {

        max-width: 100%;
    }

}


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

@media (max-width: 650px) {

    .overview-section {

        padding: 65px 17px;
    }

    .overview-image {

        height: 390px;
    }

    .overview-content h2 {

        font-size: 32px;

        letter-spacing: -0.5px;
    }

    .main-description {

        font-size: 15px;
    }

    .secondary-description {

        font-size: 14px;
    }

    .solution-features {

        grid-template-columns: 1fr;
    }

    .overview-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .overview-button {

        width: 100%;

        justify-content: center;
    }

}

/* ==========================================
   HOW WE WORK
========================================== */

.how-work-section {

    position: relative;

    padding: 110px 20px;

    background: #17232d;

    overflow: hidden;

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


/* Background Pattern */

.how-work-section::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    top: -300px;

    right: -200px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 80px rgba(255,255,255,0.015),
        0 0 0 160px rgba(255,255,255,0.012);
}

.how-work-section::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    bottom: -250px;

    left: -200px;

    border-radius: 50%;

    border: 1px solid rgba(43,189,217,0.08);
}


/* Container */

.how-work-container {

    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: auto;
}


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

.how-work-header {

    max-width: 720px;

    margin: 0 auto 75px;

    text-align: center;
}


/* Label */

.how-work-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 18px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #2bbdd9;
}

.how-work-label span {

    width: 30px;

    height: 1px;

    background: #2bbdd9;
}


/* Heading */

.how-work-header h2 {

    margin: 0 0 18px;

    font-size: 50px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

    color: #ffffff;
}

.how-work-header h2 span {

    color: #2bbdd9;
}


/* Description */

.how-work-header p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color: #aebbc2;
}


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

.process-wrapper {

    position: relative;

    display: grid;

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

    gap: 20px;
}


/* Connecting Line */

.process-line {

    position: absolute;

    top: 42px;

    left: 8%;

    right: 8%;

    height: 1px;

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

    opacity: 0.5;
}


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

.process-item {

    position: relative;

    text-align: center;

    z-index: 2;
}


/* Number */

.process-number {

    margin-bottom: 12px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #60727c;
}


/* Icon */

.process-icon {

    position: relative;

    width: 84px;

    height: 84px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #17232d;

    border: 1px solid #3b4d56;

    color: #2bbdd9;

    font-size: 25px;

    box-shadow:
        0 0 0 10px #17232d;

    transition:
        all 0.4s ease;
}


/* Icon Hover */

.process-item:hover .process-icon {

    background: #2bbdd9;

    border-color: #2bbdd9;

    color: #17232d;

    transform:
        translateY(-8px)
        scale(1.08);

    box-shadow:
        0 0 0 10px #17232d,
        0 12px 35px rgba(43,189,217,0.3);
}


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

.process-card {

    margin-top: 32px;

    padding: 27px 20px;

    min-height: 205px;

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

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

    border-radius: 8px;

    transition:
        all 0.4s ease;
}

.process-item:hover .process-card {

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

    border-color:
        rgba(43,189,217,0.35);

    transform:
        translateY(-5px);
}


/* Step */

.process-card span {

    display: block;

    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #2bbdd9;
}


/* Title */

.process-card h3 {

    margin: 0 0 12px;

    font-size: 21px;

    font-weight: 700;

    color: #ffffff;
}


/* Text */

.process-card p {

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #91a2ab;
}


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

.process-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 65px;
}

.footer-line {

    width: 100px;

    height: 1px;

    background: #344751;
}

.process-footer p {

    margin: 0;

    font-size: 12px;

    font-weight: 600;

    color: #899aa3;

    white-space: nowrap;
}

.process-footer i {

    margin-right: 6px;

    color: #2bbdd9;
}


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

@media (max-width: 1050px) {

    .process-wrapper {

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

        row-gap: 45px;
    }

    .process-line {

        display: none;
    }

}


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

@media (max-width: 650px) {

    .how-work-section {

        padding: 70px 17px;
    }

    .how-work-header {

        margin-bottom: 50px;
    }

    .how-work-header h2 {

        font-size: 36px;
    }

    .how-work-header p {

        font-size: 14px;
    }

    .process-wrapper {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .process-card {

        min-height: auto;

        padding: 25px;
    }

    .process-footer {

        margin-top: 45px;
    }

    .footer-line {

        display: none;
    }

    .process-footer p {

        white-space: normal;

        text-align: center;

        line-height: 1.6;
    }

}


/* ==========================================
   RELATED SOLUTIONS
========================================== */

.related-solutions {

    position: relative;

    padding: 80px 20px;

    background: #f6f9fb;

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

    overflow: hidden;
}


/* Background Decorative Circle */

.related-solutions::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    right: -180px;

    border-radius: 50%;

    border: 1px solid #e3edf1;
}


/* Container */

.related-container {

    position: relative;

    z-index: 2;

    max-width: 1220px;

    margin: auto;
}


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

.related-header {

    max-width: 730px;

    margin: 0 auto 65px;

    text-align: center;
}


/* Label */

.related-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 17px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: #10cbff;
}

.related-label span {

    width: 30px;

    height: 2px;

    background: #2bbdd9;
}


/* Heading */

.related-header h2 {

    margin: 0 0 18px;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

    color: #17232d;
}

.related-header h2 span {

    color: #10cbff;
}


/* Description */

.related-header p {

    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color: #74838c;
}


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

.related-grid {

    display: grid;

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

    gap: 22px;
}


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

.related-card {

    position: relative;

    background: #ffffff;

    border: 1px solid #e4ebee;

    border-radius: 8px;

    overflow: hidden;

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

.related-card:hover {

    transform: translateY(-9px);

    border-color: #c8e8ee;

    box-shadow:
        0 25px 50px rgba(25,65,80,0.12);
}


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

.related-image {

    position: relative;

    height: 220px;

    overflow: hidden;
}

.related-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.7s ease;
}

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

    transform: scale(1.08);
}


/* Overlay */

.related-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(15,40,53,0.05),
            rgba(15,40,53,0.65)
        );
}


/* Number */

.solution-number {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #10cbff;

    font-size: 11px;

    font-weight: 800;
}


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

.related-content {

    position: relative;

    padding: 25px 23px 27px;
}


/* Icon */

.related-icon {

    position: absolute;

    top: -24px;

    left: 23px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #10cbff;

    color: #ffffff;

    font-size: 18px;

    box-shadow:
        0 8px 20px rgba(47,137,173,0.25);

    transition:
        all 0.35s ease;
}

.related-card:hover .related-icon {

    background: #2bbdd9;

    color: #17232d;

    transform: rotate(-5deg);
}


/* Title */

.related-title {

    padding-top: 17px;
}

.related-title span {

    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #2bbdd9;
}

.related-title h3 {

    margin: 0;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 750;

    color: #17232d;
}


/* Paragraph */

.related-content p {

    margin: 14px 0 20px;

    font-size: 13px;

    line-height: 1.7;

    color: #77868e;
}


/* Link */

.related-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 750;

    color: #10cbff;

    transition:
        color 0.3s ease;
}

.related-link i {

    transition:
        transform 0.3s ease;
}

.related-link:hover {

    color: #17232d;
}

.related-link:hover i {

    transform: translateX(6px);
}


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

.related-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;

    padding: 30px 35px;

    background: #17232d;

    border-radius: 8px;
}


.related-bottom-text span {

    display: block;

    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #2bbdd9;
}


.related-bottom-text h3 {

    margin: 0;

    font-size: 23px;

    font-weight: 700;

    color: #ffffff;
}


/* CTA Button */

.related-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 14px 23px;

    background: #2bbdd9;

    color: #17232d;

    text-decoration: none;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        all 0.3s ease;
}

.related-button:hover {

    background: #ffffff;

    transform: translateY(-3px);
}

.related-button i {

    transition:
        transform 0.3s ease;
}

.related-button:hover i {

    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .related-grid {

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

}


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

@media (max-width: 650px) {

    .related-solutions {

        padding: 70px 17px;
    }

    .related-header {

        margin-bottom: 45px;
    }

    .related-header h2 {

        font-size: 35px;
    }

    .related-header p {

        font-size: 14px;
    }

    .related-grid {

        grid-template-columns: 1fr;
    }

    .related-image {

        height: 230px;
    }

    .related-bottom {

        align-items: flex-start;

        flex-direction: column;

        padding: 28px 23px;
    }

    .related-button {

        width: 100%;

        justify-content: center;
    }

}


/* ========================================================================services page========================================= */


/* =========================================================
   OVERVIEW
========================================================= */

.overview-section{
    padding:110px 0;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.overview-container{
    width:90%;
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:48% 52%;
    align-items:center;
    gap:70px;
}


/* IMAGE */

.overview-image{
    position:relative;
    height:610px;
    border-radius:25px;
    overflow:hidden;
    opacity:0;
    transform:translateX(-60px);
    transition:1s ease;
}

.overview-image.active{
    opacity:1;
    transform:translateX(0);
}

.overview-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s ease;
}

.overview-image:hover img{
    transform:scale(1.06);
}

.image-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(4,18,27,.85),
            rgba(4,18,27,.05) 65%
        );
}

.overview-image::before{
    content:"";
    position:absolute;
    z-index:2;
    width:100px;
    height:100px;
    border:2px solid #2bbdd9;
    top:20px;
    left:20px;
    border-right:0;
    border-bottom:0;
    border-radius:20px 0 0 0;
}

.overview-image::after{
    content:"";
    position:absolute;
    z-index:2;
    width:100px;
    height:100px;
    border:2px solid #2bbdd9;
    bottom:20px;
    right:20px;
    border-left:0;
    border-top:0;
    border-radius:0 0 20px 0;
}


/* BADGE */

.overview-badge{
    position:absolute;
    z-index:5;
    bottom:30px;
    left:30px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 25px;
    background:rgba(255,255,255,.96);
    border-radius:14px;
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.badge-number{
    font-size:30px;
    font-weight:800;
    color:#2bbdd9;
}

.overview-badge strong{
    display:block;
    font-size:17px;
}

.overview-badge small{
    color:#6d7a82;
    margin-top:4px;
    display:block;
}


/* CONTENT */

.overview-content{
    opacity:0;
    transform:translateX(60px);
    transition:1s ease .2s;
}

.overview-content.active{
    opacity:1;
    transform:translateX(0);
}

.section-label{
    display:flex;
    align-items:center;
    gap:12px;
    color:#2bbdd9;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-label span{
    width:38px;
    height:2px;
    background:#2bbdd9;
}

.overview-content h2{
    font-size:clamp(35px,4vw,53px);
    line-height:1.15;
    margin-bottom:25px;
    color:#10212c;
}

.overview-content h2 span{
    color:#2bbdd9;
}

.main-description{
    color:#66757e;
    font-size:16px;
    line-height:1.9;
    margin-bottom:18px;
}


/* FEATURES */

/* ========================================
   MANAGED IT FEATURES
======================================== */

.managed-it-features{

    margin-top:35px;

    display:grid;

    gap:18px;

}


.managed-it-feature{

    display:flex;

    gap:18px;

    padding:20px;

    border:1px solid #e5edf0;

    border-radius:15px;

    background:#fff;

    transition:.4s ease;

}


.managed-it-feature:hover{

    transform:translateX(8px);

    border-color:#2bbdd9;

    box-shadow:0 12px 30px rgba(0,0,0,.07);

}


/* ========================================
   FEATURE ICON
======================================== */

.managed-it-icon{

    flex-shrink:0;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:#eafaff;

    color:#2bbdd9;

    font-size:21px;

}


/* ========================================
   SECURITY ICON
======================================== */

.security-it-icon{

    background:#e9f9fe;

    color:#2bbdd9;

}


/* ========================================
   FEATURE TEXT
======================================== */

.managed-it-text h4{

    font-size:18px;

    margin-bottom:7px;

}


.managed-it-text p{

    color:#718089;

    line-height:1.7;

    font-size:14px;

}
/* BUTTON */

.overview-bottom{
    margin-top:30px;
}

.overview-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 25px;
    color:#fff;
    background:#10232e;
    text-decoration:none;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    transition:.4s;
}

.overview-button i{
    transition:.4s;
}

.overview-button:hover{
    background:#2bbdd9;
    transform:translateY(-3px);
}

.overview-button:hover i{
    transform:translateX(5px);
}


/* =========================================================
   HOW WE WORK
========================================================= */

.how-work-section{
    position:relative;
    padding:110px 0;
    background:#071720;
    color:#fff;
    overflow:hidden;
}

.how-work-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(43,189,217,.06);
    top:-250px;
    right:-150px;
}

.how-work-container{
    width:90%;
    max-width:1250px;
    margin:auto;
    position:relative;
    z-index:2;
}

.how-work-header{
    max-width:800px;
    margin:0 auto 80px;
    text-align:center;
}

.how-work-label{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    color:#2bbdd9;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:18px;
}

.how-work-label span{
    width:35px;
    height:2px;
    background:#2bbdd9;
}

.how-work-header h2{
    font-size:clamp(38px,5vw,58px);
    margin-bottom:20px;
}

.how-work-header h2 span{
    color:#2bbdd9;
}

.how-work-header p{
    color:#a9bac2;
    line-height:1.8;
}


/* PROCESS */

.process-wrapper{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    position:relative;
}

.process-line{
    position:absolute;
    height:2px;
    background:rgba(43,189,217,.25);
    top:32px;
    left:8%;
    right:8%;
}

.process-item{
    position:relative;
    z-index:2;
    text-align:center;
}

.process-number{
    width:65px;
    height:65px;
    margin:0 auto 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #2bbdd9;
    background:#071720;
    color:#2bbdd9;
    font-weight:800;
    font-size:14px;
    transition:.4s;
}

.process-icon{
    width:58px;
    height:58px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2bbdd9;
    color:#071720;
    border-radius:15px;
    font-size:20px;
    transition:.4s;
}

.process-item:hover .process-number{
    background:#2bbdd9;
    color:#071720;
    transform:rotate(360deg);
}

.process-item:hover .process-icon{
    transform:translateY(-7px);
    box-shadow:0 12px 30px rgba(43,189,217,.25);
}

.process-card{
    min-height:245px;
    padding:25px 20px;
    background:#0c222d;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    transition:.4s;
}

.process-item:hover .process-card{
    border-color:#2bbdd9;
    transform:translateY(-6px);
}

.process-card > span{
    color:#2bbdd9;
    font-size:11px;
    letter-spacing:1.5px;
    font-weight:700;
}

.process-card h3{
    margin:13px 0;
    font-size:21px;
}

.process-card p{
    color:#9fb0b8;
    line-height:1.7;
    font-size:14px;
}


/* FOOTER */

.process-footer{
    margin-top:70px;
    display:flex;
    align-items:center;
    gap:25px;
}

.footer-line{
    flex:1;
    height:1px;
    background:rgba(255,255,255,.12);
}

.process-footer p{
    white-space:nowrap;
    color:#b8c7cd;
    font-size:14px;
}

.process-footer i{
    color:#2bbdd9;
    margin-right:8px;
}


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

.capabilities-section{
    padding:110px 0;
    background:#f6fafb;
}

.capabilities-container{
    width:90%;
    max-width:1250px;
    margin:auto;
}

.capabilities-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.capabilities-heading .label{
    color:#2bbdd9;
    font-size:13px;
    letter-spacing:2px;
    font-weight:700;
}

.capabilities-heading h2{
    font-size:clamp(35px,4vw,52px);
    margin:15px 0;
}

.capabilities-heading h2 span{
    color:#2bbdd9;
}

.capabilities-heading p{
    color:#6d7b83;
    line-height:1.8;
}

.capabilities-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.capability-card{
    position:relative;
    padding:32px;
    min-height:230px;
    background:#fff;
    border-radius:18px;
    border:1px solid #e4edef;
    overflow:hidden;
    transition:.45s;
}

.capability-card::before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    background:#eafaff;
    top:-35px;
    right:-35px;
    transition:.45s;
}

.capability-card:hover{
    transform:translateY(-10px);
    border-color:#2bbdd9;
    box-shadow:0 20px 45px rgba(15,45,55,.1);
}

.capability-card:hover::before{
    transform:scale(2.2);
}

.capability-icon{
    position:relative;
    z-index:2;
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#10232e;
    color:#2bbdd9;
    margin-bottom:25px;
}

.capability-card h3{
    margin-bottom:12px;
    font-size:20px;
}

.capability-card p{
    color:#718089;
    line-height:1.7;
    font-size:14px;
}


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

.cta-section{
    padding:90px 20px;
    background:#2bbdd9;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    border:70px solid rgba(255,255,255,.08);
    top:-180px;
    left:-100px;
}

.cta-section h2{
    position:relative;
    font-size:clamp(35px,5vw,55px);
    color:#071720;
    margin-bottom:15px;
}

.cta-section p{
    position:relative;
    max-width:650px;
    margin:auto;
    color:#17343d;
    line-height:1.8;
}

.cta-button{
    position:relative;
    display:inline-flex;
    margin-top:28px;
    padding:15px 28px;
    background:#071720;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
    transition:.4s;
}

.cta-button:hover{
    transform:translateY(-4px);
    background:#fff;
    color:#071720;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(45px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:1050px){

    .overview-container{
        grid-template-columns:1fr;
    }

    .overview-image{
        height:520px;
    }

    .process-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }

    .process-line{
        display:none;
    }

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

}

@media(max-width:650px){

    .inner-banner{
        min-height:500px;
    }

    .banner-content h1{
        font-size:43px;
    }

    .overview-section,
    .how-work-section,
    .capabilities-section{
        padding:75px 0;
    }

    .overview-image{
        height:400px;
    }

    .overview-container{
        gap:40px;
    }

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

    .process-card{
        min-height:auto;
    }

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

    .process-footer{
        flex-direction:column;
    }

    .footer-line{
        width:100%;
    }

    .process-footer p{
        white-space:normal;
        text-align:center;
    }

}

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

.service-showcase-section {
    padding: 100px 20px;
    background: #f7f9fc;
}

.service-showcase-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}


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

.service-showcase-header {
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
}

.service-showcase-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
    color: #10cbff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.service-showcase-tag span {
    width: 35px;
    height: 2px;
    background: #10cbff;
}

.service-showcase-header h2 {
    margin: 0 0 18px;
    font-size: 42px;
    color: #111827;
}

.service-showcase-header h2 span {
    color: #10cbff;
}

.service-showcase-header p {
    margin: 0;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}


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

.service-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


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

.service-showcase-card {
    position: relative;
    height: 340px;
    padding: 30px;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    background: #ffffff;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.service-showcase-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, .15);
}


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

.service-showcase-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    transform: scale(1);

    transition:
        transform .8s ease,
        filter .6s ease;
}

.service-showcase-card:hover .service-showcase-image {
    transform: scale(1.08);
}


/* =========================================================
   NORMAL OVERLAY
   VERY LIGHT SO IMAGE STAYS CLEAR
========================================================= */

.service-showcase-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .58),
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, .02)
        );

    transition:
        background .6s ease;
}


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

.service-showcase-card:hover .service-showcase-overlay {
    background:
        linear-gradient(
            135deg,
            rgba(150, 160, 170, .72),
            rgba(185, 190, 195, .55),
            rgba(220, 225, 230, .30)
        );
}


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

.service-showcase-content {
    position: relative;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    z-index: 2;
}


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

.service-showcase-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 20px;

    border-radius: 16px;

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

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

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

    color: #ffffff;

    font-size: 24px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .15);

    transition:
        transform .6s ease,
        background .6s ease,
        color .6s ease;
}


/* ICON HOVER */

.service-showcase-card:hover .service-showcase-icon {
    transform:
        translateY(-8px)
        rotate(-8deg)
        scale(1.1);

    background: #10cbff;

    color: #ffffff;

    border-color: #10cbff;
}


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

.service-showcase-card h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;

    line-height: 1.4;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .30);

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


/* TITLE HOVER */

.service-showcase-card:hover h3 {
    transform: translateY(-4px);

    color: #ffffff;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .35);
}


/* =========================================================
   SUBLINE
========================================================= */

.service-showcase-subline {
    display: block;

    max-height: 0;

    margin-top: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(12px);

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        max-height .5s ease,
        margin-top .5s ease,
        opacity .4s ease,
        transform .5s ease;
}


/* SUBLINE HOVER */

.service-showcase-card:hover .service-showcase-subline {
    max-height: 30px;

    margin-top: 8px;

    opacity: 1;

    transform: translateY(0);
}


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

.service-showcase-line {
    width: 0;

    height: 3px;

    margin-top: 0;

    background: #ffffff;

    border-radius: 10px;

    transition:
        width .6s ease,
        margin-top .5s ease;
}

.service-showcase-card:hover .service-showcase-line {
    width: 75px;

    margin-top: 13px;
}


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

.service-showcase-card p {
    max-height: 0;

    margin: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(20px);

    color: #ffffff;

    font-size: 14px;

    line-height: 1.8;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .30);

    transition:
        max-height .6s ease,
        margin-top .6s ease,
        opacity .5s ease,
        transform .6s ease;
}


/* DESCRIPTION HOVER */

.service-showcase-card:hover p {
    max-height: 130px;

    margin-top: 15px;

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   HOVER IMAGE EFFECT
========================================================= */

.service-showcase-card:hover .service-showcase-image {
    filter: brightness(.82);
}


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

@media (max-width: 991px) {

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


@media (max-width: 600px) {

    .service-showcase-section {
        padding: 70px 15px;
    }

    .service-showcase-header h2 {
        font-size: 32px;
    }

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

    .service-showcase-card {
        height: 320px;
    }
}

/* ======================================================================blog ============================ */

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

.blog-container {
    width: min(1200px, 92%);
    margin: auto;
}


/* =========================================================
   BLOG MAIN SECTION
========================================================= */

.blog-section {
    position: relative;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(43,189,217,.06),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(43,189,217,.05),
            transparent 25%
        ),
        var(--light);

    overflow: hidden;
}


/* Subtle background grid */

.blog-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(7,20,29,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7,20,29,.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


/* =========================================================
   TOP HEADING
========================================================= */

.blog-topbar {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 35px;
}


.blog-heading small {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.blog-heading h2 {
    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.2px;
}


.blog-heading h2 span {
    color: var(--primary-dark);
}

/* =========================================================
   CATEGORY FILTER
========================================================= */

.blog-categories {
    position: relative;
    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 50px;
}


.category-btn {
    border: 1px solid var(--border);

    background: white;

    color: #000;

    padding: 11px 20px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}


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

    border-color: var(--primary);

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


.category-btn.active {
    background: var(--dark);

    border-color: var(--dark);

    color: white;

    box-shadow:
        0 8px 20px rgba(7,20,29,.15);
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.featured-blog {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.15fr 1fr;

    background: white;

    border-radius: 24px;

    overflow: hidden;

    margin-bottom: 75px;

    border: 1px solid rgba(0,0,0,.04);

    box-shadow:
        0 20px 60px rgba(9,30,40,.08);

    transition: var(--transition);
}


.featured-blog:hover {
    transform: translateY(-7px);

    box-shadow:
        0 30px 80px rgba(9,30,40,.13);
}


/* Featured Image */

.featured-image {
    position: relative;

    min-height: 430px;

    overflow: hidden;
}


.featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.featured-blog:hover .featured-image img {
    transform: scale(1.08);
}


/* Featured image overlay */

.featured-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.25),
            transparent 45%
        );

    pointer-events: none;
}


/* Featured tag */

.featured-tag {
    position: absolute;

    z-index: 2;

    top: 25px;
    left: 25px;

    background: var(--primary);

    color: white;

    padding: 8px 15px;

    border-radius: 50px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 8px 20px rgba(43,189,217,.25);
}


/* Featured content */

.featured-content {
    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.featured-meta {
    color: var(--primary-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;

    margin-bottom: 18px;
}


.featured-content h3 {
    font-size: 34px;

    line-height: 1.25;

    font-weight: 800;

    margin-bottom: 20px;

    letter-spacing: -.7px;
}


.featured-content p {
    color: #000;

    line-height: 1.8;

    font-size: 15px;

    margin-bottom: 28px;
}


/* Featured Read More */

.read-more {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: var(--dark);

    font-size: 13px;

    font-weight: 800;

    transition: var(--transition);
}


.read-more span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    transition: var(--transition);
}


.read-more:hover {
    gap: 18px;
}


.read-more:hover span {
    transform: rotate(-45deg);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 28px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
    background: white;

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

    border-radius: var(--radius);

    overflow: hidden;

    opacity: 0;

    transform: translateY(45px);

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


.blog-card.show {
    opacity: 1;

    transform: translateY(0);
}


.blog-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(7,20,29,.11);
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.blog-image {
    position: relative;

    height: 230px;

    overflow: hidden;
}


.blog-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);
}


.blog-card:hover .blog-image img {
    transform: scale(1.09);
}


/* Image shine */

.blog-image::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .8s ease;
}


.blog-card:hover .blog-image::after {
    left: 140%;
}


/* =========================================================
   CATEGORY LABEL
========================================================= */

.blog-category {
    position: absolute;

    z-index: 3;

    left: 18px;
    bottom: 18px;

    padding: 7px 13px;

    border-radius: 30px;

    background:
        rgba(7,20,29,.88);

    color: white;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

    backdrop-filter: blur(8px);
}


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

.blog-content {
    padding: 26px;
}


.blog-meta {
    display: flex;

    align-items: center;

    gap: 15px;

    color: #8a979e;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 13px;
}


.blog-meta span:first-child {
    position: relative;

    padding-right: 15px;
}


.blog-meta span:first-child::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--primary);

    transform: translateY(-50%);
}


.blog-content h3 {
    font-size: 21px;

    line-height: 1.38;

    font-weight: 750;

    margin-bottom: 13px;

    transition: color .3s ease;
}


.blog-card:hover .blog-content h3 {
    color: var(--primary-dark);
}


.blog-content p {
    color: #000;

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 22px;
}


/* =========================================================
   ARTICLE LINK
========================================================= */

.blog-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--dark);

    font-size: 12px;

    font-weight: 800;

    transition: var(--transition);
}


.blog-link span {
    transition:
        transform .3s ease;
}


.blog-link:hover {
    color: var(--primary-dark);
}


.blog-link:hover span {
    transform: translateX(6px);
}


/* =========================================================
   HIDDEN CARD
========================================================= */

.blog-card.hidden {
    display: none;
}


/* =========================================================
   NO RESULTS
========================================================= */

.no-results {
    position: relative;
    z-index: 2;

    display: none;

    padding: 60px 20px;

    text-align: center;

    color: var(--muted);

    font-size: 15px;
}


/* =========================================================
   LOAD MORE
========================================================= */

.load-more-wrapper {
    position: relative;
    z-index: 2;

    text-align: center;

    margin-top: 60px;
}


.load-more {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 27px;

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

    border-radius: 50px;

    background: transparent;

    color: var(--dark);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--transition);
}


.load-more:hover {
    background: var(--dark);

    color: white;

    transform: translateY(-4px);

    box-shadow:
        0 12px 25px rgba(7,20,29,.15);
}


.load-more span {
    transition: transform .3s ease;
}


.load-more:hover span {
    transform: translateY(4px);
}

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

@media (max-width: 1000px) {

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


    .featured-blog {
        grid-template-columns: 1fr;
    }


    .featured-image {
        min-height: 350px;
    }

}


@media (max-width: 700px) {

    .blog-section {
        padding: 70px 0;
    }


    .blog-topbar {
        flex-direction: column;

        align-items: flex-start;
    }


    .blog-search {
        width: 100%;
    }


    .blog-categories {
        gap: 8px;

        margin-bottom: 35px;
    }


    .category-btn {
        padding: 9px 15px;

        font-size: 12px;
    }


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

        gap: 22px;
    }


    .featured-image {
        min-height: 270px;
    }


    .featured-content {
        padding: 35px 25px;
    }


    .featured-content h3 {
        font-size: 27px;
    }
}



/* ============================================================== BLOG DETAIL======================================= */


/* =========================================================
   BLOG DETAIL PAGE
========================================================= */

.blog-detail-section {
    padding: 90px 20px;
    background: #ffffff;
}

.blog-detail-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.blog-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 35px;

    font-size: 14px;
    color: #64748b;
}

.blog-detail-breadcrumb a {
    color: #10cbff;
    text-decoration: none;

    transition: color 0.3s ease;
}

.blog-detail-breadcrumb a:hover {
    color: #084c9e;
}

.blog-detail-breadcrumb i {
    font-size: 10px;
}

.blog-detail-breadcrumb .current {
    color: #64748b;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 55px;
    align-items: start;
}


/* =========================================================
   BLOG MAIN
========================================================= */

.blog-detail-main {
    min-width: 0;
}

.blog-detail-category {
    display: inline-flex;
    align-items: center;

    padding: 7px 15px;

    border-radius: 30px;

    background: #eaf3ff;
    color: #10cbff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


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

.blog-detail-title {
    max-width: 900px;

    margin: 20px 0;

    color: #111827;

    font-size: 48px;
    line-height: 1.18;
    font-weight: 750;
}


/* =========================================================
   BLOG META
========================================================= */

.blog-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;

    margin-bottom: 30px;

    color: #64748b;
    font-size: 14px;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-author-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: #eaf3ff;
    color: #10cbff;
}

.blog-author span {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;
    font-size: 11px;
}

.blog-author strong {
    color: #1e293b;
    font-size: 14px;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-meta-item i {
    color: #10cbff;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.blog-detail-image {
    width: 100%;
    height: 500px;

    overflow: hidden;

    border-radius: 22px;

    margin-bottom: 40px;

    background: #f1f5f9;
}

.blog-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.blog-detail-image:hover img {
    transform: scale(1.03);
}


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

.blog-detail-content {
    color: #475569;

    font-size: 16px;
    line-height: 1.9;
}

.blog-detail-content p {
    margin: 0 0 22px;
}

.blog-detail-content .blog-intro {
    color: #334155;

    font-size: 18px;
    line-height: 1.9;
    font-weight: 500;
}

.blog-detail-content h2 {
    margin: 42px 0 18px;

    color: #111827;

    font-size: 30px;
    line-height: 1.3;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.blog-highlight {
    display: flex;
    gap: 18px;

    margin: 35px 0;
    padding: 25px;

    border-left: 4px solid #10cbff;
    border-radius: 12px;

    background: #f4f8fd;
}

.blog-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: #10cbff;
    color: #ffffff;

    font-size: 20px;
}

.blog-highlight strong {
    display: block;

    margin-bottom: 5px;

    color: #111827;
    font-size: 17px;
}

.blog-highlight p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;
}


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

.blog-content-list {
    padding: 0;
    margin: 25px 0 30px;

    list-style: none;
}

.blog-content-list li {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;

    color: #334155;
}

.blog-content-list li span {
    width: 24px;
    height: 24px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #eaf3ff;
    color: #10cbff;

    font-size: 11px;
}


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

.blog-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 25px 0;

    margin-top: 35px;

    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}


/* TAGS */

.blog-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tags-title {
    margin-right: 5px;

    color: #111827;
    font-weight: 700;
}

.blog-tags a {
    padding: 7px 12px;

    border-radius: 20px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    text-decoration: none;

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

.blog-tags a:hover {
    background: #10cbff;
    color: #ffffff;
}


/* SHARE */

.blog-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-share > span {
    margin-right: 5px;

    color: #111827;
    font-weight: 700;
}

.blog-share a {
    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: #f1f5f9;
    color: #475569;

    text-decoration: none;

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

.blog-share a:hover {
    transform: translateY(-3px);

    background: #10cbff;
    color: #ffffff;
}


/* =========================================================
   AUTHOR BOX
========================================================= */

.blog-author-box {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 35px;
    padding: 25px;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    background: #f8fafc;
}

.blog-author-large {
    width: 75px;
    height: 75px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #eaf3ff;
    color: #10cbff;

    font-size: 25px;
}

.blog-author-box > div:last-child > span {
    color: #10cbff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.blog-author-box h3 {
    margin: 5px 0;

    color: #111827;
    font-size: 20px;
}

.blog-author-box p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   CATEGORY LIST
========================================================= */

.blog-category-list {
    padding: 0;
    margin: 0;

    list-style: none;
}

.blog-category-list li {
    border-bottom: 1px solid #edf0f3;
}

.blog-category-list li:last-child {
    border-bottom: none;
}

.blog-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 0;

    color: #475569;

    font-size: 14px;

    text-decoration: none;

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

.blog-category-list a:hover {
    padding-left: 5px;

    color: #10cbff;
}

.blog-category-list a span {
    min-width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    font-size: 11px;
}


/* =========================================================
   RECENT BLOGS
========================================================= */

.recent-blog {
    display: flex;
    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid #edf0f3;

    text-decoration: none;
}

.recent-blog:first-of-type {
    padding-top: 0;
}

.recent-blog:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-blog img {
    width: 75px;
    height: 65px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 9px;
}

.recent-blog h4 {
    margin: 0 0 7px;

    color: #1e293b;

    font-size: 13px;
    line-height: 1.5;

    transition: color 0.3s ease;
}

.recent-blog:hover h4 {
    color: #10cbff;
}

.recent-blog span {
    color: #94a3b8;

    font-size: 11px;
}


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

.blog-sidebar-cta {
    position: relative;

    padding: 30px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #10cbff,
            #084c9e
        );

    color: #ffffff;
}

.blog-sidebar-cta::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -60px;
    top: -60px;

    border-radius: 50%;

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

.blog-cta-icon {
    width: 50px;
    height: 50px;

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

    margin-bottom: 18px;

    border-radius: 14px;

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

    font-size: 20px;
}

.blog-sidebar-cta h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 21px;
    line-height: 1.4;
}

.blog-sidebar-cta p {
    margin: 0 0 20px;

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

    font-size: 13px;
    line-height: 1.7;
}

.blog-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 18px;

    border-radius: 8px;

    background: #ffffff;
    color: #10cbff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.3s ease;
}

.blog-cta-button:hover {
    transform: translateX(4px);
}


/* =========================================================
   RELATED POSTS
========================================================= */

.related-blog-section {
    margin-top: 100px;
}

.related-blog-heading {
    margin-bottom: 40px;
}

.related-blog-tag {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #10cbff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.related-blog-tag span {
    width: 30px;
    height: 2px;

    background: #10cbff;
}

.related-blog-heading h2 {
    margin: 0;

    text-align: center;

    color: #111827;

    font-size: 38px;
}

.related-blog-heading h2 span {
    color: #10cbff;
}


/* =========================================================
   RELATED GRID
========================================================= */

.related-blog-grid {
    display: grid;

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

    gap: 25px;
}


/* =========================================================
   RELATED CARD
========================================================= */

.related-blog-card {
    overflow: hidden;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    background: #ffffff;

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

.related-blog-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.10);
}


/* IMAGE */

.related-blog-image {
    position: relative;

    height: 220px;

    overflow: hidden;
}

.related-blog-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.related-blog-card:hover
.related-blog-image img {
    transform: scale(1.08);
}

.related-blog-image span {
    position: absolute;

    left: 18px;
    top: 18px;

    padding: 6px 11px;

    border-radius: 20px;

    background: #ffffff;

    color: #10cbff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* CONTENT */

.related-blog-content {
    padding: 22px;
}

.related-blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;

    color: #94a3b8;

    font-size: 11px;
}

.related-blog-meta span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-blog-meta i {
    color: #10cbff;
}

.related-blog-content h3 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 20px;
    line-height: 1.4;

    transition: color 0.3s ease;
}

.related-blog-card:hover h3 {
    color: #10cbff;
}

.related-blog-content p {
    margin: 0 0 18px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.7;
}

.related-blog-content > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #10cbff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: gap 0.3s ease;
}

.related-blog-content > a:hover {
    gap: 13px;
}


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

@media (max-width: 1000px) {

    .blog-detail-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .blog-detail-sidebar {
        position: static;

        display: grid;

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

        gap: 20px;
    }

    .blog-sidebar-card,
    .blog-sidebar-cta {
        margin-bottom: 0;
    }

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

}


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

@media (max-width: 650px) {

    .blog-detail-section {
        padding: 60px 15px;
    }

    .blog-detail-breadcrumb {
        font-size: 12px;
        margin-bottom: 25px;
    }

    .blog-detail-title {
        font-size: 32px;
    }

    .blog-detail-meta {
        gap: 16px;
    }

    .blog-detail-image {
        height: 300px;

        border-radius: 15px;

        margin-bottom: 30px;
    }

    .blog-detail-content {
        font-size: 15px;
    }

    .blog-detail-content .blog-intro {
        font-size: 16px;
    }

    .blog-detail-content h2 {
        font-size: 25px;
        margin-top: 32px;
    }

    .blog-highlight {
        padding: 18px;
    }

    .blog-detail-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-author-box {
        align-items: flex-start;
    }

    .blog-detail-sidebar {
        display: block;
    }

    .blog-sidebar-card,
    .blog-sidebar-cta {
        margin-bottom: 20px;
    }

    .related-blog-section {
        margin-top: 70px;
    }

    .related-blog-heading h2 {
        font-size: 30px;
    }

    .related-blog-grid {
        grid-template-columns: 1fr;
    }

}

/* =======================================================CAREER ======================================= */

/* =========================================================
   CAREERS SECTION
========================================================= */

.careers-section {
    padding: 100px 20px;
    background: #f7f9fc;
}

.careers-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}


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

.careers-header {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.careers-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;

    color: #10cbff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.careers-tag span {
    width: 32px;
    height: 2px;
    background: #10cbff;
}

.careers-header h2 {
    margin: 0 0 17px;
    color: #111827;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 750;
}

.careers-header h2 span {
    color: #10cbff;
}

.careers-header p {
    max-width: 650px;
    margin: 0 auto;

    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   JOB LIST
========================================================= */

.careers-job-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* =========================================================
   JOB CARD
========================================================= */

.careers-job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 24px 26px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;

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

.careers-job-card:hover {
    transform: translateY(-5px);
    border-color: #b9d5f3;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   JOB LEFT
========================================================= */

.careers-job-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}


/* =========================================================
   JOB ICON
========================================================= */

.careers-job-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

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

    border-radius: 15px;

    background: #eaf3ff;
    color: #10cbff;

    font-size: 22px;

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

.careers-job-card:hover .careers-job-icon {
    transform: rotate(-6deg) scale(1.08);
    background: #10cbff;
    color: #ffffff;
}


/* =========================================================
   JOB INFORMATION
========================================================= */

.careers-job-info {
    min-width: 0;
}

.careers-job-type {
    display: inline-block;
    margin-bottom: 5px;

    color: #10cbff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.careers-job-info h3 {
    margin: 0 0 10px;

    color: #111827;

    font-size: 20px;
    line-height: 1.3;

    transition: color 0.3s ease;
}

.careers-job-card:hover .careers-job-info h3 {
    color: #10cbff;
}


/* =========================================================
   JOB META
========================================================= */

.careers-job-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.careers-job-meta span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #64748b;
    font-size: 12px;
}

.careers-job-meta i {
    color: #10cbff;
    font-size: 11px;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.careers-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    flex-shrink: 0;
    min-width: 125px;

    padding: 12px 18px;

    border-radius: 8px;

    background: #0a0e1a;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

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

.careers-apply-btn:hover {
    background: #10cbff;
    transform: translateY(-2px);
    gap: 13px;
}

.careers-apply-btn i {
    font-size: 11px;
}


/* =========================================================
   HIDDEN JOBS
========================================================= */

.careers-hidden-job {
    display: none;
}

.careers-hidden-job.show {
    display: flex;

    animation:
        careersJobReveal 0.5s ease forwards;
}


@keyframes careersJobReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


/* =========================================================
   SEE MORE BUTTON
========================================================= */

.careers-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.careers-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-width: 180px;

    padding: 14px 24px;

    border: 1px solid #10cbff;
    border-radius: 8px;

    background: #ffffff;
    color: #10cbff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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

.careers-more-btn:hover {
    background: #10cbff;
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(11, 99, 206, 0.18);
}

.careers-more-btn.active {
    background: #10cbff;
    color: #ffffff;
}

.careers-more-btn i {
    font-size: 11px;
}


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

@media (max-width: 768px) {

    .careers-section {
        padding: 80px 20px;
    }

    .careers-header h2 {
        font-size: 38px;
    }

    .careers-job-card {
        padding: 20px;
    }

    .careers-job-meta {
        gap: 10px 15px;
    }

}


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

@media (max-width: 600px) {

    .careers-section {
        padding: 70px 15px;
    }

    .careers-header {
        margin-bottom: 40px;
    }

    .careers-header h2 {
        font-size: 31px;
    }

    .careers-header p {
        font-size: 14px;
    }

    .careers-job-card {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding: 20px;
    }

    .careers-job-left {
        width: 100%;
        align-items: flex-start;
    }

    .careers-job-icon {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }

    .careers-job-info h3 {
        font-size: 17px;
    }

    .careers-job-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .careers-apply-btn {
        width: 100%;
    }

    .careers-more-wrapper {
        margin-top: 30px;
    }

}

/* ======================================================CAREER DETAIL PAGE============================== */

/* =========================================================
   MAIN SECTION
========================================================= */

.career-detail-section {

    padding: 80px 20px 100px;

    background: #f7f9fc;

}


.career-detail-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}

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

.career-detail-header h1 {

    margin: 0 0 20px;

    color: #111827;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

}


.career-detail-header h1 span {

    color: #10cbff;

}


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

.career-detail-intro {

    max-width: 720px;

    margin: 0 0 30px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   JOB META
========================================================= */

.career-detail-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

}


.career-meta-item {

    display: flex;

    align-items: center;

    gap: 10px;

}


.career-meta-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #eaf3ff;

    color: #10cbff;

    font-size: 15px;

}


.career-meta-item div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.career-meta-item small {

    color: #94a3b8;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.career-meta-item strong {

    color: #1e293b;

    font-size: 13px;

    font-weight: 700;

}




/* =========================================================
   MAIN GRID
========================================================= */

.career-detail-grid {

    display: grid;

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

    gap: 35px;

    margin-top: 40px;

    align-items: start;

}


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

.career-detail-content {

    padding: 35px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e5eaf0;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.04);

}


.career-content-block {

    padding-bottom: 35px;

    margin-bottom: 35px;

    border-bottom: 1px solid #e8edf3;

}


.career-content-block:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: none;

}


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

.career-content-heading {

    margin-bottom: 20px;

}


.career-content-heading > div {

    display: flex;

    align-items: center;

    gap: 13px;

}


.career-content-heading span {

    color: #10cbff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.career-content-heading h2 {

    margin: 0;

    color: #111827;

    font-size: 24px;

    line-height: 1.3;

}


.career-content-block p {

    margin: 0 0 14px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.9;

}


.career-content-block p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RESPONSIBILITIES / REQUIREMENTS LIST
========================================================= */

.career-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding: 0;

    margin: 0;

    list-style: none;

}


.career-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #475569;

    font-size: 14px;

    line-height: 1.7;

}


.career-list li i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 21px;

    height: 21px;

    margin-top: 2px;

    border-radius: 50%;

    background: #eaf3ff;

    color: #10cbff;

    font-size: 9px;

}


/* =========================================================
   SKILLS
========================================================= */

.career-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.career-skills span {

    padding: 9px 15px;

    border-radius: 7px;

    background: #f1f6fc;

    border: 1px solid #dce9f7;

    color: #10cbff;

    font-size: 12px;

    font-weight: 600;

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

}


.career-skills span:hover {

    background: #e1efff;

    transform: translateY(-2px);

}


/* =========================================================
   APPLY CARD
========================================================= */

.career-apply-card {

    position: sticky;

    top: 25px;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e5eaf0;

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

}


/* =========================================================
   APPLY CARD HEADER
========================================================= */

.career-apply-top {

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #ffffff
        );

    border-bottom: 1px solid #e7edf4;

}


.career-apply-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #10cbff;

    color: #ffffff;

    font-size: 18px;

    box-shadow:
        0 8px 20px rgba(11, 99, 206, 0.20);

}


.career-apply-top h2 {

    margin: 0 0 10px;

    color: #111827;

    font-size: 22px;

    line-height: 1.35;

}


.career-apply-top p {

    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   APPLICATION FORM
========================================================= */

.career-application-form {

    padding: 28px;

}


.career-form-group {

    margin-bottom: 18px;

}


.career-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   INPUT
========================================================= */

.career-input-box {

    display: flex;

    align-items: center;

    gap: 10px;

    height: 45px;

    padding: 0 13px;

    border: 1px solid #dce3eb;

    border-radius: 8px;

    background: #ffffff;

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

}


.career-input-box:focus-within {

    border-color: #10cbff;

    box-shadow:
        0 0 0 3px rgba(11, 99, 206, 0.08);

}


.career-input-box i {

    color: #94a3b8;

    font-size: 13px;

}


.career-input-box input,
.career-input-box select {

    width: 100%;

    height: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #334155;

    font-family: inherit;

    font-size: 12px;

}


.career-input-box input::placeholder {

    color: #a1aab5;

}


/* =========================================================
   TEXTAREA
========================================================= */

.career-form-group textarea {

    width: 100%;

    padding: 13px;

    resize: vertical;

    border: 1px solid #dce3eb;

    border-radius: 8px;

    outline: none;

    color: #334155;

    background: #ffffff;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.6;

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

}


.career-form-group textarea:focus {

    border-color: #10cbff;

    box-shadow:
        0 0 0 3px rgba(11, 99, 206, 0.08);

}


/* =========================================================
   FILE UPLOAD
========================================================= */

.career-file-box {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 70px;

    padding: 12px;

    border: 1px dashed #b8cce1;

    border-radius: 8px;

    background: #f8fbff;

    color: #10cbff;

}


.career-file-box > i {

    font-size: 20px;

}


.career-file-box div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.career-file-box strong {

    color: #334155;

    font-size: 11px;

}


.career-file-box span {

    color: #94a3b8;

    font-size: 10px;

}


.career-file-box input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.career-submit-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 20px;

    border: none;

    border-radius: 8px;

    background: #10cbff;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

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

}


.career-submit-btn:hover {

    background: #084c9e;

    transform: translateY(-2px);

    gap: 14px;

}


.career-submit-btn i {

    font-size: 11px;

}


/* =========================================================
   FORM NOTE
========================================================= */

.career-form-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 15px 0 0;

    color: #94a3b8;

    font-size: 10px;

    text-align: center;

}


.career-form-note i {

    color: #10cbff;

}


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

@media (max-width: 991px) {


    .career-detail-header {

        padding: 45px;

    }


    .career-detail-header h1 {

        font-size: 42px;

    }


    .career-detail-grid {

        grid-template-columns: 1fr;

    }


    .career-apply-card {

        position: relative;

        top: auto;

    }

}


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

@media (max-width: 600px) {


    .career-detail-section {

        padding: 50px 15px 70px;

    }


    .career-detail-header {

        min-height: auto;

        padding: 35px 25px;

        border-radius: 18px;

    }


    .career-detail-header h1 {

        font-size: 32px;

    }


    .career-detail-intro {

        font-size: 13px;

    }


    .career-detail-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .career-detail-header-shape {

        width: 180px;

        height: 180px;

        right: -70px;

        top: -70px;

        font-size: 55px;

    }


    .career-detail-grid {

        margin-top: 25px;

        gap: 25px;

    }


    .career-detail-content {

        padding: 25px 20px;

        border-radius: 16px;

    }


    .career-content-heading h2 {

        font-size: 20px;

    }


    .career-content-block p,
    .career-list li {

        font-size: 13px;

    }


    .career-apply-top {

        padding: 25px 20px;

    }


    .career-application-form {

        padding: 22px 20px;

    }

}

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

/* =========================================================
   MAIN SECTION
========================================================= */

.contact-page-section {

    padding: 90px 20px 100px;

    background: #f7f9fc;

}


.contact-page-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}
/* =========================================================
   CONTACT GRID
========================================================= */

.contact-page-grid {

    display: grid;

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

    gap: 55px;

    align-items: start;

}


/* =========================================================
   LEFT INFORMATION
========================================================= */

.contact-info-wrapper {

    padding-top: 15px;

}


.contact-small-title {

    margin-bottom: 13px;

    color: #10cbff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.contact-info-intro h2 {

    margin: 0 0 17px;

    color: #111827;

    font-size: 35px;

    line-height: 1.25;

    font-weight: 800;

}


.contact-info-intro h2 span {

    color: #10cbff;

}


.contact-info-intro p {

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.9;

}


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

.contact-info-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 35px;

}


.contact-info-item {

    display: flex;

    align-items: center;

    gap: 15px;

}


.contact-info-icon {

    flex-shrink: 0;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #eaf3ff;

    color: #10cbff;

    font-size: 17px;

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

}


.contact-info-item:hover .contact-info-icon {

    transform: translateY(-4px);

    background: #10cbff;

    color: #ffffff;

}


.contact-info-text {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.contact-info-text span {

    color: #94a3b8;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.contact-info-text strong {

    color: #334155;

    font-size: 13px;

    font-weight: 600;

}


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

.contact-social-wrapper {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 38px;

    padding-top: 25px;

    border-top: 1px solid #e2e8f0;

}


.contact-social-wrapper > span {

    color: #475569;

    font-size: 12px;

    font-weight: 700;

}


.contact-social-links {

    display: flex;

    gap: 9px;

}


.contact-social-links a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid #dce5ef;

    color: #64748b;

    font-size: 13px;

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

}


.contact-social-links a:hover {

    background: #10cbff;

    color: #ffffff;

    border-color: #10cbff;

    transform: translateY(-4px);

}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {

    padding: 35px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e3e9f0;

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

}


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

.contact-form-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid #e8edf3;

}


.contact-form-icon {

    flex-shrink: 0;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #10cbff;

    color: #ffffff;

    font-size: 17px;

    box-shadow:
        0 8px 20px rgba(11, 99, 206, 0.18);

}


.contact-form-header h2 {

    margin: 0 0 5px;

    color: #111827;

    font-size: 21px;

}


.contact-form-header p {

    margin: 0;

    color: #94a3b8;

    font-size: 11px;

    line-height: 1.6;

}


/* =========================================================
   FORM ROW
========================================================= */

.contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


/* =========================================================
   FORM GROUP
========================================================= */

.contact-form-group {

    margin-bottom: 18px;

}


.contact-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   INPUT
========================================================= */

.contact-input-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    height: 46px;

    padding: 0 13px;

    border: 1px solid #dce3eb;

    border-radius: 8px;

    background: #ffffff;

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

}


.contact-input-wrapper:focus-within {

    border-color: #10cbff;

    box-shadow:
        0 0 0 3px rgba(11, 99, 206, 0.08);

}


.contact-input-wrapper i {

    flex-shrink: 0;

    color: #94a3b8;

    font-size: 13px;

}


.contact-input-wrapper input,
.contact-input-wrapper select {

    width: 100%;

    height: 100%;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #334155;

    font-family: inherit;

    font-size: 12px;

}


.contact-input-wrapper input::placeholder {

    color: #a1aab5;

}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-form-group textarea {

    width: 100%;

    padding: 13px;

    border: 1px solid #dce3eb;

    border-radius: 8px;

    outline: none;

    resize: vertical;

    color: #334155;

    background: #ffffff;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.7;

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

}


.contact-form-group textarea:focus {

    border-color: #10cbff;

    box-shadow:
        0 0 0 3px rgba(11, 99, 206, 0.08);

}


.contact-form-group textarea::placeholder {

    color: #a1aab5;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 20px;

    border: none;

    border-radius: 8px;

    background: #10cbff;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

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

}


.contact-submit-btn:hover {

    background: #084c9e;

    transform: translateY(-2px);

    gap: 15px;

}


/* =========================================================
   FORM NOTE
========================================================= */

.contact-form-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 14px;

    color: #94a3b8;

    font-size: 9px;

    line-height: 1.5;

    text-align: center;

}


.contact-form-note i {

    color: #10cbff;

}


/* =========================================================
   LOCATION SECTION
========================================================= */

.contact-location-section {

    margin-top: 70px;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e3e9f0;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.05);

}


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

.contact-location-content {

    padding: 30px 35px;

}


.contact-location-content > span {

    color: #10cbff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.contact-location-content h2 {

    margin: 9px 0 8px;

    color: #111827;

    font-size: 25px;

}


.contact-location-content h2 strong {

    color: #10cbff;

}


.contact-location-content p {

    margin: 0;

    color: #64748b;

    font-size: 12px;

}


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

.contact-map {

    width: 100%;

    height: 350px;

}


.contact-map iframe {

    width: 100%;

    height: 100%;

    display: block;

    border: none;

}


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

@media (max-width: 991px) {


    .contact-page-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .contact-info-wrapper {

        max-width: 750px;

    }


    .contact-form-card {

        max-width: 750px;

        width: 100%;

    }


}


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

@media (max-width: 600px) {


    .contact-page-section {

        padding: 60px 15px 70px;

    }


    .contact-page-header {

        margin-bottom: 40px;

    }


    .contact-page-header h1 {

        font-size: 32px;

    }


    .contact-page-header p {

        font-size: 13px;

    }


    .contact-info-intro h2 {

        font-size: 29px;

    }


    .contact-info-intro p {

        font-size: 13px;

    }


    .contact-form-card {

        padding: 22px 18px;

        border-radius: 16px;

    }


    .contact-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .contact-form-header {

        align-items: flex-start;

    }


    .contact-form-header h2 {

        font-size: 19px;

    }


    .contact-location-section {

        margin-top: 50px;

        border-radius: 16px;

    }


    .contact-location-content {

        padding: 25px 20px;

    }


    .contact-map {

        height: 280px;

    }


    .contact-social-wrapper {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }

}



/* =========================================================
FINAL MOBILE RESPONSIVE OVERRIDE
Add this CSS at the VERY BOTTOM of your stylesheet
========================================================= */

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

@media (max-width: 991px) {


html,
body {
    width: 100%;
    overflow-x: hidden;
}

.container {
    width: 92%;
    max-width: 100%;
}

/* ---------------- HEADER ---------------- */

.header {
    padding: 12px 0;
}

.nav-container {
    width: 92%;
    margin: auto;
    min-height: 60px;
}

.logo-img {
    width: 150px;
    height: 70px;
    object-fit: contain;
}

.menu-btn {
    display: block;
    flex-shrink: 0;
}

.navbar {
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 75px);
    overflow-y: auto;
    overflow-x: hidden;
}

.navbar ul {
    width: 100%;
}

.navbar ul li {
    width: 100%;
}

.navbar ul li a {
    width: 100%;
    padding: 14px 8px;
    font-size: 14px;
}

/* Dropdown on mobile */

.dropdown-menu {
    position: static;
    width: 100%;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,.05);
    padding: 0;
}

.dropdown:hover .dropdown-menu {
    display: none;
}

.dropdown-menu li a {
    padding: 12px 20px;
    color: #fff !important;
    font-size: 13px;
}

/* ---------------- CONTACT BUTTON ---------------- */

.contact-btn {
    padding: 11px 16px;
    font-size: 13px;
}


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

.tech-hero {
    min-height: auto;
}

.hero-container {
    width: 100%;
    min-height: auto;
    padding: 110px 30px 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hero-content {
    width: 100%;
    max-width: 800px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-label {
    margin-bottom: 22px;
}

.hero-title {
    max-width: 800px;
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 22px;
}

.hero-description {
    max-width: 700px;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.hero-buttons {
    justify-content: center;
    width: 100%;
}

.hero-btn {
    min-width: 200px;
}

.tech-hero-visual {
    width: 100%;
    max-width: 800px;
    height: 600px;
    margin: 0 auto;
}

.tech-visual-box {
    width: 100%;
    height: 560px;
}


/* =====================================================
   COMMON GRIDS
===================================================== */

.service-showcase-grid,
.capabilities-grid,
.blog-grid {
    grid-template-columns: repeat(2, 1fr);
}

.about-grid,
.why-grid,
.overview-container,
.contact-page-grid,
.career-detail-grid {
    grid-template-columns: 1fr;
}

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


/* =====================================================
   IMAGES
===================================================== */

.about-image,
.overview-image {
    width: 100%;
    height: 450px;
}


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

.about-intro,
.mission-section,
.overview-section,
.capabilities-section,
.service-showcase-section,
.blog-section,
.careers-section {
    padding-top: 75px;
    padding-bottom: 75px;
}


/* =====================================================
   HEADINGS
===================================================== */

.section-title,
.about-content h2,
.center-heading h2 {
    font-size: 42px;
    line-height: 1.15;
}


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

.footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

}

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

@media (max-width: 767px) {

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}


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

.header {
    padding: 8px 0;
}

.header.scrolled {
    padding: 7px 0;
}

.nav-container {
    width: 92%;
    min-height: 55px;
}

.logo-img {
    width: 125px;
    height: 60px;
}

.menu-btn {
    width: 42px;
    height: 42px;
}

.menu-btn span {
    width: 24px;
}

.navbar {
    top: 100%;
    padding: 10px 18px 20px;
    background: #0a0e1a;
}

.navbar ul li a {
    padding: 14px 5px;
    font-size: 14px;
}

.contact-btn {
    display: none;
}


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

.hero-container {
    padding: 105px 18px 45px;
    gap: 25px;
}

.hero-label {
    padding: 8px 12px;
    gap: 8px;
    margin-bottom: 18px;
}

.hero-label-text {
    font-size: 9px;
    letter-spacing: .8px;
}

.hero-label-dot {
    width: 7px;
    height: 7px;
}

.hero-title {
    width: 100%;
    max-width: 100%;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.4px;
    margin-bottom: 18px;
}

.hero-description {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 24px;
}


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

.hero-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-btn,
.btn-primary,
.btn-secondary {
    width: 100%;
    max-width: 330px;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    font-size: 13px;
}


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

.tech-hero-visual {
    width: 100%;
    height: 600px;
    max-width: 100%;
}

.tech-visual-box {
    width: 100%;
    height: 580px;
    border-radius: 20px;
}

.visual-center-glow {
    width: 220px;
    height: 220px;
}

.ring-one {
    width: 285px;
    height: 285px;
}

.ring-two {
    width: 225px;
    height: 225px;
}

.ring-three {
    width: 170px;
    height: 170px;
}

.technology-hub {
    transform:
        translate(-50%, -50%)
        scale(.58);
}


/* =====================================================
   WORKFLOW CARDS
===================================================== */

.tech-workflow-card {
    width: calc(100% - 30px);
    max-width: 300px;
    height: 105px;
    min-height: 105px;
    padding: 10px;
    border-radius: 14px;
}

.workflow-discover {
    left: 15px;
    top: 230px;
}

.workflow-engineer {
    right: 15px;
    top: 345px;
}

.workflow-operate {
    left: 15px;
    top: 460px;
}

.workflow-card-header {
    margin-bottom: 5px;
}

.workflow-number {
    font-size: 8px;
}

.workflow-status {
    font-size: 6px;
    padding: 3px 5px;
}

.workflow-card-body {
    height: 65px;
}

.tech-workflow-card h3 {
    font-size: 13px;
    margin-bottom: 4px;
}

.workflow-line {
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
}

.tech-workflow-card p {
    width: 150px;
    max-width: calc(100% - 42px);
    font-size: 7px;
    line-height: 1.45;
}

.workflow-icon {
    width: 29px;
    height: 29px;
    right: 3px;
    bottom: 2px;
    font-size: 9px;
}


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

.about-intro,
.mission-section,
.overview-section,
.how-work-section,
.capabilities-section,
.service-showcase-section,
.blog-section,
.careers-section,
.contact-page-section {
    padding: 65px 0;
}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.section-title,
.about-content h2,
.center-heading h2,
.capabilities-heading h2 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -.7px;
}

.center-heading {
    margin-bottom: 40px;
}


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

.about-grid {
    gap: 35px;
}

.about-content h2 {
    margin-bottom: 18px;
}

.about-content p {
    font-size: 14px;
    line-height: 1.75;
}

.about-image {
    height: 330px;
    border-radius: 15px;
}


/* =====================================================
   MISSION / VISION
===================================================== */

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


/* =====================================================
   OVERVIEW
===================================================== */

.overview-container {
    gap: 35px;
}

.overview-image {
    height: 330px;
    border-radius: 16px;
}

.overview-content h2 {
    font-size: 31px;
}

.main-description,
.secondary-description {
    font-size: 14px;
    line-height: 1.7;
}

.solution-features {
    grid-template-columns: 1fr;
}


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

.service-showcase-grid,
.capabilities-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

.service-showcase-card {
    height: 300px;
}

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

.capability-card h3 {
    font-size: 18px;
}

.capability-card p {
    font-size: 13px;
}


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

.cta-section {
    padding: 65px 18px;
}

.cta-section h2 {
    font-size: 32px;
    line-height: 1.2;
}

.cta-section p {
    font-size: 14px;
    line-height: 1.7;
}

.cta-button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
}


/* =====================================================
   BLOG
===================================================== */

.blog-section {
    padding: 65px 0;
}

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

.featured-blog {
    grid-template-columns: 1fr;
}

.featured-image {
    min-height: 250px;
}

.featured-content {
    padding: 28px 20px;
}

.featured-content h3 {
    font-size: 25px;
}

.blog-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

.blog-search {
    width: 100%;
}

.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.category-btn {
    padding: 8px 12px;
    font-size: 11px;
}


/* =====================================================
   BLOG DETAIL
===================================================== */

.blog-detail-section {
    padding: 55px 15px 65px;
}

.blog-detail-title {
    font-size: 30px;
    line-height: 1.2;
}

.blog-detail-meta {
    flex-wrap: wrap;
    gap: 10px 15px;
}

.blog-detail-image {
    height: 280px;
    border-radius: 14px;
}

.blog-detail-content {
    font-size: 14px;
    line-height: 1.8;
}

.blog-detail-content h2 {
    font-size: 24px;
}

.blog-detail-sidebar {
    display: block;
}


/* =====================================================
   CAREERS
===================================================== */

.careers-section {
    padding: 65px 15px;
}

.careers-header {
    margin-bottom: 35px;
}

.careers-header h2 {
    font-size: 31px;
}

.careers-header p {
    font-size: 13px;
    line-height: 1.7;
}

.careers-job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
}

.careers-job-left {
    width: 100%;
    align-items: flex-start;
}

.careers-job-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
}


/* =====================================================
   CAREER DETAIL
===================================================== */

.career-detail-section {
    padding: 50px 15px 65px;
}

.career-detail-header {
    padding: 30px 20px;
    border-radius: 16px;
}

.career-detail-header h1 {
    font-size: 30px;
    line-height: 1.2;
}

.career-detail-intro {
    font-size: 13px;
    line-height: 1.7;
}

.career-detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.career-apply-card {
    position: relative;
    top: auto;
}


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

.contact-page-grid {
    grid-template-columns: 1fr;
    gap: 35px;
}

.contact-page-header {
    margin-bottom: 35px;
}

.contact-page-header h1 {
    font-size: 31px;
}

.contact-page-header p {
    font-size: 13px;
    line-height: 1.7;
}

.contact-info-intro h2 {
    font-size: 28px;
}

.contact-form-card {
    width: 100%;
}

.contact-map {
    height: 280px;
}


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

.footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 55px 0;
}

.footer-brand {
    grid-column: auto;
}

.footer-cta {
    padding: 60px 0 45px;
}

.footer-cta-content h2 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -1.5px;
}

.footer-cta-content p {
    font-size: 13px;
    line-height: 1.7;
}

.footer-bottom {
    display: block;
    padding: 25px 0 80px;
}

.footer-legal {
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 15px;
}


}

/* =========================================================
SMALL MOBILE — 480px
========================================================= */

@media (max-width: 480px) {


.container {
    width: 94%;
}

/* HEADER */

.nav-container {
    width: 94%;
}

.logo-img {
    width: 110px;
    height: 52px;
}


/* HERO */

.hero-container {
    padding: 95px 15px 40px;
}

.hero-label {
    padding: 7px 10px;
    gap: 6px;
}

.hero-label-text {
    font-size: 8px;
}

.hero-title {
    font-size: 31px;
    letter-spacing: -1px;
}

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

.hero-btn,
.btn-primary,
.btn-secondary {
    height: 46px;
    font-size: 12px;
    max-width: 100%;
}


/* HERO VISUAL */

.tech-hero-visual {
    height: 540px;
}

.tech-visual-box {
    height: 525px;
    border-radius: 18px;
}

.ring-one {
    width: 250px;
    height: 250px;
}

.ring-two {
    width: 200px;
    height: 200px;
}

.ring-three {
    width: 155px;
    height: 155px;
}

.technology-hub {
    transform:
        translate(-50%, -50%)
        scale(.50);
}

.workflow-discover {
    left: 8px;
    top: 215px;
}

.workflow-engineer {
    right: 8px;
    top: 325px;
}

.workflow-operate {
    left: 8px;
    top: 435px;
}

.tech-workflow-card {
    width: calc(100% - 16px);
    max-width: 270px;
    height: 96px;
    min-height: 96px;
    padding: 9px;
}

.tech-workflow-card h3 {
    font-size: 11px;
}

.tech-workflow-card p {
    width: 135px;
    font-size: 6.5px;
}

.workflow-icon {
    width: 26px;
    height: 26px;
    font-size: 8px;
}


/* HEADINGS */

.section-title,
.about-content h2,
.center-heading h2,
.capabilities-heading h2 {
    font-size: 28px;
}

.about-content p {
    font-size: 13px;
}

.about-image,
.overview-image {
    height: 280px;
}


/* SERVICES */

.service-showcase-card {
    height: 280px;
}

.capability-card {
    padding: 22px;
}


/* BLOG */

.featured-image {
    min-height: 220px;
}

.featured-content h3 {
    font-size: 22px;
}


/* CAREERS */

.careers-header h2 {
    font-size: 28px;
}

.careers-job-card {
    padding: 16px;
}


/* CONTACT */

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

.contact-info-intro h2 {
    font-size: 25px;
}

.contact-map {
    height: 240px;
}


/* FOOTER */

.footer-cta-content h2 {
    font-size: 28px;
}


}

/* =========================================================
VERY SMALL MOBILE — 360px
========================================================= */

@media (max-width: 360px) {


.hero-title {
    font-size: 28px;
}

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

.hero-container {
    padding-left: 12px;
    padding-right: 12px;
}

.tech-hero-visual {
    height: 500px;
}

.tech-visual-box {
    height: 490px;
}

.ring-one {
    width: 220px;
    height: 220px;
}

.ring-two {
    width: 175px;
    height: 175px;
}

.ring-three {
    width: 135px;
    height: 135px;
}

.technology-hub {
    transform:
        translate(-50%, -50%)
        scale(.44);
}

.workflow-discover {
    top: 200px;
}

.workflow-engineer {
    top: 300px;
}

.workflow-operate {
    top: 400px;
}

.tech-workflow-card {
    width: calc(100% - 12px);
    height: 90px;
    min-height: 90px;
    padding: 8px;
}

.tech-workflow-card h3 {
    font-size: 10px;
}

.tech-workflow-card p {
    width: 120px;
    font-size: 6px;
}

.workflow-icon {
    width: 24px;
    height: 24px;
    font-size: 7px;
}

.section-title,
.about-content h2,
.center-heading h2,
.capabilities-heading h2 {
    font-size: 25px;
}


}

.hero,
.hero-section,
.tech-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.career-list li {
    text-align: left;
    line-height: 2;
    margin-bottom: 10px;
}