/* .heading-fonts {
    font-size: clamp(42px, 5vw, 90px);
} */

.heading-fonts {
    font-size: clamp(38px, 2vw, 90px);
}

.span-fonts {
    font-size: clamp(18px, 1vw, 90px);
}

.bst {
    border-top: 1px solid rgba(var(--border-color), var(--border-opacity));
    border-bottom: 1px solid rgba(var(--border-color), var(--border-opacity));
}

.txt-short {
    color: #337bb8;
    font-weight: 700;
}

.landsky-showcase {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(circle at 75% 50%,
            rgba(255, 153, 0, 0.08),
            transparent 35%),
        #080b10;
    color: #ffffff;
}

.landsky-container {
    width: min(1400px, 92%);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

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

.section-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #ff9d00;
    margin-bottom: 25px;
}

.section-tag span {
    width: 35px;
    height: 2px;
    background: linear-gradient(90deg, #ff9d00, transparent);
}

.product-content h2 {
    font-size: clamp(42px, 5vw, 78px);
    line-height: 0.95;
    margin: 0;
    font-weight: 800;
    letter-spacing: -3px;
}

.product-content h2 span {
    color: #ff9d00;
    text-shadow: 0 0 25px rgba(255, 157, 0, 0.15);
}

.product-content h3 {
    margin-top: 12px;
    font-size: 20px;
    letter-spacing: 6px;
    color: #7d838d;
    font-weight: 500;
}

.description {
    max-width: 620px;
    color: #a5aab3;
    font-size: 16px;
    line-height: 1.9;
    margin-top: 25px;
}

/* Highlight */
.highlight-line {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 35px 0;
}

.highlight-line .line {
    width: 3px;
    height: 50px;
    background: linear-gradient(to bottom, #ff9d00, transparent);
}

.highlight-line p {
    margin: 0;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.5;
}

.home-desc-letter {
    color: var(--dominant-font-color);
    font-size: 50px;
}

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

/* =========================================
   PREMIUM BLUE TECHNOLOGY FEATURE CARDS
========================================= */

.feature-grid-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
    margin: 0;
    z-index: 9;
}

/* FEATURE CARD */

.feature-item-left {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 76px;
    padding: 12px 18px 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(57, 161, 255, 0.22);
    background: linear-gradient(135deg,
            rgba(20, 40, 70, 0.78),
            rgba(5, 12, 25, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* LEFT BLUE GLOW */

.feature-item-left::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #00a8ff, transparent);
    opacity: 0.7;
}

/* TOP SHINE */

.feature-item-left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(62, 181, 255, 0.7),
            transparent);
    opacity: 0.6;
}

/* HOVER */

.feature-item-left:hover {
    transform: translateX(8px);
    border-color: rgba(0, 170, 255, 0.75);
    background: linear-gradient(135deg,
            rgba(15, 55, 100, 0.85),
            rgba(4, 15, 35, 0.95));
    box-shadow:
        0 0 12px rgba(0, 153, 255, 0.18),
        0 0 35px rgba(0, 115, 255, 0.12),
        inset 0 0 20px rgba(0, 120, 255, 0.05);
}

/* =========================================
   BLUE CIRCULAR ICON
========================================= */

.feature-icon-left {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #42c7ff;
    font-size: 20px;
    background: radial-gradient(circle at 35% 30%,
            rgba(0, 170, 255, 0.2),
            rgba(5, 25, 55, 0.8) 65%);
    border: 1px solid rgba(0, 170, 255, 0.55);
    box-shadow:
        inset 0 0 12px rgba(0, 170, 255, 0.12),
        0 0 12px rgba(0, 150, 255, 0.12);
    z-index: 2;
}

/* ICON GLOW ON HOVER */

.feature-item-left:hover .feature-icon-left {
    color: #ffffff;
    border-color: #37bfff;
    box-shadow:
        0 0 10px rgba(0, 174, 255, 0.4),
        0 0 22px rgba(0, 120, 255, 0.2),
        inset 0 0 12px rgba(0, 170, 255, 0.25);
}

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

.feature-item-left>div:last-child {
    position: relative;
    z-index: 2;
}

.feature-item-left strong {
    display: block;
    margin-bottom: 5px;
    color: #f1f7ff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.feature-item-left span {
    display: block;
    color: #7f9ab5;
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1199px) {
    .feature-grid-left {
        width: 270px;
    }
}

@media (max-width: 991px) {}

@media (max-width: 576px) {
    .feature-grid-left {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    .image-frame {
        width: 100%;
        max-width: 600px;
        /* margin-left: 130px; */
    }
}

.feature-grid-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
    margin: 0;
    z-index: 9;
}

/* FEATURE CARD */

.feature-item-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 76px;
    padding: 12px 18px 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(57, 161, 255, 0.22);
    background: linear-gradient(135deg,
            rgba(20, 40, 70, 0.78),
            rgba(5, 12, 25, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* LEFT BLUE GLOW */

.feature-item-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #00a8ff, transparent);
    opacity: 0.7;
}

/* TOP SHINE */

.feature-item-right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(62, 181, 255, 0.7),
            transparent);
    opacity: 0.6;
}

/* HOVER */

.feature-item-right:hover {
    transform: translateX(8px);
    border-color: rgba(0, 170, 255, 0.75);
    background: linear-gradient(135deg,
            rgba(15, 55, 100, 0.85),
            rgba(4, 15, 35, 0.95));
    box-shadow:
        0 0 12px rgba(0, 153, 255, 0.18),
        0 0 35px rgba(0, 115, 255, 0.12),
        inset 0 0 20px rgba(0, 120, 255, 0.05);
}

/* =========================================
   BLUE CIRCULAR ICON
========================================= */

.feature-icon-right {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #42c7ff;
    font-size: 20px;
    background: radial-gradient(circle at 35% 30%,
            rgba(0, 170, 255, 0.2),
            rgba(5, 25, 55, 0.8) 65%);
    border: 1px solid rgba(0, 170, 255, 0.55);
    box-shadow:
        inset 0 0 12px rgba(0, 170, 255, 0.12),
        0 0 12px rgba(0, 150, 255, 0.12);
    z-index: 2;
}

/* ICON GLOW ON HOVER */

.feature-item-right:hover .feature-icon-right {
    color: #ffffff;
    border-color: #37bfff;
    box-shadow:
        0 0 10px rgba(0, 174, 255, 0.4),
        0 0 22px rgba(0, 120, 255, 0.2),
        inset 0 0 12px rgba(0, 170, 255, 0.25);
}

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

.feature-item-right>div:last-child {
    position: relative;
    z-index: 2;
}

.feature-item-right strong {
    display: block;
    margin-bottom: 5px;
    color: #f1f7ff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.feature-item-right span {
    display: block;
    color: #7f9ab5;
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1199px) {
    .feature-grid-right {
        width: 270px;
    }
}

@media (min-width: 992px) {
    .image-frame {
        width: 100%;
        max-width: 600px;
        /* margin-left: 130px; */
    }
}

@media (max-width: 991px) {}

@media (max-width: 576px) {
    .feature-grid-right {
        grid-template-columns: 1fr;
    }
}

/* BUTTON */
.product-btn {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
    padding: 16px 25px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 157, 0, 0.5);
    transition: 0.3s;
}

.product-btn span {
    color: #ff9d00;
    font-size: 22px;
    transition: 0.3s;
}

.product-btn:hover {
    background: #ff9d00;
    color: #000;
}

.product-btn:hover span {
    color: #000;
    transform: translateX(6px);
}

/* =========================
        PRODUCT IMAGE AREA
        ========================= */

.product-visual {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-frame {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-frame::before {
    content: "";
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 255, 0.12), transparent 70%);
    filter: blur(20px);
    z-index: -1;
}

.street-light {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    transition:
        opacity 1.8s ease-in-out,
        filter 1.8s ease-in-out;
}

/* OFF IMAGE */
.image-off {
    opacity: 1;
    z-index: 1;
}

/* ON IMAGE */
.image-on {
    opacity: 0;
    z-index: 2;
    animation: lightSwitch 7s infinite ease-in-out;
}

@keyframes lightSwitch {

    /* Light OFF */
    0% {
        opacity: 0;
        filter: brightness(1);
    }

    35% {
        opacity: 0;
        filter: brightness(1);
    }

    /* Smoothly turning ON */
    48% {
        opacity: 1;
        /* filter: brightness(1.1) drop-shadow(0 0 25px rgba(255, 170, 0, 0.35)); */
    }

    /* Light remains ON */
    75% {
        opacity: 1;
        /* filter: brightness(1.15) drop-shadow(0 0 45px rgba(255, 170, 0, 0.55)); */
    }

    /* Turns OFF */
    100% {
        opacity: 0;
        filter: brightness(1);
    }
}

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

.product-status {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8d949f;
    font-size: 10px;
    letter-spacing: 2px;
    z-index: 5;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9d00;
    box-shadow: 0 0 15px #ff9d00;
}

/* Bottom Label */

.illumination-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 3px;
    color: #777e89;
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9d00;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 157, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 157, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 157, 0, 0);
    }
}

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

.ambient-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(150px);
    pointer-events: none;
}

.glow-1 {
    top: -250px;
    right: -100px;
    background: rgba(255, 157, 0, 0.06);
}

.glow-2 {
    bottom: -300px;
    left: -150px;
    background: rgba(255, 255, 255, 0.025);
}

/* =========================
        RESPONSIVE
        ========================= */
@media (max-width: 991px) {
    .landsky-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-visual {
        min-height: 500px;
        order: -1;
    }

    /* .feature-grid {
        grid-template-columns: 1fr 1fr;
    } */
}

@media (max-width: 576px) {
    .landsky-showcase {
        padding: 70px 0;
    }

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

    /* .feature-grid {
        grid-template-columns: 1fr;
    } */

    .product-visual {
        min-height: 400px;
    }

    .section-tag {
        font-size: 10px;
        letter-spacing: 2px;
    }
}

/***********************************
*  Smart IOT Features Showcase CSS *
************************************/

.specification-showcase {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(circle at 50% 45%,
            rgba(0, 115, 255, 0.14),
            transparent 30%),
        radial-gradient(circle at 15% 50%,
            rgba(0, 170, 255, 0.06),
            transparent 30%),
        #070b14;
    color: #fff;
}

.smart-feature-grid {
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
    margin: 0;
    /* z-index: 9; */
}

/* SMART FEATURE CARD */
.smart-feature-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 12px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg,
            rgba(25, 42, 65, 0.95),
            rgba(9, 17, 30, 0.95));
    border: 1px solid rgba(0, 168, 255, 0.18);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: all 0.4s ease;
}

/* LEFT BLUE GLOW */

.smart-feature-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #00a8ff, transparent);
    box-shadow: 0 0 10px #00a8ff;
}

/* TOP SHINE */
.smart-feature-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00a8ff, transparent);
    opacity: 0.7;
}

/* HOVER */
.smart-feature-item:hover {
    transform: translateX(8px);
    border-color: rgba(0, 190, 255, 0.7);
    background: linear-gradient(135deg,
            rgba(20, 65, 100, 0.95),
            rgba(8, 20, 38, 0.98));
    box-shadow:
        0 0 15px rgba(0, 168, 255, 0.18),
        0 0 40px rgba(0, 115, 255, 0.12),
        0 15px 35px rgba(0, 0, 0, 0.35);
}

.smart-feature-item:hover .smart-feature-icon {
    color: #ffffff;
    border-color: #39d5ff;
    box-shadow:
        0 0 10px rgba(0, 200, 255, 0.7),
        0 0 25px rgba(0, 115, 255, 0.3);
}

/* =========================================
   BLUE CIRCULAR ICON
========================================= */

.smart-feature-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #39d5ff;
    font-size: 18px;
    background: radial-gradient(circle at 35% 30%,
            rgba(0, 168, 255, 0.22),
            rgba(0, 40, 80, 0.85));
    border: 1px solid rgba(0, 168, 255, 0.55);
    box-shadow:
        0 0 15px rgba(0, 168, 255, 0.16),
        inset 0 0 12px rgba(0, 168, 255, 0.1);
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
}

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

.smart-feature-item>div:last-child {
    position: relative;
    z-index: 2;
}

.smart-feature-item strong {
    display: block;
    color: #f2f8ff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}

.smart-feature-item span {
    display: block;
    color: #7890a8;
    font-size: 10px;
    line-height: 1.4;
}

/* =========================================
   Dual Feature Showcase
========================================= */

:root {
    --ls-bg: #02070c;
    --ls-bg2: #06101a;
    --ls-panel: #07121d;
    --ls-panel2: #091824;
    --ls-green: #72f51b;
    --ls-green2: #3bdc30;
    --ls-blue: #00a7ff;
    --ls-cyan: #08d8ff;
    --ls-white: #f6f8fb;
    --ls-muted: #a9b5c0;
    --ls-line: rgba(123, 224, 255, 0.2);
    --ls-line-soft: rgba(255, 255, 255, 0.1);
    --ls-radius: 22px;
}

.ls-product-section {
    width: 100%;
    min-height: 100vh;
    padding: 14px 16px;
    /* background:
        radial-gradient(circle at 73% 39%,
            rgba(0, 145, 255, 0.16),
            transparent 28%),
        radial-gradient(circle at 28% 73%,
            rgba(99, 255, 34, 0.07),
            transparent 22%),
        linear-gradient(145deg, #02060a 0%, #030b12 45%, #01070d 100%); */
    /* overflow: hidden; */
}

.ls-shell {
    width: min(1505px, 100%);
    margin: auto;
    position: relative;
    border: 1px solid rgba(156, 199, 222, 0.25);
    border-radius: 28px;
    padding: 28px 30px 12px;
    background:
        radial-gradient(circle at 74% 46%,
            rgba(0, 122, 220, 0.09),
            transparent 25%),
        linear-gradient(180deg, rgba(3, 11, 18, 0.94), rgba(1, 7, 12, 0.98));
    /* box-shadow:
        inset 0 0 80px rgba(0, 150, 255, 0.035),
        0 30px 90px rgba(0, 0, 0, 0.45); */
}

/* top brand */
.ls-topbar {
    min-height: 96px;
    display: grid;
    grid-template-columns: 260px 1fr 190px;
    align-items: start;
    gap: 25px;
    position: relative;
    /* z-index: 10; */
}

.ls-brand img {
    width: 235px;
    height: auto;
    display: block;
    object-fit: contain;
}

.ls-smart-pills {
    width: max-content;
    min-width: 395px;
    margin: 47px auto 0;
    padding: 10px 30px;
    border-radius: 40px;
    background: linear-gradient(90deg,
            rgba(0, 72, 132, 0.18),
            rgba(0, 20, 39, 0.7));
    border: 1px solid rgba(0, 166, 255, 0.65);
    box-shadow: 0 0 30px rgba(0, 125, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.ls-smart-pills span {
    color: #ffffff;
}

.ls-smart-pills i {
    display: block;
    width: 1px;
    height: 15px;
    background: var(--ls-green);
}

.ls-warranty {
    text-align: right;
}

.ls-warranty img {
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* hero */
.ls-main-grid {
    display: grid;
    grid-template-columns: 54% 46%;
    min-height: 455px;
    align-items: center;
    position: relative;
}

.ls-copy {
    position: relative;
    /* z-index: 5; */
    padding: 8px 15px 0;
}

.ls-eyebrow {
    /* display:none; */
    color: var(--ls-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.ls-copy h1 {
    margin: 0;
    font-family: var(--section-heading-font-family);
    text-transform: var(--section-heading-font-text);
    font-weight: var(--section-heading-font-weight);
    font-style: var(--section-heading-font-style);
    line-height: var(--section-heading-font-line-height);
    font-size: 42px;
    /* line-height: 0.94;
    font-weight: 900;
    letter-spacing: -2px; */
    /* text-transform: uppercase; */
    color: #f7f8fa;
    white-space: nowrap;
    text-shadow: 0 2px 25px rgba(0, 0, 0, 0.45);
}

.ls-green {
    color: var(--ls-green);
}

.ls-blue {
    color: var(--ls-blue);
}

.ls-tagline {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1;
    /* letter-spacing: 10px; */
    font-weight: 700;
    color: #f3f5f8;
}

.ls-description {
    max-width: 610px;
    margin: 25px 0 25px;
    color: #d4dce4;
    font-size: 18px;
    line-height: 1.55;
}

.ls-description strong {
    color: var(--ls-green);
    font-style: italic;
}

.ls-feature-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    max-width: 650px;
}

.ls-feature {
    min-height: 142px;
    padding: 0 15px;
    border-right: 1px solid rgba(164, 201, 222, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ls-feature b {
    color: var(--ls-white);
}

.ls-feature:first-child {
    padding-left: 0;
}

.ls-feature:last-child {
    border-right: 0;
}

.ls-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--ls-green);
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    box-shadow:
        0 0 18px rgba(114, 245, 27, 0.07),
        inset 0 0 14px rgba(0, 150, 255, 0.05);
}

.ls-icon::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(0, 167, 255, 0.55);
}

.ls-icon i {
    position: relative;
    z-index: 2;
    font-size: 25px;
    color: var(--ls-cyan);
}

.ls-feature:first-child .ls-icon i,
.ls-feature:nth-child(2) .ls-icon i,
.ls-feature:nth-child(3) .ls-icon i {
    color: var(--ls-green);
}

.ls-feature b {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.ls-feature small {
    margin-top: 9px;
    color: #aeb9c3;
    font-size: 11px;
    line-height: 1.25;
}

/* product visual */
.ls-product-visual {
    height: 100%;
    min-height: 455px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ls-city-glow {
    position: absolute;
    width: 720px;
    height: 300px;
    right: 170px;
    top: -52px;
    /* right: -70px;
    bottom: 10px; */
    background: radial-gradient(ellipse at center, rgba(0, 156, 255, 0.5) 0%, rgba(0, 111, 205, 0.1) 32%, transparent 70%);
    /* background: radial-gradient(ellipse at center,
            rgba(0, 156, 255, 0.2) 0%,
            rgba(0, 111, 205, 0.09) 32%,
            transparent 70%); */
    filter: blur(28px);
    pointer-events: none;
}

.ls-product-lines {
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse at 54% 48%,
            transparent 0 45px,
            rgba(0, 177, 255, 0.07) 46px 47px,
            transparent 48px 78px);
    mask-image: linear-gradient(to bottom,
            transparent,
            #000 28%,
            #000 75%,
            transparent);
    opacity: 0.55;
    pointer-events: none;
}

.ls-light-combination {
    position: relative;
    display: contents;
}

.ls-product-image {
    /* width:min(720px,110%); */
    width: 100%;
    /* max-height: 530px; */
    object-fit: contain;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 28px 25px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 28px rgba(0, 145, 255, 0.08));
    transform: translate(5%, -3%);
    /* Smooth edge dissolve */
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        #000 55%,
        rgba(0,0,0,.95) 65%,
        rgba(0,0,0,.65) 78%,
        rgba(0,0,0,.25) 90%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse at center,
        #000 55%,
        rgba(0,0,0,.95) 65%,
        rgba(0,0,0,.65) 78%,
        rgba(0,0,0,.25) 90%,
        transparent 100%
    );
}

/* lower section */
.ls-lower-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 30px;
    margin-top: 10px;
    align-items: center;
}

.ls-mode-panel {
    min-height: 300px;
    border: 1px solid rgba(115, 245, 27, 0.25);
    border-radius: 20px;
    background: linear-gradient(145deg,
            rgba(7, 19, 28, 0.88),
            rgba(3, 10, 16, 0.92));
    padding: 18px 14px 14px;
    position: relative;
}

.ls-panel-title {
    color: var(--ls-green);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 16px 24px;
}

.ls-panel-title span {
    color: #baf58b;
}

.ls-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
}

.ls-mode-card {
    height: 232px;
    position: relative;
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid rgba(0, 166, 255, 0.35);
    background: #03070b;
}

.ls-mode-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

.ls-warm-mode {
    border-color: rgba(255, 180, 45, 0.35);
}

.ls-mode-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.18) 0%,
            transparent 42%,
            rgba(0, 0, 0, 0.55) 100%);
}

.ls-mode-content {
    position: absolute;
    top: 18px;
    left: 23px;
    z-index: 2;
}

.ls-mode-content h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: var(--ls-blue);
}

.ls-mode-content p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #dce4eb;
}

.ls-warm-mode .ls-mode-content h3 {
    color: var(--ls-green);
}

.ls-mode-temperature {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 3;
    padding: 7px 13px;
    border-radius: 20px;
    background: rgba(2, 9, 14, 0.73);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11px;
    color: #f2f4f6;
}

.ls-mode-switch {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    pointer-events: none;
}

.ls-mode-switch span {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #061015;
    border: 1px solid var(--ls-green);
    box-shadow: 0 0 25px rgba(113, 245, 27, 0.15);
}

.ls-mode-switch i {
    color: var(--ls-green);
    font-size: 22px;
}

/* software */
.ls-software-panel {
    min-height: 300px;
    display: block;
    /* display: grid; */
    /* grid-template-columns: 37% 63%; */
    align-items: center;
    position: relative;
}

.ls-software-copy {
    padding: 5px 0 0 5px;
    position: relative;
    z-index: 3;
}

.ls-software-title {
    display: flex;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0.5px;
}

.ls-software-title span {
    display: block;
    color: var(--ls-green);
}

.ls-software-title span:nth-child(2) {
    display: block;
    color: var(--ls-blue);
}

.ls-software-copy>p {
    color: #d2dae2;
    font-size: 14px;
    line-height: 1.45;
    margin: 13px 0 13px;
}

.ls-software-copy ul {
    margin: 0;
    padding: 0;
    display: grid;
    list-style: none;
    grid-template-columns: 15% 15% 15% 15% 15% 15%;
}

.ls-software-copy li {
    font-size: 13px;
    margin: 7px 0;
    color: #e3e8ed;
}

.ls-software-copy li i {
    color: var(--ls-green);
    margin-right: 9px;
}

.ls-software-image {
    height: 330px;
    display: grid;
    grid-template-columns: 50% 50%;
    /* display: flex; */
    /* align-items: flex-end; */
    /* justify-content: flex-end; */
    overflow: visible;
}

.ls-software-image img {
    width: 100%;
    max-width: 590px;
    height: auto;
    object-fit: contain;
    transform: translate(3%, 4%);
    filter: drop-shadow(0 22px 25px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 24px rgba(0, 120, 255, 0.08));
}

/* specification strip */
.ls-spec-strip {
    min-height: 110px;
    margin-top: 14px;
    border: 1px solid rgba(100, 180, 230, 0.18);
    border-radius: 17px;
    background: linear-gradient(90deg,
            rgba(6, 17, 27, 0.95),
            rgba(3, 12, 20, 0.95));
    display: grid;
    grid-template-columns: 0.8fr 0.85fr 1fr 1.15fr 0.9fr 0.9fr 0.9fr 2fr;
    overflow: hidden;
}

.ls-spec {
    min-height: 100px;
    border-right: 1px solid rgba(100, 180, 230, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.ls-spec strong {
    color: var(--ls-green);
    font-size: 28px;
    line-height: 1;
}

.ls-spec>span {
    color: #eef3f7;
    font-size: 13px;
    margin-top: 2px;
}

.ls-spec small {
    color: #aab5bf;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 6px;
}

.ls-spec i {
    font-size: 28px;
    color: var(--ls-green);
    margin-bottom: 7px;
}

.ls-spec:nth-child(5) i {
    color: #6e9be8;
}

.ls-performance {
    margin: 16px 20px;
    border: 1px solid rgba(0, 155, 255, 0.55);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(90deg,
            rgba(0, 53, 87, 0.23),
            rgba(2, 17, 28, 0.8));
}

.ls-headphone {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(0, 124, 205, 0.12);
    color: var(--ls-cyan);
    font-size: 28px;
}

.ls-performance strong,
.ls-performance span {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
}

.ls-performance strong {
    color: var(--ls-green);
}

.ls-performance span {
    color: var(--ls-green);
    margin-top: 4px;
}

/* subtle branded motion */
@media (prefers-reduced-motion: no-preference) {
    .ls-product-image {
        animation: lsFloat 7s ease-in-out infinite;
    }

    .ls-city-glow {
        animation: lsGlow 6s ease-in-out infinite;
    }

    .ls-icon {
        animation: lsPulse 4s ease-in-out infinite;
    }

    @keyframes lsFloat {

        0%,
        100% {
            transform: translate(5%, -3%) translateY(0);
        }

        50% {
            transform: translate(5%, -3%) translateY(-7px);
        }
    }

    @keyframes lsGlow {

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

        50% {
            opacity: 1;
            transform: scale(1.06);
        }
    }

    @keyframes lsPulse {

        0%,
        100% {
            box-shadow: 0 0 18px rgba(114, 245, 27, 0.06);
        }

        50% {
            box-shadow: 0 0 28px rgba(114, 245, 27, 0.14);
        }
    }
}


/* =========================================
    Dual Light On OFF Animation
==========================================*/

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

.landsky-led {
    z-index: 3;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    line-height: 0;
    overflow: visible;
    position: absolute;
    isolation: isolate;
}

/* =========================================
OFF IMAGE
YE KABHI CHANGE NAHI HOGI
========================================= */

.landsky-base {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* =========================================
ALL OVERLAY IMAGES
========================================= */

.landsky-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /*
    Smooth natural transition
    */
    transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

/* =========================================
WHITE LEFT LED PANEL
========================================= */

.white-left {
    /*
    LEFT PANEL ONLY
    top    = 22%
    right  = 50%
    bottom = 48%
    left   = 34%
    */
    /* clip-path: inset(10% 20% 48% 20%); */
    clip-path: inset(14% 50% 49% 25%);
}

/* =========================================
WARM LEFT LED PANEL
========================================= */

.warm-left {
    /* clip-path: inset(10% 20% 48% 20%); */
    clip-path: inset(14% 50% 49% 25%);
}

/* =========================================
WHITE RIGHT LED PANEL
========================================= */

.white-right {
    /*
    RIGHT PANEL ONLY
    */
    /* clip-path: inset(10% 33% 48% 51%); */
    clip-path: inset(14% 24% 48% 51%);
}


/* =========================================
WARM RIGHT LED PANEL
========================================= */

.warm-right {
    /* clip-path: inset(10% 33% 48% 51%); */
    clip-path: inset(14% 24% 48% 51%);
}

/* =========================================
WHITE ON
========================================= */

.landsky-led.state-white .white-left,
.landsky-led.state-white .white-right {
    opacity: 1;
    visibility: visible;
}

/* =========================================
WARM ON
========================================= */

.landsky-led.state-warm .warm-left,
.landsky-led.state-warm .warm-right {
    opacity: 1;
    visibility: visible;
}

/* =========================================
OFF
========================================= */

.landsky-led.state-off .landsky-overlay {
    opacity: 0;
    visibility: visible;
}

/* =========================================
Laptop and Mobile screen css
========================================= */
/* =========================================================
    LANDSKY SOFTWARE SHOWCASE
    Premium Device + iframe presentation
========================================================= */
.ls-software-showcase {
    --desktop-width: 1440;
    --desktop-height: 900;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    overflow: visible;
    isolation: isolate;
}
/* =========================================================
BACKGROUND AMBIENT GLOW
========================================================= */
.ls-software-showcase::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 65%;
    left: 15%;
    top: 20%;
    background: radial-gradient(ellipse, rgba(0, 194, 255, 0.14), transparent 70%);
    filter: blur(45px);
    z-index: -2;
    pointer-events: none;
}
/* =========================================================
DEVICE STAGE
========================================================= */
.ls-software-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    overflow: visible;
    transform-style: preserve-3d;
}
/* =========================================================
COMMON DEVICE
========================================================= */
.ls-device {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
    transform-style: preserve-3d;
    user-select: none;
    -webkit-user-select: none;
}
/* =========================================================
LAPTOP
========================================================= */
.ls-laptop {
    width: min(760px, 82vw);
    z-index: 2;
    transform: translateX(25px) translateY(0) scale(1);
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
}
/* Laptop hover */
.ls-software-showcase:hover .ls-laptop {
    transform: translateX(10px) translateY(-5px) scale(1.015);
}
/* =========================================================
MOBILE
========================================================= */
.ls-mobile {
    width: min(190px, 20vw);
    z-index: 5;
    margin-left: -22px;
    margin-bottom: 65px;
    transform: translateY(0) rotateY(-3deg) scale(1);
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
}
/* Mobile hover */
.ls-software-showcase:hover .ls-mobile {
    transform: translateY(-10px) rotateY(-3deg) scale(1.025);
}
/* =========================================================
DEVICE FRAME
========================================================= */
.ls-device-frame {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 30px 35px rgba(0,0,0,.55));
}
/* =========================================================
COMMON SCREEN
========================================================= */
.ls-screen {
    position: absolute;
    overflow: hidden;
    background: #02070b;
    z-index: 2;
}
/* =========================================================
LAPTOP SCREEN
========================================================= */
.ls-laptop-screen {
    /*
    These values are based on your laptop-frame.
    Fine tune only these 4 values if your frame changes.
    */
    top: 5.7%;
    left: 7.8%;
    width: 84.4%;
    height: 72.2%;
    border-radius: 1.5%;
    overflow: hidden;
    background: #02070b;
    box-shadow: inset 0 0 0 1px rgba(0,200,255,.08), inset 0 0 35px rgba(0,0,0,.45);
}
/* =========================================================
DESKTOP VIEWPORT
========================================================= */
.ls-desktop-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #02070b;
}
/* =========================================================
DESKTOP IFRAME
========================================================= */
.ls-desktop-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 900px;
    border: 0;
    display: block;
    background: #02070b;
    transform-origin: top left;
    /*
    IMPORTANT:
    DO NOT use width:100%
    Desktop software must remain 1440px.
    */
    will-change: transform;
    color-scheme: dark;
}
/* =========================================================
MOBILE SCREEN
========================================================= */
.ls-mobile-screen {
    top: 3.5%;
    left: 6.5%;
    width: 87%;
    height: 93%;
    border-radius: 7%;
    overflow: hidden;
    background: #02070b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 25px rgba(0,0,0,.5);
}
/* =========================================================
MOBILE IFRAME
========================================================= */
.ls-mobile-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #02070b;
    /*
    IMPORTANT:
    Mobile iframe is responsive.
    */
    color-scheme: dark;
}
/* =========================================================
SCREEN REFLECTION
========================================================= */
.ls-screen-reflection {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: .18;
    background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 18%, transparent 75%, rgba(255,255,255,.035));
    mix-blend-mode: screen;
    border-radius: inherit;
}
/* =========================================================
LAPTOP LIGHT GLOW
========================================================= */
.ls-laptop::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -8%;
    height: 20px;
    background: radial-gradient( ellipse, rgba(0,190,255,.20), transparent 70%);
    filter: blur(15px);
    z-index: -1;
    pointer-events: none;
}
/* =========================================================
MOBILE LIGHT GLOW
========================================================= */
.ls-mobile::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -5%;
    height: 30px;
    background: radial-gradient( ellipse, rgba(0,190,255,.22), transparent 70%);
    filter: blur(15px);
    z-index: -1;
    pointer-events: none;
}

/* =========================================
   RESPONSIVE
========================================= */
/* @media (min-width: 1440px) { */

@media (min-width: 1400px) {}

@media (max-width: 1199px) {
    .smart-feature-grid {
        width: 270px;
    }
}

/* ========================================
   LARGE DESKTOP / 2K SCREENS
   1921px - 2560px
======================================== */
@media (min-width: 1921px) and (max-width: 2560px) {
    .slide-img {
        width: 100%;
    }

    .span-fonts {
        font-size: clamp(38px, 0vw, 90px);
    }

    .landsky-led {
        max-width: 700px;
    }

}

/* ========================================
   FULL HD / LARGE DESKTOP
   1441px - 1920px
======================================== */
@media (min-width: 1441px) and (max-width: 1920px) {
    .landsky-led {
        max-width: 600px;
    }
}

/* ========================================
   LAPTOP / SMALL DESKTOP
   1201px - 1440px
======================================== */
@media (min-width: 1201px) and (max-width: 1440px) {
    .heading-fonts {
        font-size: clamp(40px, 3vw, 90px);
    }

    .span-fonts {
        font-size: clamp(18px, 0vw, 90px);
    }

    .landsky-led {
        max-width: 340px;
    }
}

/* ========================================
   SMALL LAPTOP
   1025px - 1200px
======================================== */
@media (min-width: 1025px) and (max-width: 1200px) {
    /* =====================================
    Dual Feature Showcase
    =======================================*/

    .ls-shell {
        padding: 24px 22px 12px;
    }

    .ls-topbar {
        grid-template-columns: 210px 1fr 130px;
    }

    .ls-brand img {
        width: 200px;
    }

    .ls-smart-pills {
        min-width: 330px;
        padding: 9px 18px;
        gap: 14px;
    }

    .ls-copy h1 {
        font-size: 57px;
    }

    .ls-tagline {
        font-size: 19px;
        letter-spacing: 7px;
    }

    .ls-feature {
        padding: 0 8px;
    }

    .ls-feature b {
        font-size: 11px;
    }

    .ls-feature small {
        font-size: 9px;
    }

    .ls-lower-grid {
        gap: 18px;
    }

    .ls-software-panel {
        grid-template-columns: 40% 60%;
    }

    .landsky-led {
        max-width: 480px;
    }
}

@media (max-width: 991px) {
    .smart-feature-grid {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .feature-grid-right {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 30px;
        order: 2;
    }

    .feature-grid-left {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .feature-icon-right {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .rigt .product-status {
        top: 25px;
        left: 0px;
        display: none;
    }

    .product-status {
        right: 85px;
    }

    .landsky-led {
        max-width: 500px;
    }
}

/* ========================================
TABLET LANDSCAPE
769px - 1024px
======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .heading-fonts {
        font-size: clamp(30px, 3vw, 90px);
    }

    .span-fonts {
        font-size: clamp(16px, 1vw, 90px);
    }

    .feature-item-left strong,
    .feature-item-right strong {
        font-size: 14px;
    }

    .feature-grid-left,
    .feature-grid-right {
        width: auto;
        /* width: 242px; */
    }

    .smart-feature-icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }

    .section-pt {
        padding-bottom: 50px;
    }

    .w-85 {
        width: 100% !important;
    }

    .footer-area .footer-list .ft-list a.ft-title {
        padding-top: 0px;
        border-top: 0px;
    }

    .landsky-led {
        max-width: 450px;
    }

    .ls-software-showcase {
        max-width: 720px;
        min-height: 280px;
    }
    .ls-laptop {
        width: min(610px, 78vw);
        transform: translateX(15px);
    }
    .ls-mobile {
        width: min(155px, 19vw);
        margin-left: -50px;
    }
}

/* ========================================
   TABLET PORTRAIT
   601px - 768px
======================================== */
@media (min-width: 601px) and (max-width: 768px) {
    .heading-fonts {
        font-size: clamp(24px, 3vw, 90px);
    }

    .span-fonts {
        font-size: clamp(14px, 1vw, 90px);
    }

    .feature-grid-left {
        position: absolute;
        left: 30px;
        top: 50%;
        width: auto;
        transform: translateY(-50%);
    }

    .feature-grid-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
    }

    .footer-area .footer-list .ft-list a.ft-title {
        padding-top: 0px;
        border-top: 0px;
    }

    .smart-feature-grid {
        display: flex;
    }

    .feature-icon-right,
    .feature-icon-left {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .contact-icon {
        color: #ffff;
    }

    .brand-sub {
        display: block !important;
    }

    .side-actions {
        top: 65%;
    }

    .copyright {
        display: flex;
    }

    .hot-spot3 .start-150 {
        left: 135% !important;
        top: 0px;
    }

    /* =====================================
    Dual Feature Showcase
    =======================================*/
    .ls-product-section {
        padding: 7px;
    }

    .ls-shell {
        border-radius: 18px;
        padding: 18px 14px 10px;
    }

    .ls-topbar {
        grid-template-columns: 1fr 100px;
        min-height: auto;
    }

    .ls-brand img {
        width: 175px;
    }

    .ls-smart-pills {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        margin: 8px 0 0;
        font-size: 9px;
        letter-spacing: 2px;
        padding: 8px 10px;
        gap: 10px;
    }

    .ls-warranty {
        text-align: right;
    }

    .ls-warranty img {
        width: 95px;
    }

    .ls-main-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: 15px;
    }

    .ls-copy {
        padding: 0 3px;
    }

    .ls-copy h1 {
        white-space: normal;
        font-size: 42px;
        line-height: 0.98;
        letter-spacing: -1px;
    }

    .ls-tagline {
        font-size: 15px;
        letter-spacing: 4px;
    }

    .ls-description {
        font-size: 14px;
        line-height: 1.5;
        margin: 17px 0 20px;
    }

    .ls-feature-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        row-gap: 16px;
    }

    .ls-feature {
        min-height: 125px;
    }

    .ls-feature:nth-child(2) {
        border-right: 0;
    }

    .ls-feature:nth-child(5) {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .ls-product-visual {
        min-height: 330px;
        margin-top: 5px;
    }

    .ls-product-image {
        width: 115%;
        transform: none;
    }

    .ls-lower-grid {
        grid-template-columns: 1fr;
        margin-top: 8px;
    }

    .ls-mode-panel {
        padding: 14px 10px;
    }

    .ls-mode-grid {
        grid-template-columns: 1fr;
    }

    .ls-mode-card {
        height: 210px;
    }

    .ls-mode-switch {
        display: none;
    }

    .ls-software-panel {
        grid-template-columns: 1fr;
        padding-top: 10px;
    }

    .ls-software-copy {
        padding: 0 6px;
    }

    .ls-software-image {
        height: auto;
        margin-top: 0;
    }

    .ls-software-image img {
        width: 115%;
        max-width: none;
        transform: translateX(-4%);
    }

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

    .ls-spec {
        min-height: 95px;
    }

    .ls-performance {
        grid-column: 1 / -1;
        min-height: 80px;
        margin: 10px;
    }

    .landsky-led {
        max-width: 420px;
        width: 90%;
    }

    .ls-software-showcase {
        min-height: 230px;
        padding: 10px 0;
    }
    .ls-laptop {
        width: 75vw;
        transform: translateX(12px);
    }
    .ls-mobile {
        width: 22vw;
        min-width: 105px;
        margin-left: -35px;
        margin-bottom: -2px;
    }
    .ls-laptop-screen {
        border-radius: 1%;
    }
    .ls-mobile-screen {
        border-radius: 6%;
    }
}

/* ========================================
   LARGE MOBILE
   481px - 600px
======================================== */
@media (min-width: 481px) and (max-width: 600px) {
    .landsky-led {
        max-width: 400px;
        width: 90%;
    }
}

/* ========================================
   Medium MOBILE
   576px
======================================== */
@media (max-width: 576px) {
    .product-status {
        left: 4px;
    }

    .product-status-left {
        right: 0px;
        top: -30px;
    }

    .illumination-label {
        bottom: -25px;
        left: 32%;
    }

    .smart-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .feature-grid-left {
        left: -16px;
        gap: 8px;
        width: 160px;
        position: absolute;
        margin-bottom: 0px;
    }

    .product-visual .r-0 {
        right: -16px !important;
    }

    .feature-item-left {
        min-height: 60px;
        gap: 10px;
    }

    .feature-grid-right {
        gap: 8px;
        width: 160px;
        position: absolute;
        margin-bottom: 0px;
    }

    .feature-item-right {
        min-height: 60px;
        gap: 10px;
    }

    .bnr-txt-align {
        text-align: center;
        top: 0;
    }

    .heading-mt-40 {
        margin-top: 40px;
    }

    .txt-short {
        color: #337bb8;
        font-weight: 700;
    }

    .font-26 {
        font-size: 26px;
    }

    .font-18 {
        font-size: 16px;
    }

    .mst-15 {
        margin-top: 115px;
    }

    .smart-feature-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }

    .smart-feature-item strong {
        font-size: 10px;
    }

    .feature-icon-right {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .feature-item-right strong {
        font-size: 9px;
    }

    .feature-item-right span {
        font-size: 9px;
    }

    .feature-icon-left {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .feature-item-left strong {
        font-size: 9px;
    }

    .feature-item-left span {
        font-size: 9px;
    }

    .image-frame {
        position: static;
    }

    .mgt-35 {
        margin-top: 35px;
    }

    .section-tag {
        margin-bottom: 10px;
    }

    .home-about .height-80 {
        height: 50px;
    }

    .home-about .width-80 {
        width: 50px;
    }

    .sec-capt {
        width: 100%;
        margin-left: 0px;
    }

    .sec-capt .sub-title {
        font-size: 10px;
    }

    .home-getway .top-50 {
        top: 12% !important;
    }

    .getway-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    .video-banner::after {
        opacity: 0.4;
    }

    .intel-smrt-tech .w-85 {
        width: 100% !important;
    }

    .hot-spot.hot-spot3 {
        bottom: 38%;
        right: 44%;
    }

    .hot-spot.hot-spot2 .hot-spot-content {
        transform: translate(-52%, calc(0% + 32px));
        z-index: 9;
    }

    .hot-spot.hot-spot2 .hot-spot-content::after {
        left: 49%;
    }

    .hot-spot.hot-spot3 .tops-0 {
        top: 128% !important;
    }

    .hot-spot.hot-spot3 .start-150 {
        left: -400% !important;
    }

    .hot-spot.hot-spot3 .hot-spot-content::after {
        top: -16px;
        left: 100px;
        transform: rotate(0deg);
    }

    .landsky-led {
        max-width: 380px;
        width: 90%;
    }
}

/* ========================================
   STANDARD MOBILE
   426px - 480px
   Example: Large iPhones / Android
======================================== */
@media (min-width: 426px) and (max-width: 480px) {
    /* =====================================
    Dual Feature Showcase
    =======================================*/

    .ls-copy h1 {
        font-size: 36px;
    }

    .ls-tagline {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .ls-feature-row {
        grid-template-columns: 1fr 1fr;
    }

    .ls-icon {
        width: 58px;
        height: 58px;
    }

    .ls-icon i {
        font-size: 19px;
    }

    .ls-feature b {
        font-size: 10px;
    }

    .ls-feature small {
        font-size: 8px;
    }

    .ls-mode-card {
        height: 190px;
    }

    .ls-performance strong,
    .ls-performance span {
        font-size: 11px;
    }

    .landsky-led {
        max-width: 360px;
        width: 92%;
    }

    .ls-software-showcase {
        min-height: 190px;
    }
    .ls-laptop {
        width: 76vw;
    }
    .ls-mobile {
        width: 23vw;
        min-width: 95px;
        margin-left: -28px;
    }
}

/* ========================================
   MEDIUM MOBILE
   376px - 425px
   Example: iPhone Pro / Most Android
======================================== */
@media (min-width: 376px) and (max-width: 425px) {
    .heading-fonts {
        font-size: clamp(24px, 4vw, 90px);
    }

    .mst-9 {
        margin-top: 18px;
    }

    .mst-15 {
        margin-top: 154px;
    }

    .landsky-led {
        max-width: 340px;
        width: 92%;
    }
}

/* ========================================
   SMALL MOBILE
   321px - 375px
   Example: iPhone SE / Small Android
======================================== */
@media (min-width: 321px) and (max-width: 375px) {
    .heading-fonts {
        font-size: clamp(28px, 2vw, 90px);
    }

    .span-fonts {
        font-size: clamp(14px, 1vw, 90px);
    }

    .copyright {
        display: block;
    }

    .brand-sub {
        display: block !important;
    }

    .brand {
        text-align: center;
    }

    .contact-icon {
        color: #ffff;
    }

    .landsky-led {
        max-width: 310px;
        width: 94%;
    }
}

/* ========================================
   EXTRA SMALL MOBILE
   Up to 320px
======================================== */
@media (max-width: 320px) {
    .heading-fonts {
        font-size: clamp(20px, 2vw, 90px);
    }

    .span-fonts {
        font-size: clamp(12px, 1vw, 90px);
    }

    .extra-color span {
        font-size: 12px;
    }

    .hot-spot.hot-spot1 .hot-spot-content {
        transform: translate(-13%, calc(0% + -230px));
    }

    .hot-spot.hot-spot1 .hot-spot-content {
        display: none;
        width: 210px;
    }

    .contact-icon {
        color: #ffff;
    }

    .landsky-led {
        max-width: 280px;
        width: 94%;
    }
}

.r-0 {
    right: 0 !important;
}