@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Inter", sans-serif;
        line-height: normal;
    }
    
    nav {
        position: fixed;
        z-index: 99;
        width: 99%;
        background: #0000005c;
        padding-left: 80px;
        padding-right: 80px;
        border-radius: 0px 0px 30px 30px;
        transition: background 0.3s ease;
    }
    
    nav .wrapper {
        position: relative;
        height: 70px;
        line-height: 70px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .padding-two-side {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .image-width {
        width: 100%;
    }
    
    .wrapper .logo a {
        color: #f2f2f2;
        font-size: 30px;
        font-weight: 600;
        text-decoration: none;
    }
    
    .wrapper .nav-links {
        display: inline-flex;
    }
    
    .nav-links li {
        list-style: none;
    }
    
    .nav-links li a {
        color: #ffffff;
        text-decoration: none;
        padding: 9px 15px;
        transition: all 0.3s ease;
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 300 !important;
    }
    
    .nav-links .mobile-item {
        display: none;
    }
    
    .nav-links .drop-menu {
        position: absolute;
        background-color: rgb(0 0 0 / 90%);
        width: 260px;
        line-height: 45px;
        padding-left: 20px;
        top: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.13);
        z-index: 100;
        border-radius: 10px;
        border: 1px solid rgb(255 255 255 / 15%);
        overflow: hidden;
    }
    
    .nav-links .drop-menu::before {
        content: "";
        position: absolute;
        background: #13522D;
        height: 15px;
        border-radius: 50px;
        left: 10px;
        right: 10px;
        top: -10px;
    }
    
    .nav-links li:hover .drop-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .nav-links li:hover .drop-menu,
    .nav-links li:hover .mega-box {
        transition: all 0.3s ease-in-out;
        top: 70px;
        opacity: 1;
        visibility: visible;
        border-radius: 10px;
    }
    
    .drop-menu li a {
        width: 100%;
        display: block;
        padding: 0 0 0 15px;
        font-weight: 400;
        border-radius: 0px;
    }
    
    .mega-box {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0 30px;
        top: 85px;
        opacity: 0;
        visibility: hidden;
    }
    
    .mega-box .content {
        background: #242526;
        padding: 25px 20px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }
    
    .mega-box .content .row {
        width: calc(25% - 30px);
        line-height: 45px;
    }
    
    .content .row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .content .row header {
        color: #f2f2f2;
        font-size: 20px;
        font-weight: 500;
    }
    
    .content .row .mega-links {
        margin-left: -40px;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
    }
    
    .row .mega-links li {
        padding: 0 20px;
    }
    
    .row .mega-links li a {
        padding: 0px;
        padding: 0 20px;
        color: #d9d9d9;
        font-size: 17px;
        display: block;
    }
    
    .row .mega-links li a:hover {
        color: #f2f2f2;
    }
    
    .wrapper .btn {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        display: none;
    }
    
    .wrapper .btn.close-btn {
        position: absolute;
        right: 30px;
        top: 10px;
    }
    
    .icon-sec-nav {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: center;
    }
    
    .extra-line {
        line-height: 25px;
    }
    /* Submenu hidden by default */
    
    .sub-drop-menu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background: white;
        list-style: none;
        padding: 0;
        margin: 0;
        min-width: 180px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    /* Show submenu on hover */
    
    .has-submenu:hover .sub-drop-menu {
        display: block;
        margin-top: 10px;
    }
    /* Submenu links */
    
    .sub-drop-menu li a {
        display: block;
        padding: 0px 15px;
        text-decoration: none;
        color: #333;
    }
    
    .sub-drop-menu li a:hover {
        background: #f0f0f0;
    }
    
    @media screen and (max-width: 970px) {
        .wrapper .btn {
            display: block;
        }
        .wrapper .nav-links {
            position: fixed;
            height: 100vh;
            width: 100%;
            max-width: 350px;
            top: 0;
            left: -100%;
            background: #242526;
            display: block;
            padding: 50px 10px;
            line-height: 50px;
            overflow-y: auto;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
            transition: all 0.3s ease;
        }
        /* custom scroll bar */
         ::-webkit-scrollbar {
            width: 10px;
        }
         ::-webkit-scrollbar-track {
            background: #242526;
        }
         ::-webkit-scrollbar-thumb {
            background: #3A3B3C;
        }
        #menu-btn:checked~.nav-links {
            left: 0%;
        }
        #menu-btn:checked~.btn.menu-btn {
            display: none;
        }
        #close-btn:checked~.btn.menu-btn {
            display: block;
        }
        .nav-links li {
            margin: 15px 10px;
        }
        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 20px;
        }
        .nav-links .drop-menu {
            position: static;
            opacity: 1;
            top: 65px;
            visibility: visible;
            padding-left: 20px;
            width: 100%;
            max-height: 0px;
            overflow: hidden;
            box-shadow: none;
            transition: all 0.3s ease;
        }
        #showDrop:checked~.drop-menu,
        #showMega:checked~.mega-box {
            max-height: 100%;
        }
        .nav-links .desktop-item {
            display: none;
        }
        .nav-links .mobile-item {
            display: block;
            color: #f2f2f2;
            font-size: 20px;
            font-weight: 500;
            padding-left: 20px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .nav-links .mobile-item:hover {
            background: #3A3B3C;
        }
        .drop-menu li {
            margin: 0;
        }
        .drop-menu li a {
            border-radius: 5px;
            font-size: 18px;
        }
        .mega-box {
            position: static;
            top: 65px;
            opacity: 1;
            visibility: visible;
            padding: 0 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .mega-box .content {
            box-shadow: none;
            flex-direction: column;
            padding: 20px 20px 0 20px;
        }
        .mega-box .content .row {
            width: 100%;
            margin-bottom: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .mega-box .content .row:nth-child(1),
        .mega-box .content .row:nth-child(2) {
            border-top: 0px;
        }
        .content .row .mega-links {
            border-left: 0px;
            padding-left: 15px;
        }
        .row .mega-links li {
            margin: 0;
        }
        .content .row header {
            font-size: 19px;
        }
    }
    
    nav input {
        display: none;
    }
    
    .body-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        padding: 0 30px;
    }
    
    .body-text div {
        font-size: 45px;
        font-weight: 600;
    }
    
    .nav-links {
        margin-bottom: 0px;
    }
    
    .icon-color {
        color: #000000;
    }
    
    .drp-dwn-clr {
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 400;
    }
    
    .drp-dwn-clr:hover {
        background-color: #136134b0;
    }
    /* Arrow icon style */
    
    .desktop-item .arrow {
        margin-left: 6px;
        transition: transform 0.3s ease;
    }
    /* Rotate the arrow on hover of the parent li */
    
    .nav-links li:hover>a .arrow {
        transform: rotate(180deg);
    }
    
    #showDrop:checked~label .arrow {
        transform: rotate(180deg);
    }
    
    #showDrop:checked+label .arrow {
        transform: rotate(180deg);
    }
    
    #showDrop:checked~.drop-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .arrow {
        margin-left: 20%;
        transition: transform 0.3s ease-in-out;
    }
    /* scroll-video-section----------------------------------------------------------------------------------------- */
    
    .video-wrapper {
        position: relative;
        height: 100vh;
        width: 100%;
        background: #000;
    }
    
    .video-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .video-slide.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .video-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .video-overlay-content {
        position: absolute;
        top: 66%;
        left: 100px;
        /* distance from left edge */
        transform: translateY(-50%);
        /* only vertical centering */
        text-align: left;
        color: #fff;
        z-index: 3;
        padding: 20px;
        max-width: 600px;
        /* optional: keeps text from stretching too wide */
    }
    
    .overlay-title {
        font-size: 56px;
        font-weight: 700;
        font-family: "Inter", sans-serif;
    }
    
    .overlay-subtitle {
        font-size: 16px;
        font-weight: 400;
        color: #e0e0e0;
        font-family: "Inter", sans-serif;
        padding-top: 20px;
    }
    /* scroll-video-section----------------------------------------------------------------------------------------- */
    
    .bg-clr-sec {
        background-color: #242424;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        padding-top: 0px;
    }
    
    .mobile-app-sec {
        width: 100%;
        height: 819px;
        position: relative;
        background-image: url(../images/home/mobile-app-bg.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 30px;
        filter: brightness(0.5) contrast(0.5);
        transition: filter 0.5s ease;
        /* fallback for JS-free users */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 120px 180px 30px 65px;
    }
    
    .mob-first-area {
        width: 30%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .inner-app-area {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: end;
    }
    
    .app-head {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 36px;
        line-height: 36px;
        font-weight: 600;
        color: #ffffff;
        display: flex;
    }
    
    .app-sub-head {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 300;
        color: #ffffff;
        display: flex;
    }
    
    .app-btn {
        display: flex;
        width: fit-content;
        background: #287D4B;
        background: linear-gradient(188deg, rgba(40, 125, 75, 1) 0%, rgba(19, 82, 45, 1) 63%);
        color: #ffffff;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 300;
        padding: 8px 24px;
        border-radius: 30px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .app-btn:hover {
        transform: translateY(-3px);
        background: linear-gradient(188deg, rgba(50, 150, 95, 1) 0%, rgba(25, 95, 55, 1) 63%);
        box-shadow: 0 6px 15px rgba(40, 125, 75, 0.4);
    }
    
    .app-wht-btn {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 10px;
        cursor: pointer !important;
    }
    
    .app-btn-arrow {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
        text-decoration: underline;
    }
    
    .arrow-right {
        width: 15px;
        transition: transform 0.3s ease;
        /* Smooth transition */
    }
    
    .app-wht-btn:hover .arrow-right {
        transform: translateX(5px);
        /* Moves arrow 5px to the right */
    }
    /* <!-- home-package-section------------------------------------------------------- --> */
    
    .home-package {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-top: 120px;
        background-color: #242424;
    }
    
    .home-package-head-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        background-color: #242424;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 100px;
    }
    
    .best-stroke {
        font-family: system-ui !important;
        font-size: 120px;
        line-height: 120px;
        font-weight: 700;
        -webkit-text-stroke: 1px #434343;
        position: absolute;
        top: -50px;
        left: 123px;
        /* Stroke color */
    }
    
    .home-page-head {
        font-family: "Inter", sans-serif;
        font-size: 36px;
        line-height: 36px;
        font-weight: 700;
        color: #ffffff;
        z-index: 10;
    }
    
    .package-right-sec {
        width: 25%;
        text-align: right;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        color: #B1B1B1;
        font-weight: 400;
        margin: auto 0;
    }
    
    .smart-home-service {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-bottom: 90px;
        padding-top: 40px;
    }
    
    .col5_col4lg_col3-smart-home-service {
        grid-auto-flow: row;
        gap: 0px 18px;
        grid-template-columns: repeat(4, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1366px) {
            grid-template-columns: repeat(4, 1fr);
            gap: 40px 20px;
        }
        @media (max-width: 1200px) {
            grid-template-columns: repeat(4, 1fr);
            .spanItem {
                grid-column: span 2;
            }
            gap: 40px 20px;
        }
        @media (max-width: 1150px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 20px;
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 850px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    
    .package-box {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 10px !important;
        text-decoration: none !important;
        overflow: hidden;
        background-color: #fff;
    }
    
    .package-image {
        width: 100%;
        filter: contrast(.9);
        transition: all ease-in-out .5s;
    }
    
    .image-width {
        width: 100%;
    }
    
    .package-text-area {
        background-color: #ffffff;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 36px 45px;
        gap: 15px;
        border-radius: 0px 0px 10px 10px;
    }
    
    .know-clr {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 300;
        color: #242424;
        text-decoration: none !important;
    }
    
    .package-box-head {
        font-family: "Inter", sans-serif;
        font-size: 24px;
        line-height: 26px;
        font-weight: 600;
        color: #000000;
    }
    
    .package-box-sub {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #000000;
    }
    
    .br-rad {
        border-radius: 10px 10px 0px 0px;
    }
    
    .package-image img {
        transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
        transform: scale(1);
    }
    
    .package-box:hover .package-image img {
        transform: scale(1.05);
        filter: contrast(1.2);
    }
    
    .smart-living {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #242424;
        overflow: hidden;
    }
    
    .running-track {
        display: flex;
        width: max-content;
        animation: scrollLeft 20s linear infinite;
    }
    
    .running-letter {
        font-family: "Inter", sans-serif;
        font-size: 200px;
        line-height: 230px;
        color: #2f2f2f;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Animation */
    
    @keyframes scrollLeft {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    
    .smart-living-head {
        font-family: "Inter", sans-serif;
        font-size: 38px;
        line-height: 38px;
        color: #ffffff;
        font-weight: 500;
        display: flex;
        justify-content: center;
    }
    
    .smart-living-content {
        width: 40%;
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 25px;
        color: #ffffff;
        font-weight: 300;
        display: flex;
        justify-content: center;
        margin: auto;
        margin-bottom: 50px;
        text-align: center;
    }
    /* slider-scroll---------------------------------------------------------------------------------------------------- */
    
    .smart-align-one {
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 45px;
        left: 45px;
    }
    
    .smart-align-two {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 45px;
        left: 45px;
    }
    
    .smart-head {
        font-family: "Inter", sans-serif;
        font-size: 23px;
        font-weight: 600;
        color: #ffffff;
        line-height: 25px;
    }
    
    .blck-clr {
        color: #000000 !important;
    }
    
    .smart-content {
        width: 80%;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #ffffff;
        line-height: 21px;
        padding-top: 15px;
        padding-bottom: 20px;
    }
    
    .smart-btn {
        width: fit-content;
        border: 1px solid #ffffff;
        border-radius: 50px;
        padding: 8px 24px;
        color: #ffffff;
        text-decoration: none;
        font-size: 15px;
        line-height: 15px;
        font-weight: 300;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .smart-btn:hover {
        background: #ffffff;
        color: #287D4B;
        /* green text on hover */
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.4);
    }
    
    .blck-clr-btn {
        width: fit-content;
        border: 1px solid #000000;
        border-radius: 50px;
        padding: 8px 24px;
        color: #000000;
        text-decoration: none;
        font-size: 15px;
        line-height: 15px;
        font-weight: 300;
    }
    
    .blck-clr-btn:hover {
        background: #287D4B;
        border: 1px solid #287D4B;
        color: #fff;
        /* green text on hover */
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.4);
    }
    
    .bg-clr-sec {
        background-color: #242424;
    }
    
    .scroll-section {
        position: relative;
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .scroll-section-mob {
        position: relative;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .scroll-slider {
        display: flex;
        gap: 20px;
        height: auto;
        align-items: center;
        will-change: transform;
    }
    
    .one-image {
        min-width: 35vw;
        height: 475px;
        /* height: 550px;
        min-height: 70vh;*/
        flex-shrink: 0;
        position: relative;
    }
    /* .one-image::before{content: "";position: absolute;inset: 0;background: rgb(0 0 0 / 25%);border-radius: 10px;} */
    
    .one-image-mob {
        width: 100%;
        flex-shrink: 0;
        position: relative;
    }
    
    .one-image img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 10px;
        position: absolute;
        inset: 0;
        object-fit: cover;
    }
    
    .one-image-mob img {
        width: 100%;
        display: block;
        border-radius: 10px;
    }
    
    @media (min-width: 1200px) {
        .desk-item {
            display: block;
        }
        .mob-item {
            display: none;
        }
    }
    
    @media (max-width: 1199px) {
        .desk-item {
            display: none;
        }
        .mob-item {
            display: block;
        }
        .carousel-slide {
            flex: 0 0 40%;
        }
    }
    
    @media (min-width: 1500px) {
        .one-image {
            min-width: 25vw;
        }
    }
    
    @media (min-width: 1600px) {
        .one-image {
            min-width: 25vw;
        }
    }
    
    @media (min-width: 1900px) {
        .one-image {
            height: 575px;
        }
    }
    
    @media (max-width: 1023px) {
        .carousel-slide {
            flex: 0 0 50%;
        }
    }
    
    @media (max-width: 767px) {
        .carousel-slide {
            flex: 0 0 80%;
        }
    }
    
    @media (max-width: 575px) {
        .carousel-slide {
            flex: 0 0 100%;
        }
    }
    
    .product-btn-green {
        width: fit-content;
        display: flex;
        background: #287D4B;
        background: linear-gradient(188deg, rgba(40, 125, 75, 1) 0%, rgba(19, 82, 45, 1) 63%);
        color: #ffffff;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        padding: 8px 24px;
        border-radius: 30px;
        transition: all 0.3s ease;
        cursor: pointer;
        text-decoration: none;
    }
    
    .product-btn-green:hover {
        transform: translateY(-3px);
        background: linear-gradient(188deg, rgba(50, 150, 95, 1) 0%, rgba(25, 95, 55, 1) 63%);
        box-shadow: 0 6px 15px rgba(40, 125, 75, 0.4);
    }
    /* who-we-are---------------------------------------------------------------------------------------- */
    
    .who-we-are {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #242424;
        align-items: center;
        padding-top: 100px;
    }
    
    .green-light-sec {
        position: relative;
        width: 1190px;
        display: flex;
        justify-content: center;
        background-image: url(../images/home/green-lights.png);
        height: 332px;
        background-position: center;
        /* Center the image */
        background-repeat: no-repeat;
        /* Do not repeat the image */
        background-size: cover;
        /* Resize the background image to cover the entire container */
    }
    
    .who-we-sec {
        font-family: "Inter", sans-serif;
        font-size: 58px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        justify-content: center;
        z-index: 10;
        align-items: center;
    }
    /* gradient text color change------------------------------------------------------- */
    
    .gradient-text {
        width: 48%;
        font-family: "Inter", sans-serif;
        font-size: 52px;
        font-weight: 600;
        justify-content: center;
        display: flex;
        text-align: center;
        line-height: 50px;
        /* Smooth looping gradient (first color repeated at end) */
        background: linear-gradient( 90deg, #40FF8E 0%, #FFFFFF 40%, #E9FFF2 70%, #40FF8E 100%);
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 1s ease, transform 1s ease;
    }
    /* Show when visible */
    
    .gradient-text.show {
        opacity: 1;
        transform: translateY(0);
        animation: gradientMove 6s linear infinite;
        animation-play-state: paused;
    }
    /* Run while scrolling */
    
    .gradient-text.scrolling {
        animation-play-state: running;
    }
    /* Left → Right */
    
    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 200% 50%;
        }
    }
    /* Right → Left */
    
    @keyframes gradientMoveReverse {
        0% {
            background-position: 200% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    /* --------------------------------------------------------------------------------------------- */
    
    .gradient-text,
    .who-we-para {
        opacity: 0;
        transform: translateY(60px);
        transition: all 1s ease;
    }
    
    .gradient-text.show,
    .who-we-para.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .who-we-para {
        width: 60%;
        font-size: 18px;
        font-weight: 300;
        line-height: 25px;
        justify-content: center;
        text-align: center;
        color: #ffffff;
    }
    /* alexa-section------------------------------------------------------------------ */
    
    .alexa-section {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #FFFFFF;
    }
    
    .alexa-section-mob {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #FFFFFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgb(36 36 36) 100%);
    }
    
    .alexa-head {
        font-family: "Inter", sans-serif;
        font-size: 72px;
        font-weight: 600;
        color: #000000;
        display: flex;
        justify-content: center;
        padding-bottom: 25px;
        padding-top: 60px;
        /* space from top */
    }
    
    .alexa-content {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        display: flex;
        justify-content: center;
        text-align: center;
        width: 40%;
        margin: auto;
        padding-bottom: 90px;
    }
    /* Zoom section setup */
    
    .zoom-section {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100vh;
        /* full screen section */
        background: #000;
    }
    
    .zoom-section video {
        width: 100%;
        height: auto;
    }
    /* smart-home-section----------------------------------------------- */
    /* .smart-home-section {
        width: 100%;
        height: 1042px;
        position: relative;
        display: flex;
        background-image: url(../images/home/smart-home.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 100px 100px 0px 0px;
        padding: 65px;
        transition: background-image 0.8s ease-in-out, opacity 0.8s ease-in-out;
        opacity: 1;
    } */
    /* Use layered backgrounds instead of the inline background-image */
    
    .smart-home-section {
        width: 100%;
        display: flex;
        height: 1042px;
        padding: 65px;
        background-image: none !important;
        position: relative;
        overflow: hidden;
        /* keep layers clipped to rounded corners */
        border-radius: 100px 100px 0 0;
        /* keep your existing radius */
    }
    /* Put all content above the background layers */
    
    .smart-home-section>* {
        position: relative;
        z-index: 1;
    }
    /* Crossfade layers */
    
    .smart-home-section::before,
    .smart-home-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: inherit;
        transition: opacity 0.9s ease-in-out;
        z-index: 0;
        /* behind content */
    }
    /* Default image (visible first) */
    
    .smart-home-section::before {
        background-image: url("../images/home/smart-home-first.webp");
        opacity: 1;
    }
    /* Second image (fades in) */
    
    .smart-home-section::after {
        background-image: url("../images/home/smart-home.webp");
        opacity: 0;
    }
    /* Toggle state for fade */
    
    .smart-home-section.bg-active::before {
        opacity: 0;
    }
    
    .smart-home-section.bg-active::after {
        opacity: 1;
    }
    
    .bg-clr-smart {
        background-color: #242424;
        padding-top: 120px;
    }
    
    .smart-content-area {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: end;
    }
    
    .smrt-home-head {
        font-family: "Inter", sans-serif;
        font-size: 72px;
        line-height: 75px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
    }
    
    .smrt-home-sub-head {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 25px;
        font-weight: 400;
        color: #ffffff;
        padding-top: 15px;
        padding-bottom: 30px;
    }
    
    .smrt-home-content {
        width: 40%;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 300;
        color: #ffffff;
        text-align: right;
    }
    
    .smrt-home-head,
    .smrt-home-sub-head,
    .smrt-home-content {
        filter: blur(8px);
        opacity: 0;
        transform: translateY(30px);
        transition: all 2s ease;
    }
    /* When in view */
    
    .show {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
    
    .switch-btn {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .smrt-box {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 70px;
        justify-content: end;
        padding-top: 40px;
    }
    
    .click-light {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
    }
    
    .clicking {
        width: 100px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }
    
    .clicking-text {
        padding-top: 10px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        color: #808080;
        text-align: center;
    }
    
    .smrt-app {
        width: fit-content;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #555555;
        background: linear-gradient(178deg, rgba(85, 85, 85, 1) 0%, rgba(40, 40, 40, 1) 100%);
        padding: 30px;
        border-radius: 20px;
        gap: 10px;
        transition: all ease-in-out .5s;
    }
    
    .smrt-app:hover {
        box-shadow: rgb(34 112 66 / 54%) 0px 9px 27px 0px;
    }
    
    .smart-num {
        font-family: "Inter", sans-serif;
        font-size: 40px;
        line-height: 40px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        justify-content: center;
    }
    
    .smart-name {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 18px;
        font-weight: 500;
        color: #ffffff;
        display: flex;
    }
    /* testimonial-grid---------------------------------- */
    
    .testinonial-section {
        width: 100%;
        overflow: hidden;
        background: #090909;
        background: linear-gradient(180deg, rgb(0 0 0) 0%, rgba(36, 36, 36, 1) 52%);
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-top: 150px;
        padding-bottom: 140px;
    }
    
    .testimonial-slider-wrapper {
        overflow: hidden;
        position: relative;
        white-space: nowrap;
    }
    
    .testimonial-grid {
        display: flex;
        gap: 20px;
        flex-wrap: nowrap;
    }
    /* Animation keyframes */
    /* LEFT SLIDER */
    
    .testimonial-slider-wrapper.left .testimonial-grid {
        animation: slideLeft 40s linear infinite;
    }
    
    @keyframes slideLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    /* RIGHT SLIDER */
    
    .testimonial-slider-wrapper.right .testimonial-grid {
        transform: translateX(-50%);
        animation: slideRight 40s linear infinite;
    }
    
    @keyframes slideRight {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(0);
        }
    }
    /* Testimonial card styling */
    
    .testimonial-card {
        flex: 0 0 auto;
        width: 470px;
        background-color: #2e2e2e;
        padding: 24px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
    }
    
    .testimonial-text {
        font-size: 17px;
        line-height: 1.6;
        margin: 14px 0;
        color: #ccc;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: left;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal !important;
        display: block !important;
    }
    /* Other styles remain unchanged */
    
    .quote {
        font-size: 36px;
        color: #aaa;
        line-height: 1;
    }
    
    .quote.end {
        align-self: flex-end;
    }
    
    .testimonial-text {
        font-size: 17px;
        line-height: 1.6;
        margin: 14px 0;
        color: #ccc;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: left;
        flex-shrink: 0;
        /* Prevent squishing */
    }
    
    .testimonial-user {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }
    
    .testimonial-user img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
    }
    
    .user-info .name {
        font-weight: 600;
        font-size: 16px;
        color: #fff;
    }
    
    .stars {
        color: gold;
        font-size: 18px;
    }
    
    .client-text-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .client-head {
        font-family: "Inter", sans-serif;
        font-size: 48px;
        line-height: 50px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .client-head-content {
        width: 30%;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 300;
        color: #ffffff;
        display: flex;
        justify-content: center;
        margin: auto;
        text-align: center;
        padding-bottom: 70px;
    }
    /* customise-section------------------------------------------------------------------------------------------- */
    
    .customise {
        width: 100%;
        position: relative;
        display: flex;
        background-image: url(../images/home/customise.webp);
        height: 1000px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 150px 150px 0px 0px;
        padding-left: 100px;
    }
    
    .customize-bg {
        background-color: #242424;
    }
    
    .custamise-col {
        display: flex;
        flex-direction: column;
        width: 40%;
        padding-top: 220px;
        padding-left: 100px;
    }
    
    .custm-small-head {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 25px;
        font-weight: 300;
        color: #ffffff;
        display: flex;
        padding-bottom: 5px;
    }
    
    .custm-big-head {
        font-family: "Inter", sans-serif;
        font-size: 56px;
        line-height: 60px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        padding-bottom: 20px;
    }
    
    .custm-big-content {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        width: 70%;
        padding-bottom: 30px;
    }
    
    .custm-btn {
        width: fit-content;
        border: 1px solid #ffffff;
        border-radius: 50px;
        padding: 12px 24px;
        color: #ffffff;
        cursor: pointer;
        /* smooth hover effect */
        transition: all 0.3s ease;
    }
    
    .custm-small-head,
    .custm-big-head,
    .custm-big-content,
    .custm-btn {
        opacity: 0;
        transform: translateY(-30px);
        transition: all .8s ease;
    }
    /* visible state */
    
    .show-animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .custm-btn:hover {
        background: #ffffff;
        color: #287D4B;
        /* green text on hover */
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.4);
    }
    
    .wawe {
        position: absolute;
        bottom: 100px;
        right: 50px;
    }
    /* footer-section-area---------------------------------------------------------------- */
    
    .footer-section-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: 50px 50px 0px 0px;
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 50px;
        gap: 40px;
        border-bottom: 4px solid #12592F;
        margin-top: -50px;
    }
    
    .footer-two-section {
        display: flex;
        flex-direction: row;
        width: 100%;
        position: relative;
        justify-content: space-between;
    }
    
    .footer-nav-area {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 50px;
    }
    .footer-logo {
        width: 190px;
    }
    
    .footer-logo img {
        width: 100%;
    }
    .nav-adress {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 100px;
        padding-bottom: 50px;
        border-bottom: 1px solid #E3E3E3;
    }
    
    .address {
        display: flex;
        flex-direction: column;
    }
    
    .quick-nav-items {
        display: flex;
        flex-direction: row;
        gap: 60px;
    }
    
    .nav-first {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-second {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .working-hour-sec {
        display: flex;
        flex-direction: column;
    }
    
    .footer-nav-img {
        display: flex;
        flex-direction: row;
    }
    
    .app-section {
        display: flex;
        flex-direction: column;
    }
    
    .head-common {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 25px;
        font-weight: 600;
        color: #000000;
        padding-bottom: 5px;
        position: relative;
        margin-bottom: 30px;
    }
    
    .head-common::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        /* Positions the line at the bottom of the text container */
        width: 25px;
        /* Line length */
        height: 2px;
        /* Line thickness */
        background-color: #12592F;
        /* Line color */
    }
    
    .content-common {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #323232;
    }
    
    .icon-num-area {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .num-common {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 25px;
        font-weight: 400;
        color: #323232;
        text-decoration: none !important;
        transition: all 0.3s ease;
    }
    
    .num-common::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: #287D4B;
        /* green underline */
        transition: width 0.3s ease;
    }
    
    .num-common:hover {
        color: #287D4B;
        /* text turns green */
        transform: translateY(-2px);
    }
    
    .app-head-ftr {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 25px;
        font-weight: 700;
        color: #323232;
    }
    
    .store {
        width: 177px;
    }
    
    .nav-social {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    
    .nav-social .ico-ftr img {
        transition: all 0.3s ease;
        display: block;
        /* prevents inline spacing issues */
        border-radius: 8px;
        /* optional: makes shadow look softer */
    }
    
    .nav-social .ico-ftr img:hover {
        transform: translateY(-2px);
    }
    
    .ico-ftr {
        text-decoration: none;
    }
    
    .td-line {
        text-decoration: underline !important;
    }
    
    .copy-right-sec {
        width: 100%;
        position: relative;
        background-color: #1E1E1E;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 18px;
        font-weight: 300;
        color: #ffffff;
        padding: 25px 0px;
        gap: 5px;
        text-align: center;
    }
    
    .copy-link {
        color: #ffffff !important;
        text-decoration: none !important;
        transition: all ease-in-out .5s;
    }
    
    .copy-link:hover {
        color: #287D4B !important;
        text-decoration: none !important;
    }
    
    .content_truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    /* responsive------------------------------------------------------------------------------------------ */
    
    @media screen and (max-width:1850px) {
        .package-right-sec {
            width: 30%;
        }
    }
    
    @media screen and (max-width:1750px) {
        .custm-big-head {
            font-size: 48px;
            line-height: 52px;
        }
    }
    
    @media screen and (max-width:1700px) {
        .gradient-text {
            width: 50%;
            font-family: "Inter", sans-serif;
            font-size: 45px;
            line-height: 50px;
        }
        .footer-section-area {
            padding-left: 80px;
            padding-right: 80px;
        }
        .nav-adress {
            gap: 60px;
        }
        .quick-nav-items {
            gap: 30px;
        }
    }
    
    @media screen and (max-width:1600px) {
        .mobile-app-sec {
            width: 100%;
            padding: 100px 70px 30px 50px;
        }
        .home-package-head-area {
            padding-left: 30px;
            padding-right: 30px;
        }
        .best-stroke {
            left: 55px;
        }
    }
    
    @media screen and (max-width:1550px) {
        .package-box-head {
            font-size: 22px;
            line-height: 25px;
        }
        .package-text-area {
            padding: 25px 25px;
        }
        .package-box-sub {
            font-size: 14px;
            line-height: 19px;
        }
        .customise {
            padding-left: 50px;
        }
        .footer-section-area {
            padding-left: 50px;
            padding-right: 50px;
        }
        .hand-img {
            width: 350px;
        }
        .custm-big-head {
            font-size: 42px;
            line-height: 48px;
        }
    }
    
    @media screen and (max-width:1530px) {
        .package-right-sec {
            width: 40%;
        }
    }
    
    @media screen and (max-width:1500px) {
        .hand-img {
            width: 300px;
        }
        .mob-img-section {
            display: flex;
            align-items: end;
        }
        .head-common {
            margin-bottom: 20px;
        }
        .store {
            width: 120px;
        }
        .custm-big-content {
            width: 80%;
        }
    }
    
    @media screen and (max-width:1450px) {
        .nav-adress {
            gap: 30px;
        }
        .smrt-home-head {
            font-size: 60px;
            ;
        }
        .smrt-home-content {
            width: 55%;
        }
        .custm-btn {
            padding: 8px 18px;
            color: #ffffff;
        }
    }
    
    @media screen and (max-width:1400px) {
        .mob-first-area {
            width: 40%;
        }
        .running-letter {
            font-family: "Inter", sans-serif;
            font-size: 130px;
            line-height: 150px;
        }
        .gradient-text {
            width: 50%;
            font-family: "Inter", sans-serif;
            font-size: 36px;
            line-height: 40px;
        }
        .quick-nav-items {
            gap: 18px;
        }
        .smart-home-section {
            width: 100%;
            height: 900px;
        }
    }
    
    @media screen and (max-width:1350px) {
        .hand-img {
            width: 273px;
        }
        .package-box-head {
            font-size: 20px;
            line-height: 24px;
        }
        .testinonial-section {
            padding-top: 65px;
            padding-bottom: 100px;
        }
    }
    
    @media screen and (max-width:1280px) {
        .hand-img {
            width: 251px;
        }
        .custamise-col {
            width: 50%;
        }
    }
    
    @media screen and (max-width:1250px) {
        .footer-two-section {
            display: flex;
            flex-direction: column;
        }
        .nav-adress {
            gap: 100px;
        }
        .quick-nav-items {
            gap: 60px;
        }
    }
    
    @media screen and (max-width:1200px) {
        .green-light-sec {
            position: relative;
            width: 1050px;
            height: 270px;
        }
        .customise {
            border-radius: 90px 90px 0px 0px;
        }
        .customise {
            height: 750px;
        }
    }
    
    @media screen and (max-width:1150px) {
        .mob-first-area {
            width: 55%;
        }
        .mobile-app-sec {
            height: 650px;
        }
        .package-right-sec {
            width: 52%;
        }
        .gradient-text {
            width: 50%;
            font-size: 30px;
        }
        .who-we-para {
            width: 80%;
        }
        .smart-num {
            font-size: 30px;
            line-height: 30px;
        }
        .smrt-app {
            padding: 20px;
        }
        .smrt-box {
            gap: 40px;
        }
        .wawe {
            width: 210px;
        }
    }
    
    @media screen and (max-width:1050px) {
        .alexa-head {
            padding-top: 0px;
        }
        .alexa-content {
            width: 60%;
            padding-bottom: 65px;
        }
        .green-light-sec {
            position: relative;
            width: 730px;
            height: 200px;
        }
        .who-we-sec {
            font-family: "Inter", sans-serif;
            font-size: 45px;
        }
        .nav-adress {
            gap: 70px;
        }
        .quick-nav-items {
            gap: 35px;
        }
        .custamise-col {
            width: 60%;
        }
        .client-head-content {
            width: 45%;
        }
        .smart-living-content {
            width: 80%;
        }
    }
    
    @media screen and (max-width:960px) {
        .nav-adress {
            gap: 40px;
        }
    }
    
    @media screen and (max-width:950px) {
        .mob-first-area {
            width: 60%;
        }
        .gradient-text {
            width: 70%;
        }
    }
    
    @media screen and (max-width:865px) {
        .home-package-head-area {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .home-package-head-area {
            gap: 50px;
        }
        .package-right-sec {
            text-align: left;
        }
        .package-right-sec {
            width: 90%;
        }
        .smart-home-service {
            padding-top: 85px;
        }
        .custamise-col {
            width: 80%;
        }
        .nav-adress {
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .quick-nav-items {
            gap: 65px;
        }
    }
    
    @media screen and (max-width:840px) {
        .smrt-home-head {
            font-size: 50px;
        }
    }
    
    @media screen and (max-width:767px) {
        .mob-first-area {
            width: 65%;
        }
        .app-head {
            width: 100%;
            font-size: 30px;
            line-height: 35px;
            ;
        }
        .green-light-sec {
            position: relative;
            width: 500px;
            height: 160px;
        }
        .gradient-text {
            font-size: 24px;
            line-height: 33px;
        }
        .who-we-para {
            width: 85%;
            font-size: 14px;
        }
        .smart-home-section {
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 60px;
            padding-bottom: 60px;
        }
        .smart-home-section {
            width: 100%;
            height: 723px;
        }
    }
    
    @media screen and (max-width:660px) {
        .custamise-col {
            width: 100%;
        }
        .customise {
            padding-left: 30px;
        }
        .smrt-home-content {
            width: 80%;
        }
        .smrt-home-head {
            font-size: 42px;
        }
    }
    
    @media screen and (max-width:630px) {
        .mob-first-area {
            width: 70%;
        }
    }
    
    @media screen and (max-width:600px) {
        .green-light-sec {
            position: relative;
            width: 420px;
            height: 136px;
        }
        .who-we-sec {
            font-family: "Inter", sans-serif;
            font-size: 32px;
        }
        .gradient-text {
            font-size: 22px;
            line-height: 33px;
        }
        .app-head {
            width: 100%;
            font-size: 26px;
            line-height: 35px;
        }
        .mobile-app-sec {
            width: 100%;
            padding: 100px 70px 30px 15px;
        }
        .green-light-sec {
            position: relative;
            width: 365px;
            height: 100px;
        }
    }
    
    @media screen and (max-width:575px) {
        .footer-section-area {
            padding-left: 30px;
            padding-right: 30px;
        }
        .smrt-box {
            gap: 20px;
        }
        .smart-name {
            font-size: 14px;
        }
        .smart-home-section {
            padding-left: 20px;
            padding-right: 20px;
            background-image: url(../images/home/smart-home-res.png);
        }
        .smrt-home-head {
            font-size: 30px;
            line-height: 55px;
        }
        .smrt-home-sub-head {
            font-family: "Inter", sans-serif;
            font-size: 16px;
        }
        .smrt-home-sub-head {
            padding-top: 0px;
            padding-bottom: 10px;
        }
        .smrt-home-content {
            font-size: 13px;
        }
        .client-head {
            font-size: 30px;
        }
        .client-head-content {
            width: 90%;
        }
        .client-head-content {
            padding-bottom: 20px;
        }
        .custm-big-head {
            font-size: 27px;
            line-height: 32px;
        }
        .wawe {
            width: 150px;
        }
        .wawe {
            bottom: 75px;
            right: 25px;
        }
        .app-head {
            font-size: 24px;
            line-height: 24px;
        }
        .mobile-app-sec {
            width: 100%;
            padding: 30px 10px 30px 30px;
        }
        .home-package-head-area {
            gap: 30px;
        }
        .smart-home-service {
            padding-top: 40px;
        }
        .running-letter {
            font-family: "Inter", sans-serif;
            font-size: 88px;
            line-height: 100px;
        }
        .smart-home-service {
            padding-top: 40px;
        }
        .smart-living-head {
            font-family: "Inter", sans-serif;
            font-size: 30px;
            line-height: 30px;
        }
        .smart-living-content {
            font-family: "Inter", sans-serif;
            font-size: 15px;
        }
        .alexa-content {
            width: 90%;
        }
        .smart-content {
            width: 90%;
        }
        .one-image {
            width: 500px;
        }
        .smart-align-two {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 18px;
            left: 20px;
        }
        .smart-align-one {
            display: flex;
            flex-direction: column;
            position: absolute;
            bottom: 18px;
            left: 20px;
        }
        .smart-content {
            font-size: 14px;
        }
        .smart-btn {
            padding: 8px 10px;
            font-size: 14px;
            line-height: 13px;
        }
        .smart-content {
            padding-top: 0px;
            padding-bottom: 11px;
        }
        .hand-img {
            width: 190px;
        }
        .footer-nav-img {
            justify-content: space-between;
        }
        .testimonial-card {
            flex: 0 0 auto;
            width: 340px;
        }
        .testimonial-text {
            font-size: 14px;
            line-height: 1.6;
            margin: 5px 0;
        }
        .quote {
            font-size: 20px;
            color: #aaa;
            line-height: 1;
        }
        .user-info .name {
            font-weight: 600;
            font-size: 13px;
            color: #fff;
        }
        .testimonial-user {
            margin-top: 0px;
        }
        .testimonial-slider-wrapper.right .testimonial-grid {
            transform: translateX(-50%);
            animation: slideRight 20s linear infinite;
        }
        .smart-home-section {
            border-radius: 30px 30px 0px 0px;
        }
        .customise {
            border-radius: 30px 30px 0px 0px;
        }
        .app-sub-head {
            font-size: 13px;
        }
        .package-text-area {
            padding: 25px 20px;
        }
        .smrt-home-sub-head {
            width: 50%;
            text-align: end;
        }
        /* .smart-home-section {
            background-position: -322px 2px;
        } */
        .smart-num {
            font-size: 25px;
            line-height: 30px;
        }
        .smart-home-section {
            width: 100%;
            height: 691px;
        }
        .smart-home-section {
            padding-bottom: 0px;
        }
        .testinonial-section {
            background: #090909;
            background: linear-gradient(180deg, rgb(7 7 7) 0%, rgba(36, 36, 36, 1) 52%);
        }
    }
    
    @media screen and (max-width:500px) {
        .bg-clr-sec {
            padding: 8px;
        }
        .mobile-app-sec {
            height: 515px;
        }
        .smart-name {
            text-align: center;
        }
        .smrt-app {
            padding: 13px;
        }
        .smrt-box {
            justify-content: center;
        }
        .customise {
            padding-left: 20px;
        }
        .home-package-head-area {
            padding-left: 20px;
            padding-right: 30px;
        }
        .best-stroke {
            left: 18px;
        }
        .customise {
            height: 670px;
        }
        .custamise-col {
            padding-top: 156px;
        }
        .smart-living-head {
            font-family: "Inter", sans-serif;
            font-size: 24px;
            line-height: 30px;
        }
        .smart-living-content {
            width: 95%;
        }
    }
    
    @media screen and (max-width:490px) {
        .smrt-home-sub-head {
            width: 60%;
            text-align: end;
        }
    }
    
    @media screen and (max-width:480px) {
        .mob-first-area {
            width: 70%;
        }
        .gradient-text {
            width: 85%;
        }
        .bg-clr-smart {
            padding-top: 70px;
        }
        .best-stroke {
            font-family: system-ui !important;
            font-size: 80px;
            line-height: 115px;
        }
        .smrt-home-sub-head {
            font-family: "Inter", sans-serif;
            font-size: 15px;
        }
        .footer-section-area {
            padding-left: 20px;
            padding-right: 20px;
        }
        .smrt-home-content {
            width: 98%;
        }
        .copy-right-sec {
            padding: 10px 0px;
            gap: 5px;
        }
        .smrt-home-sub-head {
            width: 59%;
            text-align: end;
        }
    }
    
    @media screen and (max-width:430px) {
        .mob-first-area {
            width: 70%;
        }
        .smart-head {
            font-family: "Inter", sans-serif;
            font-size: 17px;
        }
        .smrt-home-sub-head {
            font-family: "Inter", sans-serif;
            font-size: 14px;
            line-height: 24px;
            text-align: end;
        }
        .app-head-ftr {
            font-size: 16px;
        }
        .who-we-para {
            width: 90%;
        }
        .smrt-home-head {
            font-size: 26px;
        }
        .custm-btn {
            padding: 6px 12px;
            color: #ffffff;
        }
    }
    
    @media screen and (max-width:400px) {
        .mob-first-area {
            width: 73%;
        }
        .green-light-sec {
            position: relative;
            width: 330px;
            height: 80px;
        }
        .who-we-are {
            padding-top: 60px;
        }
        .hand-img {
            width: 170px;
        }
        .app-head {
            font-size: 20px;
            line-height: 24px;
        }
        .custm-btn {
            font-size: 14px;
        }
        .know-clr {
            font-family: "Inter", sans-serif;
            font-size: 13px;
        }
        .smrt-app {
            gap: 3px;
        }
        .smrt-box {
            padding-top: 25px;
        }
    }
    
    @media screen and (max-width:380px) {
        .custm-big-head {
            font-size: 25px;
            line-height: 33px;
        }
        .app-head-ftr {
            font-size: 15px;
            line-height: 20px;
        }
    }
    
    @media screen and (max-width:575px) {}
    
    @media screen and (min-width:575px) {}
    /* ------------------------------------------------------------------------------------------------ */
    
    .carousel {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: auto;
    }
    
    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
        gap: 20px;
        /* space between slides */
    }
    
    .carousel-slide {
        /* show 1 and a half images */
        position: relative;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .carousel-slide img {
        width: 100%;
        display: block;
        border-radius: 10px;
    }
    
    .slide-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 15px;
    }
    
    .slide-text h3 {
        margin: 0 0 5px;
        font-size: 18px;
    }
    
    .slide-text p {
        margin: 0;
        font-size: 14px;
    }
    
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgb(0 0 0 / 10%);
        color: #ffffff;
        border: none;
        width: 45px;
        height: 45px;
        cursor: pointer;
        font-size: 20px;
        z-index: 2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        transition: background 0.3s ease, transform 0.2s ease;
    }
    
    .carousel-btn.prev {
        left: 10px;
    }
    
    .carousel-btn.next {
        right: 10px;
    }
    /* nav-bar-responsive------------------------------------------------------------------------ */
    /********************Style-Changes-Start*********************/
    
    .nav-links li a {
        padding: 9px 20px;
    }
    
    .nav-links .drop-menu {
        padding-top: 15px;
        padding-left: 0px;
        padding-bottom: 15px;
    }
    
    .nav-links li.has-submenu a {
        padding: 10px 15px;
    }
    
    .sub-drop-menu {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
    }
    
    .nav-links li.has-submenu .sub-drop-menu a {
        padding: 10px 15px 10px 20px;
    }
    
    .menu-btn i {
        color: #fff;
        font-size: 22px;
    }
    
    .chat-btn svg {
        display: none;
    }
    
    .nav-links .drop-menu .has-submenu {
        line-height: normal;
    }
    
    .header-line {
        color: #595959;
        line-height: normal;
        margin: auto;
    }
    /********************Responsive*********************/
    
    @media (max-width: 1500px) {
        .nav-links li a {
            padding: 9px 14px;
        }
    }
    
    @media (max-width: 1300px) {
        nav {
            padding-left: 30px;
            padding-right: 30px;
        }
        .nav-links li a {
            padding: 9px 12px;
        }
    }
    
    @media (max-width: 1200px) {
        .nav-links li a {
            padding: 9px 9px;
            font-size: 13px;
        }
        .wrapper .nav-links {
            padding-left: 20px;
        }
        .icon-sec-nav {
            gap: 12px;
        }
        nav {
            padding-left: 25px;
            padding-right: 25px;
        }
    }
    
    @media (max-width: 1024px) {
        .wrapper .btn {
            display: block;
            padding: 0px;
            margin: auto;
        }
        .wrapper .nav-links {
            position: fixed;
            height: 100vh;
            width: 100%;
            max-width: 350px;
            top: 0;
            left: -100%;
            background: #242526;
            display: block;
            padding: 50px 10px;
            line-height: 50px;
            overflow-y: auto;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
            transition: all 0.3s ease;
        }
        /* custom scroll bar */
         ::-webkit-scrollbar {
            width: 10px;
        }
         ::-webkit-scrollbar-track {
            background: #242526;
        }
         ::-webkit-scrollbar-thumb {
            background: #3A3B3C;
        }
        #menu-btn:checked~.nav-links {
            left: 0%;
        }
        #menu-btn:checked~.btn.menu-btn {
            display: none;
        }
        #close-btn:checked~.btn.menu-btn {
            display: block;
        }
        .nav-links li {
            margin: 15px 10px;
        }
        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 20px;
        }
        .nav-links .drop-menu {
            position: static;
            opacity: 0;
            top: 65px;
            visibility: hidden;
            padding-left: 20px;
            width: 100%;
            max-height: 0px;
            overflow: hidden;
            box-shadow: none;
            transition: all 0.3s ease;
            display: none;
        }
        .nav-links li:hover .drop-menu {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
        #showDrop:checked~.drop-menu {
            display: block;
        }
        .has-submenu:hover .sub-drop-menu {
            margin-bottom: 10px;
        }
        .sub-drop-menu {
            position: initial;
            background: #242526;
            box-shadow: 0px 0px 0px 0px;
        }
        .sub-drop-menu li a:hover,
        .sub-drop-menu li a {
            background: #242526;
            color: #FFFFFF;
        }
        #showDrop:checked~.drop-menu,
        #showMega:checked~.mega-box {
            max-height: 100%;
        }
        .nav-links .desktop-item {
            display: none;
        }
        .nav-links .mobile-item {
            display: block;
            color: #f2f2f2;
            font-size: 20px;
            font-weight: 500;
            padding-left: 20px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .nav-links .mobile-item:hover {
            background: #3A3B3C;
        }
        .drop-menu li {
            margin: 0;
        }
        .drop-menu li a {
            border-radius: 5px;
            font-size: 18px;
        }
        .mega-box {
            position: static;
            top: 65px;
            opacity: 1;
            visibility: visible;
            padding: 0 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .mega-box .content {
            box-shadow: none;
            flex-direction: column;
            padding: 20px 20px 0 20px;
        }
        .mega-box .content .row {
            width: 100%;
            margin-bottom: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .mega-box .content .row:nth-child(1),
        .mega-box .content .row:nth-child(2) {
            border-top: 0px;
        }
        .content .row .mega-links {
            border-left: 0px;
            padding-left: 15px;
        }
        .row .mega-links li {
            margin: 0;
        }
        .content .row header {
            font-size: 19px;
        }
        .product-banner .title h1 {
            font-size: 50px;
            line-height: 50px;
        }
        .product-banner .title p {
            width: 80%;
        }
    }
    
    @media (max-width: 575px) {
        .chat-btn {
            display: none;
        }
        nav {
            width: 100%;
            border-radius: 0px;
        }
        nav {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    
    @media (max-width: 480px) {
        nav {
            padding-left: 15px;
            padding-right: 15px;
        }
        .logo .image-width {
            width: 80%;
            object-fit: contain;
        }
        .app-btn {
            font-size: 13px;
        }
        .header-line {
            display: none;
        }
    }
    
    @media (max-width: 420px) {
        .chat-btn svg {
            display: none;
        }
        .chat-btn span {
            display: none;
        }
        .app-btn.chat-btn {
            padding: 7px 8px;
        }
    }
    /* video-section-css---------------------------------------------------------------------------------------- */
    /* Main container */
    
    .custom-video-banner {
        position: relative;
        width: 100%;
        height: 885px;
        overflow: hidden;
        background-color: #242424;
    }
    /* Video background */
    
    .custom-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Black transparent overlay */
    
    .custom-video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 13%);
        pointer-events: none;
    }
    /* New text container */
    
    .video-text-content {
        position: absolute;
        top: 45%;
        left: 100px;
        transform: translateY(50px);
        /* Start lower */
        opacity: 0;
        /* Start invisible */
        filter: blur(8px);
        /* Start blurred */
        text-align: left;
        color: #fff;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
        animation: textFadeUp 1.5s ease-out forwards;
        animation-delay: 0.3s;
        /* Small delay after page load */
    }
    /* Animation keyframes */
    
    @keyframes textFadeUp {
        0% {
            transform: translateY(50px);
            opacity: 0;
            filter: blur(8px);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
            filter: blur(0);
        }
    }
    
    .video-main-title {
        font-size: 56px;
        line-height: 60px;
        font-weight: 700;
        width: 40%;
        padding-bottom: 20px;
    }
    /* Subtitle styling */
    
    .video-sub-text {
        width: 50%;
        font-size: 16px;
        font-weight: 300;
    }
    /* Responsive adjustments */
    
    @media (max-width: 768px) {
        .video-main-title {
            font-size: 2rem;
        }
        .video-sub-text {
            font-size: 1rem;
        }
    }
    
    .btn-link-area {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    
    .extra-mar-auto {
        margin: auto 0;
    }
    
    .app-btn-arrow-banner {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
    }
    
    .filler {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: end;
    }
    
    .absolute-row-sec {
        position: absolute;
        bottom: 40px;
        right: 20px;
    }
    
    .blur-screen-area {
        display: flex;
        flex-direction: row;
        position: relative;
        gap: 15px;
        width: fit-content;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.44);
        /* Transparent black */
        backdrop-filter: blur(10px);
        /* Blur background behind the element */
        -webkit-backdrop-filter: blur(10px);
        /* Safari support */
        border-radius: 8px;
        /* Optional for smooth corners */
    }
    
    .img-cntnt-arow {
        display: flex;
        flex-direction: row;
        gap: 20px;
        text-decoration: none;
    }
    
    .ths-txt {
        font-size: 15px;
        line-height: 18px;
        font-weight: 400;
        display: flex;
        align-items: end;
        color: #ffffff;
    }
    
    .top-arw-img {
        width: 10px;
        margin: auto 0 0;
    }
    
    .glow-section {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #000000;
        justify-content: center;
        gap: 5px;
    }
    
    .glow-text {
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        margin: auto 0;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.6);
        animation: whiteGlow 2.5s ease-in-out infinite;
    }
    
    @keyframes whiteGlow {
        0%,
        100% {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
        }
        50% {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 1);
        }
    }
    
    .brdr-simple {
        border: 1px solid #929292;
        border-radius: 50px;
        padding: 0px 6px;
    }
     @media (max-width:1600px) {
        .video-overlay-content {
            left: 40px;
            position: absolute;
            top: 45%;
        }
    }
    @media (max-width:1500px) {
        .video-text-content {
            left: 40px;
        }
    }
    
    @media (max-width:1150px) {
        .absolute-row-sec {
            display: none;
        }
        .video-main-title {
            font-size: 56px;
            line-height: 60px;
            font-weight: 700;
            width: 60%;
            padding-bottom: 20px;
        }
    }
    
    @media (max-width:991px) {
        .custom-video-banner {
            width: 100%;
            height: 775px;
        }
    }
    
    @media (max-width:767px) {
        .video-main-title {
            font-size: 44px;
            line-height: 46px;
        }
        .video-sub-text {
            width: 85%;
        }
    }
    
    @media (max-width:645px) {
        .video-main-title {
            width: 90%;
        }
    }
    
    @media (max-width:575px) {
        .video-text-content {
            left: 20px;
        }
        .video-main-title {
            font-size: 32px;
            line-height: 38px;
        }
        .custom-video-banner {
            width: 100%;
            height: 645px;
        }
    }
    
    .wsp-icon-link {
        width: 46px;
        position: fixed;
        right: 20px;
        bottom: 20%;
        z-index: 10;
        cursor: pointer;
    }
    
    @media screen and (max-width:575px) {
        .wsp-icon-link {
            width: 40px;
        }
        .msg-icon-link {
            width: 40px;
        }
        .wsp-icon-link {
            bottom: 9%;
        }
    }
    
    @media screen and (max-width:1500px) {
        
        .video-wrapper {
            position: relative;
            height: 750px;
            width: 100%;
            background: #000;
        }
    }
    
    @media screen and (max-width:1300px) {
        .overlay-title {
            font-size: 47px;
        }
        .video-overlay-content {
            left: 40px;
            position: absolute;
            top: 28%;
        }
    }
    
    @media screen and (max-width:1150px) {
        .video-wrapper {
            position: relative;
            height: 600px;
        }
    }
    
    @media screen and (max-width:991px) {
        .video-overlay-content {
            left: 15px;
        }
        .overlay-title {
            font-size: 39px;
        }
        .video-overlay-content {
            top: 55%;
        }
    }
    
    @media screen and (max-width:800px) {
        .video-wrapper {
            position: relative;
            height: 500px;
        }
        .overlay-title {
            width: 85%;
        }
    }
    
    @media screen and (max-width:575px) {
        .video-wrapper {
            position: relative;
            height: 650px;
        }
        .overlay-subtitle {
            width: 90%;
        }
        .video-overlay-content {
            top: 74%;
        }
        .overlay-title {
            font-size: 32px;
            width: 80%;
        }
        .overlay-subtitle {
            padding-top: 10px;
            font-size: 14px;
        }
        .video-overlay-content {
            padding: 0px;
        }
        .alexa-head {
            padding-bottom: 0px;
        }
        .alexa-content {
            font-size: 15px;
        }
        .alexa-head {
            font-family: "Inter", sans-serif;
            font-size: 49px;
        }
        .alexa-content {
            padding-bottom: 30px;
        }
        .custm-small-head {
            font-family: "Inter", sans-serif;
            font-size: 14px;
        }
        .custamise-col {
            padding-top: 50px;
        }
        .custm-btn {
            font-size: 14px;
        }
        .footer-section-area {
            padding-top: 30px;
            gap: 20px;
        }
    }
    
    @media screen and (max-width:450px) {
        .custm-big-head {
            padding-bottom: 15px;
        }
        .custm-big-content {
            padding-bottom: 25px;
        }
    }
    /* video-section-area-------------------------------------------------------------------------------------------- */
    
    .main-video-sec {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        background-color: #242424;
        align-items: center;
        padding: 60px 0;
        /* ensures some vertical space so scroll trigger fires */
        min-height: 100vh;
        /* helps the section be scrollable */
    }
    
    .video-alexa-area {
        width: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        /* allow scaled video to overflow a bit if needed */
    }
    /* keep video responsive but let GSAP animate transforms */
    
    .video-alexa-area video {
        display: block;
        width: 100%;
        max-height: 95vh;
        height: auto;
        object-fit: contain;
        transform-origin: center center;
        will-change: transform, opacity;
    }
    
    .video-content-area {
        width: 50%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }
    
    .video-head-alexa {
        font-family: "Inter", sans-serif;
        font-size: 72px;
        color: #ffffff;
        font-weight: 800;
        margin-bottom: 10px;
    }
    
    .video-content-alexa {
        font-family: "Inter", sans-serif;
        font-size: 24px;
        color: #ffffff;
        font-weight: 500;
    }
    
    @media screen and (max-width:1500px) {
        .main-video-sec {
            gap: 40px;
        }
        .video-head-alexa {
            font-size: 40px;
        }
        .video-content-alexa {
            font-size: 18px;
        }
    }
    
    @media screen and (max-width:1200px) {
        .main-video-sec {
            padding: 0px 0;
        }
        .smart-home-service {
            padding-bottom: 30px;
        }
        .who-we-are {
            padding-top: 40px;
        }
    }
    /* home-pod-animation---------------=============================================================== */
    /* The pinned stage */
    /* Tall scroll area */
    /* Tall scroll area */
    /* The tall page for scrolling */
    /* .video-section {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    .video-section video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
     */
    
    .next-section {
        height: 100vh;
        background: #f0f0f0;
    }
    
    .video-section {
        position: relative;
        width: 100%;
        height: 100vh;
    }
    
    .video-section video {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    /********************Style-Changes-Start*********************/
    /* .nav-links li a{
    padding: 9px 20px;
}
.nav-links .drop-menu {
    padding-top: 15px;
    padding-left: 10px;
    padding-bottom: 15px;
}
.nav-links li.has-submenu a {
    padding: 10px 15px;
}
.sub-drop-menu {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
}

.nav-links li.has-submenu .sub-drop-menu a {
    padding: 10px 15px 10px 20px;
}
.menu-btn i{
    color: #fff;
    font-size: 22px;
}
.chat-btn svg{
    display: none;
}
.nav-links .drop-menu .has-submenu{
    line-height: normal;
} */
    
    .header-line {
        color: #595959;
        line-height: normal;
        margin: auto;
    }
    
    .product-banner {
        position: relative;
    }
    
    .product-banner .title {
        position: absolute;
        top: -20%;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60%;
    }
    
    .product-banner .title h1 {
        color: #000000;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 76px;
        line-height: 80px;
        text-align: center;
    }
    
    .product-banner .title p {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        color: #000000;
        width: 65%;
        margin: auto;
    }
    
    .product-page {
        background-color: #242424;
    }
    
    .product-section .package-head-area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding-left: 70px;
        padding-right: 70px;
    }
    
    .product-section .page-head {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 56px;
        color: #ffffff;
        line-height: 100%;
        max-width: 35%;
        line-height: 68px;
    }
    
    .product-section .page-right-sec {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        text-align: right;
        color: #ffffff;
        max-width: 42%;
    }
    
    .title-decoration {
        position: relative;
    }
    
    .product-section .page-head .title-decoration::after {
        content: "";
        position: absolute;
        top: 60px;
        right: -30px;
        width: 127px;
        height: 20px;
        background-image: url(../images/product/pattern.png);
        background-repeat: no-repeat;
    }
    
    .product-section .page-head .title-decoration.pattern1::after {
        background-image: url(../images/product/pattern1.png);
        width: 238px;
        height: 28px;
    }
    
    .title-decoration {
        margin-bottom: 30px;
    }
    
    .product-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        background: #ffffff;
        padding: 15px;
        border-radius: 25px;
        width: 98%;
        margin: auto;
    }
    
    .product-grid-item {
        border-radius: 20px;
        padding: 25px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .greybg {
        background: #BDBEC0;
        transition: transform 0.3s ease;
    }
    
    .greybg1 {
        background: #BEBFC1;
        transition: transform 0.3s ease;
    }
    
    .greybg2 {
        background: #BFC0C2;
    }
    
    .greybg1:hover,
    .greybg2:hover {
        transform: scale(1.02);
    }
    
    .product-grid-item img {
        width: 100%;
    }
    
    .product-grid-title {
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        color: #444;
    }
    
    .product-grid-colors {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    .product-grid-color-box {
        width: 26px;
        height: 26px;
        border-radius: 0px;
        box-shadow: 0px 0px 12px 4px #0000002b;
    }
    
    .product-middle-items {
        width: 100%;
        height: 100%;
    }
    
    .top-box,
    .bottom-box {
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px 20px;
    }
    
    .top-box {
        height: 22%;
    }
    
    .bottom-box {
        height: 76%;
    }
    
    .top-box p {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 46px;
        line-height: 100%;
        margin-bottom: 0px;
        background: linear-gradient(180deg, #000000 -33.09%, #666666 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }
    
    .product-name,
    .row2-product-left-Col .top-box p {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 24px;
        line-height: 100%;
        background: linear-gradient(180deg, #000000 0%, #666666 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }
    
    .color-name {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 24px;
        line-height: 100%;
        background: linear-gradient(180deg, #000000 0%, #666666 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        padding-bottom: 10px;
    }
    
    .product_with_color {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 20px;
    }
    
    .product_with_color .product-grid-colors {
        flex-direction: column;
    }
    
    .product_with_color .grid-color-column {
        display: flex;
        align-items: center;
        column-gap: 30px;
        flex-direction: row-reverse;
    }
    
    .product_with_color .color-name {
        width: 24px;
        padding-bottom: 0px;
    }
    
    .product-section {
        padding-top: 120px;
        padding-bottom: 0px;
    }
    
    .item2-mob {
        display: none;
    }
    /* Placement rules */
    
    .item1 {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    /* Col 1, spans 2 rows */
    
    .item2 {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    /* Col 2, top half of row 1 */
    
    .item3 {
        grid-column: 3;
        span: 2;
    }
    /* Col 3, full row 1 */
    
    .item3 {
        grid-column: 3;
        grid-row: 1;
    }
    /* Col 2, bottom + extends full height of row 2 */
    
    .item4 {
        grid-column: 3;
        grid-row: 2;
    }
    /* Col 3, row 2 */
    
    .item5 {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    
    .item6 {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    
    .product-grid-color-black {
        background: #000;
    }
    
    .product-grid-color-white {
        background: #fff;
        border: 1px solid #ccc;
    }
    
    .product-grid-color-gray {
        background: #777;
    }
    
    .package-btn {
        padding-left: 70px;
        padding-right: 70px;
    }
    
    .enquiry-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .enquiry-btn a {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 100%;
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        height: 44px;
        width: 152px;
        padding: 10px;
        text-align: center;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 7px;
    }
    
    .enquiry-btn a img {
        margin-top: 4px;
    }
    
    .product-banner img {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    
    .row2-product-left-Col .top-box {
        height: 59%;
    }
    
    .row2-product-left-Col .bottom-box {
        height: 39%;
    }
    
    .row2-product-left-Col .product_with_color {
        flex-direction: row-reverse;
        column-gap: 40px;
    }
    
    .menu-btn i {
        display: flex;
        align-items: center;
    }
    
    .product-grid-container.grid-container {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .item6 .left-col-top {
        display: flex;
        align-items: flex-start;
        column-gap: 15px;
        height: 58%;
    }
    
    .item6 .left-col-top .top-box {
        width: 100%;
        height: 100%;
    }
    
    .item6 .left-col-bottom.bottom-box {
        height: 40%;
    }
    
    .item7 {
        grid-column: 2 / 3;
        grid-row: span 2;
    }
    /* tall left */
    
    .item8 {
        grid-column: 3 / 5;
        grid-row: 1;
    }
    /* wide top */
    
    .item9 {
        grid-column: 5 / 6;
        grid-row: 1;
    }
    /* small top */
    
    .item10 {
        grid-column: 6 / 7;
        grid-row: span 2;
    }
    /* tall right */
    
    .item11 {
        grid-column: 3 / 4;
        grid-row: 2;
    }
    /* small middle left */
    
    .item12 {
        grid-column: 4 / 5;
        grid-row: span 2;
    }
    /* tall middle */
    
    .item13 {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    /* wide bottom left */
    
    .item14 {
        grid-column: 3 / 4;
        grid-row: 3;
    }
    /* small bottom */
    
    .item15 {
        grid-column: 5 / 6;
        grid-row: span 2;
    }
    /* tall bottom right */
    
    .item16 {
        grid-column: 6 / 7;
        grid-row: 3;
    }
    /* small bottom right */
    /****contact start****/
    
    .custom-banner {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .section-container {
        max-width: 90%;
        margin: auto;
    }
    
    .banner-content {
        position: absolute;
        top: 15%;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .banner-img {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    
    .banner-title {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 56px;
        color: #fff;
        line-height: normal;
    }
    
    .banner-subtitle {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #fff;
        line-height: 28px;
    }
    
    .banner-content .banner-right {
        display: flex;
        justify-content: flex-end;
    }
    
    .contact-form {
        background-color: #ffffff17;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 25px;
        padding: 20px;
        width: 74%;
        margin: auto;
        border: 1px solid #ffffff14;
    }
    
    .form-title {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 22px;
        color: #fff;
    }
    
    .form-field-group .form-field {
        background-color: transparent;
        border: 0px;
        border-bottom: 1px solid #BABABA;
        padding: 10px 10px 10px 0px;
        color: #ffff;
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 14px;
    }
    
    .form-field-group input::placeholder {
        color: #BABABA;
    }
    
    .form-field-group .form-field:focus-visible {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    .form-field-group textarea {
        background-color: transparent;
        border: 1px solid #BABABA;
        border-radius: 15px;
        padding: 10px 15px;
        color: #fff;
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 14px;
        max-height: 148px;
    }
    
    .form-field-group textarea::placeholder {
        color: #BABABA;
    }
    
    .form-subtitle {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #fff;
    }
    /* .gl_order_error {
        display: none;
    } */
    
    .green-btn {
        background-color: #107340;
        color: #fff;
        border-radius: 92px;
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 16px;
        border: 1px solid #107340;
        height: 58px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .green-btn:hover {
        transform: translateY(-3px);
        background: linear-gradient(188deg, rgba(50, 150, 95, 1) 0%, rgba(25, 95, 55, 1) 63%);
        box-shadow: 0 6px 15px rgba(40, 125, 75, 0.4);
    }
    
    .company-details {
        background-color: #ffffff17;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(10px);
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        padding: 30px 20px;
        position: relative;
    }
    
    .contact-card {
        width: 656px;
        background: #ffffff17;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 40px;
        color: #fff;
        padding: 10px 20px 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        position: relative;
    }
    
    .box {
        padding: 25px 15px;
        position: relative;
        height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .contact-box1::after,
    .contact-box3::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        /* vertical border on the right */
        width: 1px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
    }
    /* horizontal border with fade */
    
    .contact-box1::before,
    .contact-box2::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        /* horizontal border at bottom */
        width: 100%;
        height: 1px;
    }
    
    .contact-box1::before {
        background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent);
    }
    
    .contact-box2::before {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent);
    }
    
    .contact-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 37px;
        padding: 1px;
        /* border thickness */
        background: /* top-right horizontal fade */
        linear-gradient(to left, #ffffff5c, transparent) top right / 50% 3px no-repeat, /* top-right vertical fade */
        linear-gradient(to bottom, #ffffff5c, transparent) top right / 24px 70% no-repeat, /* bottom-left horizontal fade */
        linear-gradient(to right, #ffffff5c, transparent) bottom left / 50% 28px no-repeat, /* bottom-left vertical fade */
        linear-gradient(to top, #ffffff5c, transparent) bottom left / 2px 70% no-repeat;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    
    .contact-card .box h3 {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 22px;
        color: #fff;
        display: flex;
        align-items: center;
        column-gap: 12px;
        margin-bottom: 10px;
    }
    
    .contact-card .box p,
    .contact-card .box li {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        color: #fff;
    }
    
    .contact-card .box ul {
        padding: 0px;
        list-style-type: none;
    }
    
    .contact-card .box li {
        margin-bottom: 3px;
    }
    
    .footer-bg {
        background-color: #242424;
        padding-top: 50px;
    }
    
    .section-content {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .section-title {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 36px;
    }
    
    .map-row iframe {
        border-radius: 30px;
    }
    /****contact end*****/
    /*****captcha********/
    
    label.error {
        font-size: 12px !important;
        /*position: relative;*/
        top: -4px;
        color: red !important;
        text-transform: none !important;
    }
    
    .flash_message {
        float: left;
        font-family: montserrat;
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 15px;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 12px 30px;
        color: #fff;
        background-color: #FDE386;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .23);
        z-index: 9999;
        transform: translate(-50%, -50%);
    }
    
    .gl_cod_order_captcha {
        border: 1px solid #000;
    }
    
    .captcha-spcl {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .gl_cod_order_captcha {
        font-size: 18px;
        font-family: "DM Serif Text";
        text-align: center;
        color: #fff;
        border: 1px dashed #CECECE;
        background: transparent;
        padding: 8px 25px;
        margin: 0 15px 0 0;
        border-radius: 6px;
    }
    
    .gl_order_captcha {
        font-size: 15px;
        color: #fff;
        background: none;
        border: 0px;
        border-radius: 0;
        box-shadow: none;
        padding-left: 10px;
        height: auto;
    }
    
    .captcha-field {
        border-bottom: 1px solid #D0D0D0;
        padding: 0 0 10px 0;
    }
    
    .gl_order_error-center {
        text-align: center;
    }
    
    .gl_order_captcha:focus-visible {
        outline: none !important;
    }
    
    .gl_order_captcha_two:focus-visible {
        outline: none !important;
    }
    
    @media (max-width:575px) {
        .gl_cod_order_captcha {
            padding: 7px 16px;
            font-size: 14px;
        }
        .gl_order_captcha {
            font-size: 14px;
            width: 120px;
        }
        .CaptchaEqual {
            margin: 0 10px 0 0;
        }
        .gl_cod_order_refresh {
            margin-left: 15px;
        }
        .gl_order_error {
            font-size: 12px;
        }
    }
    
    .err-cpt {
        display: flex;
        flex-direction: column;
    }
    /* Loading spinner */
    
    .loading-spinner {
        border: 3px solid #F3F3F3;
        /* Light gray */
        border-top: 3px solid #3498DB;
        /* Blue */
        border-radius: 50%;
        width: 13px;
        height: 13px;
        animation: spin 2s linear infinite;
        display: inline-block;
        /* margin-left: 10px; */
    }
    /* Animation for spinning */
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /*****captcha********/
    /****support-start*****/
    
    .support-pg .banner-content {
        top: 22%;
    }
    
    .support-features {
        display: flex;
        align-items: flex-start;
        column-gap: 30px;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .feature-box {
        width: 696px;
        padding: 40px 35px;
        height: 390px;
        border-radius: 20px;
        background-color: #242424;
    }
    
    .feature-box-title {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 36px;
        color: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .feature-box-content {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        color: #fff;
    }
    
    .feature-button .button {
        border: 1px solid #fff;
        border-radius: 10px;
        text-transform: uppercase;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 18px;
        background-color: transparent;
        padding: 12px 20px;
        color: #fff;
        margin-top: 40px;
        transition: all 0.3s ease;
        display: block;
        width: fit-content;
        text-decoration: none;
    }
    
    .feature-button .button:hover {
        transform: translateY(-3px);
        background-color: #fff;
        color: #242424;
        box-shadow: 0 6px 15px rgba(161, 161, 161, 0.4);
    }
    
    body.background-dark {
        background-color: #242424;
    }
    
    .xxl-container {
        width: 98%;
        margin: auto;
    }
    
    .faq-container-box {
        padding: 15px;
        border-radius: 30px;
        display: flex;
        align-items: flex-start;
        column-gap: 50px;
    }
    
    .faq-section .left-content img {
        border-radius: 15px 15px 70px 15px;
    }
    
    .faq-section .right-content {
        padding-top: 50px;
        padding-right: 10px;
    }
    
    .faq-section .title {
        font-family: "Inter", sans-serif;
        font-size: 36px;
        color: #000;
        font-weight: 600;
        padding-bottom: 7px;
    }
    
    .faq-section .content {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        color: #000;
    }
    
    .faq-section .faq-content {
        padding: 30px 0px 20px;
    }
    
    .faq-content .accordion-item {
        border: 0px;
        border-bottom: 1px solid #DBDBDB;
        width: 100%;
    }
    
    .faq-content .accordion-header .accordion-button {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        color: #000;
        border-radius: 0px;
        border: 0px;
        background-color: #fff !important;
        box-shadow: 0px 0px 0px 0px #fff;
        padding: 35px 0px;
    }
    
    .faq-content .accordion-body {
        padding: 0px 0px 20px;
        font-family: "Inter", sans-serif;
        color: #000;
        font-size: 15px;
    }
    
    .faq-content .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed,
    .faq-content .accordion-item:last-of-type>.accordion-collapse,
    .faq-content .accordion-item:last-of-type,
    .faq-content .accordion-item:first-of-type>.accordion-header .accordion-button {
        border-radius: 0px;
    }
    /* Initial state */
    
    .banner-content {
        opacity: 0;
        transform: translateY(50px);
        /* start below */
        transition: all 1s ease-out;
    }
    /* Final state */
    
    .banner-content.slide-up {
        opacity: 1;
        transform: translateY(0);
    }
    /****support-end*****/
    /****technology-start********/
    
    .technology-pg .banner-content {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .technology-pg .banner-subtitle {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .technology-pg .banner-content {
        top: 0;
    }
    
    .technology-a-banner .right-content {
        position: relative;
    }
    
    .technology-a-banner .right-content .image-abslt {
        position: absolute;
        bottom: -100px;
        left: 0px;
        right: 0px;
        /* display: flex;
        justify-content: center;
        align-items: end; */
        margin: auto;
        opacity: 0;
        /* invisible initially */
        margin-bottom: 0px;
        transition: transform 1.5s ease-out, opacity 1.5s ease-out;
        transform: translateY(100px);
        /* start from bottom */
    }
    
    .technology-a-banner .right-content .image-abslt.animate {
        transform: translateY(0);
        opacity: 1;
        bottom: 0px;
    }
    
    .technology-a-banner .left-content {
        width: 50%;
    }
    
    .technology-a-banner .right-content {
        width: 50%;
    }
    
    .technology-a-banner .banner-container-box .background-img {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        width: 100%;
    }
    
    .banner-container-box {
        display: flex;
        align-items: center;
        border-radius: 30px;
    }
    
    .technology-a-banner .left-content {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .technology-a-banner .title {
        font-family: "Inter", sans-serif;
        font-size: 46px;
        color: #000;
        font-weight: 500;
        width: 65%;
        padding-bottom: 10px;
    }
    
    .technology-a-banner .sub-title {
        font-family: "Inter", sans-serif;
        font-size: 20px;
        color: #000;
    }
    
    .technology-a-banner .content {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        color: #000;
        padding-top: 25px;
        padding-bottom: 35px;
    }
    
    .os-frames {
        display: flex;
        column-gap: 15px;
    }
    
    .mobile-os {
        background-color: #F6F6F6;
        border-radius: 16px;
        padding: 20px;
        color: #000;
        width: 270px;
        transition: all 0.4s ease;
    }
    
    .mobile-os:hover {
        transform: scale(1.01);
    }
    
    .technology-a-banner .mobile-os .content {
        padding-bottom: 0px;
        padding-top: 20px;
        color: #000;
        font-family: "Inter", sans-serif;
        font-size: 13px;
    }
    
    .mobile-os .os-name {
        font-family: "Inter", sans-serif;
        font-size: 24px;
        color: #000;
    }
    
    .mobile-os .detail-content {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        color: #000;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    
    .product-banner {
        position: relative;
    }
    
    .product-banner img {
        border-radius: 30px;
    }
    
    .product-on-banner {
        position: absolute;
        top: -20%;
        /* start from the top */
        left: 70px;
        right: 0;
        display: flex;
        justify-content: center;
        transition: transform 1.2s ease-out, opacity 1.2s ease-out;
        transform: translateY(-150px);
        /* initially above the banner */
        opacity: 0;
    }
    
    .product-on-banner.animate {
        transform: translateY(200px);
        /* move down to circle's center */
        opacity: 1;
    }
    
    .technology-b-banner .left-tag {
        position: absolute;
        top: 130px;
        left: 10%;
        opacity: 0;
        transform: translateX(-150px);
        /* start from left side */
        transition: transform 1s ease-out, opacity 1s ease-out;
    }
    
    .technology-b-banner .left-tag.animate {
        transform: translateX(0);
        opacity: 1;
    }
    
    .technology-b-banner .right-tag {
        position: absolute;
        top: 100px;
        right: 10%;
        opacity: 0;
        transform: translateX(150px);
        /* start from right side */
        transition: transform 1s ease-out, opacity 1s ease-out;
    }
    
    .technology-b-banner .right-tag.animate {
        transform: translateX(0);
        opacity: 1;
    }
    
    .technology-b-banner .product-content,
    .technology-c-banner .product-content {
        position: absolute;
        bottom: 10%;
        left: 80px;
        width: 28%;
    }
    
    .technology-b-banner .product-title,
    .technology-c-banner .product-title {
        font-family: "Inter", sans-serif;
        font-size: 46px;
        font-weight: 600;
        color: #ffffff;
    }
    
    .technology-b-banner .product-subcontent {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        color: #ffffff;
        padding-top: 10px;
        padding-bottom: 25px;
    }
    
    .technology-b-banner .enquiry-btn {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        color: #fff;
        border-radius: 30px;
        border: 1px solid #fff;
        width: 132px;
        height: 41px;
        text-align: center;
        background-color: transparent;
        transition: all 0.3s ease;
    }
    
    .technology-b-banner .enquiry-btn:hover {
        transform: translateY(-3px);
        background: #ffffff;
        box-shadow: 0 6px 15px rgba(230, 230, 230, 0.4);
        color: #000;
    }
    
    .technology-c-banner .bottom-banner img {
        border-radius: 30px;
    }
    
    .technology-c-banner .bottom-banner {
        position: relative;
    }
    
    .technology-c-banner .product-subtitle {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        color: #fff;
        font-weight: 600;
    }
    
    .technology-c-banner .product-subcontent {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
    }
    
    .technology-c-banner .product-content {
        width: 40%;
    }
    
    .product-banner .banner-img,
    .bottom-banner .banner-img {
        width: 100%;
    }
    
    .item-name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 10px;
    }
    
    .category-item-name {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    .category-item-name::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 2px;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }
    
    .category-detail-box:hover .category-item-name::after {
        transform: scaleX(1);
    }
    
    .category-detail-box a {
        color: #fff;
        text-decoration: none;
    }
    
    .category-detail-box .title-arrow {
        display: inline-block;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
    }
    
    .category-detail-box:hover .title-arrow {
        transform: rotate(30deg);
    }
    
    .category-pg .customise {
        width: 100%;
        position: relative;
        display: flex;
        background-image: url(../images/category/footer-banner.webp);
        height: 1000px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 30px 30px 0px 0px;
        padding-left: 100px;
        background-attachment: fixed;
    }
    
    .category-layout {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* default: 6 columns */
        column-gap: 24px;
        row-gap: 65px;
    }
    
    .category-detail-box {
        padding: 10px;
    }
    
    .section-row-title {
        font-family: "Inter", sans-serif;
        color: #ffffff;
        font-size: 46px;
        font-weight: 600;
    }
    
    .homehub-section {
        position: relative;
    }
    
    .homehub-content {
        position: absolute;
        top: 70px;
        left: 10%;
        width: 500px;
    }
    
    .homehub-section .title-row {
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: 15px 0px;
    }
    
    .homehub-section .title-btn {
        border-radius: 30px;
        font-family: "Inter", sans-serif;
        color: #ffffff;
        font-size: 18px;
        padding: 5px 26px;
        width: fit-content;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0.16) 50%, /* 16% */
        rgba(255, 255, 255, 0.08) 100%/* 8% */
        );
    }
    
    .green-button a {
        background: linear-gradient(188deg, rgba(40, 125, 75, 1) 0%, rgba(19, 82, 45, 1) 63%);
        padding: 8px 24px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        margin-top: 20px;
        transition: all 0.3s ease;
        cursor: pointer;
        font-size: 14px;
    }
    
    .homehub-banner {
        padding-bottom: 112px;
    }
    
    .green-button a:hover {
        transform: translateY(-3px);
        background: linear-gradient(188deg, rgba(50, 150, 95, 1) 0%, rgba(25, 95, 55, 1) 63%);
        box-shadow: 0 6px 15px rgba(40, 125, 75, 0.4);
    }
    
    .homehub-content {
        opacity: 0;
        transform: translateY(90px);
        transition: all 0.8s ease-out;
    }
    
    .homehub-content.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .map-row iframe {
        width: 60%;
    }
    
    .map-row .location-details {
        width: 35%;
        margin: auto;
    }
    
    .map-row.map-second-row .location-details {
        margin-left: 0px;
    }
    
    .map-row.map-first-row .location-details {
        display: flex;
        justify-content: center;
    }
    
    .map-row {
        display: flex;
        align-items: center;
        column-gap: 30px;
        justify-content: space-between;
    }
    
    .map-row .location-name {
        color: #818181;
        font-family: "Inter", sans-serif;
        font-size: 48px;
        font-weight: 500;
        width: 325px;
    }
    
    .map-row .office-details {
        display: flex;
        align-items: center;
        column-gap: 7px;
    }
    
    .map-row .office-details .name {
        color: #000000;
        font-family: "Inter", sans-serif;
        font-size: 12.02px;
        font-weight: 500;
        padding-top: 17px;
        padding-bottom: 7px;
    }
    
    .map-row .office-address {
        color: #818181;
        font-family: "Inter", sans-serif;
        font-size: 12.22px;
        width: 310px;
    }
    
    .category-pg .custamise-col {
        display: flex;
        flex-direction: column;
        width: 40%;
        padding-top: 0px;
        justify-content: flex-end;
        padding-bottom: 220px;
    }
    /*****technology-end*********/
    /********************banner animation*********************/
    
    .banner-content.slide-up {
        z-index: 2;
    }
    
    .custom-banner {
        position: relative;
        overflow: hidden;
    }
    
    .custom-banner .banner-img {
        transform: scale(1.2);
        /* Start zoomed in */
        transition: opacity 1.5s ease-in-out, transform 2s ease-in-out;
        /* Smooth zoom out + fade */
        position: relative;
        z-index: 1;
    }
    
    .custom-banner.loaded .banner-img {
        opacity: 1;
        /* Fade in */
        transform: scale(1);
        /* Zoom out to normal size */
    }
    
    @keyframes fadeOutOverlay {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /********************banner animation*********************/
    /* Initial hidden state */
    
    .map-row {
        opacity: 0;
        transform: translateY(50px);
        /* Start slightly below */
        transition: all 0.8s ease-out;
    }
    /* Visible state */
    
    .map-row.animate {
        opacity: 1;
        transform: translateY(0);
    }
    /********************title animation(letter one by one)*********************/
    
    .animated-title {
        white-space: normal;
        opacity: 0;
        /* Initially hidden */
        transition: opacity 0.3s ease;
    }
    
    .animated-title span {
        display: inline-block;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.5s forwards;
    }
    
    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInChar {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /********************title animation(letter one by one)*********************/
    
    .animated-text {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5ch;
        display: block;
    }
    
    .animated-text span {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .animated-text span.visible {
        opacity: 1;
        transform: translateY(0);
    }
    /*************************listing page***************************/
    
    .listing-pg .banner-title {
        font-size: 42px;
        line-height: 45px;
    }
    
    .listing-pg .banner-content {
        top: -20%;
    }
    
    .filter-container {
        background-color: #303030;
        border-radius: 12px;
        padding: 42px 42px 42px 0px;
    }
    
    .filter-section {
        margin-top: 42px;
        margin-bottom: 70px;
    }
    /*************************listing page**************************/
    
    .filter-section .work-content-sec {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
    }
    
    .filter-section .col5_col4lg_col3sm {
        grid-auto-flow: row;
        gap: 50px 18px;
        grid-template-columns: repeat(5, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1500px) {
            grid-template-columns: repeat(4, 1fr);
            .spanItem {
                grid-column: span 2;
            }
        }
        @media (max-width: 1300px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 18px;
            .spanItem {
                grid-column: span 2;
            }
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 30px;
        }
        @media (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    
    .filter-section .main-title {
        color: #ffffff;
        font-family: "Inter", sans-serif;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 35px;
    }
    
    .filter-section .topic {
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .filter-section .content input {
        display: none;
    }
    
    .filter-section .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .filter-section .content .list {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 18%;
        margin-right: 50px;
    }
    
    .filter-section .content .list label {
        cursor: pointer;
        height: 60px;
        line-height: 60px;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: normal;
        color: #ffffff;
        margin-left: 40px;
        transition: all 0.5s ease;
        z-index: 10;
        padding-bottom: 10px;
        position: relative;
        display: block;
    }
    
    .filter-section .content .list label::before {
        content: "";
        position: absolute;
        top: 25px;
        right: 10px;
        background-image: url('../images/listing/arrow.png');
        width: 5px;
        height: 9px;
        background-repeat: no-repeat;
    }
    
    .filter-section .content .list label:not(:last-of-type) {
        border-bottom: 1px solid #ffffff10;
    }
    
    .filter-section .content .slider {
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 100%;
        border-radius: 0px 12px 12px 0px;
        transition: all 0.5s ease;
        background: #13522D;
        padding-bottom: 10px;
    }
    
    #products:checked~.list .slider {
        top: 5px;
    }
    
    #smartassistant:checked~.list .slider {
        top: 65px;
    }
    
    #smartswitch:checked~.list .slider {
        top: 125px;
    }
    
    #thermostat:checked~.list .slider {
        top: 185px;
    }
    
    #displaycontrol:checked~.list .slider {
        top: 245px;
    }
    
    #camera:checked~.list .slider {
        top: 305px;
    }
    
    #smartsecurity:checked~.list .slider {
        top: 365px;
    }
    
    #homehub:checked~.list .slider {
        top: 425px;
    }
    
    #smartcurtain:checked~.list .slider {
        top: 485px;
    }
    
    #sensors:checked~.list .slider {
        top: 545px;
    }
    /* Change image when #products is checked */
    
    #products:checked~.list label[for="products"]::before,
    #smartassistant:checked~.list label[for="smartassistant"]::before,
    #smartswitch:checked~.list label[for="smartswitch"]::before,
    #thermostat:checked~.list label[for="thermostat"]::before,
    #displaycontrol:checked~.list label[for="displaycontrol"]::before,
    #camera:checked~.list label[for="camera"]::before,
    #smartsecurity:checked~.list label[for="smartsecurity"]::before,
    #homehub:checked~.list label[for="homehub"]::before,
    #smartcurtain:checked~.list label[for="smartcurtain"]::before,
    #sensors:checked~.list label[for="sensors"]::before {
        background-image: url('../images/listing/active-arrow.png');
    }
    
    .filter-section .content .text-content {
        width: 80%;
        height: 100%;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .filter-section .content .text {
        display: none;
    }
    
    .filter-section .content .text .title {
        font-size: 25px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .filter-section .container .text p {
        text-align: justify;
    }
    
    .filter-section .content .text-content .products {
        display: block;
    }
    
    #products:checked~.text-content .products,
    #smartassistant:checked~.text-content .smartassistant,
    #smartswitch:checked~.text-content .smartswitch,
    #thermostat:checked~.text-content .thermostat,
    #displaycontrol:checked~.text-content .displaycontrol,
    #camera:checked~.text-content .camera,
    #smartsecurity:checked~.text-content .smartsecurity,
    #homehub:checked~.text-content .homehub,
    #smartcurtain:checked~.text-content .smartcurtain,
    #sensors:checked~.text-content .sensors {
        display: block;
    }
    
    #smartassistant:checked~.text-content .products,
    #smartswitch:checked~.text-content .products,
    #thermostat:checked~.text-content .products,
    #displaycontrol:checked~.text-content .products,
    #camera:checked~.text-content .products,
    #smartsecurity:checked~.text-content .products,
    #homehub:checked~.text-content .products,
    #smartcurtain:checked~.text-content .products,
    #sensors:checked~.text-content .products {
        display: none;
    }
    
    .filter-section .content .list label:hover {
        color: #ffffff;
    }
    
    .filter-section .product-image {
        background-color: #ffffff;
        border-radius: 12px;
        text-align: center;
        height: 215px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }
    
    .filter-section .item-name {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        padding-bottom: 5px;
    }
    
    .filter-section .product-code {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: #ADADAD;
    }
    /************projects-start****************/
    
    .project-pg .banner-content {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-pg .banner-subtitle {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-pg .banner-content {
        top: 0;
    }
    
    .filter-btn {
        color: #ffff;
    }
    
    .port-filter-btns {
        border-radius: 12px;
        background-color: #303030;
        margin-top: 40px;
        margin-bottom: 70px;
        padding: 7px;
        display: flex;
        align-items: center;
        column-gap: 12px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    
    .filter-btn {
        padding: 10px 12px;
        border-radius: 6px;
        background-color: #ffffff0d;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 400;
        height: 59px;
        min-width: 171px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
    }
    
    .filter-btn:hover {
        background-color: #ffffff30;
    }
    
    .filter-btn.active,
    .filter-btn.active:hover {
        background-color: #13522D;
    }
    
    .port-view-sec {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        column-gap: 40px;
    }
    
    .project-content-sec {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
    }
    
    .project-col5_col4lg_col3sm {
        grid-auto-flow: row;
        gap: 40px 40px;
        grid-template-columns: repeat(2, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width:680px) {
            grid-template-columns: repeat(1, 1fr);
            .spanItem {
                grid-column: span 2;
            }
        }
    }
    
    .project-box {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        border-radius: 15px;
    }
    
    .project-box.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .work-box {
        position: relative;
        display: block;
        overflow: hidden;
    }
    
    .project-details {
        position: absolute;
        bottom: -100px;
        /* hide below the box */
        left: 0px;
        right: 0px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 30px 20px;
        transition: bottom 0.4s ease, opacity 0.4s ease;
        opacity: 0;
        /* hidden initially */
    }
    
    .work-box:hover .project-details {
        bottom: 0px;
        /* slide to original position */
        opacity: 1;
        /* make visible */
        z-index: 99;
    }
    
    .project-details .arrow-round {
        background-color: #ffffff40;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .project-name {
        font-family: "Inter", sans-serif;
        font-size: 23px;
        font-weight: 400;
        color: #ffffff;
    }
    /* Add gradient overlay on hover */
    
    .work-box::before {
        content: "";
        position: absolute;
        inset: 0;
        /* top: 0; left: 0; right: 0; bottom: 0; */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 100%, rgba(0, 0, 0, 0) 0%);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 1;
        border-radius: 15px;
    }
    
    .work-box:hover::before {
        opacity: 1;
    }
    /***********projects-end******************/
    /********************Responsive*********************/
    
    @media (max-width: 1800px) {
        .product-banner .title {
            width: 70%;
        }
        .product-section .page-head img {
            top: 60px;
            right: 45px;
        }
        .product-section .page-right-sec {
            max-width: 35%;
        }
        .product-section .page-head {
            max-width: 40%;
        }
        .banner-title {
            font-size: 52px;
        }
        .left-tag.animate img,
        .right-tag.animate img {
            width: 300px;
        }
        .homehub-content .section-row-title {
            font-size: 42px;
        }
    }
    
    @media (max-width: 1680px) {
        .banner-title {
            font-size: 47px;
        }
        .technology-pg .banner-subtitle {
            width: 78%;
        }
        .technology-a-banner .left-content {
            padding-right: 60px;
        }
        .technology-a-banner .title {
            font-size: 42px;
            width: 75%;
        }
        .mobile-os {
            padding: 15px 20px;
        }
        .technology-a-banner .content {
            padding-top: 20px;
            padding-bottom: 25px;
        }
        .technology-c-banner .product-content {
            width: 50%;
        }
        .filter-section .content .list {
            width: 25%;
        }
    }
    
    @media (max-width: 1500px) {
        .nav-links li a {
            padding: 9px 14px;
        }
        .product-banner .title {
            width: 80%;
        }
        .product-banner .title p {
            width: 70%;
        }
        .product_with_color .grid-color-column {
            column-gap: 15px;
        }
        .product_with_color {
            flex-direction: column;
        }
        .product_with_color .product-grid-colors {
            flex-direction: row;
        }
        .product_with_color .grid-color-column {
            flex-direction: column;
        }
        .product_with_color .color-name {
            width: auto;
            padding-bottom: 20px;
        }
        .bottom-box {
            padding: 60px 20px;
        }
        .product-section .page-head {
            max-width: 40%;
        }
        .product-section .page-right-sec {
            max-width: 40%;
        }
        .product-section {
            padding-top: 80px;
            padding-bottom: 80px;
        }
        .banner-title {
            font-size: 42px;
        }
        .faq-container-box .left-content,
        .faq-container-box .right-content {
            width: 50%;
        }
        .faq-container-box .left-content img {
            width: 100%;
        }
        .feature-box {
            width: 100%;
        }
        .technology-b-banner .product-title,
        .technology-c-banner .product-title {
            font-size: 40px;
        }
        .product-on-banner .product-img {
            width: 400px;
        }
        .filter-section .content .text-content {
            width: 75%;
        }
    }
    
    @media (max-width: 1400px) {
        .banner-title {
            font-size: 38px;
        }
        .pb-xxl-20 {
            padding-bottom: 20px;
        }
        .green-btn {
            height: 48px;
        }
        .contact-card {
            width: auto;
        }
        .feature-box-title {
            font-size: 30px;
        }
        .feature-box-content,
        .feature-button .button {
            font-size: 16px;
        }
        .feature-box {
            height: 370px;
        }
        .technology-pg .banner-subtitle {
            width: 95%;
        }
        .technology-a-banner .banner-container-box .right-content .background-img {
            display: none;
        }
        .technology-a-banner .banner-container-box .right-content {
            background-image: url(../images/technology/green-banner.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 50%;
            height: 765px;
            display: flex;
            align-items: end;
            justify-content: center;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .technology-a-banner .right-content .image-abslt.animate {
            position: initial;
        }
        .technology-a-banner .title {
            font-size: 37px;
        }
        .mobile-os {
            padding: 20px 20px;
        }
        .mobile-os .detail-content {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .technology-a-banner .sub-title {
            font-size: 17px;
        }
        .technology-pg .banner-title {
            font-size: 47px;
        }
        .technology-pg .banner-content {
            width: 65%;
        }
        .project-pg .banner-content {
            width: 65%;
        }
        .technology-b-banner .left-tag {
            top: 80px;
            left: 6%;
        }
        .technology-b-banner .right-tag {
            top: 55px;
        }
        .product-on-banner {
            top: -27%;
        }
        .technology-b-banner .right-tag {
            right: 5%;
        }
        .section-title {
            font-size: 34px;
        }
        .homehub-content .section-row-title {
            font-size: 38px;
        }
        .listing-pg .banner-title {
            font-size: 38px;
            line-height: 40px;
        }
    }
    
    @media (max-width: 1300px) {
        nav {
            padding-left: 30px;
            padding-right: 30px;
        }
        .nav-links li a {
            padding: 9px 12px;
        }
        .product-banner .title h1 {
            font-size: 65px;
            line-height: 65px;
        }
        .top-box p {
            font-size: 40px;
        }
        .product-section .page-right-sec {
            max-width: 46%;
        }
        .product-section .page-head {
            font-size: 50px;
        }
        .product-section .page-head .title-decoration::after {
            top: 56px;
            right: -40px;
        }
        .contact-form {
            padding: 15px 20px 10px;
        }
        .banner-content {
            padding-left: 40px;
            padding-right: 40px;
        }
        .contact-card {
            padding: 10px 10px 10px;
        }
        .contact-card .box p,
        .contact-card .box ul {
            margin-bottom: 0px;
        }
        .box {
            height: auto;
            min-height: 130px;
        }
        .form-field-group textarea {
            max-height: 100px;
        }
        .support-pg .banner-content {
            top: 15%;
        }
        .technology-a-banner .left-content {
            padding-left: 40px;
            padding-right: 40px;
        }
        .product-on-banner .product-img {
            width: 350px;
        }
        .technology-b-banner .product-content,
        .technology-c-banner .product-content {
            left: 50px;
        }
        .technology-b-banner .product-title,
        .technology-c-banner .product-title {
            font-size: 38px;
        }
        .product-on-banner {
            top: -30%;
        }
        .technology-c-banner .product-content {
            bottom: 8%;
        }
        .homehub-content {
            top: 70px;
        }
        .section-row-title {
            font-size: 40px;
        }
        .homehub-banner {
            padding-bottom: 80px;
        }
        .category-pg .custamise-col {
            width: 45%;
        }
        .filter-section .content .text-content {
            width: 75%;
        }
        .filter-section .content .list label {
            margin-left: 20px;
        }
    }
    
    @media (max-width: 1200px) {
        .nav-links li a {
            padding: 9px 9px;
            font-size: 13px;
        }
        .wrapper .nav-links {
            padding-left: 20px;
        }
        .icon-sec-nav {
            gap: 12px;
        }
        nav {
            padding-left: 25px;
            padding-right: 25px;
        }
        .product-banner .title h1 {
            font-size: 60px;
            line-height: 60px;
        }
        .product-section .page-right-sec {
            max-width: 42%;
        }
        .product-section .page-head {
            max-width: 50%;
        }
        .top-box p {
            font-size: 35px;
        }
        .banner-content {
            background-image: url('../images/contact/banner.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100%;
            position: initial;
            padding-top: 120px;
            padding-bottom: 100px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            opacity: 1;
            transform: translateY(0px)
        }
        .custom-banner .section-container {
            max-width: 100%;
        }
        .contact-form {
            margin-left: auto;
            margin-right: 0px;
        }
        .contact-card .box p,
        .contact-card .box li {
            font-size: 15px;
        }
        .section-content {
            padding-top: 35px;
            padding-bottom: 35px;
        }
        .faq-container-box .left-content,
        .faq-container-box .right-content {
            width: 100%;
        }
        .faq-container-box {
            flex-direction: column-reverse;
        }
        .faq-section .right-content {
            padding-top: 20px;
        }
        .faq-section .faq-content {
            padding: 30px 0px 50px;
        }
        .faq-container-box {
            padding: 30px;
        }
        .support-pg .banner-content {
            background-image: url(../images/support/banner.png);
        }
        .technology-pg .banner-content {
            background-image: url(../images/technology/banner.png);
        }
        .technology-pg .banner-content {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .project-pg .banner-content {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .technology-pg .banner-title {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
        .technology-pg .banner-subtitle {
            width: 50%;
        }
        .support-features {
            flex-wrap: wrap;
            row-gap: 35px;
        }
        .support-pg .custom-banner .banner-content {
            row-gap: 0px;
        }
        .feature-box {
            height: auto;
        }
        .feature-box {
            width: 600px;
        }
        .faq-section .left-content img {
            border-radius: 15px 15px 15px 15px;
        }
        .technology-a-banner .title {
            font-size: 34px;
        }
        .product-banner .banner-img {
            display: none;
        }
        .technology-b-banner .product-banner {
            background-image: url(../images/technology/blue-banner.png);
            object-fit: cover;
            width: 100%;
            height: 550px;
            background-position: top center;
            background-repeat: no-repeat;
            border-radius: 30px;
        }
        .technology-b-banner .product-content,
        .technology-c-banner .product-content {
            left: 35px;
        }
        .left-tag.animate img,
        .right-tag.animate img {
            width: 250px;
        }
        .technology-b-banner .product-title,
        .technology-c-banner .product-title {
            font-size: 32px;
        }
        .product-on-banner {
            top: -16%;
        }
        .technology-b-banner .right-tag {
            top: 65px;
        }
        .technology-b-banner .product-banner .right-tag img {
            border-radius: 0px;
        }
        .technology-c-banner .bottom-banner .banner-img {
            display: none;
        }
        .technology-c-banner .bottom-banner {
            background-image: url('../images/technology/bottom-banner.png');
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 480px;
            background-position: center right;
            border-radius: 30px;
            position: relative;
        }
        .technology-c-banner .bottom-banner::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0000004d;
            /* Change opacity/color as needed */
            border-radius: 30px;
            /* Match parent */
            z-index: 1;
            /* Keeps overlay on top of background but behind content */
        }
        .technology-c-banner .bottom-banner .product-content {
            z-index: 2;
        }
        .category-pg .banner-content {
            background-image: url(../images/category/banner.webp);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 450px;
            position: initial;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .section-title {
            font-size: 32px;
        }
        .category-layout {
            grid-template-columns: repeat(2, 1fr);
            /* 2 columns per row */
        }
        .category-layout {
            row-gap: 45px;
        }
        .homehub-banner-image {
            display: none;
        }
        .homehub-section {
            background-image: url(../images/category/home-hub-banner.webp);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: left center;
            width: 100%;
            height: 600px;
            border-radius: 30px;
        }
        .category-pg .custamise-col {
            width: 55%;
        }
        .map-row .location-name {
            font-size: 42px;
        }
        .map-row iframe {
            border-radius: 15px;
        }
        .listing-pg .banner-content {
            background-image: url(../images/listing/banner.png);
            height: 500px;
            padding-top: 0px;
        }
        .filter-section .content .text-content {
            width: 65%;
        }
    }
    
    @media (max-width: 1099px) {
        .filter-section .content .list {
            width: 30%;
        }
        .project-name {
            font-size: 20px;
        }
        .project-details .arrow-round {
            width: 38px;
            height: 38px;
        }
    }
    
    @media (max-width: 1024px) {
        .icon-sec-nav {
            gap: 20px;
        }
        .wrapper .btn {
            display: block;
            padding: 0px;
            margin: auto;
        }
        .wrapper .nav-links {
            z-index:99;
            position: fixed;
            height: 100vh;
            width: 100%;
            max-width: 350px;
            top: 0;
            left: -100%;
            background: #242526;
            display: block;
            padding: 50px 10px;
            line-height: 50px;
            overflow-y: auto;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
            transition: all 0.3s ease;
        }
        /* custom scroll bar */
         ::-webkit-scrollbar {
            width: 10px;
        }
         ::-webkit-scrollbar-track {
            background: #242526;
        }
         ::-webkit-scrollbar-thumb {
            background: #3A3B3C;
        }
        #menu-btn:checked~.nav-links {
            left: 0%;
        }
        #menu-btn:checked~.btn.menu-btn {
            display: none;
        }
        #close-btn:checked~.btn.menu-btn {
            display: block;
        }
        .nav-links li {
            margin: 15px 10px;
        }
        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 20px;
        }
        .nav-links .drop-menu {
            position: static;
            opacity: 0;
            top: 65px;
            visibility: hidden;
            padding-left: 20px;
            width: 100%;
            max-height: 0px;
            overflow: hidden;
            box-shadow: none;
            transition: all 0.3s ease;
            display: none;
        }
        .nav-links li:hover .drop-menu {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
        #showDrop:checked~.drop-menu {
            display: block;
        }
        .has-submenu:hover .sub-drop-menu {
            margin-bottom: 10px;
        }
        .sub-drop-menu {
            position: initial;
            background: #242526;
            box-shadow: 0px 0px 0px 0px;
        }
        .sub-drop-menu li a:hover,
        .sub-drop-menu li a {
            background: #242526;
            color: #FFFFFF;
        }
        #showDrop:checked~.drop-menu,
        #showMega:checked~.mega-box {
            max-height: 100%;
        }
        .nav-links .desktop-item {
            display: none;
        }
        .nav-links .mobile-item {
            display: block;
            color: #f2f2f2;
            font-size: 20px;
            font-weight: 500;
            padding-left: 20px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .nav-links .mobile-item:hover {
            background: #3a3b3c00 !important;
        }
        .drop-menu li {
            margin: 0;
        }
        .drop-menu li a {
            border-radius: 5px;
            font-size: 18px;
        }
        .mega-box {
            position: static;
            top: 65px;
            opacity: 1;
            visibility: visible;
            padding: 0 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .mega-box .content {
            box-shadow: none;
            flex-direction: column;
            padding: 20px 20px 0 20px;
        }
        .mega-box .content .row {
            width: 100%;
            margin-bottom: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .mega-box .content .row:nth-child(1),
        .mega-box .content .row:nth-child(2) {
            border-top: 0px;
        }
        .content .row .mega-links {
            border-left: 0px;
            padding-left: 15px;
        }
        .row .mega-links li {
            margin: 0;
        }
        .content .row header {
            font-size: 19px;
        }
        .product-banner .title h1 {
            font-size: 50px;
            line-height: 50px;
        }
        .product-banner .title p {
            width: 80%;
        }
        .product-section .package-head-area {
            flex-direction: column;
            row-gap: 45px;
            padding-left: 40px;
            padding-right: 40px;
        }
        .product-section .page-head,
        .product-section .page-right-sec {
            max-width: 100%;
            text-align: center;
            margin: auto;
        }
        .product-section .page-head .title-decoration::after {
            background-image: none;
        }
        .package-head-area .page-head {
            position: relative;
        }
        .package-head-area .page-head::after {
            content: "";
            position: absolute;
            top: 65px;
            right: 0px;
            left: 0px;
            margin: auto;
            width: 127px;
            height: 20px;
            background-image: url(../images/product/pattern.png);
            background-repeat: no-repeat;
        }
        .product-section {
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .package-btn {
            padding-left: 40px;
            padding-right: 40px;
        }
        .technology-b-banner .product-content {
            width: 35%;
        }
        .technology-c-banner .product-content {
            width: 60%;
        }
        .left-tag.animate img,
        .right-tag.animate img {
            width: 200px;
        }
        .homehub-banner {
            padding-bottom: 70px;
        }
        .category-pg .custamise-col {
            width: 60%;
        }
        .banner-title {
            font-size: 32px;
        }
    }
    
    @media (max-width: 992px) {
        .product-banner .title h1 {
            font-size: 40px;
            line-height: 40px;
        }
        .product-banner .title {
            width: 70%;
            top: -10%;
        }
        .product-banner .title p {
            width: 98%;
        }
        .product-section .page-head {
            font-size: 35px;
        }
        .box {
            padding: 15px 8px;
            min-height: auto;
        }
        .contact-card .box h3 {
            font-size: 20px;
        }
        .technology-pg .banner-title {
            width: 90%;
        }
        .technology-pg .banner-subtitle {
            width: 80%;
        }
        .technology-a-banner .left-content,
        .technology-a-banner .right-content {
            width: 100%;
        }
        .technology-a-banner .banner-container-box {
            flex-wrap: wrap;
            row-gap: 40x;
        }
        .technology-a-banner .banner-container-box .right-content {
            width: 100%;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 30px;
            height: 600px;
        }
        .technology-a-banner .left-content {
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .technology-a-banner .content {
            padding-top: 25px;
            padding-bottom: 35px;
        }
        .technology-a-banner .sub-title {
            font-size: 20px;
        }
        .technology-a-banner .title {
            font-size: 38px;
            width: 100%;
        }
        .mobile-os {
            width: 265px;
        }
        .technology-c-banner .product-content {
            width: 80%;
        }
        .section-title {
            font-size: 30px;
        }
        .category-pg .custamise-col {
            width: 75%;
        }
        .map-row iframe {
            width: 55%;
        }
        .category-pg .banner-content {
            height: 100%;
        }
        .homehub-content {
            top: 65px;
            left: 5%;
        }
        .homehub-section .title-row img {
            width: 40px;
        }
        .banner-subtitle {
            line-height: normal;
        }
        .filter-section .content {
            flex-wrap: wrap;
            row-gap: 35px;
        }
        .filter-container {
            padding: 30px 30px;
        }
        .filter-section .content .list label {
            border: 1px solid #ffffff10;
            border-bottom: 1px solid #ffffff10;
        }
        .filter-section .content .list {
            flex-direction: row;
            width: 100%;
            flex-wrap: wrap;
            row-gap: 15px;
            position: relative;
            column-gap: 10px;
        }
        /* Remove the global slider background */
        .filter-section .content .slider {
            display: none;
            /* Hide the big slider */
        }
        /* Highlight active label only */
        .filter-section .content .list label {
            position: relative;
            padding: 10px 20px;
            border-radius: 8px;
            transition: background 0.3s ease;
        }
        /* Active states for each */
        #products:checked~.list label.products,
        #smartassistant:checked~.list label.smartassistant,
        #smartswitch:checked~.list label.smartswitch,
        #thermostat:checked~.list label.thermostat,
        #displaycontrol:checked~.list label.displaycontrol,
        #camera:checked~.list label.camera,
        #smartsecurity:checked~.list label.smartsecurity,
        #homehub:checked~.list label.homehub,
        #smartcurtain:checked~.list label.smartcurtain,
        #sensors:checked~.list label.sensors {
            background: #13522D;
            /* Active background */
            color: #fff;
            /* Optional: white text for contrast */
        }
        .filter-section .content .list label::before {
            top: 17px;
            right: 12px;
        }
        .filter-section .content .list label {
            margin-left: 0px;
            height: auto;
            line-height: normal;
            padding: 10px 30px 10px 20px;
        }
        .filter-section .content .text-content {
            width: 100%;
        }
        .filter-section .product-image {
            height: 250px;
        }
        .filter-btn {
            padding: 10px 15px;
            height: 50px;
            min-width: auto;
        }
        .project-details {
            padding: 0px 15px 20px;
        }
    }
    
    @media (max-width: 820px) {
        .product-banner .title p {
            width: 90%;
        }
        .product-banner .title {
            width: 80%;
            top: -10%;
        }
        .product-banner .title h1 {
            font-size: 35px;
            line-height: 35px;
        }
        .product-section .package-head-area {
            row-gap: 30px;
        }
        .package-head-area .page-head::after {
            top: 100%;
        }
        .product-section .page-head {
            line-height: normal;
        }
        .custom-banner .banner-content {
            flex-wrap: wrap;
            padding-bottom: 50px;
        }
        .contact-pg .custom-banner .banner-content {
            row-gap: 40px;
        }
        .contact-form {
            margin-right: auto;
            margin-left: auto;
            width: 100%;
        }
        .banner-title {
            font-size: 35px;
        }
        .technology-pg .custom-banner .banner-content {
            row-gap: 0px;
            padding-bottom: 50px;
        }
        .technology-a-banner .title {
            font-size: 35px;
        }
        .technology-pg .banner-title {
            font-size: 35px;
        }
        .technology-pg .banner-subtitle {
            width: 80%;
        }
        .technology-b-banner .product-content {
            position: initial;
            display: flex;
            flex-direction: column;
            justify-content: end;
            height: 100%;
            padding-left: 40px;
            padding-right: 40px;
            width: 100%;
            padding-bottom: 40px;
        }
        .technology-b-banner .product-banner {
            height: 670px;
        }
        .technology-b-banner .right-tag {
            top: 35px;
        }
        .technology-b-banner .left-tag {
            top: 50px;
        }
        .homehub-content .section-row-title {
            font-size: 35px;
        }
        .inner-customize-bg .custm-big-head {
            font-size: 35px;
        }
        .listing-pg .banner-title {
            font-size: 35px;
            line-height: 38px;
        }
        .banner-title {
            font-size: 28px;
        }
    }
    
    @media (max-width: 768px) {
        .item1 {
            grid-column: 1 / span 3;
            grid-row: 1;
        }
        .item2 {
            grid-column: 1 / span 2;
            grid-row: 3 / span 2;
        }
        .product-middle-items {
            column-gap: 0px;
            justify-content: flex-start;
        }
        .item3 {
            grid-column: 3;
            grid-row: 3;
        }
        .item4 {
            grid-column: 3;
            grid-row: 4;
        }
        .top-box,
        .bottom-box {
            height: 100%;
        }
        .item2-mob {
            display: block;
            grid-column: 1 / span 3;
            grid-row: 2;
        }
        .feature-box {
            width: 100%;
        }
        .feature-box {
            width: 100%;
        }
        .footer-bg {
            padding-top: 40px;
        }
        .homehub-banner {
            padding-bottom: 55px;
        }
        .category-pg .customise {
            padding-left: 35px;
        }
        .map-row .location-details {
            width: 100%;
        }
        .map-row iframe,
        .map-row .location-name,
        .map-row .office-address {
            width: 100%;
        }
        .map-row {
            flex-direction: column;
            row-gap: 40px;
        }
        .map-row.map-second-row {
            flex-direction: column-reverse;
        }
        .map-row.map-first-row .location-details,
        .map-row .location-details {
            justify-content: flex-start;
        }
        .map-row .location-name {
            font-size: 30px;
        }
        .category-pg .customise {
            height: 700px;
        }
        .project-name {
            font-size: 18px;
        }
        .project-details .arrow-round {
            width: 30px;
            height: 30px;
        }
        .project-col5_col4lg_col3sm {
            gap: 20px 20px;
        }
        .filter-btn {
            font-size: 14px;
        }
        .project-pg .banner-subtitle {
            width: 90%;
        }
    }
    
    @media (max-width: 680px) {
        .product-banner .title {
            width: 80%;
            position: inherit;
            padding-top: 40px;
            padding-bottom: 0px;
        }
        .product-banner .title h1 {
            margin-bottom: 0px;
            color: #fff
        }
        .product-banner .title p {
            color: #fff
        }
        .technology-c-banner .product-content {
            left: 30px;
        }
        .category-layout {
            grid-template-columns: 1fr;
            /* 1 column per row */
        }
        .category-layout {
            row-gap: 30px;
        }
        .homehub-content {
            width: 80%;
            left: 7%;
        }
        .category-pg .custamise-col {
            width: 85%;
        }
        .project-name {
            font-size: 20px;
        }
        .port-filter-btns {
            flex-direction: column;
            row-gap: 10px;
            width: 100%;
            margin-bottom: 40px;
        }
        .filter-btn {
            width: 100%;
        }
        .filter-btn {
            font-size: 16px;
        }
    }
    
    @media (max-width: 620px) {
        .technology-b-banner .product-banner {
            height: 700px;
        }
        .map-row {
            row-gap: 25px;
        }
    }
    
    @media (max-width: 575px) {
        .product-banner .title {
            width: 90%;
        }
        /* .app-btn {
    display: none;
} */
        .chat-btn {
            display: none;
        }
        nav {
            width: 100%;
            border-radius: 0px;
        }
        nav {
            padding-left: 15px;
            padding-right: 15px;
        }
        .banner-content {
            padding-left: 30px;
            padding-right: 30px;
        }
        .map-row iframe {
            height: 400px !important;
        }
        .technology-pg .banner-title {
            width: 100%;
        }
        .technology-pg .banner-subtitle {
            width: 100%;
        }
        .technology-pg .banner-title {
            font-size: 26px;
        }
        .technology-a-banner .title {
            font-size: 28px;
        }
        .technology-a-banner .left-content {
            padding-top: 30px;
            padding-bottom: 30px;
        }
        .os-frames {
            flex-wrap: wrap;
            row-gap: 20px;
        }
        .mobile-os {
            width: 100%;
        }
        .mobile-os .os-name {
            font-size: 20px;
        }
        .xxl-container {
            width: 96%;
        }
        .faq-content .accordion-header .accordion-button {
            font-size: 15px;
            padding: 25px 0px;
        }
        .faq-section .faq-content {
            padding: 0px 0px 50px;
        }
        .footer-bg {
            padding-top: 30px;
        }
        .technology-b-banner .product-content {
            padding-left: 25px;
            padding-right: 25px;
        }
        .technology-b-banner .product-title,
        .technology-c-banner .product-title {
            font-size: 28px;
        }
        .technology-b-banner .product-content {
            padding-bottom: 30px;
        }
        .technology-b-banner .product-banner {
            height: 685px;
        }
        .homehub-banner {
            padding-bottom: 45px;
        }
        .contact-card .box p,
        .contact-card .box li {
            font-size: 14px;
        }
        .contact-card .box h3 {
            font-size: 18px;
        }
        .banner-title {
            font-size: 26px;
        }
        .banner-subtitle,
        .form-subtitle {
            font-size: 14px;
            line-height: 22px;
        }
        .form-title {
            font-size: 20px;
        }
        .form-field-group .form-field,
        .form-field-group textarea {
            font-size: 13px;
        }
        .homehub-content .section-row-title {
            font-size: 26px;
        }
        .homehub-content {
            top: 45px;
        }
        .homehub-section .title-btn {
            font-size: 15px;
            padding: 5px 15px;
        }
        .green-button a {
            padding: 8px 15px;
        }
        .homehub-section {
            height: 500px;
        }
        .category-pg .customise {
            height: 600px;
        }
        .homehub-section .title-row img {
            width: 30px;
        }
        .inner-customize-bg .custm-big-head {
            font-size: 30px;
        }
        .support-pg .banner-title {
            font-size: 32px;
        }
        .feature-box img {
            width: 50px;
        }
        .feature-box-content,
        .feature-button .button {
            font-size: 14px;
            line-height: 20px;
        }
        .feature-button .button {
            font-size: 13px;
            padding: 8px 10px;
            line-height: normal;
        }
        .faq-section .title {
            font-size: 30px;
            padding-bottom: 15px;
        }
        .faq-section .right-content {
            padding-top: 0px;
            padding-right: 0px;
        }
        .faq-content .accordion-body {
            font-size: 14px;
            line-height: 20px;
        }
        .faq-section .content {
            line-height: 20px;
        }
        .listing-pg .banner-title {
            font-size: 26px;
            line-height: 30px;
        }
        .banner-subtitle,
        .form-subtitle {
            line-height: normal;
        }
        .listing-pg .banner-content {
            height: 450px;
        }
        .project-name {
            font-size: 18px;
        }
    }
    
    @media (max-width: 480px) {
        nav {
            padding-left: 15px;
            padding-right: 15px;
        }
        .logo .image-width {
            width: 80%;
            object-fit: contain;
        }
        .app-btn {
            font-size: 13px;
        }
        .header-line {
            display: none;
        }
        .product-banner .title h1 {
            font-size: 30px;
            line-height: 30px;
        }
        .product-section .page-head {
            font-size: 30px;
        }
        .product-section {
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .item2 {
            grid-column: 1 / span 3;
            grid-row: 3;
        }
        .item3 {
            grid-column: 1 / span 3;
            grid-row: 4;
        }
        .item4 {
            grid-column: 1 / span 3;
            grid-row: 5;
        }
        .product-name,
        .color-name {
            font-size: 20px;
        }
        .contact-card {
            grid-template-columns: 1fr;
        }
        .contact-box1::after,
        .contact-box3::after {
            width: 0px;
        }
        .contact-box3::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
        }
        .contact-box2::before,
        .contact-box1::before,
        .contact-box3::before {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.2));
        }
        .contact-form {
            padding: 15px 15px 10px;
        }
        .map-row iframe {
            height: 300px !important;
        }
        .feature-box {
            padding: 20px 20px;
        }
        .feature-box-title {
            font-size: 22px;
        }
        .feature-button .button {
            margin-top: 25px;
        }
        .technology-pg .banner-title {
            font-size: 30px;
        }
        .technology-a-banner .title {
            font-size: 26px;
        }
        .technology-a-banner .left-content {
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 30px;
            padding-bottom: 30px;
        }
        .technology-b-banner .left-tag {
            top: 35px;
        }
        .technology-b-banner .product-banner {
            height: 730px;
        }
        .product-on-banner .product-img {
            width: 320px;
        }
        .product-on-banner {
            top: -8%;
            left: 0px;
        }
        .technology-b-banner .right-tag {
            top: 90px;
        }
        .product-on-banner {
            top: -5%;
        }
        .technology-c-banner .product-content {
            width: 90%;
        }
        .technology-c-banner .product-content {
            left: 20x;
        }
        .section-title {
            font-size: 28px;
        }
        .map-row .location-name {
            font-size: 26px;
        }
        .green-btn {
            height: 42px;
        }
        .homehub-section {
            height: 450px;
        }
        .inner-customize-bg .custm-big-head {
            font-size: 26px;
        }
        .feature-box img {
            width: 40px;
        }
        .feature-button .button {
            font-size: 12px;
        }
        .filter-container {
            padding: 30px 20px;
        }
        .port-filter-btns {
            margin-top: 25px;
            margin-bottom: 25px;
        }
    }
    
    @media (max-width: 420px) {
        .chat-btn svg {
            display: block;
        }
        .chat-btn span {
            display: none;
        }
        .app-btn.chat-btn {
            padding: 7px 8px;
        }
        .product-banner .title p {
            width: 100%;
        }
        .product-banner .title h1 {
            font-size: 25px;
            line-height: 25px;
        }
        .product-section .page-head {
            font-size: 25px;
        }
        .custom-banner .banner-content {
            padding-top: 100px;
        }
        .technology-a-banner .right-content .image-abslt.animate {
            width: 85%;
        }
        .technology-a-banner .banner-container-box .right-content {
            height: 500px;
        }
        .product-on-banner .product-img {
            width: 300px;
        }
        .technology-b-banner .product-banner {
            height: 710px;
        }
        .product-on-banner {
            top: -5%;
        }
        .listing-pg .custom-banner .banner-content {
            padding-top: 0px;
        }
        .homehub-section .title-btn {
            font-size: 13px;
        }
        .homehub-content {
            top: 30px;
        }
    }
    /********************Responsive*********************/
    /********************Style-Changes-End*********************/
    /* vysakh-who-we-are-section------------------------------------------------------------------------------------------------------------- */
    /* temp */
    
    .gl-py-80 {
        padding: 80px 0;
    }
    
    .gl-pb-120 {
        padding-bottom: 120px;
    }
    /*  */
    
    .bg-clr-who-we-are {
        background-color: #242424;
    }
    
    .banner-who-we-are {
        width: 100%;
        position: relative;
        display: flex;
        background-image: url(../images/who-we-are/banner-who-we-are.avif);
        height: 658px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0px 0px 50px 50px;
    }
    
    .who-we-are-heading-main {
        font-family: "Inter", sans-serif;
        font-size: 56px;
        line-height: 65px;
        font-weight: 700;
        color: #ffffff;
        width: 70%;
        margin: auto;
        text-align: center;
    }
    
    .inner-div-gap {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        color: #ffffff;
        font-family: "Inter", sans-serif;
        font-size: 18px;
        font-weight: 500;
        border-radius: 50px;
        background-color: #1d1d1d;
        padding: 10px 0px;
    }
    
    .who-are-main {
        background-image: url(../images/who-we-are/who-we-are-sec.avif);
        position: relative;
        display: flex;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 30px 30px 30px 30px;
        height: 600px;
    }
    
    .who-we-main-head {
        font-family: "Inter", sans-serif;
        font-size: 46px;
        line-height: 46px;
        letter-spacing: 1px;
        color: #ffffff;
        font-weight: 700;
        padding-bottom: 15px;
    }
    
    .who-we-main-content {
        width: 70%;
        display: flex;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #ffffff;
        font-weight: 400;
    }
    /* what-we-do-section--------------------------------------------------------- */
    
    .wht-we-do-sec {
        background-color: #242424;
    }
    
    .border-rad {
        border-radius: 20px;
        overflow: hidden;
    }
    
    .marquee {
        display: flex;
        width: max-content;
        animation: scroll-left 20s linear infinite;
    }
    
    .wht-we-do-running {
        font-size: 76px;
        font-weight: 700;
        color: #242424;
        -webkit-text-stroke: 1px #454545;
        paint-order: stroke fill;
        padding-right: 100px;
        white-space: nowrap;
    }
    /* Animation */
    
    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    
    .head-wht-we-do {
        font-family: "Inter", sans-serif;
        font-size: 46px;
        line-height: 46px;
        font-weight: 500;
        color: #ffffff;
        padding-bottom: 20px;
    }
    
    .wht-we-do-para-one {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
        color: #ffffff;
    }
    
    .text-area-we-do {
        padding-left: 60px;
        padding-right: 60px;
    }
    
    .what-we-sec-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* profile-section---------------------------------------------------------------------- */
    
    .profile-section {
        background-color: #242424;
    }
    
    .cmn-container-vk {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .profile-head-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #242424;
        justify-content: space-between;
        gap: 30px;
    }
    
    .profile-head-new {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 46px;
        font-weight: 500;
        color: #ffffff;
        z-index: 20;
        display: flex;
        align-items: center;
    }
    
    .best-stroke-profile {
        font-size: 90px;
        line-height: 1em;
        font-weight: 700;
        -webkit-text-stroke: 2px #434343;
        paint-order: stroke fill;
        position: absolute;
        top: -15px;
        left: 65px;
    }
    
    .profile-para {
        width: 100%;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
    }
    
    .profile-block {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-bottom: 80px;
        padding-top: 40px;
    }
    
    .col5_col4lg_col3-profile-block {
        grid-auto-flow: row;
        gap: 0px 35px;
        grid-template-columns: repeat(3, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1366px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 40px 20px;
        }
        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
            .spanItem {
                grid-column: span 2;
            }
            gap: 40px 20px;
        }
        @media (max-width: 1150px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 20px;
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    
    .profile-main-head {
        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 20px;
        font-weight: 500;
        color: #ffffff;
        padding-top: 25px;
        padding-bottom: 10px;
    }
    
    .profile-main-para {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 25px;
        font-weight: 300;
        color: #BCBCBC;
        width: 95%;
    }
    
    .brd-pro {
        border-radius: 30px;
    }
    
    .smart-home-mission {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-bottom: 20px;
    }
    
    .col5_col4lg_col3-smart-home-mission {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .bg-misn {
        background-color: #303030;
    }
    
    .misn-head-vk {
        font-family: "Inter", sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #ffffff;
    }
    
    .pad-misn {
        padding: 42px 32px;
    }
    
    .misn-content-vk {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
        color: #ffffff;
    }
    
    .brd-misn {
        border-radius: 30px;
    }
    
    .video-container-two {
        position: relative;
        width: 80%;
        height: 100vh;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 150px 150px 0px 0px;
        transition: width .9s ease, border-radius .9s ease;
    }
    
    .video-container-two.expand {
        width: 100%;
        border-radius: 0;
        border-radius: 150px 150px 0px 0px;
    }
    
    .video-container-two video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
    /* we-work-with-section----------------------------------------------------------------------------- */
    
    .work-with-head {
        font-size: 36px;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: -1px;
    }
    
    .work-with-sub-head {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
    }
    
    .smart-home-wrk-with {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-bottom: 20px;
    }
    
    .col5_col4lg_col3-wrk-with {
        grid-auto-flow: row;
        gap: 20px;
        grid-template-columns: repeat(5, 1fr);
    }
    
    .img-auto-sectiion {
        margin: auto;
    }
    
    .bg-wrk-white {
        background-color: #ffffff;
    }
    
    .gl-brd-10 {
        border-radius: 10px;
    }
    /* control-section---------------------------------------------- */
    
    .control-section {
        background-image: url(../images/who-we-are/control-banner.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 587px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .contrl-head-one {
        font-family: "Inter", sans-serif;
        font-size: 56px;
        line-height: 56px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        justify-content: center;
    }
    
    .pad-top-220 {
        padding-top: 220px;
    }
    
    .bg-btn {
        width: fit-content;
        font-size: 14px;
        line-height: 15px;
        font-weight: 400;
        color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 50px;
        padding: 12px 24px;
        cursor: pointer;
        background: transparent;
        transition: all 0.3s ease;
        text-decoration: none !important;
    }
    
    .bg-btn:hover {
        transform: translateY(-3px);
        background: linear-gradient(188deg, rgba(50, 150, 95, 1) 0%, rgba(25, 95, 55, 1) 63%);
        box-shadow: 0 6px 15px rgba(40, 125, 75, 0.4);
        border-color: transparent;
        border: 1px solid #ffffff;
    }
    /* who we are breaks starts*/
    
    @media (min-width: 1200px) {
        .who-we-are-heading-main {
            width: 60%;
        }
    }
    
    @media (min-width: 1300px) {
        .profile-head-new {
            width: 40%;
        }
        .profile-para {
            width: 60%;
            text-align: right;
        }
        .profile-head-area {
            flex-direction: row;
        }
        .best-stroke-profile {
            top: 50%;
            transform: translatey(-50%);
        }
        .col5_col4lg_col3-smart-home-mission {
            grid-template-columns: repeat(3, 1fr);
        }
        .col5_col4lg_col3-smart-home-mission>div:nth-child(4) {
            grid-column: span 3 / span 3;
        }
    }
    
    @media (min-width: 1400px) {
        .who-we-are-heading-main {
            width: 50%;
        }
    }
    
    @media (min-width: 1500px) {
        .text-area-we-do {
            padding-left: 100px;
            padding-right: 90px;
        }
        .cmn-container-vk {
            padding-left: 100px;
            padding-right: 100px;
        }
    }
    
    @media (min-width: 1600px) {
        .who-we-are-heading-main {
            width: 40%;
        }
    }
    
    @media (min-width: 1700px) {
        .who-are-main {
            height: 650px;
        }
    }
    
    @media (min-width: 1900px) {
        .who-are-main {
            height: 790px;
        }
        .wht-we-do-running {
            font-size: 86px;
        }
        .best-stroke-profile {
            font-size: 120px;
            left: 30px;
        }
    }
    
    @media (max-width: 1023px) {
        .banner-who-we-are {
            height: 500px;
        }
        .who-we-are-heading-main {
            width: 90%;
            font-size: 50px;
        }
        .who-are-main {
            height: auto;
            min-height: 550px;
        }
        .who-we-main-content {
            width: 100%;
        }
        .text-area-we-do {
            padding: 0 30px 30px;
        }
        .col5_col4lg_col3-smart-home-mission {
            grid-template-columns: 1fr;
        }
        .col5_col4lg_col3-wrk-with {
            grid-template-columns: repeat(3, 1fr)
        }
        .video-container-two.expand {
            width: 100%;
            border-radius: 0;
            border-radius: 80px 80px 0px 0px;
        }
        .custamise-col {
            display: flex;
            flex-direction: column;
            width: 60%;
            padding-top: 130px;
            padding-left: 40px;
        }
    }
    
    @media (max-width: 890px) {
        .custamise-col {
            width: 90%;
        }
    }
    
    @media (max-width: 767px) {
        .who-we-are-heading-main {
            font-size: 40px;
            font-weight: 600;
            line-height: 55px;
        }
        .control-section {
            height: auto;
            min-height: 400px;
        }
        .contrl-head-one {
            font-size: 46px;
        }
    }
    
    @media (max-width: 575px) {
        .cmn-container-vk {
            padding-left: 15px;
            padding-right: 15px;
        }
        .col5_col4lg_col3-wrk-with {
            grid-template-columns: repeat(2, 1fr)
        }
        .control-section {
            padding: 0 15px;
        }
        .contrl-head-one {
            font-size: 34px;
            line-height: 40px;
        }
        .inner-div-gap {
            font-size: 16px;
        }
        .who-we-main-head {
            font-size: 36px;
            font-weight: 600;
        }
        .head-wht-we-do {
            font-size: 36px;
        }
        .profile-head-new {
            font-size: 38px;
        }
        .best-stroke-profile {
            font-size: 55px;
            top: -10px;
        }
        .profile-block {
            padding-bottom: 40px;
        }
        .pad-misn {
            padding: 32px 22px;
        }
        .misn-content-vk {
            text-align: left;
        }
        .custm-big-content {
            width: 100%;
        }
        .custamise-col {
            display: flex;
            padding-top: 70px;
            padding-left: 20px;
        }
        .video-container-two.expand {
            border-radius: 40px 40px 0px 0px;
        }
    }
    /* who we are breaks ends*/
    /* --gl-fj css start*/
    /* common */
    
    .section-container {
        max-width: 90%;
        margin: auto;
    }
    /* smart-products-detail */
    
    .smart-product-detail-section--gl-fj {
        background-color: #1E1E1E;
        color: #fff;
        padding: 100px 0;
    }
    
    .smart-product-grid--gl-fj {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
    }
    
    .smart-product-features--gl-fj {}
    
    .product-sub-title-section--gl-fj {
        padding: 0 0 55px;
    }
    
    .product-sub-head--gl-fj {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.5em;
        z-index: 2;
    }
    
    .product-sub-head--gl-fj .stroke-text--gl-fj {
        color: #1E1E1E;
        -webkit-text-stroke: 2px rgb(189 189 189 / 40%);
        paint-order: stroke fill;
        font-size: 80px;
        font-weight: 600;
        line-height: 1em;
        display: inline-block;
        margin: 0;
        padding: 0;
        font-style: normal;
        position: absolute;
        left: 25%;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
    }
    
    .product-variants--gl-fj {}
    
    .variant--gl-fj {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .variant--gl-fj.active {
        opacity: 1;
        visibility: visible;
        position: relative;
    }
    
    .variant-img--gl-fj {
        width: fit-content;
    }
    
    .variant-img--gl-fj>img {
        object-fit: cover;
        border-radius: 20px;
    }
    
    .variant-head--gl-fj {
        display: block;
        margin: 32px 0 11px;
        font-size: 26px;
        font-weight: 500;
        line-height: 1.4em;
    }
    
    .echo-dot-gradient {
        background: linear-gradient(to bottom, #2285E3, #2EE2E4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block;
        font-style: normal;
    }
    
    .comn-detail-txt--gl-fj {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5em;
        color: #BCBCBC;
    }
    
    .comn-detail-txt--gl-fj>b {
        font-weight: 600;
        color: #fff;
    }
    
    .variant-options--gl-fj {
        display: flex;
        gap: 30px;
        width: fit-content;
        margin-top: 32px;
    }
    
    .variant-btn-cover--gl-fj {
        width: 55px;
        height: 55px;
        background-color: rgb(255 255 255 / 20%);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        transition: all 0.4s ease;
    }
    
    .variant-btn-cover--gl-fj:hover {
        animation: out--gl-fj 1s infinite ease-out;
    }
    
    .variant-btn--gl-fj {
        -webkit-appearance: none;
        border: none;
        width: 39px;
        height: 39px;
        border-radius: 50%;
        position: relative;
        z-index: 1;
    }
    
    .variant-btn--gl-fj.black {
        background-color: #000;
    }
    
    .variant-btn--gl-fj.white {
        background-color: white;
    }
    
    .variant-btn-cover--gl-fj.active {
        border: 1px solid #fff;
        animation: none;
    }
    
    @keyframes out--gl-fj {
        0% {
            box-shadow: 0 0 rgb(255 255 255 / 20%);
        }
        100% {
            box-shadow: 0 0 0 15px rgba(0, 198, 180, 0);
        }
    }
    
    .feature-glare-box--gl-fj {
        padding: 20px 25px;
        border: 1px solid rgb(255 255 255 / 7%);
        border-radius: 12px;
        background-color: #303030;
        margin: 40px 0 65px;
    }
    
    .feature-head--gl-fj {
        display: block;
        margin: 0 0 10px;
        padding: 0;
        color: #fff;
        font-weight: 600;
        font-size: 26px;
        line-height: 1.5em;
    }
    
    .feature-sub-head--gl-fj {
        display: block;
        margin: 0 0 10px;
        padding: 0;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5em;
    }
    
    .feature-description-box--gl-fj {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .smart-product-advance--gl-fj {
        padding-top: 100px;
        position: relative;
    }
    
    .smart-prdt-vid-sec--gl-fj {
        margin-bottom: 150px;
    }
    
    .smart-prdt-vid-sec--gl-fj>img {
        border-radius: 20px;
    }
    
    .advance-feature-grid--gl-fj {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 30px;
    }
    
    .advance-feature-box--gl-fj b {
        display: block;
        margin: 0;
        padding: 0;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2em;
    }
    
    .advance-feature-box--gl-fj {
        position: relative;
        border: 1px solid rgb(255 255 255 / 8%);
        border-radius: 12px;
        background-color: #303030;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        max-width: 276px;
        height: 127px;
        width: auto;
        gap: 10px;
        padding: 5px;
        overflow: hidden;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
    }
    
    .advance-feature-box--gl-fj::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 9%), transparent);
    }
    
    .advance-feature-box--gl-fj:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.25);
    }
    
    .advance-feature-box--gl-fj:hover::after {
        animation: shine-glare 0.6s linear forwards;
    }
    
    @keyframes shine-glare {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
    
    .smart-product-img--gl-fj {
        position: relative;
        display: flex;
        justify-content: center;
    }
    
    .placing-animation-bg--gl-fj {
        grid-column: 1 / -1;
        padding: 120px 0 0;
    }
    
    .moving-echodot-image--gl-fj {
        margin-top: 30px;
    }
    
    .sticky-product--gl-fj {
        width: 300px;
        margin: 0 auto;
    }
    
    .placing-img-bg--gl-fj>img {
        border-radius: 30px;
    }
    
    .smart-product-img--gl-fj {
        display: none;
    }
    
    .placing-animation-bg--gl-fj {
        display: none;
    }
    
    .product-action-section--gl-fj {
        position: relative;
        background-color: #1E1E1E;
        padding-bottom: 100px;
    }
    
    .product-action-images--gl-fj {
        position: relative;
        height: 100%;
        cursor: pointer;
    }
    
    .product-action-img-wrapper--gl-fj {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: auto;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        max-width: 98vw;
    }
    
    .product-action-img-wrapper--gl-fj.active {
        opacity: 1;
        z-index: 1;
        pointer-events: auto;
    }
    
    .product-action-img-wrapper--gl-fj img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .product-action-title--gl-fj {
        position: relative;
        z-index: 5;
        color: #fff;
        text-align: center;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.3em;
        padding: 100px 0 0;
        margin: 0;
    }
    
    .product-action-title--gl-fj>b {
        display: block;
        font-weight: inherit;
    }
    
    #actnOnEchoBtn {
        cursor: pointer;
    }
    
    .overlay-tooltip--gl-fj {
        position: absolute;
        z-index: 5;
        background-color: #fff;
        color: #000;
        width: fit-content;
        top: 30%;
        left: 72%;
        font-weight: 600;
        font-size: 22px;
        line-height: 1.5em;
        padding: 10px;
        border-radius: 10px;
    }
    
    .overlay-tooltip--gl-fj>em {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    
    .overlay-tooltip--gl-fj>em::before {
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        left: -4px;
        bottom: -7px;
    }
    
    .overlay-tooltip--gl-fj>em::after {
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        left: -12px;
        bottom: -16px;
    }
    
    .overlay-tooltip--gl-fj.with--icon {
        top: 5%;
        left: 0;
        padding-left: 50px;
        display: none;
    }
    
    .overlay-tooltip--gl-fj.with--icon>i {
        font-style: normal;
        color: rgb(0 0 0 / 50%);
    }
    
    .overlay-tooltip--gl-fj.with--icon.handwave::before {
        content: "";
        position: absolute;
        background: url(../images/hand-wave.png)no-repeat center;
        background-size: contain;
        width: 30px;
        height: 30px;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .overlay-tooltip--gl-fj.with--icon.handpoint::before {
        content: "";
        position: absolute;
        background: url(../images/point-hand-anim.png)no-repeat center;
        background-size: contain;
        width: 30px;
        height: 30px;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .related-products-section--gl-fj {
        position: relative;
        background-color: #1E1E1E;
        color: #fff;
        padding-bottom: 150px;
    }
    
    .sect-sub-head--gl-fj {
        display: block;
        margin: 0 0 30px;
        padding: 0;
        font-weight: 700;
        font-size: 36px;
        line-height: 1.5em;
    }
    
    .related-products-grid--gl-fj {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }
    
    .rel-prdt-box--gl-fj {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: #fff;
    }
    
    .rel-prdt-img--gl-fj {
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        min-height: 355px;
        overflow: hidden;
    }
    
    .rel-prdt-img--gl-fj>img {
        transition: transform 0.4s ease;
    }
    
    .rel-prdt-box--gl-fj:hover .rel-prdt-img--gl-fj>img {
        transform: scale(1.2);
    }
    
    .rel-prdt-title--gl-fj {
        display: block;
        margin: 15px 0 5px;
        padding: 0;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.5em;
    }
    
    .rel-prdt-model--gl-fj {
        display: block;
        font-style: normal;
        color: #ADADAD;
        font-weight: 400;
        font-size: 16px;
    }
    
    .features-grdnt-box--gl-fj {
        position: relative;
        width: 263px;
        height: 44px;
        border-radius: 54px;
        padding: 1px;
        overflow: hidden;
        background: conic-gradient( from calc(var(--r2angle) - 80deg) at var(--xangle) 22px, #212d26 0%, #b0b0b0 20%, #212d26 25%);
        animation: rotating2 5s linear infinite, xbeam 5s linear infinite;
    }
    
    .features-grdnt-cont--gl-fj {
        font-size: 20px;
        font-weight: 500;
        line-height: 1em;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: #212d26;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border: 1px solid rgb(19 82 45 / 40%);
    }
    
    @property --r2angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg;
    }
    
    @property --xangle {
        syntax: '<length>';
        inherits: false;
        initial-value: 0px;
    }
    
    @keyframes xbeam {
        0% {
            --xangle: 22px;
        }
        32.8% {
            --xangle: 241px;
        }
        50% {
            --xangle: 241px;
        }
        82.8% {
            --xangle: 22px;
        }
        100% {
            --xangle: 22px;
        }
    }
    
    @keyframes rotating2 {
        0% {
            --r2angle: 0deg;
        }
        32.8% {
            --r2angle: 0deg;
        }
        50% {
            --r2angle: 180deg;
        }
        82.8% {
            --r2angle: 180deg;
        }
        100% {
            --r2angle: 360deg;
        }
    }
    /* detail-page-key */
    
    .switch-action-title--gl-fj {
        color: rgb(255, 255, 255, 0.4);
        position: absolute;
        z-index: 5;
        bottom: 100px;
        left: 100px;
        font-weight: 600;
        font-size: 32px;
        line-height: 1.3em;
        margin: 0;
    }
    
    .switch-action-title--gl-fj>em {
        color: #fff;
        font-style: normal;
    }
    
    .switch-action-title--gl-fj.active {
        color: #fff;
    }
    
    .actn-switch-btn--gl-fj {
        position: absolute;
        z-index: 5;
        right: 100px;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        color: rgb(255 255 255 / 50%);
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    
    .actn-switch-btn--gl-fj.off::before {
        animation: out--gl-fj 1s infinite ease-out;
        content: "";
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        left: 50px;
        top: 43px;
    }
    /* smart-product-banners */
    
    .dark-bg-body-gl-fj {
        background-color: #1E1E1E;
        color: #fff;
    }
    
    .smart-banner-section--gl-fj {
        position: relative;
        z-index: 1;
        background-color: #1E1E1E;
    }
    
    .grad-overlay-banner {
        position: relative;
    }
    
    .grad-overlay-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 25%);
        z-index: 0;
        border-radius: 0 0 50px 50px;
    }
    
    .banner-static-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        border-radius: 0 0 50px 50px;
    }
    
    .smart-hero-banner-vid--gl-fj {
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0 0 50px 50px;
    }
    
    .banner-content--gl-fj {
        display: flex;
        height: calc(100vh + 50px);
        align-items: end;
        position: relative;
        z-index: 1;
    }
    
    .banner-title-section--gl-fj {
        margin-bottom: 100px;
    }
    
    .banner-title-section--gl-fj>b {
        display: block;
        margin: 0;
        padding: 0;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.2em;
        color: #000;
    }
    
    .smart-banner-title--gl-fj {
        display: block;
        margin: 5px 0 15px;
        padding: 0;
        font-weight: 700;
        font-size: 56px;
        line-height: 1.3em;
        color: #000;
    }
    
    .enquiry-btn-lnk--gl-fj {
        display: block;
        width: fit-content;
        color: #000;
        font-size: 16px;
        line-height: 1em;
        position: relative;
        text-decoration: underline;
    }
    
    .enquiry-btn-lnk--gl-fj::after {
        content: "\f061";
        position: absolute;
        top: 2px;
        right: -25px;
        transition: all 0.4s ease;
        font-family: "FontAwesome";
        color: inherit;
        font-size: 12px;
    }
    
    .enquiry-btn-lnk--gl-fj:hover:after {
        right: -30px;
    }
    /* detail-page-smart-product-banners */
    
    .smart-product-banner-section--gl-fj {
        position: relative;
        background-color: #1E1E1E;
        overflow: hidden;
    }
    
    .prdouct-hero-bg-img-wrp {
        z-index: 0;
        position: absolute;
        inset: 0;
    }
    
    .product-hero-bg-image {
        border-radius: 0 0 50px 50px;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    .product-hero-content {
        position: relative;
        z-index: 1;
        height: calc(100vh + 50px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .product-top-head {
        text-align: center;
    }
    
    .product-top-head>h2 {
        margin: 0;
        color: #fff;
        font-weight: 700;
        font-size: 52px;
        line-height: 1.3em;
    }
    
    .product-top-head>h2>b {
        display: block;
        color: rgb(255 255 255 / 50%);
        font-weight: inherit;
    }
    
    .product-hero-switch-wrp {
        position: absolute;
        bottom: -50%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    
    .product-hero-image-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .product-hero-image-wrapper img {
        max-width: 250px;
    }
    
    .product-hero-image-wrp-mid {
        position: relative;
        z-index: 2;
    }
    
    .product-hero-image-wrp-left,
    .product-hero-image-wrp-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
    
    .product-hero-image-wrp-left {
        left: 0;
    }
    
    .product-hero-image-wrp-right {
        right: 0;
    }
    
    .product-main-head {
        margin-top: 75px;
    }
    /* projects-detail-page */
    
    .banner-section-projects-detail--gl-fj {
        position: relative;
    }
    
    .banner-section-projects-detail--gl-fj::before {
        content: "";
        position: absolute;
        background: #000;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 80%) 100%);
        z-index: 1;
        border-radius: 0 0 50px 50px;
        top: 25%;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .banner-img-projects-detail--gl-fj {
        position: absolute;
        z-index: 0;
        inset: 0;
    }
    
    .banner-img-projects-detail--gl-fj>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 50px 50px;
    }
    
    .projects-detail-banner-content--gl-fj {
        position: relative;
        z-index: 1;
        display: flex;
        height: 650px;
        justify-content: center;
        align-items: end;
        padding-bottom: 50px;
        text-align: center;
    }
    
    .project-location--gl-fj {
        display: flex;
        gap: 10px;
        width: fit-content;
        justify-self: center;
        justify-content: center;
        align-items: center;
        background: rgb(255 255 255 / 10%);
        border: 1px solid rgb(255 255 255 / 8%);
        padding: 5px 20px;
        border-radius: 70px;
        font-size: 16px;
        line-height: 1.2em;
    }
    
    .project-location--gl-fj>i {
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
    }
    
    .project-desc-head--gl-fj {
        flex: 1;
    }
    
    .project-desc-cont--gl-fj {
        flex: 1;
    }
    
    .project-description-section--gl-fj {
        padding: 60px 0 200px;
    }
    
    .portfolio-gallery--gl-fj {
        gap: 30px;
        justify-self: center;
    }
    
    .pf-gallery--gl-fj {
        gap: 30px;
    }
    /* --gl-fj--breaks */
    
    @media (min-width: 1200px) {
        .smart-product-grid--gl-fj {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
        }
        .smart-product-img--gl-fj {
            display: flex;
        }
        .placing-animation-bg--gl-fj {
            display: block;
        }
        .overlay-tooltip--gl-fj.with--icon {
            display: block;
        }
        .smart-product-advance--gl-fj {
            padding-top: 300px;
        }
        .moving-echodot-image--gl-fj {
            margin-top: 50px;
        }
    }
    
    @media (min-width: 1300px) {
        .moving-echodot-image--gl-fj {
            margin-top: 70px;
        }
    }
    
    @media (min-width: 1400px) {
        .moving-echodot-image--gl-fj {
            margin-top: 100px;
        }
    }
    
    @media (min-width: 1500px) {
        .product-sub-head--gl-fj {
            font-size: 40px;
        }
        .product-sub-head--gl-fj .stroke-text--gl-fj {
            font-size: 100px;
        }
        .moving-echodot-image--gl-fj {
            margin-top: 120px;
        }
        .product-top-head>h2 {
            font-size: 62px;
        }
    }
    
    @media (min-width: 1600px) {
        .moving-echodot-image--gl-fj {
            margin-top: 145px;
        }
    }
    
    @media (min-width: 1700px) {
        .sticky-product--gl-fj {
            width: auto;
        }
        .moving-echodot-image--gl-fj {
            margin-top: 80px;
        }
        .product-hero-switch-wrp {
            bottom: -40%;
        }
    }
    
    @media (min-width: 1800px) {
        .moving-echodot-image--gl-fj {
            margin-top: 100px;
        }
    }
    
    @media (min-width: 1900px) {
        .product-sub-title-section--gl-fj {
            padding: 0 0 65px;
        }
        .product-sub-head--gl-fj {
            font-size: 46px;
        }
        .product-sub-head--gl-fj .stroke-text--gl-fj {
            font-size: 120px;
        }
        .moving-echodot-image--gl-fj {
            margin-top: 120px;
        }
        .product-hero-switch-wrp {
            bottom: -30%;
        }
    }
    
    @media (max-width: 1199px) {
        .product-action-section--gl-fj {
            padding-bottom: 75px;
        }
        .product-action-img-wrapper--gl-fj {
            width: 100%;
            max-width: 100%;
        }
        .product-action-title--gl-fj {
            font-size: 28px;
            padding: 50px 0 0;
        }
    }
    
    @media (max-width: 1023px) {
        .smart-product-detail-section--gl-fj {
            padding: 80px 0 30px;
        }
        .smart-product-grid--gl-fj {
            grid-template-columns: 1fr;
            gap: 50px;
        }
        .product-sub-head--gl-fj .stroke-text--gl-fj {
            left: 12%;
        }
        .feature-glare-box--gl-fj {
            margin: 40px 0;
        }
        .smart-product-advance--gl-fj {
            padding-top: 0;
        }
        .smart-prdt-vid-sec--gl-fj {
            margin-bottom: 50px;
        }
        .product-action-title--gl-fj {
            font-size: 20px;
            padding: 30px 0 0;
            font-weight: 600;
        }
        .overlay-tooltip--gl-fj {
            top: 25%;
            left: 75%;
            font-size: 16px;
        }
        .overlay-tooltip--gl-fj>em::before {
            width: 10px;
            height: 10px;
            left: -2px;
            bottom: -5px;
        }
        .overlay-tooltip--gl-fj>em::after {
            width: 6px;
            height: 6px;
            left: -10px;
            bottom: -13px;
        }
        .product-action-section--gl-fj {
            padding-bottom: 60px;
        }
        .related-products-grid--gl-fj {
            grid-template-columns: 1fr 1fr;
        }
        .rel-prdt-img--gl-fj {
            min-height: auto;
        }
        .switch-action-title--gl-fj {
            bottom: 30px;
            left: 30px;
            font-weight: 400;
            font-size: 26px;
        }
        .actn-switch-btn--gl-fj {
            right: 30px;
            bottom: 10px;
            transform: scale(0.7);
        }
        .banner-content--gl-fj {
            height: 70vh;
        }
        .banner-title-section--gl-fj {
            margin-bottom: 35px;
            /* margin-top: 120px; */
        }
        .product-hero-image-wrapper img {
            max-width: 220px;
        }
        .product-top-head>h2 {
            font-size: 42px;
        }
        .projects-detail-banner-content--gl-fj {
            height: 500px;
            padding-bottom: 30px;
        }
        .project-description-section--gl-fj {
            padding: 60px 0 100px;
        }
    }
    
    @media (max-width: 767px) {
        .product-action-img-wrapper--gl-fj {
            height: 500px;
        }
        .overlay-tooltip--gl-fj {
            left: 70%;
        }
        .related-products-grid--gl-fj {
            grid-template-columns: 1fr;
        }
        .banner-title-section--gl-fj>b {
            font-size: 20px;
        }
        .smart-banner-title--gl-fj {
            font-size: 46px;
        }
        .product-top-head>h2 {
            font-size: 36px;
        }
        .product-hero-switch-wrp {
            bottom: -35%;
            width: 100%;
        }
        .product-main-head {
            margin-top: 35px;
        }
        .project-description-section--gl-fj {
            padding: 40px 0 100px;
        }
        .portfolio-gallery--gl-fj {
            gap: 15px;
        }
        .pf-gallery--gl-fj {
            gap: 15px;
        }
        
    }
    
    @media (max-width: 575px) {
        .smart-product-detail-section--gl-fj {
            padding: 50px 0 30px;
        }
        .product-sub-title-section--gl-fj {
            padding: 0 0 35px;
        }
        .variant-head--gl-fj {
            margin: 20px 0 10px;
            font-size: 22px;
            font-weight: 400;
        }
        .variant-options--gl-fj {
            margin-top: 20px;
        }
        .variant-btn-cover--gl-fj {
            width: 50px;
            height: 50px;
        }
        .variant-btn--gl-fj {
            width: 36px;
            height: 36px;
        }
        .overlay-tooltip--gl-fj {
            left: 40%;
        }
        .feature-head--gl-fj {
            font-size: 22px;
        }
        .advance-feature-box--gl-fj b {
            font-weight: 500;
            font-size: 16px;
        }
        .actn-switch-btn--gl-fj {
            right: 0;
            top: 10px;
            bottom: auto;
        }
        .banner-title-section--gl-fj>b {
            font-size: 16px;
        }
        .smart-banner-title--gl-fj {
            font-size: 36px;
        }
        .features-grdnt-cont--gl-fj {
            font-size: 18px;
        }
        .sect-sub-head--gl-fj {
            font-weight: 600;
            font-size: 30px;
        }
        .product-top-head {
            margin-top: -100px;
        }
        .product-top-head>h2 {
            max-width: 8ch;
            font-size: 3rem;
        }
        .product-top-head>h2>b {
            display: inline;
        }
        .product-hero-switch-wrp {
            bottom: -5%;
        }
        .product-hero-image-wrapper img {
            max-width: 150px;
        }
    }
    
    @media (max-width: 375px) {
        .product-top-head {
            margin-top: -50px;
        }
        .product-top-head>h2 {
            font-size: 2rem;
        }
    }
    /* --gl-fj css end*/
    /* slide-text-new================================================================================== */
    
    .sliding-heads {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-weight: 800;
        color: #ffffff;
        position: absolute;
        z-index: 9999;
        overflow: hidden;
        height: 50px;
        /* control text height */
        align-items: center;
        margin-top: 120px;
    }
    
    .sliding-heads span {
        position: absolute;
        opacity: 0;
        transform: translateY(100%);
        transition: all 0.8s ease-in-out;
    }
    
    .sliding-heads span.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    .sliding-heads span.exit {
        opacity: 0;
        transform: translateY(-100%);
    }
    
    .sliding-heads-res {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-weight: 800;
        color: #ffffff;
        position: relative;
        z-index: 1;
        overflow: hidden;
        height: 50px;
        align-items: center;
        padding-top: 100px;
        padding-bottom: 100px;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .sliding-heads-res.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    .moving-top {
        opacity: 0;
        transform: translateY(50px);
        /* start lower */
        transition: all 0.8s ease-out;
    }
    
    .moving-top.show {
        opacity: 1;
        transform: translateY(0);
        /* move to normal place */
    }
    
    @media (max-width: 1200px) {
        .desk-top-view {
            display: none;
        }
        .mobile-view {
            display: block;
        }
        .mobile-alexa-sections {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: #000000;
        }
        .sliding-heads {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 48px;
            font-weight: 800;
            color: #ffffff;
            position: relative;
            z-index: 9999;
            overflow: hidden;
            height: 50px;
            /* control text height */
            align-items: center;
            margin-top: 120px;
            background-color: #000000;
        }
    }
    
    @media (min-width: 1200px) {
        .desk-top-view {
            display: block;
        }
        .mobile-view {
            display: none;
        }
    }
    
    @media (max-width: 991px) {
        .sliding-heads {
            font-size: 34px;
        }
        .sliding-heads-res {
            font-size: 32px;
            padding-top: 60px;
            padding-bottom: 60px;
        }
    }
    
    @media (max-width: 575px) {
        .sliding-heads {
            font-size: 26px;
        }
        .sliding-heads-res {
            font-size: 24px;
        }
    }
    /* terms-and-condition-------------------------------------------------------------------- */
    
    .terms-condition-area {
        background: #090909;
        background: linear-gradient(180deg, rgb(0 0 0) 0%, rgba(36, 36, 36, 1) 52%);
    }
    
    .terms-content {
        width: 60%;
        display: flex;
        flex-direction: column;
        margin: auto;
    }
    
    .terms-head {
        font-family: "Inter", sans-serif;
        font-size: 62px;
        color: #ffffff;
        font-weight: 500;
    }
    
    .gl-pt-160-title {
        padding-top: 160px;
    }
    
    .terms-common-head {
        font-family: "Inter", sans-serif;
        font-size: 22px;
        color: #ffffff;
        font-weight: 500;
    }
    
    .terms-common-content {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 30px;
        color: #ffffff;
        font-weight: 400;
    }
    
    .brder-terms-btm {
        border-bottom: 1px solid #686868;
    }
    
    .terms-common-content-list {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 30px;
        color: #ffffff;
        font-weight: 400;
    }
    
    @media (max-width: 1600px) {
        .terms-content {
            width: 70%;
        }
        .smart-align-one {
            bottom: 20px;
            left: 25px;
        }
        .smart-align-two {
            top: 20px;
            left: 25px;
        }
        .nav-social .ico-ftr img{
            width:23px;
        }
        
       .smart-align-two {
            top: 45px;
            left: 45px;
        }
         .smart-align-one {
            bottom: 45px;
            left: 45px;
        }

        
    }
    
    @media (max-width: 1400px) {
        .terms-content {
            width: 80%;
        }
    }
    
    @media (max-width: 1200px) {
        .terms-content {
            width: 90%;
        }
        
        .smart-content {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        
    }
    @media (max-width: 992px) {
    .listing-pg .custom-banner .banner-content {
        padding-bottom: 110px;
    }
    }
    
    
    @media (max-width: 767px) {
        .terms-head {
            font-size: 36px;
        }
        .terms-common-head {
            font-family: "Inter", sans-serif;
            font-size: 20px;
            color: #ffffff;
            font-weight: 500;
        }
        .terms-common-content {
            font-size: 16px;
            line-height: 26px;
        }
        .gl-pt-160-title {
            padding-top: 100px;
        }
        .nav-social .ico-ftr img {
            width: 100%;
        }
        .nav-social .ico-ftr  {
            width: 28px;
        }
          .smart-align-two {
            top: 20px;
            left: 25px;
        }
         .smart-align-one {
            bottom:20px;
            left: 25px;
        }
    }
    
    @media (max-width: 575px) {
        .terms-content {
            width: 95%;
        }
        .smart-head {
            padding-bottom: 15px;
        }
    }
    
    .all-btn-section {
        flex-wrap: wrap;
        padding-bottom: 30px;
    }
    
    .head-rounds {
        font-size: 14px;
        color: #9c9c9c;
        font-family: "Inter", sans-serif;
        border: 1px solid #616161;
        border-radius: 50px;
        padding: 7px 10px;
        width: fit-content;
        text-decoration: none;
    }
    
    @media (min-width: 575px) {
        .all-btn-section {
            display: none !important;
        }
    }
    
    @media (max-width: 575px) {
        .all-btn-section {
            display: block;
            gap: 10px;
        }
        .carousel-btn {
            top: 29%;
        }
    }
    
    .contact-form input:-webkit-autofill,
    .contact-form input:-webkit-autofill:hover,
    .contact-form input:-webkit-autofill:focus,
    .contact-form textarea:-webkit-autofill,
    .contact-form select:-webkit-autofill {
        background-color: transparent !important;
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
        color: inherit !important;
        transition: background-color 5000s ease-in-out 0s;
    }
.wrapper .logo{
    width: 170px;
}
.curtain-robort{
    object-position : bottom;
}

.sliding-heads{
height:60px
}
    /* Testimonial card styling */
    /* Pause slider when hovering any card */
    .testimonial-slider-wrapper.left:hover .testimonial-grid,
    .testimonial-slider-wrapper.right:hover .testimonial-grid {
        animation-play-state: paused;
    }

    /* Also pause when hovering the card itself (more accurate) */
    .testimonial-card:hover {
        animation-play-state: paused;
    }
   
.testimonial-slider-wrapper.dragging, 
.testimonial-slider-wrapper.dragging * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-drag: none;
}

/********************************************/
.dropdown-filter{
    display: none;
    width: 100%;
}


.dropdown-filter {
  position: relative;
  width: 100%;
  max-width:100%;
  font-family: sans-serif;
}

/* Dropdown main (replaces <select>) */
.custom-select {
  background: #13522D;
  color: #fff;
  border: 1px solid #ffffff10;
  padding: 8px 20px 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.custom-select:hover {
  background: #0e3d21;
}

/* Dropdown arrow */
.custom-select::after {
  content: "▾";
  margin-left: 8px;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.dropdown.open .custom-select::after {
  transform: rotate(180deg);
}

/* Dropdown list */
.dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background-color: #242424;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 20;
}

/* Show dropdown with animation */
.dropdown.open .dropdown-list {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
}

/* Dropdown list items */
.dropdown-list a {
  display: block;
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease;
}
.list-mob.list label{
    border: 1px solid #ffffff10;
}

.dropdown-list a:hover {
  background-color: #13522D;
}
.mob-prdct-list{
    margin-top: 30px;
    padding-bottom: 0px;
}
.head-rounds.active{
    background-color: #13522D;
    color: #fff;
    border: 1px solid #13522D;
}

.sticky-product--gl-fj{
    max-height: fit-content !important;
    height: fit-content !important;
}


@media (max-width: 1024px) {
    .nav-links .mobile-item {
  
        font-weight: 300;
    }
    .nav-links li {
        margin: 20px 10px;
    }
    .nav-links .drop-menu {
        padding-left: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .nav-links li.has-submenu a {
        padding: 5px 10px;
    }
    .nav-links li.has-submenu a {
        font-size: 16px;
    }
        nav {
            z-index: 99;
        }
}

/* --- MOBILE DROPDOWN BEHAVIOR --- */
@media (max-width: 992px) {
    .filter-section .content .list{
        margin-right: 0px;
        row-gap: 10px;
        column-gap: 6px;
    }
    .filter-section .content .list label {
        
        padding: 7px 20px 7px 10px;
    }
    .filter-section .content .list label::before {
        top: 13px;
        right: 8px;
    }
    .filter-section {
        margin-bottom: 40px;
    }
}
@media (max-width: 575px) {
    .dropdown-filter{
        display: block;
    }
    .filter-section .content .list{
        display: none;
    }
    .nav-links li a {
        
        font-size: 18px;
    }
    .nav-links .mobile-item {
    
        font-size: 18px;
     }
     .list-mob.list{
        display: block;
    }
}