.elementor-6 .elementor-element.elementor-element-553e3e4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b02332a *//* =========================================================
   MS HYBRID BATTERY REPLACEMENT
   PREMIUM AUTOMOTIVE COMING SOON
   ORANGE / BLACK EDITION
========================================================= */

:root {
    --ms-orange: #ff6900;
    --ms-orange-light: #ff8a24;
    --ms-orange-dark: #d94f00;

    --ms-black: #050505;
    --ms-black-2: #090909;
    --ms-dark: #101010;
    --ms-dark-2: #151515;

    --ms-white: #ffffff;
    --ms-gray: #a5a5a5;
    --ms-gray-dark: #686868;

    --ms-border: rgba(255, 255, 255, 0.10);

    --ms-container: 1380px;

    --ms-transition: 0.35s cubic-bezier(.2,.8,.2,1);
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--ms-black);
    color: var(--ms-white);

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

    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background: #050505;
}

body::-webkit-scrollbar-thumb {
    background: var(--ms-orange);
    border-radius: 20px;
}

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

button,
input {
    font: inherit;
}


/* =========================================================
   MAIN PAGE
========================================================= */

.ms-page {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(255, 105, 0, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(255, 105, 0, 0.06),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #030303 0%,
            #090909 48%,
            #030303 100%
        );
}


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

.ms-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

.ms-bg-grid {
    position: absolute;

    width: 200%;
    height: 200%;

    top: -50%;
    left: -50%;

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

    background-size: 55px 55px;

    transform:
        perspective(500px)
        rotateX(63deg);

    animation:
        msGridMove 20s linear infinite;
}

@keyframes msGridMove {

    0% {
        transform:
            perspective(500px)
            rotateX(63deg)
            translateY(-2%);
    }

    100% {
        transform:
            perspective(500px)
            rotateX(63deg)
            translateY(8%);
    }
}


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

.ms-orange-glow {
    position: absolute;

    border-radius: 50%;

    background: var(--ms-orange);

    filter: blur(100px);

    opacity: .13;

    animation:
        msGlowMove 8s ease-in-out infinite;
}

.ms-glow-one {
    width: 330px;
    height: 330px;

    right: -100px;
    top: 15%;
}

.ms-glow-two {
    width: 260px;
    height: 260px;

    left: -100px;
    bottom: 15%;

    animation-delay: -4s;
}

@keyframes msGlowMove {

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

    50% {
        transform:
            translate(30px,-30px)
            scale(1.2);
    }
}


/* =========================================================
   MOVING LIGHT LINES
========================================================= */

.ms-light-line {
    position: absolute;

    width: 2px;
    height: 180px;

    background:
        linear-gradient(
            transparent,
            var(--ms-orange),
            transparent
        );

    opacity: .35;

    transform: rotate(35deg);

    animation:
        msLightMove 7s linear infinite;
}

.ms-light-one {
    left: 20%;
    top: -200px;
}

.ms-light-two {
    right: 20%;
    top: -300px;

    animation-delay: -3s;
}

@keyframes msLightMove {

    0% {
        transform:
            translateY(0)
            rotate(35deg);
        opacity: 0;
    }

    15% {
        opacity: .5;
    }

    70% {
        opacity: .25;
    }

    100% {
        transform:
            translateY(120vh)
            rotate(35deg);
        opacity: 0;
    }
}


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

.ms-topbar {
    position: relative;
    z-index: 20;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            #c74700,
            var(--ms-orange),
            #c74700
        );

    box-shadow:
        0 3px 25px rgba(255,105,0,.18);
}

.ms-topbar-inner {
    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    min-height: 35px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    text-align: center;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
}

.ms-topbar strong {
    color: #050505;
}

.ms-topbar-pulse {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 12px #fff;

    animation:
        msTopPulse 1.3s infinite;
}

@keyframes msTopPulse {

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

    50% {
        opacity: .35;
        transform: scale(.55);
    }
}


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

.ms-header {
    position: relative;
    z-index: 15;

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

    background:
        rgba(0,0,0,.58);

    backdrop-filter: blur(14px);
}

.ms-header-inner {
    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    min-height: 75px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


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

.ms-logo {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ms-logo-icon {
    position: relative;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        2px solid var(--ms-orange);

    border-radius: 50%;

    color: var(--ms-orange);

    background:
        radial-gradient(
            circle,
            rgba(255,105,0,.16),
            transparent 65%
        );

    box-shadow:
        0 0 22px rgba(255,105,0,.25);

    animation:
        msLogoPulse 2.2s ease-in-out infinite;
}

@keyframes msLogoPulse {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(255,105,0,.15);
    }

    50% {
        box-shadow:
            0 0 35px rgba(255,105,0,.45);
    }
}

.ms-logo-bolt {
    font-size: 21px;
}

.ms-logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.ms-logo-text strong {
    color: var(--ms-orange);

    font-size: 15px;
    letter-spacing: .5px;
}

.ms-logo-text span {
    margin-top: 5px;

    color: #999;

    font-size: 6px;
    letter-spacing: 1.7px;
}

.ms-header-status {
    display: none;

    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border:
        1px solid rgba(255,105,0,.25);

    border-radius: 30px;

    color: var(--ms-orange);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ms-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--ms-orange);

    box-shadow:
        0 0 10px var(--ms-orange);

    animation:
        msStatusBlink 1.4s infinite;
}

@keyframes msStatusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}


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

.ms-hero {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    margin: auto;

    display: flex;
    flex-direction: column;
}


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

.ms-hero-content {
    position: relative;
    z-index: 10;

    padding-top: 65px;
}


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

.ms-small-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--ms-orange);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}

.ms-heading-line {
    width: 30px;
    height: 2px;

    background: var(--ms-orange);

    box-shadow:
        0 0 12px var(--ms-orange);
}


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

.ms-main-title {
    margin: 20px 0 0;

    font-size: clamp(
        49px,
        14vw,
        105px
    );

    line-height: .84;

    letter-spacing: -4px;

    font-weight: 900;
}

.ms-main-title span,
.ms-main-title strong {
    display: block;
}

.ms-main-title strong {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--ms-orange),
            #ffb15d,
            var(--ms-orange)
        );

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    animation:
        msOrangeText 4s linear infinite;

    filter:
        drop-shadow(
            0 0 15px rgba(255,105,0,.2)
        );
}

@keyframes msOrangeText {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 250% center;
    }
}

.ms-title-line {
    width: 70px;
    height: 3px;

    margin-top: 23px;

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

    box-shadow:
        0 0 15px rgba(255,105,0,.5);
}


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

.ms-main-description {
    max-width: 580px;

    margin: 22px 0 0;

    color: #a6a6a6;

    font-size: 14px;
    line-height: 1.8;
}

.ms-main-description strong {
    display: inline-block;

    margin-top: 7px;

    color: #dedede;
}


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

.ms-features {
    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 28px;
}

.ms-feature {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 10px;

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

    border-radius: 9px;

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

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

.ms-feature:hover {
    transform: translateX(6px);

    border-color:
        rgba(255,105,0,.3);

    background:
        rgba(255,105,0,.05);
}

.ms-feature-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: var(--ms-orange);

    background:
        rgba(255,105,0,.09);

    font-size: 14px;
}

.ms-feature-content {
    display: flex;
    flex-direction: column;
}

.ms-feature-content strong {
    font-size: 9px;
    letter-spacing: .8px;
}

.ms-feature-content span {
    margin-top: 3px;

    color: #777;

    font-size: 8px;
}


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

.ms-buttons {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 28px;
}

.ms-button {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 0 22px;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;

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

.ms-button i {
    font-style: normal;

    font-size: 18px;

    transition:
        transform .3s ease;
}

.ms-button:hover i {
    transform:
        translateX(5px);
}

.ms-button-orange {
    color: #080808;

    background:
        linear-gradient(
            100deg,
            var(--ms-orange-dark),
            var(--ms-orange),
            var(--ms-orange-light)
        );

    box-shadow:
        0 12px 35px rgba(255,105,0,.18);
}

.ms-button-orange:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(255,105,0,.35);
}

.ms-button-outline {
    color: var(--ms-white);

    border:
        1px solid rgba(255,105,0,.35);

    background:
        rgba(255,105,0,.035);
}

.ms-button-outline:hover {
    transform: translateY(-4px);

    color: var(--ms-orange);

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


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

.ms-contact-strip {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin-top: 30px;

    padding: 15px;

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

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

    border-radius: 10px;
}

.ms-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-contact-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: var(--ms-orange);

    background:
        rgba(255,105,0,.08);

    font-size: 11px;
}

.ms-contact-item div {
    display: flex;
    flex-direction: column;
}

.ms-contact-item small {
    color: #666;

    font-size: 6px;
    letter-spacing: 1px;
}

.ms-contact-item strong {
    margin-top: 3px;

    font-size: 8px;
}

.ms-contact-separator {
    width: 100%;
    height: 1px;

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


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

.ms-hero-visual {
    position: relative;

    width: 100%;
    min-height: 460px;

    display: grid;
    place-items: center;

    margin-top: 20px;
}


/* =========================================================
   ORBIT RINGS
========================================================= */

.ms-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(255,105,0,.13);

    transform:
        rotateX(65deg);

    pointer-events: none;
}

.ms-ring-one {
    width: 270px;
    height: 270px;

    animation:
        msRingSpin 11s linear infinite;
}

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

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

    animation:
        msRingSpinReverse 17s linear infinite;
}

.ms-ring-three {
    width: 450px;
    height: 450px;

    border-color:
        rgba(255,105,0,.06);

    animation:
        msRingSpin 25s linear infinite;
}

@keyframes msRingSpin {

    from {
        transform:
            rotateX(65deg)
            rotateZ(0);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }
}

@keyframes msRingSpinReverse {

    from {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(0);
    }
}


/* =========================================================
   BATTERY SCENE
========================================================= */

.ms-battery-scene {
    position: relative;

    width: 100%;
    height: 390px;

    display: grid;
    place-items: center;
}


/* =========================================================
   BATTERY SHADOW
========================================================= */

.ms-battery-shadow {
    position: absolute;

    width: 250px;
    height: 60px;

    bottom: 65px;

    border-radius: 50%;

    background:
        #000;

    filter: blur(25px);

    opacity: .75;

    animation:
        msShadowPulse 4s ease-in-out infinite;
}

@keyframes msShadowPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .65;
    }

    50% {
        transform: scale(.8);
        opacity: .4;
    }
}


/* =========================================================
   BATTERY BODY
========================================================= */

.ms-battery {
    position: relative;
    z-index: 5;

    width: 255px;

    transform:
        perspective(900px)
        rotateY(-9deg)
        rotateX(4deg);

    animation:
        msBatteryFloat 4.5s ease-in-out infinite;
}

@keyframes msBatteryFloat {

    0%,
    100% {
        transform:
            perspective(900px)
            rotateY(-9deg)
            rotateX(4deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(900px)
            rotateY(-9deg)
            rotateX(4deg)
            translateY(-17px);
    }
}

.ms-battery-terminal {
    position: absolute;

    top: -10px;
    right: 35px;

    width: 50px;
    height: 13px;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            90deg,
            #555,
            #ddd,
            #555
        );

    box-shadow:
        0 0 12px rgba(255,255,255,.2);
}

.ms-battery-main {
    position: relative;

    min-height: 285px;

    padding: 19px;

    overflow: hidden;

    border:
        1px solid rgba(255,105,0,.55);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #252525,
            #0b0b0b 55%,
            #181818
        );

    box-shadow:
        0 35px 70px rgba(0,0,0,.75),
        0 0 35px rgba(255,105,0,.11),
        inset 0 0 35px rgba(255,105,0,.04);
}

.ms-battery-main::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 34px,
            rgba(255,255,255,.025) 35px,
            transparent 36px
        );

    pointer-events: none;
}

.ms-battery-main::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: 40px;
    top: 55px;

    border-radius: 50%;

    background:
        var(--ms-orange);

    filter: blur(80px);

    opacity: .07;

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

@keyframes msBatteryGlow {

    0%,
    100% {
        opacity: .04;
        transform: scale(.8);
    }

    50% {
        opacity: .16;
        transform: scale(1.15);
    }
}


/* =========================================================
   BATTERY TOP
========================================================= */

.ms-battery-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ms-battery-top span {
    color: var(--ms-orange);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.ms-battery-top small {
    color: #777;

    font-size: 5px;
    letter-spacing: 1px;
}


/* =========================================================
   BATTERY CENTER
========================================================= */

.ms-battery-center {
    position: relative;
    z-index: 2;

    min-height: 155px;

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

    gap: 17px;
}

.ms-battery-energy-ring {
    position: relative;

    width: 83px;
    height: 83px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255,105,0,.5);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,105,0,.17),
            transparent 68%
        );

    box-shadow:
        0 0 35px rgba(255,105,0,.13);

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

.ms-battery-energy-ring::before,
.ms-battery-energy-ring::after {
    content: "";

    position: absolute;

    inset: -8px;

    border:
        1px solid rgba(255,105,0,.14);

    border-radius: 50%;
}

.ms-battery-energy-ring::after {
    inset: -17px;

    border-color:
        rgba(255,255,255,.05);
}

@keyframes msEnergyPulse {

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

        box-shadow:
            0 0 25px rgba(255,105,0,.08);
    }

    50% {
        transform: scale(1.08);

        box-shadow:
            0 0 45px rgba(255,105,0,.32);
    }
}

.ms-battery-energy-ring span {
    color: var(--ms-orange);

    font-size: 30px;

    filter:
        drop-shadow(
            0 0 10px var(--ms-orange)
        );

    animation:
        msBoltPulse 1.2s infinite;
}

@keyframes msBoltPulse {

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

    50% {
        transform: scale(1.18);
    }
}

.ms-battery-power {
    display: flex;
    flex-direction: column;
}

.ms-battery-power strong {
    font-size: 24px;
    line-height: 1;
}

.ms-battery-power span {
    margin-top: 5px;

    color: var(--ms-orange);

    font-size: 6px;
    letter-spacing: 2px;
}


/* =========================================================
   BATTERY CELLS
========================================================= */

.ms-battery-cells {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 4px;
}

.ms-battery-cells span {
    height: 21px;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #ff9a4b,
            var(--ms-orange-dark)
        );

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

    animation:
        msCellFlash 1.7s ease-in-out infinite;
}

.ms-battery-cells span:nth-child(2) {
    animation-delay: .12s;
}

.ms-battery-cells span:nth-child(3) {
    animation-delay: .24s;
}

.ms-battery-cells span:nth-child(4) {
    animation-delay: .36s;
}

.ms-battery-cells span:nth-child(5) {
    animation-delay: .48s;
}

.ms-battery-cells span:nth-child(6) {
    animation-delay: .60s;
}

.ms-battery-cells span:nth-child(7) {
    animation-delay: .72s;
}

.ms-battery-cells span:nth-child(8) {
    animation-delay: .84s;
}

@keyframes msCellFlash {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 15px rgba(255,105,0,.5);
    }
}


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

.ms-battery-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;

    margin-top: 15px;

    color: #666;

    font-size: 5px;
    letter-spacing: 1px;
}

.ms-battery-bottom strong {
    color: var(--ms-orange);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ms-floating-card {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 12px;

    border:
        1px solid rgba(255,105,0,.2);

    border-radius: 9px;

    background:
        rgba(10,10,10,.82);

    backdrop-filter: blur(12px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.4);

    animation:
        msFloatingCard 4s ease-in-out infinite;
}

.ms-floating-top {
    top: 25px;
    right: 0;
}

.ms-floating-bottom {
    left: 0;
    bottom: 35px;

    animation-delay: -2s;
}

@keyframes msFloatingCard {

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

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

.ms-floating-icon {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    color: var(--ms-orange);

    background:
        rgba(255,105,0,.08);

    font-size: 10px;
}

.ms-floating-card div {
    display: flex;
    flex-direction: column;
}

.ms-floating-card strong {
    font-size: 7px;
    letter-spacing: .5px;
}

.ms-floating-card small {
    margin-top: 3px;

    color: #777;

    font-size: 6px;
}


/* =========================================================
   PARTICLES
========================================================= */

.ms-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--ms-orange);

    box-shadow:
        0 0 12px var(--ms-orange);

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

.ms-particle-one {
    top: 18%;
    left: 20%;
}

.ms-particle-two {
    top: 35%;
    right: 13%;

    animation-delay: -1s;
}

.ms-particle-three {
    bottom: 18%;
    left: 18%;

    animation-delay: -2s;
}

.ms-particle-four {
    right: 25%;
    bottom: 30%;

    animation-delay: -3s;
}

.ms-particle-five {
    top: 22%;
    right: 35%;

    animation-delay: -4s;
}

.ms-particle-six {
    bottom: 15%;
    right: 45%;

    animation-delay: -1.5s;
}

@keyframes msParticleMove {

    0%,
    100% {
        opacity: .2;

        transform:
            translate(0,0)
            scale(.6);
    }

    50% {
        opacity: 1;

        transform:
            translate(25px,-35px)
            scale(1.4);
    }
}


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

.ms-visual-label {
    position: absolute;

    bottom: 5px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #666;

    font-size: 6px;
    letter-spacing: 1.8px;
    white-space: nowrap;
}

.ms-visual-label-line {
    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ms-orange)
        );
}

.ms-visual-label-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--ms-orange),
            transparent
        );
}


/* =========================================================
   COMING SOON SECTION
========================================================= */

.ms-coming-section {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 24px),
        1050px
    );

    margin: 55px auto 0;

    padding: 40px 20px;

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

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

.ms-section-tag {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--ms-orange);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}

.ms-section-tag span {
    width: 25px;
    height: 2px;

    background: var(--ms-orange);

    box-shadow:
        0 0 10px var(--ms-orange);
}

.ms-coming-content h2,
.ms-services-heading h2,
.ms-notify-content h2 {
    margin: 15px 0 0;

    font-size: clamp(
        34px,
        9vw,
        65px
    );

    line-height: .9;

    letter-spacing: -2px;
}

.ms-coming-content h2 span,
.ms-services-heading h2 span,
.ms-notify-content h2 span {
    color: var(--ms-orange);
}

.ms-coming-content p {
    max-width: 560px;

    margin: 15px 0 0;

    color: #777;

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


/* =========================================================
   PROGRESS
========================================================= */

.ms-progress {
    margin-top: 30px;
}

.ms-progress-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 9px;

    color: #666;

    font-size: 7px;
    letter-spacing: 1.3px;
}

.ms-progress-header strong {
    color: var(--ms-orange);
}

.ms-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

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

.ms-progress-bar {
    position: relative;

    width: 85%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--ms-orange-dark),
            var(--ms-orange),
            #ffae62
        );

    box-shadow:
        0 0 15px rgba(255,105,0,.45);

    animation:
        msProgressLoad 2.2s ease-out both;
}

@keyframes msProgressLoad {

    from {
        width: 0;
    }

    to {
        width: 85%;
    }
}

.ms-progress-bar span {
    position: absolute;

    top: 0;
    right: 0;

    width: 60px;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9)
        );

    filter: blur(3px);

    animation:
        msProgressShine 2s linear infinite;
}

@keyframes msProgressShine {

    from {
        transform: translateX(-70px);
    }

    to {
        transform: translateX(70px);
    }
}


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

.ms-services {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    margin: 80px auto 0;
}

.ms-service-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 13px;

    margin-top: 30px;
}

.ms-service-card {
    position: relative;

    min-height: 250px;

    padding: 24px;

    overflow: hidden;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #090909
        );

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

.ms-service-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    border-radius: 50%;

    background:
        var(--ms-orange);

    filter: blur(70px);

    opacity: .04;

    transition: opacity .4s ease;
}

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

    border-color:
        rgba(255,105,0,.35);

    box-shadow:
        0 25px 60px rgba(0,0,0,.4);
}

.ms-service-card:hover::before {
    opacity: .15;
}

.ms-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ms-service-top span {
    color: #444;

    font-size: 9px;
    font-weight: 900;
}

.ms-service-top i {
    color: var(--ms-orange);

    font-style: normal;

    font-size: 25px;

    filter:
        drop-shadow(
            0 0 8px rgba(255,105,0,.25)
        );
}

.ms-service-card h3 {
    max-width: 270px;

    margin: 35px 0 0;

    font-size: 21px;
    line-height: 1.05;
}

.ms-service-card p {
    max-width: 300px;

    margin: 12px 0 0;

    color: #777;

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

.ms-service-card a {
    position: absolute;

    left: 24px;
    bottom: 22px;

    color: var(--ms-orange);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* =========================================================
   NOTIFY
========================================================= */

.ms-notify {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    margin: 80px auto 0;

    padding: 40px 20px;

    overflow: hidden;

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

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255,105,0,.1),
            transparent 35%
        ),
        #0d0d0d;
}

.ms-notify::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 35%,
            rgba(255,255,255,.025),
            transparent 65%
        );

    transform: translateX(-100%);

    animation:
        msNotifyShine 6s linear infinite;
}

@keyframes msNotifyShine {

    to {
        transform: translateX(100%);
    }
}

.ms-notify-content p {
    max-width: 500px;

    margin: 15px 0 0;

    color: #777;

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

.ms-notify-form {
    position: relative;
    z-index: 2;

    margin-top: 25px;
}

.ms-input {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.ms-input input {
    width: 100%;
    height: 52px;

    padding: 0 16px;

    outline: none;

    color: white;

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

    border-radius: 7px;

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

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

.ms-input input::placeholder {
    color: #555;
}

.ms-input input:focus {
    border-color:
        rgba(255,105,0,.5);

    box-shadow:
        0 0 25px rgba(255,105,0,.08);
}

.ms-input button {
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    border: 0;
    border-radius: 7px;

    color: #080808;

    background:
        linear-gradient(
            100deg,
            var(--ms-orange-dark),
            var(--ms-orange),
            var(--ms-orange-light)
        );

    cursor: pointer;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;

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

.ms-input button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(255,105,0,.3);
}

.ms-input button i {
    font-style: normal;

    font-size: 18px;
}


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

.ms-footer {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 24px),
        var(--ms-container)
    );

    margin: 50px auto 0;

    padding: 25px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

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

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

.ms-footer-icon {
    color: var(--ms-orange);

    font-size: 18px;

    filter:
        drop-shadow(
            0 0 8px rgba(255,105,0,.35)
        );
}

.ms-footer-logo div:last-child {
    display: flex;
    flex-direction: column;
}

.ms-footer-logo strong {
    color: var(--ms-orange);

    font-size: 11px;
    letter-spacing: 1px;
}

.ms-footer-logo span {
    margin-top: 3px;

    color: #555;

    font-size: 5px;
    letter-spacing: 1.3px;
}

.ms-footer-text {
    color: #444;

    font-size: 6px;
    letter-spacing: 1.5px;
}

.ms-footer-social {
    display: flex;
    gap: 7px;
}

.ms-footer-social a {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

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

    border-radius: 6px;

    color: #666;

    font-size: 7px;

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

.ms-footer-social a:hover {
    transform: translateY(-3px);

    color: var(--ms-orange);

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


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

@media (min-width: 600px) {

    .ms-header-status {
        display: flex;
    }

    .ms-features {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .ms-feature {
        padding: 9px;
    }

    .ms-buttons {
        flex-direction: row;
    }

    .ms-button {
        min-width: 160px;
    }

    .ms-contact-strip {
        flex-direction: row;
        align-items: center;

        width: max-content;
    }

    .ms-contact-separator {
        width: 1px;
        height: 30px;
    }

    .ms-service-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .ms-input {
        flex-direction: row;
    }

    .ms-input input {
        flex: 1;
    }

    .ms-input button {
        width: 155px;
        flex: 0 0 155px;
    }

    .ms-footer {
        flex-direction: row;
        justify-content: space-between;
    }
}


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

@media (min-width: 900px) {

    .ms-topbar-inner {
        min-height: 38px;

        font-size: 9px;
    }

    .ms-header-inner {
        min-height: 85px;
    }

    .ms-logo-icon {
        width: 50px;
        height: 50px;
    }

    .ms-logo-text strong {
        font-size: 17px;
    }

    .ms-logo-text span {
        font-size: 6.5px;
    }

    .ms-hero {
        min-height: 720px;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        align-items: center;

        gap: 20px;
    }

    .ms-hero-content {
        padding-top: 0;
    }

    .ms-main-title {
        font-size: clamp(
            65px,
            6.5vw,
            100px
        );

        letter-spacing: -6px;
    }

    .ms-main-description {
        font-size: 15px;
    }

    .ms-hero-visual {
        min-height: 650px;

        margin-top: 0;
    }

    .ms-battery {
        width: 335px;
    }

    .ms-battery-main {
        min-height: 370px;
    }

    .ms-battery-center {
        min-height: 200px;
    }

    .ms-battery-energy-ring {
        width: 110px;
        height: 110px;
    }

    .ms-battery-energy-ring span {
        font-size: 40px;
    }

    .ms-ring-one {
        width: 390px;
        height: 390px;
    }

    .ms-ring-two {
        width: 500px;
        height: 500px;
    }

    .ms-ring-three {
        width: 620px;
        height: 620px;
    }

    .ms-floating-top {
        top: 90px;
        right: 5%;
    }

    .ms-floating-bottom {
        bottom: 100px;
        left: 3%;
    }

    .ms-coming-section {
        padding: 60px 50px;
    }

    .ms-notify {
        padding: 65px;
    }

    .ms-notify-inner {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 70px;

        align-items: center;
    }

    .ms-notify-form {
        margin-top: 0;
    }
}


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

@media (min-width: 1200px) {

    .ms-hero {
        min-height: 790px;
    }

    .ms-main-title {
        font-size: 98px;
    }

    .ms-main-description {
        max-width: 610px;

        font-size: 16px;
    }

    .ms-hero-visual {
        min-height: 700px;
    }

    .ms-battery {
        width: 390px;
    }

    .ms-battery-main {
        min-height: 420px;

        padding: 25px;
    }

    .ms-battery-center {
        min-height: 225px;
    }

    .ms-ring-one {
        width: 450px;
        height: 450px;
    }

    .ms-ring-two {
        width: 570px;
        height: 570px;
    }

    .ms-ring-three {
        width: 700px;
        height: 700px;
    }

    .ms-floating-card {
        padding: 13px 16px;
    }

    .ms-floating-top {
        right: 8%;
    }

    .ms-floating-bottom {
        left: 0;
    }
}


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

@media (max-width: 380px) {

    .ms-topbar-inner {
        font-size: 7px;
        min-height: 32px;
    }

    .ms-header-inner {
        min-height: 68px;
    }

    .ms-logo-icon {
        width: 38px;
        height: 38px;
    }

    .ms-logo-text strong {
        font-size: 12px;
    }

    .ms-main-title {
        font-size: 43px;
        letter-spacing: -3px;
    }

    .ms-main-description {
        font-size: 12px;
    }

    .ms-hero-visual {
        min-height: 390px;
    }

    .ms-battery {
        width: 220px;
    }

    .ms-battery-main {
        min-height: 245px;

        padding: 15px;
    }

    .ms-battery-center {
        min-height: 130px;
    }

    .ms-battery-energy-ring {
        width: 70px;
        height: 70px;
    }

    .ms-battery-energy-ring span {
        font-size: 26px;
    }

    .ms-battery-power strong {
        font-size: 20px;
    }

    .ms-ring-one {
        width: 230px;
        height: 230px;
    }

    .ms-ring-two {
        width: 300px;
        height: 300px;
    }

    .ms-ring-three {
        width: 365px;
        height: 365px;
    }

    .ms-floating-card {
        transform: scale(.78);
    }

    .ms-floating-top {
        right: -17px;
    }

    .ms-floating-bottom {
        left: -17px;
    }

    .ms-visual-label {
        font-size: 5px;
    }
}


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

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553e3e4 *//* =========================================================
   MS HYBRID BATTERY REPLACEMENT
   PREMIUM COMING SOON CSS
   Mobile First + High Animation
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --ms-bg: #05080d;
    --ms-bg-2: #080e16;
    --ms-card: rgba(12, 22, 32, 0.72);

    --ms-white: #ffffff;
    --ms-text: #d9e3eb;
    --ms-muted: #8495a5;

    --ms-green: #32f29a;
    --ms-green-2: #0ed67d;
    --ms-cyan: #25d9ff;

    --ms-border: rgba(255,255,255,0.09);

    --ms-container: 1380px;

    --ms-radius: 22px;

    --ms-transition: 0.35s cubic-bezier(.2,.8,.2,1);
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--ms-bg);
    color: var(--ms-white);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background: #030507;
}

body::-webkit-scrollbar-thumb {
    background: var(--ms-green);
    border-radius: 20px;
}

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

button,
input {
    font: inherit;
}


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

.ms-coming-soon {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(37, 217, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 65%,
            rgba(50, 242, 154, 0.06),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #030609 0%,
            #071018 48%,
            #030609 100%
        );
}


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

.ms-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ms-grid {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;

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

    transform:
        perspective(500px)
        rotateX(65deg)
        translateY(-8%);

    animation: msGridMove 18s linear infinite;
}

@keyframes msGridMove {
    0% {
        transform:
            perspective(500px)
            rotateX(65deg)
            translateY(-8%);
    }

    100% {
        transform:
            perspective(500px)
            rotateX(65deg)
            translateY(8%);
    }
}


.ms-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.18;
    animation: msGlowFloat 8s ease-in-out infinite;
}

.ms-glow-1 {
    width: 300px;
    height: 300px;
    top: 5%;
    right: -100px;
    background: var(--ms-green);
}

.ms-glow-2 {
    width: 280px;
    height: 280px;
    left: -120px;
    top: 45%;
    background: var(--ms-cyan);
    animation-delay: -3s;
}

.ms-glow-3 {
    width: 220px;
    height: 220px;
    right: 20%;
    bottom: 5%;
    background: var(--ms-green);
    animation-delay: -5s;
}

@keyframes msGlowFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -35px) scale(1.15);
    }
}


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

.ms-header {
    position: relative;
    z-index: 20;

    width: min(
        calc(100% - 32px),
        var(--ms-container)
    );

    margin: 0 auto;
    padding: 22px 0;

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

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

.ms-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-logo-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(50,242,154,0.5);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(50,242,154,0.18),
            rgba(37,217,255,0.08)
        );

    box-shadow:
        0 0 25px rgba(50,242,154,0.15);

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

@keyframes msLogoPulse {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(50,242,154,0.1);
    }

    50% {
        box-shadow:
            0 0 35px rgba(50,242,154,0.35);
    }
}

.ms-logo-bolt {
    color: var(--ms-green);
    font-size: 19px;
}

.ms-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.ms-logo-text strong {
    font-size: 12px;
    letter-spacing: 1.3px;
}

.ms-logo-text small {
    margin-top: 4px;
    color: var(--ms-muted);
    font-size: 6.5px;
    letter-spacing: 1.7px;
}

.ms-header-status {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 1px solid rgba(50,242,154,0.18);
    border-radius: 30px;

    color: var(--ms-green);

    background: rgba(50,242,154,0.04);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.ms-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ms-green);

    box-shadow:
        0 0 8px var(--ms-green);

    animation: msStatusBlink 1.5s ease-in-out infinite;
}

@keyframes msStatusBlink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.65);
    }
}


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

.ms-hero {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 32px),
        var(--ms-container)
    );

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

.ms-hero-content {
    position: relative;
    z-index: 5;

    padding-top: 70px;
}


/* =========================================================
   EYEBROW
========================================================= */

.ms-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--ms-green);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ms-eyebrow-line {
    width: 25px;
    height: 1px;

    background: var(--ms-green);

    box-shadow:
        0 0 10px var(--ms-green);
}


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

.ms-title {
    margin: 20px 0 0;

    font-size: clamp(
        44px,
        12vw,
        100px
    );

    line-height: .91;
    letter-spacing: -3px;
    font-weight: 900;
}

.ms-title-line {
    display: block;
}

.ms-title-highlight {
    display: block;

    color: transparent;

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

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    animation:
        msGradientMove 4s linear infinite,
        msTitleGlow 3s ease-in-out infinite;
}

@keyframes msGradientMove {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 250% center;
    }
}

@keyframes msTitleGlow {
    0%,
    100% {
        filter:
            drop-shadow(
                0 0 10px rgba(50,242,154,.15)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 25px rgba(50,242,154,.4)
            );
    }
}


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

.ms-description {
    max-width: 580px;

    margin: 24px 0 0;

    color: var(--ms-muted);

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


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

.ms-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 30px;
}

.ms-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    padding: 0 22px;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;

    transition:
        transform var(--ms-transition),
        box-shadow var(--ms-transition),
        background var(--ms-transition);
}

.ms-btn-primary {
    color: #031009;

    background:
        linear-gradient(
            100deg,
            var(--ms-green),
            #83ffc5
        );

    box-shadow:
        0 12px 40px rgba(50,242,154,0.18);
}

.ms-btn-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 50px rgba(50,242,154,0.35);
}

.ms-btn-arrow {
    font-size: 20px;
    transition: transform .3s ease;
}

.ms-btn-primary:hover .ms-btn-arrow {
    transform: translateX(5px);
}

.ms-btn-secondary {
    color: var(--ms-white);

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

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

    backdrop-filter: blur(12px);
}

.ms-btn-secondary:hover {
    transform: translateY(-5px);

    border-color:
        rgba(50,242,154,.35);

    background:
        rgba(50,242,154,.06);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.ms-trust-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;

    margin-top: 35px;
}

.ms-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-trust-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(50,242,154,.2);
    border-radius: 9px;

    color: var(--ms-green);

    background:
        rgba(50,242,154,.05);

    font-size: 12px;
}

.ms-trust-item div {
    display: flex;
    flex-direction: column;
}

.ms-trust-item strong {
    font-size: 10px;
}

.ms-trust-item small {
    margin-top: 3px;
    color: var(--ms-muted);
    font-size: 8px;
}


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

.ms-hero-visual {
    position: relative;

    width: 100%;
    min-height: 410px;

    margin-top: 35px;

    display: grid;
    place-items: center;
}


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

.ms-orbit {
    position: absolute;

    border: 1px solid rgba(50,242,154,.12);

    border-radius: 50%;

    transform: rotateX(65deg);

    pointer-events: none;
}

.ms-orbit-1 {
    width: 270px;
    height: 270px;

    animation:
        msOrbitSpin 12s linear infinite;
}

.ms-orbit-2 {
    width: 340px;
    height: 340px;

    border-color:
        rgba(37,217,255,.09);

    animation:
        msOrbitSpinReverse 18s linear infinite;
}

.ms-orbit-3 {
    width: 420px;
    height: 420px;

    border-color:
        rgba(50,242,154,.06);

    animation:
        msOrbitSpin 25s linear infinite;
}

@keyframes msOrbitSpin {
    from {
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }
}

@keyframes msOrbitSpinReverse {
    from {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }
}


/* =========================================================
   BATTERY
========================================================= */

.ms-battery {
    position: relative;
    z-index: 5;

    width: 245px;

    transform:
        perspective(800px)
        rotateY(-8deg)
        rotateX(4deg);

    animation:
        msBatteryFloat 4s ease-in-out infinite;
}

@keyframes msBatteryFloat {
    0%,
    100% {
        transform:
            perspective(800px)
            rotateY(-8deg)
            rotateX(4deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(800px)
            rotateY(-8deg)
            rotateX(4deg)
            translateY(-16px);
    }
}

.ms-battery-terminal {
    position: absolute;

    top: -10px;
    right: 35px;

    width: 45px;
    height: 13px;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            90deg,
            #68737a,
            #d7e0e4,
            #606b72
        );

    box-shadow:
        0 0 12px rgba(255,255,255,.2);
}

.ms-battery-body {
    position: relative;

    min-height: 275px;

    padding: 20px;

    overflow: hidden;

    border: 1px solid rgba(50,242,154,.45);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #17232c,
            #071016 55%,
            #0b1b20
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        inset 0 0 40px rgba(50,242,154,.035),
        0 0 35px rgba(50,242,154,.12);
}

.ms-battery-body::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 38px,
            rgba(255,255,255,.025) 39px,
            transparent 40px
        );

    pointer-events: none;
}

.ms-battery-body::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: 45px;
    left: 30px;

    border-radius: 50%;

    background:
        var(--ms-green);

    filter: blur(100px);

    opacity: .08;

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

@keyframes msBatteryGlow {
    0%,
    100% {
        opacity: .05;
        transform: scale(.8);
    }

    50% {
        opacity: .15;
        transform: scale(1.2);
    }
}

.ms-battery-top,
.ms-battery-footer {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ms-battery-brand {
    color: var(--ms-white);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.ms-battery-voltage {
    color: var(--ms-green);

    font-size: 6px;
    letter-spacing: 1px;
}


/* =========================================================
   ENERGY
========================================================= */

.ms-battery-energy {
    position: relative;
    z-index: 2;

    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ms-energy-ring {
    position: relative;

    width: 85px;
    height: 85px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(50,242,154,.35);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50,242,154,.14),
            transparent 65%
        );

    box-shadow:
        0 0 30px rgba(50,242,154,.12);

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

.ms-energy-ring::before,
.ms-energy-ring::after {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(50,242,154,.12);
}

.ms-energy-ring::after {
    inset: -17px;
    border-color: rgba(37,217,255,.08);
}

@keyframes msEnergyRing {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 25px rgba(50,242,154,.1);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 0 45px rgba(50,242,154,.28);
    }
}

.ms-energy-bolt {
    color: var(--ms-green);

    font-size: 32px;

    filter:
        drop-shadow(
            0 0 10px var(--ms-green)
        );

    animation:
        msBoltPulse 1.3s ease-in-out infinite;
}

@keyframes msBoltPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

.ms-energy-text {
    display: flex;
    flex-direction: column;
}

.ms-energy-text strong {
    font-size: 25px;
    line-height: 1;
}

.ms-energy-text span {
    margin-top: 5px;

    color: var(--ms-green);

    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   BATTERY CELLS
========================================================= */

.ms-battery-cells {
    position: relative;
    z-index: 2;

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

    gap: 5px;
}

.ms-battery-cells span {
    height: 22px;

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #32f29a,
            #0c9e60
        );

    box-shadow:
        0 0 10px rgba(50,242,154,.15);

    animation:
        msCellPulse 1.8s ease-in-out infinite;
}

.ms-battery-cells span:nth-child(2) {
    animation-delay: .15s;
}

.ms-battery-cells span:nth-child(3) {
    animation-delay: .3s;
}

.ms-battery-cells span:nth-child(4) {
    animation-delay: .45s;
}

.ms-battery-cells span:nth-child(5) {
    animation-delay: .6s;
}

.ms-battery-cells span:nth-child(6) {
    animation-delay: .75s;
}

@keyframes msCellPulse {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 16px rgba(50,242,154,.5);
    }
}


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

.ms-battery-footer {
    position: relative;
    z-index: 2;

    margin-top: 16px;

    color: #6d7d88;

    font-size: 5.5px;
    letter-spacing: 1px;
}

.ms-battery-indicator {
    color: var(--ms-green);
}


/* =========================================================
   PARTICLES
========================================================= */

.ms-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--ms-green);

    box-shadow:
        0 0 12px var(--ms-green);

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

.ms-particle-1 {
    top: 17%;
    left: 20%;
}

.ms-particle-2 {
    top: 35%;
    right: 15%;
    animation-delay: -1s;
}

.ms-particle-3 {
    bottom: 18%;
    left: 18%;
    animation-delay: -2s;
}

.ms-particle-4 {
    bottom: 28%;
    right: 25%;
    animation-delay: -3s;
}

.ms-particle-5 {
    top: 25%;
    right: 35%;
    animation-delay: -4s;
}

.ms-particle-6 {
    bottom: 12%;
    right: 45%;
    animation-delay: -1.5s;
}

@keyframes msParticleFloat {
    0%,
    100% {
        transform:
            translate(0,0)
            scale(.7);

        opacity: .25;
    }

    50% {
        transform:
            translate(
                20px,
                -35px
            )
            scale(1.4);

        opacity: 1;
    }
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ms-floating-card {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 12px;

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

    background:
        rgba(8,16,23,.78);

    backdrop-filter: blur(14px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

    animation:
        msCardFloat 4s ease-in-out infinite;
}

.ms-card-top {
    top: 25px;
    right: 0;
}

.ms-card-bottom {
    bottom: 25px;
    left: 0;

    animation-delay: -2s;
}

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

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

.ms-card-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: var(--ms-green);

    background:
        rgba(50,242,154,.08);

    font-size: 10px;
}

.ms-floating-card div {
    display: flex;
    flex-direction: column;
}

.ms-floating-card strong {
    font-size: 8px;
}

.ms-floating-card small {
    margin-top: 2px;

    color: var(--ms-muted);

    font-size: 7px;
}


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

.ms-launch-section {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 32px),
        1000px
    );

    margin: 50px auto 0;

    padding: 35px 20px;

    border-top: 1px solid var(--ms-border);
    border-bottom: 1px solid var(--ms-border);
}

.ms-launch-label {
    color: var(--ms-green);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ms-launch-line {
    width: 45px;
    height: 2px;

    margin: 10px 0;

    background:
        linear-gradient(
            90deg,
            var(--ms-green),
            transparent
        );
}

.ms-launch-content h2 {
    margin: 0;

    font-size: 30px;
    line-height: 1;
}

.ms-launch-content h2 span {
    color: var(--ms-green);
}

.ms-launch-content p {
    max-width: 550px;

    margin: 15px 0 0;

    color: var(--ms-muted);

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


/* =========================================================
   ENERGY METER
========================================================= */

.ms-energy-meter {
    margin-top: 30px;
}

.ms-meter-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 9px;

    color: var(--ms-muted);

    font-size: 8px;
    letter-spacing: 1px;
}

.ms-meter-header strong {
    color: var(--ms-green);
}

.ms-meter-track {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

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

.ms-meter-fill {
    position: relative;

    width: 85%;
    height: 100%;

    border-radius: inherit;

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

    box-shadow:
        0 0 18px rgba(50,242,154,.45);

    animation:
        msMeterLoad 2.5s ease-out both;
}

@keyframes msMeterLoad {
    from {
        width: 0;
    }

    to {
        width: 85%;
    }
}

.ms-meter-glow {
    position: absolute;

    top: 0;
    right: 0;

    width: 60px;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9)
        );

    filter: blur(3px);

    animation:
        msMeterShine 2s linear infinite;
}

@keyframes msMeterShine {
    from {
        transform: translateX(-80px);
    }

    to {
        transform: translateX(80px);
    }
}


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

.ms-services {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 32px),
        var(--ms-container)
    );

    margin: 80px auto 0;
}

.ms-section-heading h2 {
    max-width: 600px;

    margin: 18px 0 0;

    font-size: clamp(
        34px,
        9vw,
        65px
    );

    line-height: .95;
    letter-spacing: -2px;
}

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

.ms-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;

    margin-top: 35px;
}

.ms-service-card {
    position: relative;

    min-height: 270px;

    padding: 25px;

    overflow: hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(17,29,39,.85),
            rgba(7,13,19,.65)
        );

    transition:
        transform var(--ms-transition),
        border-color var(--ms-transition),
        box-shadow var(--ms-transition);
}

.ms-service-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -80px;
    right: -80px;

    border-radius: 50%;

    background: var(--ms-green);

    filter: blur(90px);

    opacity: .04;

    transition: opacity .4s ease;
}

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

    border-color:
        rgba(50,242,154,.3);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);
}

.ms-service-card:hover::before {
    opacity: .13;
}

.ms-service-number {
    color: rgba(255,255,255,.22);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ms-service-icon {
    margin-top: 30px;

    font-size: 30px;

    filter:
        drop-shadow(
            0 0 12px rgba(50,242,154,.3)
        );
}

.ms-service-card h3 {
    max-width: 230px;

    margin: 18px 0 0;

    font-size: 21px;
    line-height: 1.1;
}

.ms-service-card p {
    max-width: 280px;

    margin: 12px 0 0;

    color: var(--ms-muted);

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

.ms-service-arrow {
    position: absolute;

    right: 25px;
    bottom: 22px;

    color: var(--ms-green);

    font-size: 25px;

    transition: transform .3s ease;
}

.ms-service-card:hover .ms-service-arrow {
    transform:
        translate(5px,-5px);
}


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

.ms-contact {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 32px),
        var(--ms-container)
    );

    margin: 80px auto 0;

    padding: 40px 22px;

    border: 1px solid rgba(50,242,154,.12);
    border-radius: var(--ms-radius);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(50,242,154,.08),
            transparent 35%
        ),
        rgba(10,20,28,.7);

    overflow: hidden;
}

.ms-contact::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,255,255,.025) 50%,
            transparent 65%
        );

    transform: translateX(-100%);

    animation:
        msContactShine 6s linear infinite;
}

@keyframes msContactShine {
    to {
        transform: translateX(100%);
    }
}

.ms-contact-label {
    color: var(--ms-green);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ms-contact h2 {
    max-width: 500px;

    margin: 15px 0 0;

    font-size: 36px;
    line-height: .95;
    letter-spacing: -1.5px;
}

.ms-contact h2 span {
    color: var(--ms-green);
}

.ms-contact p {
    max-width: 500px;

    margin: 15px 0 0;

    color: var(--ms-muted);

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


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

.ms-notify-form {
    position: relative;
    z-index: 2;

    margin-top: 25px;
}

.ms-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-input-wrap input {
    width: 100%;
    height: 52px;

    padding: 0 17px;

    outline: none;

    color: var(--ms-white);

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

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

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

.ms-input-wrap input::placeholder {
    color: #667581;
}

.ms-input-wrap input:focus {
    border-color:
        rgba(50,242,154,.45);

    box-shadow:
        0 0 25px rgba(50,242,154,.07);
}

.ms-input-wrap button {
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    border: 0;
    border-radius: 11px;

    color: #031009;

    background:
        linear-gradient(
            100deg,
            var(--ms-green),
            #8dffd0
        );

    cursor: pointer;

    font-size: 11px;
    font-weight: 900;

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

.ms-input-wrap button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(50,242,154,.25);
}


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

.ms-footer {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 32px),
        var(--ms-container)
    );

    margin: 50px auto 0;

    padding: 25px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

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

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

.ms-footer-bolt {
    color: var(--ms-green);
    font-size: 17px;
}

.ms-footer-logo span:last-child {
    display: flex;
    flex-direction: column;
}

.ms-footer-logo strong {
    font-size: 10px;
    letter-spacing: 1px;
}

.ms-footer-logo small {
    margin-top: 3px;

    color: var(--ms-muted);

    font-size: 5px;
    letter-spacing: 1.4px;
}

.ms-footer-center {
    color: #55636d;

    font-size: 7px;
    letter-spacing: 1.5px;
}

.ms-footer-right {
    display: flex;
    gap: 7px;
}

.ms-footer-right a {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

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

    color: #7f909b;

    font-size: 7px;

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

.ms-footer-right a:hover {
    color: var(--ms-green);

    border-color:
        rgba(50,242,154,.35);

    transform: translateY(-3px);
}


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

.ms-cursor-glow {
    position: fixed;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50,242,154,.06),
            transparent 70%
        );

    pointer-events: none;

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

    z-index: 999;

    opacity: 0;

    transition: opacity .3s ease;
}


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

@media (min-width: 600px) {

    .ms-header {
        padding: 25px 0;
    }

    .ms-actions {
        flex-direction: row;
    }

    .ms-btn {
        min-width: 160px;
    }

    .ms-trust-points {
        grid-template-columns:
            repeat(3, auto);

        justify-content: start;
    }

    .ms-hero-visual {
        min-height: 500px;
    }

    .ms-battery {
        width: 290px;
    }

    .ms-battery-body {
        min-height: 320px;
    }

    .ms-energy-ring {
        width: 100px;
        height: 100px;
    }

    .ms-energy-bolt {
        font-size: 38px;
    }

    .ms-service-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .ms-input-wrap {
        flex-direction: row;
    }

    .ms-input-wrap input {
        flex: 1;
    }

    .ms-input-wrap button {
        width: 150px;
        flex: 0 0 150px;
    }

    .ms-footer {
        flex-direction: row;
        justify-content: space-between;
    }
}


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

@media (min-width: 900px) {

    .ms-header {
        padding: 30px 0;
    }

    .ms-logo-mark {
        width: 44px;
        height: 44px;
    }

    .ms-logo-text strong {
        font-size: 14px;
    }

    .ms-logo-text small {
        font-size: 7px;
    }

    .ms-header-status {
        padding: 9px 14px;
        font-size: 9px;
    }

    .ms-hero {
        min-height: 680px;

        display: grid;
        grid-template-columns:
            1.05fr .95fr;

        align-items: center;
    }

    .ms-hero-content {
        padding-top: 0;
    }

    .ms-title {
        font-size: clamp(
            62px,
            6.3vw,
            100px
        );

        letter-spacing: -5px;
    }

    .ms-description {
        font-size: 16px;
    }

    .ms-hero-visual {
        min-height: 650px;
        margin-top: 0;
    }

    .ms-battery {
        width: 330px;
    }

    .ms-battery-body {
        min-height: 365px;
        padding: 25px;
    }

    .ms-battery-energy {
        min-height: 190px;
    }

    .ms-energy-ring {
        width: 115px;
        height: 115px;
    }

    .ms-energy-bolt {
        font-size: 43px;
    }

    .ms-orbit-1 {
        width: 360px;
        height: 360px;
    }

    .ms-orbit-2 {
        width: 460px;
        height: 460px;
    }

    .ms-orbit-3 {
        width: 570px;
        height: 570px;
    }

    .ms-card-top {
        top: 100px;
        right: 5%;
    }

    .ms-card-bottom {
        bottom: 105px;
        left: 3%;
    }

    .ms-launch-section {
        padding: 55px 50px;
    }

    .ms-launch-content h2 {
        font-size: 45px;
    }

    .ms-services {
        margin-top: 120px;
    }

    .ms-contact {
        margin-top: 120px;
        padding: 70px;
    }

    .ms-contact-inner {
        display: grid;
        grid-template-columns:
            1fr 1fr;

        align-items: center;
        gap: 60px;
    }

    .ms-contact h2 {
        font-size: 55px;
    }

    .ms-notify-form {
        margin-top: 0;
    }
}


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

@media (min-width: 1200px) {

    .ms-hero {
        min-height: 760px;
    }

    .ms-title {
        font-size: 94px;
    }

    .ms-description {
        max-width: 600px;
    }

    .ms-battery {
        width: 370px;
    }

    .ms-battery-body {
        min-height: 400px;
    }

    .ms-orbit-1 {
        width: 430px;
        height: 430px;
    }

    .ms-orbit-2 {
        width: 540px;
        height: 540px;
    }

    .ms-orbit-3 {
        width: 680px;
        height: 680px;
    }

    .ms-floating-card {
        padding: 13px 16px;
    }

    .ms-card-top {
        right: 7%;
    }

    .ms-card-bottom {
        left: 2%;
    }
}


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

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

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

}


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

@media (max-width: 380px) {

    .ms-header {
        width: calc(100% - 24px);
    }

    .ms-hero,
    .ms-services,
    .ms-footer {
        width: calc(100% - 24px);
    }

    .ms-title {
        font-size: 40px;
        letter-spacing: -2.5px;
    }

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

    .ms-hero-visual {
        min-height: 350px;
    }

    .ms-battery {
        width: 210px;
    }

    .ms-battery-body {
        min-height: 240px;
        padding: 16px;
    }

    .ms-energy-ring {
        width: 70px;
        height: 70px;
    }

    .ms-energy-bolt {
        font-size: 27px;
    }

    .ms-energy-text strong {
        font-size: 20px;
    }

    .ms-orbit-1 {
        width: 230px;
        height: 230px;
    }

    .ms-orbit-2 {
        width: 290px;
        height: 290px;
    }

    .ms-orbit-3 {
        width: 350px;
        height: 350px;
    }

    .ms-floating-card {
        transform: scale(.8);
    }

    .ms-card-top {
        right: -15px;
    }

    .ms-card-bottom {
        left: -15px;
    }

}/* End custom CSS */