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

		:root {
			--nxon-blue: #0EA5E9;
			--nxon-purple: #0012b1;
			--nxon-dark: #0F172A;
			--nxon-darker: #020617;
			--nxon-gray: #64748B;
			--nxon-light-gray: #94A3B8;
			--bg: #0b0f14;
			--panel: #0f1720;
			 --accent: #0a84ff;
            --text: #ffffff;
            --muted: #b8c1cc;
		}


		 

		/************smoothness**************/
		html.lenis {
			height: auto;
		}

		.lenis.lenis-smooth {
			scroll-behavior: auto !important;
		}

		.lenis.lenis-smooth [data-lenis-prevent] {
			overscroll-behavior: contain;
		}

		.lenis.lenis-stopped {
			overflow: hidden;
		}

		.lenis.lenis-scrolling iframe {
			pointer-events: none;
		}

		/************ ..............**************/
        html {
        scroll-behavior: smooth;
        }


		body {
			font-family: "Inter", sans-serif;
			background-color: #040813;
			color: #fff;
			line-height: 1.6;
			overflow-x: hidden;

		}

		section {
			background: #040813;
		}
/* 
		.container {
			max-width: 1380px;
			margin: 0 auto;
			padding: 0 40px;
		} */

		#main-contant {
			opacity: 1;
			pointer-events: auto;
		}

		/* Loading Screen */
		.loader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--nxon-darker);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
			transition: opacity 0.5s ease, visibility 0.5s ease;
		}

		.loader.hidden {
			opacity: 0;
			visibility: hidden;
		}

		.loader-circle {
			width: 80px;
			height: 80px;
			border: 5px solid rgba(255, 255, 255, 0.1);
			border-top-color: var(--nxon-blue);
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}
        .bottom-blur {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 3%;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
		/* Hero Section with Carousel */
		.hero {
			background: #0d0d0d;
			min-height: 100vh;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
		}

		/* Base ellipse style */
		.ellipse {
			position: absolute;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(67, 98, 241, 0.3) 0%, transparent 70%);
			z-index: 1;
		}

		/* Individual ellipses */
		.ellipse-5 {
			width: 980px;
			height: 980px;
			top: 231px;
			left: 940px;
			transform: translate(-50%, -50%);
			opacity: 50%;
		}

		.ellipse-6 {
			width: 980px;
			height: 980px;
			top: 617px;
			left: 730px;
			transform: translate(-50%, -50%);
			opacity: 50%;
		}

		.ellipse-7 {
			width: 980px;
			height: 980px;
			top: 630px;
			left: 1119px;
			transform: translate(-50%, -50%);
			opacity: 50%;
		}

		.carousel-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

        .carousel-video{
            position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
        }

          @media (max-width: 768px) {

   
    .hero-bg-video {
        display: none;
    }

    
      .carousel-container {
        background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.4)),url("/assets/img/home/hero.webp");
        background-size: cover; 
        background-position: center;
        background-repeat: no-repeat;
        background-color: #000;
    }
}

/* Default */
.desktop-video {
    display: block;
}

.mobile-video {
    display: none;
}

/* MOBILE VIEW */
@media (max-width: 768px) {

    .desktop-video {
        display: none;
    }

    .mobile-video {
        display: block;
    }

    .hero-bg-video {
        object-fit: cover;
        object-position: center;
    }
}


		.carousel-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transform: translateX(100%);
			/* transition: all 0.8s ease; */
			z-index: 0;
			/* transition: opacity 1.5s ease-in-out; */
		}


        

		.carousel-slide.active {
			opacity: 1;
			transform: translateX(0);
			z-index: 2;
		}

		.carousel-slide.exit-left {
			transform: translateX(-100%);
			opacity: 0;
			z-index: 1;
		}

		.carousel-slide video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}
        .carousel-slide:nth-child(3) .carousel-video {
			opacity: 0.5;
		}

		.carousel-slide:nth-child(1) .carousel-video {
			opacity: 0.5;
		}

		.carousel-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(2, 6, 23, 0.1);
			z-index: -1;
		}

		.hero-content {
			/* position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            transform: translate3d(0,-50%,0) */
			position: absolute;
			top: 40%;
			left: 140px;
			transform: translateY(-50%);
			/* vertical center */
			max-width: 820px;
			text-align: left;
			z-index: 2;
			/* padding-left: 60px; */
			/* left side gap */
		}

		
		.hero-title {
			font-size: 4rem;
			font-weight: 500;
			line-height: 1.2;
			margin-bottom: 20px;
			background: linear-gradient(90deg, #fff, #CBD5E1);
			-webkit-background-clip: text;
			background-clip: text;
			/* color: transparent; */
			animation: textGlow 2s infinite alternate;
			transition: all 0.5s ease;
		}

		
		.hero-title .highlight {
			color: rgba(30, 144, 255, 1);
			/* -webkit-background-clip: unset;
            background-clip: unset; */
			/* padding: 2px 8px; */
			border-radius: 6px;
			display: inline-block;
			width: auto;
			/* stop the full-width stretch */
		}

		.hero-title span {
			/* width: 900px; */
			background: #fff;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			position: relative;
			display: inline-block;
		}

		.hero-subtitle {
			/* font-family: "DM Sans", sans-serif; */
			font-size: 1.1rem;
			color: #CBD5E1;
			margin-bottom: 30px;
			max-width: 560px;
			/* margin-left: auto;
            margin-right: auto; */
			transition: all 0.5s ease;
		}

		.hero-buttons {
			/* font-family: "DM Sans", sans-serif; */
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
			position: fixed;
			/* scroll karva par pan fix rahe */
			bottom: -50px;
			/* screen na bottom thi 40px */
			/* left: 60px; */
			/* screen na left side thi 60px */
			z-index: 100;
		}

		.btn {
			display: inline-block;
			padding: 12px 24px;
			border-radius: 60px;
			font-weight: 500;
			text-decoration: none;
			transition: all 0.3s ease;
			cursor: pointer;
			border: none;
			font-size: 14px;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.1);
			transform: translateX(-100%);
			transition: transform 0.6s ease;
			z-index: -1;
		}

		.btn:hover::before {
			transform: translateX(0);
		}

		.btn-primary {
			background: linear-gradient(135deg, var(--nxon-blue), var(--nxon-purple));
			color: white;
			box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
		}

		.btn-primary:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
		}

		.btn-outline {
			text-decoration: none;
			display: inline-block;
			/* margin-top: 20px; */
			padding: 12px 24px;
			overflow: hidden;
			background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
			color: #ffffff;
			font-size: 16px;
			font-weight: 500;
			border-radius: 40px;
			border: none;
			box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
			border-image-slice: 1;
			border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			cursor: pointer;
			transition: 0.3s ease;
		}

		.btn-outline:hover {
			background: rgba(14, 165, 233, 0.1);
			transform: translateY(-3px);
			border-color: var(--nxon-purple);
		}

		
		/* Responsive Breakpoints */
		@media (max-width: 1200px) {
			.hero-title {
				font-size: 3.5rem;
			}

			.hero-title span {
				font-size: 3.5rem;
			}

			.hero-subtitle {
				font-size: 1.3rem;
			}

			.hero-content {
				left: 80px;
				max-width: 600px;
			}
		}

		@media (max-width: 992px) {
			.hero-title {
				font-size: 3rem;
			}

			.hero-title span {
				font-size: 3rem;
			}

			.hero-subtitle {
				font-size: 1.2rem;
			}

			.hero-content {
				left: 60px;
				max-width: 500px;
			}

			.ellipse-5,
			.ellipse-6,
			.ellipse-7 {
				width: 700px;
				height: 700px;
			}
		}

		@media (max-width: 768px) {
			.hero-title {
				font-size: 2.2rem;
				text-align: center;
			}

			.hero-title span {
				font-size: 2.2rem;
				text-align: center;
			}

			.hero-subtitle {
				font-size: 1rem;
				text-align: center;
			}

			.hero-content {
                top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				max-width: 90%;
				text-align: center;
			}

			.hero-buttons {
				position: static;
				justify-content: center;
				margin-top: 20px;
			}

			.carousel-dots {
				display: none !important;
				/* overflow: hidden; */
			}
		}

		/* Desktop */
		@media (min-width: 769px) {
			.carousel-dots {
				display: none;
				overflow: hidden;
			}
		}

		@media (max-width: 576px) {
			.hero-title {
				font-size: 1.8rem;
			}

			.hero-title span {
				font-size: 1.8rem;
			}

			.hero-subtitle {
				font-size: 0.9rem;
			}

			.btn {
				font-size: 14px;
				padding: 10px 18px;
			}

			.ellipse-5,
			.ellipse-6,
			.ellipse-7 {
				width: 500px;
				height: 500px;
			}
		}
            #solutions {
        scroll-margin-top: 90px; /* navbar height jitlu */
         }

		/* Carousel Navigation */
		.carousel-nav {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 15px;
			z-index: 3;
		}

     .hero-bottom-topic {
       position: absolute;
    bottom: 78px;
    left: -5px;
    display: flex;
    align-items: center;
    gap: 21px;
    z-index: 5;
    color: #fff;
    font-size: 2.8rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* LINE */
.topic-line {
    width: 100px;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 1;
}

/* TEXT */
#hero-topic-text {
    opacity: 0;
    transform: translateX(-8px);
    white-space: nowrap;
}

/* Line draw animation */
.hero-bottom-topic.animate .topic-line {
    animation: drawLine 0.8s ease forwards;
}

/* Text appear animation */
.hero-bottom-topic.animate #hero-topic-text {
    animation: showText 0.4s ease forwards;
    animation-delay: 0.6s;
}

@keyframes drawLine {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes showText {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px){
  .hero-bottom-topic{
    display: none;
    bottom: 40px;
    left: 24px;
    font-size: 1.9rem;
    gap: 14px;
  }

  .topic-line{
    width: 60px;
  }
}
@media (max-width: 640px){
  .hero-bottom-topic{
        bottom: 89px;
        left: auto;
        justify-content: center;
        font-size: 1.3rem;
        gap: 10px;
  }

  .topic-line{
    width: 40px;
  }

  #hero-topic-text{
    /* white-space: normal; */
    text-align: center;
  }
}




		/* .carousel-dots {
			display: flex;
			/* display: flex; 
			flex-direction: column;
			gap: 15px;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 50;
		}

		.dot {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.dot.active {
			width: 24px;
			height: 24px;
			background: white;
		}

		.dot .time {
			font-size: 10px;
			color: black;
			position: absolute;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.dot.active .time {
			opacity: 1;
		}

		.progress {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: conic-gradient(white 0deg, rgba(255, 255, 255, 0.3) 0deg);
			transform: rotate(-90deg);
		}

		.dot.active .progress {
			animation: progressAnim linear forwards;
		} */

		
		/* 🌑 WHO WE ARE SECTION */
		.who-we-are {
			position: relative;
			width: 100%;
			padding: 120px 80px 0px 80px;
			background-color: #000;
			overflow: hidden;
		}

		/* Background Images */
		.who-we-are::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 77%;
			height: 77%;
			background: url("../img/home/background.jpg") no-repeat center center/cover;
			opacity: 0.5;
			z-index: 1;
		}

		.who-we-are::after {
			content: "";
			position: absolute;
			bottom: 50px;
			left: 0;
			width: 100%;
			height: 250px;
			background: url("../img/home/image-2.jpg") no-repeat center bottom/cover;
			opacity: 0.25;
			z-index: 1;
		}

		/* Content Container */
		.content-container {
			position: relative;
			z-index: 2;
			/* max-width: 1400px; */
			margin: 0 auto;
		}


       





		/* ABOUT SECTION */
		.about-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 40px;
			flex-wrap: wrap;
		}

		.about-text {
			flex: 1 1 550px;
			background: linear-gradient(180deg, #090025 0%, #2C2B2F 100%);
			padding: 50px;
			border-radius: 20px;
			border: 1px solid rgba(51, 102, 255, 0.3);
			box-shadow: 0 10px 40px rgba(51, 102, 255, 0.2);
			animation: glowPulse 1.5s infinite alternate;
			position: relative;
		}

		@keyframes glowPulse {
			0% {
				box-shadow: 0 0 15px #1e3a8a, 0 0 25px #1e3a8a;
			}

			100% {
				box-shadow: 0 0 25px #2563eb, 0 0 40px #3b82f6;
			}
		}

		.about-text::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: 20px;
			padding: 2px;
			background: linear-gradient(135deg, #3366ff, transparent);
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			opacity: 0.5;
		}

		.about-label {
			/* font-family: "DM Sans", sans-serif; */
			font-size: 0.9rem;
			color: #b8b9c0;
			text-transform: uppercase;
			letter-spacing: 2px;
			margin-bottom: 1rem;
		}

		.about-text h2 {
			font-size: 2.5rem;
			font-weight: 500;
			color: #3366ff;
			margin-bottom: 1rem;
		}

		.about-text p {
			/* font-family: "DM Sans", sans-serif; */
			font-size: 1.1rem;
			line-height: 1.8;
			color: #b8b9c0;
		}

		.about-image {
			flex: 1 1 450px;
			text-align: center;
		}

		.about-image img {
			width: 85%;
			max-width: 500px;
			height: auto;
			filter: drop-shadow(0 15px 50px rgba(51, 102, 255, 0.5));
			animation: floatEffect 3s ease-in-out infinite alternate;
		}

		@keyframes floatEffect {
			0% {
				transform: translateY(0);
			}

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

		/* 🌟 CARDS SECTION */
		.cards-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 32px;
			margin: 120px auto 0;
			padding: 0 24px;
			max-width: 1280px;
		}

		.card {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			max-width: 380px;
			/* ✅ prevents card from stretching too wide  */
			flex: 1 1 calc(33.333% - 40px);
			background: linear-gradient(180deg, #24272D 0%, #000000 100%);
			border-radius: 25px;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			overflow: hidden;
			/* transition: transform 0.3s ease, box-shadow 0.3s ease; */
			text-align: center;
			min-height: 650px;
			margin: 0 auto;
		}

		.card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 5px;
			width: 100%;
			background: linear-gradient(90deg, #3366ff, #9333ea);
			transform: translateX(-100%);
			transition: transform 0.5s ease;
		}

		.card:hover::before {
			transform: translateX(0);
		}

		.card:hover {
			transform: translateY(-10px);
			box-shadow: 0 20px 40px rgba(51, 102, 255, 0.25);
		}

		.card-icon {
			height: 290px;
			overflow: hidden;
		}

		.card-icon img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 15px 15px 0 0;
			transition: transform 0.3s ease;
		}

		.card-icon img:hover {
			transform: scale(1.1);
		}

		.card-content {
			flex-grow: 1;
			padding: 32px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		.card-title {
			font-size: clamp(1.4rem, 2vw, 1.8rem);
			color: #fff;
			font-weight: 700;
			margin-bottom: 20px;
		}

		.card-description {
			font-size: clamp(0.95rem, 1.5vw, 1.1rem);
			color: #b8b9c0;
			line-height: 1.6;
		}

		/* 🌍 RESPONSIVE STYLES */
		/* 1440px+: widen container slightly, keep 3 columns */
		@media (min-width: 1440px) {
			.cards-container {
				max-width: 1560px;
				gap: 36px;
			}

			.card {
				max-width: 520px;
				min-height: 600px;
			}
		}

		/* 1200–1439px: 3 columns, tighter */
		@media (max-width: 1439px) and (min-width: 1200px) {
			.cards-container {
				max-width: 1300px;
				gap: 28px;
			}

			.card {
				max-width: 400px;
				min-height: 560px;
			}
		}

		/* 992–1199px: move to 2 columns */
		@media (max-width: 1199px) {
			.card {
				flex: 1 1 calc(50% - 28px);
				max-width: 520px;
				min-height: 520px;
			}
		}

		/* Tablet */
		@media (max-width: 1024px) {
			.who-we-are {
				padding: 100px 50px;
			}

			.who-we-are::before {
				width: 90%;
				height: 50%;
				opacity: 0.12;
				/* slightly softer  */
			}

			.about-text h2 {
				font-size: 2.3rem;
			}

			.about-text p {
				font-size: 1.1rem;
			}

			.card {
				flex: 1 1 calc(50% - 30px);
				min-height: 550px;
			}
		}

		@media (max-width: 991px) {
			.cards-container {
				flex-direction: column;
				align-items: center;
				gap: 24px;
			}

			.card {
				flex: 1 1 100%;
				max-width: 720px;
				min-height: auto;
			}

			.card-icon {
				height: 220px;
			}

			.card-content {
				padding: 28px;
			}
		}

		/* Tablet and Mobile – stack cards vertically */
		@media (max-width: 992px) {
			.cards-container {
				flex-direction: column;
				align-items: center;
				gap: 30px;
			}

			.card {
				flex: 1 1 calc(50% - 30px);
				max-width: 450px;
				min-height: 550px;
			}

			.card-icon img {
				width: 100%;
				/* height: auto; */
			}
		}

		/* Mobile */
		@media (max-width: 768px) {
			.who-we-are {
				padding: 80px 25px;
			}

			.who-we-are::before {
				width: 100%;
				height: 40%;
				opacity: 0.1;
				left: 0;
				transform: none;
				background-position: center top;
			}

			.about-content {
				flex-direction: column;
				align-items: center;
				text-align: center;
			}

			.about-text {
				width: 100%;
				padding: 30px;
			}

			.about-text h2 {
				font-size: 2rem;
			}

			.about-text p {
				font-size: 1rem;
			}

			.about-image img {
				max-width: 90%;
			}

			.cards-container {
				padding: 0 15px;
			}

			.cards-container {
				flex-direction: column;
				align-items: center;
			}

			.card {
				flex: 1 1 100%;
				max-width: 90%;
				min-height: auto;
			}

			.card-title {
				font-size: 1.5rem;
			}

			.card-description {
				font-size: 1rem;
			}
		}

		/* Small Mobile */
		@media (max-width: 480px) {
			.cards-container {
				margin-top: -20px;
				flex-direction: column;
				align-items: center;
			}

			.who-we-are::before {
				width: 100%;
				height: 30%;
				opacity: 0.08;
				background-position: top;
			}

			.about-text {
				padding: 20px;
			}

			.about-text h2 {
				font-size: 1.6rem;
			}

			.about-text p {
				font-size: 0.95rem;
			}

			.card-content {
				padding: 25px;
			}

			.card-title {
				font-size: 1.4rem;
			}

			.card-description {
				font-size: 0.9rem;
			}
		}

		/*     
            .container-card {
            max-width: 1400px;
            margin: 0 auto;
            } */

		/* -------------piller design 1 -----------------*/


		.header-piller {
			opacity: 0;
			transform: scale(0.9) translateY(50px);
			margin-top: -90px;
			justify-items: center;
			text-align: center;
			margin-bottom: 40px;
		}

		.header-piller h1 {
			font-size: 3rem;
			font-weight: 500;
			margin-bottom: 20px;
		}

		.header-piller p {
			font-size: 1.3rem;
			color: #aaa;
			max-width: 900px;
		}

		.services-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			margin-top: 40px;
		}

		.right-column {
			display: grid;
			/* grid-template-rows: 1fr 1fr 1fr; */
			gap: 20px;
		}

		.top-cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			grid-row: span 2;
		}

		.card1-piller {
			height: 460px;
			width: 440px;
			background: linear-gradient(180deg, #24272D 0%, #000000 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			border-radius: 24px;
			/* border: 1px solid #2a2a2a; */
			transition: all 0.3s ease;
			overflow: hidden;
		}

		.card-piller:hover {
			border-color: #4a9eff;
			transform: translateY(-5px);
			box-shadow: 0 20px 40px rgba(74, 158, 255, 0.1);
		}

		.card1-piller:hover {
			transform: translateY(-10px);
			box-shadow: 0 20px 40px rgba(51, 102, 255, 0.25);
		}

		.card-large {
			height: 790px;
			background: linear-gradient(180deg, #24272D 0%, #000000 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			border-radius: 24px;
			overflow: hidden;
			/* ensures image stays inside rounded corners */
			transition: all 0.3s ease;
			display: flex;
			flex-direction: column;
		}

		.card-large:hover {
			transform: translateY(-10px);
			box-shadow: 0 20px 40px rgba(51, 102, 255, 0.25);
		}

		.card-horizontal:hover {
			transform: translateY(-10px);
			box-shadow: 0 20px 40px rgba(51, 102, 255, 0.25);
		}

		.card-large .card-image-piller {
			width: 100%;
			height: 280px;
			/* fixed height for cinematic cover */
			overflow: hidden;
		}

		.card-large .card-image-piller img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* fills container, crops excess */
			display: block;
		}

		.card-horizontal {
			width: 900px;
			height: 310px;
			background: linear-gradient(180deg, #24272D 0%, #000000 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			border-radius: 24px;
			transition: all 0.3s ease;
			grid-column: span 2;
			flex-direction: row-reverse;
			display: flex;
			/* side-by-side layout */
			justify-content: space-between;
			overflow: hidden;
			/* keeps image inside rounded corners */
		}

		.card-horizontal .card-content-piller {
			flex: 1;
			/* left side */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			/* align text left */
			padding: 30px;
			text-align: left;
		}

		.card-horizontal .card-image-piller {
			flex: 1;
			/* right side */
			height: 100%;
			/* match card height */
		}

		.card-horizontal .card-image-piller img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* cinematic cover */
			display: block;
		}

		.card-horizontal .card-title-piller {
			font-size: 1.8rem;
			margin-bottom: 15px;
		}

		.card-icon-piller {
			font-size: 3rem;
			margin-bottom: 20px;
		}

		.card-large .card-icon-piller {
			font-size: 5rem;
		}

		.card-image-piller {
			object-fit: cover;
		}

		.card-image-piller img {
			max-height: 270px;
			width: 100%;
			height: auto;
			object-fit: cover;
			/* or 'contain' based on your preference */
			border-top-left-radius: 24px;
			border-top-right-radius: 24px;
		}

		.card-content-piller {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30px;
			text-align: center;
		}

		.card-title-piller {
			font-size: 1.5rem;
			font-weight: 600;
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.card-large .card-content-piller {
			padding: 30px 40px;
			color: #fff;
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.card-large .card-title-piller {
			font-size: 1.8rem;
			font-weight: 600;
			margin: 0;
		}

		.card-horizontal .card-title-piller {
			/* margin-top: 105px; */
			font-size: 1.8rem;
		}

		.card-description-piller {
			color: #aaa;
			font-size: 0.95rem;
			line-height: 1.8;
			margin-bottom: 20px;
		}

		.card-large .card-description-piller {
			font-size: 1rem;
			line-height: 1.6;
			color: #a8a8a8;
			/* softer contrast for readability */
		}

		.card-large .card-keywords-piller {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;
		}

		.card-large .keyword-tag-piller {
			background: rgba(74, 158, 255, 0.1);
			color: #4a9eff;
			padding: 6px 14px;
			border-radius: 20px;
			font-size: 0.85rem;
			border: 1px solid rgba(74, 158, 255, 0.2);
		}

		.card-keywords-piller {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 20px;
		}

		.keyword-tag-piller {
			background: rgba(74, 158, 255, 0.1);
			color: #4a9eff;
			padding: 6px 14px;
			border-radius: 20px;
			font-size: 0.85rem;
			border: 1px solid rgba(74, 158, 255, 0.2);
		}

		.visual-element-piller {
			width: 200px;
			height: 200px;
			background: linear-gradient(180deg, #4a9eff 0%, #2563eb 100%);
			border-radius: 50%;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3rem;
			font-weight: 700;
			box-shadow: 0 20px 60px rgba(74, 158, 255, 0.3);
		}

		@media (max-width: 1024px) {
			.services-grid {
				grid-template-columns: 1fr;
			}

			.card-large {
				grid-row: span 1;
			}

			.right-column {
				grid-template-rows: auto;
			}

			.top-cards {
				grid-row: span 1;
				grid-template-columns: 1fr;
			}

			.card-horizontal {
				grid-column: span 1;
			}

			/* .header-piller h1 {
				font-size: 2.5rem;
			} */
		}

		@media (max-width: 768px) {
			/* body {
				padding: 20px 15px;
			} */

			/* .header-piller h1 {
				font-size: 2rem;
			} */

			/* .header-piller p {
				font-size: 1rem;
			} */

			.card-piller {
				padding: 30px;
			}

			.card-title-piller {
				font-size: 1.3rem;
			}

			.card-large .card-title-piller {
				font-size: 2rem;
			}

			.visual-element-piller {
				width: 150px;
				height: 150px;
				font-size: 2.5rem;
			}
		}

		/* -------------piller design 2 -----------------*/

		.pillars-wrapper {
			opacity: 1;
			/* start invisible */
			transform: scale(0.8) translateY(50px);
			width: 100%;
			/* padding: 45px 150px; */

		}



		.pillar-container {
			border-radius: 24px;
			height: 400px;
			display: flex;
			width: 100%;
			/* min-height: 500px; */
			margin-bottom: 60px;
			opacity: 0;
			transform: scale(0.9) translateY(60px);
			transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		}

		.pillar-container.animate-in {
			opacity: 1;
			transform: scale(1) translateY(0);
		}

		/* First and Third Pillar - Image Left, Content Right */
		.pillar-layout-left .pillar-visual-section {
			border-top-left-radius: 24px;
			/* top-left corner */
			border-bottom-left-radius: 24px;
			/* bottom-left corner */
			width: 60%;
			background: linear-gradient(135deg, #000000, #000000);
		}

		.pillar-layout-left .pillar-text-section {
			border-top-right-radius: 24px;
			/* top-left corner */
			border-bottom-right-radius: 24px;
			/* bottom-left corner */
			width: 40%;
			background: linear-gradient(180deg, #000 0%, #24272D 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			padding: 60px 50px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		/* Second and Fourth Pillar - Content Left, Image Right */
		.pillar-layout-right {
			flex-direction: row-reverse;
		}

		.pillar-layout-right .pillar-visual-section {
			border-top-right-radius: 24px;
			/* top-left corner */
			border-bottom-right-radius: 24px;
			/* bottom-left corner */
			width: 60%;
			background: linear-gradient(180deg, #24272D 0%, #000000 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
		}

		.pillar-layout-right .pillar-text-section {
			border-top-left-radius: 24px;
			/* top-left corner */
			border-bottom-left-radius: 24px;
			/* bottom-left corner */
			width: 40%;
			background: linear-gradient(180deg, #000 0%, #24272D 100%);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			padding: 60px 50px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.pillar-visual-section {

			position: relative;
			overflow: hidden;
		}

		.pillar-visual-section img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.7s ease;
		}

		.pillar-container:hover .pillar-visual-section img {
			transform: scale(1.08);
		}

		.pillar-text-section h2 {
			font-size: 2rem;
			font-weight: 400;
			margin-bottom: 30px;
			line-height: 1.2;
			letter-spacing: -0.02em;
		}

		.pillar-text-section p {
			font-size: 1.2rem;
			line-height: 1.7;
			color: #a8a8a8;
			margin-bottom: 25px;
		}

		.pillar-keywords-section {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 15px;
		}

		.keyword-item {
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.15);
			padding: 6px 14px;
			border-radius: 16px;
			font-size: 0.85rem;
			color: #e0e0e0;
			transition: all 0.3s ease;
		}

		.keyword-item:hover {
			background: rgba(255, 255, 255, 0.15);
			border-color: rgba(255, 255, 255, 0.3);
			transform: translateY(-2px);
		}

		.pillar-icon-badge {
			font-size: 2.5rem;
			margin-bottom: 15px;
			display: inline-block;
		}

		@media (max-width: 1200px) {
			.header-piller h1 {
				font-size: 2.6rem;
			}

			.header-piller p {
				font-size: 1.2rem;
				max-width: 800px;
			}
		}


		@media (max-width: 992px) {
			.header-piller {
				margin-top: -50px;
			}

			.header-piller h1 {
				font-size: 2.3rem;
			}

			.header-piller p {
				font-size: 1.15rem;
				max-width: 700px;
			}
		}


		
		@media (max-width: 768px) {
			.header-piller {
				margin-top: 70px;
				padding: 0 20px;
			}

			.header-piller h1 {
				font-size: 2rem;
			}

			.header-piller p {
				font-size: 1rem;
				max-width: 95%;
			}
		}


		
		@media (max-width: 576px) {
			.header-piller {
				margin-top: -10px;
				margin-bottom: 30px;
				padding: 0 15px;
			}

			.header-piller h1 {
				margin-top: -75px;
				font-size: 1.7rem;
				margin-bottom: 12px;
			}

			.header-piller p {
				font-size: 0.95rem;
			}
		}


	
		@media (max-width: 400px) {
			.header-piller {
				padding: 0 10px;
			}

			.header-piller h1 {
				font-size: 1.5rem;
			}

			.header-piller p {
				font-size: 0.85rem;
			}
		}


		@media (max-width: 1200px) {

			.pillar-container {
				height: 360px;
			}

			.pillar-text-section {
				padding: 40px 35px !important;
			}

			.pillar-text-section h2 {
				font-size: 1.8rem;
			}

			.pillar-text-section p {
				font-size: 1.05rem;
			}
		}

		@media (max-width: 992px) {

			.pillar-container {
				height: auto;
				flex-direction: column !important;
			}

			/* image full width */
			.pillar-visual-section {
				width: 100% !important;
				/* height: 280px; */
				border-radius: 24px 24px 0 0 !important;
			}

			/* text full width */
			.pillar-text-section {
				width: 100% !important;
				border-radius: 0 0 24px 24px !important;
				padding: 40px 30px !important;
			}

			.pillar-text-section h2 {
				font-size: 1.6rem;
			}

			.pillar-text-section p {
				font-size: 1rem;
			}
		}

	
		@media (max-width: 768px) {

			.pillars-wrapper {
				transform: scale(1) translateY(0);
			}

			.pillar-visual-section {
				height: 240px;
			}

			.pillar-text-section {
				padding: 32px 25px !important;
			}

			.pillar-text-section h2 {
				font-size: 1.45rem;
			}

			.pillar-text-section p {
				font-size: 0.95rem;
				line-height: 1.55;
			}
		}

		
		@media (max-width: 576px) {

			.pillar-container {
				margin-bottom: 40px;
			}

			.pillar-visual-section {
				height: 200px;
			}

			.pillar-text-section {
				padding: 25px 18px !important;
				text-align: left;
			}

			.pillar-text-section h2 {
				font-size: 1.3rem;
				margin-bottom: 18px;
			}

			.pillar-text-section p {
				font-size: 0.9rem;
			}

			.keyword-item {
				font-size: 0.75rem;
				padding: 5px 10px;
			}
		}

		
		@media (max-width: 400px) {

			.pillar-text-section {
				padding: 20px 15px !important;
			}

			.pillar-text-section h2 {
				font-size: 1.2rem;
			}

			.pillar-text-section p {
				font-size: 0.85rem;
			}
		}

		@media (max-width: 968px) {

			.pillar-container {
				flex-direction: column !important;
				height: auto;
				gap: 0px;
				/* spacing between image and text */
			}

			.pillar-layout-right .pillar-visual-section {
				border-top-left-radius: 24px;
				border-top-right-radius: 24px;
			}

			.pillar-visual-section {
				border-top-left-radius: 24px;
				border-top-right-radius: 24px;
				width: 100% !important;
			}

			.pillar-text-section {

				width: 100% !important;
				/* border-radius: 0 !important; */
			}

			.pillar-visual-section img {
				border-radius: 0 !important;
				height: 250px;
				object-fit: cover;
			}

			.pillar-text-section {
				padding: 40px 30px;
			}
		}


		/* Mobile */
		@media (max-width: 768px) {
			.who-we-are::after {
				height: 120px;
				bottom: 10px;
				opacity: 0.35;
			}
		}

		/* Tablet */
		@media (max-width: 968px) {
			.who-we-are::after {
				height: 145px;
				bottom: 20px;
				opacity: 0.3;
			}
		}

		/* Desktop Large (1200px+) */
		@media (min-width: 1200px) {
			.who-we-are::after {
				height: 300px;
				bottom: 0px;
			}
		}

		/* Extra Large (1600px+) */
		/* @media (min-width: 1600px) {
    .who-we-are::after {
        height: 350px;
        bottom: 80px;
    }
} */






		/* Stats Section */
		.stats {
			z-index: 2;
			/* margin-top: -1120px; */
			padding: 80px 0;
			border: 1px solid rgba(0, 0, 0, 1);
			position: relative;
		}

		.section-title {
			font-size: 3rem;
		}

		.stats-container {
			/* font-family: "DM Sans", sans-serif; */
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 30px;
			text-align: center;
		}

		.stat-item {
			padding: 20px;
			opacity: 1;
			transform: translateY(50px);
			/* opacity: 0;
            transform: scale(0.8);
            transition: all 0.8s ease; */
		}

		.stat-item.visible {
			opacity: 1;
			transform: scale(1);
		}

		.stat-value {
			font-size: 3rem;
			font-weight: 800;
			background: linear-gradient(90deg, var(--nxon-blue), var(--nxon-purple));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			margin-bottom: 10px;
			transition: all 0.3s ease;
		}

		.stat-item:hover .stat-value {
			transform: scale(1.1);
		}

		.stat-label {
			color: var(--nxon-light-gray);
			font-size: 1.1rem;
			transition: all 0.3s ease;
		}

		.stat-item:hover .stat-label {
			color: white;
		}

		/* Stats section adjustments */
		@media (max-width: 992px) {
			.stats-container {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}

			.stat-value {
				font-size: 2.5rem;
			}

			.stat-label {
				font-size: 1.2rem;
			}
		}

		@media (max-width: 768px) {
			.stats {
				padding: 60px 0;
			}

			.section-title {
				font-size: 2.2rem;
			}

			.stats-container {
				grid-template-columns: repeat(2, 1fr);
				gap: 15px;
			}

			.stat-value {
				font-size: 2rem;
			}

			.stat-label {
				font-size: 1rem;
			}
		}

		@media (max-width: 576px) {
			.stats {
				padding: 40px 0;
			}

			.section-title {
				font-size: 1.8rem;
			}

			.stats-container {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.stat-item {
				padding: 15px;
			}
		}

		/* Value Proposition Section */
		.value-prop {
			padding: 100px 0;
			background-color: var(--nxon-dark);
			position: relative;
		}

		.value-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 30px;
			margin-top: 50px;
		}

		.value-item {
			display: flex;
			align-items: flex-start;
			gap: 15px;
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s ease;
		}

		.value-item.visible {
			opacity: 1;
			transform: translateY(0);
		}

		.value-icon {
			width: 50px;
			height: 50px;
			background: rgba(14, 165, 233, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--nxon-blue);
			flex-shrink: 0;
			transition: all 0.3s ease;
		}

		.value-item:hover .value-icon {
			background: linear-gradient(135deg, var(--nxon-blue), var(--nxon-purple));
			color: white;
			transform: rotate(15deg);
		}

		.value-content h3 {
			font-size: 1.3rem;
			font-weight: 700;
			margin-bottom: 10px;
			transition: all 0.3s ease;
		}

		.value-item:hover .value-content h3 {
			background: linear-gradient(90deg, var(--nxon-blue), var(--nxon-purple));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.value-content p {
			color: var(--nxon-gray);
			transition: all 0.3s ease;
		}

		.value-item:hover .value-content p {
			color: #CBD5E1;
		}

		/* CTA Section */
		.cta {
			padding: 100px 0;
			background: #020617;
			text-align: center;
			position: relative;
			overflow: hidden;
			opacity: 0;
			transform: translateY(50px);
		}

		.cta::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
			opacity: 0.3;
			z-index: 0;
		}

		.cta-container {
			position: relative;
			z-index: 1;
		}
	.cta-title {
			font-size: 3rem;
			font-weight: 500;
			margin-bottom: 20px;
			animation: fadeInUp 1s ease;
			opacity: 0;
			transform: none;
		}

		.cta-subtitle {
			color: #b8b9c0;
			/* font-family: "DM Sans", sans-serif; */
			font-size: 1.1rem;
			max-width: 700px;
			margin: 0 auto 30px;
			opacity: 0.9;
			animation: fadeInUp 1s ease 0.2s both;
			opacity: 0;
			transform: translateY(50px);
		}

		/* CTA Button Base */
		.cta .btn {
			position: relative;
			overflow: hidden;
			font-size: 1.1rem;
			padding: 12px 28px;
			border-radius: 40px;
			color: #fff;

			/* Gradient background */
			background: linear-gradient(135deg, var(--nxon-blue), var(--nxon-purple));

			/* Entry animation */
			animation: fadeInUp 1s ease 0.4s both;
			opacity: 0;
			transform: translateY(50px);

			box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
			cursor: pointer;
			transition: 0.3s ease;
		}

		/* Hover */
		.cta .btn:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
		}

		/* 🔥 Left-to-right shiny layer effect */
		.cta .btn::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.12);

			/* Starting position - hidden on left */
			transform: translateX(-100%);
			transition: transform 0.6s ease;

			/* Layer should be above background but below text */
			z-index: 0;
		}

		/* Hover → slide effect */
		.cta .btn:hover::before {
			transform: translateX(0);
		}




		/* General improvements for all sections */
		/* Large Desktop (≥1440px) */
		@media (min-width: 1440px) {
			.cta {
				padding: 120px 0;
			}

			.cta-title {
				font-size: 3rem;
			}

			.cta-subtitle {
				font-size: 1.1rem;
				max-width: 800px;
			}

			.cta .btn {
				font-size: 1.1rem;
				        padding: 14px 26px;
			}
		}

		/* Standard Desktop (1200px–1439px) */
		@media (max-width: 1439px) and (min-width: 1200px) {
			.cta {
				padding: 100px 0;
			}

			.cta-title {
				font-size: 3rem;
			}

			.cta-subtitle {
				font-size: 1.3rem;
				max-width: 700px;
			}

			.cta .btn {
				font-size: 1.1rem;
				padding: 14px 30px;
			}
		}

		/* Tablet Landscape (992px–1199px) */
		@media (max-width: 1199px) {
			.cta {
				padding: 80px 0;
			}

			.cta-title {
				font-size: 2.5rem;
			}

			.cta-subtitle {
				font-size: 1.2rem;
				max-width: 600px;
			}

			.cta .btn {
				font-size: 1rem;
				padding: 12px 28px;
			}
		}

		/* Tablet Portrait (768px–991px) */
		@media (max-width: 991px) {
			.cta {
				padding: 70px 0;
			}

			.cta-title {
				font-size: 2.2rem;
				margin-bottom: 15px;
			}

			.cta-subtitle {
				font-size: 1.1rem;
				max-width: 500px;
			}

			.cta .btn {
				font-size: 1rem;
				padding: 12px 24px;
			}
		}

		/* Mobile (480px–767px) */
		@media (max-width: 767px) {
			.cta {
				padding: 60px 20px;
			}

			.cta-title {
				font-size: 1.8rem;
			}

			.cta-subtitle {
				font-size: 1rem;
				max-width: 90%;
			}

			.cta .btn {
				display: block;
				width: 100%;
				margin: 10px auto;
				font-size: 0.95rem;
				padding: 12px 20px;
			}
		}

		/* Small Mobile (<480px) */
		@media (max-width: 480px) {
			.cta {
				padding: 50px 15px;
			}

			.cta-title {
				font-size: 1.6rem;
			}

			.cta-subtitle {
				font-size: 0.95rem;
				max-width: 100%;
			}

			.cta .btn {
				font-size: 0.9rem;
				padding: 10px 18px;
			}
		}

		/* .carousel-video {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            object-fit: cover;
            display: block;
            margin: 0 auto;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            } */
		.carousel-image {
			position: relative;
			z-index: 2;
			top: 20%;
			/* vertical center */
			right: -1140px;
			/* right side margin */
			/* width: 40%;     image size */
			height: auto;
			/* aspect ratio maintain */
			transform: translateY(-50%);
			/* vertically center */
			object-fit: cover;
			animation: floatEffect 10s ease-in-out infinite alternate;
		}

		.carousel-image-2 {
			position: absolute;
			top: 10%;
			/* vertical center */
			right: 100px;
			/* right side margin */
			width: 40%;
			/* image size */
			height: auto;
			/* aspect ratio maintain */
			transform: translateY(-50%);
			/* vertically center */
			object-fit: cover;
			animation: floatEffect 10s ease-in-out infinite alternate;
		}

		.carousel-image-3 {
			position: absolute;
			top: 20%;
			/* vertical center */
			right: 180px;
			/* right side margin */
			width: 30%;
			/* image size */
			height: auto;
			/* aspect ratio maintain */
			transform: translateY(-50%);
			/* vertically center */
			object-fit: cover;
			animation: floatEffect 10s ease-in-out infinite alternate;
		}

		/* Soft top-bottom movement */
		@keyframes floatEffect {
			0% {
				transform: translateY(0px);
			}

			50% {
				transform: translateY(20px);
			}

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

		/* === NXON SECTION === */
		.nxon-section {
			position: relative;
			padding: 100px 20px;
			overflow: hidden;
			background-color: #000;
			color: #fff;
		}

		/* === Background === */
		.nxon-bg-wrapper {
			position: absolute;
			inset: 0;
			opacity: 0.6;
		}

		.nxon-bg-wrapper img {
			width: 100%;
			height: 106%;
			object-fit: cover;
			object-position: center;
		}

		.nxon-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.1);
		}

		/* === Container === */
		.nxon-container {
			position: relative;
			z-index: 10;
			max-width: 1200px;
			margin: 0 auto;
			text-align: center;
		}

		/* === Heading & Subtitle === */
		.nxon-title {
			font-size: 3rem;
			font-weight: 500;
			margin-bottom: 20px;
			opacity: 1;
			transform: translateY(50px);
		}

		.nxon-gradient-text {
			background: linear-gradient(90deg, #00c6ff, #0072ff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.nxon-subtitle {
			/* font-family: "DM Sans", sans-serif; */
			font-size: 1.1rem;
			color: #b8b9c0;
			max-width: 800px;
			margin: 0 auto 60px;
			line-height: 1.6;
			opacity: 1;
			transform: translateY(50px);
		}

		/* === Grid Layout === */
		.nxon-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 25px;
			max-width: 900px;
			margin: 0 auto;
		}

		/* === Glass Card === */
		.nxon-card {
			/* font-family: "DM Sans", sans-serif; */
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 20px;
			padding: 40px;
			backdrop-filter: blur(15px);
			/* transition: all 0.5s ease; */
			opacity: 0;
			transform: translateY(50px);
		}

		.nxon-card:hover {
			box-shadow: 0 0 20px rgba(0, 102, 255, 0.4);
			/* optional blue glow */
			transform: translateY(-8px);
			background: rgba(255, 255, 255, 0.15);
		}

		/* === Icon === */
		.nxon-icon {
			width: 60px;
			height: 60px;
			border-radius: 10px;
			color: rgba(20, 60, 240, 1);
			font-weight: 600;
			font-size: 50px;
			/* background: linear-gradient(90deg, #00c6ff, #0072ff); */
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 24px;
			transition: transform 0.3s ease;
		}

		.nxon-card:hover .nxon-icon {
			transform: scale(1.1);
		}

		.nxon-icon img {
			width: 68px;
			height: 68px;
			color: #fff;
		}

		.nxon-text-center {
			padding: 0;
			margin-bottom: 117px;
			margin-top: -38px;
		}

		/* === Text === */
		.nxon-card-title {
			font-size: 2rem;
			margin-bottom: 12px;
			font-weight: 600;
		}

		.nxon-card-text {
			color: #b8b9c0;
			line-height: 1.6;
			font-size: 1.3rem;
		}

		/* === Responsive === 
            @media (max-width: 768px) {
            .nxon-title {
            font-size: 2.2rem;
            }
            .nxon-subtitle {
            font-size: 1rem;
            }
            }*/
		/* Why NXON section adjustments */
		@media (max-width: 992px) {
			.nxon-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}

			.nxon-title {
				font-size: 3rem;
			}

			.nxon-subtitle {
				font-size: 1.2rem;
			}

			.nxon-card {
				padding: 30px;
			}
		}

		@media (max-width: 768px) {
			.nxon-section {
				padding: 60px 15px;
			}

			.nxon-title {
				font-size: 2.2rem;
			}

			.nxon-subtitle {
				font-size: 1rem;
			}

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

			.nxon-card {
				padding: 25px 20px;
			}

			.nxon-card-title {
				font-size: 1.5rem;
			}

			.nxon-card-text {
				font-size: 1rem;
			}
		}

		@media (max-width: 576px) {
			.nxon-section {
				padding: 40px 15px;
			}

			.nxon-title {
				font-size: 1.8rem;
			}

			.nxon-card {
				padding: 20px 15px;
			}
		}

		.ellipse-bg {
			position: absolute;
			width: 60vw;
			max-width: 804px;
			/* Figma width */
			height: 60vw;
			max-height: 805px;
			/* Figma height */
			/* top: 155px;      adjust as needed */
			left: 50%;
			/* center horizontally */
			transform: translateX(-50%) rotate(30.14deg);
			background: radial-gradient(circle at center, rgba(66, 133, 244, 0.7), rgba(0, 0, 0, 0) 70%);
			filter: blur(80px);
			opacity: 0.5;
			z-index: 0;
			/* behind cards */
		}

		.custom-container {
			position: relative;
			padding: 40px 20px;
		}

		.custom-title {
			font-weight: 500;
			text-align: center;
			margin-bottom: 40px;
			font-size: 3rem;
			color: #ffffff;
			opacity: 0;
			transform: translateY(50px);
		}

		.custom-testimonial-slider {
			display: block !important;
			margin-top: 20px;
			margin-bottom: 40px;
			/* display: flex; */
			/* add this */
			overflow: hidden;
			/* add this */
			width: 100%;
			/* optional but helps */
		}

		.custom-testimonial-card {
			/* width: 550%; */
			width: 100%;
			max-width: 700px;
			flex: 0 0 100%;
			/* max-width: 700px;   */
			/* each card full width for slider */
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.1);
			/* slightly darker semi-transparent base */
			backdrop-filter: blur(20px);
			/* strong blur effect */
			-webkit-backdrop-filter: blur(20px);
			/* Safari support */
			border: 1px solid rgba(255, 255, 255, 0.15);
			border-radius: 15px;
			padding: 30px;
			margin: 0 15px;
			height: 400px !important;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
			box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
			/* soft outer glow */
			/* width: 800px!important; */
		}

		.slick-center .custom-testimonial-card {
			transform: scale(1.05);
			/* bigger center card */
			opacity: 1;
			/* fully visible */
			border-color: rgba(66, 133, 244, 0.5);
			box-shadow: 0 0 30px rgba(66, 133, 244, 0.5);
		}

		.custom-testimonial-card:hover {
			transform: translateY(-5px);
			border-color: rgba(66, 133, 244, 0.5);
		}

		.custom-testimonial-text {
			color: #b8b9c0;
			/* font-family: "DM Sans", sans-serif; */
			font-size: 1.3rem;
			line-height: 1.6;
			margin-bottom: 20px;
			/* font-style: italic; */
			flex-grow: 1;
		}

		.custom-testimonial-author {
			font-size: 1.2rem;
			font-weight: 600;
			margin-bottom: 15px;
			color: #4285F4;
		}

		.custom-stars {
			color: #FFD700;
			font-size: 1.5rem;
			margin-bottom: 15px;
		}

		.custom-slider .slick-slide {
			display: flex !important;
			justify-content: center;
			align-items: stretch;
			height: auto !important;
		}

		.custom-slider .slick-prev:before,
		.custom-slider .slick-next:before {
			color: #4285F4;
			font-size: 1.5rem;
		}

		.custom-slider .slick-dots li button:before {
			color: #ffffff;
			opacity: 0.5;
		}

		.custom-slider .slick-dots li.slick-active button:before {
			color: #4285F4;
			opacity: 1;
		}

		.custom-contact-section {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}

		.custom-contact-btn {
			margin-top: 5px;
			margin-bottom: 5px;
			background-color: #4285F4;
			color: white;
			border: none;
			border-radius: 50px;
			padding: 15px 30px;
			font-size: 1.1rem;
			font-weight: 600;
			cursor: pointer;
			display: flex;
			align-items: center;
			/* transition: all 0.3s ease; */
			opacity: 0;
			transform: translateY(50px);
		}

		.custom-contact-btn:hover {
			background-color: #3367d6;
			transform: translateY(-3px);
			box-shadow: 0 5px 15px rgba(66, 133, 244, 0.4);
		}

		.custom-contact-btn i {
			margin-left: 10px;
			font-size: 1.3rem;
		}

		.custom-testimonial-image {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 10px;
		}

		.author {
			display: flex;
			gap: 20px;
			align-items: center;
		}

		/* 🔹 Responsive Breakpoints */
		@media (max-width: 992px) {
			.custom-container {
				padding: 20px 15px;
			}

			.custom-testimonial-card {
				padding: 25px;
			}

			.custom-testimonial-text {
				font-size: 1rem;
			}
		}

		@media (max-width: 768px) {
			.custom-container {
				padding: 20px 15px;
			}

			.custom-title {
				font-size: 2.2rem;
				margin-bottom: 30px;
			}

			.custom-testimonial-card {
				padding: 20px;
			}

			.custom-testimonial-text {
				font-size: 0.95rem;
			}

			.custom-testimonial-author {
				font-size: 1rem;
			}

			.custom-stars {
				font-size: 1.1rem;
			}
		}

		@media (max-width: 576px) {
			.custom-title {
				font-size: 1.6rem;
			}

			.custom-testimonial-card {
				padding: 15px;
			}

			.custom-testimonial-text {
				font-size: 0.9rem;
			}

			.author {
				flex-direction: column;
				align-items: flex-start;
			}

			.custom-testimonial-image {
				width: 45px;
				height: 45px;
			}
		}




		/*solution section */




		.solutions-section {
			height: auto;
			min-height: 100vh;
			width: 100%;
			/*background: #111;*/
			color: #fff;
			overflow: unset;
			/* this keeps overlay slider working */
		}





		/* inner wrapper for centered content */
		.solutions-section .content-wrapper {
			max-width: 1400px;
			margin: 25px auto;
			padding: 2rem;
		}

		.section-header-solution {
			text-align: center;
			margin-bottom: 60px;
		}

		.section-header-solution h1 {
			margin-top: 50px;
			font-size: 3rem;
			font-weight: 500;
			margin-bottom: 10px;
			line-height: 1.2;
		}

		.section-header-solution span {
			font-size: 2rem;
			color: #888;
			font-weight: 300;
		}

		.content-wrapper {
			display: flex;
			gap: 200px;
			align-items: flex-start;
		}

		.sidebar-menu-solution {
			width: 182px;
			flex-shrink: 0;
			position: sticky;
			/* top: 20px; */
		}

		.menu-option {
			/* background-color: transparent; */

			color: #888;
			padding: 18px 24px;
			margin-bottom: 12px;
			border-radius: 12px;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 2px solid transparent;
			font-size: 1rem;
			font-weight: 500;
		}

		.menu-option:hover {
			text-align: center;
			width: 190px;
			background-color: #2b2b2b;
			/* same gray */
			color: #4ea8ff;
			/* subtle blue tint on hover */
			/* transform: translateX(5px); */
		}

		.menu-option.active {
			text-align: center;
			width: 190px;
			background-color: #2b2b2b;
			/* soft gray like screenshot */
			color: #fff;

			/* transform: translateX(5px); */
		}

		.display-area {
			flex: 1;
			min-height: auto;
		}

		.content-panel {
			display: none;
			opacity: 0;
			transform: translateY(20px);
			animation: fadeInUp 0.5s ease forwards;
		}

		.content-panel.active {
			display: block;
		}

		@keyframes fadeInUp {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

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

		.camera-card {
			height: 380px;
			/* adjust as needed */
			position: relative;
			background: linear-gradient(rgba(28, 28, 28, 0.52) 0%, rgba(15, 15, 15, 0.71) 100%);
			box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
			border-radius: 16px;
			overflow: hidden;
			transition: all 0.3s ease;
			cursor: pointer;
			border: 2px solid transparent;
		}

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

			box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
		}

		.camera-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.6s ease;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		}

		.camera-card:hover .camera-image {
			transform: scale(1.08);
		}

		.camera-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/* h3 top, p bottom */
			padding: 20px;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.0));
			color: #fff;
			transition: background 0.4s ease;
		}

		.camera-overlay h3 {
			font-size: 1.3rem;
			margin: 0;
			font-weight: 400;
			z-index: 2;
		}

		.camera-overlay p {
			opacity: 0;
			transform: translateY(10px);
			font-size: 0.95rem;
			color: #ddd;
			transition: all 0.4s ease;
			margin-top: 6px;
		}

		.camera-card:hover .camera-overlay p {
			opacity: 1;
			transform: translateY(0);
		}

		.camera-card:hover .camera-overlay {
			background: rgba(0, 0, 0, 0.6);
		}

		.camera-info {
			padding: 20px;
		}

		.camera-info h3 {
			font-size: 1.1rem;
			font-weight: 600;
			margin-bottom: 8px;
		}

		.camera-info p {
			font-size: 0.9rem;
			color: #888;
		}

		.nvr-card {
			background: linear-gradient(rgb(17 26 113 / 52%) 0%, rgb(79 79 79 / 71%) 100%);	;
			box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
			border-radius: 20px;
			padding: 30px 30px;
			/* border: 2px solid #333; */
			transition: all 0.4s ease;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 40px;
		}

		.nvr-card:hover {

			transform: scale(1.02);
			box-shadow: 0 20px 50px rgba(37, 99, 235, 0.2);
		}

		.NVR-left {
			flex: 1;
		}

		.NVR-right {
			flex: 1;
		}

		.nvr-image-wrapper {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 15px 0;
		}

		.nvr-image {
			width: 100%;
			max-width: 875px;
			/* Change if needed */
			height: auto;
			border-radius: 12px;
			object-fit: contain;
			/* keeps original look */
		}


		.nvr-card h2 {
			font-size: 2.5rem;
			margin-bottom: 30px;
			background: linear-gradient(135deg, #60a5fa, #3b82f6);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.nvr-card p {
			font-size: 1.2rem;
			line-height: 1.8;
			color: #bbb;
			margin-bottom: 30px;
		}

		.nvr-features {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin-top: 30px;
		}

		.nvr-feature {
			background: rgba(255, 255, 255, 0.1);
			padding: 20px;
			border-radius: 12px;
			border: 1px solid rgba(37, 99, 235, 0.3);
		}

		.nvr-feature h4 {
			display: flex;
			align-items: center;
			gap: 10px;
			/* space between icon & title */
			font-size: 1.1rem;
			margin-bottom: 8px;
			color: #ffffff;
		}

		.nvr-feature h4 i {
			font-size: 23px;
			color: #4da3ff;
			/* blue theme */
		}

		.nvr-feature p {
			font-size: 0.95rem;
			color: #999;
			margin: 0;
		}

		/* =====================================================
   1400px and below — large screens
   =====================================================*/
		@media (max-width: 1400px) {
			.content-wrapper {
				gap: 120px;
			}

			.section-header-solution h1 {
				font-size: 2.6rem;
			}
		}


		/* =====================================================
    1200px and below — laptop screens
   =====================================================*/
		@media (max-width: 1200px) {
			.content-wrapper {
				gap: 80px;
			}

			.sidebar-menu-solution {
				width: 160px;
			}

			.camera-card {
				height: 350px;
			}

			.section-header-solution h1 {
				font-size: 2.4rem;
			}
		}

		/* =====================================================
      992px and below — tablets landscape
   =====================================================*/
		@media (max-width: 992px) {
			.content-wrapper {
				flex-direction: column;
				gap: 40px;
			}

			.sidebar-menu-solution {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 10px;
				top: 0;
			}

			.menu-option {
				width: auto;
				text-align: center;
				padding: 14px 20px;
			}

			.menu-option:hover,
			.menu-option.active {
				width: auto;
			}

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

			.camera-card {
				height: 320px;
			}
		}


		/* =====================================================
     768px and below — tablets portrait
   =====================================================*/
		@media (max-width: 768px) {
			.section-header-solution h1 {
				font-size: 2rem;
			}

			.section-header-solution span {
				font-size: 1.4rem;
			}

			.camera-grid {
				grid-template-columns: 1fr 1fr;
				gap: 16px;
			}

			.camera-card {
				height: 300px;
			}

			.nvr-card {
				flex-direction: column;
				padding: 40px 30px;
			}

			.nvr-card h2 {
				font-size: 2rem;
			}

			.nvr-card p {
				font-size: 1rem;
			}

			.nvr-features {
				grid-template-columns: 1fr;
			}
		}


		/* =====================================================
     576px and below — mobile
   =====================================================*/
		@media (max-width: 576px) {
			.content-wrapper {
				padding: 1.5rem;
			}

			.section-header-solution h1 {
				font-size: 1.7rem;
			}

			.section-header-solution span {
				font-size: 1.2rem;
			}

			.camera-grid {
				grid-template-columns: 1fr;
			}

			.camera-card {
				height: 260px;
			}

			.menu-option {
				font-size: 0.9rem;
				padding: 12px 16px;
			}

			.nvr-card {
				flex-direction: column;
				padding: 30px 20px;
			}

			.nvr-card h2 {
				font-size: 1.8rem;
			}

			.nvr-card p {
				font-size: 0.95rem;
			}
		}


		/* =====================================================
      420px and below — small mobile
   =====================================================*/
		@media (max-width: 420px) {
			.section-header-solution h1 {
				font-size: 1.5rem;
			}

			.camera-card {
				height: 230px;
			}

			.menu-option {
				padding: 10px 14px;
				font-size: 0.85rem;
			}

			.nvr-card {
				flex-direction: column;
				padding: 24px 16px;
			}

			.nvr-card h2 {
				font-size: 1.6rem;
			}
		}



		.smoke-overlay {
			position: absolute;
			/* 👈 floats above */
			/* top: 0; */
			left: 0;
			width: 100%;
			height: 100vh;
			/* full viewport height */
			background: url("../Image/smoke.png") center/cover no-repeat,
				linear-gradient(#0000 0%, #000 100%);
			opacity: 1;
			/* start hidden */
			z-index: 1;
			/* 👈 above first slide */
			pointer-events: none;
			/* don’t block clicks */
		}



		.slide-section {
			height: auto !important;
			min-height: 100vh;
			padding: 4rem 1rem;
			scroll-snap-align: start;
			/* display: flex; */
			justify-content: center;
			align-items: center;

			color: #fff;
			position: relative;
			overflow: hidden;

		}

		.layout-container {
			display: flex;
			grid-template-columns: 1fr 1fr 0.8fr;
			grid-template-rows: auto auto auto;
			gap: 53px;
			max-width: 882px;
			margin: auto;
			justify-items: stretch;
			align-items: stretch;
			justify-content: space-evenly;
			align-content: center;
		}

		.img {
			position: absolute;
			border-radius: 12px;
			overflow: hidden;
		}

		.img img {
    margin-top: 40px;
    width: 95%;
    height: 95%;
    object-fit: cover;
    display: block;
}

		/* LEFT TALL IMAGE (IMAGE 1) */
		.img1 {
			z-index: 1;
			top: 31%;
			/* left: 547px; */
			width: 590px;
			height: 428px;
			transition: transform 0.4s ease;
			/* smooth animation */

			/* grid-row: 1 / 3;
    grid-column: 1; */

			/* top: 24%;
    left: 486px;
    width: 200px;
    height: 403px;
    grid-row: 1 / 3;
    grid-column: 1; */
		}

		.img1:hover {
			transform: rotate(3deg) scale(1.05);
			/* halka rotate + thodu zoom */

		}

		/* TOP WIDE IMAGE (IMAGE 2) */
		.img2 {
			top: 238px;
			left: 61%;
			transform: translateX(-50%);
			width: 466px;
			height: 196px;
			grid-row: 1;
			grid-column: 2 / span2;
		}

		/* CENTER SMALL IMAGE (IMAGE 3) */
		.img3 {
			top: 58%;
			left: 53%;
			transform: translate(-50%, -50%);
			width: 208px;
			height: 154px;
			z-index: 5;
			grid-row: 2;
			grid-column: 2;
		}

		/* RIGHT TALL IMAGE (IMAGE 4) */
		.img4 {
			top: 51%;
			right: 398px;
			width: 190px;
			height: 387px;
			grid-row: 2 / 4;
			grid-column: 3;
		}

		/* BOTTOM WIDE IMAGE (IMAGE 5) */
		.img5 {
			bottom: 11px;
			left: 43%;
			transform: translateX(-50%);
			width: 437px;
			height: 259px;
			grid-row: 3;
			grid-column: 1 / 3;
		}






		.slide-content {
			/* display: flex; */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			/* max-width: 800px; */
			text-align: center;
			height: 100%;
			/* fill parent height */
		}

		.slide-content h1 {
			margin-top: 50px;
			font-weight: 500;
			font-size: 2.5rem;
			margin-bottom: 20px;
		}

		.slide-content-ANTARIX {
			text-align: center;
		}

		.slide-content-ANTARIX h1 {
			font-weight: 500;
			margin-top: 60px;
			text-align: center;
			font-size: 2.5rem;
			margin-bottom: 20px;
		}

		.slide-content-ANTARIX p {
			color: #aeaeae;
			text-align: center;
			align-items: center;
			font-size: 1.1rem;
			line-height: 1.6;
			margin-bottom: 15px;
		}

		.slide-content p {
			color: #aeaeae;
			font-size: 1.1rem;
			line-height: 1.6;
			margin-bottom: 15px;
		}

		.sdk-table {
			width: 100%;
			border-collapse: collapse;
			margin: 20px 0;
		}

		.sdk-table th,
		.sdk-table td {
			border: 1px solid #ccc;
			padding: 10px;
		}

		.highlights {
			list-style: none;
			padding: 0;
			margin: 20px 0;
		}

		.highlights li {
			margin: 10px 0;
			font-size: 1.1rem;
		}

		.cta-btn-slide {
			text-decoration: none;
			display: inline-block;
			margin-top: 20px;
			padding: 12px 24px;
			overflow: hidden;
			background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
			color: #ffffff;
			font-size: 16px;
			font-weight: 500;
			border-radius: 40px;
			border: none;
			box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
			border-image-slice: 1;
			border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			cursor: pointer;
			transition: 0.3s ease;
		}

		.cta-btn-slide::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1px;
			/* border thickness */
			background: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
			border-top-left-radius: 40px;
			border-top-right-radius: 40px;
		}

		.cta-btn-slide:hover {
			background: #044586;
		}

		.cta-btn-slide-ANTARIX {
			text-decoration: none;
			display: inline-block;
			margin-top: 20px;
			padding: 12px 24px;
			overflow: hidden;
			background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
			color: #ffffff;
			font-size: 16px;
			font-weight: 500;
			border-radius: 40px;
			border: none;
			box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
			border-image-slice: 1;
			border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			cursor: pointer;
			transition: 0.3s ease;
		}

		.cta-btn-slide-ANTARIX::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1px;
			/* border thickness */
			background: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
			border-top-left-radius: 40px;
			border-top-right-radius: 40px;
		}

		.cta-btn-slide-ANTARIX:hover {
			background: #044586;
		}

		/* Backgrounds */
		.section-blue {
			height: 700px;
			/* background: linear-gradient(rgba(11, 20, 103, 0.38) 0%, rgba(15, 15, 15, 0.71) 100%); */
			background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(25, 25, 50, 0.5) 100%), url("../img/home/sdkbg2.jpg") center/cover no-repeat;

			box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
		}

		.section-purple {
			height: 700px;
			background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(25, 25, 50, 0.5) 100%), url("../img/home/antbg.webp") center/cover no-repeat;
			/* background: linear-gradient(180deg, #660044 0%, #220011 100%); */
		}

		.sdk-visual {
			margin-bottom: 40px;
			perspective: 1000px;
		}

		.sdk-visual img {
			width: 100%;
			max-width: 800px;
			transform: rotateY(-15deg) rotateX(5deg);
			object-fit: contain;
			/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); */
			transition: transform 0.6s ease;
		}

		.sdk-visual img:hover {
			transform: rotateY(0deg) rotateX(0deg) scale(1.05);
		}

		@media (min-width: 1200px) {
			.layout-container {
				max-width: 1100px;
				gap: 70px;
			}

			.img1 {
				/*display: flex;
				align-items: center;
				width: 660px;
				height: 514px;
				 left: 267px; 
				top: 33%;*/



				display: flex;
				align-items: center;
				width: 49%;
				height: 66%;
				/* left: 267px; */
				top: 34%;

			}


		}

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

			.img1 {
				left: 317px;
				width: 546px;
				height: 440px;
			}


		} */

		@media (max-width: 1100px) {

			/* All images stop being absolute */
			.img,
			.img1 {
				position: relative !important;
				width: 130% !important;
				height: auto !important;
				top: -85px !important;
				left: -80px !important;
				right: 0 !important;
				bottom: 0 !important;
				transform: none !important;
				margin-bottom: 20px;
			}

			/* Image inside remain full */
			.img img {
				object-fit: contain !important;
				width: 100% !important;
				height: auto !important;
			}

			/* Layout becomes vertical */
			.layout-container {
				display: flex;
				flex-direction: column;
				gap: 25px;
				width: 100%;
				max-width: 500px;
				margin: auto;
			}

			.slide-section {
				height: auto !important;
				padding-top: 3rem;
				padding-bottom: 3rem;
			}
		}


		@media (max-width: 1024px) {
			.slide-content-ANTARIX h1 {
				font-size: 2.2rem;
			}

			.slide-content h1 {
				font-size: 2.2rem;
			}

			.slide-section {
				height: auto;
				padding: 3rem 1.5rem;
			}

			.img {
				position: relative;
				width: 77% !important;
				height: auto !important;
				transform: none !important;
				left: 82px !important;
				right: 0 !important;
				top: -35px !important;
				bottom: 0 !important;
				margin-bottom: 20px;
			}

			.layout-container {
				display: flex;
				flex-direction: column;
				gap: 25px;
				max-width: 90%;
			}
		}

		@media (max-width: 768px) {
			.slide-content-ANTARIX h1 {
				font-size: 2.2rem;
			}

			.slide-content h1 {
				font-size: 2.2rem;
			}

			.slide-content-ANTARIX p {
				font-size: 1rem;
			}

			.slide-content p {
				font-size: 1rem;
			}

			.slide-section {
				padding: 2rem 1rem;
				height: auto !important;
			}

			.layout-container {
				display: flex;
				flex-direction: column;
				gap: 20px;
				width: 100%;
				margin: auto;
			}

			.img {
				width: 100% !important;
				height: auto !important;
				position: relative !important;
			}

			.img img {
				object-fit: contain;
				border-radius: 10px;
			}

			.img1 {
				position: relative !important;
				width: 100% !important;
				height: auto !important;
				top: -20px !important;
				left: 0 !important;
				right: 0 !important;
				transform: none !important;
			}

			/* Content text center */
			.slide-content,
			.slide-content-ANTARIX {
				text-align: center;
				margin-top: 20px;
			}
		}

		@media (max-width: 480px) {

			.img {
				width: 100% !important;
				height: auto !important;
				position: relative !important;
			}

			.img img {
				object-fit: contain;
				border-radius: 10px;
			}

			.img1 {
				position: relative !important;
				width: 126% !important;
				height: auto !important;
				top: -10px !important;
				left: -40px !important;
				right: 0 !important;
				transform: none !important;
			}

			.slide-content h1,
			.slide-content-ANTARIX h1 {
				font-size: 1.8rem;
			}

			.slide-content p,
			.slide-content-ANTARIX p {
				font-size: 1rem;
			}

			.cta-btn-slide,
			.cta-btn-slide-ANTARIX {
				padding: 10px 18px;
				font-size: 0.9rem;
			}
		}



		/*    paternship     */


		.infinity-section {
			width: 100%;
			padding: 30px 0;
			background: #0d0d0d;
			overflow: hidden;
			position: relative;
		}

		.infinity-title {
			text-align: center;
			font-size: 3rem;
			font-weight: 500;
			margin-bottom: 30px;
			color: #fff;
		}

		/* each row wrapper */
		.infinity-row {
			width: 100%;
			overflow: hidden;
			margin: 20px 0;
		}

		/* sliding track */
		.infinity-track {
			display: flex;
			gap: 175px;
			animation: slide-left 35s linear infinite;
		}

		/* second row reverse */
		.row-2 .infinity-track {
			animation: slide-right 35s linear infinite;
		}

		/* make images same size circle */
		.infinity-track img {
			width: auto;
			height: 85px;
			object-fit: cover;
			border-radius: 50%;
			transition: 0.3s ease;
			filter: brightness(0) saturate(0) invert(0.6);


		}

		/* hover color effect */
		.infinity-track img:hover {
			filter: grayscale(0%);
			transform: scale(1.1);
		}

		/* ANIMATIONS */
		@keyframes slide-left {
			0% {
				transform: translateX(0);
			}

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

		@keyframes slide-right {
			0% {
				transform: translateX(-50%);
			}

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


		@media (max-width: 1200px) {
			.infinity-track img {
				height: 55px;
				gap: 50px;
			}
		}

		@media (max-width: 992px) {
			.infinity-track {
				gap: 40px;
				animation-duration: 20s;
			}

			.infinity-track img {
				height: 50px;
			}
		}

		@media (max-width: 768px) {
			.infinity-title {
				font-size: 2.2rem;
			}

			.infinity-track {
				gap: 30px;
			}

			.infinity-track img {
				height: 45px;
			}
		}

		@media (max-width: 576px) {
			.infinity-title {
				font-size: 1.6rem;
			}
			.infinity-track {
				gap: 25px;
				animation-duration: 16s;
			}

			.infinity-track img {
				height: 40px;
			}
		}

		@media (max-width: 400px) {
			.infinity-title {
				font-size: 1.6rem;
			}
			.infinity-track img {
				height: 35px;
			}
		}

		/*******************pop pop ************/

		.contact-popup {
			overflow-x: hidden;
			width: 100%;
			height: 100vh;
			position: fixed;
			position: fixed;
			inset: 0;
			background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(25, 25, 50, 0.8) 100%), url('../img/home/camera2.webp') center/cover no-repeat;
			display: flex;
			justify-content: center;
			align-items: center;
			visibility: hidden;
			opacity: 0;
			transition: 0.4s ease;
			z-index: 9999;
			overflow-y: auto;
			/* popup scroll only */
		}

		.contact-popup.show {
			visibility: visible;
			opacity: 1;
		}

		body.popup-open {
			overflow: hidden;
			/* background page scroll lock */
		}

		.popup-content {
			max-height: 95vh;
			padding-right: 3px;
			/* prevent scrollbar overlap */
		}

		.two-col-popup {
			display: grid;
			grid-template-columns: 0.9fr 1.6fr;
			border-radius: 18px;
			background: #ffffff24;
			padding: 40px;
			width: 90%;
			max-width: 1150px;
			gap: 40px;
		}

		.popup-left {
			color: #fff;
		}

		.popup-left h2 {
			font-size: 32px;
			font-weight: 700;
			margin-bottom: 15px;
		}

		.popup-left p {
			line-height: 1.5;
			margin-bottom: 25px;
		}

		.contact-animate-box {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-top: 25px;
			font-size: 18px;
			font-weight: 600;
			color: #fff;
			animation: fadeBounce 2s infinite ease-in-out;
		}

		.contact-animate-icon {
			font-size: 140px;
			animation: ring 1.3s infinite;
		}

		@keyframes fadeBounce {

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

			50% {
				transform: translateY(-6px);
				opacity: 0.8;
			}
		}

		@keyframes ring {
			0% {
				transform: rotate(0);
			}

			20% {
				transform: rotate(-15deg);
			}

			40% {
				transform: rotate(15deg);
			}

			60% {
				transform: rotate(-15deg);
			}

			80% {
				transform: rotate(15deg);
			}

			100% {
				transform: rotate(0);
			}
		}

		.contact-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 18px;
			color: #ffffff;
			font-weight: 600;
			border-radius: 40px;
			cursor: pointer;
			margin-bottom: 20px;
			transition: 0.3s;
		}

		.contact-badge:hover {
			transform: translateY(-3px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.contact-numbers p {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 18px;
			font-weight: 500;
			color: #ffffff;
			margin: 10px 0;
		}

		.flag-icon {
			width: 35px;
			height: 24px;
			object-fit: cover;
			border-radius: 3px;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		}

		.contact-numbers p:hover {
			transform: translateX(3px);
			transition: 0.3s ease;
			cursor: pointer;
		}

		.contact-icons {
			display: flex;
			gap: 12px;
			margin-top: 20px;
		}

		.icon-circle {
			width: 42px;
			height: 42px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(135deg, #0b3243, #172d9d);
			border-radius: 50%;
			color: #fff;
			font-size: 18px;
			text-decoration: none;
			transition: 0.3s ease;
		}

		.icon-circle:hover {
			transform: scale(1.15);
			background: linear-gradient(135deg, #172d9d, #094b68);
		}

		.popup-right {
			background: #fff;
			padding: 30px;
			border-radius: 15px;
		}

		.form-row {
			display: flex;
			gap: 15px;
			margin-bottom: 15px;
		}

		.form-group.full {
			grid-column: 1 / 3;
		}

		.popup-form input,
		.popup-form textarea {
			width: 100%;
			padding: 14px 18px;
			border-radius: 10px;
			border: 1px solid #ccc;
			font-size: 15px;
		}

		.popup-form textarea {
			min-height: 130px;
			resize: vertical;
		}

		.success-message {
			/* display: none; */
			/* background: #e5ffe9; */
			color: #0b7a1b;
			padding: 12px 18px;
			border-radius: 8px;
			margin-top: 12px;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			/* border-left: 4px solid #1f9d32; */
			/* opacity: 0; */
			transform: translateY(8px);
			transition: all 0.4s ease;
		}

		.success-message.show {
			display: block;
			opacity: 1;
			transform: translateY(0);
		}

		.success-message i {
			margin-right: 6px;
			font-size: 18px;
			color: #1f9d32;
		}

		.submit-btn {
			background: #0e1243;
			padding: 12px 20px;
			border-radius: 12px;
			border: none;
			cursor: pointer;
			color: #fff;
			font-size: 15px;
			margin-top: 10px;
			transition: all 0.3s ease;
		}

		.submit-btn:hover {
			background: #192cff;
			transform: translateY(-2px);
			box-shadow: 0 6px 18px rgba(21, 29, 114, 0.35);
		}

		.close-popup {
			position: absolute;
			right: 40px;
			top: 40px;
			font-size: 28px;
			color: white;
			cursor: pointer;
		}

		/* ---------- TABLET (max-width: 992px) ---------- */
		@media (max-width: 992px) {
			.two-col-popup {
				/* display: flex; */
				flex-direction: column;
				width: 95%;
				padding: 25px;
				gap: 25px;
			}

			.popup-left h2 {
				font-size: 28px;
			}

			.popup-left p {
				font-size: 15px;
			}

			.contact-animate-icon {
				font-size: 110px;
			}

			.contact-animate-box {
				font-size: 16px;
				gap: 10px;
			}

			.popup-right {
				padding: 25px;
			}

			.form-row {
				/* flex-direction: column; */
				gap: 10px;
			}

			.close-popup {
				right: 30px;
				top: 30px;
				font-size: 30px;
			}

			.contact-numbers p {
				font-size: 16px;
			}

			.flag-icon {
				width: 30px;
				height: 20px;
			}

			.icon-circle {
				width: 38px;
				height: 38px;
				font-size: 17px;
			}

			.submit-btn {
				font-size: 14px;
				padding: 10px 18px;
			}
		}

		/* ---------- MOBILE (max-width: 576px) ---------- */
		@media (max-width: 576px) {
			.two-col-popup {
				display: flex;
				padding: 20px;
				border-radius: 14px;
				width: 95%;
				gap: 18px;
			}

			/* .popup-left{
	padding: 55px;
  } */

			.popup-left h2 {
				font-size: 22px;
				margin-bottom: 12px;
			}

			.popup-left p {
				font-size: 14px;
				margin-bottom: 15px;
			}

			.contact-animate-icon {
				font-size: 85px;
			}

			.contact-animate-box {
				font-size: 15px;
				gap: 10px;
			}

			.contact-numbers p {
				font-size: 14px;
				gap: 8px;
			}

			.flag-icon {
				width: 28px;
				height: 18px;
			}

			.icon-circle {
				width: 36px;
				height: 36px;
				font-size: 16px;
			}

			.popup-right {
				padding: 18px;
				border-radius: 12px;
			}

			.popup-form input,
			.popup-form textarea {
				padding: 12px 14px;
				font-size: 14px;
			}

			.submit-btn {
				padding: 10px 16px;
				font-size: 14px;
			}

			.close-popup {
				right: 22px;
				top: 40px;
				font-size: 26px;
			}
		}


		/* ---------- SMALL MOBILE (max-width: 480px) ---------- */
		@media (max-width: 480px) {
			.two-col-popup {
				padding: 18px;
				gap: 15px;
			}

			.popup-left h2 {
				font-size: 20px;
			}

			.popup-left p {
				font-size: 13px;
				margin-bottom: 12px;
			}

			.contact-animate-icon {
				font-size: 65px;
			}

			.contact-animate-box {
				font-size: 14px;
				gap: 8px;
			}

			.contact-numbers p {
				font-size: 13px;
				gap: 6px;
			}

			.flag-icon {
				width: 26px;
				height: 16px;
			}

			.icon-circle {
				width: 32px;
				height: 32px;
				font-size: 15px;
			}

			.popup-right {
				padding: 15px;
			}

			.popup-form input,
			.popup-form textarea {
				padding: 10px 12px;
				font-size: 13px;
			}

			.submit-btn {
				padding: 9px 14px;
				font-size: 13px;
			}

			.close-popup {
				right: 18px;
				top: 18px;
				font-size: 24px;
			}
		}

		/* ---------- VERY SMALL MOBILE (max-width: 400px) ---------- */
		@media (max-width: 400px) {
			.two-col-popup {
				padding: 15px;
				gap: 12px;
			}

			.popup-left h2 {
				font-size: 18px;
			}

			.popup-left p {
				font-size: 12px;
				margin-bottom: 10px;
			}

			.contact-animate-icon {
				font-size: 60px;
			}

			.contact-animate-box {
				font-size: 13px;
				gap: 6px;
			}

			.contact-numbers p {
				font-size: 12px;
				gap: 5px;
			}

			.flag-icon {
				width: 24px;
				height: 15px;
			}

			.icon-circle {
				width: 30px;
				height: 30px;
				font-size: 14px;
			}

			.popup-right {
				padding: 12px;
			}

			.popup-form input,
			.popup-form textarea {
				padding: 9px 11px;
				font-size: 12px;
			}

			.submit-btn {
				padding: 8px 12px;
				font-size: 12px;
			}

			.close-popup {
				right: 15px;
				top: 15px;
				font-size: 22px;
			}
		}


		/* ---------- VERY SMALL MOBILE (max-width: 380px) ---------- */
		@media (max-width: 380px) {
			.two-col-popup {
				display: flex;
				padding: 20px;
				border-radius: 14px;
				width: 95%;
				gap: 18px;
			}

			.popup-right {
				padding: 15px;
			}

			.form-row {
				margin-bottom: 0px;
			}

			.popup-left h2 {
				font-size: 20px;
			}

			.popup-form textarea {
				padding: 12px 14px;
				font-size: 14px;
			}

			.contact-animate-icon {
				font-size: 70px;
			}

			.icon-circle {
				width: 34px;
				height: 34px;
			}
		}

		/* ---------- EXTRA SMALL MOBILE (max-width: 375px) ---------- */
		@media (max-width: 375px) {
			.two-col-popup {
				padding: 12px;
				gap: 10px;
			}

			.popup-left h2 {
				font-size: 16px;
			}

			.popup-left p {
				font-size: 11px;
				margin-bottom: 8px;
			}

			.contact-animate-icon {
				font-size: 55px;
			}

			.contact-animate-box {
				font-size: 12px;
				gap: 5px;
			}

			.contact-numbers p {
				font-size: 11px;
				gap: 4px;
			}

			.flag-icon {
				width: 22px;
				height: 14px;
			}

			.icon-circle {
				width: 28px;
				height: 28px;
				font-size: 13px;
			}

			.popup-right {
				padding: 10px;
			}

			.popup-form input,
			.popup-form textarea {
				padding: 8px 10px;
				font-size: 11px;
			}

			.submit-btn {
				padding: 7px 10px;
				font-size: 11px;
			}

			.close-popup {
				right: 12px;
				top: 12px;
				font-size: 20px;
			}
		}




		.snap-section {
			min-height: 100vh;
		}
	





        /*************************about page *******************************/

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }

        .col-lg-6,
        .col-md-6,
        .col-xl-3,
        .col-sm-6,
        .col-12 {
            padding: 0 15px;
        }

        @media (min-width: 992px) {
            .col-lg-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media (min-width: 768px) {
            .col-md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media (min-width: 576px) {
            .col-sm-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media (min-width: 1200px) {
            .col-xl-3 {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }

        /* Section Styles */
        .section {
            padding: 60px 0;
        }

        .mb-60 {
            margin-bottom: 60px;
        }

        .mb-100 {
            /* background-image: url("./Image/mission-bg5.jpg"); */
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(25, 25, 50, 0.5) 100%), url("../img/about/choosebg2.jpg") center/cover no-repeat;
            ;
            /* margin-bottom: 100px; */
        }

        .mt-60 {
            margin-top: 60px;
        }

        /* Typography */
        h2 {
            /* text-align: center; */
               font-size: 1rem;
               font-weight: 400;
               margin-bottom: 20px;
        }

        h3 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        h5 {
            font-family: "DM Sans", sans-serif;
            text-align: center;
            font-size: 35px;
            margin-bottom: 10px;
        }

        /* p {
            font-family: "DM Sans", sans-serif;
            margin-bottom: 30px;
        } */

        .white-text {
            margin-left: -260px;
            left: 50px;
            /* margin-right: -28px; */
            font-size: 50px;
            color: #ffffff;
        }

        .white-text-1 {
            font-family: "DM Sans", sans-serif;
            opacity: 20%;
            margin-left: -260px;
            left: 50px;
            /* margin-right: -28px; */
            font-size: 50px;
            color: #ffffff;
        }

        .lightBlue {
            color: rgba(30, 144, 255, 1);


        }

        .yellowPurpelGradient {
            background: linear-gradient(90deg, #0EA5E9, #0012b1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .divider {
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #4a6bff, #8c52ff);
            margin: 0 auto 2rem;
            border-radius: 2px;
            animation: expandWidth 1.2s ease-out 0.6s both;
        }

        @keyframes expandWidth {
            from {
                width: 0;
            }

            to {
                width: 100px;
            }
        }

        /* Hero Section */
        .aboutpage-hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .aboutpage-hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .aboutpage-hero-bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../img/about/ab-bg.jpg');
            background-size: cover;
            background-position: center;
            filter: brightness(0.7);
            z-index: 1;
        }

        .aboutpage-network-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(25, 25, 50, 0.5) 100%);
            /* background-image: 
                radial-gradient(circle at 20% 50%, rgba(74, 107, 255, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 50%); */
            /* animation: pulse 8s infinite alternate; */
            z-index: 2;
        }

        /* @keyframes pulse {
            0% { opacity: 0.5; transform: scale(1); }
            100% { opacity: 0.8; transform: scale(1.05); }
        } */

        .aboutpage-hero-content {
            position: relative;
            z-index: 3;
            text-align: center;
            max-width: 800px;
            padding: 0 20px;
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .aboutpage-hero h1 {
            font-size: 3.5rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            background: white;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none;
        }

        .aboutpage-hero h2 {
            color: white;
        }

        .aboutpage-hero p {
            font-family: "DM Sans", sans-serif;
            font-size: 1.25rem;
            color: #ffffff;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }


		@media (min-width: 1600px) {
    .aboutpage-hero {
        height: 100vh;
    }

    .aboutpage-hero h1 {
        font-size: 3rem;
    }

    .aboutpage-hero p {
        font-size: 1.4rem;
    }
}



		@media (max-width: 1400px) {

			 .aboutpage-hero {
        height: 100vh;
    }

    .aboutpage-hero h1 {
        font-size: 3rem;
    }

    .aboutpage-hero p {
        font-size: 1.2rem;
    }
}


		@media (max-width: 1024px) {

			 .aboutpage-hero {
        height: 100vh;
    }

    h2 {
        font-size: 1.7rem;
    }

    .aboutpage-hero h1 {
        font-size: 3rem;
    }

    .white-text,
    .white-text-1 {
        margin-left: 0;
        text-align: center;
    }
}



		@media (max-width: 768px) {

		

    h2 {
        font-size: 1.6rem;
    }

    .white-text,
    .white-text-1 {
        margin-left: 0;
        font-size: 40px;
        text-align: center;
    }

    .aboutpage-hero {
        height: 100vh;
    }

    .aboutpage-hero h1 {
        font-size: 2.8rem;
    }

    .aboutpage-hero p {
        font-size: 1.1rem;
    }

    .section {
        padding: 40px 0;
    }
}



		@media (max-width: 576px) {


    h2 {
        font-size: 1.4rem;
    }

    h5 {
        font-size: 26px;
    }

    .white-text,
    .white-text-1 {
        margin-left: 0;
        font-size: 30px;
        text-align: center;
    }

    .aboutpage-hero {
        height: 100vh;
        padding: 20px;
    }

    .aboutpage-hero h1 {
        font-size: 2.2rem;
    }

    .aboutpage-hero p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .section {
        padding: 30px 0;
    }
}



@media (max-width: 400px) {


    /* Headings */
    h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    h5 {
        font-size: 22px;
    }

    /* White background large text */
    .white-text,
    .white-text-1 {
        margin-left: 0;
        font-size: 24px;
        text-align: center;
    }

    /* Section spacing */
    .section {
        padding: 20px 0;
    }

    /* Hero Section */
    .aboutpage-hero {
        height: 100vh;
        padding: 10px;
    }

    .aboutpage-hero h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .aboutpage-hero p {
        font-size: 0.9rem;
        max-width: 90%;
    }

    /* Reduce divider width */
    .divider {
        width: 60px;
    }

    /* Optional: reduce padding inside content areas */
    .content-wrapper
     {
        padding: 15px;
    }
}





/* === Base Styles (Desktop) === */
.container-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1590px;
    margin: 0 auto;
    padding: 80px 40px;
    align-items: center;
}

.left-section {
    position: relative;
}

.right-section {
    color: white;
    padding-left: 40px;
}

.about-tag {
    color: rgba(30, 144, 255, 1);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-tag::after {
    content: '';
    width: 60px;
    height: 2px;
    background: rgba(30, 144, 255, 1);
}

h1 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 30px;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.description {
    font-size: 22px;
    line-height: 1.8;
    color: #b9b8b8;
    margin-bottom: 50px;
}

.feature {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.feature-icon img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 24px;
}

.feature h3 {
    color: rgb(204 200 200);
    font-size: 1.5rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.feature p {
    font-size: 1.1rem;
    color: #b9b8b8;
    line-height: 1.7;
}

.cta-button {
	display: inline-block;
    position: absolute;
    overflow: hidden;
    font-size: 1.1rem;
    padding: 12px 28px;
    border-radius: 40px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--nxon-blue), var(--nxon-purple));
    animation: fadeInUp 1s ease 0.4s both;
    opacity: 0;
    transform: translateY(50px);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    cursor: pointer;
    transition: 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

.cta-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    transform: translateX(-100%);
    transition: 0.6s ease;
    z-index: 0;
}

.cta-button:hover::before {
    transform: translateX(0);
}

.cta-button::after {
    content: '→';
    font-size: 20px;
    margin-left: 8px;
}

/* Image Grid */
.image-grid {
    margin-bottom: 90px;
    position: relative;
    width: 100%;
    animation: floatGrid 4s ease-in-out infinite;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
}

.image-box {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-box:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-box:hover img {
    transform: scale(1.1);
}

.image-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.3), rgba(147, 51, 234, 0.3));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.image-box:hover::before {
    opacity: 1;
}

/* Decorative elements */
.star-decoration {
    position: absolute;
    color: #4169E1;
    font-size: 30px;
    z-index: 10;
    animation: twinkle 2s ease-in-out infinite;
}
/* Decorative elements */
        .star-decoration {
            position: absolute;
            color: #4169E1;
            font-size: 30px;
            z-index: 10;
            animation: twinkle 2s ease-in-out infinite;

        }

        @keyframes twinkle {

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

            50% {
                opacity: 0.4;
                transform: scale(0.8);
            }
        }

        .star-1 {
            bottom: 40px;
            left: -40px;
            animation-delay: 0s;

        }

        .star-2 {
            bottom: 10px;
            left: -20px;
            font-size: 20px;
            animation-delay: 0.5s;

        }

        .star-3 {
            bottom: -10px;
            left: -50px;
            font-size: 25px;
            animation-delay: 1s;

        }
/* Center badge */
.center-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #4169E1, #1e3a8a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 8px 25px rgba(65, 105, 225, 0.5);
    border: 4px solid white;
}

.center-badge::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.5);
    animation: rotateBadge 15s linear infinite;
}

.badge-icon {
    color: white;
    font-size: 32px;
    z-index: 1;
    animation: spin 3s ease-in-out infinite;
}


/*****************vision-mission-core*********************/
        .vmv-layout {
                max-width: 1617px;
            margin: auto;
            display: flex;
            align-items: center;
            gap: 40px;
            background: #040813;
            padding: 100px;
            color: #e6ecff;
        }

        /* BIG CIRCLE */
        .vmv-left-circle {
            position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        /* background: #1a2238; */
        background: linear-gradient(rgb(17 26 113 / 52%) 0%, rgb(79 79 79 / 71%) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 0 40px rgba(0, 132, 255, 0.25));
        }

        /* IMAGE INSIDE BIG CIRCLE */
        .vmv-left-circle img {
        width: 55%;          /* size control */
        height: 55%;
        object-fit: contain;
        
        
        }
        /* .vmv-left-circle {
        box-shadow: 0 0 0 6px rgba(77,163,255,0.15);
        } */


        /* CURVE */
        .vmv-curve-area {
            position: relative;
            width: 680px;
            height: 440px;
            left: 180px;
            bottom: 46px;
        }

        .vmv-curve-img {
        width: 528px;
            height: 513px;
            object-fit: contain;
        }

        /* DOTS */
        .vmv-curve-dot {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #4da3ff;
        border-radius: 50%;
        }

        .dot-vision  { top: 47px;
            left: 255px;}
        .dot-mission {    top: 58%;
            left: 363px; transform: translateY(-50%); }
        .dot-values  {         bottom: -28px;
            left: 270px; }

        /* CONTENT */
        .vmv-info {
            display: flex;
            flex-direction: column;
            gap: 120px;
        }

        .vmv-row {
            width: 700px;
        display: flex;
        align-items: center;
        gap: 18px;
        }
        .row-vision,
        .row-values{
            margin: auto -160px;
        }


        /* ICON */
        .vmv-icon {
        width: 94px;
        height: 94px;
        border-radius: 50%;
        background: #121a2e;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .vmv-icon img {
        width: 100px;
        }

        .vmv-icon.vision  { border: 3px solid #4da3ff; }
        .vmv-icon.mission { border: 3px solid #1932be;}
        .vmv-icon.values  { border: 3px solid #13267e; }

        /* TEXT */
        .vmv-text h4 {
        margin-bottom: 6px;
        font-size: 1.5rem;
        color: #fff;
        }

        .vmv-text p {
            color: #b9b8b8;
        font-size: 1.2rem;
        line-height: 1.6;
        max-width: 420px;
        }


        @media (max-width: 1024px){

        .vmv-layout{
            padding: 80px 40px;
            gap: 30px;
        }

        .vmv-left-circle{
            width: 380px;
            height: 380px;
        }

        .vmv-curve-area{
            width: 560px;
            height: 380px;
            left: 120px;
            bottom: 30px;
        }

        .vmv-curve-img{
            width: 440px;
            height: auto;
        }

        .vmv-info{
            gap: 90px;
        }

        .vmv-row{
            width: 620px;
        }

        .vmv-text h4{
            font-size: 1.35rem;
        }

        .vmv-text p{
            font-size: 1.05rem;
        }
        }
        @media (max-width: 768px){

        .vmv-layout{
            flex-direction: column;
            padding: 80px 24px;
            gap: 80px;
            position: relative;
        }

        /* Hide curve on tablet */
        .vmv-curve-area{
            display: none;
        }

        .vmv-left-circle{
            display: none;
            position: relative;
            width: 320px;
            height: 320px;
        }

        .vmv-info{
            gap: 50px;
        }

        .vmv-row{
            width: 100%;
            max-width: 600px;
            margin: auto;
        }

        .row-vision,
        .row-values{
            margin: 0;
        }
        }
        @media (max-width: 640px){

        .vmv-layout{
            padding: 70px 14px;
            gap: 60px;
        }

        .vmv-left-circle{
            width: 260px;
            height: 260px;
        }

        .vmv-left-circle img{
            width: 60%;
            height: 60%;
        }

        .vmv-row{
            flex-direction: column;
            text-align: center;
            gap: 12px;
        }

        .vmv-icon{
            width: 64px;
            height: 64px;
        }

        .vmv-icon img{
            width: 56px;
        }

        .vmv-text h4{
            font-size: 1.2rem;
        }

        .vmv-text p{
            font-size: 0.95rem;
            line-height: 1.5;
            max-width: 100%;
        }
        }


            .core-values-split {
        background: #040813;
        padding: 120px 40px;
        color: #e6ecff;
        }

        .core-values-wrap {
        max-width: 1500px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        /* gap: 80px; */
        align-items: center;
        }

        /* LEFT */
        .core-values-left h2 {
            font-weight: 500;
        font-size: 3rem;
        margin-bottom: 20px;
        line-height: 1.2;
        }

        .core-values-left h2 span {
        color: #4da3ff;
        }

        .core-values-left p {
        font-size: 1.2rem;
            line-height: 1.7;
            color: #b9b8b8;
            max-width: 420px;
        }

        /* RIGHT GRID */
        .core-values-right {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        }

        /* CARD */
        .core-card {
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
        /* background: rgba(255,255,255,0.04);
        backdrop-filter: blur(6px); */
        padding: 30px;
        border-radius: 18px;
        /* box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06),
                    0 20px 40px rgba(0,0,0,0.4); */
                    opacity: 0;
        transform: translateY(40px);
        }

        .core-card:hover {
        transform: translateY(-6px);
        }

        /* ICON */
        .core-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        /* background: #0f1b3a; */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        }

        .core-icon img {
        width: 85%;
        }

        /* TEXT */
        .core-card h4 {
        margin-bottom: 8px;
        font-size: 1.5rem;
        }

        .core-card p {
        font-size: 1.2rem;
        line-height: 1.6;
        color: #b9b8b8;
        }

        /* RESPONSIVE */
        @media (max-width: 1024px){

        .core-values-split{
            padding: 100px 30px;
        }

        .core-values-left h2{
            font-size: 2.5rem;
        }

        .core-values-left p{
            font-size: 1.1rem;
        }

        .core-values-wrap{
            grid-template-columns: 1fr 1.2fr;
            gap: 40px;
        }

        .core-card{
            padding: 26px;
        }

        .core-card h4{
            font-size: 1.35rem;
        }

        .core-card p{
            font-size: 1.05rem;
        }
        }
        @media (max-width: 768px){

        .core-values-split{
            padding: 80px 24px;
        }

        .core-values-wrap{
            grid-template-columns: 1fr;
            gap: 60px;
        }

        .core-values-left{
            text-align: center;
        }

        .core-values-left p{
            margin: auto;
        }

        .core-values-right{
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        .core-card{
            transform: none;
            opacity: 1;
        }
        }
        @media (max-width: 640px){

        .core-values-split{
            padding: 70px 14px;
        }

        .core-values-left h2{
            font-size: 1.9rem;
            line-height: 1.3;
        }

        .core-values-left p{
            font-size: 0.95rem;
        }

        .core-values-right{
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .core-card{
            padding: 22px;
        }

        .core-card h4{
            font-size: 1.2rem;
        }

        .core-card p{
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .core-icon{
            width: 48px;
            height: 48px;
        }
        }




       

@media (max-width: 1024px) {

    /* ABOUT MAIN GRID */
    .container-2 {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 60px 20px;
        gap: 40px;
    }

    .right-section {
        padding-left: 0;
    }

    h1 {
        font-size: 2.4rem;
    }

    .description {
        font-size: 18px;
    }

    /* FEATURES */
    .feature {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon img {
        margin: 0 auto;
    }

    /* IMAGE GRID */
    .image-grid {
        max-width: 420px;
        margin: 0 auto 60px;
    }

    .grid-container {
        gap: 15px;
    }

    .image-box {
        border-radius: 25px;
    }

	 .about-tag {
        font-size: 12px;
        letter-spacing: 1.5px;
        justify-content: center;
        margin-bottom: 18px;
    }

    .about-tag::after {
        width: 45px;
    }

	.cta-button {
        font-size: 1rem;
        padding: 10px 24px;
        border-radius: 35px;
    }

    .cta-button::after {
        font-size: 18px;
        margin-left: 6px;
    }

   
}






@media (max-width: 768px) {
    .center-badge {
        width: 50px;
        height: 50px;
    }
    .right-section h1{
        font-size: 1.8rem;
        font-weight: 500;
    }

    
    
}














/*********************why choose us *************************/


        .container-why {

            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .homeContentWrapper {
            text-align: center;
            margin-bottom: 100px;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        .sub-title {
            font-size: 13px;
            color: #4a6cf7;
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

		

        .h2-why {
            font-size: 3rem;
            font-weight: 500;
            color: #ffffff;
            max-width: 1140px;
            margin: 0 auto;
            line-height: 1.3;

        }

        .descr {
            color: rgb(185, 184, 184);
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 20px;
        }

        .circular-layout {
            position: relative;
            width: 800px;
            height: 640px;
            margin: 0 auto;
            opacity: 0;
            animation: fadeIn 1s ease 0.6s forwards;
        }

        .central-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background: rgb(17, 9, 110);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.5rem;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(74, 108, 247, 0.3);
            z-index: 10;
            animation: pulse 2s infinite alternate;
            text-align: center;
            padding: 20px;
        }

        .crm-module {
            /* backdrop-filter: blur(15px); */
            background: linear-gradient(rgb(17 26 113 / 52%) 0%, rgb(79 79 79 / 71%) 100%);
            position: absolute;
            width: 160px;
            height: 160px;
            /* background: #ffffff33; */
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            transition: all 0.3s ease;
            opacity: 0;
            animation: fadeInScale 0.8s ease forwards;
            cursor: pointer;
        }

        .crm-module:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .crm-module .icon {
            margin-top: 20px;

            font-size: 2rem;
            color: #4a6cf7;
            margin-bottom: -5px;
        }

        .crm-module .title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #fdfdfd;
            margin-bottom: 8px;
            text-align: center;
        }



        /* Positioning modules in a circle */
        .module-1 {
            padding: 20px;
            width: 400px;
            top: -15px;
            left: 61%;
            transform: translateX(-50%);
            animation-delay: 0.8s;
        }


        .module-2 {
            width: 400px;
            top: 37%;
            right: -230px;
            animation-delay: 1.0s;
        }

        .module-3 {
            width: 400px;
            bottom: -6%;
            right: -67px;
            animation-delay: 1.2s;
        }

        .module-4 {
            width: 400px;
            bottom: -34px;
            left: -6%;
            transform: translateX(-50%);
            animation-delay: 1.4s;
        }

        .module-5 {
            width: 400px;
            bottom: 36%;
            left: -230px;
            animation-delay: 1.6s;
        }

        .module-6 {
            width: 400px;
            top: -2%;
            left: -79px;
            animation-delay: 1.8s;
        }

        /* Connecting lines */
        .connector {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            border: 2px dashed rgb(255 255 255 / 50%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse {
            from {
                box-shadow: 0 10px 30px rgba(74, 108, 247, 0.3);
            }

            to {
                box-shadow: 0 15px 40px rgba(74, 108, 247, 0.5);
            }
        }

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


	 .h2-why {
        font-size: 2.3rem;
        line-height: 1.3;
    }

    .sub-title {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .descr {
        font-size: 0.9rem;
        max-width: 600px;
        margin: 0 auto 20px;
    }

    .homeContentWrapper {
        margin-bottom: 60px;
    }

    .circular-layout {
        width: 100%;
        height: auto;
        padding-top: 150px;
    }

    .central-circle {
        width: 160px;
        height: 160px;
        font-size: 1.2rem;
        padding: 15px;
    }

    .crm-module {
        width: 220px !important;
        height: auto;
        padding: 15px;
    }

    /* Re-position modules for tablet */
     /* 2 Column Effect (3 modules left + 3 right) */
    .module-1 { top: 0%; left: 50%; transform: translateX(-50%); }
    .module-2 { top: 25%; right: 10%; left: auto; }
    .module-3 { top: 55%; right: 10%; }
    .module-4 { top: 80%; left: 50%; transform: translateX(-50%); }
    .module-5 { top: 55%; left: 10%; }
    .module-6 { top: 25%; left: 10%; }

    .crm-module {
        width: 230px !important;
        height: auto;
    }



    .connector {
        width: 240px;
        height: 240px;
    }
}

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


	 .h2-why {
        font-size: 1.8rem;
        padding: 0 10px;
    }

    .sub-title {
		/* margin-top: 890px; */
        font-size: 11px;
    }

    .descr {
        font-size: 0.85rem;
        padding: 0 15px;
    }

    .homeContentWrapper {
        margin-bottom: 40px;
    }

    .circular-layout {
        height: auto;
        padding-top: 0px;
    }

    .central-circle {
		        display: none;
        width: 140px;
        height: 140px;
        font-size: 1rem;
        padding: 10px;
    }

    /* Convert all modules into vertical layout */
    .crm-module {
        position: relative;
        width: 100% !important;
        max-width: 330px;
        margin: 20px auto;
        left: 0 !important;
        right: 0 !important;
        top: unset !important;
        bottom: unset !important;
        transform: none !important;
    }

	  /* Remove all absolute positions */
    .module-1, .module-2, .module-3,
    .module-4, .module-5, .module-6 {
        position: relative !important;
    }

    .connector {
        display: none; /* dotted circle hide on mobile */
    }

}

/* ======== VERY SMALL MOBILE (max-width: 480px) ======== */
@media (max-width: 480px) {

	 .h2-why {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .sub-title {
		        margin-top: 5px;
        font-size: 10px;
    }

    .descr {
        font-size: 0.8rem;
    }

    .central-circle {
		        display: none;
        width: 120px;
        height: 120px;
        font-size: 0.9rem;
    }

    .homeContentWrapper h2 {
        font-size: 1.8rem;
    }
}



        /* Tablet styles (768px and up) */
        /* @media (min-width: 768px) {
  .section-padding-small {
    padding: 60px 0;
  }
  
  .mb-100 {
    margin-bottom: 80px;
  }
  
  .h2-why {
    font-size: 28px;
  }
  
  .circular-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 77px;
    min-height: auto;
  }
  .central-circle {
    display: none;
  }
  .connector {
    display: none;
  }

  .crm-module {
    margin-bottom: 0;
  }
} */

        /* Desktop styles (1024px and up) */
        /* @media (min-width: 1024px) {
  .section-padding-small {
    padding: 80px 0;
  }
  
  .mb-100 {
    margin-bottom: 100px;
  }
  
  .h2-why {
    font-size: 32px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .circular-layout {
    display: block;
    position: relative;
    max-width: 800px;
    min-height: 600px;
  }
  
  .connector {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    border: 2px dashed rgba(74, 108, 247, 0.3);
    border-radius: 50%;
    z-index: 1;
  }
  
  .central-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: #4a6cf7;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3);
  }
  
  .crm-module {
    position: absolute;
    width: 180px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    z-index: 5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .crm-module:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  } */

        /* Position modules in a circle */
        /* .module-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .module-2 {
    top: 25%;
    right: 0;
    transform: translateY(-50%);
  }
  
  .module-3 {
    bottom: 25%;
    right: 0;
    transform: translateY(50%);
  }
  
  .module-4 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .module-5 {
    bottom: 25%;
    left: 0;
    transform: translateY(50%);
  }
  
  .module-6 {
    top: 25%;
    left: 0;
    transform: translateY(-50%);
  }
  
  .crm-module .icon {
    font-size: 36px;
  }
  
  .crm-module .title {
    font-size: 16px;
  }
  
  .crm-module .descr {
    font-size: 13px;
  }
} */

        /* Large desktop styles (1200px and up) */
        /* @media (min-width: 1200px) {
  .circular-layout {
    max-width: 900px;
    min-height: 700px;
  }
  
  .connector {
    width: 550px;
    height: 550px;
  }
  
  .central-circle {
    width: 180px;
    height: 180px;
    font-size: 20px;
  }
  
  .crm-module {
    width: 200px;
  }
  
  .crm-module .icon {
    font-size: 40px;
  }
  
  .crm-module .title {
    font-size: 18px;
  }
  
  .crm-module .descr {
    font-size: 14px;
  }
} */









        /* @keyframes spin {

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

            50% {
                transform: rotate(180deg);
            }
        } */



/**********************cradibility*************************/

		   /* ===== MAIN SECTION ===== */
        .new-stats-section {
            padding: 120px 40px;
            max-width: 1800px;
            margin: auto;
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            align-items: center;
            gap: 40px;
        }

        /* LEFT CONTENT */
        .stats-left h4 {
            display: inline-block;
            padding: 8px 10px;
            /* border: 1px solid #ff6a00; */
            color: #4a6cf7;
            letter-spacing: 2px;
            border-radius: 25px;
            font-size: 12px;
            margin-bottom: 20px;
        }

        .stats-left h1 {
            font-size: 3rem;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .stats-left p {
            font-size: 17px;
            line-height: 1.8;
            color: #cbd5e1;
            max-width: 650px;
        }

        /* RIGHT PRICE CARDS (looks same as screenshot) */
        .stats-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        .price-box {
            background: linear-gradient(145deg, rgb(27 46 117 / 80%), rgba(15, 10, 6, 0.9));
            border-radius: 20px;
            padding: 50px 20px;
            text-align: center;
            backdrop-filter: blur(5px);
            /* border: 1px solid rgba(255, 255, 255, 0.05); */
            transition: 0.3s ease-in-out;
            cursor: pointer;
        }

        .price-box:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .price-box h2 {
            color: #04abff;
            font-size: 45px;
            margin: 0 0 10px 0;
        }

        .price-box span {
            font-size: 1.1rem;
            color: #fff;
        }

        .price-box small {
            display: block;
            margin-top: 6px;
            font-size: 0.9rem;
                color: #b9b8b8;
            font-weight: 400;
        }


        /* Make the top card bigger like screenshot */
        .price-box.large {
            margin-left: 210px;
            align-content: center;
            justify-content: center;
            align-items: center;
            width: 300px;
            /* height: 206px; */
            grid-column: span 2;
            padding: 60px 20px;
        }


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

        /* --- Large Laptops (max-width: 1280px) --- */
        @media (max-width: 1280px) {
            .new-stats-section {
                padding: 100px 30px;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

            .stats-left h1 {
                font-size: 48px;
            }

            .price-box.large {
                margin-left: 140px;
                width: 220px;
            }
        }

        /* --- Tablets (max-width: 1024px) --- */
        @media (max-width: 1024px) {
            .new-stats-section {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .stats-left p {
                margin: auto;
            }

            .stats-right {
                justify-content: center;
                max-width: 420px;
                margin: 40px auto 0;
            }

            .price-box.large {
                margin-left: 0;
                width: 100%;
                grid-column: span 2;
            }

            .stats-left h1 {
                font-size: 44px;
            }
        }

        /* --- Medium Tablets (max-width: 768px) --- */
        @media (max-width: 768px) {
            .new-stats-section {
                padding: 80px 20px;
            }

            .stats-left h1 {
                font-size: 38px;
            }

            .price-box {
                padding: 35px 20px;
            }

            .price-box h2 {
                font-size: 38px;
            }
        }

        /* --- Mobile Devices (max-width: 600px) --- */
        @media (max-width: 600px) {
            .stats-right {
                grid-template-columns: 1fr;
                gap: 18px;
                max-width: 100%;
            }

            .price-box,
            .price-box.large {
                width: 100%;
                margin-left: 0;
                grid-column: span 1;
            }

            .stats-left h1 {
                font-size: 32px;
            }

            .stats-left p {
                font-size: 16px;
                line-height: 1.7;
            }
        }

        /* --- Small Phones (max-width: 400px) --- */
        @media (max-width: 400px) {
            .stats-left h1 {
                font-size: 28px;
            }

            .stats-left h4 {
                font-size: 10px;
                padding: 6px 14px;
            }

            .price-box h2 {
                font-size: 32px;
            }

            .price-box {
                padding: 30px 15px;
            }
        }

        .company-gallery-section {
        background: #040813;
        padding: 120px 40px;
        color: #e6ecff;
        }





        .company-gallery-header{
                margin: auto;
            text-align: center;
            justify-content: center;
            align-items: center;
            /* align-content: stretch; */
            display: flex;
            flex-direction: column;
        }

        /* LEFT CONTENT */
        .company-gallery-header span {
                font-size: 12px;
        color: #4a6cf7;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        }

        .company-gallery-header h2 {
            color: #fff;
        font-size: 3rem;
        margin: 15px 0;
        }

        .company-gallery-header p {
            margin-bottom: 50px;
            font-size: 1.2rem;
        max-width: 420px;
        line-height: 1.7;
        color: #b9b8b8;
        }
        /* SLIDER */
        .gallery-slider {
        overflow: hidden;
        width: 100%;
        }

        .gallery-track {
        display: flex;
        gap: 24px;
        width: max-content;
        animation: galleryScroll 35s linear infinite;
        }

        /* SLIDE */
        .gallery-slide {
            width: 550px;
            height: 525px;
        flex-shrink: 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.45);
        }

        .gallery-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
        }

        /* ZOOM IN */
        .gallery-slide:hover img {
        transform: scale(1.15);
        }

        /* CONTINUOUS MOVE */
        @keyframes galleryScroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
        }

        /* PAUSE ON HOVER (OPTIONAL) */
        .gallery-slider:hover .gallery-track {
        animation-play-state: paused;
        }


        @media (max-width: 1024px){

        .company-gallery-section{
            padding: 100px 30px;
        }

        .company-gallery-header h2{
            font-size: 2.5rem;
        }

        .company-gallery-header p{
            font-size: 1.1rem;
            margin-bottom: 40px;
        }

        .gallery-slide{
            width: 460px;
            height: 440px;
        }

        .gallery-track{
            gap: 20px;
        }
        }
        @media (max-width: 768px){

        .company-gallery-section{
            padding: 80px 20px;
        }

        .company-gallery-header h2{
            font-size: 2.2rem;
        }

        .company-gallery-header p{
            font-size: 1rem;
            max-width: 520px;
        }

        .gallery-slide{
            width: 380px;
            height: 360px;
        }

        .gallery-track{
            gap: 18px;
            animation-duration: 45s; /* slower on tablet */
        }

        /* Disable hover zoom (touch devices) */
        .gallery-slide:hover img{
            transform: none;
        }
        }
        @media (max-width: 640px){

        .company-gallery-section{
            padding: 70px 14px;
        }

        .company-gallery-header h2{
            font-size: 1.9rem;
        }

        .company-gallery-header p{
            font-size: 0.95rem;
            margin-bottom: 30px;
        }

        .gallery-slide{
            width: 280px;
            height: 260px;
            border-radius: 14px;
        }

        .gallery-track{
            gap: 14px;
            animation-duration: 55s; /* slowest for readability */
        }
        }



		/***************************team section**********************/

        .section-team {
            background-image: url("../img/about/team-bg7.jpg");
            background-size: cover;
            /* 🔹 makes image cover the whole area */
            background-position: center;
            /*   🔹 keeps image centered */
            background-repeat: no-repeat;
            /* 🔹 prevents image from repeating */
            background-color: var(--nxon-darker);
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }


        .container-team {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .homeContentWrapper {
            text-align: center;
            margin-bottom: 60px;
        }

        .team-h2 {
            font-size: 2.5rem;
            font-weight: 500;
            margin-bottom: 15px;
            color: #fff;
        }

        .yellowPurpelGradient {
            background: linear-gradient(90deg, #0EA5E9, #0012b1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline;
        }

        .team-subtitle {
            font-size: 1.2rem;
            color: #b8b9c0;
            max-width: 600px;
            margin: 0 auto;
        }

        .team-grid {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .team-row-top {
            display: flex;
            gap: 30px;
            justify-content: space-between;
        }

        .team-row-bottom {
            display: flex;
            justify-content: center;
        }

        .team-member {
            /* background: rgba(255, 255, 255, 0.1); */

            /* background-color: #1e1e1e; */
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); */
            display: flex;
            align-items: center;
            padding: 20px;
            width: 100%;
        }

        .team-member:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .team-row-top .team-member {
            flex: 1;
            max-width: 48%;
        }

        .team-row-bottom .team-member {
            max-width: 600px;
        }

        .member-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            margin-right: 25px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            /* border: 3px solid #333; */
        }

        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

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

        .member-details {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .member-info {
            margin-bottom: 15px;
        }

        .member-name {
            font-size: 1.6rem;
            font-weight: 500;
            margin-bottom: 5px;
            color: #ffffff;
            display: flex;
            align-items: center;
        }

        .member-position {
            font-size: 1.1rem;
            color: #0EA5E9;
            font-weight: 500;
        }

        .member-bio {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #e0e0e0;
            margin-bottom: 15px;
        }

        .member-bio p {
            margin-bottom: 10px;
        }

        .member-bio p:last-child {
            margin-bottom: 0;
        }

        .member-social {
            display: flex;
            gap: 15px;
        }

        .member-social a {
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            transition: all 0.3s ease;
        }

        .member-social a:hover {
            background-color: #0EA5E9;
            color: #121212;
            transform: translateY(-3px);
        }

        .member-social i {
            font-size: 1rem;
        }



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

        .section-team {
            padding: 80px 0;
            background-position: center;
        }

        .team-h2 {
            font-size: 2rem;
        }

        .team-subtitle {
            font-size: 1rem;
            max-width: 500px;
        }

        .team-row-top {
            flex-direction: column;
            gap: 25px;
        }

        .team-row-top .team-member {
            max-width: 100%;
        }

        .team-row-bottom .team-member {
            max-width: 100%;
        }

        .team-member {
            padding: 18px;
            flex-direction: row;
        }

        .member-image {
            width: 110px;
            height: 110px;
        }

        .member-name {
            font-size: 1.4rem;
        }

        .member-position {
            font-size: 1rem;
        }
    }


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

        .section-team {
            padding: 70px 0;
        }

        .team-h2 {
            font-size: 1.8rem;
        }

        .team-subtitle {
            font-size: 0.95rem;
            padding: 0 15px;
        }

        .team-member {
            flex-direction: column;
            text-align: center;
            padding: 20px;
        }

        .member-image {
            margin: 0 auto 20px auto;
            width: 100px;
            height: 100px;
        }

        .member-details {
            align-items: center;
        }

        .member-name {
            font-size: 1.3rem;
        }

        .member-bio {
            font-size: 0.9rem;
            padding: 0 10px;
        }

        .member-social {
            justify-content: center;
        }
    }


    /* ============ VERY SMALL MOBILE (max-width: 480px) ============ */
    @media (max-width: 480px) {

        .section-team {
            padding: 60px 0;
        }

        .team-h2 {
            font-size: 1.6rem;
        }

        .team-subtitle {
            font-size: 0.9rem;
        }

        .team-member {
            padding: 15px;
        }

        .member-image {
            width: 90px;
            height: 90px;
        }

        .member-name {
            font-size: 1.2rem;
        }

        .member-position {
            font-size: 0.95rem;
        }

        .member-bio {
            font-size: 0.85rem;
        }
    }



/*********************bodycam***************************/
   .bodycamera-hero-pro {
            background: url('../img/solutions/bodycam/bodyhero2.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }
         .wificamera-hero-pro {
            background: url('../img/solutions/wificam/wifihero.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }
   

        .security-hero-pro {
         background: url('../img/industry/smartsurveillance.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }

        .cities-hero-pro {
         background: linear-gradient(
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15)
        ),url('../img/industry/smartcitieshero.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }
        .manufacturing-hero-pro {
         background:  linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        ),url('../img/industry/manufacturinghero1.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }

        



        .body-img1 {
            background-image: url(../img/solutions/bodycam/bodycamhardware.webp);
        }

        .body-img2 {
            background-image: url(../img/solutions/bodycam/ISPTuning.webp);
        }

        .body-img3 {
            background-image: url(../img/solutions/bodycam/cameralensbodycam.webp);
        }

        .body-img4 {
            background-image: url(../img/solutions/bodycam/embeddedfirmwarebody.webp);
        }

        .body-img5 {
            background-image: url(../img/solutions/bodycam/audiobodycamera.webp);
        }

        .body-img6 {
            background-image: url(../img/solutions/bodycam/videoencoding.webp);
        }

        .body-img7 {
            background-image: url(../img/solutions/bodycam/aicamerabodycam.webp);
        }
		.body-img8 {
            background-image: url(../img/solutions/bodycam/ruggedbodycamera.webp);
        }




            .iqae-layout {
        padding: 120px 6%;
        background: radial-gradient(circle at top, #0b1220, #05070c);
        color: #fff;
        }

        .iqae-title {
        text-align: center;
        font-size: 3rem;
        margin-bottom: 10px;
        }
        .iqae-title span{
            color: #3b82f6;
        }

        .iqae-subtitle {
        text-align: center;
        opacity: 0.7;
        margin-bottom: 80px;
        font-size: 1.2rem;
        }

        .iqae-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 260px;
        gap: 32px;
        }

        /* Card base */
        .iqae-card {
        position: relative;
        border-radius: 18px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        }

        .iqae-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(5,7,12,0.15), rgba(5,7,12,0.85));
        }

        .iqae-overlay {
        position: relative;
        z-index: 2;
        padding: 28px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        }

        /* Shapes */
        .iqae-card.square {
        grid-row: span 1;
        }

        .iqae-card.rect {
        grid-row: span 1;
        }

        .iqae-card.wide {
        grid-column: span 2;
        }

        /* Responsive */
        @media (max-width: 900px) {
        .iqae-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 280px;
        }
        .iqae-card.wide {
            grid-column: span 1;
        }
        }


        .tech3-grid-section {
        padding: 120px 6%;
        background: #05070c;
        }

        .tech3-grid-3x3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: repeat(3, 280px); */
        gap: 28px;
        }

        .tech3-card {
            background-size: clamp(70%, 80vw, 95%);
            height: 500px;
        position: relative;
        border-radius: 22px;
        /* background-size: contain; */
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        }

        .tech3-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.85));
        }

        .tech3-overlay {
        position: absolute;
        bottom: 0;
        padding: 28px;
        color: #fff;
        z-index: 2;
        }

        /* Manual placements */
        .c1r1 { grid-column: 1/3; grid-row: 1; }
        .c3r1 { grid-column: 3; grid-row: 1; }

        .c1r2wide { grid-column: 1 / span 3; grid-row: 2; }

        .c1r3 { grid-column: 1; grid-row: 3; }
        .c2r3 { grid-column: 4/2; grid-row: 3; }

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

            .iqae-title {
            font-size: 2.4rem;
        }

        .iqae-subtitle {
            font-size: 1.1rem;
            margin-bottom: 60px;
        }
        .tech3-grid-3x3 {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 420px;
        }

        .c1r1 { grid-column: 1 / span 2; grid-row: auto; }
        .c3r1 { grid-column: 1 / span 2; grid-row: auto; }

        .c1r2wide { grid-column: 1 / span 2; }

        .c1r3, .c2r3 {
            grid-column: 1 / span 2;
        }
        }


        @media (max-width: 768px) {
        .tech3-grid-section {
            padding: 90px 5%;
        }

        .tech3-grid-3x3 {
            grid-template-columns: 1fr;
            grid-auto-rows: 380px;
            gap: 24px;
        }

        .tech3-card {
            border-radius: 18px;
        }

        .tech3-overlay {
            padding: 24px;
        }

        /* Reset all manual placements */
        .c1r1,
        .c3r1,
        .c1r2wide,
        .c1r3,
        .c2r3 {
            grid-column: 1 !important;
            grid-row: auto !important;
        }
        }



        @media (max-width: 640px) {

            .iqae-title {
            font-size: 1.8rem;
            line-height: 1.2;
        }

        .iqae-subtitle {
            font-size: 0.95rem;
            margin-bottom: 40px;
        }
        .tech3-grid-section {
            padding: 80px 5%;
        }

        .tech3-grid-3x3 {
            grid-template-columns: 1fr;
            grid-auto-rows: 360px;
            gap: 22px;
        }

        .tech3-card {
            border-radius: 18px;
        }

        .tech3-overlay {
            padding: 22px;
        }

        .c1r1, .c3r1, .c1r2wide, .c1r3, .c2r3 {
            grid-column: 1;
            grid-row: auto;
        }
        }



        .hr-showcase {
        padding: 120px 8%;
        background: radial-gradient(circle at top, #0b1220, #05070c);
        color: #fff;
        }

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

        .ip-hr-container {
        display: grid;
        grid-template-columns: 1fr 2fr ;
        gap: 80px;
        align-items: center;
        }

        .hr-left h2 {
        font-size: 3rem;
        margin: 12px 0;
        }

        .hr-left p {
        opacity: 0.8;
        line-height: 1.6;
        margin-bottom: 28px;
        }

        .hr-left span{
            color: #3b82f6;
        }




        .hr-btn {
        padding: 14px 28px;
        border-radius: 999px;
        background: linear-gradient(135deg, #2563eb, #3b82f6);
        color: #fff;
        text-decoration: none;
        display: inline-block;
        }

        .hr-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 375px;
        gap: 22px;
        }

        .hr-card {
        border-radius: 20px;
        background-size: cover;
        background-position: center;
        padding: 20px;
        display: flex;
        align-items: flex-end;
        position: relative;
        overflow: hidden;
        }
        .hr-card-content{
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .hr-card h4 {
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 6px;
        line-height: 1.3;
        }

        .hr-card p {
            color: #f5f5f7;
        font-size: 0.9rem;
        opacity: 0.8;
        line-height: 1.4;
        margin: 0;
        }


        .hr-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));

        }

        .hr-card.wide {
        grid-column: span 2;
        }

        /* Example backgrounds */
        .c1 { background-image: url("../img/solutions/bodycam/lowlightbodycamera.webp"); }
        .c2 { background-image: url("../img/solutions/bodycam/widedynamicbodycamera.webp"); }
        .c3 { background-image: url("../img/solutions/bodycam/multimicrophone.webp"); }
        .c4 { background-image: url("../img/solutions/bodycam/clearmotionbodycamera1.webp"); }
        .c5 { background-image: url("../img/solutions/bodycam/VideoSynchronization1.jpg"); }

        /* Responsive */
        /* =========================
        1024px — Tablets / Small laptops
        ========================= */
        @media (max-width: 1024px) {

            .hr-left h2 {
            font-size: 2.5rem;
        }

        .hr-left p {
            font-size: 1rem;
        }

        .hr-showcase {
            padding: 100px 6%;
        }

        .hr-container {
            grid-template-columns: 1.2fr 1fr;
            gap: 48px;
        }

        .hr-left h2 {
            font-size: 2.4rem;
        }

        .hr-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 320px;
            gap: 18px;
        }

        .hr-card.wide {
            grid-column: span 2;
        }
        }


        /* =========================
        768px — Tablets / Large phones landscape
        ========================= */
        @media (max-width: 768px) {
        .hr-container {
            display: flex;
            flex-direction: column;
        }

        .hr-left {
            order: 1;
        }

        .hr-grid {
            order: 2;
        }

            .hr-left h2 {
            font-size: 2.1rem;
        }

        .hr-left p {
            font-size: 0.95rem;
        }

        .hr-showcase {
            padding: 90px 6%;
        }

        .hr-container {
            grid-template-columns: 1fr;
            gap: 56px;
        }

        .hr-left {
            text-align: center;
        }

        .hr-left p {
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }

        .hr-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 280px;
        }

        .hr-card.wide {
            grid-column: span 2;
        }
        }


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


        .hr-container {
            display: flex;
            flex-direction: column;
        }

        .hr-left {
            order: 1;
        }

        .hr-grid {
            order: 2;
        }

            .hr-left h2 {
            font-size: 1.8rem;
            line-height: 1.2;
        }

        .hr-left p {
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .hr-showcase {
            padding: 70px 5%;
        }

        .hr-left h2 {
            font-size: 2rem;
        }

        .hr-left p {
            font-size: 0.95rem;
        }

        .hr-btn {
            padding: 12px 22px;
            font-size: 0.9rem;
        }

        .hr-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 260px;
            gap: 16px;
        }

        .hr-card.wide {
            grid-column: span 1;
        }

        .hr-card h4 {
            font-size: 1.05rem;
        }

        .hr-card p {
            font-size: 0.85rem;
        }
        }





        .sketch-section {
        padding: 120px 11%;
        background: #05070c;
        color: #fff;
        }

        .sketch-title {
        text-align: center;
        font-size: 3rem;
        margin-bottom: 10px;
        }

        .sketch-title span{
            color: #3b82f6;
        }

        .sketch-subtitle {
            text-align: center;
        font-size: 1.2rem;
        opacity: 0.7;
        margin-bottom: 60px;
        }

        .sketch-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        }

        .sketch-card {
                background: linear-gradient(rgba(28, 28, 28, 0.52) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
        border-radius: 18px;
        /* padding: 24px; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        }

        .sketch-card img {
        width: 100%;
        border-radius: 14px;
        object-fit: cover;
        }

        .left-image img {
        padding: 0px 35px 0px 0;
            order: 1;
        }
        .left1-image img {
        /* order: 1; */
        padding: 0 0 0 35px;
        }

        .left-image .sketch-text {
        order: 2;
        margin-top: 16px;
        }

        .right-image .sketch-text {
        order: 1;
        margin-bottom: 16px;
        }

        .right-image img {
            padding: 0px 0px 0px 35px;
        order: 2;
        }
        .right1-image img {
            padding: 0px 35px 0px 0px;
        order: 2;
        }

        .sketch-text.top {
            padding: 30px;
        text-align: left;
        }

        .sketch-text.bottom {
            padding: 30px;
        text-align: left;
        }

        .sketch-text h3 {
        font-size: 1.6rem;
        margin-bottom: 6px;
        }

        .sketch-text p {
        opacity: 0.8;
        line-height: 1.5;
        }

        /* Mobile */

        @media (max-width: 1024px) {
        .sketch-section {
            padding: 100px 6%;
        }

        .sketch-grid {
            gap: 24px;
        }

        .sketch-title {
            font-size: 2.4rem;
        }

        .sketch-subtitle {
            font-size: 1.1rem;
            margin-bottom: 40px;
        }

        .sketch-text h3 {
            font-size: 1.4rem;
        }

        .sketch-text p {
            font-size: 1rem;
        }

        .left-image img,
        .right-image img,
        .left1-image img,
        .right1-image img {
            padding: 0;
        }
        }



        @media (max-width: 768px) {
        .sketch-section {
            padding: 80px 5%;
        }

        .sketch-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .sketch-card {
            border-radius: 16px;
        }

        .sketch-card img {
            border-radius: 12px;
        }

        /* Reset ordering to natural flow */
        .left-image img,
        .right-image img,
        .left1-image img,
        .right1-image img {
            order: 1;
            padding: 0;
        }

        .sketch-text.top,
        .sketch-text.bottom {
            order: 2;
            padding: 22px;
            text-align: left;
        }

        .sketch-title {
            font-size: 2rem;
        }

        .sketch-subtitle {
            font-size: 1rem;
            margin-bottom: 32px;
        }

        .sketch-text h3 {
            font-size: 1.3rem;
        }

        .sketch-text p {
            font-size: 0.95rem;
        }
        }



        @media (max-width: 480px) {
        .sketch-section {
            padding: 70px 4%;
        }

        .sketch-title {
            font-size: 1.8rem;
        }

        .sketch-subtitle {
            font-size: 0.95rem;
        }

        .sketch-text.top,
        .sketch-text.bottom {
            padding: 18px;
        }

        .sketch-text h3 {
            font-size: 1.2rem;
        }

        .sketch-text p {
            font-size: 0.9rem;
            line-height: 1.45;
        }
        }




  .bodywhy-features {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 14px;
            margin-top: 18px;
        }

          .bodywhy-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            /* padding: 10px 12px; */
            border-radius: 12px;
            /* background: rgba(255, 255, 255, 0.07); */
            font-size: 1rem;
            opacity: 0.9;
            transition: 0.3s;
        }



/********************************droncam************************************/




        

     

        .drone-hero-pro {
            background: url('../img/solutions/dronecam/dronehero6.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }

		   .dash-hero-pro {
            background: url('../img/solutions/dashcam/dashcamhero.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
        }


        /* Video fills entire section */
        .drone-hero-bg-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        /* Optional overlay */
        .drone-hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
            z-index: 1;
        }


        .drone-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 1300px;
            margin: 0 0 0 180px;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 200px;
            align-items: center;
        }

        /* ---------- LEFT ---------- */

        .drone-hero-badge {
            display: inline-block;
            padding: 6px 14px;
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 0.6rem;
            letter-spacing: 1px;
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .drone-hero-text{
            max-width: 650px;
            width: 100%;
        }

        .drone-hero-text h1 {
			font-weight: 500;
            color: var(--text);
            font-size: clamp(2.4rem, 4vw, 3rem);
            line-height: 1.1;
            margin-bottom: 18px;
        }

        .drone-hero-text p {
            color: var(--muted);
            max-width: 520px;
            line-height: 1.6;
            margin-bottom: 32px;
        }

        .drone-hero-cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .drone-btn-primary {
            background: var(--accent);
            color: #fff;
            padding: 14px 26px;
            border-radius: 30px;
            text-decoration: none;
            box-shadow: 0 0 25px rgba(10, 132, 255, 0.35);
        }

        .drone-btn-primary:hover {
            box-shadow: 0 0 35px rgba(10, 132, 255, 0.6);
        }

        .drone-btn-secondary {
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 14px 26px;
            border-radius: 30px;
            text-decoration: none;
        }



        /* -------- Responsive Hero -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .drone-hero-inner {
                gap: 80px;
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .drone-hero-inner {
				        margin-left: 5px;
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .drone-hero-text p {
                margin-left: auto;
                margin-right: auto;
            }

            .drone-hero-cta {
                justify-content: center;
            }

            .drone-hero-badge {
                margin-left: auto;
                margin-right: auto;
                font-size: 8px;
            }
        }

        /* Small Mobile */
        @media (max-width: 480px) {
            .drone-hero-text h1 {
                font-size: 2rem;
            }

            .drone-btn-primary,
            .drone-btn-secondary {
                padding: 12px 22px;
                font-size: 14px;
            }
        }




        .drone-engineering-architecture {
            background: #0b0f14;
            padding: 80px 0;
            color: #fff;
        }

        .drone-engineering-architecture .container {
            /* max-width: 1200px; */
            margin: auto;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 80px;
            align-items: center;
        }

      
        .drone-arch-left img {
            border-radius: 12px;
            width: 100%;
            filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6));
        }


        .drone-arch-right .eyebrow {
            font-size: 12px;
            letter-spacing: 2px;
            color: #4fa3ff;
        }

        .drone-arch-right h2 {
            font-size: 2.5rem;
            line-height: 1.2;
            margin: 16px 0 24px;
        }

        .drone-arch-right p {
            font-size: 1rem;
            color: #cfd6df;
            margin-bottom: 28px;
        }

        .drone-arch-right ul {
            list-style: none;
            padding: 0;
        }

        .drone-arch-right li {
            margin-bottom: 0.9rem;
            padding-left: 20px;
            position: relative;
        }

        .drone-arch-right li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #4fa3ff;
        }



        /* -------- Engineering Architecture Responsive -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .drone-engineering-architecture {
                padding: 100px 6%;
            }

            .drone-engineering-architecture .container {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }

            .drone-arch-right h2 {
                font-size: 36px;
            }

            .drone-arch-right p {
                font-size: 16px;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .drone-engineering-architecture {
                padding: 80px 6%;
            }

            .drone-engineering-architecture .container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .drone-arch-left img {
                max-width: 90%;
                margin: 0 auto;
            }

            .drone-arch-right ul {
                text-align: left;
                max-width: 480px;
                margin: 0 auto;
            }

              .ip-arch{
            order: 2;
        }


        .ip-arch1{
            order: 1;
        }


        }

        /* Small mobile */
        @media (max-width: 480px) {
            .drone-arch-right h2 {
                font-size: 28px;
            }

            .drone-arch-right p {
                font-size: 14px;
            }

              .ip-arch{
            order: 2;
        }


        .ip-arch1{
            order: 1;
        }
        }

        .drone-engineering-process {
            background: #05070a;
            padding: 120px 0;

            color: #fff;
        }

        .drone-engineering-process .container {
            /* max-width: 1200px; */
                margin: auto;
                display: grid;
                grid-template-columns: 1fr 1.1fr;
                gap: 80px;
                align-items: center;
        }

        .drone-process-text h2 {
            font-size: 2.5rem;
            margin: 0px 0 24px;
        }

        .drone-process-text .eyebrow {
            font-size: 13px;
            letter-spacing: 2px;
            color: #4fa3ff;
        }

        .drone-process-text p {
            font-size: 1rem;
            color: #cfd6df;
            margin-bottom: 32px;
        }

        .drone-process-points {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .drone-process-points div {
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.04);
            border-left: 3px solid #4fa3ff;
            font-size: 0.9rem;
        }

        .drone-process-image img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
        }

         .nvr img {
            width: 900px;
            border-radius: 8px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
        }

                .nvr-box {
                width: 100%;
            max-width: 1650px !important;
            margin: 0 auto;
            padding: 5px 50px
        }



        /* -------- Engineering Process Responsive -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .drone-engineering-process {
                padding: 100px 6%;
            }

            .drone-engineering-process .container {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }

            .drone-process-text h2 {
                font-size: 34px;
            }

            .drone-process-text p {
                font-size: 16px;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .drone-engineering-process {
                padding: 80px 6%;
            }

            .drone-engineering-process .container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .drone-process-points {
                grid-template-columns: 1fr;
                max-width: 520px;
                margin: 0 auto;
            }

            .drone-process-text {
                order: 2;
            }

            .drone-process-image {
                overflow: hidden;
                order: 1;
            }
            .nvr img{
                width: 360px;
            }
        }

        /* Small mobile */
        @media (max-width: 480px) {
            .drone-process-text h2 {
                font-size: 26px;
            }

            .drone-process-text p {
                font-size: 14px;
            }

            .drone-process-points div {
                font-size: 14px;
                padding: 12px 14px;
            }
        }







                .dash-case-scroll,
            .drone-case-scroll {
            padding: 0 150px;
            position: relative;
            /* background: #000; */
            }


        .drone-case-title {
            /* position: sticky; */
			font-weight: 500;
            top: 40px;
            z-index: 10;
            margin-bottom: 400px;
            text-align: center;
            pointer-events: none;
        }



        .drone-case-scroll h1 .drone-blue-text {
            background: none;
            -webkit-background-clip: initial;
            background-clip: initial;
            -webkit-text-fill-color: #3b82f6;
            color: #3b82f6;
        }

		  .dash-case-scroll h1 .drone-blue-text {
            background: none;
            -webkit-background-clip: initial;
            background-clip: initial;
            -webkit-text-fill-color: #3b82f6;
            color: #3b82f6;
        }


        .drone-case-card {
            /* padding-top: 140px; */
            position: sticky;
            top: 65%;
            transform: translateY(-50%);
            height: 700px;
            margin-bottom: 32px;

            display: grid;
            grid-template-columns: 1.1fr 1fr;
            border-radius: 18px;
            overflow: hidden;
            z-index: 1;
            background: #020b1c;
             will-change: transform, filter;
 
        }

                .drone-case-card.blurred {
        filter: blur(6px);
        scale: 0.94;
        opacity: 0.4;
        pointer-events: none;
        }

        .drone-case-card.active {
        filter: blur(0);
        scale: 1;
        opacity: 1;
        z-index: 2;
        }

        .drone-case-left {
            padding: 48px;
            /* background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
            ; */
            background: linear-gradient(145deg, #0c1b34, #091326);
            color: white;
        }


        .mini-tag {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #4da3ff;
            margin-bottom: 10px;
            display: inline-block;
        }

        .card-intro {
            font-size: 15px;
            opacity: 0.85;
            margin-bottom: 20px;
            max-width: 520px;
        }

        .drone-case-feature-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .feature-icon {
            font-size: 18px;
            line-height: 1;
            margin-top: 2px;
        }

        .feature-text strong {
            display: block;
            font-size: 1.3rem;
            font-weight: 400;
        }

        .feature-text small {
            display: block;
            font-size: 0.9rem;
            opacity: 0.7;
            line-height: 1.4;
        }


        .drone-case-left h3 {
            font-size: 2.5rem;
            color: #3b82f6;
            margin-bottom: 16px;
            font-weight: 500;

        }

        .drone-case-left p {
            font-size: 1rem;
            opacity: 0.85;
            margin-bottom: 35px;
        }

        .drone-case-right {
            background-size: cover;
            background-position: center;
        }

        /* Images */
        .drone-img1 {
            background-image: url(../img/solutions/dronecam/cameradesignhardware.webp);
        }

        .drone-img2 {
            background-image: url(../img/solutions/dronecam/ImageSensor.webp);
        }

        .drone-img3 {
            background-image: url(../img/solutions/dronecam/LensSelection.webp);
        }

        .drone-img4 {
            background-image: url(../img/solutions/dronecam/GimbalStabilizationIntegration.webp);
        }

        .drone-img5 {
            background-image: url(../img/solutions/dronecam/EmbeddedFirmwareDrivers.webp);
        }

        .drone-img6 {
            background-image: url(../img/solutions/dronecam/AIComputerVisionPipelineIntegration.webp);
        }

        .drone-img7 {
            background-image: url(../img/solutions/dronecam/EnvironmentalHardening.webp);
        }





		.dash-img1 {
            background-image: url(../img/solutions/dashcam/hardwarepcbdash.webp);
        }

        .dash-img2 {
            background-image: url(../img/solutions/dashcam/imagesensor.webp);
        }

        .dash-img3 {
            background-image: url(../img/solutions/dronecam/LensSelection.webp);
        }

        .dash-img4 {
            background-image: url(../img/solutions/dashcam/EmbeddedFirmware.webp);
        }

        .dash-img5 {
            background-image: url(../img/solutions/dashcam/VideoCompression.webp);
        }

        .dash-img6 {
            background-image: url(../img/solutions/dashcam/ComputerVision.webp);
        }

        .dash-img7 {
            background-image: url(../img/solutions/dashcam/Automotive-Grade.webp);
        }
		.dash-img8 {
            background-image: url(../img/solutions/dashcam/EnvironmentalAutomotive.webp);
        }


        /* ========== DRONE CASE SCROLL RESPONSIVE ========== */

        @media (max-width: 1024px) {

  .drone-case-scroll,
  .dash-case-scroll {
    padding: 0 40px;
  }

  .drone-case-scroll { height: 520vh; }
  .dash-case-scroll  { height: 580vh; }

  .drone-case-card {
    height: 580px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 90px;
  }

  .drone-case-left {
    padding: 32px;
  }

  .drone-case-left h3 {
    font-size: 2rem;
  }

  .drone-case-left p {
    font-size: 1.05rem;
  }
}


       @media (max-width: 768px) {




  .drone-case-title{
    margin-bottom: 0px;
  }

.drone-case-card {
     grid-template-columns: 1fr!important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    margin-bottom: 32px;
    filter: none !important;
    opacity: 1 !important;
    scale: 1 !important;
  }

  .drone-case-scroll,
  .dash-case-scroll {
      padding: 0;  
    height: auto !important;
    overflow: visible !important;
  }


  

  .drone-case-right {
    height: 300px;
  }

  .drone-case-left {
    padding: 24px 20px;
  }

  .drone-case-scroll h1,
  .dash-case-scroll h1 {
    padding: 20px;
    font-size: 1.7rem;
    text-align: center;
  }

  .drone-case-left h3 {
    font-size: 1.5rem;
  }

  .drone-case-left p {
    font-size: 0.95rem;
  }

  .feature-text strong {
    font-size: 0.95rem;
  }

  .feature-text small {
    font-size: 0.75rem;
  }
}

        /* .process-horizontal {
            padding: 120px 6%;
            background: #05070c;
            color: #fff;
            overflow: hidden;
        }

        .process-title {
            font-size: 2.6rem;
            text-align: center;
            margin-bottom: 60px;
        }

        .process-wrapper {
            overflow: hidden;
        }

        .process-track {
            padding-right: 50vw;
            display: flex;
            gap: 40px;
            width: max-content;
        }

        .process-card {
            min-width: 280px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 18px;
            padding: 32px 28px;
            text-align: center;
            opacity: 0.4;
            transform: scale(0.9);
            transition: all 0.4s ease;
        }

        .process-card.active {
            opacity: 1;
            transform: scale(1);
            background: rgba(59, 130, 246, 0.12);
        }

        .process-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 16px;
            border-radius: 14px;
            background: rgba(59, 130, 246, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
 */


        .stages-of-work {
            /* position: relative; */
            padding: 120px 6%;
            background: radial-gradient(circle at 50% 0%, rgba(124, 131, 246, 0.15), rgba(11, 12, 16, 0) 70%);
            color: #fff;
            font-family: Inter, sans-serif;
        }

		   .dash-stages-of-work {
            /* position: relative; */
            padding: 120px 6%;
            background: radial-gradient(circle at 50% 0%, rgba(124, 131, 246, 0.15), rgba(11, 12, 16, 0) 70%);
            color: #fff;
            font-family: Inter, sans-serif;
        }

        .stages-dronetitle {
            text-align: center;
            margin-bottom: 80px;
        }

        .stages-title {
            font-size: 3rem;
            font-weight: 500;
            /* text-transform: uppercase; */
        }

        .stages-title span {
            color: #3b82f6;
        }



        .stages-subtitle {
            font-size: 1.2rem;
            margin-top: 16px;
            /* max-width: 600px; */
            color: #9ca3af;
        }

        .stages-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 64px 32px;
            position: relative;
        }

        .stage-item {
            position: relative;
            max-width: 260px;
        }

        .stage-dot {

            width: 30px;
            height: 30px;
            background: #5a63fc;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(124, 131, 246, 0.5);
            margin-bottom: 20px;

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

            font-size: 14px;
            font-weight: 600;
            color: #fff;
            line-height: 1;


        }

        .stage-line.right {
            position: absolute;
            top: 7px;
            left: 50px;
            width: calc(100% + 32px);
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
        }

        .stage-line.right::after {
            content: "";
            position: absolute;
            right: 0;
            top: -4px;
            width: 8px;
            height: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            border-right: 1px solid rgba(255, 255, 255, 0.4);
            transform: rotate(45deg);
        }

        .stage-line.left {
            position: absolute;
            top: 16px;
            right: -95px;

            width: calc(100% + 32px);
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
        }

        .stage-line.left::after {
            content: "";
            position: absolute;
            left: 0;
            top: -4px;
            width: 8px;
            height: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            border-left: 1px solid rgba(255, 255, 255, 0.4);
            transform: rotate(45deg);
        }

        .stage-corner::after {
            content: "";
            position: absolute;
            top: 10px;
            left: 43px;
            width: calc(100% + 60px);
            height: 250px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 0 48px 48px 0;
        }

        .stage-item h3 {
            font-size: 1.5rem;
            font-weight: 400;
            margin-bottom: 10px;
        }

        .stage-item p {
            font-size: 1rem;
            color: #9ca3af;
            line-height: 1.4;
        }

        /* -------- STAGES RESPONSIVE -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .stages-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 48px 24px;
            }

            .stage-line.right,
            .stage-line.left,
            .stage-corner::after {
                display: none;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .stages-of-work {
                padding: 80px 6%;
            }

            .stages-title {
                font-size: 2.2rem;
            }

            .stages-grid {
                grid-template-columns: 1fr;
                gap: 36px;
            }


            .stages-grid::before {
                content: "";
                position: absolute;
                left: 9px;
                height: 1225px;
                top: 0;
                bottom: 0;
                width: 1px;
                background: rgba(255, 255, 255, 0.2);
            }

            .stage-item {
                max-width: 100%;
            }


            .stage-item:nth-child(1) {
                order: 1;
            }

            .stage-item:nth-child(2) {
                order: 2;
            }

            .stage-item:nth-child(3) {
                order: 3;
            }

            .stage-item:nth-child(4) {
                order: 4;
            }

            .stage-item:nth-child(5) {
                order: 8;
            }

            .stage-item:nth-child(6) {
                order: 7;
            }

            .stage-item:nth-child(7) {
                order: 6;
            }

            .stage-item:nth-child(8) {
                order: 5;
            }

            .stage-dot {
                margin-bottom: 12px;
            }

            .stage-item h3 {
                margin-left: 20px;
                font-size: 1.3rem;
            }

            .stage-item p {
                margin-left: 20px;
                font-size: 0.95rem;
            }
        }







        .usecases-visual {
            padding: 140px 6%;
            background: radial-gradient(circle at top, #0b1220, #05070c);
            color: #fff;
        }

        .usecases-title {
			font-weight: 500;
            text-align: center;
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .usecases-title span {
            color: #3b82f6;
        }

        .usecases-subtitle {
            font-size: 1.2rem;
            text-align: center;
            opacity: 0.7;
            margin-bottom: 70px;
        }

        .usecases-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            grid-auto-flow: dense;
        }

        .usecase-card {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(20px);
            border-radius: 18px;
            padding: 24px;
            text-align: center;
            transition: 0.4s ease;
        }

        .usecase-card:hover {
            transform: translateY(-6px);
        }

        .usecase-card.large {
            grid-column: span 2;
            grid-row: span 1;
        }

        .usecase-card.medium {
            grid-column: span 4;
        }


        .usecase-card.ip-medium {
            grid-column: span 2;
        }

        .usecase-horizontal {
            display: flex;
            align-items: center;
            gap: 28px;
            text-align: left;
        }

        
    .usecase-ip-horizontal {
            /* display: flex; */
            align-items: center;
            gap: 28px;
            text-align: left;
        }


        .usecase-horizontal .usecase-image {
            width: 660px;
            /* max-width: 40%; */
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .usecase-horizontal .usecase-text h3 {
            font-size: 2.5rem;
            margin-bottom: 8px;
        }

        .usecase-horizontal .usecase-text p {
            font-size: 1.2rem;
            opacity: 0.8;
            line-height: 1.5;
        }

        .usecase-card.small {
            grid-column: span 1;
        }

   .usecase-card.ip-small {
            grid-column: span 2;
        }
        .usecase-image {
            width: 100%;
            /* max-height: 200px; */
            object-fit: contain;
            margin-bottom: 20px;
        }

        .usecase-card h3 {
            font-size: 2.5rem;
            font-weight: 400;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .usecase-card p {
            font-size: 1.2rem;
            opacity: 0.8;
            line-height: 1.5;
        }

        /* -------- USE CASES RESPONSIVE -------- */

        /* Tablet */
       @media (max-width: 1024px) {
  .usecases-visual {
    padding: 120px 5%;
  }

  .usecases-title {
    font-size: 2.6rem;
  }

  .usecases-subtitle {
    font-size: 1.1rem;
    margin-bottom: 60px;
  }

  .usecases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .usecase-card.large,
  .usecase-card.medium,
  .usecase-card.ip-medium {
    grid-column: span 2;
  }

  .usecase-card.small,
  .usecase-card.ip-small {
    grid-column: span 1;
  }

  .usecase-horizontal .usecase-image {
    width: 360px;
  }

  .usecase-horizontal .usecase-text h3 {
    font-size: 2.1rem;
  }

  .usecase-horizontal .usecase-text p {
    font-size: 1.1rem;
  }
}


        @media (max-width: 768px) {
  .usecases-visual {
    padding: 100px 4%;
  }

  .usecases-title {
    font-size: 2.3rem;
  }

  .usecases-subtitle {
    font-size: 1.05rem;
    margin-bottom: 50px;
  }

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

  .usecase-card,
  .usecase-card.large,
  .usecase-card.medium,
  .usecase-card.small,
  .usecase-card.ip-medium,
  .usecase-card.ip-small {
    grid-column: span 1;
  }

  .usecase-horizontal {
    flex-direction: column;
    text-align: center;
  }

  .usecase-horizontal .usecase-image {
    width: 100%;
    max-width: 360px;
  }

  .usecase-horizontal .usecase-text h3 {
    font-size: 2rem;
  }

  .usecase-horizontal .usecase-text p {
    font-size: 1.05rem;
  }
}


        /* Mobile */
       @media (max-width: 480px) {
  .usecases-visual {
    padding: 80px 16px;
  }

  .usecases-title {
    font-size: 1.9rem;
  }

  .usecases-subtitle {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .usecase-card {
    padding: 20px;
    border-radius: 16px;
  }

  .usecase-card h3 {
    font-size: 1.6rem;
  }

  .usecase-card p {
    font-size: 1rem;
  }

  .usecase-horizontal .usecase-text h3 {
    font-size: 1.7rem;
  }

  .usecase-horizontal .usecase-text p {
    font-size: 1rem;
  }

  .usecase-image {
    margin-bottom: 14px;
  }
}


        .dron-why-section {
            padding: 120px 6%;
            background: radial-gradient(circle at top, #0b1220, #05070c);
            color: #fff;
        }

        .dron-why-heading {
			font-weight: 500;
            text-align: center;
            font-size: 3rem;
            margin-bottom: 60px;
        }

        .dron-why-heading span {
            color: #3b82f6;
        }

        .dron-why-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: auto;
            gap: 32px;
            max-width: 1100px;
            margin: 0 auto;
        }


        /* Explicit placement */
        .dron-why-card:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }

        .dron-why-card:nth-child(4) {
            grid-column: 2;
            grid-row: 1;
        }

        .dron-why-card:nth-child(3) {
            grid-column: 1 / -1;
            grid-row: 2;
            justify-self: center;
            width: 55%;
        }

        .dron-why-card:nth-child(2) {
            grid-column: 1;
            grid-row: 3;
        }

        .dron-why-card:nth-child(5) {
            grid-column: 2;
            grid-row: 3;
        }

        .dron-why-card {
            background-color: transparent;
            background-image: linear-gradient(360deg, #0f0f0f 0%, #00081B 80%);
            box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
            border: 2px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 36px;
            transition: 0.3s ease;
        }

        .dron-why-card:hover {
            transform: translateY(-6px);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .dron-why-icon {
            font-size: 28px;
            margin-bottom: 20px;
            color: #3b82f6;
        }

        .dron-why-icon img {
            width: 20%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
        }

        .dron-why-card h3 {
            font-size: 1.5rem;
            margin-bottom: 12px;
        }

        .dron-why-card p {
            font-size: 1rem;
            opacity: 0.8;
            line-height: 1.5;
        }

        .dron-why-card-center {
            grid-column: 1 / -1;
            max-width: 55%;
            justify-self: center;
        }

        /* -------- WHY GRID RESPONSIVE -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .dron-why-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .dron-why-card:nth-child(3) {
                width: 100%;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .dron-why-grid {
                grid-template-columns: 1fr;
            }

            .dron-why-card {
                grid-column: auto !important;
                grid-row: auto !important;
                width: 100% !important;
                justify-self: stretch !important;
            }

            .dron-why-heading {
                font-size: 2.2rem;
            }

            .dron-why-card h3 {
                font-size: 1.3rem;
            }

            .dron-why-card p {
                font-size: 0.95rem;
            }
        }


        /* Mobile */
        @media (max-width: 768px) {
            .dron-why-grid {
                grid-template-columns: 1fr;
            }

            .dron-why-card-center {
                max-width: 100%;
            }
        }



        .dron-why-choose {
            padding: 140px 6%;
            background: radial-gradient(circle at top, #0b1220, #05070c);
            color: #fff;
        }

        .dron-why-title {
			font-weight: 500;
            text-align: center;
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .dron-why-title span {
            color: #3b82f6;
        }


        .dron-why-subtitle {
            font-size: 1.2rem;
            text-align: center;
            opacity: 0.7;
            margin-bottom: 80px;
        }

        .dron-why-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 60px;
        }

        .dron-why-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .dron-why-item {
            font-weight: 500;
            background: none;
            border: none;
            color: #fff;
            text-align: left;
            padding: 16px 16px;
            font-size: 1.5rem;
            opacity: 0.4;
            cursor: pointer;
            /* transition:
                background-color 0.3s ease,
                opacity 0.3s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease; */
        }

        .dron-why-item.active {
            border-left: 2px solid #3b82f6;
            border-radius: 12px;
            text-align: left;
            opacity: 1;
            font-weight: 300;
            background-color: #2b2b2b;
            /* transform: translateX(3px) scale(0.98); */

        }

        .dron-why-item:hover {
            border-radius: 12px;
            text-align: left;
            color: #fff;
            background-color: #2b2b2b;
            /* transform: translateX(10px); */
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .dron-why-detail {
            background: linear-gradient(180deg, var(--token-ede3e62a-4b9e-4f07-81e3-d8e1a60aad13, rgba(28, 28, 28, 0.52)) 0%, rgba(15, 15, 15, 0.71) 100%);
            border-radius: 24px;
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(20px);
            /* padding: 36px; */
            border-radius: 18px;

            animation: fadeSlide 0.4s ease;

        }

        @keyframes fadeSlide {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        .dron-why-content {
            display: none;
            animation: fadeSlide 0.4s ease;



        }


        .why-cover {
            width: 100%;
            height: 450px;
            overflow: hidden;
            border-radius: 18px 18px 0 0;
        }

        .why-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: brightness(0.9) contrast(1.05);
        }

        .why-body {
            padding: 22px;
        }


        .why-header {
            display: flex;
            gap: 14px;
            align-items: center;
            margin-bottom: 18px;
        }

        .why-icon img {
            width: 82px;
            height: 82px;
            
        }

        .why-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 18px;
        }

        .why-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.07);
            font-size: 1rem;
            opacity: 0.9;
            transition: 0.3s;
        }

        .why-feature:hover {
            background: rgba(59, 130, 246, 0.12);
            transform: translateY(-2px);
        }

        .why-feature img {
            width: 20px;
            height: 20px;
        }


        .why-context {
            font-size: 1rem;
            opacity: 0.6;
            margin-bottom: 16px;
        }


        @keyframes fadeSlide {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        .dron-why-content.active {
            display: block;
        }

        .dron-why-content h3 {
            font-size: 1.7rem;
            margin-bottom: 16px;
            font-weight: 300;
        }

        .dron-why-content ul {
            list-style: none;
            padding: 0;
        }

        .dron-why-content li {
            margin-bottom: 10px;
            opacity: 0.85;
            font-size: 14px;
            position: relative;
            padding-left: 18px;
        }

        .dron-why-content li::before {
            content: "●";
            position: absolute;
            left: 0;
            opacity: 0.5;
        }

        /* ---------- WHY SECTION RESPONSIVE ---------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .dron-why-layout {
                grid-template-columns: 1fr 1.5fr;
                gap: 40px;
            }

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

        /* Mobile */
        @media (max-width: 768px) {
            .dron-why-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .dron-why-list {
                flex-direction: row;
                overflow-x: auto;
                gap: 16px;
                padding-bottom: 10px;
            }

            .dron-why-item {
                white-space: nowrap;
                padding: 12px 18px;
                font-size: 14px;
            }

            .dron-why-item.active {
                transform: scale(0.97);
            }

            .dron-why-detail {
                padding: 24px;
            }

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

        /* Small mobile */
        @media (max-width: 480px) {
            .dron-why-title {
                font-size: 2.2rem;
            }

            .dron-why-subtitle {
                font-size: 0.95rem;
                margin-bottom: 48px;
            }

            .why-context {
                font-size: 12px;
            }

            .why-feature {
                font-size: 12px;
            }
        }

        /* Reduce motion for accessibility */
        @media (prefers-reduced-motion: reduce) {

            .dron-why-item,
            .why-feature,
            .dron-why-content {
                transition: none;
                animation: none;
            }
        }



        .tech-specs {
            padding: 55px 6%;
            background: radial-gradient(circle at top, #0b1220, #05070c);
            color: #fff;
        }

        .tech-specs-inner {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .tech-specs-left span {
            color: #3b82f6;
        }

        .tech-specs-left h2 {
			font-weight: 500;
            font-size: 2.6rem;
            margin-bottom: 14px;
        }

        .tech-intro {
            font-size: 1.2rem;
            opacity: 0.7;
            margin-bottom: 50px;
            max-width: 600px;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 26px;
        }

        .tech-card {
            border-radius: 12px;
            background: linear-gradient(180deg, var(--token-ede3e62a-4b9e-4f07-81e3-d8e1a60aad13, rgba(28, 28, 28, 0.52)) 0%, rgba(15, 15, 15, 0.71) 100%);
            border-radius: 24px;
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            border-left: 3px solid #4fa3ff;
            padding: 22px 24px;
            backdrop-filter: blur(14px);
            /* border: 1px solid rgba(255,255,255,0.06); */
            transition: 0.3s ease;
        }

        .tech-card:hover {
            transform: translateY(-6px);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .tech-card h4 {
            font-size: 1.4rem;
            margin-bottom: 6px;
            color: #3b82f6;
        }

        .tech-card p {
            font-size: 1rem;
            opacity: 0.85;
            line-height: 1.5;
        }

        .tech-specs-right {
            height: 150px;
        }

        .tech-specs-right img {
            width: 100%;
            max-width: 520px;
            margin: auto;
            display: block;
            filter: drop-shadow(0 0 40px rgba(0, 132, 255, 0.25));

        }

        /* -------- TECH SPECS RESPONSIVE -------- */

        /* Tablet */
        @media (max-width: 1024px) {
            .tech-specs {
                padding: 100px 6%;
            }

            .tech-specs-inner {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }

            .tech-specs-left h2 {
                font-size: 2.2rem;
            }

            .tech-card h4 {
                font-size: 1.2rem;
            }

            .tech-card p {
                font-size: 1rem;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .tech-specs {
                padding: 80px 6%;
            }

            .tech-specs-inner {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .tech-grid {
                grid-template-columns: 1fr;
            }

            .tech-specs-left {
                order: 1;
                /* content first (top) */
            }

            .tech-specs-right {
                order: 1;
                /* image second (bottom) */
            }

            .tech-specs-right {
                order: 1;
                height: auto;
            }

            .tech-specs-right img {
                max-width: 320px;
            }

            .tech-intro {
                margin-bottom: 32px;
            }
        }

        /* Small mobile */
        @media (max-width: 480px) {
            .tech-specs-left h2 {
                font-size: 2rem;
            }

            .tech-card {
                padding: 18px 20px;
            }

            .tech-card p {
                font-size: 0.95rem;
            }
        }
  
       

     
/***********************************dashcam *************************/



        .auto-capability-header {
            width: 100%;
            padding: 80px 6% 40px;
            text-align: center;
            color: #fff;
            background: radial-gradient(circle at 50% 0%, rgba(124, 131, 246, 0.15), rgba(11, 12, 16, 0) 70%);
        }


        .auto-capability-header span {
            color: #3b82f6;
        }

        .auto-capability-header h2 {
            font-size: clamp(2.2rem, 4vw, 3rem);
            font-weight: 500;
            margin-bottom: 16px;
        }

        .auto-capability-header p {
            max-width: 720px;
            margin: 0 auto;
            font-size: 1.05rem;
            line-height: 1.6;
            opacity: 0.75;
        }

        /* Mobile tweaks */
        @media (max-width: 768px) {
            .auto-capability-header {
                padding: 60px 6% 30px;
            }

            .auto-capability-header h2 {
                font-size: 2rem;
            }

            .auto-capability-header p {
                font-size: 0.95rem;
            }
        }



        .eng-slider {
            margin-bottom: 60px;
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
        }

        /* Slides */
        .eng-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        .eng-slide.active {
            opacity: 1;
            z-index: 1;
        }

        /* Gradient overlay */
        .eng-slide::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(0,0,0,0.65) 0%,
                rgba(0,0,0,0.45) 25%,
                rgba(0,0,0,0.15) 45%,
                rgba(0,0,0,0) 60%
            );
        }

        /* Content */
        .eng-content {
            position: absolute;
            right: 6%;
            bottom: 8%;
            max-width: 420px;
            color: #fff;
            z-index: 2;
        }

        .eng-content h2 {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 12px;
        }

        .eng-content p {
            font-size: 1rem;
            line-height: 1.6;
            opacity: 0.85;
        }


        .eng-controls {
        position: absolute;
        top: 30px;
        right: 30px;
        display: flex;
        gap: 10px;
        z-index: 10;
        }

        .eng-controls button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.2);
        font-size: 22px;
        cursor: pointer;
        transition: 0.3s;
        }

        .eng-controls button:hover {
        background: rgba(59,130,246,0.7);
        }
        /* Tablet */
        @media (max-width: 1024px) {
        .eng-slider {
            height: 65vh;
        }

        .eng-content {
            right: 5%;
            bottom: 6%;
            max-width: 360px;
        }

        .eng-content h2 {
            font-size: 1.7rem;
        }

        .eng-content p {
            font-size: 0.95rem;
        }

        .eng-controls {
            top: 20px;
            right: 20px;
        }
        }

        /* Mobile */
        @media (max-width: 768px) {
        .eng-slider {
            height: 55vh;
        }

        .eng-content {
            right: 4%;
            bottom: 5%;
            max-width: 90%;
        }

        .eng-content h2 {
            font-size: 1.4rem;
        }

        .eng-content p {
            font-size: 0.9rem;
        }

        .eng-controls {
            top: auto;
            bottom: 16px;
            right: 16px;
        }

        .eng-controls button {
            width: 38px;
            height: 38px;
            font-size: 18px;
        }
        }

        /* Small Mobile */
        @media (max-width: 480px) {
        .eng-slider {
            height: 50vh;
        }

        .eng-content h2 {
            font-size: 1.25rem;
        }

        .eng-content p {
            font-size: 0.85rem;
        }
        }



        .isp-architecture {
        background: radial-gradient(circle at top, #0b1220, #05070c);
        padding: 140px 6%;
        color: #fff;
        }

        .isp-container {
        /* max-width: 1200px; */
        margin: 0 auto;
        text-align: center;
        }

        .isp-title {
        font-size: 3rem;
        margin-bottom: 12px;
        }

        .isp-title span{
            color: #3b82f6;
        }

        .isp-subtitle {
        opacity: 0.75;
        max-width: 720px;
        margin: 0 auto 80px;
        font-size: 1.2rem;
        }

        .isp-diagram {
        position: relative;
        }

        .isp-top {
        display: flex;
        justify-content: center;
        }

        .isp-core {
        padding: 18px 36px;
        border-radius: 14px;
        background: linear-gradient(135deg, #1e293b, #020617);
        border: 1px solid rgba(255,255,255,0.08);
        font-weight: 500;
        letter-spacing: 0.5px;
        box-shadow: 0 0 40px rgba(59,130,246,0.15);
        }

        .isp-core::after{

                content: "";
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 45px;
            background: linear-gradient(to bottom, #3b82f6, transparent);
        }

        .isp-line {
        width: 90%;
        height: 2px;
        background: linear-gradient(to right, transparent, #3b82f6, transparent);
        margin: 60px auto 40px;
        }

        .isp-branches {
        margin-top: 70px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        }

        .isp-branch {
        flex: 1;
        padding-top: 24px;
        position: relative;
        }

        .isp-branch::before {
            content: "";
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 55px;
            background: linear-gradient(to bottom, #3b82f6, transparent);
        }

        .isp-branch {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 80px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.04);
        backdrop-filter: blur(12px);
        transition: 0.3s ease;
        }

        .isp-branch:hover {
        transform: translateY(-4px);
        background: rgba(79,163,255,0.08);
        }

        .isp-icon {
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(79,163,255,0.4));
        }

        .isp-branch span {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.2;
        }

        .isp-branch p {
        font-size: 1rem;
        opacity: 0.75;
        line-height: 1.4;
        /* max-width: 120px; */
        }




        @media (max-width: 1024px) {
        .isp-title {
            font-size: 2.5rem;
        }

        .isp-subtitle {
            font-size: 1.05rem;
            margin-bottom: 60px;
        }

        .isp-branches {
            gap: 20px;
        }

        .isp-branch span {
            font-size: 1.35rem;
        }
        }

        @media (max-width: 768px) {
        .isp-architecture {
            padding: 100px 6%;
        }

        .isp-branches {
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .isp-line {
            display: none;
        }

        .isp-branch {
            width: 100%;
            max-width: 420px;
        }

        .isp-branch::before {
            top: -40px;
            height: 40px;
        }

        .isp-branch span {
            font-size: 1.25rem;
        }

        .isp-branch p {
            font-size: 0.95rem;
        }
        }

        @media (max-width: 480px) {
        .isp-title {
            font-size: 2.1rem;
        }

        .isp-subtitle {
            font-size: 1rem;
        }

        .isp-core {
            padding: 14px 28px;
            font-size: 0.95rem;
        }

        .isp-icon {
            width: 40px;
            height: 40px;
        }
        }



        @media (max-width: 900px) {
        .isp-branches {
            flex-direction: column;
            align-items: center;
        }

        .isp-branch {
            padding-top: 40px;
        }

        .isp-branch::before {
            height: 40px;
        }
        }









        .isp-sticky-section {
        display: flex;
        gap: 80px;
        padding: 120px 80px;
        background: radial-gradient(circle at top left, #0d1a33, #030712);
        color: #fff;
        }

        .isp-left {
        width: 35%;
        position: sticky;
        top: 120px;
        align-self: flex-start;
        }
        .isp-left span{
            color: #3b82f6;
        }

        .isp-left h2 {
        font-size: 42px;
        margin-bottom: 20px;
        }

        .isp-left p {
        font-size: 16px;
        line-height: 1.6;
        color: #cbd5f5;
        }

        .isp-right {
        width: 65%;
        }

        .isp-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        }

        .isp-card {
        background: rgba(255,255,255,0.04);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        backdrop-filter: blur(8px);
        }

        .isp-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 14px;
        margin-bottom: 16px;
        }

        .isp-card h4 {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 8px;
        }

        .isp-card p {
        font-size: 1.1rem;
        color: #cbd5f5;
        }

        .isp-card.center {
        grid-column: 1 / span 2;
        width: 60%;
        margin: 40px auto 0;
        }



        @media (max-width: 1024px) {
        .isp-sticky-section {
            gap: 50px;
            padding: 100px 50px;
        }

        .isp-left {
            width: 40%;
            top: 90px;
        }

        .isp-left h2 {
            font-size: 36px;
        }

        .isp-right {
            width: 60%;
        }

        .isp-card img {
            height: 170px;
        }
        }

        @media (max-width: 768px) {
        .isp-sticky-section {
            flex-direction: column;
            padding: 80px 24px;
        }

        .isp-left,
        .isp-right {
            width: 100%;
        }

        .isp-left {
            position: relative;
            top: auto;
            margin-bottom: 40px;
        }

        .isp-left h2 {
            font-size: 32px;
            text-align: center;
        }

        .isp-left p {
            text-align: center;
            max-width: 640px;
            margin: 0 auto;
        }

        .isp-grid {
            grid-template-columns: 1fr;
        }

        .isp-card.center {
            grid-column: auto;
            width: 100%;
            margin-top: 0;
        }
        }

        @media (max-width: 480px) {
        .isp-left h2 {
            font-size: 26px;
        }

        .isp-left p {
            font-size: 14px;
        }

        .isp-card h4 {
            font-size: 18px;
        }

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




        .nx-col-section {
        padding: 120px 120px;
        background: radial-gradient(circle at 50% 0%, rgba(124, 131, 246, 7%), rgba(11, 12, 16, 0) 70%);
        }




        .nx-col-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
        }

        /* each column is vertical stack */
        .nx-col {
        display: flex;
        flex-direction: column;
        gap: 26px;
        }

        /* card base */
        .nx-col-card {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(15px);
        box-shadow: 0 30px 60px rgba(0,0,0,0.6);
        padding: 34px 28px;
        transition: 0.3s ease;
        }

        .nx-col-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 0 1px rgba(0,174,255,0.5), 0 30px 60px rgba(0,0,0,0.7);
        }

        .nx-col-icon {
        width: 150px;
        height: 150px;
        /* margin-bottom: 18px; */
        filter: drop-shadow(0 0 6px rgba(0,174,255,0.3));
        }

        .nx-col-points {
        list-style: none;
        padding: 0;
        margin: 0;
        }


        .nx-col-points li {
        font-size: 1.1rem;
        color: #cfd6ff;
        margin-bottom: 6px;
        position: relative;
        padding-left: 18px;
        }

        .nx-col-points li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #00c6ff;
        }

        /* height control */
        .nx-col-tall {
        height: 540px;
        }

        .nx-col-small {
        height: 500px;
        }

        /* .nx-col-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        } */

        /* overlay */
        .nx-col-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            /* align-items: flex-end; */
            padding: 24px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3), transparent);
            color: #fff;
            font-size: 1.05rem;
            line-height: 1.5;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: stretch;
            justify-content: flex-end;
        }


        .nx-col-title {
        font-size: 1.8rem;
        font-weight: 500;
        margin-bottom: 6px;
        color: #ffffff;
        }

        .nx-col-text {
                margin-bottom: 15px;
        font-size: 1.2rem;
        line-height: 1.5;
        opacity: 0.8;
        color: #dbeafe;
        }


        @media (max-width: 1024px) {
        .nx-col-section {
            padding: 100px 80px;
        }

        .nx-col-grid {
            gap: 22px;
        }

        .nx-col {
            gap: 22px;
        }

        .nx-col-tall {
            height: 480px;
        }

        .nx-col-small {
            height: 420px;
        }

        .nx-col-title {
            font-size: 1.6rem;
        }

        .nx-col-text {
            font-size: 1.1rem;
        }
        }


        /* Responsive */
        @media (max-width: 768px) {
        .nx-col-section {
            padding: 80px 40px;
        }

        .nx-col-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .nx-col {
            gap: 20px;
        }

        .nx-col-tall,
        .nx-col-small {
            height: 420px;
        }

        .nx-col-icon {
            width: 120px;
            height: 120px;
        }

        .nx-col-title {
            font-size: 1.5rem;
        }

        .nx-col-text {
            font-size: 1.05rem;
        }
        }


        @media (max-width: 480px) {
        .nx-col-section {
            padding: 60px 16px;
        }

        .nx-col-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .nx-col {
            gap: 18px;
        }

        .nx-col-tall,
        .nx-col-small {
            height: auto;
            min-height: 340px;
        }

        .nx-col-card {
            padding: 26px 22px;
            border-radius: 18px;
        }

        .nx-col-icon {
            width: 90px;
            height: 90px;
        }

        .nx-col-title {
            font-size: 1.35rem;
        }

        .nx-col-text {
            font-size: 1rem;
        }

        .nx-col-points li {
            font-size: 1rem;
        }
        }










/**************************IP camera  ******************************/
        .ip-hero-premium {
        position: relative;
        min-height: 100vh;
        background: url("../img/solutions/ipcamera/iphero1.webp") center / contain no-repeat;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 140px;
        text-align: center;
        color: white;
        overflow: hidden;
        }


        .ip-hero-bg{

        
        
        }

        .ip-hero-content {
        max-width: 780px;
        z-index: 2;
        }

        .ip-hero-content h1 {
        font-size: clamp(40px, 4vw, 3rem);
        font-weight: 500;
        letter-spacing: -0.02em;
        margin-bottom: 18px;
        }

        .ip-hero-content p {
        font-size: 20px;
        opacity: 0.85;
        margin-bottom: 20px;
        }

        .ip-hero-cta {
        display: flex;
        gap: 18px;
        justify-content: center;
        margin-bottom: 80px;
        }

        .btn {
        padding: 12px 26px;
        border-radius: 999px;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.3s ease;
        }

        .btn.primary {
        background: black;
        color: white;
        }

        .btn.secondary {
        background: white;
        color: black;
        }

        .btn:hover {
        transform: translateY(-2px);
        }


        @media (max-width: 1024px) {
        .ip-hero-premium {
            padding-top: 120px;
            background-size: cover;
        }

        .ip-hero-content {
            max-width: 700px;
        }

        .ip-hero-content h1 {
            font-size: clamp(36px, 5vw, 56px);
        }

        .ip-hero-content p {
            font-size: 18px;
        }

        .ip-hero-cta {
            
            margin-bottom: 60px;
        }
        }



        @media (max-width: 768px) {
        .ip-hero-premium {
            padding-top: 100px;
            background-position: center top;
        }

        .ip-hero-content {
            max-width: 90%;
        }

        .ip-hero-content h1 {
            font-size: 34px;
            line-height: 1.2;
        }

        .ip-hero-content p {
            font-size: 17px;
        }

        .ip-hero-cta {
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 14px;
        }
        }




        @media (max-width: 480px) {
        .ip-hero-premium {
            padding-top: 80px;
            background-size: cover;
        }

        .ip-hero-content h1 {
            font-size: 28px;
        }

        .ip-hero-content p {
            font-size: 15px;
        }

        .ip-hero-cta {
            margin-bottom: 50px;
        }

        .btn {
            /* width: 100%; */
            max-width: 260px;
            text-align: center;
            align-items: center;
        }
        }

        /* Product */
        .ip-hero-product {
        position: relative;
        z-index: 2;
        }

        .ip-hero-product img {
        width: min(520px, 80vw);
        filter: drop-shadow(0 40px 60px rgba(0,0,0,0.35));
        }

        /* Fake reflection */
        .ip-hero-product::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) scaleY(-1);
        width: 100%;
        height: 100%;
        background: url("../img/solutions/ipcamera/iphero.webp") center / contain no-repeat;
        opacity: 0.15;
        filter: blur(2px);
        }



        .ip-process-layout {
        min-height: 100vh;
        background: radial-gradient(circle at top, #172037, #02030a 70%);
        padding: 120px 0vw 100px;
        color: #fff;

        display: flex;
        flex-direction: column;   /* stack header + grid */
        align-items: center; 
        }

        .process-header {
            text-align: center;
        max-width: 720px;
        margin-bottom: 60px;
        }


        .process-header span{
            color: #3b82f6;
        }

        .process-header h2 {
        font-weight: 500;
            font-size: 3rem;
        margin-bottom: 12px;
        }

        .process-header p {
        font-size: 1.2rem;
        opacity: 0.75;
        line-height: 1.6;
        }



        .ip-process-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 32px;
        max-width: 1460px;
        width: 100%;
        }

        .ip-process-card {
        background:linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
        border-radius: 24px;
        /* padding: 26px; */
        display: flex;
        flex-direction: column;
        gap: 12px;
        grid-column: span 2;
        }

        .ip-process-card.wide {
        grid-column: span 3;
        }

        .ip-process-card h3 {
            margin-bottom: 10px;
        font-size: 1.3rem;
        }

        .ip-process-content{
            padding: 16px 16px 0px 16px;
        }

        .ip-process-card p {
        font-size: 1rem;
        opacity: 0.75;
        }

        .ip-card-image {
        margin-top: auto;
        /* background: rgba(255,255,255,0.08); */
        border-radius: 18px;
        padding: 16px 0 16px 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

        .ip-card-image img {
                border-radius: 12px 0 0 12px;
        max-width: 100%;
        height: auto;
        }

        /* Responsive */
        @media (max-width: 1024px) {
        .ip-process-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            padding: 0 24px;
        }

        .ip-process-card {
            grid-column: span 2;
        }

        .ip-process-card.wide {
            grid-column: span 4;
        }

        .process-header h2 {
            font-size: 2.5rem;
        }
        }


        @media (max-width: 768px) {
        .ip-process-layout {
            padding: 100px 0 80px;
        }

        .ip-process-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 0 20px;
        }

        .ip-process-card,
        .ip-process-card.wide {
            grid-column: span 2;
        }

        .process-header h2 {
            font-size: 2.2rem;
        }

        .process-header p {
            font-size: 1.05rem;
        }
        }


        @media (max-width: 480px) {
        .ip-process-layout {
            padding: 80px 0 60px;
        }

        .ip-process-grid {
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 0 16px;
        }

        .ip-process-card,
        .ip-process-card.wide {
            grid-column: span 1;
        }

        .process-header h2 {
            font-size: 1.9rem;
        }

        .process-header p {
            font-size: 1rem;
        }

        .ip-process-content {
            padding: 14px 14px 0 14px;
        }

        .ip-card-image {
            padding: 12px;
        }

        .ip-card-image img {
            border-radius: 12px;
            width: 100%;
        }
        }





        .IP-img1 {
            background-image: url(../img/solutions/ipcamera/opticengineering.webp);
        }

        .IP-img2 {
            background-image: url(../img/solutions/ipcamera/NetworkPerformance.webp);
        }

        .IP-img3 {
            background-image: url(../img/solutions/ipcamera/securitybydesign.webp);
        }

        .IP-img4 {
            background-image: url(../img/solutions/ipcamera/long-tremscalablity.webp);
        }

        .IP-img5 {
            background-image: url(../img/solutions/wificam/wireless.webp);
        }


        .wifi-img1 {
            background-image: url(../img/solutions/wificam/imagesystem.webp);
        }

        .wifi-img2 {
            background-image: url(../img/solutions/wificam/wireless.webp);
        }

        .wifi-img3 {
            background-image: url(../img/solutions/wificam/dtection.webp);
        }

        .wifi-img4 {
            background-image: url(../img/solutions/wificam/flexible.webp);
        }

        .door-img1 {
            background-image: url(../img/solutions/doorcam/door1.webp);
        }

        .door-img2 {
            background-image: url(../img/solutions/doorcam/door2.webp);
        }

        .door-img3 {
            background-image: url(../img/solutions/doorcam/door3.webp);
        }

        .door-img4 {
            background-image: url(../img/solutions/doorcam/door4.webp);
        }

        .access-img1 {
            background-image: url(../img/solutions/accesscamera/access1.webp);
        }

        .access-img2 {
            background-image: url(../img/solutions/accesscamera/access2.webp);
        }

        .access-img3 {
            background-image: url(../img/solutions/accesscamera/access3.webp);
        }

        .access-img4 {
            background-image: url(../img/solutions/accesscamera/access4.webp);
        }


                
        .custom-slide-image {
        max-width: 100%;
        border-radius: 12px;
        margin-top: 20px;
        }





/* Responsive */




    .center-slider-section {
        padding: 120px 0;
        background: radial-gradient(circle at top, #101426, #05070f 70%);
        color: #fff;
        text-align: center;
    }

    .center-title {
        font-size: 3rem;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .center-title span {
        color: #3b82f6;
    }

    .center-subtitle {
        font-size: 18px;
        color: #9aa4bf;
        margin-bottom: 70px;
    }

    .center-slider-wrap {
        position: relative;
        max-width: 1400px;
        margin: auto;
        overflow: visible;
    }

    .center-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: #ffffff15;
        color: white;
        font-size: 26px;
        cursor: pointer;
        transition: 0.3s;
        z-index: 5;
    }

    .center-arrow:hover {
        background: #4ea1ff;
    }

    .center-arrow.prev {
        left: -70px;
    }

    .center-arrow.next {
        right: -70px;
    }

    .hscroll-card {
        padding: 0 20px;
    }

    .hscroll-content {
        background: linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
        box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
        border-radius: 22px;
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 40px;
        max-width: 880px;
        margin: auto;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        transition: all 0.4s ease;
        opacity: 0.35;
        transform: scale(0.92);
    }

    .slick-center .hscroll-content {
        opacity: 1;
        transform: scale(1);
    }

    .hscroll-left {
        flex: 1;
        text-align: left;
    }

    .hscroll-left h2,
    .hscroll-left h3 {
        margin-bottom: 14px;
        color: #ffffff;
    }

    .hscroll-left p,
    .hscroll-left li {
        color: #b7c1d6;
        font-size: 1rem;
        line-height: 1.6;
    }

    .hscroll-right {
        flex: 1;
        text-align: center;
    }

    .hscroll-right img {
        max-width: 100%;
        border-radius: 14px;
    }

    @media (max-width: 1024px) {
        .center-title {
            font-size: 2.4rem;
        }

        .center-subtitle {
            font-size: 16px;
            margin-bottom: 50px;
        }

        .center-arrow {
            width: 46px;
            height: 46px;
            font-size: 22px;
        }

        .center-arrow.prev {
            left: -50px;
        }

        .center-arrow.next {
            right: -50px;
        }

        .hscroll-content {
            max-width: 760px;
            padding: 32px;
            gap: 32px;
        }
    }


    @media (max-width: 768px) {
        .center-slider-section {
            padding: 90px 0;
        }

        .center-title {
            font-size: 2rem;
        }

        .center-subtitle {
            font-size: 15px;
            margin-bottom: 40px;
        }

        .center-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            font-size: 22px;
            top: auto;
            bottom: 250px;
            /* move below slider */
            transform: none;
        }

        .center-arrow.prev {
            left: 3%;
        }

        .center-arrow.next {
            right: 3%;
        }

        .hscroll-content {
            flex-direction: column;
            max-width: 90%;
            text-align: center;
            padding: 28px;
            gap: 24px;
        }

        .hscroll-left {
            text-align: center;
        }
    }


    @media (max-width: 480px) {
        .center-slider-section {
            padding: 70px 0;
        }

        .center-title {
            font-size: 1.7rem;
        }

        .center-subtitle {
            font-size: 14px;
            margin-bottom: 32px;
        }

        .hscroll-content {
            padding: 22px;
            border-radius: 18px;
        }

        .hscroll-left h2,
        .hscroll-left h3 {
            font-size: 1.3rem;
        }

        .hscroll-left p,
        .hscroll-left li {
            font-size: 0.95rem;
        }
    }





/**************************PTZ camera ******************************************/


.ptz-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: 
    radial-gradient(circle at center, rgba(10,15,35,0.4), rgba(3,5,15,0.9)),
    url("../img/solutions/ptzcamera/heroptz.webp") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video */
.ptz-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.85) contrast(1.05);
}

/* Overlay */
.ptz-hero-overlay {
  position: absolute;
  inset: 0;
  /* background: radial-gradient(circle at center, rgba(10,15,35,0.45), rgba(3,5,15,0.9)); */
  z-index: 1;
}

/* Content */
.ptz-hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding: 0 6%;
  text-align: center;
  color: #ffffff;
}

/* Headline */
.ptz-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ptz-hero-title span {
  color: #4da3ff;
}

/* Subtitle */
.ptz-hero-subtitle {
  margin-top: 20px;
  font-size: 1.15rem;
  color: #b8c0d0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA */
.ptz-hero-cta {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ptz-btn {
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.ptz-btn.primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}

.ptz-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.45);
}

.ptz-btn.secondary {
  background: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.ptz-btn.secondary:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Mobile */
@media (max-width: 768px) {
  .ptz-hero-title {
    font-size: 2.2rem;
  }

  .ptz-hero-subtitle {
    font-size: 1rem;
  }
}


.devstack-section {
  padding: 80px 12%;
  background: #0b0f14;
}


.devstack-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 70px;
}

.devstack-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: #38bdf8;
  background: rgba(56,189,248,0.12);
  border-radius: 999px;
  margin-bottom: 16px;
}

.devstack-main-title {
  font-size: 42px;
  color: #fff;
  margin-bottom: 14px;
}

.devstack-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #9aa4b2;
}

.devstack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 30px;
}

.devstack-card {
  position: relative;
   background:linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
  border-radius: 16px;
  padding: 30px;
  overflow: hidden;
  transition: transform 0.35s ease;
  height: 290px;
}

.devstack-card:hover{
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8, 0 0 25px rgba(0, 0, 0, 0.6);
    transform: translateY(-8px);
}
    



/* ICON IMAGE */
.devstack-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  margin-bottom: 18px;
}

.devstack-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.devstack-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.devstack-text {
  font-size: 14px;
  color: #c9d1d9;
  line-height: 1.6;
}

/* FILL BAR */
.devstack-fill {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;          /* 👈 bottom touch nai kare */
  height: 3px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  border-radius: 2px;
}

.devstack-fill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s ease;
}


.devstack-card:hover .devstack-fill::before {
  width: 100%;
}

/* COLORS */
.devstack-blue   { --accent: #1e90ff; }
.devstack-teal   { --accent: #00e5c0; }
.devstack-green  { --accent: #3cff6f; }
.devstack-orange { --accent: #ff9f1c; }
.devstack-purple { --accent: #a855f7; }
.devstack-sky    { --accent: #38bdf8; }


/**************************** NVR ****************************************/


.nvr-hero {
    position: relative;
    height: 100vh;
    background: url("../img/solutions/nvr/nvrhero2.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* push content right */
    padding-right: 8%;
}

.nvr-hero-content.right-align {
    max-width: 650px;
    text-align: left;
}

.nvr-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 7, 15, 0.5), rgba(5, 7, 15, 0.65));
    z-index: 1;
}

.nvr-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 0 20px;
}

.nvr-hero-title {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 24px;
}     

.nvr-hero-title span {
    color: #4fa3ff;
}


.nvr-hero-subtitle {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #cbd5e1;
    font-weight: 400;
}
 
#rotate-word {
    color: #3b82f6;
    font-weight: 600;
    margin-left: 6px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.slot-word {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 1.6em;
    vertical-align: bottom;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.slot-out {
    transform: translateY(-1.2em);
    opacity: 0;
}

.slot-in {
    transform: translateY(1.2em);
    opacity: 0;
}


/* Responsive */
@media (max-width:1024px){

  .nvr-hero{
    padding-right:6%;
  }

  .nvr-hero-title{
    font-size:2.6rem;
  }

  .nvr-hero-subtitle{
    font-size:1.1rem;
  }

  .nvr-hero-content.right-align{
    max-width:560px;
  }
}
@media (max-width:768px){

  .nvr-hero{
    height:auto;
    min-height:92vh;
    justify-content:center;
    padding:120px 24px 80px;
    text-align:center;
  }

  .nvr-hero-content.right-align{
    text-align:center;
    max-width:680px;
    margin:auto;
  }

  .nvr-hero-title{
    font-size:2.2rem;
    line-height:1.25;
  }

  .nvr-hero-subtitle{
    font-size:1rem;
  }
}
@media (max-width:640px){

  .nvr-hero{
    min-height:100svh; /* mobile real viewport height */
    padding:110px 16px 70px;
    background-position:60% center; /* keep subject visible */
  }

  .nvr-hero-title{
    font-size:1.75rem;
    margin-bottom:16px;
  }

  .nvr-hero-subtitle{
    font-size:0.95rem;
    line-height:1.6;
  }

  #rotate-word{
    display:inline-block;
  }

  .slot-word{
    height:1.4em;
  }
}



.nvr-img1 {
    background-image: url(../img/solutions/nvr/ingestsystem.webp);
}

.nvr-img2 {
    background-image: url(../img/solutions/nvr/streammanagment.webp);
}

.nvr-img3 {
    background-image: url(../img/solutions/nvr/flexiblerecording.webp);
}

.nvr-img4 {
    background-image: url(../img/solutions/nvr/resiliencelogic.webp);
}


.nvr-infographic {
    padding: 120px 6%;
    background: #05070f;
    color: #e5e7eb;
    text-align: center;
}

.small-title {
    letter-spacing: 2px;
    color: #7dd3fc;
    margin-bottom: 6px;
}

.main-title {
    font-size: 2.8rem;
    margin-bottom: 80px;
}

.circle-layout {
    position: relative;
    width: 520px;
    height: 520px;
    margin: 0 auto;
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background:
        conic-gradient(#7dd3fc 0deg 90deg,
            #a78bfa 90deg 180deg,
            #60a5fa 180deg 270deg,
            #818cf8 270deg 360deg);
    mask: radial-gradient(circle, transparent 60%, black 61%);
}

.seg {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #0b1220;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 6px rgba(125, 211, 252, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.seg img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: brightness(1.1);
}


.s1 {
    top: 55px;
    left: 16%;
    transform: translateX(-50%);
}

.s2 {
    right: 55px;
    top: 16%;
    transform: translateY(-50%);
}

.s3 {
    bottom: 55px;
    left: 84%;
    transform: translateX(-50%);
}

.s4 {
    left: 55px;
    top: 84%;
    transform: translateY(-50%);
}


/* ring thickness ≈ 40px → move icons by 20px outward */


.info {
    position: absolute;
    width: 260px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.info h4 {
    margin-bottom: 6px;
    color: #ffffff;
}

.info small {
    color: #7dd3fc;
}

.left {
    text-align: left;
}

.right {
    text-align: left;
}

.left.top {
    top: 0;
    left: -280px;
}

.right.top {
    top: 0;
    right: -280px;
}

.left.bottom {
    bottom: 0;
    left: -280px;
}

.right.bottom {
    bottom: 0;
    right: -280px;
}


.how-it-works-section {
    padding: 0 0 100px 0;
    background: radial-gradient(circle at center, rgba(10, 15, 35, 0.45), rgba(3, 5, 15, 0.9));
}

.nvr-section-header {
    text-align: center;
    margin-bottom: 80px;
}

.nvr-section-header .nvr-product-badge {
    /* background-color: #32428057; */
    display: inline-block;
}

.nvr-product-badge {

    margin-top: 50px;
    display: inline-block;
    text-transform: uppercase;
    color: #3b82f6;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
}

.nvr-section-header h2 {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}

.nvr-section-header p {
    font-size: 1.2rem;
    color: #cccccc;
    max-width: 800px;
    margin: 0 auto;
}

.nvr-workflow-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Circular Infographic Design */
.nvr-circular-infographic {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 60px;
    padding: 60px;
}

/* Center Circle */
.nvr-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, #0f365e 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    z-index: 10;
    border: 8px solid white;
}

.nvr-nvr-center-circle h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--nxon-dark);
    margin-bottom: 10px;
}

.nvr-center-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.nvr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.nvr-dot:nth-child(1) {
    background: #0a1931;
}

.nvr-dot:nth-child(2) {
    background: #B3cfe5;
}

.nvr-dot:nth-child(3) {
    background: #4a7fa7;
}

.nvr-dot:nth-child(4) {
    background: #1a3d63;
}

.nvr-center-circle p {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* Workflow Cards */
.nvr-workflow-card {
    position: relative;
    padding: 40px 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    min-height: 320px;
}

.nvr-workflow-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

/* ===== Arrows Between Circular Workflow Cards ===== */

/* Common arrow styling */
.nvr-workflow-card::after {
    content: "\f061";
    /* arrow icon Font Awesome (right arrow) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Arrow from Step 01 → Step 02 */
.nvr-card-1::after {
    top: 10%;
    left: 25%;
    transform: rotate(0deg);
}

/* Arrow from Step 02 → Step 03 */
.nvr-card-2::after {
    top: 10%;
    left: 69%;
    transform: rotate(90deg);
}

/* Arrow from Step 03 → Step 04 */
.nvr-card-4::after {
    /* this is your step 03 card */
    top: 10%;
    left: 69%;
    transform: rotate(180deg);

}

/* Arrow from Step 04 → Step 01 */
.nvr-card-3::after {
    /* this is your step 04 card */
    top: 10%;
    left: 28%;
    transform: rotate(-90deg);
}


/* Card 1 - Top Left - Teal */
.nvr-workflow-card.nvr-card-1 {
    background: linear-gradient(rgb(1 37 123 / 52%) 0%, rgb(45 62 96 / 71%) 100%);
    box-shadow: rgb(255 255 255) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    color: white;
    border-radius: 30px 30px 0 30px;
    text-align: left;
}

/* Card 2 - Top Right - Yellow */
.nvr-workflow-card.nvr-card-2 {
    background: linear-gradient(rgb(1 37 123 / 52%) 0%, rgb(45 62 96 / 71%) 100%);
    box-shadow: rgb(255 255 255) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    color: white;
    border-radius: 30px 30px 30px 0;
    text-align: right;
}

/* Card 3 - Bottom Right - Purple */
.nvr-workflow-card.nvr-card-3 {
    background: linear-gradient(rgb(1 37 123 / 52%) 0%, rgb(45 62 96 / 71%) 100%);
    box-shadow: rgb(255 255 255) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    color: white;
    border-radius: 30px 30px 30px 30px;
    text-align: left;
}

/* Card 4 - Bottom Left - Red */
.nvr-workflow-card.nvr-card-4 {
    background: linear-gradient(rgb(1 37 123 / 52%) 0%, rgb(45 62 96 / 71%) 100%);
    box-shadow: rgb(255 255 255) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    color: white;
    border-radius: 30px 30px 30px 30px;
    text-align: right;
}

.nvr-step-badge {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.nvr-step-title {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1;
}

.nvr-step-description {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 20px;
}

/* Icon Container */
.nvr-icon-container {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

.nvr-card-1 .nvr-icon-container,
.nvr-card-4 .nvr-icon-container {
    align-self: flex-start;
}

.nvr-card-2 .nvr-icon-container,
.nvr-card-3 .nvr-icon-container {
    align-self: flex-end;
}

.nvr-icon-container i {
    font-size: 24px;
    color: white;
}


@media (max-width: 1024px) {
    .nvr-section-header h2 {
        font-size: 2.5rem;
    }

    .nvr-section-header p {
        font-size: 1.05rem;
    }

    .nvr-circular-infographic {
        padding: 40px;
        gap: 40px;
    }

    .nvr-center-circle {
        width: 240px;
        height: 240px;
    }

    .nvr-step-title {
        font-size: 2.1rem;
    }
}


@media (max-width: 768px) {
    .nvr-circular-infographic {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 20px;
    }

    .nvr-center-circle {
        display: none;
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        margin: 0 auto 20px;
    }

    .nvr-workflow-card.nvr-card-1,
    .nvr-workflow-card.nvr-card-2 {
        border-radius: 24px;
    }


    .nvr-workflow-card {
        min-height: auto;
        text-align: left !important;
    }

    .nvr-workflow-card::after {
        display: none;
        /* hide arrows */
    }

    .nvr-step-title {
        font-size: 2rem;
    }
}


@media (max-width: 480px) {
    .how-it-works-section {
        padding: 70px 0;
    }

    .nvr-section-header h2 {
        font-size: 1.9rem;
    }

    .nvr-section-header p {
        font-size: 0.95rem;
    }

    .nvr-center-circle {
        display: none;
        width: 200px;
        height: 200px;
        padding: 20px;
    }

    .nvr-workflow-card.nvr-card-1,
    .nvr-workflow-card.nvr-card-2 {
        border-radius: 24px;
    }

    .nvr-step-title {
        font-size: 1.6rem;
    }

    .nvr-step-description {
        font-size: 13px;
    }

    .nvr-icon-container {
        width: 44px;
        height: 44px;
    }
}


.nx-serv-section {
    padding: 100px 10%;
    background: radial-gradient(circle at top left, #0d1a33, #030712);

}

.nx-serv-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Heading block behaves like a card */
.nx-serv-left {
    background: transparent;
    padding: 20px 10px;
}

.nx-serv-tag {
    color: #3b82f6;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.nx-serv-title {
    font-size: 3rem;
    margin: 12px 0;
    color: #fff;
    line-height: 1.1;
}

.nx-serv-desc {
    font-size: 1.2rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 320px;
}

.nx-serv-card {
    height: 370px;
}

/* Cards */
.nx-serv-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    padding: 30px 28px 28px;
    border-radius: 18px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nx-serv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(0, 174, 255, 0.5), 0 30px 60px rgba(0, 0, 0, 0.7);
}

.nx-serv-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.security-feature{
    display: flex;
  align-items: center;
  justify-content: center;
}


.nx-serv-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


.pink {
    background: #ff5b9f;
}

.yellow {
    background: #f7c948;
}

.orange {
    background: #ff8f3d;
}

.teal {
    background: #20c997;
}

.purple {
    background: #7c5cff;
}

.nx-serv-card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.nx-serv-card-desc {
    color: #cccccc;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.nx-serv-link {
    font-weight: 600;
    color: #222;
    text-decoration: none;
}

.nx-serv-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .nx-serv-section {
        padding: 90px 6%;
    }

    .nx-serv-grid-layout {
        gap: 24px;
    }

    .nx-serv-title {
        font-size: 2.5rem;
    }

    .nx-serv-card {
        height: 340px;
        padding: 26px 24px;
    }
}


@media (max-width: 768px) {
    .nx-serv-section {
        padding: 80px 5%;
    }

    .nx-serv-tag {
        margin-left: 40px;
        text-align: center;

    }

    .nx-serv-grid-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .nx-serv-left {
        grid-column: span 2;
        padding-bottom: 10px;
    }

    .nx-serv-desc {
        max-width: 100%;
    }

    .nx-serv-title {
        font-size: 2.2rem;
    }

    .nx-serv-card {
        height: auto;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .nx-serv-section {
        padding: 70px 16px;
    }

    .nx-serv-grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nx-serv-left {
        grid-column: span 1;
    }

    .nx-serv-title {
        font-size: 1.9rem;
    }

    .nx-serv-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .nx-serv-card-title {
        font-size: 1.35rem;
    }

    .nx-serv-card-desc {
        font-size: 0.9rem;
    }
}


/* footer */
.site-footer {
    position: relative;
    z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:linear-gradient(rgb(10 12 31) 0%, rgb(15 15 15) 100%);
      /* background: linear-gradient(rgb(19 21 43 / 52%) 0%, rgb(24 24 24 / 71%) 100%); */
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
  /* background: #020617; */
  color: #cbd5f5;
  padding: 80px 10% 40px;
 
}
 
.footer-container {
    height: 420px;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;
  gap: 45px;
}
 
.footer-logo {
  height: 42px;
  margin-bottom: 20px;
}
 
.footer-desc {
font-size: 1rem;
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #ccc;
}
 
.footer-social a img {
  width: 22px;
  margin-right: 12px;
  opacity: 0.8;
  transition: 0.3s;
}
.footer-social a img:hover { opacity: 1; }
 .quick{
        padding: 0px 0px 0px 70px;
 }
.footer-links h4 {
 
  color: white;
  margin-bottom: 16px;
  font-size: 1.2rem;
}
 
.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links li {
    display: flex;
    flex-direction: column;
  font-size: 1rem;
  margin-bottom: 10px;
  cursor: pointer;
  opacity: 0.8;
}
 
 
.footer-links li a{
  text-decoration: none;
  color: #ccc;
}
.footer-links li:hover { opacity: 1; }
 
/* Bottom Boxes */
.footer-bottom-boxes {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 80px;
}
 
 
.office-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  margin-bottom: 12px;
}
 
.office-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; /* light blue */
  font-size: 16px;
}
 
.footer-box {
      width: 380px;
    height: 260px;
 
    background-color: transparent;
    background-image: linear-gradient(360deg, #0f0f0f 0%, #00081B 80%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 20px;
 
    /* background: rgba(255, 255, 255, 0.04); */
    /* border-radius: 18px; */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.footer-box h4 {
  font-size: 1.2rem;
  color: white;
  margin-bottom: 12px;
}
 
.footer-box p {
    color: #ccc;
  font-size: 1rem;
  margin-bottom: 6px;
  opacity: 0.8;
}
 
.footer-copy {
  color: #fff;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.6);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0.7;
}
 
 
.office-line {
    color: #ccc;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 6px;
  font-size: 1rem;

}
 
.office-line img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  
}
 .footer-child{
    margin-left:18px;
}

.footer-child a{
    /* font-size:14px; */
    color:#ccc;
}

.footer-child a:hover{
    opacity: 1; 
}
 
.footer-links p strong {
  color: #fff;
  font-size: 1.1rem;
}

.footer-links .office-line img {
width: 20px;
    height: 20px;
  /* object-fit: cover; */
}

.footer-links .offices-address img{
        width: 39px;
    height: 39px;
  /* object-fit: cover; */
}

.office-line a {
    opacity: 0.8;
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.office-line a:hover {
  opacity: 1;
}
/* Responsive */
@media (max-width: 1024px) {

  .site-footer {
    padding: 70px 6% 40px;
  }

  .footer-container {
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    gap: 40px;
  }

  .footer-desc {
    font-size: 1.05rem;
  }

  .footer-links li {
    font-size: 1.05rem;
  }

  .footer-bottom-boxes {
    gap: 30px;
    flex-wrap: wrap;
  }

  .footer-box {
    width: 340px;
    height: 240px;
  }
}
@media (max-width: 768px) {

  .site-footer {
    padding: 60px 6% 30px;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-desc {
    max-width: none;
    font-size: 1rem;
  }

  .footer-links h4 {
    font-size: 1.15rem;
  }

  .footer-links li {
    font-size: 1rem;
  }

  .footer-bottom-boxes {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
  }

  .footer-box {
    width: 100%;
    max-width: 420px;
    height: auto;
  }

  .footer-box p {
    font-size: 0.95rem;
  }
}
@media (max-width: 640px) {

  .site-footer {
    padding: 50px 5% 24px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-desc {
    font-size: 0.95rem;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-links h4 {
    font-size: 1.1rem;
  }

  .footer-links li {
    font-size: 0.95rem;
  }

  .footer-bottom-boxes {
    margin-top: 48px;
  }

  .footer-box {
    padding: 22px;
  }

  .office-title {
    justify-content: center;
  }

  .office-line {
    justify-content: center;
    font-size: 0.9rem;
  }

  .footer-copy {
    font-size: 0.8rem;
  }
}

/*==============  Contact Us============================*/

        /* Hero Section */
        .contactus-hero {
            position: relative;
            height: 70vh;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(25, 25, 50, 0.8) 100%),
                url('../img/contact/bg.jpeg') center/cover no-repeat;
            margin-top: 0px;
        }

        .contactus-hero-content {
            text-align: center;
            color: var(--white);
            max-width: 700px;
            padding: 0 20px;
        }

        .contactus-hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .contactus-hero p {
            font-size: 1.1rem;
            opacity: 0.95;
           
        }

        /* Main Contact Section */
        .contactus-contact-main {
            max-width: 1350px;
            margin: -80px auto 0;
            padding: 0 0 40px 0px;
            position: relative;
            z-index: 10;
        }

        .contactus-contact-container {
            background: var(--white);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            overflow: hidden;
        }

        /* Left Side - Contact Info */
        .contactus-contact-info {
            background: #172a45;
            padding: 60px 40px;
            color: var(--white);
        }

        .contactus-contact-info h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .contactus-contact-info>p {
            opacity: 0.8;
            margin-bottom: 40px;
         
        }

        .contactus-info-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 30px;
            padding: 20px;
            background: rgb(83 93 131 / 31%);
            border-radius: 12px;
            transition: all 0.3s;
        }

        .contactus-info-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }

        .contactus-info-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contactus-info-icon i {
            font-size: 20px;
        }

        .contactus-info-content h3 {
            font-size: 1.1rem;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .contactus-info-content p {
            opacity: 0.8;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .contactus-info-content a {
            color: var(--white);
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .contactus-info-content a:hover {
            opacity: 1;
        }

        .contactus-social-section {
            margin-top: 50px;
        }

        .contactus-social-section h3 {
            font-size: 1rem;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .contactus-social-links {
            display: flex;
            gap: 12px;
        }

        .contactus-social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            transition: all 0.3s;
        }

        .contactus-social-links a:hover {
            background: var(--primary-blue);
            transform: translateY(-3px);
        }

        /* Right Side - Form */
        .contactus-contact-form-section {
            background: url('../img/contact/image.jpeg') center/cover no-repeat;
            padding: 60px 50px;
        }

        .contactus-contact-form-section h2 {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: #000;
            font-weight: 600;
        }

        .contactus-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .contactus-form-group {
            margin-bottom: 20px;
        }

        .contactus-form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color:#1e293b;
            font-size: 0.95rem;
        }

        .contactus-form-control {
            width: 100%;
            padding: 14px 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            color: #1e293b;
            font-size: 0.95rem;
            transition: all 0.3s;
        }
 
        .contactus-form-control:focus {
            outline: none;
            border-color: #2563eb;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
 
        .contactus-form-control::placeholder {
            color: #64748b;
        }

        .select.contactus-form-control {
            cursor: pointer;
        }

        contactus-textarea.contactus-form-control {
            resize: vertical;
            min-height: 120px;
        }

        .error{
            color: red;
        }

        .contactus-submit-btn {
            width: 100%;
            background: #172a45;
            color: white;
            border: none;
            padding: 16px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 1rem;
            
            transition: all 0.3s;
        }

        .contactus-submit-btn:hover {
            background: #081b4d;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
        }

        .contactus-form-message {
            /* display: none; */
            padding: 15px;
            margin-top: 20px;
            border-radius: 8px;
            text-align: center;
   
            
        }

        .contactus-form-message.success {
            background-color: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #16a34a;
        }

        /* Map Section */
        .map-section {
            width: 100%;
            height: 500px;
            margin-top: 0;
        }

        .map-section iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Newsletter Section */
        .newsletter-section {
            background: var(--nxon-darker);
            color: var(--white);
            padding: 60px 0;
        }

        .newsletter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: center;
        }

        .contactus-newsletter-content h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .contactus-newsletter-content p {
            opacity: 0.8;
        }

        .contactus-newsletter-form {
            display: flex;
            gap: 12px;
        }

        .contactus-newsletter-input {
            flex: 1;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: var(--white);
        }

        .contactus-newsletter-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .contactus-newsletter-input:focus {
            outline: none;
            border-color: var(--primary-blue);
            background: rgba(255, 255, 255, 0.15);
        }

        .contactus-newsletter-btn {
            padding: 14px 32px;
            background: #172a45;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            transition: all 0.3s;
        }

        .contactus-newsletter-btn:hover {
            background: #061d5a;
            transform: translateY(-2px);
        }



        /* Responsive */
        @media (max-width: 968px) {
            .contactus-contact-container {
                grid-template-columns: 1fr;
            }

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

            .contactus-newsletter-container {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .contactus-hero h1 {
                font-size: 2rem;
            }

            .contactus-form-row {
                grid-template-columns: 1fr;
            }

            .contactus-contact-form-section {
                padding: 40px 30px;
            }

            .contactus-contact-info {
                padding: 40px 30px;
            }

            .nav-menu {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 80%;
                height: 100vh;
                background-color: var(--dark-blue);
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 50px;
                transition: right 0.4s ease;
            }

            .nav-menu.active {
                right: 0;
            }

            .get-started-btn {
                display: none;
            }

            .mobile-menu-btn {
                display: block;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .contactus-newsletter-form {
                flex-direction: column;
            }
        }



        /*****************************Smart Surveillance and Physical Security **********************/

        .ssp-section {
        padding: 100px 8%;
        background: #040813;
        color: white;
        }

        .ssp-container {
        /* max-width: 1200px; */
        margin: auto;
        }

        /* Center title */
        .ssp-header {
        text-align: center;
        margin-bottom: 60px;
        }

        .ssp-header h2 {
        font-size: 3rem;
        margin-bottom: 10px;
        }

        .ssp-header p {
        font-size: 1.2rem;
        color: #cccccc;
        max-width: 700px;
        margin: auto;
        }

        /* Layout */
        .ssp-content {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 60px;
        align-items: center;
        }


        /* Left side features */
        .ssp-left .ssp-feature {
        display: flex;
        align-items: flex-start;
        gap: 25px;
        margin-bottom: 50px;
        }

        .ssp-left img {
        width: 40px;
        height: 40px;
        }

        /* Text styling */
        .ssp-left h3 {
            font-weight: 500;
        font-size: 1.5rem;
        margin: 0;
        }

        .ssp-left p {
            font-size: 1.2rem;
        color: #b0c4de;
        margin-top: 5px;
        }

        /* Right side image */
        .ssp-right img {
        width: 100%;
        border-radius: 12px;
        }

        /* ---------- Responsive for Mobile ---------- */
            
        @media (max-width: 1024px) {

        .ssp-section {
            padding: 90px 6%;
        }

        .ssp-header h2 {
            font-size: 2.5rem;
        }

        .ssp-header p {
            font-size: 1.1rem;
        }

        .ssp-content {
            grid-template-columns: 1.1fr 1fr;
            gap: 50px;
        }

        .ssp-left h3 {
            font-size: 1.5rem;
        }

        .ssp-left p {
            font-size: 1.15rem;
        }
        }



        @media (max-width: 768px) {

        .ssp-section {
            padding: 80px 6%;
        }

        .ssp-header {
            margin-bottom: 50px;
        }

        .ssp-header h2 {
            font-size: 2.2rem;
        }

        .ssp-header p {
            font-size: 1rem;
            max-width: 600px;
        }

        .ssp-content {
            grid-template-columns: 1fr;
            gap: 60px;
        }

        .ssp-left .ssp-feature {
            gap: 20px;
            margin-bottom: 40px;
        }

        .ssp-left h3 {
            font-size: 1.4rem;
        }

        .ssp-left p {
            font-size: 1.05rem;
        }

        .ssp-right img {
            max-width: 520px;
            margin: auto;
            display: block;
        }
        }


        @media (max-width: 640px) {

        .ssp-section {
            padding: 70px 5%;
        }

        .ssp-header h2 {
            font-size: 1.9rem;
        }

        .ssp-header p {
            font-size: 0.95rem;
        }

        .ssp-left .ssp-feature {
            gap: 16px;
            margin-bottom: 32px;
        }

        .ssp-left img {
            width: 34px;
            height: 34px;
        }

        .ssp-left h3 {
            font-size: 1.25rem;
        }

        .ssp-left p {
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .ssp-right img {
            border-radius: 10px;
        }
        }




        .nx-secure-section {
            padding: 100px 10%;
            background: radial-gradient(circle at top left, #0d1a33, #030712);

        }

        .nx-secure-grid-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        /* Heading block behaves like a card */
        .nx-secure-left {
            background: transparent;
            padding: 20px 10px;
        }

        .nx-secure-tag {
            color: #3b82f6;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
        }

        .nx-secure-title {
            font-size: 3rem;
            margin: 12px 0;
            color: #fff;
            line-height: 1.1;
        }

        .nx-secure-desc {
            font-size: 1.2rem;
            color: #cccccc;
            line-height: 1.6;
            /* max-width: 320px; */
        }

        .nx-secure-card {
            height: 370px;
        }

        /* Cards */
        .nx-secure-card {
            justify-items: center;
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(15px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
            padding: 30px 28px 28px;
            border-radius: 18px;

            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .nx-secure-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 0 0 1px rgba(0, 174, 255, 0.5), 0 30px 60px rgba(0, 0, 0, 0.7);
        }

        .nx-secure-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            place-items: center;
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 28px;
        }

    
        .nx-secure-icon img {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

        .nx-secure-card-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #fff;
        }

        .nx-secure-card-desc {
            color: #cccccc;
            font-size: 1.2rem;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .nx-secure-link {
            font-weight: 600;
            color: #222;
            text-decoration: none;
        }

        .nx-secure-link:hover {
            text-decoration: underline;
        }


        @media (max-width: 1024px) {

        .nx-secure-section {
            padding: 90px 6%;
        }

        .nx-secure-title {
            font-size: 2.5rem;
        }

        .nx-secure-desc {
            font-size: 1.1rem;
        }

        .nx-secure-grid-layout {
             grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .nx-secure-card {
            height: 350px;
            padding: 28px 24px;
        }

        .nx-secure-card-title {
            font-size: 1.35rem;
        }

        .nx-secure-card-desc {
            font-size: 1.05rem;
        }
        }


        @media (max-width: 768px) {

        .nx-secure-section {
            padding: 80px 6%;
        }

        .nx-secure-grid-layout {
            grid-template-columns: repeat(1, 1fr)!important;
            gap: 30px;
        }

        .nx-secure-left {
            grid-column: span 1;
            text-align: center;
            margin-bottom: 20px;
        }

        .nx-secure-title {
            font-size: 2.2rem;
        }

        .nx-secure-desc {
            font-size: 1rem;
            max-width: 600px;
            margin: auto;
        }

        .nx-secure-card {
            height: auto;
        }

        .nx-secure-icon {
            margin-bottom: 22px;
        }
        }


        @media (max-width: 640px) {

        .nx-secure-section {
            padding: 70px 5%;
        }

        .nx-secure-grid-layout {
          grid-template-columns: repeat(1, 1fr)!important;
            gap: 24px;
        }

        .nx-secure-left {
            text-align: center;
            padding: 0;
        }

        .nx-secure-title {
            font-size: 1.9rem;
            line-height: 1.2;
        }

        .nx-secure-desc {
            font-size: 0.95rem;
        }

        .nx-secure-card {
            padding: 26px 22px;
        }

        .nx-secure-card-title {
            font-size: 1.25rem;
        }

        .nx-secure-card-desc {
            font-size: 0.95rem;
        }

        .nx-secure-icon img {
            width: 44px;
            height: 44px;
        }
        }





        .uc-section{
            padding: 100px 8%;
            background:#05070c;
            color:white;
        }

        .uc-title{
            font-weight: 500;
            font-size: 3rem;
            text-align:center;
            margin-bottom:40px;
        }

         .uc-title-para{
           color: #cccccc;
            font-size: 1.2rem;
            text-align:center;
            margin-bottom:40px;
        }

        /* GRID */
        .uc-grid{
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 380px;
            gap:15px;
        }

        /* BIG CARD */
        .uc-big{
            grid-column: span 2;
        }

        /* CARD */
        .uc-card{
            position:relative;
            overflow:hidden;
            cursor:pointer;
            transition: border-radius 0.4s ease;
        }

        /* COVER IMAGE */
        .uc-bg{
            width:100%;
            height:100%;
            object-fit:cover;
            position:absolute;
            top:0;
            left:0;
        }

        /* BOTTOM TITLE */
        .uc-bottom{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            padding:12px;
            background:rgba(0,0,0,0.6);
            text-align:center;
            font-weight:600;
            z-index:2;
        }


        /* IMPORTANT PART — hover par span hide */
        .uc-card:hover .uc-bottom {
            opacity: 0;
            visibility: hidden;
        }
        /* HOVER OVERLAY */
        .uc-overlay{
            position:absolute;
            inset: 0;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.55);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            opacity:0;
            transition:0.4s;
            text-align:center;
            padding:20px;
        }

        /* SHOW ON HOVER */
        .uc-card:hover .uc-overlay{
            opacity:1;
        }

        /* BORDER RADIUS ON HOVER */
        .uc-card:hover{
            border-radius:20px;
        }

        /* BULLETS */
        .uc-overlay ul li {
            color: #e6eaff;
            font-size: 15px;
            margin: 8px 0;
            display: flex;
            align-items: center;
            gap: 10px;             /* icon & text vachche space */
        }

        /* Font Awesome icon styling */
        .uc-overlay ul li i {
            color: #4da3ff;        /* theme blue */
            font-size: 13px;
        }

        @media (max-width: 1024px) {

        .uc-section {
            padding: 90px 6%;
        }

        .uc-title {
            font-size: 2.5rem;
        }

        .uc-title-para {
            font-size: 1.1rem;
        }

        .uc-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 340px;
            gap: 14px;
        }

        .uc-big {
            grid-column: span 2;
        }
        }


        @media (max-width: 768px) {

        .uc-section {
            padding: 80px 6%;
        }

        .uc-title {
            font-size: 2.2rem;
            margin-bottom: 30px;
        }

        .uc-title-para {
            font-size: 1rem;
            margin-bottom: 30px;
        }

        .uc-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 300px;
            gap: 12px;
        }

        .uc-big {
            grid-column: span 2;
        }
        }

        @media (max-width: 640px) {

        .uc-section {
            padding: 70px 5%;
        }

        .uc-title {
            font-size: 1.9rem;
        }

        .uc-title-para {
            font-size: 0.95rem;
        }

        .uc-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 260px;
            gap: 14px;
        }

        .uc-big {
            grid-column: span 1;
        }

        /* 🔑 Mobile fix — hover not reliable */
        .uc-bottom {
            opacity: 0;
            visibility: hidden;
        }

        .uc-overlay {
            opacity: 1;
            background: rgba(0,0,0,0.55);
        }

        .uc-card {
            border-radius: 18px;
        }
        }


       .hiw-timeline{
            padding: 100px 8%;
            background:#05070c;
            color:#fff;
            text-align:center;
            overflow:hidden;        /* important for sliding */
        }

        .hiw-timeline h2{
            font-size: 3rem;
            margin-bottom: 60px;
        }
        .hiw-timeline p{
            font-size: 1.2rem;
            color: #cccccc;
            max-width: 700px;
            margin: auto;
            margin-bottom: 50px;
        }

        /* WRAPPER — viewport */
        .timeline-wrapper{
            width:100%;
            overflow:hidden;
        }

        /* TRACK — moving strip */
        .timeline{
            display:flex;
            gap:120px;               /* space between icons */
            /* width:max-content; */
        /* animation: moveLR 12s ease-in-out infinite alternate; */
        }

        /* Each item */
        .t-item{
            text-align:center;
            position:relative;
            width:260px;
        }

        /* Icon circle */
        .t-icon-circle{
            width:100px;
            height:100px;
            border-radius:50%;
            background:#093e77;
            border:1px solid #4da3ff;
            display:flex;
            align-items:center;
            justify-content:center;
            margin:0 auto 15px;
        }

        .t-icon-circle img{
            width:50px;
            height:50px;
            object-fit:contain;
        }

        /* Dashed line between icons */
        .dash{
            position: absolute;
            top: 40px;
            left: 70%;
            width: 299px;
            height: 1px;
            border-top: 2px dashed #4da3ff;
        }

        /* Last item ma line nahi */
        .last .dash{
            display:none;
        }

        /* Text styling */
        .t-item h3{
            font-size: 1.7rem;
            font-weight: 500;
            margin: 8px 0;
        }

        .t-item p{
            font-size:1.1rem;
            color:#cfd6ff;
        }

        @media (max-width: 1024px) {

        .hiw-timeline {
            padding: 90px 6%;
        }

        .hiw-timeline h2 {
            font-size: 2.5rem;
            margin-bottom: 50px;
        }

        .timeline {
            gap: 90px;
        }

        .t-item {
            width: 230px;
        }

        .t-item h3 {
            font-size: 1.5rem;
        }

        .t-item p {
            font-size: 1rem;
        }

        .dash {
            width: 240px;
        }
        }


        @media (max-width: 768px) {

        .hiw-timeline {
            padding: 80px 6%;
        }

        .hiw-timeline h2 {
            font-size: 2.2rem;
            margin-bottom: 40px;
        }

        /* Horizontal scroll instead of animation */
        .timeline-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .timeline {
            gap: 80px;
        /* padding-bottom: 20px; */
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        flex-wrap: wrap;
        align-content: center;
        }

        .t-item {
            width: 220px;
        }

        .t-icon-circle {
            width: 90px;
            height: 90px;
        }

        .t-icon-circle img {
            width: 44px;
            height: 44px;
        }

        .dash {
            width: 210px;
            top: 38px;
        }
        }


        @media (max-width: 640px) {

        .hiw-timeline {
            padding: 70px 5%;
        }

        .hiw-timeline h2 {
            font-size: 1.9rem;
            margin-bottom: 30px;
        }

        .timeline {
            gap: 25px;
        }

        .t-item {
            width: 200px;
        }

        .t-icon-circle {
            width: 80px;
            height: 80px;
        }

        .t-icon-circle img {
            width: 38px;
            height: 38px;
        }

        .t-item h3 {
            font-size: 1.3rem;
        }

        .t-item p {
            font-size: 0.95rem;
        }

        
              .dash {
        display: none;
        width: 180px;
        top: 34px;
    
        }
        }





        .nx-benefits{
        padding: 100px 8%;
        background:#05070c;
        color:#fff;
        }

        .nx-benefits-grid{
        display:grid;
        grid-template-columns: 1.2fr 1.8fr;
        gap:60px;
        align-items:start;
        }

        /* LEFT SIDE */
        .nx-benefits-tag{
        color:#4da3ff;
        letter-spacing:1px;
        text-transform:uppercase;
        font-size:13px;
        }

        .nx-benefits-left h2{
        font-size:3rem;
        margin:12px 0;
        }

        .nx-benefits-left p{
            font-size: 1.2rem;
    color: #cccccc;
        line-height:1.6;
        }

        /* RIGHT GRID */
        .nx-benefits-cards{
        display:grid;
        grid-template-columns: repeat(2,1fr);
        gap:20px;
        }

        /* SINGLE CARD */
        .nx-benefit-card{
        background:#0e234e;
        border:1px solid rgba(255,255,255,0.08);
        border-radius:14px;
        padding:22px;
        display:flex;
        align-items:center;
        gap:14px;
        transition:0.3s;
        }

        /* ICON */
        .nx-benefit-card i{
        color:#4da3ff;
        font-size:20px;
        }

        /* TEXT */
        .nx-benefit-card h4{
        font-size:16px;
        font-weight:600;
        }

        /* HOVER EFFECT */
        .nx-benefit-card:hover{
        transform:translateY(-4px);
        box-shadow:0 10px 25px rgba(77,163,255,0.15);
        }


        @media (max-width: 1024px){

        .nx-benefits{
            padding: 90px 6%;
        }

        .nx-benefits-left h2{
            font-size: 2.5rem;
        }

        .nx-benefits-left p{
            font-size: 1.1rem;
        }

        .nx-benefits-grid{
            gap: 50px;
        }
        }


        @media (max-width: 768px){

        .nx-benefits{
            padding: 80px 6%;
        }

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

        .nx-benefits-left{
            text-align: center;
        }

        .nx-benefits-left p{
            max-width: 600px;
            margin: auto;
            font-size: 1rem;
        }

        .nx-benefits-left h2{
            font-size: 2.2rem;
        }

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


        @media (max-width: 640px){

        .nx-benefits{
            padding: 70px 5%;
        }

        .nx-benefits-left h2{
            font-size: 1.9rem;
        }

        .nx-benefits-left p{
            font-size: 0.95rem;
        }

        .nx-benefits-cards{
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .nx-benefit-card{
            padding: 18px;
        }

        .nx-benefit-card h4{
            font-size: 15px;
        }
        }





        /***************************** smart cities  **********************/


        .city-overview-section {
            padding: 120px 20px;
            background: #040813;
            color: #e5e7eb;
        }

        .city-overview-container {
            max-width: 1800px;
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        /* IMAGE AREA */
        .city-overview-images {
            position: relative;
        }

        .city-overview-images .big-image img {
            width: 100%;
            border-radius: 20px;
            object-fit: cover;
        }

        .city-overview-images .small-image {
            position: absolute;
            bottom: -40px;
            right: -40px;
            background: #040813;
            padding: 10px;
            border-radius: 16px;
            /* box-shadow: 0 20px 50px rgba(0,0,0,0.5); */
        }

        .city-overview-images .small-image img {
            width: 360px;
            height: auto;
            border-radius: 12px;
        }

        /* CONTENT */
        .city-overview-content h2 {
            font-size: 42px;
            margin-bottom: 20px;
        }

        .city-overview-content .overview-text {
            font-size: 18px;
            line-height: 1.7;
            color: #cbd5f5;
            margin-bottom: 35px;
        }

        .overview-points {
            list-style: none;
            padding: 0;
            margin-bottom: 40px;
        }

        .overview-points li {
            display: flex;
            gap: 18px;
            margin-bottom: 26px;
            align-items: flex-start;
        }

        .point-icon {
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            /* background: rgba(37, 99, 235, 0.15); */
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .point-icon img {
            width: 40px;
            height: 40px;
        }

        .point-text h4 {
            font-weight: 500;
            font-size: 1.3rem;
            margin-bottom: 6px;
            color: #ffffff;
        }

        .point-text p {
            font-size: 1rem;
            color: #94a3b8;
            line-height: 1.6;
        }


        /* RESPONSIVE */

        @media (max-width: 1024px){

        .city-overview-section{
            padding: 100px 6%;
        }

        .city-overview-container{
            gap: 50px;
        }

        .city-overview-content h2{
            font-size: 36px;
        }

        .city-overview-content .overview-text{
            font-size: 17px;
        }

        .city-overview-images .small-image img{
            width: 300px;
        }
        }

        @media (max-width: 768px){

        .city-overview-section{
            padding: 90px 6%;
        }

        .city-overview-container{
            grid-template-columns: 1fr;
            gap: 70px;
        }

        .city-overview-images{
            max-width: 640px;
            margin: auto;
        }

        .city-overview-images .small-image{
            bottom: -30px;
            right: -20px;
        }

        .city-overview-content{
            text-align: center;
        }

        .city-overview-content .overview-text{
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
            font-size: 16px;
        }

        .overview-points{
            max-width: 680px;
            margin: 0 auto 40px;
        }
        }


        @media (max-width: 640px){

        .city-overview-section{
            padding: 70px 5%;
        }

        .city-overview-content h2{
            font-size: 28px;
        }

        .city-overview-content .overview-text{
            font-size: 15px;
            line-height: 1.6;
        }

        .city-overview-images .small-image{
            position: static;
            margin-top: 16px;
            padding: 6px;
        }

        .city-overview-images .small-image img{
            width: 100%;
            max-width: 320px;
        }

        .overview-points li{
            gap: 14px;
        }

        .point-icon{
            width: 38px;
            height: 38px;
        }

        .point-icon img{
            width: 32px;
            height: 32px;
        }

        .point-text h4{
            font-size: 1.1rem;
        }

        .point-text p{
            font-size: 0.95rem;
        }
        }

        /* CORE FEATURES SECTION */
        .nx-city-core-features {
            padding: 120px 20px;
            background: #020617;
            color: #e5e7eb;
        }

        .nx-city-core-container {
            max-width: 1500px;
            margin: auto;
        }

        /* HEADER */
        .nx-city-core-header {
            text-align: center;
            margin-bottom: 70px;
        }

        .nx-city-core-header h2 {
            font-size: 42px;
            margin-bottom: 14px;
        }

        .nx-city-core-header p {
            max-width: 760px;
            margin: auto;
            font-size: 17px;
            color: #94a3b8;
        }

        /* GRID */
      .nx-city-feature-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* gap: 36px; */
        }

        /* RECTANGLE CARDS (ROW 1) */
        .nx-feature-wide {
            grid-column: span 3; /* visual rectangle feel */
        }

        .nx-feature-square {
            grid-column: span 2;
        }

        

        /* CARD STYLE (reuse from before) */
       .nx-city-feature-card {
            height: 370px;
            background: linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 36px 30px;
            position: relative;
            overflow: hidden;
            transform-origin: center;
            transition:
                transform 0.45s ease,
                box-shadow 0.45s ease,
                background 0.45s ease,
                border-color 0.45s ease;
}


       .nx-city-feature-card:hover {
            transform: scale(1.05); /* charey baju thi moto */
            background: rgba(15, 23, 42, 0.55);
            border-color: rgba(59, 130, 246, 0.45);
            box-shadow:
                0 35px 90px rgba(0, 0, 0, 0.55),
                inset 0 0 0 1px rgba(255,255,255,0.08);
            z-index: 5; /* overlap mate */
}


        .nx-city-feature-card img {
            width: 46px;
            margin-bottom: 22px;
        }

        .nx-city-feature-card h4 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #ffffff;
        }

        .nx-city-feature-card p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #9ca3af;
        }

        /* RESPONSIVE */

        @media (max-width: 1024px){

        .nx-city-core-features{
            padding: 100px 6%;
        }

        .nx-city-core-header h2{
            font-size: 36px;
        }

        .nx-city-core-header p{
            font-size: 16px;
        }

        .nx-city-feature-grid{
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .nx-feature-wide{
            grid-column: span 4;
        }

        .nx-feature-square{
            grid-column: span 2;
        }

        .nx-city-feature-card{
            height: 340px;
            padding: 32px 26px;
        }

        .nx-city-feature-card h4{
            font-size: 1.35rem;
        }

        .nx-city-feature-card p{
            font-size: 1rem;
        }
        }

        @media (max-width: 768px){

        .nx-city-core-features{
            padding: 90px 6%;
        }

        .nx-city-core-header{
            margin-bottom: 60px;
        }

        .nx-city-core-header h2{
            font-size: 32px;
        }

        .nx-city-feature-grid{
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }

        .nx-feature-wide,
        .nx-feature-square{
            grid-column: span 2;
        }

        .nx-city-feature-card{
            height: auto;
        }

        /* hover scale thodu soft */
        .nx-city-feature-card:hover{
            transform: scale(1.03);
        }
        }

        @media (max-width: 640px){

        .nx-city-core-features{
            padding: 70px 5%;
        }

        .nx-city-core-header h2{
            font-size: 26px;
        }

        .nx-city-core-header p{
            font-size: 15px;
        }

        .nx-city-feature-grid{
            grid-template-columns: 1fr;
            gap: 22px;
        }

        .nx-feature-wide,
        .nx-feature-square{
            grid-column: span 1;
        }

        .nx-city-feature-card{
            padding: 26px 22px;
        }

        .nx-city-feature-card h4{
            font-size: 1.2rem;
        }

        .nx-city-feature-card p{
            font-size: 0.95rem;
            line-height: 1.5;
        }

        /* Mobile UX — hover disable */
        .nx-city-feature-card:hover{
            transform: none;
        }
        }


        .nx-hz-scsol {
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle at top left, #0b1225, #020617);
            color: #e5e7eb;
            display: flex;
            align-items: center;
        }

        .nx-hz-scsol-inner {
            width: 100%;
            padding: 80px;
            display: grid;
            grid-template-columns: 1fr 1.7fr;
            gap: 60px;
            align-items: center;
        }

        /* LEFT */
        .nx-hz-scsol-left h2 {
            line-height: 1.2;
            font-size: 46px;
            margin-bottom: 18px;
        }
        .nx-hz-badge{
            color: #4da3ff;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: 13px;
        }

        .nx-hz-scsol-left p {
            max-width: 460px;
            color: #94a3b8;
            margin-bottom: 30px;
        }

        .nx-hz-controls button {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: rgba(255,255,255,0.12);
            color: #fff;
            border: none;
            cursor: pointer;
            margin-right: 12px;
        }

        /* RIGHT */
        .nx-hz-scsol-right {
            height: 660px;
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .nx-hz-track {
            display: flex;
            gap: 28px;
            transition: transform 0.6s ease;
            width: max-content; /* 🔥 IMPORTANT */
            will-change: transform;
        }

        /* CARD */
        .nx-hz-card {
            min-width: 380px;   /* 🔑 makes 2–3 cards visible */
            height: 420px;
            background: #020617;
            border-radius: 22px;
            /* overflow: hidden; */
            box-shadow: 0 30px 70px rgba(0,0,0,0.6);
            flex-shrink: 0;
        }

        .nx-hz-card img {
            width: 100%;
            height: 550px;
            object-fit: cover;
        }

        .nx-hz-info {
            padding: 22px;
        }

        .nx-hz-info h4 {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .nx-hz-info p {
            font-size: 14px;
            color: #cbd5f5;
        }
        /********responsive**********/
        @media (max-width: 1024px){

        .nx-hz-scsol {
            height: auto;
            padding: 100px 0;
        }

        .nx-hz-scsol-inner {
            padding: 60px;
            grid-template-columns: 1fr 1.5fr;
            gap: 50px;
        }

        .nx-hz-scsol-left h2 {
            font-size: 38px;
        }

        .nx-hz-scsol-left p {
            font-size: 15px;
        }

        .nx-hz-card {
            min-width: 340px;
            height: 400px;
        }

        .nx-hz-card img {
            height: 500px;
        }
        }

        @media (max-width: 768px){

        .nx-hz-scsol {
            height: auto;
            padding: 90px 0;
        }

        .nx-hz-scsol-inner {
            padding: 50px;
            grid-template-columns: 1fr;
            gap: 60px;
        }

        .nx-hz-scsol-left {
            text-align: center;
        }

        .nx-hz-scsol-left p {
            margin-left: auto;
            margin-right: auto;
        }

        .nx-hz-controls {
            justify-content: center;
        }

        .nx-hz-scsol-right {
            height: 520px;
        }

        .nx-hz-card {
            min-width: 320px;
            height: 380px;
        }

        .nx-hz-card img {
            height: 440px;
        }
        }

        @media (max-width: 640px){

        .nx-hz-scsol {
            padding: 70px 0;
        }

        .nx-hz-scsol-inner {
            padding: 32px 20px;
            gap: 30px;
        }

        .nx-hz-scsol-left h2 {
            font-size: 28px;
            line-height: 1.25;
        }

        .nx-hz-scsol-left p {
            font-size: 14px;
        }

        .nx-hz-controls button {
            width: 42px;
            height: 42px;
        }

     .nx-hz-scsol-right {
            /* height: 460px; */
            overflow-x: auto;
    scroll-snap-type: x mandatory;   /* 🔥 snap effect */
    -webkit-overflow-scrolling: touch;
        } 

        .nx-hz-card {
             /* scroll-snap-align: start; */
            min-width: 280px;
            height: 340px;
            border-radius: 18px;
        }

        .nx-hz-card img {
            height: 380px;
        }

        .nx-hz-info h4 {
            font-size: 18px;
        }

        .nx-hz-info p {
            font-size: 13px;
        }
        }

        .nx-how-it-works{
            padding:100px 8%;
            background:#05070c;
            color:#fff;
        }

        .nx-how-head{
            text-align:center;
            /* max-width:720px; */
            margin:0 auto 130px;
        }

        .nx-how-head h2{
            font-size:3rem;
            margin-bottom:14px;
        }

        .nx-how-head p{
            color:#94a3b8;
            line-height:1.6;
        }

        .nx-how-flow{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:40px;
        }

        .nx-step{
             text-align:center;   
            /* background:#0b1220; */
            padding:40px 32px;
            border-radius:18px;
            max-width:320px;
            transition:0.3s;
        }

        .nx-step:hover{
            transform:translateY(-6px);
        }

      .nx-step-icon{
        margin:0 auto 16px; 
            width:64px;
            height:64px;
            margin-bottom:16px;
            perspective:800px;
        }

        .nx-step-icon img{
            width:100%;
            height:100%;
            object-fit:contain;
            transition:transform 0.6s ease;
            transform-style:preserve-3d;
        }

        .nx-step:hover .nx-step-icon img{
            transform:rotateY(180deg);
        }


        .nx-step h4{
            font-size:1.5rem;
            margin-bottom:10px;
        }

        .nx-step p{
             font-size:1.1rem;
            color:#94a3b8;
            line-height:1.6;
        }

        .nx-flow-arrow{
            width:240px;
            opacity:0.7;
        }

        /* RESPONSIVE */

        @media (max-width: 1024px){

        .nx-how-it-works{
            padding: 90px 6%;
        }

        .nx-how-head{
            margin-bottom: 100px;
        }

        .nx-how-head h2{
            font-size: 2.5rem;
        }

        .nx-how-flow{
            gap: 30px;
        }

        .nx-step{
            padding: 36px 28px;
        }

        .nx-step h4{
            font-size: 1.35rem;
        }

        .nx-step p{
            font-size: 1rem;
        }

        .nx-flow-arrow{
            width: 200px;
        }
        }

        @media (max-width: 768px){

        .nx-how-it-works{
            padding: 80px 6%;
        }

        .nx-how-head{
            margin-bottom: 80px;
        }

        .nx-how-head h2{
            font-size: 2.2rem;
        }

        .nx-how-flow{
            flex-wrap: wrap;
            gap: 40px;
        }

        .nx-flow-arrow{
            display: none; /* arrows hide — flow clear anyway */
        }

        .nx-step{
            max-width: 360px;
        }
        }

        @media (max-width: 640px){

        .nx-how-it-works{
            padding: 70px 5%;
        }

        .nx-how-head{
            margin-bottom: 60px;
        }

        .nx-how-head h2{
            font-size: 1.9rem;
        }

        .nx-how-head p{
            font-size: 0.95rem;
        }

        .nx-how-flow{
            flex-direction: column;
            gap: 32px;
        }

        .nx-step{
            padding: 30px 22px;
            max-width: 100%;
        }

        .nx-step h4{
            font-size: 1.2rem;
        }

        .nx-step p{
            font-size: 0.95rem;
        }

        /* Mobile UX — disable hover flip */
        .nx-step:hover{
            transform: none;
        }

        .nx-step:hover .nx-step-icon img{
            transform: none;
        }
        }


        /********************samrt-farming ***************/
          .farming-hero-pro {
            background: linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),url('../img/industry/smartfarmhero.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
               position: relative;
            min-height: 100vh;              /* full screen height */
            width: 100%;
            justify-content: center;        /* horizontal center */
            overflow: hidden;
        }

         .poc-hero-pro {
            background: linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),url('../img/what-we-do/heroimage.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
               position: relative;
            min-height: 100vh;              /* full screen height */
            width: 100%;
            justify-content: center;        /* horizontal center */
            overflow: hidden;
        }


        .warehousehero {
            background:url('../img/industry/warehousehero1.webp') center/cover no-repeat;
            position: relative;
            min-height: 100vh;
            /* background: radial-gradient(circle at top, #0f1c2d, var(--bg)); */
            display: flex;
            align-items: center;
            padding: 80px 20px;
               position: relative;
            min-height: 100vh;              /* full screen height */
            width: 100%;
            justify-content: center;        /* horizontal center */
            overflow: hidden;
        }


        /* OVERLAY */
        .farming-hero-pro .drone-hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45); /* light dark overlay */
            z-index: 1;
        }

        /* INNER WRAPPER */
        .farming-hero-pro .drone-hero-inner {
            text-align: center;
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 700px;
            padding: 0 20px;
            display: flex;
            align-items: center;            /* center vertically */
        }

        /* TEXT BLOCK */
        .farming-hero-pro .drone-hero-text {
            text-align: center;
             z-index: 2;
            max-width: 800px;
        }

        /* BADGE */
        .farming-hero-pro .drone-hero-badge {
            display: inline-block;
            font-size: 10px;
            letter-spacing: 1px;
            color: #7dd3fc;
            margin-bottom: 14px;
            text-transform: uppercase;
        }

        /* HEADING */
        .farming-hero-pro h1 {
            font-size: 3rem;
            line-height: 1.15;
            color: #ffffff;
            margin-bottom: 18px;
            font-weight: 500;
        }

        /* PARAGRAPH */
        .farming-hero-pro p {
            max-width: 820px;
            font-size: 16px;
            line-height: 1.7;
            color: #cbd5e1;
            margin-bottom: 28px;
        }

        /* CTA BUTTONS */
        .farming-hero-pro .drone-hero-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            justify-content: center;
        }

        @media (max-width: 1024px){

        .farming-hero-pro{
            padding: 90px 20px;
        }

        .farming-hero-pro h1{
            font-size: 2.5rem;
        }

        .farming-hero-pro p{
            font-size: 15px;
            max-width: 720px;
        }

        .farming-hero-pro .drone-hero-inner{
            max-width: 640px;
        }
        }
        @media (max-width: 768px){

        .farming-hero-pro{
            min-height: 90vh;
            padding: 80px 16px;
        }

        .farming-hero-pro .drone-hero-inner{
            max-width: 600px;
            padding: 0 16px;
        }

        .farming-hero-pro h1{
            font-size: 2.2rem;
            line-height: 1.2;
        }

        .farming-hero-pro p{
            font-size: 14.5px;
            line-height: 1.6;
        }

        .farming-hero-pro .drone-hero-cta{
            gap: 12px;
        }
        }

        @media (max-width: 640px){

        .farming-hero-pro{
            min-height: 100vh;
            padding: 70px 14px;
        }

        .farming-hero-pro .drone-hero-inner{
            padding: 0 10px;
        }

        .farming-hero-pro .drone-hero-badge{
            font-size: 9px;
            margin-bottom: 10px;
        }

        .farming-hero-pro h1{
            font-size: 1.9rem;
            line-height: 1.25;
            margin-bottom: 14px;
        }

        .farming-hero-pro p{
            font-size: 14px;
            margin-bottom: 22px;
        }

        .farming-hero-pro .drone-hero-cta{
            /* flex-direction: column; */
            gap: 10px;
        }

        .farming-hero-pro .drone-hero-cta a,
        .farming-hero-pro .drone-hero-cta button{
            /* width: 100%; */
            text-align: center;
        }
        }

            .farming-ai-grid {
            padding: 100px;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 70px;
            align-items: center;
        }

        .farming-ai-visual {
            position: relative;
            height: 520px;
            border-radius: 22px;
            overflow: hidden;
            background: #040813;
        }

        .farming-ai-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.9s ease-in-out;
        }

        .farming-ai-img.active {
            opacity: 1;
        }

        /* RIGHT CONTENT */
        .farming-ai-content h2 {
            font-size: 3rem;
            line-height: 1.2;
            color: #fff;
            margin-bottom: 18px;
        }

        .farming-ai-content p {
            color: #cbd5e1;
            line-height: 1.75;
            font-size: 1.1rem;
            margin-bottom: 14px;
        }


        @media (max-width: 1024px){

        .farming-ai-grid{
            padding: 90px 6%;
            gap: 60px;
        }

        .farming-ai-visual{
            height: 480px;
        }

        .farming-ai-content h2{
            font-size: 2.5rem;
        }

        .farming-ai-content p{
            font-size: 1.05rem;
        }
        }

        @media (max-width: 768px){

        .farming-ai-grid{
            padding: 80px 6%;
            grid-template-columns: 1fr;
            gap: 60px;
        }

        .farming-ai-visual{
            height: 420px;
            max-width: 640px;
            /* margin: auto; */
        }

        .farming-ai-content{
            text-align: center;
        }

        .farming-ai-content p{
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
            font-size: 1rem;
        }

        .farming-ai-content h2{
            font-size: 2.2rem;
        }
        }

        @media (max-width: 640px){

        .farming-ai-grid{
            padding: 70px 5%;
            gap: 40px;
        }

        .farming-ai-visual{
            height: 300px;
            border-radius: 16px;
        }

        .farming-ai-content h2{
            font-size: 1.9rem;
            line-height: 1.25;
        }

        .farming-ai-content p{
            font-size: 0.95rem;
            line-height: 1.6;
        }
        }



        .farming-features-section {
            padding: 100px 0;
            background: #040813;
        }

        .farming-features-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 90px;
        }

        .farming-features-header h2 {
            font-size: 3rem;
            font-weight: 500;
            letter-spacing: 1px;
            margin-bottom: 14px;
            color: #fff;
        }

        .farming-features-header p {
            font-size: 1.2rem;
            line-height: 1.7;
            color: #cccc;
        }

        /* GRID */
        .farming-features-grid {
        padding: 0 100px 0px 100px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px 100px;
        }

        /* CARD */
        .farming-feature-card {
            text-align: center;
            padding: 20px;
        }

        .farming-feature-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 20px;
            border-radius: 50%;
                background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .farming-feature-icon img {
            width: 42px;
            height: 42px;
        }

        .farming-feature-card h4 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #ffff;
        }

        .farming-feature-card p {
            font-size: 1.1rem;
            line-height: 1.65;
            color: #cccc;
        }

        @media (max-width: 1024px){

        .farming-features-section{
            padding: 90px 0;
        }

        .farming-features-header h2{
            font-size: 2.5rem;
        }

        .farming-features-header p{
            font-size: 1.1rem;
        }

        .farming-features-grid{
            padding: 0 60px;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px 60px;
        }

        .farming-feature-icon{
            width: 80px;
            height: 80px;
        }

        .farming-feature-card h4{
            font-size: 1.35rem;
        }

        .farming-feature-card p{
            font-size: 1rem;
        }
        }

        @media (max-width: 768px){

        .farming-features-section{
            padding: 80px 0;
        }

        .farming-features-header{
            margin-bottom: 50px;
            padding: 0 20px;
        }

        .farming-features-header h2{
            font-size: 2.2rem;
        }

        .farming-features-header p{
            font-size: 1rem;
        }

        .farming-features-grid{
            padding: 0 40px;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .farming-feature-card{
            padding: 16px;
        }
        }

        @media (max-width: 640px){

        .farming-features-section{
            padding: 70px 0;
        }

        .farming-features-header h2{
            font-size: 1.9rem;
        }

        .farming-features-header p{
            font-size: 0.95rem;
        }

        .farming-features-grid{
            padding: 0 20px;
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .farming-feature-icon{
            width: 70px;
            height: 70px;
            margin-bottom: 16px;
        }

        .farming-feature-icon img{
            width: 34px;
            height: 34px;
        }

        .farming-feature-card h4{
            font-size: 1.25rem;
        }

        .farming-feature-card p{
            font-size: 0.95rem;
            line-height: 1.6;
        }
        }





        /* ===== HOW IT WORKS SECTION ===== */
        .hwx-section {
        background: #040813;
        color: #ffffff;
        padding: 100px 20px 100px;
        
        }

        /* HEADER */
        .hwx-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 80px;
        }

        .hwx-pill {
        display: inline-block;
        /* background: #4da3ff;; */
        color: #4da3ff;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: 13px;
        }

        .hwx-title {
        font-size: 3rem;
        margin-bottom: 12px;
        }

        .hwx-subtitle {
        color: #cccccc;
        font-size: 1.2rem;
        }

        /* FLOW */
        .hwx-flow {
        max-width: 1440px;
            margin: auto;
            position: relative;
            display: flex;
            flex-direction: column;
            /* gap: 50px*/
        }

        /* CARD */
        .hwx-card {
        width: 480px;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
        border-radius: 16px;
        padding: 30px;

        }

        .hwx-card h3 {
        margin: 15px 0 10px;
        font-size: 1.5rem;
        }

        .hwx-card p {
        font-size: 1.1rem;
        color: #b0b0b0;
        }

        /* ICON */
        .hwx-icon img{
        width: 48px;
        height: 48px;
        /* background: #7CFF6B; */
        color: #000;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        }

        /* ALIGNMENT */
        .hwx-left {
        align-self: flex-start;
        }

        .hwx-right {
        align-self: flex-end;
        }

        /* CONNECTOR */
        .hwx-connector {
            width: 100%;
            height: 98px;
            position: relative;
        }

         .hwx-connector::before {
            content: "";
            position: absolute;
            width: 56%;
            height: 53%;
            /* border-top: 2px dashed #4da3ff; */
        }

        .hwx-connector::after {
            content: "";
            position: absolute;
            width: 64%;
            height: 95%;
            border-top: 2px dashed #4da3ff;
        }

         .hwx-connector.hwx-right::before {
            /* bottom: 50px; */
            right: 403px;
            border-left: 2px dashed #4da3ff;
            border-bottom: 2px dashed #4da3ff;
            /* border-bottom: 2px dashed #4da3ff; */
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
        
        }

          .hwx-connector.hwx-left::before {
            /* bottom: 50px; */
            right: 246px;
            border-right: 2px dashed #4da3ff;
            border-bottom: 2px dashed #4da3ff;
            border-right: 2px dashed #4da3ff;
            /* border-bottom-left-radius: 30px; */
            border-bottom-right-radius: 30px;
        
        }

        .hwx-connector.hwx-right::after {
            top: 52px;
            right: 245px;
            border-right: 2px dashed #4da3ff;
            border-top-right-radius: 30px;
        
        }

        .hwx-connector.hwx-left::after {
            top: 51px;
            left: 236px;
            border-left: 2px dashed #4da3ff;
            border-top: 2px dashed #4da3ff;
            border-top-left-radius: 30px;
        }

        /* RESPONSIVE */
        @media (max-width: 1024px){

        .hwx-section{
            padding: 90px 20px;
        }

        .hwx-title{
            font-size: 2.5rem;
        }

        .hwx-subtitle{
            font-size: 1.1rem;
        }

        .hwx-card{
            width: 420px;
            padding: 26px;
        }

        .hwx-card h3{
            font-size: 1.35rem;
        }

        .hwx-card p{
            font-size: 1rem;
        }

        .hwx-connector::after{
            width: 60%;
        }
        }
        @media (max-width: 768px){

        .hwx-section{
            padding: 80px 16px;
        }

        .hwx-header{
            margin-bottom: 60px;
        }

        .hwx-title{
            font-size: 2.2rem;
        }

        .hwx-subtitle{
            font-size: 1rem;
        }

        /* Cards center align */
        .hwx-flow{
            align-items: center;
        }

        .hwx-card{
            width: 100%;
            max-width: 520px;
        }

        .hwx-left,
        .hwx-right{
            align-self: center;
        }

        /* Simplify connectors */
        .hwx-connector{
            height: 60px;
        }

        .hwx-connector::after{
            width: 70%;
            left: 50%;
            transform: translateX(-50%);
            border-left: none;
            border-right: none;
        }
        }
        @media (max-width: 640px){

        .hwx-section{
            padding: 70px 14px;
        }

        .hwx-title{
            font-size: 1.9rem;
        }

        .hwx-subtitle{
            font-size: 0.95rem;
        }

        .hwx-flow{
            gap: 30px;
        }

        .hwx-card{
            padding: 22px;
        }

        .hwx-card h3{
            font-size: 1.2rem;
        }

        .hwx-card p{
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Mobile UX — hide connectors */
        .hwx-connector{
            display: none;
        }
        }



        .farm-solutions-cards {
            max-width: 1800px;
            padding: 110px 50px;
            background: #020617;
            color: #fff;
            margin: auto;
        }

        .farm-solutions-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 70px;
        }

        .farm-solutions-header h2 {
        font-size: 3rem;
        margin-bottom: 14px;
        }

        .farm-solutions-header p {
        color: #cccccc;
        font-size: 1.2rem;
        line-height: 1.7;
        }

        /* GRID */
        .farm-solution-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 260px;
        gap: 25px;
        }

        /* CARD */
        .solution-card {
        border: 1px solid #cccc;
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        }

        .solution-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.37);
        z-index: 1;
        pointer-events: none;
        }

        /* TOP ROW */
        .solution-wide-top {
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
        }

        .solution-vert-top-1 {
        grid-column: 2 / span 1;
        grid-row: 1 / span 2;
        }

        .solution-vert-top-2 {
        /* grid-column: 5 / span 1; */
        grid-row: 3 / span 2;
        }

        /* BOTTOM ROW */
        .solution-vert-bottom-1 {
        grid-column: 1 / span 1;
        grid-row: 3 / span 2;
        }

        .solution-vert-bottom-2 {
        grid-column: 2 / span 1;
        grid-row: 3 / span 2;
        }

        .solution-wide-bottom {
        /* grid-column: 3 / span 3; */
        grid-row: 3 / span 2;
        }


        /* BOTTOM TITLE (ALWAYS VISIBLE) */
        .solution-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px 18px;
        background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
        font-size: 16px;
        font-weight: 600;
        z-index: 2;
        }

        /* HOVER OVERLAY */
        /* BOTTOM INFO CONTAINER */
        .solution-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 18px 20px;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.85),
            rgba(0,0,0,0.35),
            rgba(0,0,0,0)
        );
        overflow: hidden;
        transition: padding 0.35s ease;
        z-index: 2;
        }

        .solution-info h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        }

        .solution-info p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #e5e7eb;
        margin-top: 8px;

        transform: translateY(12px);
        opacity: 0;
        transition: all 0.35s ease;
        }

        /* HOVER EFFECT */
        .solution-card:hover .solution-info {
        padding-bottom: 28px;
        }

        .solution-card:hover .solution-info p {
        transform: translateY(0);
        opacity: 1;
        }


        /* RESPONSIVE */
        @media (max-width: 1024px){

        .farm-solutions-cards{
            padding: 100px 0;
        }

        .farm-solutions-header h2{
            font-size: 2.5rem;
        }

        .farm-solutions-header p{
            font-size: 1.1rem;
        }

        .farm-solution-grid{
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 240px;
            gap: 20px;
        }

        /* Re-map layout */
        .solution-wide-top{
            grid-column: 1 / span 4;
            grid-row: 1 / span 2;
        }

        .solution-vert-top-1{
            grid-column: 1 / span 2;
            grid-row: 3 / span 2;
        }

        .solution-vert-top-2{
            grid-column: 3 / span 2;
            grid-row: 3 / span 2;
        }

        .solution-vert-bottom-1,
        .solution-vert-bottom-2{
            grid-column: span 2;
            grid-row: auto;
        }

        .solution-wide-bottom{
            grid-column: 1 / span 4;
            grid-row: auto;
        }
        }
        @media (max-width: 768px){

        .farm-solutions-cards{
            padding: 90px 20px;
        }

        .farm-solutions-header{
            margin-bottom: 60px;
        }

        .farm-solutions-header h2{
            font-size: 2.2rem;
        }

        .farm-solutions-header p{
            font-size: 1rem;
        }

        .farm-solution-grid{
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 240px;
            gap: 18px;
        }

        /* Tablet = simple symmetry */
        .solution-wide-top,
        .solution-wide-bottom{
            grid-column: span 2;
            grid-row: auto;
        }

        .solution-vert-top-1,
        .solution-vert-top-2,
        .solution-vert-bottom-1,
        .solution-vert-bottom-2{
            grid-column: span 1;
            grid-row: auto;
        }
        }
        @media (max-width: 640px){

        .farm-solutions-cards{
            padding: 70px 14px;
        }

        .farm-solutions-header h2{
            font-size: 1.9rem;
        }

        .farm-solutions-header p{
            font-size: 0.95rem;
        }

        .farm-solution-grid{
            grid-template-columns: 1fr;
            grid-auto-rows: 220px;
            gap: 16px;
        }

        /* All cards full-width */
        .solution-wide-top,
        .solution-wide-bottom,
        .solution-vert-top-1,
        .solution-vert-top-2,
        .solution-vert-bottom-1,
        .solution-vert-bottom-2{
            grid-column: span 1;
            grid-row: auto;
        }

        /* Mobile UX — overlay always visible */
        .solution-info p{
            opacity: 1;
            transform: none;
        }
        }





        /******************************smart-manufacturing*************************/
.mfg-about-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #0b0f1a, #0e1425);
    color: #e5e7eb;
}

.mfg-about-inner {
    max-width: 1500px;
    display: flex;
    align-items: center;
    gap: 58px;
    margin: auto;
}

/* LEFT IMAGES */
.mfg-about-images {
 position: relative;
    flex: 0 0 43%;
    min-height: 605px;
}

/* COMMON RECTANGLE STYLE */
.mfg-img-rect {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    object-fit: cover;
}

/* FIRST IMAGE – TOP */
.mfg-img-top {
    width: 57%;
    left: -24px;
    top: 0;
    z-index: 2;
}

/* SECOND IMAGE – RIGHT & LOWER */
.mfg-img-bottom {
   width: 59%;
    right: -107px;
    top: 90px;
    z-index: 1;
}

/* FLOATING ROUND BADGE */
.mfg-floating-badge {
    position: absolute;
    top: -35px;
    left: 40%;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #1e88e5, #4da3ff);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
}


/* FLOATING BADGE */
.mfg-floating-badge {
    position: absolute;
    top: -30px;
    right: 40px;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #1e88e5, #4da3ff);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    confirm: text-align;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* RIGHT CONTENT */
.mfg-about-content {
    flex: 0 0 45%;
}

.mfg-section-badge {
        color: #4da3ff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
}

.mfg-about-content h2 {
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.mfg-about-desc {
    font-size: 1.2rem;
    color: #c7c9d1;
    line-height: 1.7;
    margin-bottom: 40px;
}
/* FEATURE GRID */
.mfg-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    margin-bottom: 40px;
}

/* FEATURE CARD */
.mfg-feature-card {
    transition: 0.3s ease;
}

.mfg-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* background: rgba(77,163,255,0.15); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.5s ease;
}

.mfg-feature-icon img {
    width: 50px;
    filter: brightness(0) invert(1);
    transition: transform 0.6s ease;
}

.mfg-feature-card:hover .mfg-feature-icon {
   background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
    /* box-shadow: 0 0 25px rgba(77,163,255,0.6); */
}

.mfg-feature-card:hover .mfg-feature-icon img {
    transform: rotateY(180deg);
}

.mfg-feature-card h4 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.mfg-feature-card p {
    font-size: 1rem;
    color: #b5b7c3;
}


@media (max-width: 1024px){

  .mfg-about-section{
    padding: 100px 20px;
  }

  .mfg-about-inner{
    gap: 48px;
  }

  .mfg-about-images{
    flex: 0 0 45%;
    min-height: 540px;
  }

  .mfg-img-top{
    width: 60%;
    left: -10px;
  }

  .mfg-img-bottom{
    width: 60%;
    right: -70px;
    top: 80px;
  }

  .mfg-about-content h2{
    font-size: 2.5rem;
  }

  .mfg-about-desc{
    font-size: 1.1rem;
  }

  .mfg-feature-grid{
    gap: 30px;
  }

  .mfg-feature-icon{
    width: 70px;
    height: 70px;
  }

  .mfg-feature-icon img{
    width: 44px;
  }

  .mfg-feature-card h4{
    font-size: 1.35rem;
  }

  .mfg-feature-card p{
    font-size: 0.95rem;
  }
}
@media (max-width: 768px){

  .mfg-about-section{
    padding: 90px 20px;
  }

  .mfg-about-inner{
    flex-direction: column;
    gap: 70px;
  }

  .mfg-about-images{
    flex: 0 0 100%;
    min-height: 460px;
    max-width: 600px;
    margin: auto;
  }

  .mfg-img-top{
    width: 65%;
    left: 0;
  }

  .mfg-img-bottom{
    width: 65%;
    right: 0;
    top: 100px;
  }

  .mfg-floating-badge{
    right: 20px;
    top: -25px;
    width: 80px;
    height: 80px;
    font-size: 10px;
  }

  .mfg-about-content{
    flex: 0 0 100%;
    text-align: center;
  }

  .mfg-about-desc{
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
   .mfg-feature-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mfg-feature-card{
    text-align: center;
  }

  .mfg-feature-icon{
    margin-left: auto;
    margin-right: auto;
  }

  /* Tablet/mobile UX — hover soften */
  .mfg-feature-card:hover .mfg-feature-icon img{
    transform: none;
  }
}
@media (max-width: 640px){

  .mfg-about-section{
    padding: 70px 14px;
  }

  .mfg-about-images{
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }

  /* Remove absolute overlap on mobile */
  .mfg-img-rect{
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
  }

  .mfg-floating-badge{
    position: relative;
    margin: 0 auto 16px;
    top: auto;
    right: auto;
  }

  .mfg-about-content h2{
    font-size: 1.9rem;
  }

  .mfg-about-desc{
    font-size: 0.95rem;
    line-height: 1.6;
  }
   .mfg-feature-grid{
    gap: 24px;
    margin-bottom: 30px;
  }

  .mfg-feature-icon{
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }

  .mfg-feature-icon img{
    width: 36px;
  }

  .mfg-feature-card h4{
    font-size: 1.2rem;
  }

  .mfg-feature-card p{
    font-size: 0.9rem;
    line-height: 1.5;
  }
}



.mfg-core-section {
    padding: 120px 50px;
    background: radial-gradient(circle at top, #0e1628, #070b16);
    color: #e5e7eb;
}
.mfg-core-container{
    margin: auto;
    max-width: 1800px;
}
.mfg-core-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 80px;
}

.mfg-core-header h2 {
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 16px;
}

.mfg-core-header p {
    color: #b5b7c3;
    font-size: 1.2rem;
    line-height: 1.6;
}

.mfg-core-pill {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(77,163,255,0.15);
    color: #4da3ff;
    font-size: 13px;
    font-weight: 600;
}

/* GRID */
.mfg-core-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.mfg-core-col {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* CARD */
.mfg-core-card {
       display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 14px;
    /* background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06); */
    /* transition: 0.3s ease; */
    opacity: 0;
}

.mfg-core-card:hover {
   background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
    transform: translateY(-4px);
}

/* HIGHLIGHT CARD */
.mfg-core-card-highlight {
   border-color: rgba(77,163,255,0.5);
    background: linear-gradient(180deg, rgba(30,136,229,0.18), rgba(30,136,229,0.05));
}

/* ICON */
.mfg-core-icon {
     width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(77,163,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mfg-core-icon img {
   width: 50px;
    height: 50px;
    filter: brightness(0) invert(1);
}

.mfg-core-card h4 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.mfg-core-card p {
    font-size: 1.2rem;
    color: #b5b7c3;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1024px){

  .mfg-core-section{
    padding: 100px 40px;
  }

  .mfg-core-header h2{
    font-size: 2.5rem;
  }

  .mfg-core-header p{
    font-size: 1.1rem;
  }

  .mfg-core-grid{
    gap: 60px;
  }

  .mfg-core-card h4{
    font-size: 1.35rem;
  }

  .mfg-core-card p{
    font-size: 1.05rem;
  }

  .mfg-core-icon{
    width: 64px;
    height: 64px;
  }

  .mfg-core-icon img{
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 768px){

  .mfg-core-section{
    padding: 90px 24px;
  }

  .mfg-core-header{
    margin-bottom: 60px;
  }

  .mfg-core-header h2{
    font-size: 2.2rem;
  }

  .mfg-core-header p{
    font-size: 1rem;
  }

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

  .mfg-core-col{
    gap: 22px;
  }

  .mfg-core-card{
    opacity: 1; /* tablet/mobile par animation safe */
  }
}
@media (max-width: 640px){

  .mfg-core-section{
    padding: 70px 14px;
  }

  .mfg-core-header h2{
    font-size: 1.9rem;
  }

  .mfg-core-header p{
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .mfg-core-pill{
    font-size: 11px;
    padding: 6px 14px;
  }

  .mfg-core-card{
    padding: 18px;
    gap: 14px;
  }

  .mfg-core-card h4{
    font-size: 1.2rem;
  }

  .mfg-core-card p{
    font-size: 0.95rem;
  }

  .mfg-core-icon{
    width: 56px;
    height: 56px;
  }

  .mfg-core-icon img{
    width: 36px;
    height: 36px;
  }
}



.mfg-zigzag-section {
    padding: 150px 40px;
    background: radial-gradient(circle at top, #0e1628, #070b16);
    color: #e5e7eb;
}
.mfg-zigzag-container{
    width: 100%;
    max-width: 1900px;
    margin: auto;
}

.mfg-zigzag-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 90px;
}

.mfg-zigzag-header h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 12px;
}

.mfg-zigzag-header p {
    font-size: 1.2rem;
    color: #cccc;
}

.mfg-zigzag-flow {
    display: flex;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    position: relative;
}

/* CARD */
.mfg-zigzag-card {
    position: relative;
     /* background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%); */
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 24px;
    padding: 60px 22px 28px;
    text-align: center;
    transition: 0.3s;
}

/* ICON */
.mfg-zigzag-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
       background: linear-gradient(rgb(15 51 138) 0%, rgb(9 16 113) 100%);
            /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
            backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mfg-zigzag-icon img {
        transition: transform 0.6s ease;
    transform-style: preserve-3d;
    width: 50px;
    filter: brightness(0) invert(1);
}
.mfg-zigzag-card:hover .mfg-zigzag-icon img{
    transform: rotateY(180deg);
}

.mfg-zigzag-card:hover {
    transform: translateY(-6px);
}
    

/* ICON POSITION */
.mfg-zigzag-card.top .mfg-zigzag-icon {
    top: -40px;
}

.mfg-zigzag-card.bottom .mfg-zigzag-icon {
    bottom: -57px;
}

/* TEXT */
.mfg-zigzag-card h4 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.mfg-zigzag-card p {
    color: #b5b7c3;
    font-size: 1.2rem;
    line-height: 1.6;
}


/* ARROW */
.mfg-flow-arrow {
    grid-column: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mfg-flow-arrow img {
    width: 35px;
    animation: slideRight 2s infinite ease-in-out;
}

/* PULSE ANIMATION */
/* SLIDE RIGHT ANIMATION */
@keyframes slideRight {
    0% {
        opacity: 0.4;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(12px);
    }
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }
}

/* RESPONSIVE */
@media (max-width: 1024px){

  .mfg-zigzag-section{
    padding: 120px 30px;
  }

  .mfg-zigzag-header h2{
    font-size: 2.5rem;
  }

  .mfg-zigzag-header p{
    font-size: 1.1rem;
  }

  .mfg-zigzag-flow{
    gap: 20px;
  }

  .mfg-zigzag-card{
    padding: 52px 20px 26px;
  }

  .mfg-zigzag-card h4{
    font-size: 1.35rem;
  }

  .mfg-zigzag-card p{
    font-size: 1.05rem;
  }

  .mfg-zigzag-icon{
    width: 72px;
    height: 72px;
  }

  .mfg-zigzag-icon img{
    width: 44px;
  }
}
@media (max-width: 768px){

  .mfg-zigzag-section{
    padding: 100px 20px;
  }

  .mfg-zigzag-header{
    margin-bottom: 70px;
  }

  .mfg-zigzag-header h2{
    font-size: 2.2rem;
  }

  .mfg-zigzag-header p{
    font-size: 1rem;
  }

  /* Stack cards vertically */
  .mfg-zigzag-flow{
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .mfg-zigzag-card{
    max-width: 520px;
    width: 100%;
  }

  /* Normalize icon position */
  .mfg-zigzag-card.top .mfg-zigzag-icon,
  .mfg-zigzag-card.bottom .mfg-zigzag-icon{
    top: -36px;
    bottom: auto;
  }

  /* Hide arrows on tablet */
  .mfg-flow-arrow{
    display: none;
  }
}
@media (max-width: 640px){

  .mfg-zigzag-section{
    padding: 80px 14px;
  }

  .mfg-zigzag-header h2{
    font-size: 1.9rem;
  }

  .mfg-zigzag-header p{
    font-size: 0.95rem;
  }

  .mfg-zigzag-flow{
    gap: 46px;
  }

  .mfg-zigzag-card{
    padding: 44px 18px 22px;
  }

  .mfg-zigzag-card h4{
    font-size: 1.2rem;
  }

  .mfg-zigzag-card p{
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .mfg-zigzag-icon{
    width: 60px;
    height: 60px;
    top: -30px;
  }

  .mfg-zigzag-icon img{
    width: 36px;
  }

  /* Mobile UX — disable hover flip */
  .mfg-zigzag-card:hover .mfg-zigzag-icon img{
    transform: none;
  }
}



.nx-solution-grid-section {
    padding: 120px 50px;
    background: #070b16;
}

.nx-solution-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 235px);
    gap: 24px;
}


/* HEADER */
.nx-usecase-header {
  text-align: center;
  margin-bottom: 70px;
}

.nx-usecase-header h2 {
  font-size: 3rem;
  font-weight: 500;
  color: #fff;
}

.nx-usecase-header p {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #cccc;
}

/* CARD BASE */
.nx-solution-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
}

/* POSITIONING */
.rect-1 { grid-column: 1 / span 3; grid-row: 3 / span 2; }
.rect-2 { grid-column: 4 / span 3; grid-row: 3 / span 2; }

.sq-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.sq-2 { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.sq-3 { grid-column: 5 / span 2; grid-row: 1 / span 2; }

/* BG IMAGE */
.nx-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* BOTTOM TITLE */
.nx-card-title {
    font-size: 1.5rem;
    position: absolute;
    bottom: 16px;
    left: 20px;
    right: 20px;
    color: #fff;
    font-weight: 600;
    z-index: 3;
}
.nx-solution-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.27);
    z-index: 1;
    pointer-events: none;

}
    
.nx-solution-card:hover .nx-card-title {
    opacity: 0;
    transform: translateY(10px);
}

/* OVERLAY CONTENT */
.nx-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 11, 22, 0.75);
    backdrop-filter: blur(6px);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    color: #fff;
    transition: opacity 0.5s ease;
    z-index: 2;
}

/* BULLET POINTS */
.nx-card-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nx-card-overlay ul li {
    position: relative;
    padding-left: 16px;
     font-size: 1rem;
   color: #f6f2f2cc;
    margin-bottom: 8px;
}

/* BULLET DOT */
.nx-card-overlay ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background: #3b82f6; /* accent blue */
    border-radius: 50%;
}

.nx-card-overlay h3 {
      font-size: 1.5rem;
    margin-bottom: 10px;
}
.nx-card-overlay p{
        font-size: 1.1rem;
    margin-bottom: 10px;
    color: #f6f2f2cc;
}


/* HOVER EFFECT */
.nx-solution-card:hover .nx-card-bg {
    transform: scale(1.08);
    filter: blur(6px);
}

.nx-solution-card:hover .nx-card-overlay {
    opacity: 1;
}

@media (max-width: 1024px){

  .nx-solution-grid-section{
    padding: 100px 30px;
  }

  .nx-usecase-header h2{
    font-size: 2.5rem;
  }

  .nx-usecase-header p{
    font-size: 1.1rem;
  }

  .nx-solution-grid{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 220px);
    gap: 20px;
  }

  /* Re-map positions */
  .sq-1,
  .sq-2{
    grid-column: span 2;
    grid-row: span 2;
  }

  .sq-3{
    grid-column: 1 / span 4;
    grid-row: span 2;
  }

  .rect-1,
  .rect-2{
    grid-column: span 4;
    grid-row: span 2;
  }
}
@media (max-width: 768px){

  .nx-solution-grid-section{
    padding: 90px 20px;
  }

  .nx-usecase-header{
    margin-bottom: 60px;
  }

  .nx-usecase-header h2{
    font-size: 2.2rem;
  }

  .nx-usecase-header p{
    font-size: 1rem;
  }

  .nx-solution-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 18px;
  }

  /* All cards equal */
  .sq-1,
  .sq-2,
  .sq-3,
  .rect-1,
  .rect-2{
    grid-column: span 2;
    grid-row: auto;
    min-height: 260px;
  }

   .nx-card-overlay h3{
    font-size: 1.25rem;
  }

  .nx-card-overlay p{
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .nx-card-overlay ul li{
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .nx-card-overlay ul li::before{
    top: 6px;
  }
}
@media (max-width: 640px){

  .nx-solution-grid-section{
    padding: 70px 14px;
  }

  .nx-usecase-header h2{
    font-size: 1.9rem;
  }

  .nx-usecase-header p{
    font-size: 0.95rem;
  }

  .nx-solution-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Single column cards */
  .sq-1,
  .sq-2,
  .sq-3,
  .rect-1,
  .rect-2{
    grid-column: span 1;
    min-height: 240px;
  }

  /* Mobile UX — no hover dependency */
  .nx-card-overlay{
    /* opacity: 1; */
    background: rgba(7, 11, 22, 0.65);
  }

  .nx-solution-card:hover .nx-card-bg{
    transform: none;
    filter: none;
  }

  .nx-card-title{
    font-size: 1rem;
    /* display: none; */
  }
    .nx-card-overlay h3{
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .nx-card-overlay p{
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  .nx-card-overlay ul li{
    font-size: 0.85rem;
    padding-left: 14px;
  }

  .nx-card-overlay ul li::before{
    width: 5px;
    height: 5px;
    top: 6px;
  }
}



/*********************************industry-warehouse**********************/

.warehouse-overview {
    padding: 150px 50px;
    background: #0b1220;
}

.warehouse-overview-container {
    /* max-width: 1200px; */
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.warehouse-overview-video video {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.warehouse-overview-content .warehouse-overview-tag {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 1px;
    color: #4da3ff;
    margin-bottom: 12px;
}

.warehouse-overview-content h2 {
    font-size: 3rem;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 18px;
}

.warehouse-overview-content p {
    color: #b9c3d6;
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.warehouse-overview-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.warehouse-overview-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.warehouse-overview-points img {
    width: 34px;
    height: 34px;
}

.warehouse-overview-points span {
    color: #e5ebf5;
    font-size: 1.2rem;
    line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 1024px){

  .warehouse-overview{
    padding: 120px 40px;
  }

  .warehouse-overview-container{
    gap: 50px;
  }

  .warehouse-overview-content h2{
    font-size: 2.5rem;
  }

  .warehouse-overview-content p{
    font-size: 1.1rem;
  }

  .warehouse-overview-points span{
    font-size: 1.1rem;
  }

  .warehouse-overview-points img{
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 768px){

  .warehouse-overview{
    padding: 70px 14px;

  }

  .warehouse-overview-container{
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* Video on top */
  .warehouse-overview-video{
    max-width: 720px;
    margin: auto;
  }

  .warehouse-overview-content{
    text-align: center;
  }

  .warehouse-overview-content p{
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .warehouse-overview-points{
    max-width: 520px;
    margin: auto;
  }

  .warehouse-overview-points li{
    justify-content: flex-start;
  }
}
@media (max-width: 640px){

  .warehouse-overview{
    padding: 70px 14px;

  }

  .warehouse-overview-content h2{
    font-size: 1.9rem;
    line-height: 1.25;
  }

  .warehouse-overview-content p{
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  .warehouse-overview-points li{
    gap: 12px;
    margin-bottom: 14px;
  }

  .warehouse-overview-points img{
    width: 26px;
    height: 26px;
  }

  .warehouse-overview-points span{
    font-size: 0.95rem;
  }

  .warehouse-overview-video video{
    border-radius: 12px;
  }
}


.warehouse-features {
       padding: 90px 60px 120px;
   background: radial-gradient(circle at top left, #0b1225, #020617);
}

.warehouse-features-container {
    /* max-width: 1200px; */
    margin: auto;
    text-align: center;
}

.warehouse-features-title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 70px;
}

.warehouse-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
}

.warehouse-feature-item {
    text-align: left;
    opacity: 0;
    transform: translateY(40px);
}

.warehouse-feature-item img {
    width: 100px;
    margin-bottom: 18px;
    transition: transform 0.35s ease, filter 0.35s ease;
}
.warehouse-feature-item:hover .feature-line::after {
    width: 100%;
}

.warehouse-feature-item:hover img {
    transform: scale(1.1);
    /* filter: brightness(0) saturate(100%) invert(22%) sepia(78%)
            saturate(2700%) hue-rotate(210deg) brightness(90%) contrast(95%); */
}

.warehouse-feature-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.feature-line {
    width: 100%;
    height: 4px;
    background: #4da3ff;
    margin-bottom: 16px;
     position: relative;
    overflow: hidden;
}
.feature-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #1f3c88; /* dark blue fill */
    transition: width 0.4s ease;
}

.warehouse-feature-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

/* RESPONSIVE */
@media (max-width: 1024px){

  .warehouse-features{
    padding: 80px 40px 110px;
  }

  .warehouse-features-title{
    font-size: 30px;
    margin-bottom: 60px;
  }

  .warehouse-features-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }

  .warehouse-feature-item img{
    width: 90px;
  }

  .warehouse-feature-item h3{
    font-size: 1.35rem;
  }

  .warehouse-feature-item p{
    font-size: 1rem;
  }
}
@media (max-width: 768px){

  .warehouse-features{
    padding: 70px 24px 100px;
  }

  .warehouse-features-title{
    font-size: 26px;
    letter-spacing: 1px;
    margin-bottom: 50px;
  }

  .warehouse-features-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }

  .warehouse-feature-item{
    text-align: center;
  }

  .feature-line{
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 640px){

  .warehouse-features{
    padding: 60px 14px 90px;
  }

  .warehouse-features-title{
    font-size: 22px;
    margin-bottom: 40px;
  }

  .warehouse-features-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .warehouse-feature-item{
    opacity: 1;                 /* mobile ma no hidden state */
    transform: none;
  }

  .warehouse-feature-item img{
    width: 70px;
    margin-bottom: 14px;
  }

  .warehouse-feature-item h3{
    font-size: 1.2rem;
  }

  .warehouse-feature-item p{
    font-size: 0.95rem;
    line-height: 1.6;
  }
}


.how-infographic {
    padding: 100px 80px 200px;
    background: #040813;
}

.how-infographic span {
        display: flex;
    margin: auto;
    font-size: 13px;
    text-transform: uppercase;
    color:#4da3ff;
    align-content: stretch;
    justify-content: space-evenly;
}

.how-title {
        text-align: center;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 13px;

}
.how-para {
    text-align: center;
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 200px;
}

/* WRAPPER */
.how-wrapper {
   /*max-width: 1200px; */
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
}

/* SVG LINE */
.how-line {
   position: absolute;
    width: 100%;
    height: 431px;
    top: 65%;
    left: 0px;
    transform: translateY(-50%);
    z-index: 0;
}

/* CARD BASE */
.how-card {
       border-radius: 18px;
    position: relative;
    padding: 28px 22px;
    
    background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
    backdrop-filter: blur(14px);
    color: #fff;
}

/* ICON */
.how-card .ware-icon img{
    width: 46px;
    height: 46px;
    /* background: #fff; */
    /* border-radius: 12px; */
    margin-bottom: 14px;
}

/* TEXT */
.how-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.how-card p {
    font-size: 1rem;
    color: #ccc;
}

/* UP CARD */
.how-card.up {
    transform: translateY(-70px);
    /* border-left: 1px solid #4da3ff;
    border-right: 1px solid #4da3ff; */
    border-top: 1px solid #4da3ff;
}

/* DOWN CARD */
.how-card.down {
    transform: translateY(70px);
    /* border-left: 1px solid #4da3ff;
    border-right: 1px solid #4da3ff; */
    border-bottom: 1px solid #4da3ff;
}

/* MOBILE */
@media (max-width: 1024px){

  .how-infographic{
    padding: 90px 50px 160px;
  }

  .how-title{
    font-size: 2.5rem;
  }

  .how-para{
    font-size: 1.1rem;
    margin-bottom: 160px;
  }

  .how-wrapper{
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .how-card h3{
    font-size: 1.35rem;
  }

  .how-card p{
    font-size: 0.95rem;
  }

  .how-line{
    height: 380px;
    top: 64%;
  }
}
@media (max-width: 768px){

  .how-infographic{
    padding: 80px 24px 120px;
  }

  .how-title{
    font-size: 2.2rem;
  }

  .how-para{
    font-size: 1rem;
    margin-bottom: 100px;
  }

  /* Switch to vertical layout */
  .how-wrapper{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Remove zig-zag offsets */
  .how-card.up,
  .how-card.down{
    transform: none;
    border-top: none;
    border-bottom: none;
  }

  /* Hide SVG line */
  .how-line{
    display: none;
  }

  .how-card{
    max-width: 520px;
    margin: auto;
    text-align: center;
  }
}
@media (max-width: 640px){

  .how-infographic{
    padding: 70px 14px 90px;
  }

  .how-title{
    font-size: 1.9rem;
  }

  .how-para{
    font-size: 0.95rem;
    margin-bottom: 70px;
  }

  .how-card{
    padding: 22px 18px;
  }

  .how-card h3{
    font-size: 1.2rem;
  }

  .how-card p{
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .how-card .ware-icon img{
    width: 38px;
    height: 38px;
  }
}




/* HEADER */
.solutions-header {
    text-align: center;
    /* margin-bottom: 90px; */
}

.solutions-header h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 14px;
}

.solutions-header p {
    max-width: 700px;
    margin: auto;
    font-size: 1.2rem;
    color: #ccc;
}




.ws-solutions-grid {
    padding: 100px 0;
    background: #020617;
}

.ws-grid-container {
    /* max-width: 1200px; */
    padding: 60px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 270px);
    gap: 20px;
}

/* CARD BASE */
.ws-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
}

/* GRID PLACEMENT */
.ws-card-big {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}

.ws-card-one {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.ws-card-two {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
}

.ws-card-three {
    grid-column: 3 / span 2;
    grid-row: 3 / span 2;
}

/* IMAGE */
.ws-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TITLE STRIP */
.ws-card-strip {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    font-weight: 500;
    font-size: 1.5rem;
    transition: transform 0.45s ease, opacity 0.3s ease;
}

/* OVERLAY CONTENT */
.ws-card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgb(6 14 40 / 58%), rgb(6 6 6 / 62%));
    color: #ffffff;
    transform: translateY(100%);
    transition: transform 0.45s ease;
}

.ws-card-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.ws-card-overlay p {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #ccc;
}

.ws-card-overlay ul li {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 6px;
}

/* HOVER EFFECT */
.ws-card:hover .ws-card-overlay {
        padding: 50px;
    transform: translateY(0);
}

.ws-card:hover .ws-card-strip {
    transform: translateY(100%);
    opacity: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px){

  .solutions-header h2{
    font-size: 2.5rem;
  }

  .solutions-header p{
    font-size: 1.1rem;
  }

  .ws-solutions-grid{
    padding: 90px 0;
  }

  .ws-grid-container{
    padding: 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 240px);
    gap: 18px;
  }

  /* Re-map layout */
  .ws-card-big{
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
  }

  .ws-card-one{
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
  }

  .ws-card-two{
    grid-column: 1 / span 2;
    grid-row: 4 / span 2;
  }

  .ws-card-three{
    grid-column: 3 / span 1;
    grid-row: 4 / span 2;
  }
}
@media (max-width: 768px){

  .solutions-header h2{
    font-size: 2.2rem;
  }

  .solutions-header p{
    font-size: 1rem;
  }

  .ws-solutions-grid{
    padding: 80px 0;
  }

  .ws-grid-container{
    padding: 24px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 16px;
  }

  .ws-card-overlay{
       position: relative;
  }

  /* All cards equal width */
  .ws-card-big,
  .ws-card-one,
  .ws-card-two,
  .ws-card-three{
    grid-column: span 2;
    grid-row: auto;
    min-height: 260px;
  }

  .ws-card-strip{
    font-size: 1.3rem;
  }
}
@media (max-width: 640px){

  .solutions-header h2{
    font-size: 1.9rem;
  }

  .solutions-header p{
    font-size: 0.95rem;
  }

  .ws-solutions-grid{
    padding: 70px 0;
  }

  .ws-grid-container{
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Single column cards */
  .ws-card-big,
  .ws-card-one,
  .ws-card-two,
  .ws-card-three{
    grid-column: span 1;
    min-height: 240px;
  }

  /* Mobile UX — remove hover dependency */
  .ws-card-overlay{
    transform: translateY(0);
    padding: 24px;
        position: relative;
  }

  .ws-card-strip{
    display: none;
  }

  .ws-card-overlay h3{
    font-size: 1.2rem;
  }

  .ws-card-overlay p{
    font-size: 0.95rem;
  }

  .ws-card-overlay ul li{
    font-size: 0.9rem;
  }

  .ws-card:hover .ws-card-overlay{
    padding: 24px;
  }
}




/*************************************nvr-pluse******************************/
.nx-nvr-hero {
  position: relative;
  height: 100vh;
  background: url("../img/solutions/nvr/nvrpluse.webp") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 120px;
}
.vision-nvr-hero {
  position: relative;
  height: 100vh;
  background: url("../img/what-we-do/herovision1.webp") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 120px;
}


.nx-nvr-hero-overlay {
  position: absolute;
  inset: 0;
    background: linear-gradient(to bottom, rgba(5, 7, 15, 0.5), rgba(5, 7, 15, 0.2));
  z-index: 1;
}

.nx-nvr-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  text-align: center;
  padding: 0 20px;
}

/* Tag */
.nx-nvr-hero-tag {
     display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.6rem;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* Title */
.nx-nvr-hero-title {
  font-size: 3rem;
  line-height: 1.15;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 22px;
}

.nx-nvr-hero-title span {
  color: #4fa3ff;
}

/* Subtitle */
.nx-nvr-hero-subtitle {
  font-size: 1rem;
  color: #ccc;
  max-width: 720px;
  margin: 0 auto 36px;
}

/* CTA */
.nx-nvr-hero-cta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Buttons */
.nx-nvr-btn {
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
}



/* Responsive */
@media (max-width: 1024px){

  .nx-nvr-hero{
    padding-top: 110px;
  }

  .nx-nvr-hero-title{
    font-size: 2.6rem;
  }

  .nx-nvr-hero-subtitle{
    font-size: 0.95rem;
    max-width: 640px;
  }

  .nx-nvr-btn{
    padding: 12px 24px;
    font-size: 0.9rem;
  }
}
@media (max-width: 768px){

  /* IMPORTANT — mobile vh bug fix */
  .nx-nvr-hero{
    height: auto;
    min-height: 92vh;
    padding-top: 140px;
    align-items: center;
  }

  .nx-nvr-hero-title{
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .nx-nvr-hero-subtitle{
    font-size: 0.92rem;
    margin-bottom: 28px;
  }

  .nx-nvr-hero-cta{
    gap: 12px;
  }

  .nx-nvr-btn{
    padding: 11px 22px;
  }
}
@media (max-width: 640px){

  .nx-nvr-hero{
    min-height: 100svh; /* real mobile viewport height */
    padding-top: 0px;
    background-position: center center; /* image subject visible */
  }

  .nx-nvr-hero-content{
    padding: 0 14px;
  }

  .nx-nvr-hero-tag{
    font-size: 0.55rem;
    padding: 5px 12px;
  }

  .nx-nvr-hero-title{
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .nx-nvr-hero-subtitle{
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .nx-nvr-hero-cta{
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .nx-nvr-btn{
    width: 100%;
    max-width: 260px;
    text-align: center;
    padding: 12px 20px;
  }
}


.nvr-stack-section {
  display: grid;
  grid-template-columns: 40% 60%;
  padding: 120px 80px;
  background: #040813;
  color: #fff;
  gap: 60px;
}

/* LEFT STICKY */
.nvr-stack-left {
  position: sticky;
  top: 425px;
  align-self: flex-start;
}

.nvr-stack-left h2 {
    font-weight: 500;
  font-size: 3rem;
  margin-bottom: 16px;
}

.nvr-stack-left p {
  color: #9aa4b2;
  font-size: 1.2rem;
  /* max-width: 420px; */
}

/* RIGHT */
.nvr-stack-right {
  display: flex;
  flex-direction: column;
  gap: 120px; /* spacing before next card pushes */

}

/* CARD */
.nvr-stack-card {
  position: sticky;
  top: 96px; /* 🔥 THIS creates stacking */
  background: #000;
  border: 1px solid #222c30;
  border-radius: 12px;
      padding: 70px 110px 40px;
  min-height: 920px;
    background-image: url("../img/solutions/nvr/stackbg.webp"); /* SAME IMAGE */
  background-repeat: no-repeat;
  /* background-position: center;
  background-size: contain; */
}

/* OPTIONAL: depth feeling */
.nvr-stack-card:not(:first-child) {
  margin-top: 120px;
}

/* layout inside card */
.nvr-card-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

/* image */
.nvr-card-img img {
  width: 86%;
    /* max-width: 170px; */
    /* height: 500px; */
    display: block;
}

/* text */
.nvr-card-content h3 {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #ffffff;
}

.nvr-card-content p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #cccc;
  /* max-width: 520px; */
}
@media (max-width:1024px){

  .nvr-stack-section{
    grid-template-columns: 45% 55%;
    padding:100px 50px;
    gap:40px;
  }

  .nvr-stack-left h2{
    font-size:2.4rem;
  }

  .nvr-stack-card{
    padding:60px 70px 40px;
    min-height:760px;
  }

  .nvr-card-img img{
    height:420px;
  }
}
@media (max-width:768px){

  /* single column */
  .nvr-stack-section{
    grid-template-columns: 1fr;
    padding:90px 22px;
    gap:60px;
  }

  /* remove sticky left */
  .nvr-stack-left{
    position:relative;
    top:auto;
    text-align:center;
  }

  .nvr-stack-left p{
    max-width:600px;
    margin:auto;
  }

  /* remove sticky cards */
  .nvr-stack-card{
    position:relative;
    top:auto;
    min-height:auto;
    padding:40px 30px;
    background-size:cover;
    margin-top:0 !important;
  }

  .nvr-stack-right{
    gap:60px;
  }

  .nvr-card-img img{
    width:100%;
    height:auto;
    max-height:380px;
    object-fit:contain;
  }

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

  .nvr-stack-section{
    padding:70px 16px;
  }

  .nvr-stack-left h2{
    font-size:1.9rem;
    line-height:1.25;
  }

  .nvr-stack-left p{
    font-size:0.95rem;
  }

  .nvr-stack-card{
    padding:26px 20px;
    border-radius:10px;
  }

  .nvr-card-content h3{
    font-size:1.35rem;
  }

  .nvr-card-content p{
    font-size:0.95rem;
    line-height:1.6;
  }

  .nvr-card-img img{
    max-height:260px;
  }
}



/* SECTION */  
.nvr-security{
    background:#0b0f12;
    padding:120px 200px;
    color:#fff;
}

/* HEADER */
.nvr-security-header{
   text-align: center;
    margin: auto;
    max-width: 760px;
    margin-bottom: 70px;
}

.nvr-security-header h2{
    font-size:3rem;
    font-weight:500;
    margin-bottom:18px;
    letter-spacing:.3px;
}

.nvr-security-header p{
    color:#ccc;
    line-height:1.7;
    font-size:1.2rem;
}

/* GRID */
.nvr-security-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}

/* CARD */
.nvr-sec-card{
        background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
    border:1px solid #1f2a2f;
    border-radius:14px;
    padding:67px;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}
.nvr-sec-card{
  --mx:5%;
  --my:5%;
}


.nvr-sec-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;

    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(96,165,255,0.35),
        rgba(96,165,255,0.18) 25%,
        rgba(96,165,255,0.08) 45%,
        transparent 70%
    );
}
.nvr-sec-card:hover::before{
    opacity:1;
}
.nvr-sec-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    padding:1px;
    background:linear-gradient(
        130deg,
        rgba(96,165,255,0.0),
        rgba(96,165,255,0.55),
        rgba(96,165,255,0.0)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:0;
    transition:.35s;
}
.nvr-sec-card:hover::after{
    opacity:1;
}

/* hover glow */
.nvr-sec-card:hover{
    border-color:#2e3f46;
    transform:translateY(-6px);
}

/* ICON */
.nvr-sec-icon{
    /* width: 387px; */
    height: 161px;
    border-radius:14px;
    /* background:#0e1418; */
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:54px;
}

.nvr-sec-icon img{
        width: 375px;
    height: 370px;
    object-fit:contain;
    margin-top:49px;
    filter:brightness(1.1);
}

/* TITLE */
.nvr-sec-card h3{
    font-size:1.5rem;
    margin-bottom:12px;
    font-weight:600;
}

/* TEXT */
.nvr-sec-card p{
    color:#ccc;
    line-height:1.7;
    font-size: 1.2rem;
}
.secure2{
        grid-column: span3 / 2;
}

.secure3{
        grid-column: span 2;
}

/* RESPONSIVE */
@media (max-width:1024px){

  .nvr-security{
    padding:100px 80px;
  }

  .nvr-security-header h2{
    font-size:2.5rem;
  }

  .nvr-security-grid{
    grid-template-columns:repeat(2,1fr);
    gap:26px;
  }

  .nvr-sec-card{
    padding:50px;
  }

  .nvr-sec-icon{
    width:100%;
    height:auto;
  }

  .nvr-sec-icon img{
    width:100%;
    height:auto;
    max-width:260px;
    margin:auto;
  }
}
@media (max-width:768px){

  .nvr-security{
    padding:90px 24px;
  }

  .nvr-security-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .nvr-sec-card{
    padding:36px 28px;
  }

  .nvr-security-header p{
    font-size:1.05rem;
  }

  .nvr-sec-icon img{
    max-width:220px;
  }

  /* remove manual spanning */
  .secure2,
  .secure3{
    grid-column:auto;
  }
}
@media (max-width:640px){

  .nvr-security{
    padding:70px 16px;
  }

  .nvr-security-header h2{
    font-size:1.9rem;
    line-height:1.25;
  }

  .nvr-security-header p{
    font-size:0.95rem;
  }

  .nvr-sec-card{
    padding:26px 20px;
    border-radius:12px;
  }

  .nvr-sec-card h3{
    font-size:1.25rem;
  }

  .nvr-sec-card p{
    font-size:0.95rem;
    line-height:1.6;
  }

  /* ICON FIX — VERY IMPORTANT */
  .nvr-sec-icon{
    width:100%;
    height:auto;
    margin-bottom:18px;
  }

  .nvr-sec-icon img{
    width:100%;
    height:auto;
    max-width:180px;
    display:block;
    margin:auto;
  }
}



/* ===== SECTION BASE ===== */
.nxnvr-design-section{
  background:#0b111b;
  padding:120px 8%;
  color:#d6e2ff;
}

.nxnvr-design-wrapper{
  display:grid;
  grid-template-columns: 40% 60%;
  gap:70px;
  align-items:start;
}

/* ===== LEFT SIDE ===== */

.nxnvr-label{
  font-size:12px;
  letter-spacing:2px;
  color:#5aa2ff;
  display:inline-block;
  margin-bottom:18px;
}

.nxnvr-title{
    color: #fff;
  font-size:3rem;
  font-weight:500;
  margin-bottom:18px;
  line-height:1.2;
}

.nxnvr-subtext{
    color: #cccc;
      font-size:1.2rem;
  /* opacity:.75; */
  line-height:1.7;
  margin-bottom:18px;
}

.nxnvr-small{
     color: #cccc;
  /* opacity:.55; */
  font-size:1rem;
}

/* ===== RIGHT SIDE POINTS ===== */

.nxnvr-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  position:relative;
  /* background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08); */
  border-radius:16px;
  overflow:hidden;
}


.nxnvr-point{
  display:flex;
  gap:16px;
  padding:28px;
  transition:.25s ease;
  position:relative;
  background:transparent;
  border:none;
}
.nxnvr-points::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:rgb(255 255 255 / 55%)
}
.nxnvr-points::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:52%;
  height:2px;
  background:rgb(255 255 255 / 55%)
}


.nxnvr-point:hover{
  transform:translateY(-1px);
   background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
}

/* icon */
.nxnvr-icon{
  min-width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  /* background:rgba(90,162,255,.12); */
  font-size:35px;
}

/* text */
.nxnvr-point h4{
    color: #fff;
  margin-bottom:6px;
  font-size:1.5rem;
  font-weight:500;
}

.nxnvr-point p{
    color: #ccc;
  font-size:1.2rem;
  line-height:1.6;
  opacity:.7;
}

@media (max-width:1024px){

  .nxnvr-design-wrapper{
    grid-template-columns:45% 55%;
    gap:50px;
  }

  .nxnvr-title{
    font-size:2.5rem;
  }

  .nxnvr-subtext{
    font-size:1.1rem;
  }

  .nxnvr-point{
    padding:22px;
  }

  .nxnvr-point h4{
    font-size:1.35rem;
  }

  .nxnvr-point p{
    font-size:1.05rem;
  }
}
@media (max-width:768px){

  /* section padding */
  .nxnvr-design-section{
    padding:90px 22px;
  }

  /* 1 column layout */
  .nxnvr-design-wrapper{
    grid-template-columns:1fr;
    gap:50px;
  }

  /* center left content */
  .nxnvr-label,
  .nxnvr-title,
  .nxnvr-subtext,
  .nxnvr-small{
        text-align: center;
        display: flex;
        justify-content: center;
  }

  .nxnvr-subtext{
    max-width:600px;
    margin:auto auto 18px;
  }

  /* right grid becomes 1 column */
  .nxnvr-points{
    grid-template-columns:1fr;
    gap:18px;
  }

  /* REMOVE CROSS DIVIDER LINES */
  .nxnvr-points::before,
  .nxnvr-points::after{
    display:none;
  }

  /* cards */
  .nxnvr-point{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:22px;
  }

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

  .nxnvr-design-section{
    padding:70px 16px;
  }

  .nxnvr-title{
    font-size:1.9rem;
    line-height:1.25;
  }

  .nxnvr-subtext{
    font-size:0.95rem;
  }

  .nxnvr-small{
    font-size:0.9rem;
  }

  .nxnvr-point{
    gap:12px;
    padding:18px;
    align-items:flex-start;
  }

  .nxnvr-icon{
    min-width:36px;
    height:36px;
    font-size:24px;
  }

  .nxnvr-point h4{
    font-size:1.2rem;
  }

  .nxnvr-point p{
    font-size:0.95rem;
    line-height:1.5;
  }
}


.nvr-zigzag-section{
  padding:180px 8%;
  background:#07101b;
  color:#d6e2ff;
  text-align:center;
}

.nvr-zigzag-header h2{
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
}

.nvr-zigzag-header p{
    font-size: 1.2rem;
    color: #ccc;
}
.nvr-zigzag-wrapper{
  position:relative;
  height:320px;
  margin-top:80px;
}
.nvr-zigzag-line{
  position:absolute;
  left:0;
  top:60px;
  width:100%;
  height:260px;
  z-index:1;
}
.nvr-step{
  position:absolute;
  width:240px;
  text-align:center;
  z-index:2;
}
.nvr-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  background:#fff;
  color:#2c4f7c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:20px;
  margin:auto;
  border:10px solid #79a8c6;
  margin-bottom:15px;
}

.flow-icon{
  width:55px;
  height:55px;
  object-fit:contain;
  filter: brightness(0) saturate(100%) invert(34%) sepia(32%) saturate(900%) hue-rotate(182deg) brightness(95%) contrast(90%);
  transition:.3s;
}
.nvr-step:hover .flow-icon{
  transform:scale(1.15);
 
}

.nvrs1 {
    right: 88%;
    top: 120px;
}
.nvrs2 {
    left: 28%;
    top: 134px;
}
.nvrs3 {
    left: 56%;
    top: 181px;
}
.nvrs4 {
    left: 89%;
        top: 151px;
}
.nvr-step h4{
  margin-top:10px;
  color: #fff;
  font-size:1.5rem;
}

.nvr-step p{
  font-size:1.2rem;
  color: #ccc;
  opacity:.7;
}
/* .nvr-step > div{
  flex:1;
} */

@media (max-width:1024px){

  .nvr-zigzag-section{
    padding:150px 6%;
  }

  .nvr-zigzag-wrapper{
    height:300px;
  }

  .nvr-step{
    width:200px;
  }

  .nvr-circle{
    width:95px;
    height:95px;
    border-width:8px;
  }

  .flow-icon{
    width:45px;
    height:45px;
  }

  .nvr-step h4{
    font-size:1.3rem;
  }

  .nvr-step p{
    font-size:1.05rem;
  }

  /* adjust positions */
  .s1{ left:3%;  top:110px; }
  .s2{ left:25%; top:225px; }
  .s3{ left:63%; top:170px; }
  .s4{ left:88%; top:255px; }

}

@media (max-width:768px){

  .nvr-zigzag-section{
    padding:120px 22px;
    text-align:left;
  }

  /* wrapper free height */
  .nvr-zigzag-wrapper{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:55px;
    margin-top:60px;
  }

  /* hide wave svg */
  .nvr-zigzag-line{
    display:none;
  }

  /* remove absolute positioning */
  .nvr-step{
            position: relative;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        gap: 18px;
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: stretch;
  }

  /* circle becomes node */
  .nvr-circle{
    flex-shrink:0;
    width:70px;
    height:70px;
    margin:0;
    border-width:6px;
  }

  .flow-icon{
    width:34px;
    height:34px;
  }

  /* text area */
  .nvr-step h4{
    margin:0 0 6px;
    font-size:1.25rem;
  }

  .nvr-step p{
          margin-left: 74px;
        margin-top: -40px;
        font-size: 0.9rem;
  }

  /* vertical connector line */
  .nvr-step::after{
    content: "";
        position: absolute;
        left: 27px;
        top: 56px;
        bottom: -70px;
        width: 2px;
        background: linear-gradient(to bottom, #79a8c6, rgba(121, 168, 198, 0.15));
  }

  .nvr-step:last-child::after{
    display:none;
  }

  .s1{    left: 52%; }
  .s2{     left: 8px;
    top: 60px;}
  .s3{    left: 181px;}
  .s4{     top: 73px;
    left: 12px; }

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

  .nvr-zigzag-section{
    padding:100px 16px;
  }

  .nvr-zigzag-header h2{
    font-size:1.9rem;
    line-height:1.25;
  }

  .nvr-zigzag-header p{
    font-size:0.95rem;
  }

  .nvr-step{
    gap:14px;
  }

  .nvr-circle{
            width: 60px;
        height: 60px;
        border-width: 5px;
  }

  .flow-icon{
    width:28px;
    height:28px;
  }

  .nvr-step h4{
    font-size:1.15rem;
  }

  .nvr-step p{
    font-size:0.9rem;
  }

  .s1{    left: 52%; }
  .s2{     left: 8px;
    top: 60px;}
  .s3{          left: 178px;
        top: 18px;}
  .s4{     top: 73px;
    left: 12px; }

}


/**********************************************blogs**************************************/
/* HERO */
        .blog-hero{
            position:relative;
            height:500px;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
            text-align:center;
            color:#fff;
        }

        .blog-video{
            position:absolute;
            width:100%;
            height:100%;
            object-fit:cover;
            top:0;
            left:0;
            z-index:0;
        }

        .blog-hero-overlay{
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.55);
            z-index:0;
        }
        .blog-hero-content{
                z-index: 0;
        }

        .blog-hero-content h1{
            font-size:3rem;
            font-weight: 500;
            color:#2da7ff;
            margin-bottom:10px;
        }

        .blog-hero-content p{
            font-size:1.2rem;
            opacity:0.9;
        }


        /* BLOG SECTION */
        .blog-list-section{
            background:#020617;
            padding:70px 0;
        }

        .blogcontainer{
            width:90%;
            max-width:1500px;
            margin:auto;
        }

        .blogcontainer h2{
            /* color:#fff; */
            font-size: 1.5rem;
            font-weight:500;
            transition:0.3s;
        }

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


        /* CARD */
        .blog-card{
            background:#0b1224;
                box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:14px;
            overflow:hidden;
            transition:0.35s;
        }

        .blog-card:hover{
            transform:translateY(-10px);
            box-shadow:0 0 35px rgba(0,170,255,0.25);
        }

        .blog-image img{
            width:100%;
            height:300px;
            object-fit:cover;
        }

        .blog-content{
            padding:20px;
        }

        .blog-content h3{
            color:#fff;
            font-size:1.5rem;
            margin-bottom:12px;
        }

        .blog-content p{
            color:#cccc;
            font-size:1.2rem;
            line-height:1.6;
            margin-bottom:16px;
        }

        .read-more{
            color:#2da7ff;
            text-decoration:none;
            font-weight:500;
            transition:0.3s;
        }

        .read-more:hover{
            letter-spacing:1px;
        }


            .pagination-wrapper{
            margin:60px 0;
            display:flex;
            justify-content:center;
        }

        .custom-pagination{
            display:flex;
            gap:12px;
            padding:0;
        }

        .custom-pagination li{
            list-style:none;
        }

        .custom-pagination a,
        .custom-pagination span{
            display:flex;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            background:#e5e7eb;
            color:#0f172a;
            text-decoration:none;
            border-radius:12px;
            font-weight:600;
            transition:.25s;
        }

        /* hover */
        .custom-pagination a:hover{
            background: linear-gradient(rgba(14, 70, 204, 0.52) 0%, rgba(15, 15, 15, 0.71) 100%);
            /* background: linear-gradient(145deg, rgb(12, 27, 52), rgb(9, 19, 38)); */
            /* background: #061232; */
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            /* background:#1d8ed1; */
            color:#fff;
        }

        /* active */
        .custom-pagination .active span{
            background: linear-gradient(rgba(14, 70, 204, 0.52) 0%, rgba(15, 15, 15, 0.71) 100%);
            /* background: linear-gradient(145deg, rgb(12, 27, 52), rgb(9, 19, 38)); */
            /* background: #061232; */
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            /* background: #041847; */
            color: #fff;
            /* box-shadow: 0 0 0 3px rgba(29, 142, 209, 0.25);*/
        }

        /* disabled */
        .custom-pagination .disabled span{
            opacity:.5;
            cursor:not-allowed;
            background:#e5e7eb;
            color:#9ca3af;
        }



        /* RESPONSIVE */
        @media (max-width:1024px){

        .blog-hero{
            height:420px;
        }

        .blog-hero-content h1{
            font-size:2.6rem;
        }

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

        .blog-image img{
            height:260px;
        }
        .pagination-wrapper{
        margin:50px 0;
        }

        .custom-pagination a,
        .custom-pagination span{
            width:42px;
            height:42px;
            font-size:15px;
        }
        }
        @media (max-width:768px){

        .blog-hero{
            height:380px;
            padding:40px 20px;
        }

        .blog-hero-content h1{
            font-size:2.2rem;
        }

        .blog-hero-content p{
            font-size:1rem;
        }

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

        .blogcontainer{
            width:92%;
        }

        .blog-image img{
            height:240px;
        }
       .custom-pagination{
        gap:8px;
        flex-wrap:wrap;
        justify-content:center;
        }

        .custom-pagination a,
        .custom-pagination span{
            width:38px;
            height:38px;
            border-radius:10px;
            font-size:14px;
        }

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

        .blog-hero{
            height:auto;
            min-height:320px;
            padding:80px 16px 60px;
        }

        .blog-hero-content h1{
            font-size:1.8rem;
            line-height:1.25;
        }

        .blog-hero-content p{
            font-size:0.95rem;
        }

        .blog-list-section{
            padding:50px 0;
        }

        .blog-image img{
            height:200px;
        }

        .blog-content{
            padding:18px;
        }

        .blog-content h3{
            font-size:1.05rem;
        }

        .blog-content p{
            font-size:0.9rem;
        }

        .blog-card:hover{
            transform:none; /* mobile hover remove */
        }
         .pagination-wrapper{
        margin:40px 0;
        padding:0 10px;
        }

        /* horizontal scroll pagination */
        .custom-pagination{
            flex-wrap:nowrap;
            overflow-x:auto;
            padding-bottom:6px;
            gap:6px;
            -webkit-overflow-scrolling:touch;
        }

        /* hide scrollbar */
        .custom-pagination::-webkit-scrollbar{
            display:none;
        }

        .custom-pagination li{
            flex:0 0 auto;
        }

        .custom-pagination a,
        .custom-pagination span{
            width:34px;
            height:34px;
            font-size:13px;
            border-radius:9px;
        }
        }


/*********************blog-deatil*****************************/
        .nxblog-page{
            background:#020617;
            color:#dbe3f1;
            padding:160px 0;
        }

        .nxblog-wrap{
            width:90%;
            max-width:1500px;
            margin:auto;
            display:grid;
            grid-template-columns:2.2fr 1fr;
            gap:60px;
            align-items: start;
        }

        /* LEFT */
        .nxblog-breadcrumb a{
            text-decoration: none;
            color:#4da3ff;
            font-size:20px;
        }

        .nxblog-title{
            font-size:40px;
            color:#fff;
            margin:15px 0 25px;
            line-height:1.2;
        }

        .nxblog-heroimg{
            width:100%;
            border-radius:16px;
            margin-bottom:25px;
        }

        .nxblog-content li{
            color: #f8f6f6cc;

        }

         .nxblog-content ul {
            margin-left: 22px;
         }

        .nxblog-left{
            width: 100%;
            padding-right: 30px;
            border-right: 1px solid #cccc;
        }

        .nxblog-left img{
            border-radius: 35px;
            width: 100%;
            height: 540px;
            object-fit: cover;
        
        }

        .nxblog-left p{
                font-size: 1.2rem;
            color: #f8f6f6cc;
            line-height: 1.8;
            margin-bottom: 18px;
        }

        .nxblog-left h2{
        font-size: 2rem;
            margin-top: 35px;
            color: #fff;
        }

        .nxblog-inlineimg{
            width:100%;
            border-radius:14px;
            margin:20px 0;
        }

        .nxblog-points{
            padding-left:20px;
            margin-top:15px;
        }

        .nxblog-points li{
            margin-bottom:8px;
        }

        /* AUTHOR */
        .nxauthor-box{
            margin-top:50px;
            padding-top:25px;
            border-top:1px solid rgba(255,255,255,0.15);
        }

        .nxauthor-box h3{
            font-size: 2rem;
            color:#4da3ff;
            font-weight: 500;
        }

        .nxauthor-box h4{
            font-size: 1.2rem;
            color:#fff;
            margin:8px 0;
        }


        /* RIGHT SIDEBAR */
        .nxblog-right h3{
            color:#f8f6f6cc;
            margin-bottom:20px;
        }

        .nxrelated-blog{
            display:flex;
            gap:15px;
            margin-bottom:40px;
            align-items:center;
        }

        .nxrelated-blog img{
        width: 207px;
            height: 125px;
            object-fit:cover;
            border-radius:10px;
        }

        .nxrelated-blog h4{
            font-size:1rem;
            color:#fff;
        }

        .nxrelated-blog a{
            color:#4da3ff;
            text-decoration:none;
            font-size:0.8rem;
        }

        /* EXPLORE */

        .nxblogcontainer{
            padding: 0px 190px;
        }

        .nxblogcontainer h2{
            font-weight: 500;
            font-size: 3rem;
        }
        .nxexplore-blogs{
            background:#020617;
            padding:70px 0;
        }

        .nxblogexplore-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:25px;
            margin-top:30px;
        }

        .nxexplore-card{
            text-decoration:none;
        }

        .nxexplore-card img{
            width:100%;
            height:220px;
            object-fit:cover;
            border-radius:14px;
        }

        .nxexplore-card h4{
            color:#fff;
            margin-top:12px;
        }
        @media (max-width:1024px){

        .nxblog-page{
            padding:120px 0;
        }

        .nxblog-wrap{
            gap:40px;
        }

        .nxblog-title{
            font-size:32px;
        }

        .nxblog-left img{
            height:420px;
        }

        .nxblogcontainer{
            padding:0 80px;
        }

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

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

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

        /* remove right border */
        .nxblog-left{
            padding-right:0;
            border-right:none;
        }

        /* sidebar becomes full width */
        .nxblog-right{
            border-top:1px solid rgba(255,255,255,0.1);
            padding-top:30px;
        }

        .nxblog-title{
            font-size:28px;
        }

        .nxblog-left img{
            height:360px;
        }

        /* related blog card fix */
        .nxrelated-blog{
            align-items:flex-start;
        }

        .nxrelated-blog img{
            width:150px;
            height:100px;
        }

        .nxblogcontainer{
            padding:0 40px;
        }

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

        .nxblog-page{
            padding:90px 0;
        }

        .nxblog-title{
            font-size:24px;
            line-height:1.3;
        }

        .nxblog-breadcrumb a{
            font-size:14px;
        }

        .nxblog-left img{
            height:240px;
            border-radius:18px;
        }

        .nxblog-left p{
            font-size:1rem;
            line-height:1.7;
        }

        .nxblog-left h2{
            text-align: left;
            font-size:1.5rem;
        }

        /* sidebar related blogs vertical */
        .nxrelated-blog{
            flex-direction:column;
            gap:10px;
        }

        .nxrelated-blog img{
            width:100%;
            height:180px;
        }

        .nxrelated-blog h4{
            font-size:0.95rem;
        }

        /* explore section */
        .nxblogcontainer{
            padding:0 20px;
        }

        .nxblogcontainer h2{
            font-size:2rem;
            text-align:center;
        }

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

        .nxexplore-card img{
            height:200px;
        }

        }

        .load-more-wrap{
            
            text-align:center;
            margin-top:60px;
        }

        #load-more-btn{
            position: relative;
            text-decoration: none;
            display: inline-block;
            /* margin-top: 20px; */
            padding: 12px 24px;
            overflow: hidden;
            background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
            color: #ffffff;
            font-size: 20px;
            font-weight: 500;
            border-radius: 40px;
            border: none;
            box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            cursor: pointer;
            transition: 0.3s ease;
        }

        #load-more-btn:hover{
            background: rgba(14, 165, 233, 0.1);
            transform: translateY(-3px);
        }
        .load-more-btn{
            position: relative;
            text-decoration: none;
            display: inline-block;
            /* margin-top: 20px; */
            padding: 12px 24px;
            overflow: hidden;
            background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
            color: #ffffff;
            font-size: 20px;
            font-weight: 500;
            border-radius: 40px;
            border: none;
            box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            cursor: pointer;
            transition: 0.3s ease;
        }

        .load-more-btn:hover{
            background: rgba(14, 165, 233, 0.1);
            transform: translateY(-3px);
        }

        .sidebar-load-more{
            position: relative;
            text-decoration: none;
            display: inline-block;
            /* margin-top: 20px; */
            padding: 12px 24px;
            overflow: hidden;
            background: linear-gradient(0deg, rgba(148, 217, 251, 0.08), rgba(148, 217, 251, 0.08)), linear-gradient(0deg, #0C1328, #0C1328);
            color: #ffffff;
            font-size: 20px;
            font-weight: 500;
            border-radius: 40px;
            border: none;
            box-shadow: 0 -1px 4px rgba(148, 217, 251, 1), 0 2px 6px rgba(255, 255, 255, 0);
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, #94D9FB, rgba(255, 255, 255, 0));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            cursor: pointer;
            transition: 0.3s ease;
        }

        .sidebar-load-more:hover{
            background: rgba(14, 165, 233, 0.1);
            transform: translateY(-3px);
        }


/****************************PoC and MVP *******************************/
/* ===== PoC HERO SECTION ===== */

        .engpoc-hero{
            position: relative;
            height: 100vh;
            min-height: 560px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 20px;

            /* Background Image */
            background: url("../img/what-we-do/hero1.webp") center/cover no-repeat;
        }

        
        .engpro-hero{
            position: relative;
            height: 100vh;
            min-height: 560px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 20px;

            /* Background Image */
            background: url("../img/what-we-do/producthero.webp") center/cover no-repeat;
        }

        /* black light overlay */
        .engpoc-overlay{
            position:absolute;
            inset:0;
            background: rgba(0,0,0,0.55);   /* light black shade */
            z-index:1;
        }

        /* content */
        .engpoc-content{
            position:relative;
            z-index:2;
            max-width:900px;
            color:#fff;
        }

        /* badge */
        .engpoc-badge{
            display: inline-block;
            padding: 6px 14px;
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 0.6rem;
            letter-spacing: 1px;
            border-radius: 20px;
            margin-bottom: 20px;
        }

        /* heading */
        .engpoc-content h1{
            font-size:3rem;
            font-weight:500;
            line-height:1.15;
            margin-bottom:22px;
        }

        /* paragraph */
        .engpoc-content p{
            font-size:1.2rem;
            line-height:1.7;
            color:#cccc;
            margin-bottom:32px;
        }

        /* buttons container */
        .engpoc-buttons{
            display:flex;
            gap:18px;
            justify-content:center;
            flex-wrap:wrap;
        }


        /* ===== Responsive ===== */
        @media (max-width:1024px){

        .engpoc-hero{
            height: 85vh;
            min-height: 520px;
            padding: 0 30px;
        }

        .engpoc-content{
            max-width: 720px;
        }

        .engpoc-content h1{
            font-size: 2.4rem;
            line-height: 1.2;
        }

        .engpoc-content p{
            font-size: 1.05rem;
            margin-bottom: 26px;
        }

        .engpoc-buttons{
            gap:14px;
        }

        .engpoc-badge{
            font-size: 0.55rem;
            padding: 6px 12px;
        }
        }

        @media (max-width:768px){

        .engpoc-hero{
            height: auto;
            min-height: 500px;
            padding: 80px 22px;
        }

        .engpoc-content{
            max-width: 620px;
        }

        .engpoc-content h1{
            font-size: 2rem;
            line-height: 1.25;
        }

        .engpoc-content p{
            font-size: 0.98rem;
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .engpoc-buttons{
            gap:12px;
        }

        .engpoc-badge{
            margin-bottom:16px;
        }
        }

        @media (max-width:640px){

        .engpoc-hero{
            min-height: 480px;
            padding: 90px 18px 70px;
        }

        .engpoc-content{
            max-width: 100%;
        }

        .engpoc-content h1{
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 1.3;
            margin-bottom: 18px;
        }

        .engpoc-content p{
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 22px;
        }

        .engpoc-badge{
            font-size: 0.5rem;
            padding:5px 10px;
            margin-bottom:14px;
        }

        .engpoc-buttons{
            flex-direction: column;
            align-items: center;
            gap:10px;
            width:100%;
        }

        .engpoc-buttons a,
        .engpoc-buttons button{
            width: 100%;
            max-width: 260px;
        }
        }




        .poc-event-section{
            position:relative;
            /* background:#05070b; */
            padding:120px 0;
            overflow:hidden;
        }

        .poc-event-container{
            width:85%;
            margin:auto;
            display:flex;
            gap:30px;
        }
        .poc-event-heading{
            text-align:center;
            margin-bottom:70px;
            position:relative;
            z-index:2;
        }

        .poc-event-heading h2{
            color:#fff;
            font-size:3rem;
            font-weight:500;
            letter-spacing:-0.5px;
            margin-bottom:12px;
        }

        .poc-event-heading p{
            color:#ccc;
            font-size:1.2rem;
            max-width:700px;
            margin:auto;
            line-height:1.7;
        }

        /* cards */
        .poc-event-card{
            position:relative;
            flex:1;
            height:600px;
            border-radius:18px;
            background-size:cover;
            background-position:center;
            cursor:pointer;
            overflow:hidden;
            transition:all .5s ease;
        }

        /* dark overlay */
        .poc-event-overlay{
            position:absolute;
            inset:0;
            background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.25));
        }

        /* content */
        .poc-event-content{
            position:absolute;
            bottom:40px;
            left:40px;
            right:40px;
            color:white;
            z-index:2;
        }

        .poc-event-content h3{
            font-size:1.5rem;
            font-weight:500;
            margin-bottom:10px;
        }

        /* hidden content */
        .poc-event-hidden{
            max-height:0;
            opacity:0;
            transform:translateY(30px);
            transition:all .5s ease;
        }

        .poc-event-hidden p{
            font-size:1.2rem;
            line-height:1.6;
            margin-bottom:15px;
            color:#ccc;
        }

        .poc-event-hidden a{
            color:#00d4ff;
            text-decoration:none;
            font-weight:500;
        }


        .poc-event-list{
            margin:15px 0 18px;
            padding:0;
            list-style:none;
        }

        .poc-event-list li{
            font-size:1.2rem;
            color:#ccc;
            margin-bottom:8px;
            padding-left:18px;
            position:relative;
        }

        /* custom blue dot */
        .poc-event-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:12px;
            width:6px;
            height:6px;
            border-radius:50%;
            background:#00d4ff;
            box-shadow:0 0 8px #00d4ff;
        }

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

        .poc-event-card:hover{
            flex:1.5;
        }

        .poc-event-container:hover .poc-event-card:not(:hover){
            flex:0.8;
        }

        .poc-event-card:hover .poc-event-hidden{
            max-height:420px;
            opacity:1;
            transform:translateY(0);
        }

        /* ===== ROTATING CIRCLE ===== */

        .poc-event-circle{
        position: absolute;
            right: -77px;
            bottom: -77px;
            width: 506px;
            /* opacity: 0.15; */
            animation: pocEventRotate 25s linear infinite;
            pointer-events: none;
        }


        /* TOP LEFT */
        .poc-event-circle-left{
            top: -45px;
            left: -45px;
            animation-direction:normal;
        }

        /* BOTTOM RIGHT */
        .poc-event-circle-right{
            bottom: -45px;
            right: -45px;
            animation-direction:reverse; /* opposite rotation = premium feel */
        }

        @keyframes pocEventRotate{
            from{ transform:rotate(0deg); }
            to{ transform:rotate(360deg); }
        }

        /* ===== MOBILE ===== */
        @media (max-width:1024px){

        .poc-event-section{
            padding:100px 0;
        }

        .poc-event-container{
            width:92%;
            gap:20px;
        }

        .poc-event-heading h2{
            font-size:2.4rem;
        }

        .poc-event-heading p{
            font-size:1.05rem;
        }

        .poc-event-card{
            height:520px;
            border-radius:16px;
        }

        .poc-event-content{
            left:28px;
            right:28px;
            bottom:28px;
        }

        .poc-event-content h3{
            font-size:1.3rem;
        }

        .poc-event-hidden p,
        .poc-event-list li{
            font-size:1.05rem;
        }

        .poc-event-circle{
            width:380px;
        }
        }

        @media (max-width:768px){

        .poc-event-container{
            flex-direction:column;
            width:90%;
        }

        /* remove flex animation behaviour */
        .poc-event-card,
        .poc-event-card:hover,
        .poc-event-container:hover .poc-event-card:not(:hover){
            flex:unset;
        }

        .poc-event-card{
            height:420px;
        }

        /* ALWAYS SHOW CONTENT (no hover on tablet) */
        .poc-event-hidden{
            max-height:500px;
            /* opacity:1;
            transform:translateY(0); */
            margin-top:10px;
        }

        .poc-event-heading{
            margin-bottom:50px;
        }

        .poc-event-heading h2{
            font-size:2rem;
        }

        .poc-event-heading p{
            font-size:1rem;
        }

        .poc-event-content{
            left:24px;
            right:24px;
            bottom:24px;
        }

        .poc-event-circle{
            width:300px;
            opacity:0.12;
        }
        }

        @media (max-width:640px){

        .poc-event-section{
            padding:80px 0;
        }

        .poc-event-container{
            width:92%;
            gap:18px;
        }

        .poc-event-card{
            height:auto;
            min-height:360px;
            border-radius:14px;
        }

        .poc-event-content{
            position:relative;
            bottom:auto;
            left:auto;
            right:auto;
            padding:24px;
        }

        .poc-event-content h3{
            font-size:1.2rem;
        }

        .poc-event-hidden p{
            font-size:0.95rem;
        }

        .poc-event-list li{
            font-size:0.95rem;
        }

        .poc-event-heading h2{
            font-size:1.6rem;
        }

        .poc-event-heading p{
            font-size:0.9rem;
        }

        /* circles light & subtle */
        .poc-event-circle{
            width:220px;
            opacity:0.08;
        }

        }



        .poc-section{
            padding:100px 0;
            /* background: radial-gradient(circle at top,#071a2d,#02070f); */
            color:#fff;
        }
        .poccontainer{
            padding: 0px 200px;
        }
        /* heading */

        .poc-heading{
            text-align:center;
            max-width:900px;
            margin:0 auto 70px;
        }

        .poc-heading h2{
            font-size:3rem;
            color:#fff;
        font-weight: 500;
        }

        .poc-heading p{
            font-size:1.2rem;
            color:#ccc;
            
        }
        .poc-big{
            background-color: #04043c;
            padding: 40px;
            border-radius: 18px;
        }
        /* MOSAIC GRID */

        .poc-mosaic{
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(5, 120px);
            gap:22px;
        }

        /* PLACEMENT (THIS IS THE MAGIC) */

        .a{ grid-area: 1 / 1 / 3 / 2; }   /* left square top */
        .b{ grid-area: 1 / 2 / 4 / 3; }   /* center big vertical */
        .c{ grid-area: 1 / 3 / 3 / 4; }   /* right square */

        .d{ grid-area: 3 / 1 / 6 / 2; }   /* left vertical bottom */
        .e{ grid-area: 4 / 2 / 6 / 3; }   /* middle square bottom */
        .f{ grid-area: 3 / 3 / 6 / 4; }   /* right vertical bottom */

        /* CARD DESIGN */

        .poccard{
            background: rgb(10 15 40);
            border:1px solid rgba(80,140,255,0.25);
            border-radius:18px;
            padding:26px;
            position:relative;
            overflow:hidden;
            opacity: 0;
            transform: scale(0.7) translateY(120px);
            will-change: transform, opacity;
        }

        .poccard:hover{
            /* transform:translateY(-8px); */
            transform: translateY(-12px);
            /* border-color: #0082ff; */
            box-shadow: 0 18px 45px rgb(0 38 255 / 25%);
        }

        /* ICON */

        .pocicon-img{
            width:80px;
            height:80px;
            margin-bottom:18px;
            border-radius:14px;
        
            display:flex;
            align-items:center;
            justify-content:center;
            padding:12px;
        }

        /* icon image proper fit */

        .pocicon-img img{
            width:100%;
            height:100%;
            object-fit:contain;
            filter: brightness(0) invert(1);
            transition:0.3s;
        }

        /* hover effect */

        .poccard:hover .pocicon-img{
        box-shadow: 0 18px 45px rgb(0 38 255 / 25%);
        }

        /* TEXT */

        .poccard h3{
            font-size:1.5rem;
            margin-bottom:10px;
        }

        .poccard p{
            font-size: 1.2rem;
            color:#ccc;
            line-height:1.6;
        }

        /* MOBILE */

        @media (max-width:1024px){

        .poccontainer{
            padding:0 80px;
        }

        .poc-heading h2{
            font-size:2.4rem;
        }

        .poc-heading p{
            font-size:1.05rem;
        }

        .poc-mosaic{
            gap:18px;
            grid-template-rows: repeat(5, 110px);
        }

        .poccard{
            padding:22s px;
        }

        .poccard h3{
            font-size:1.35rem;
        }

        .poccard p{
            font-size:1.05rem;
        }

        .pocicon-img{
            width:70px;
            height:70px;
        }
        }

        @media (max-width:768px){

        .poccontainer{
            padding:0 40px;
        }

        .poc-heading{
            margin-bottom:50px;
        }

        .poc-heading h2{
            font-size:2rem;
        }

        .poc-heading p{
            font-size:1rem;
        }

        /* CHANGE GRID STRUCTURE */
        .poc-mosaic{
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
        }

        /* remove custom placement */
        .a,.b,.c,.d,.e,.f{
            grid-area:auto;
        }

        .poccard{
            opacity:1;
            transform:none;
        }

        .pocicon-img{
            width:60px;
            height:60px;
        }

        .poccard h3{
            font-size:1.25rem;
        }

        .poccard p{
            font-size:0.98rem;
        }
        }

        @media (max-width:640px){

        .poc-section{
            padding:70px 0;
        }

        .poccontainer{
            padding:0 20px;
        }

        .poc-big{
            padding:24px;
            border-radius:14px;
        }

        .poc-mosaic{
            grid-template-columns: 1fr;
            gap:16px;
        }

        .poc-heading h2{
            font-size:1.6rem;
        }

        .poc-heading p{
            font-size:0.9rem;
        }

        .poccard{
            padding:20px;
        }

        .pocicon-img{
            width:55px;
            height:55px;
            margin-bottom:14px;
        }

        .poccard h3{
            font-size:1.15rem;
        }

        .poccard p{
            font-size:0.9rem;
            line-height:1.55;
        }
        }





        /* SECTION */

        .pocpocprocess-section{
            background:#0b1220;
            padding:120px 20px;
            color:#fff;
            
            
        }

        .pocprocess-header{
            text-align:center;
            margin-bottom:100px;
        }

        .pocprocess-header h2{
            font-size:3rem;
            font-weight:500;
            margin-bottom:15px;
        }

        .pocprocess-sub{
            font-size:1.2rem;
            color:#ccc;
            max-width:750px;
            margin:auto;
            line-height:1.7;
        }

        /* TIMELINE */

        .poctimeline{
            position:relative;
            max-width:1000px;
            margin:auto;
        }

        /* Center vertical line */
        /* Grey base line */
        .poctimeline::before{
            content:'';
            position:absolute;
            left:50%;
            top:0;
            transform:translateX(-50%);
            width:4px;
            height:100%;
            background:#1b2945;
        }

        /* Animated blue progress line */
        .poctimeline-progress{
            position:absolute;
            left:50%;
            top:0;
            transform:translateX(-50%);
            width:4px;
            height:0%;
            background: linear-gradient(to bottom, #001122, #2157cd);
            transition:height 0.15s linear;
        
        }
        /* Each step */
        .poctimeline-item{
            position:relative;
            margin:50px 0;
            opacity:0.25;
            transition:all .5s ease;
        }

        .poctimeline-item.active{
            opacity:1;
        }

        /* Number circle */
        .poctimeline-number{
            position:absolute;
            left:50%;
            transform:translate(-50%,0);
            width:60px;
            height:60px;
            border-radius:50%;
            background:#0b1220;
            border:3px solid #1e90ff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:bold;
            z-index:2;
            transition:.4s;
        }

        .poctimeline-item.active .poctimeline-number{
            /* background:#1e90ff; */
                background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            /* box-shadow:0 0 25px #1e90ff; */
        }

        /* Content */
        .poctimeline-content{
            width:50%;
            position:relative;
        }

        .poccontent-box{
            background:#111b2e;
            padding:25px 30px;
            border-radius:14px;
            box-shadow:0 10px 30px rgba(0,0,0,0.4);
            position:relative;
            opacity:0.25;
            transform:translateY(40px);
            transition:all .45s ease;
        }

        /* active content visible */
        .poctimeline-item.active .poccontent-box{
            opacity:1;
            transform:translateY(0);
        }

        /* Right side */
        .poctimeline-item:nth-child(odd) .poctimeline-content{
            left:55%;
            text-align:left;
        }

        /* Left side */
        .poctimeline-item:nth-child(even) .poctimeline-content{
            left:-5%;
            text-align:right;
        }

        /* Arrow */
        .poccontent-box::after{
            content:'';
            position:absolute;
            top:28px;
            width:18px;
            height:18px;
            background:#111b2e;
            transform:rotate(45deg);
        }

        /* Arrow Right */
        .poctimeline-item:nth-child(odd) .poccontent-box::after{
            left:-9px;
        }

        /* Arrow Left */
        .poctimeline-item:nth-child(even) .poccontent-box::after{
            right:-9px;
        }

        .poccontent-box h3{
            font-size:20px;
            margin-bottom:10px;
        }

        .poccontent-box p{
            color:#a9bdd1;
            line-height:1.6;
        }


        @media (max-width:1024px){

        .poctimeline{
            max-width:900px;
        }

        .pocprocess-header h2{
            font-size:32px;
        }

        .pocprocess-sub{
            font-size:0.95rem;
        }

        .poctimeline-number{
            width:52px;
            height:52px;
            font-size:14px;
        }

        .poccontent-box{
            padding:22px 26px;
        }

        .poccontent-box h3{
            font-size:18px;
        }

        .poccontent-box p{
            font-size:0.95rem;
        }
        }

        @media (max-width:768px){

        /* move line to left */
        .poctimeline::before,
        .poctimeline-progress{
            left:30px;
            transform:none;
        }

        .poctimeline-item{
            margin:40px 0 40px 0;
        }

        /* numbers also left */
        .poctimeline-number{
            left:30px;
            transform:translate(-50%,0);
        }

        /* content full width */
        .poctimeline-content{
            width:100%;
            left:0 !important;
            padding-left:80px;
            text-align:left !important;
        }

        /* remove arrow directions */
        .poccontent-box::after{
            left:22px !important;
            right:auto !important;
            top:-8px;
            transform:rotate(45deg);
        }

        }

        @media (max-width:640px){

        .pocpocprocess-section{
            padding:80px 18px;
        }

        .pocprocess-header{
            margin-bottom:60px;
        }

        .pocprocess-header h2{
            font-size:26px;
        }

        .pocprocess-sub{
            font-size:0.9rem;
            line-height:1.6;
        }

        /* thinner line */
        .poctimeline::before,
        .poctimeline-progress{
            left:22px;
            width:3px;
        }

        .poctimeline-number{
            width:42px;
            height:42px;
            font-size:13px;
            border-width:2px;
        }

        .poctimeline-content{
            padding-left:70px;
        }

        .poccontent-box{
            padding:18px 18px;
            border-radius:12px;
        }

        .poccontent-box h3{
            font-size:16px;
        }

        .poccontent-box p{
            font-size:0.88rem;
        }

        }


        .spv2-section{
            background:#070f1f;
            padding:120px 20px;
            color:#fff;
        }

        .spv2-container{
            /* max-width:1200px; */
            margin:auto;
        }

        /* heading */

        .spv2-head{
            text-align:center;
            margin-bottom:90px;
        }

        .spv2-title{
            font-size:3rem;
            font-weight:500;
            margin-bottom:15px;
        }

        .spv2-sub{
            font-size:1.2rem;
            color:#ccc;
            max-width:720px;
            margin:auto;
            line-height:1.7;
        }

        /* grid */

        .spv2-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:70px 30px;
            padding: 0px 100px;
        }

        /* card */

        .spv2-card{
            height: 400px;
            position:relative;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            padding:70px 25px 30px;
            border-radius:18px;
            text-align:center;
            border:1px solid rgba(0,170,255,0.15);
            transition:.35s;
        }

        /* floating icon */

        .spv2-icon-wrap{
            /* position: absolute; */
            /* top: -35px;
            left: 50%; */
            /* transform: translateX(-50%); */
            /* width: 74px; */
            height: 74px;
            /* background: #0b162b; */
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* box-shadow:0 10px 25px rgba(0,0,0,0.6);
            border:1px solid rgba(0,200,255,0.35); */
        }

        .spv2-icon-wrap img{
            width:200px;
            
        }

        /* text */

        .spv2-card h3{
            margin-top: 40px;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .spv2-card p{
        font-size: 1.2rem;
            color: #ccc;
            line-height: 1.6;
        }

        /* arrow */

        .spv2-arrow{
            margin-top:18px;
            font-size:20px;
            opacity:.7;
            transition:.3s;
        }

        /* hover */

        .spv2-card:hover{
            transform: translateY(-12px);
            /* border-color: #0082ff; */
            box-shadow: 0 18px 45px rgb(0 38 255 / 25%);
        }



        /* responsive */

        @media (max-width:1024px){

        .spv2-grid{
            grid-template-columns:repeat(2,1fr);
            padding:0 60px;
            gap:50px 24px;
        }

        .spv2-title{
            font-size:2.4rem;
        }

        .spv2-sub{
            font-size:1.05rem;
        }

        .spv2-card{
            height:360px;
            padding:60px 22px 26px;
        }

        .spv2-icon-wrap img{
            width:150px;
        }

        .spv2-card h3{
            font-size:1.35rem;
        }

        .spv2-card p{
            font-size:1.05rem;
        }
        }

        @media (max-width:768px){

        .spv2-section{
            padding:100px 18px;
        }

        .spv2-head{
            margin-bottom:60px;
        }

        .spv2-title{
            font-size:2rem;
        }

        .spv2-sub{
            font-size:0.98rem;
        }

        .spv2-grid{
            grid-template-columns:1fr 1fr;
            padding:0 30px;
            gap:40px 20px;
        }

        .spv2-card{
            height:auto; /* IMPORTANT */
            min-height:320px;
            padding:50px 20px 24px;
        }

        .spv2-icon-wrap img{
            width:120px;
        }

        .spv2-card h3{
            margin-top:28px;
            font-size:1.25rem;
        }

        .spv2-card p{
            font-size:0.95rem;
        }
        }

        @media (max-width:640px){

        .spv2-section{
            padding:80px 16px;
        }

        .spv2-title{
            font-size:1.6rem;
        }

        .spv2-sub{
            font-size:0.9rem;
            line-height:1.6;
        }

        .spv2-grid{
            grid-template-columns:1fr;
            padding:0 10px;
            gap:28px;
        }

        .spv2-card{
            min-height:auto;
            padding:40px 18px 22px;
            border-radius:14px;
        }

        .spv2-icon-wrap{
            height:60px;
        }

        .spv2-icon-wrap img{
            width:90px;
        }

        .spv2-card h3{
            font-size:1.15rem;
            margin-top:22px;
        }

        .spv2-card p{
            font-size:0.88rem;
        }

        .spv2-arrow{
            font-size:16px;
        }
        }

/*****************************************edgeai npu and TOPS ************************/
        /* ===== HERO SECTION ===== */

        .edgeai-hero{
            position:relative;
            height:100vh;
            min-height:680px;
            display:flex;
            align-items:center;
            overflow:hidden;
            background:#050b18;
        }

        /* background image */

        .edgeai-hero-bg{
            position:absolute;
            inset:0;
            z-index:0;
        }

        .edgeai-hero-bg img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        /* overlay */

        .edgeai-hero-overlay{
            position:absolute;
            inset:0;
            background: linear-gradient(90deg, rgba(5,11,24,0.92) 0%, rgba(5,11,24,0.88) 15%, rgba(5,11,24,0.55) 45%, rgba(5,11,24,0.15) 85%);
            z-index:1;
        }

        /* container */

        .edgeai-hero-container{
            position:relative;
            z-index:2;
            max-width:1550px;
            margin:auto;
            padding:0 60px;
            width:100%;
        }

        /* content */

        .edgeai-hero-content{
            max-width:560px;
            color:#fff;
        }

        /* tag */

        .edgeai-hero-tag{
            display: inline-block;
            padding: 6px 14px;
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 0.6rem;
            letter-spacing: 1px;
            border-radius: 20px;
            margin-bottom: 20px;
        }

        /* title */

        .edgeai-hero-title{
        font-size: 3rem;
            line-height: 1.15;
            margin-bottom: 22px;
            font-weight: 500;
        }

        /* description */

        .edgeai-hero-desc{
            font-size:1.2rem;
            line-height:1.7;
            color:#ccc;
            margin-bottom:35px;
        }

        /* buttons */

        .edgeai-hero-buttons{
            display:flex;
            gap:18px;
        }

        /* ===== RESPONSIVE ===== */
        
        @media (max-width:1024px){

        .edgeai-hero{
            min-height:600px;
        }

        .edgeai-hero-container{
            padding:0 40px;
        }

        .edgeai-hero-content{
            max-width:480px;
        }

        .edgeai-hero-title{
            font-size:2.4rem;
            line-height:1.2;
        }

        .edgeai-hero-desc{
            font-size:1.05rem;
            margin-bottom:28px;
        }

        .edgeai-hero-buttons{
            gap:14px;
        }
        }
        @media (max-width:768px){

        .edgeai-hero{
            height:auto;
            min-height:560px;
            align-items:center;
            text-align:center;
        }

        .edgeai-hero-container{
            padding:70px 28px;
        }

        .edgeai-hero-content{
            max-width:640px;
            margin:auto;
        }

        /* make overlay darker for readability */
        .edgeai-hero-overlay{
            background: linear-gradient(180deg, rgb(5 11 24 / 33%) 0%, rgba(5, 11, 24, 0.85) 40%, rgb(5 11 24 / 56%) 100%);
        }

        .edgeai-hero-title{
            font-size:2rem;
        }

        .edgeai-hero-desc{
            font-size:0.98rem;
        }

        .edgeai-hero-buttons{
            justify-content:center;
            flex-wrap:wrap;
        }
        }
        @media (max-width:640px){

        .edgeai-hero{
            min-height:520px;
            padding-top:20px;
        }

        .edgeai-hero-container{
            padding:70px 18px 60px;
        }

        .edgeai-hero-tag{
            font-size:0.5rem;
            padding:5px 10px;
            margin-bottom:14px;
        }

        .edgeai-hero-title{
            font-size:1.6rem;
            line-height:1.3;
            margin-bottom:16px;
        }

        .edgeai-hero-desc{
            font-size:0.9rem;
            line-height:1.6;
            margin-bottom:22px;
        }

        /* stack buttons */
        .edgeai-hero-buttons{
            flex-direction:column;
            align-items:center;
            gap:10px;
            width:100%;
        }

        .edgeai-hero-buttons a,
        .edgeai-hero-buttons button{
            width:100%;
            max-width:260px;
        }
        }


        /* ===== WHAT IS EDGE AI ===== */

        .edgeai-about{
            background:#070f1f;
            padding:120px 0;
        }

        .edgeai-about-container{
            /* max-width:1250px; */
            margin:auto;
            padding:0 60px;
            display:grid;
            grid-template-columns:1.1fr 1fr;
            gap:70px;
            align-items:center;
        }

        /* IMAGE */

        .edgeai-about-image img{
            width:100%;
            border-radius:12px;
            border:1px solid rgba(255,255,255,0.08);
            box-shadow:0 25px 70px rgba(0,0,0,0.55);
            opacity:0.95;
        }

        /* TEXT */

        .edgeai-about-text{
            color:#fff;
        }

        .edgeai-about-title{
            font-size:3rem;
            margin-bottom:25px;
            font-weight:500;
        }

        .edgeai-about-para{
            font-size:1.2rem;
            line-height:1.85;
            color:#ccc;
            margin-bottom:18px;
        }

        /* BENEFITS */

        .edgeai-benefits{
            margin-top:30px;
        }

        .edgeai-benefit{
            font-size:1rem;
            color:#ccc;
            margin-bottom:10px;
            display:flex;
            align-items:flex-start;
            gap:10px;
        }

        .edgeai-benefit span{
            color:#4da3ff;
            font-weight:bold;
            margin-top:2px;
        }

        /* RESPONSIVE */

        @media (max-width:1024px){

        .edgeai-about{
            padding:100px 0;
        }

        .edgeai-about-container{
            padding:0 40px;
            gap:50px;
        }

        .edgeai-about-title{
            font-size:2.4rem;
        }

        .edgeai-about-para{
            font-size:1.05rem;
            line-height:1.75;
        }

        .edgeai-benefit{
            font-size:0.95rem;
        }
        }

        @media (max-width:768px){

        .edgeai-about-container{
            grid-template-columns:1fr;
            padding:0 28px;
            gap:40px;
            text-align:center;
        }

        /* image first always */
        .edgeai-about-image{
            order:-1;
        }

        .edgeai-about-title{
            font-size:2rem;
        }

        .edgeai-about-para{
            font-size:0.98rem;
        }

        .edgeai-benefits{
            margin-top:22px;
        }

        .edgeai-benefit{
            justify-content:center;
        }
        }

        @media (max-width:640px){

        .edgeai-about{
            padding:80px 0;
        }

        .edgeai-about-container{
            padding:0 18px;
            gap:28px;
        }

        .edgeai-about-title{
            font-size:1.6rem;
            margin-bottom:16px;
        }

        .edgeai-about-para{
            font-size:0.9rem;
            line-height:1.65;
        }

        .edgeai-about-image img{
            border-radius:10px;
        }

        .edgeai-benefit{
            font-size:0.88rem;
            gap:8px;
        }

        .edgeai-benefit span{
            font-size:0.95rem;
        }
        }


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

        .edgeai-flow{
            background:#050b18;
            padding:140px 0;
            color:#fff;
            text-align:center;
        }

        .edgeai-flow-head{
            max-width:1200px;
            margin:0 auto 90px;
        }

        .edgeai-flow-head h2{
            font-size:3rem;
            font-weight: 500;
            margin-bottom:16px;
        }

        .edgeai-flow-head p{
            color:#ccc;
            font-size: 1.2rem;
        }

        .infographic-wrapper{
            max-width:1400px;
            margin:auto;
            position:relative;
            height:650px;
        }

        /* ===== CENTER CIRCLE ===== */

        .edgeai-center-circle{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width: 320px;
            height: 320px;
            border-radius:50%;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                    backdrop-filter: blur(15px);
            /* background:linear-gradient(145deg,#0f1f3d,#0a1428); */
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            box-shadow:0 0 40px rgba(0,162,255,.25);
            z-index:2;
        }

        .edgeai-center-circle img{
            width:95px;
            margin-bottom:15px;
        }

        .edgeai-center-circle h3{
            font-size:1.5rem;
            margin-bottom:10px;
        }

        .edgeai-center-circle p{
            font-size:1.2rem;
            color: #ccc;
            padding:0 18px;
        }

        /* ===== DASHED CIRCLE ===== */

        .edgeai-dashed-circle{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:420px;
            height:420px;
            border-radius:50%;
            border:2px dashed rgba(0,180,255,.4);
            z-index:1;
        }

        /* SMALL DOTS ON PATH */

        .edgeai-dot{
            position:absolute;
            width:10px;
            height:10px;
            background:#00b7ff;
            border-radius:50%;
            box-shadow:0 0 12px #00b7ff;
        }

        /* dot positions */

        .edgeai-d1{     top: 37px;
            left: 19%; transform:translateX(-50%); }
        .edgeai-d2{     top: 141px;
            left: 2%; transform:translateX(-50%); }
        .edgeai-d3{     left: 5px;
            top: 66%;transform:translateY(-50%); }
        .edgeai-d4{         left: 77px;
            top: 90%; transform:translateY(-50%); }
        .edgeai-d5{ top: 40px;
            right: 70px; }
        .edgeai-d6{     top: 147px;
            right: 2px;}
        .edgeai-d7{     bottom: 132px;
            right: 6px;}
        .edgeai-d8{    bottom: 34px;
            right: 80px; }

        /* ===== INFO CARDS ===== */

        .edgeai-info-card{
                opacity:0;
            position:absolute;
            width:550px;
            padding:18px 22px;
            border-radius:40px;
            /* background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                    backdrop-filter: blur(15px); */
            background:linear-gradient(145deg,#0c1b34,#091326);
            display:flex;
            align-items:center;
            gap:15px;
            box-shadow:0 10px 25px rgba(0,0,0,.4);
        
        }

        .edgeai-left{
            transform:translateX(-120px);
        }

        .edgeai-right{
            transform:translateX(120px);
        }

        .edgeai-info-card:hover{
            transform:translateY(-6px);
            box-shadow:0 15px 40px rgba(0,162,255,.25);
        }

        /* icon */

        .edgeai-icon-box{
            min-width:80px;
            height:80px;
            border-radius:50%;
            background:#08101f;
            display:flex;
            align-items:center;
            justify-content:center;
            border:2px solid #00b7ff55;
        }

        .edgeai-icon-box img{
            width:72px;
        }

        /* text */

        .edgeai-info-text h4{
            font-size:1.5rem;
            margin-bottom:6px;
        }

        .edgeai-info-text p{
            font-size:1.2rem;
            color: #ccc;
            line-height:1.5;
        }

        /* ===== LEFT SIDE ===== */


        .edgeai-card1{      right: 67%;
            top: 47px; }
        .edgeai-card2{     right: 74%;
            top: 251px; }
        .edgeai-card3{left: 36px;
            bottom: 199px;}
        .edgeai-card4{  right: 66%;
            bottom: 31px; }

        /* ===== RIGHT SIDE ===== */

        .edgeai-card5{     left: 67%;
            top: 48px;}
        .edgeai-card6{     left: 74%;
            top: 248px; }
        .edgeai-card7{      left: 67%;
            bottom: 29px;}
        .edgeai-card8{ right: 109px;
            bottom: 60px; }

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

        @media (max-width:1024px){

        .infographic-wrapper{
            height:600px;
        }

        .edgeai-center-circle{
            width:260px;
            height:260px;
        }

        .edgeai-dashed-circle{
            width:340px;
            height:340px;
        }

        .edgeai-center-circle img{
            width:75px;
        }

        .edgeai-center-circle h3{
            font-size:1.3rem;
        }

        .edgeai-center-circle p{
            font-size:1rem;
        }

        .edgeai-info-card{
            width:420px;
            padding:16px 18px;
        }

        .edgeai-icon-box{
            min-width:64px;
            height:64px;
        }

        .edgeai-icon-box img{
            width:55px;
        }

        .edgeai-info-text h4{
            font-size:1.25rem;
        }

        .edgeai-info-text p{
            font-size:1rem;
        }
        }

        @media (max-width:768px){

        .infographic-wrapper{
            height:auto;
            padding-bottom:60px;
        }

        /* hide dashed ring */
        .edgeai-dashed-circle,
        .edgeai-dot{
            display:none;
        }

        /* stack cards near center */
        .edgeai-info-card{
            position:relative;
            width:100%;
            max-width:520px;
            margin:20px auto;
            transform:none !important;
            opacity:1;
        }

        /* remove manual positions */
        .edgeai-card1,.edgeai-card2,.edgeai-card3,.edgeai-card4,
        .edgeai-card5,.edgeai-card6,.edgeai-card7,.edgeai-card8{
            top:auto;
            bottom:auto;
            left:auto;
            right:auto;
        }

        .edgeai-center-circle{
            position:relative;
            transform:none;
            margin:0 auto 40px;
        }
        }

        @media (max-width:640px){

        .edgeai-flow{
            padding:80px 0;
        }

        .edgeai-flow-head{
            margin-bottom:50px;
            padding:0 18px;
        }

        .edgeai-flow-head h2{
            font-size:1.6rem;
        }

        .edgeai-flow-head p{
            font-size:0.9rem;
        }

        /* remove infographic */
        .edgeai-center-circle{
            display:none;
        }

        .infographic-wrapper{
            padding:0 16px;
        }

        .edgeai-info-card{
            border-radius:18px;
            padding:16px;
            gap:12px;
        }

        .edgeai-icon-box{
            min-width:52px;
            height:52px;
        }

        .edgeai-icon-box img{
            width:40px;
        }

        .edgeai-info-text h4{
            font-size:1.05rem;
        }

        .edgeai-info-text p{
            font-size:0.88rem;
            line-height:1.55;
        }
        }


        /* ===== NPU & TOPS SECTION ===== */

        .edgeai-npu{
            background:#070f1f;
            padding:130px 0;
            color:#fff;
        }

        .edgeai-npu-container{
            max-width:1200px;
            margin:auto;
            padding:0 60px;
        }

        .edgeai-npu-head{
            text-align:center;
            margin-bottom:70px;
        }

        .edgeai-npu-head h2{
            font-size:40px;
            font-weight:600;
        }

        /* grid */

        .edgeai-npu-grid{
            display:grid;
            grid-template-columns:1.2fr 1fr;
            gap:80px;
            align-items:start;
        }

        /* text */

        .edgeai-npu-text h3{
            margin-top:25px;
            margin-bottom:12px;
            font-size:22px;
            color:#4da3ff;
        }

        .edgeai-npu-text p{
            color:#c6d2df;
            line-height:1.8;
            margin-bottom:18px;
        }

        /* list */

        .edgeai-factors{
            margin:20px 0;
            padding-left:18px;
        }

        .edgeai-factors li{
            margin-bottom:10px;
            color:#dce6f2;
        }

        /* cards */

        .edgeai-npu-cards{
            display:flex;
            flex-direction:column;
            gap:25px;
        }

        .edgeai-npu-card{
            background:#0d162b;
            border:1px solid rgba(77,163,255,0.25);
            padding:28px;
            border-radius:14px;
            transition:.25s;
        }

        .edgeai-npu-card h4{
            color:#4da3ff;
            margin-bottom:14px;
        }

        .edgeai-npu-card p{
            color:#cdd9e5;
            margin:6px 0;
        }

        .edgeai-npu-card:hover{
            transform:translateY(-6px);
            border-color:#4da3ff;
            box-shadow:0 10px 40px rgba(0,0,0,0.4);
        }

        /* responsive */
        @media (max-width:1024px){

        .edgeai-npu-container{
            padding:0 40px;
        }

        .edgeai-npu-head h2{
            font-size:32px;
        }

        .edgeai-npu-grid{
            gap:50px;
        }

        .edgeai-npu-text h3{
            font-size:20px;
        }

        .edgeai-npu-text p{
            font-size:0.98rem;
        }

        .edgeai-npu-card{
            padding:24px;
        }

        .edgeai-npu-card h4{
            font-size:1.1rem;
        }
        }

        @media (max-width:768px){

        .edgeai-npu-grid{
            grid-template-columns:1fr;
            gap:40px;
        }

        .edgeai-npu-container{
            padding:0 28px;
        }

        .edgeai-npu-head{
            margin-bottom:50px;
        }

        .edgeai-npu-head h2{
            font-size:26px;
        }

        /* cards come below text */
        .edgeai-npu-cards{
            max-width:600px;
            margin:auto;
        }

        }

        @media (max-width:640px){

        .edgeai-npu{
            padding:80px 0;
        }

        .edgeai-npu-container{
            padding:0 18px;
        }

        .edgeai-npu-head h2{
            font-size:20px;
            line-height:1.3;
        }

        .edgeai-npu-text h3{
            font-size:17px;
            margin-top:18px;
        }

        .edgeai-npu-text p{
            font-size:0.9rem;
            line-height:1.65;
        }

        .edgeai-factors li{
            font-size:0.9rem;
        }

        .edgeai-npu-card{
            padding:18px;
            border-radius:12px;
        }

        .edgeai-npu-card h4{
            font-size:1rem;
        }

        .edgeai-npu-card p{
            font-size:0.88rem;
        }
        }


        /* ===== SECTION ===== */
        .aix-section{
            background:#0b0f14;
            padding:120px 20px;
        
            color:#fff;
        }

        /* heading */
        .aix-header{
            text-align:center;
            max-width:800px;
            margin:0 auto 80px;
        }
        .aix-header h2{
            font-size:3rem;
            font-weight:500;
            letter-spacing:.5px;
            margin-bottom:15px;
        }
        .aix-header p{
            color:#ccc;
            line-height:1.7;
            font-size:1.2rem;
        }

        /* cards grid */
        .aix-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            gap:40px;
            max-width:1500px;
            margin:auto;
        }

        /* ===== CARD ===== */
        .aix-card{
            height: 500px;
            position:relative;
                background: linear-gradient(145deg, #0c1b34, #091326);
            /* background:#121821; */
            padding:60px 28px 35px;
            border-radius:14px;
            text-align:center;
            transition:.35s ease;
            overflow:hidden;
        }

        /* corner lines */
        .aix-card::before,
        .aix-card::after{
            content:"";
            position:absolute;
            width: 100px;
            height: 100px;
            border:2px solid #2ab3ff;
            opacity:.65;
        }
        .aix-card::before{
            top:18px;
            left:18px;
            border-right:none;
            border-bottom:none;
        }
        .aix-card::after{
            bottom:18px;
            right:18px;
            border-left:none;
            border-top:none;
        }

        /* hover */
        .aix-card:hover{
            transform:translateY(-10px);
            box-shadow:0 20px 40px rgba(0,0,0,.6);
        }

        /* ===== ICON ===== */
        .aix-icon{
            width: 90px;
                height: 90px;
                border-radius: 50%;
                margin: 40px auto 30px;
                background: #08101f;
                /* background: linear-gradient(145deg, #1d2b3a, #0e141c); */
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                color: #2ab3ff;
                border: 2px solid #00b7ff55;
                /* box-shadow: 0 0 0 6px #0b0f14, 0 0 20px rgba(42, 179, 255, .35); */
                transition: .35s;
        }

        .aix-icon img{
            width:104px;
            height:104px;
            object-fit:contain;
            filter:brightness(1.2) saturate(1.2);
        }


        .aix-card:hover .aix-icon{
            box-shadow:0 0 0 6px #0b0f14,0 0 35px rgba(42,179,255,.7);
        }

        /* title */
        .aix-card h3{
            font-size:1.5rem;
            margin:15px 0 12px;
            font-weight:600;
        }

        /* description */
        .aix-card p{
            color:#ccc;
            font-size:1.2rem;
            line-height:1.7;
            margin-bottom:20px;
        }

        /* read more */
        .aix-more{
            text-decoration:none;
            color:#2ab3ff;
            font-size:14px;
            font-weight:500;
            letter-spacing:.3px;
        }
        .aix-more:hover{
            text-decoration:underline;
        }

        /* responsive */
        /* =========================
        1024px
        ========================= */
        @media (max-width:1024px){

        .aix-header h2{
            font-size:2.4rem;
        }

        .aix-header p{
            font-size:1.05rem;
        }

        .aix-grid{
            gap:28px;
        }

        .aix-card{
            height:auto;
            min-height:420px;
            padding:50px 24px 30px;
        }

        .aix-icon{
            width:78px;
            height:78px;
        }

        .aix-icon img{
            width:86px;
            height:86px;
        }

        .aix-card h3{
            font-size:1.35rem;
        }

        .aix-card p{
            font-size:1.05rem;
        }
        }
        /* =========================
        768px
        ========================= */
        @media (max-width:768px){

        .aix-section{
            padding:100px 18px;
        }

        .aix-header{
            margin-bottom:60px;
        }

        .aix-header h2{
            font-size:2rem;
            line-height:1.25;
        }

        .aix-header p{
            font-size:0.98rem;
        }

        .aix-grid{
            gap:22px;
        }

        .aix-card{
            min-height:380px;
            padding:45px 22px 26px;
        }

        .aix-icon{
            width:70px;
            height:70px;
            margin:30px auto 20px;
        }

        .aix-icon img{
            width:70px;
            height:70px;
        }

        .aix-card h3{
            font-size:1.25rem;
        }

        .aix-card p{
            font-size:0.95rem;
        }
        }
        /* =========================
        640px
        ========================= */
        @media (max-width:640px){

        .aix-section{
            padding:80px 14px;
        }

        .aix-header h2{
            font-size:1.6rem;
        }

        .aix-header p{
            font-size:0.9rem;
            line-height:1.6;
        }

        .aix-grid{
            gap:18px;
        }

        /* card becomes compact feature block */
        .aix-card{
            min-height:auto;
            padding:36px 18px 22px;
            border-radius:12px;
        }

        .aix-icon{
            width:60px;
            height:60px;
            margin:18px auto 14px;
        }

        .aix-icon img{
            width:56px;
            height:56px;
        }

        .aix-card h3{
            font-size:1.15rem;
        }

        .aix-card p{
            padding: 10px;
            font-size:0.88rem;
            line-height:1.6;
            margin-bottom:14px;
        }

        .aix-more{
            font-size:13px;
        }
        }
        /* SECTION */
        .nxw-section{
            padding:120px 40px;
            
        }

        /* HEADER */
        .nxw-header{
            text-align:center;
            margin-bottom:110px;
        }
        .nxw-header h2{
            font-size:3rem;
            font-weight: 500;
            color:#fff;
            margin-bottom:15px;
        }
        .nxw-header p{
            color:#ccc;
            font-size:1.2rem;
        }

        /* TIMELINE */
        .nxw-timeline{
            display: flex;
            justify-content: center;
            align-items:center;
            position:relative;
        }

        .row-reverse{
            display: flex;
            flex-direction: column-reverse;
        }

        /* ITEM */
        .nxw-item{
            width:25%;
            position:relative;
            text-align:center;
        }

        /* NUMBER */
        .nxw-number{
            font-size:80px;
            font-weight:700;
        color: linear-gradient(145deg, #0c1b34, #091326);
            /* box-shadow: 0 10px 25px rgba(0, 0, 0, .4);  */
            margin-bottom:10px;
        }

        /* HALF CIRCLE */
        .nxw-semicircle{
            width:400px;
            height:155px;
            margin:auto;
            display:flex;
            justify-content:center;
            align-items:center;
            color:#fff;
            font-size:36px;
                background: linear-gradient(rgb(14 70 204 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                    /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
                    backdrop-filter: blur(15px);
            /* background: linear-gradient(145deg, #0c1b34, #091326);
            box-shadow: 0 10px 25px rgba(0, 0, 0, .4); */
        }

        /* TOP */
        .nxw-top .nxw-semicircle{
            border-radius:230px 230px 0 0;
        }

        /* BOTTOM */
        .nxw-bottom .nxw-semicircle{
            border-radius:0 0 230px 230px;
        }

        /* JOIN MAGIC */
        .nxw-item:not(:first-child){
            margin-left:-45px;
        }

        /* CONTENT */
        .nxw-content{
            margin-top:20px;
        }
        .nxw-content h3{
            font-size:1.5rem;
            /* letter-spacing:2px; */
            color:#fff;
        }
        .nxw-content p{
            color:#ccc;
            font-size:1.2rem;
            line-height:1.6;
            max-width:290px;
            margin:30px auto;
        }

        /* COLORS */
        .nxw-item:nth-child(2) .nxw-semicircle{  background: linear-gradient(rgba(15, 15, 15, 0.71) 0%, rgb(14 70 204 / 52%) 100%);
                    /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
                    backdrop-filter: blur(15px);}
        /* .nxw-item:nth-child(3) .nxw-semicircle{ background:#1f6e9c;} */
        .nxw-item:nth-child(4) .nxw-semicircle{  background: linear-gradient(rgba(15, 15, 15, 0.71) 0%, rgb(14 70 204 / 52%) 100%);
                    /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
                    backdrop-filter: blur(15px);} 
        /* .nxw-item:nth-child(4) .nxw-number{ color:#7ac1cc;} */

        /* RESPONSIVE */
        /* =========================
        1024px
        ========================= */
        @media (max-width:1024px){

        .nxw-semicircle{
            width:300px;
            height:130px;
            font-size:28px;
        }

        .nxw-number{
            font-size:60px;
        }

        .nxw-item:not(:first-child){
            margin-left:-25px;
        }
        }
        /* =========================
        768px
        ========================= */
        @media (max-width:768px){

        /* timeline vertical */
        .nxw-timeline{
            flex-direction:column;
            align-items:center;
            gap:60px;
        }

        /* each step full width */
        .nxw-item{
            width:100%;
            max-width:520px;
        }

        /* STOP overlapping */
        .nxw-item:not(:first-child){
            margin-left:0;
            flex-direction: column;
        }

        /* semicircle smaller */
        .nxw-semicircle{
            width:260px;
            height:120px;
            font-size:26px;
        }

        /* keep orientation but centered */
        .nxw-top .nxw-semicircle{
            border-radius:230px 230px 0 0;
        }

        .nxw-bottom .nxw-semicircle{
            border-radius:0 0 230px 230px;
        }

        .nxw-content p{
            max-width:420px;
        }
        }
        /* =========================
        640px
        ========================= */
        @media (max-width:640px){

        .nxw-section{
            padding:80px 18px;
        }

        .nxw-header{
            margin-bottom:60px;
        }

        .nxw-header h2{
            font-size:1.6rem;
            line-height:1.3;
        }

        .nxw-header p{
            font-size:0.9rem;
        }

        .nxw-number{
            font-size:42px;
        }

        .nxw-semicircle{
            width:210px;
            height:100px;
            font-size:22px;
        }

        .nxw-content h3{
            font-size:1.15rem;
        }

        .nxw-content p{
            font-size:0.88rem;
            margin:16px auto 0;
        }
        }


        /* SECTION */
        .uxa-section{
            padding:120px 40px;
        }


        /* GRID */

        .uxa-grid{
            max-width:1700px;
            margin:auto;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:30px;
            align-items:stretch;
        }

        /* INTRO BLOCK (left heading card) */
        .uxa-intro{
            padding:20px 10px 10px 10px;
        }

        .uxa-tag{
            display:inline-block;
            font-size:14px;
                color: #4fa3ff;
            margin-bottom:15px;
            position:relative;
        }



        .uxa-intro h2{
            font-size:3rem;
            font-weight: 500;
            color:#fff;
            line-height:1.2;
            margin-bottom:20px;
        }

        .uxa-intro p{
            color:#ccc;
            font-size:1.2rem;
            max-width:420px;
            line-height:1.7;
        }


        /* CARD */
        .uxa-card{
            height:460px;
            background-size:cover;
            background-position:center;
            border-radius:14px;
            position:relative;
            overflow:hidden;
            cursor:pointer;
            transition:transform .35s ease, box-shadow .35s ease;
        }

        .uxa-card:hover{
            transform:translateY(-8px);
            box-shadow:0 18px 40px rgba(0,0,0,0.25);
        }
        /* IMAGE */
        .uxa-bgimg{
            position:absolute;
            width:100%;
            height:100%;
            object-fit:cover;
            top:0;
            left:0;
            z-index:1;
            transition:transform .6s ease;
        }

        /* zoom on hover (premium look) */
        .uxa-card:hover .uxa-bgimg{
            transform:scale(1.08);
        }
        /* DARK OVERLAY */
        /* PERMANENT SOFT DARK OVERLAY */
        .uxa-card::before{
            content:"";
            position:absolute;
            inset:0;
            z-index:2;
            pointer-events:none;

            /* light darkness only */
            background:rgba(0,0,0,0.40);

            opacity:1;
            transition:opacity .4s ease;
        }

            /* BOTTOM DARK SHADE (HIDDEN FIRST) */
        .uxa-card::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:55%;
            pointer-events:none;
            z-index:2;

            /* important */
            background:linear-gradient(
                to top,
                rgba(0,0,0,0.95) 0%,
                rgba(0,0,0,0.75) 35%,
                rgba(0,0,0,0.35) 65%,
                rgba(0,0,0,0.0) 100%
            );

            opacity:0;
            transform:translateY(30px);
            transition:opacity .45s ease, transform .45s ease;
        }

        /* SHOW SHADE ON HOVER */
        .uxa-card:hover::after{
            opacity:1;
            transform:translateY(0);
        }

        /* TOP CONTENT */
        .uxa-top{
            position:absolute;
            top:20px;
            left:20px;
            right:20px;
            display:flex;
            align-items:center;
            gap:12px;
            z-index:2;
            color:#fff;
        }

        .uxa-icon{
            width:42px;
            height:42px;
            border-radius:50%;
            background:rgba(255,255,255,0.2);
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
        }

        /* TITLE */
        .uxa-top h3{
            margin-bottom: 0;
            font-size:1.5rem;
            font-weight:600;
        }

        /* BOTTOM CONTENT (HIDDEN FIRST) */
        .uxa-bottom{
            position:absolute;
            left:20px;
            right:20px;
            bottom:-80px;
            z-index:3;
            color:#fff;
            opacity:0;
            transition:all .45s cubic-bezier(.22,.61,.36,1);
        }

        .uxa-bottom p{
            font-size:1.2rem;
            line-height:1.6;
        }

        /* HOVER ANIMATION */
        .uxa-card:hover .uxa-bottom{
            bottom:20px;
            opacity:1;
        }

        /* RESPONSIVE */

        @media (max-width:1024px){

        .uxa-section{
            padding:100px 30px;
        }

        .uxa-grid{
            grid-template-columns:1fr 1fr;
            gap:24px;
        }

        .uxa-intro h2{
            font-size:2.4rem;
        }

        .uxa-intro p{
            font-size:1.05rem;
            max-width:380px;
        }

        .uxa-card{
            height:400px;
        }

        .uxa-top h3{
            font-size:1.3rem;
        }

        .uxa-bottom p{
            font-size:1.05rem;
        }
        }

        @media (max-width:768px){

        .uxa-grid{
            grid-template-columns:1fr;
            max-width:600px;
        }

        .uxa-intro{
            text-align:center;
            margin-bottom:10px;
        }

        .uxa-intro p{
            margin:auto;
        }

        /* remove hover dependency */
        .uxa-bottom{
            bottom:20px;
            opacity:0;
        }
         .uxa-card:hover .uxa-bottom{
            bottom:20px;
            opacity:1;
        }

        .uxa-card{
            height:340px;
        }
        .uxa-card:hover {
            transform: translateY(-8px);
            box-shadow: rgba(0, 0, 0, 0.25) 0px 18px 40px;
        }

        .uxa-top{
            top:18px;
        }
        }

        @media (max-width:640px){

        .uxa-section{
            padding:80px 18px;
        }

        .uxa-intro h2{
            font-size:1.6rem;
        }

        .uxa-intro p{
            font-size:0.9rem;
            line-height:1.6;
        }

        .uxa-grid{
            gap:18px;
        }

        /* card becomes content card */
        .uxa-card{
            height:auto;
            min-height:260px;
            border-radius:12px;
        }

        /* overlay darker for readability */
        .uxa-overlay{
            background:linear-gradient(
            rgba(0,0,0,.75),
            rgba(0,0,0,.45)
            );
        }

        .uxa-top h3{
            font-size:1.15rem;
        }

        .uxa-bottom{
            /* position:relative; */
            /* bottom:auto; */
            /* left:auto; */
            right:auto;
            margin-top:70px;
            opacity:0;
        }

        .uxa-bottom p{
            font-size:0.88rem;
        }

        .uxa-icon{
            width:34px;
            height:34px;
            font-size:14px;
        }
        }

/******************************Vision ai ************************************/
        .vai-slider-wrapper{
            position:relative;
        }

        .vai-slider-viewport{
            overflow:hidden;
            position:relative;
            touch-action:pan-y;
        }

        .vai-slider-track{
            display:flex;
            transition:transform 1s cubic-bezier(.77,0,.18,1);
        }

        .vai-slide{
            min-width:100%;
        }

        /* arrows */
        .vai-nav{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:48px;
            height:48px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:26px;
            color:#fff;
            cursor:pointer;
            background:rgba(255,255,255,0.08);
            z-index:10;
        }

        .vai-prev{ left:40px; }
        .vai-next{ right:40px; }

        .vai-nav:hover{
            background:#072344;
        }
        /* SECTION */
        .vai-about{
            padding:100px 0;
            background:#050914;
            color:#fff;
        }
        .vision-big{
            background: linear-gradient(145deg, #0c1b34, #091326);
            /* background-color: rgb(24 28 41 / 92%); */
            padding:70px 60px;
            border-radius:20px;
        }

        /* CENTER HEADING */
        .vai-about-head{
            text-align:center;
            /* margin-bottom:50px; */
        }

        .vai-about-tag{
            color:#4da3ff;
            font-size:12px;
            letter-spacing:2px;
            font-weight:500;
            display:block;
            margin-bottom:10px;
        }

        .vai-about-title{
            font-size:3rem;
            line-height:1.2;
            font-weight:500;
        }

        /* ROW LAYOUT */
        .vai-about-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:70px;
        }

        /* CONTAINER */
        .vai-about-container{
            width:90%;
            max-width:1450px;
            margin:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:60px;
        }

        /* LEFT TEXT */
        .vai-about-text{
            flex:1;
        }

        .vai-about-tag{
            color:#4da3ff;
            font-size:13px;
            letter-spacing:2px;
            font-weight:600;
        }

        .vai-about-title{
            font-size:42px;
            margin:12px 0 20px;
            line-height:1.2;
        }

        .vai-about-desc{
            color:#ccc;
            font-size:1.2rem;
            line-height:1.8;
            margin-bottom:18px;
        }

        /* COMPARISON */
        .vai-about-compare{
            display:flex;
            align-items:center;
            gap:18px;
            margin-top:35px;
        }

        .vai-compare-box{
            border:1px solid rgba(255,255,255,0.15);
            padding:18px 22px;
            border-radius:10px;
            /* background:rgba(255,255,255,0.02); */
            min-width:200px;
        }

        .vai-compare-box h4{
            margin-bottom:6px;
            font-size:18px;
        }

        .vai-compare-box p{
            color:#a8b5c7;
            font-size:14px;
        }

        .vai-compare-box.highlight{
            border:1px solid #4da3ff;
            /* background:rgba(77,163,255,0.08); */
        }

        .vai-compare-arrow{
            font-size:28px;
            color:#4da3ff;
            font-weight:700;
        }

        /* RIGHT IMAGE */
        .vai-about-image{
            flex:1;
            display:flex;
            justify-content:center;
        }

        .vai-about-image img{
            width:100%;
            max-width:520px;
            border-radius:14px;
            /* box-shadow:0 20px 60px rgba(0,0,0,0.6); */
        }

        /* RESPONSIVE */

        @media (max-width:1024px){

        .vision-big{
            padding:55px 40px;
        }

        .vai-about-container{
            gap:40px;
        }

        .vai-about-title{
            font-size:2.4rem;
        }

        .vai-about-desc{
            font-size:1.05rem;
            line-height:1.7;
        }

        .vai-about-image img{
            max-width:460px;
        }

        .vai-compare-box{
            min-width:170px;
            padding:16px 18px;
        }
                .vai-nav{
            width:42px;
            height:42px;
            font-size:22px;
        }

        .vai-prev{ left:20px; }
        .vai-next{ right:20px; }

        .vai-slider-track{
            transition:transform .8s cubic-bezier(.77,0,.18,1);
        }
        }
        @media (max-width:768px){

        .vai-about-container{
            flex-direction:column;
            text-align:center;
            gap:40px;
        }
        .vai-about-row {
            flex-direction: column;
        }
        /* image first */
        .vai-about-image{
            order:-1;
        }

        .vision-big{
            padding:50px 30px;
        }

        .vai-about-title{
            font-size:2rem;
        }

        .vai-about-desc{
            font-size:0.98rem;
        }

        /* comparison boxes centered */
        .vai-about-compare{
            justify-content:center;
            flex-wrap:wrap;
        }

        .vai-compare-arrow{
            display:none; /* arrow mobile ma disturb kare */
        }
        /* arrows inside screen */
        .vai-prev{ left:12px; }
        .vai-next{ right:12px; }

        .vai-nav{
            width:38px;
            height:38px;
            font-size:20px;
            backdrop-filter:blur(6px);
            background:rgba(0,0,0,.35);
        }

        /* smoother swipe */
        .vai-slider-viewport{
            touch-action:pan-y pinch-zoom;
        }
        }
        @media (max-width:640px){

        .vai-about{
            padding:80px 0;
        }

        .vision-big{
            padding:32px 18px;
            border-radius:14px;
        }

        .vai-about-title{
            font-size:1.6rem;
            line-height:1.3;
        }

        .vai-about-desc{
            font-size:0.9rem;
            line-height:1.6;
        }

        .vai-about-container{
            width:92%;
        }

        .vai-about-image img{
            max-width:100%;
        }

        /* comparison becomes stacked */
        .vai-about-compare{
            flex-direction:column;
            gap:12px;
            margin-top:22px;
        }

        .vai-compare-box{
            width:100%;
            min-width:auto;
            padding:14px 14px;
        }

        .vai-compare-box h4{
            font-size:15px;
        }

        .vai-compare-box p{
            font-size:12px;
        }
        /* arrows inside screen */
        .vai-prev{ left:12px; }
        .vai-next{ right:12px; }

        .vai-nav{
            top: 430px;
            width:38px;
            height:38px;
            font-size:20px;
            backdrop-filter:blur(6px);
            background:rgba(0,0,0,.35);
        }

        /* smoother swipe */
        .vai-slider-viewport{
            touch-action:pan-y pinch-zoom;
        }
        }

        .bpinf-section{
            padding:110px 20px;
        }

        .bpinf-container{
            max-width:1500px;
            margin:auto;
            text-align:center;
        }

        .bpinf-title{
            font-size:3rem;
            margin-bottom:8px;
            font-weight:500;
        }

        .bpinf-sub{
            font-size: 1.2rem;
            color:#ccc;
            margin-bottom:90px;
        }

        /* ---------------- FLOW LINE ---------------- */

        .bpinf-flow{
            display:flex;
            justify-content:space-between;
            position:relative;
        }

        .bpinf-flow::before{
                content: '';
            position: absolute;
            top: 62px;
            left: 8%;
            right: 8%;
            height: 1px;
            background: #848484;
            z-index: 0;
        }

        /* ---------------- STEP ---------------- */

        .bpinf-step{
            width:23%;
            position:relative;
        }



        /* last step ma connector nahi */
        .bpinf-step:last-child::after{
            display:none;
        }

        /* circle outer arc ring */

        .bpinf-circle::before{
                content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 3px solid #cfd8dc;
            top: -15px;
            left: -15px;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: rotate(47deg);
        }




        /* ---------------- CIRCLE ---------------- */

        .bpinf-circle{
            width:120px;
            height:120px;
            border-radius:50%;
            margin:0 auto;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            z-index:2;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                            /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
                            backdrop-filter: blur(15px); 
            /* box-shadow:0 10px 25px rgba(0,0,0,.18); */
        }

        /* ICON */
        .bpinf-circle img{
            width:68px;
            height:68px;
            object-fit:contain;
            
        }


        /* COLORS */
        /* .blue{ background:linear-gradient(145deg,#1f7bff,#0b4edb); }
        .pink{ background:linear-gradient(145deg,#ff3f7f,#d81b60); }
        .orange{ background:linear-gradient(145deg,#ffa726,#fb8c00); }
        .purple{ background:linear-gradient(145deg,#b23aff,#7b1fa2); } */

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

        .bpinf-card{
            background:linear-gradient(145deg,#0c1b34,#091326);
            padding:25px 18px;
            margin-top:40px;
            border-radius:14px;
            box-shadow:0 12px 30px rgba(0,0,0,.08);
        }

        .bpinf-card h3{
            color: #fff;
            font-size:1.5rem;
            
            margin-bottom:10px;
        }

        .bpinf-card p{
            font-size:1.2rem;
            color:#ccc;
            line-height:1.6;
        }

        /* ---------------- NUMBER BADGE ---------------- */

        .bpinf-number{
            width:60px;
            height:60px;
            border-radius:50%;
            margin:28px auto 0;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            font-weight:600;
            font-size:18px;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                            backdrop-filter: blur(15px); 
            /* box-shadow:0 10px 25px rgba(0,0,0,.25); */
        }

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

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

        .bpinf-title{
            font-size:2.4rem;
        }

        .bpinf-sub{
            font-size:1.05rem;
            margin-bottom:70px;
        }

        .bpinf-circle{
            width:100px;
            height:100px;
        }

        .bpinf-circle::before{
            width:130px;
            height:130px;
            top:-15px;
            left:-15px;
        }

        .bpinf-circle img{
            width:56px;
            height:56px;
        }

        .bpinf-card h3{
            font-size:1.3rem;
        }

        .bpinf-card p{
            font-size:1.05rem;
        }

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

        .bpinf-flow{
            flex-direction:column;
            align-items:center;
            gap:70px;
        }

        .bpinf-step{
            width:100%;
            max-width:500px;
        }

        /* remove horizontal connector */
        .bpinf-flow::before{
            display:none;
        }

        /* create vertical connector line */
        .bpinf-step::before{
            content:"";
            position:absolute;
            left:50%;
            top:-70px;
            width:2px;
            height:70px;
            background:#848484;
            transform:translateX(-50%);
        }

        .bpinf-step:first-child::before{
            display:none;
        }

        .bpinf-card{
            margin-top:30px;
        }
        }

        @media (max-width:640px){

        .bpinf-section{
            padding:80px 14px;
        }

        .bpinf-title{
            font-size:1.6rem;
            line-height:1.3;
        }

        .bpinf-sub{
            font-size:0.9rem;
            margin-bottom:50px;
        }

        .bpinf-circle{
            width:85px;
            height:85px;
        }

        .bpinf-circle::before{
            width:110px;
            height:110px;
        }

        .bpinf-circle img{
            width:44px;
            height:44px;
        }

        .bpinf-card{
            padding:18px 14px;
            border-radius:12px;
        }

        .bpinf-card h3{
            font-size:1.15rem;
        }

        .bpinf-card p{
            font-size:0.88rem;
            line-height:1.6;
        }

        .bpinf-number{
            display: none;
            width:46px;
            height:46px;
            font-size:14px;
            margin-top:18px;
        }
        }
        /* ===== SECTION BASE ===== */
        .vai-tech-section{
        
            padding:120px 20px;
            
            color:#fff;
        }

        /* heading */
        .vai-tech-header{
            text-align:center;
            max-width:900px;
            margin:0 auto 100px;
        }
        .vai-tech-header h2{
            font-size:3rem;
            font-weight:500;
            margin-bottom:10px;
        }
        .vai-tech-header p{
            color:#ccc;
            font-size:16px;
        }

        /* ===== timeline wrapper ===== */
        .vai-tech-wrapper{
            /* max-width:1500px; */
            margin:auto;
            position:relative;
        }

        /* vertical center line */
        /* .vai-tech-wrapper::before{
            content:"";
            position:absolute;
            left:50%;
            top:0;
            transform:translateX(-50%);
            width:2px;
            height:100%;
            background:linear-gradient(to bottom,transparent,#1f2a36,transparent);
        } */

        /* row */
        .vai-tech-row{
                display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 35px 0;
        }

        /* left right alignment */
        .vai-left{ flex-direction:row; }
        .vai-right{ flex-direction:row-reverse; }

        /* ===== pill card ===== */
        .vai-card{
            width:44%;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                            backdrop-filter: blur(15px); 
            /* background:#121821; */
            border-radius:60px;
            padding:18px 28px 18px 120px;
            position:relative;
            box-shadow:0 10px 25px rgba(0,0,0,.45);
            /* transition:.35s; */
            opacity:0;
            will-change:transform, opacity;
        }

        .vai-card:hover{
            transform: translateY(-12px);
            /* border-color: #0082ff; */
            box-shadow: 0 18px 45px rgb(0 38 255 / 25%);
        }

        /* icon circle */
        .vai-icon{
            position:absolute;
            left:18px;
            top:50%;
            transform:translateY(-50%);
            width:82px;
            height:82px;
            border-radius:50%;
            background:#0b0f14;
            border:2px solid #2a9df4;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .vai-icon img{
            width:56px;
            height:56px;
            filter:brightness(0) invert(1);
        }

        /* text */
        .vai-title{
            font-size:1.5rem;
            font-weight:600;
            margin-bottom:6px;
        }

        .vai-sub{
            font-size:1.2rem;
            color:#ccc;
            line-height:1.5;
        }

        /* responsive */

        @media (max-width:1024px){

        .vai-tech-header h2{
            font-size:2.4rem;
        }

        .vai-tech-header p{
            font-size:0.95rem;
        }

        .vai-card{
            width:48%;
            padding:16px 24px 16px 100px;
            border-radius:50px;
        }

        .vai-icon{
            width:70px;
            height:70px;
        }

        .vai-icon img{
            width:46px;
            height:46px;
        }

        .vai-title{
            font-size:1.3rem;
        }

        .vai-sub{
            font-size:1.05rem;
        }
        }
        @media (max-width:768px){

        .vai-tech-header{
            margin-bottom:70px;
        }

        /* stack rows */
        .vai-tech-row{
            flex-direction:column !important;
            gap:20px;
        }

        .vai-card{
            width:100%;
            max-width:620px;
            margin:auto;
        }

        /* icon stays left */
        .vai-left,
        .vai-right{
            flex-direction:column;
        }

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

        .vai-tech-section{
            padding:80px 14px;
        }

        .vai-tech-header h2{
            font-size:1.6rem;
            line-height:1.3;
        }

        .vai-tech-header p{
            font-size:0.9rem;
        }

        .vai-card{
            padding:14px 16px 14px 78px;
            border-radius:28px;
        }

        .vai-icon{
            left:12px;
            width:56px;
            height:56px;
            border-width:1.5px;
        }

        .vai-icon img{
            width:34px;
            height:34px;
        }

        .vai-title{
            font-size:1.1rem;
        }

        .vai-sub{
            font-size:0.88rem;
            line-height:1.55;
        }
        }


        .viuc-section{
            padding:110px 20px;
        }

        .viuc-container{
            max-width:1550px;
            margin:auto;
        }

        .viuc-title{
            text-align:center;
            font-size:3rem;
            font-weight:500;
            margin-bottom:80px;
            letter-spacing:.5px;
        }

        /* ===== LAYOUT ===== */
        .viuc-wrapper{
            display:flex;
            align-items:center;
            gap:60px;
        }

        /* ===== LEFT LIST ===== */
        .viuc-list{
            width:38%;
        }

        .viuc-item{
            padding:18px 22px;
            border-radius:14px;
            margin-bottom:16px;
            cursor:pointer;
            border:1px solid rgba(255,255,255,.07);
            background: linear-gradient(145deg, #0c1b34, #091326);
            transition:.35s;
            font-size:1.2rem;
        }

        .viuc-item:hover{
            background:#141d29;
        }

        /* ACTIVE */
        .viuc-item.active{
            
            box-shadow: 0 0 25px rgb(70 120 255 / 70%);
            transform:translateX(10px);
        }

        /* ===== CARD AREA ===== */
        .viuc-card-area{
            width:62%;
            position:relative;
            height:460px;
            perspective:1400px;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        /* glow aura */
        .viuc-card-area::before{
            content:'';
            position:absolute;
            width:560px;
            height:560px;
            background:radial-gradient(circle,
            rgba(65,120,255,.25),
            transparent 65%);
            border-radius:50%;
            z-index:0;
        }

        /* BASE CARD */
        .viuc-card{
            position:absolute;
            width:580px;
            max-width:100%;
            background: linear-gradient(145deg, #0c1b34, #091326);
            border-radius:22px;
            padding:25px;
            transition:.65s cubic-bezier(.22,.61,.36,1);
            box-shadow:0 35px 90px rgba(0,0,0,.8);
        }

        /* IMAGE */
        .viuc-card img{
            width:100%;
            height:330px;
            object-fit:cover;
            border-radius:14px;
            margin-bottom:18px;
        }

        /* TEXT */
        .viuc-card p{
            color:#ccc;
            font-size: 1.2rem;
            line-height:1.7;
        }

        /* ===== POSITIONS ===== */

        /* CENTER */
        .viuc-card.pos-center{
            transform:translateX(0) scale(1);
            z-index:5;
            opacity:1;
        }

        /* LEFT */
        .viuc-card.pos-left{
            transform:translateX(-200px) scale(.86) rotateY(8deg);
            z-index:4;
            opacity:.45;
            filter:blur(.6px);
        }

        /* RIGHT */
        .viuc-card.pos-right{
            transform:translateX(200px) scale(.86) rotateY(-8deg);
            z-index:4;
            opacity:.45;
            filter:blur(.6px);
        }

        /* HIDDEN */
        .viuc-card.hidden{
            transform:scale(.7);
            opacity:0;
            z-index:1;
        }

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

        @media (max-width:1024px){

        .viuc-title{
            font-size:2.4rem;
            margin-bottom:60px;
        }

        .viuc-wrapper{
            gap:40px;
        }

        .viuc-list{
            width:40%;
        }

        .viuc-card-area{
            width:60%;
            height:420px;
        }

        .viuc-card{
            width:520px;
            padding:22px;
        }

        .viuc-card img{
            height:280px;
        }

        .viuc-card p{
            font-size:1.05rem;
        }
        }
        @media (max-width:768px){

        .viuc-wrapper{
            flex-direction:column;
            align-items:stretch;
        }

        .viuc-list{
            width:100%;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }

        .viuc-item{
            margin-bottom:0;
            text-align:center;
        }

        .viuc-item.active{
            transform:none;
        }

        /* card viewer */
        .viuc-card-area{
                width: 100%;
                height: 320px;
        /* 
            margin-top:30px; */
        }

        /* remove 3D positions */
        .viuc-card,
        .viuc-card.pos-center{
            position:relative;
            transform:none !important;
            opacity:1 !important;
            filter:none;
        }

        .viuc-card.pos-left,
            .uc-card.pos-right{
                display:none;
            }

        .viuc-card.hidden{
            display:none;
        }

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

        .viuc-section{
            padding:80px 14px;
        }

        .viuc-title{
            font-size:1.6rem;
            margin-bottom:40px;
        }

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

        .viuc-item{
            font-size:0.95rem;
            padding:14px 14px;
            border-radius:12px;
        }

        .viuc-card-area::before{
            display:none; /* aura remove for clarity */
        }

        .viuc-card{
            padding:16px;
            border-radius:16px;
        }

        .viuc-card img{
            height:200px;
            border-radius:12px;
        }

        .viuc-card p{
            font-size:0.88rem;
            line-height:1.6;
        }
        }

/*****************************Product Engineering Support*************************/
        .pes-overview{
            padding:100px 0;
            background:#020617;
            color:#fff;
        }

        .pes-container{
            max-width:1500px;
            margin:auto;
            padding:0 24px;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:60px;
            align-items:center;
        }

        /* text */
        .pes-tag{
            display:inline-block;
            /* padding:6px 14px; */
            /* background:rgba(14,165,233,0.15); */
            color: #4da3ff;
            border-radius:20px;
            font-size:15px;
            margin-bottom:18px;
        }

        .pes-overview-text h2{
            font-size:3rem;
            margin-bottom:20px;
        }

        .pes-overview-text p{
            font-size: 1.2rem;
            color:#ccc;
            line-height:1.8;
            margin-bottom:16px;
        }

        /* IMAGE SIDE */
        .pes-overview-image{
            position:relative;
        }

        .pes-overview-image img{
            width:100%;
            height:420px;
            object-fit:cover;
            border-radius:18px;
            box-shadow:0 20px 60px rgba(0,0,0,0.45);
            transition:0.5s;
        }

        /* hover effect */
        .pes-overview-image:hover img{
            transform:scale(1.04);
        }

        @media (max-width:1024px){

            .pes-container{
                grid-template-columns:1fr 1fr;
                gap:40px;
            }

            .pes-overview-text h2{
                font-size:2.4rem;
            }

            .pes-overview-text p{
                font-size:1.05rem;
                line-height:1.7;
            }

            .pes-overview-image img{
                height:360px;
            }

            .pes-overview{
                padding:80px 0;
            }
        }

        @media (max-width:768px){

            .pes-container{
                grid-template-columns:1fr;   /* <-- STACK */
                gap:40px;
                text-align:center;
            }

            .pes-overview-text{
                order:2;     /* text niche aavse */
            }

            .pes-overview-image{
                order:1;     /* image upar */
            }

            .pes-overview-text h2{
                font-size:2rem;
            }

            .pes-overview-text p{
                font-size:1rem;
            }

            .pes-overview-image img{
                height:340px;
            }

            .pes-tag{
                font-size:14px;
                margin-bottom:12px;
            }

            .pes-overview{
                padding:70px 0;
            }
        }

        @media (max-width:640px){

            .pes-container{
                padding:0 18px;
                gap:28px;
            }

            .pes-overview-text h2{
                font-size:1.6rem;
                line-height:1.3;
            }

            .pes-overview-text p{
                font-size:0.95rem;
                line-height:1.7;
            }

            .pes-overview-image img{
                height:260px;
                border-radius:14px;
            }

            .pes-tag{
                font-size:13px;
            }

            .pes-overview{
                padding:55px 0;
            }
        }

        .pes-capabilities{
            background:#020617;
            padding:110px 20px;
            text-align:center;
            color:#fff;
        }

        .pes-cap-container{
            max-width:1500px;
            margin:auto;
        }

        /* title */
        .pes-cap-tag{
            color: #4da3ff;
            /* background:rgba(14,165,233,0.15);
            padding:6px 16px; */
            border-radius:20px;
            font-size:15px;
            display:inline-block;
            margin-bottom:14px;
        }

        .pes-cap-title{
            font-size:3rem;
            margin-bottom:12px;
        }

        .pes-cap-sub{
            font-size:1.2rem;
            color:#cccc;
            max-width:650px;
            margin:0 auto 70px;
            line-height:1.7;
        }

        /* FLOW LAYOUT */
        .pes-cap-flow{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:20px;
            position:relative;
        }


        /* item */
        .pes-cap-item{
                opacity:1;
            transform:translateY(80px);
            width:20%;
            position:relative;
            z-index:2;
        }

        .pes-cap-icon{
            width:180px;
            height:180px;
            margin:0 auto 18px;
            border-radius:50%;
            /* background:#0f172a; */
            /* border:2px solid rgba(14,165,233,0.35); */
            display:flex;
            align-items:center;
            justify-content:center;
            transition:.35s;
        }

        .pes-cap-icon img{
            width:108px;
        }

        /* hover */
        .pes-cap-item:hover .pes-cap-icon{
        transform: translateY(-8px);
            border-color: #0EA5E9;
            box-shadow: inset 0 10px 35px rgba(14, 165, 233, 0.35);
        }

        .pes-cap-item h4{
            margin-top:6px;
            font-size:1.5rem;
        }

        /* bottom text */
        .pes-cap-desc{
            font-size:1.2rem;
            max-width:800px;
            margin:70px auto 0;
            color:#ccc;
            line-height:1.8;
        }

        /* mobile */

        @media (max-width:1024px){

            .pes-cap-title{
                font-size:2.4rem;
            }

            .pes-cap-sub{
                font-size:1.05rem;
                margin-bottom:50px;
            }

            /* 5 items → 3 + 2 layout */
            .pes-cap-flow{
                flex-wrap:wrap;
                justify-content:center;
                gap:40px 30px;
            }

            .pes-cap-item{
                width:30%;
                transform:translateY(40px);
            }

            .pes-cap-icon{
                width:150px;
                height:150px;
            }

            .pes-cap-icon img{
                width:90px;
            }

            .pes-cap-desc{
                font-size:1.05rem;
                margin-top:60px;
            }
        }

        @media (max-width:768px){

            .pes-capabilities{
                padding:90px 20px;
            }

            .pes-cap-title{
                font-size:2rem;
            }

            .pes-cap-sub{
                font-size:1rem;
                margin-bottom:45px;
            }

            /* 2 columns grid feeling */
            .pes-cap-flow{
                flex-wrap:wrap;
                justify-content:center;
                gap:40px 25px;
            }

            .pes-cap-item{
                width:45%;
                transform:none;   /* remove vertical offset */
            }

            .pes-cap-icon{
                width:130px;
                height:130px;
            }

            .pes-cap-icon img{
                width:80px;
            }

            .pes-cap-item h4{
                font-size:1.3rem;
            }

            .pes-cap-desc{
                font-size:1rem;
                margin-top:50px;
                line-height:1.7;
            }
        }

        @media (max-width:640px){

            .pes-capabilities{
                padding:70px 16px;
            }

            .pes-cap-title{
                font-size:1.6rem;
                line-height:1.3;
            }

            .pes-cap-sub{
                font-size:0.95rem;
                margin-bottom:35px;
            }

            /* single column stack */
            .pes-cap-flow{
                flex-direction:column;
                align-items:center;
                gap:35px;
            }

            .pes-cap-item{
                width:100%;
                max-width:320px;
                text-align:center;
            }

            .pes-cap-icon{
                width:110px;
                height:110px;
            }

            .pes-cap-icon img{
                width:65px;
            }

            .pes-cap-item h4{
                font-size:1.2rem;
            }

            .pes-cap-desc{
                font-size:0.95rem;
                margin-top:40px;
            }
        }


        /* ===== SECTION LAYOUT ===== */
        .prosupport-workflow-section{
            background:#020617;
            padding:120px 20px;
            color:#fff;
            
            
        }

        .prosupport-container{
            max-width:1500px;
            margin:auto;
            display:flex;
            align-items:flex-start;
            gap:80px;
        }

        /* ===== LEFT SIDE CONTENT ===== */
        .prosupport-left{
            flex:1;
            position:sticky;
            top:120px;
        }

        .prosupport-left h2{
            font-size:3rem;
            font-weight: 500;
            margin-bottom:10px;
        }

        .prosupport-left h3{
            color:#0EA5E9;
            margin-bottom:20px;
            font-weight:600;
        }

        .prosupport-left p{
            color:#ccc;
            font-size: 1.2rem;
            line-height:1.7;
            max-width:500px;
        }

        /* ===== RIGHT DIAGRAM ===== */
        .prosupport-right{
            flex:2;
            position:relative;
        }

        /* title bubbles */
        .ps-title{
            display:inline-block;
            background:#0EA5E9;
            padding:10px 24px;
            border-radius:30px;
            font-weight:600;
            color:#001018;
            position:absolute;
            left:50%;
            transform:translateX(-50%);
        }
        .ps-title.top{ top:0; }
        .ps-title.bottom{ bottom:0; }

        .ps-flow{
            position:relative;
            height:1150px;
            /* margin-top:80px; */
        }

        .ps-curve{
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            width:540px;
            height:1040px;
            pointer-events:none;
        }

        .ps-step{
            position:absolute;
            display:flex;
            align-items:center;
            gap:18px;
            
        }

        .ps-pill{
            background:linear-gradient(145deg,#0c1b34,#091326);
            padding:15px 18px;
            border-radius:30px;
            width:450px;
            box-shadow:0 10px 25px rgba(0,0,0,.4);
        }

        .ps-pill h4{
            color:#fff;
            font-size:1.5rem;
            margin-bottom:5px;
        }

        .ps-pill p{
            font-size:1.2rem;
            color:#ccc;
            line-height:1.5;
        }

        .ps-icon{
            width:90px;
            height:90px;
            border-radius:50%;
            border:2px solid #0EA5E9;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#020617;
        }
        .ps-icon img{ width:52px; }

        /* positions */
        .pss1
        {         
            top: 10px;
        left: 48%; 
        }
        .pss2{         
            top: 203px;
            left: 9%;
            }
        .pss3{       
            top: 384px;
            left: 33%;
        }
        .pss4{    
            top: 581px;
            left: 11%;
            }
        .pss5{  
             top: 772px;
            left: 32%;
            }
        .pss6{        
            top: 949px;
            left: 3%;
            }

        /* MOBILE */

        @media (max-width:1024px){

            .prosupport-container{
                gap:50px;
            }

            .prosupport-left h2{
                font-size:2.3rem;
            }

            .prosupport-left p{
                font-size:1.05rem;
            }

            /* shrink diagram */
            .ps-curve{
                width:420px;
                height:900px;
            }

            .ps-flow{
                height:1000px;
            }

            .ps-pill{
                width:360px;
                padding:14px 16px;
            }

            .ps-pill h4{
                font-size:1.3rem;
            }

            .ps-pill p{
                font-size:1.05rem;
            }

            .ps-icon{
                width:75px;
                height:75px;
            }

            .ps-icon img{
                width:42px;
            }
        }
        @media (max-width:768px){

            .prosupport-container{
                flex-direction:column;
                gap:50px;
            }

            /* remove sticky */
            .prosupport-left{
                position:relative;
                top:auto;
                text-align:center;
            }

            .prosupport-left p{
                margin:0 auto;
            }

            /* REMOVE CURVE */
            .ps-curve{
                display:none;
            }

            .ps-title{
                position:relative;
                transform:none;
                left:auto;
                display:inline-block;
                margin:0 auto 20px;
            }

            .ps-flow{
                height:auto;
                margin-top:20px;
                padding-left:40px;
            }

            /* vertical line */
            .ps-flow::before{
                content:"";
                position:absolute;
                left:18px;
                top:0;
                bottom:0;
                width:2px;
                background:#0EA5E9;
                opacity:.5;
            }

            /* RESET ALL ABSOLUTE POSITIONS */
            .ps-step{
                position:relative;
                /* left:auto !important;
                top:auto !important; */
                bottom:auto !important;
                margin-bottom:35px;
                align-items:flex-start;
            }

            /* icon on line */
            .ps-icon{
                position:absolute;
                left:-28px;
                width:60px;
                height:60px;
                background:#020617;
            }

            .ps-icon img{
                width:32px;
            }

            .ps-pill{
                width:100%;
            }
        }
        @media (max-width:640px){

            .prosupport-workflow-section{
                padding:80px 16px;
            }

            .prosupport-left h2{
                font-size:1.7rem;
                line-height:1.3;
            }

            .prosupport-left h3{
                font-size:1rem;
            }

            .prosupport-left p{
                font-size:0.95rem;
                line-height:1.7;
            }

            .ps-pill{
                padding:14px;
                border-radius:18px;
            }

            .ps-pill h4{
                font-size:1.15rem;
            }

            .ps-pill p{
                font-size:0.9rem;
            }

            .ps-flow{
                padding:0px 34px;
            }

            .ps-icon{
                width:52px;
                height:52px;
                left:-58px;
            }

            .ps-icon img{
                width:26px;
            }

            /* positions */
        .pss1{        left: 58%;
            top: -27px;}
        .pss2{        left: 8%;
            top: 30px; }
        .pss3{        top: -14px;}
        .pss4{ top: 35px;
            left: 9%;}
        .pss5{           top: 11px;
            left: 10%; }
        .pss6{       top: 29px;
            left: 10%; }

        }


        .nxproto-section{
            background:#020617;
            padding:120px 20px;
            color:#fff;
           
        }

        .nxproto-container{
            max-width:1500px;
            margin:auto;
        }

        /* heading */
        .nxproto-head{
            text-align:center;
            margin-bottom:70px;
        }

        .nxproto-head h2{
            font-size:3rem;
            margin-bottom:10px;
        }

        .nxproto-head p{
            color:#ccc;
            font-size:1.2rem;
        }

        /* cards layout */
        .nxproto-cards{
            display:flex;
            gap:30px;
            justify-content:center;
            flex-wrap:wrap;
        }

        /* card */
        .nxproto-card{
            width: 400px;
            height: 400px;
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                                    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                                    backdrop-filter: blur(15px); 
            /* background:linear-gradient(145deg,#0c1b34,#091326); */
            border-radius:18px;
            padding:35px 25px;
            position:relative;
            overflow:hidden;
            transition:.45s cubic-bezier(.77,0,.18,1);
            cursor:pointer;
        }

        /* icon */
        .nxproto-icon{
            /* width:70px;
            height:70px; */
            border-radius:50%;
            /* border:2px solid #0EA5E9; */
            display:flex;
            align-items:center;
            justify-content:center;
            margin-bottom:20px;
            transition:.4s;
        }

        .nxproto-icon img{
            width:250px;
        }

        /* title */
        .nxproto-card h3{
            text-align: center;
            font-size:1.5rem;
            color:#fff;
            transition:.4s;
        }

        /* hover content */
        .nxproto-hover{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:100%;
            padding:30px 22px;
            background:linear-gradient(145deg,#0c1b34,#091326);
            color:#fff;

            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            text-align:center;

            transform:translateY(100%);
            transition:.45s cubic-bezier(.77,0,.18,1);
        }
        /* hover title */
        .nxproto-hover h3{
            font-size:1.5rem;
            margin-bottom:12px;
            font-weight:500;
        }
        .nxproto-hover p {
            font-size: 1.2rem;
            color: #ccc;
        }
        /* hover animation */
        .nxproto-card:hover{
            transform:translateY(-10px);
        }

        .nxproto-card:hover .nxproto-hover{
            transform:translateY(0);
            bottom:0;
        }

        /* .nxproto-card:hover .nxproto-icon{
            background:#fff;
            border-color:#fff;
        } */

        .nxproto-card:hover h3{
            opacity:1;
        }

        /* responsive */
        @media (max-width:1024px){

            .nxproto-head h2{
                font-size:2.4rem;
            }

            .nxproto-head p{
                font-size:1.05rem;
            }

            .nxproto-card{
                width:320px;
                height:360px;
                padding:28px 20px;
            }

            .nxproto-icon img{
                width:200px;
            }

            .nxproto-hover h3{
                font-size:1.3rem;
            }

            .nxproto-hover p{
                font-size:1.05rem;
            }
        }
        @media (max-width:768px){

            .nxproto-section{
                padding:100px 18px;
            }

            .nxproto-head{
                margin-bottom:50px;
            }

            .nxproto-head h2{
                font-size:2rem;
            }

            .nxproto-head p{
                font-size:1rem;
            }

            .nxproto-cards{
                gap:24px;
            }

            .nxproto-card{
                width:45%;
                height:330px;
                padding:24px 18px;
            }

            .nxproto-icon img{
                width:170px;
            }

            /* hover animation */
        .nxproto-card:hover{
            transform:translateY(-10px);
        }

        .nxproto-card:hover .nxproto-hover{
            transform:translateY(0);
            bottom:0;
        }
        }
        @media (max-width:640px){

            .nxproto-section{
                padding:80px 14px;
            }

            .nxproto-head h2{
                font-size:1.7rem;
                line-height:1.3;
            }

            .nxproto-head p{
                font-size:0.95rem;
            }

            /* single column cards */
            .nxproto-cards{
                flex-direction:column;
                align-items:center;
                gap:20px;
            }

            .nxproto-card{
                width:100%;
                max-width:340px;
                height:300px;
                padding:22px 18px;
            }

            .nxproto-icon img{
                width:150px;
                margin-bottom:10px;
            }

            /* hover animation */
        .nxproto-card:hover{
            transform:translateY(-10px);
        }

        .nxproto-card:hover .nxproto-hover{
            transform:translateY(0);
            bottom:0;
        }

            /* always visible content */
            .nxproto-card h3{
                margin-bottom:8px;
            }

            .nxproto-hover h3{
                font-size:1.15rem;
            }

            .nxproto-hover p{
                font-size:0.9rem;
                line-height:1.6;
            }
        }

/******************embadded hardware **************************************/

.smoke-overlay {
      z-index: 2;
  width: 100%;
  height: 100vh;
  position: relative;
  background:linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(5 5 22) 100%);
  transform: translateY(100%);
  transition: transform 1.5s ease-out;
}

/* When page scrolls - class active will be applied using JS */
.smoke-overlay.active {
  transform: translateY(0);
}


        /* HERO SECTION */
        .embhardeare-hero{
        position: sticky;   /* Hero stays fixed */
        top: 0;
        z-index: 1;
        /* position:relative; */
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        overflow:hidden;

        /* MAIN CHIP IMAGE */
        background:url("../img/what-we-do/embeddedhard.webp") top center/cover no-repeat;
        }
        .mechanicaldesign{
             position: sticky;   /* Hero stays fixed */
        top: 0;
        z-index: 1;
        /* position:relative; */
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        overflow:hidden;

        /* MAIN CHIP IMAGE */
        background:url("../img/what-we-do/mechinacledesign.webp") center/cover no-repeat;

        }
          .softwaresupport{
        position: sticky;   /* Hero stays fixed */
        top: 0;
        z-index: 1;
        /* position:relative; */
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        overflow:hidden;

        /* MAIN CHIP IMAGE */
        background:url("../img/what-we-do/softsupport.webp") top center/cover no-repeat;
        }
        .aidevelopment{
        position:sticky;
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        overflow:hidden;

        /* MAIN CHIP IMAGE */
        background:url("../img/what-we-do/aidevelopment.webp") top center/cover no-repeat;
        }
        .softwareemb{
                position: sticky; 
            min-height:100vh;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            overflow:hidden;

            /* MAIN CHIP IMAGE */
            background:url("../img/what-we-do/embeddedsoft1.webp") center/cover no-repeat;
            }

        /* BLUE LIGHT (top glow) */
        .embhardeare-hero::before{
        content:"";
        /* position:absolute; */
        inset:0;
        background:linear-gradient(to bottom, rgba(0, 0, 0, .75) 0%, rgb(0 0 0 / 64%) 31%, rgb(2 6 23 / 44%) 95%, #020617 100%);
        z-index:1;
        }

        /* BLACK OVERLAY (depth cinematic) */
        .embhardeare-hero::after{
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .75) 0%, rgb(0 0 0 / 66%) 31%, rgb(2 6 23 / 26%) 95%, #020617 100%);
            z-index: 2;
        }

        /* CONTENT */
        .embhardeare-hero-content{
            margin-bottom: 330px;
            position: relative;
            z-index: 3;
            max-width: 900px;
            padding: 0 20px;
        }

        /* SMALL LABEL */
        .embhardeare-hero-label{
        color:#38bdf8;
        font-size:12px;
        letter-spacing:2px;
        text-transform:uppercase;
        }

        /* TITLE */
        .embhardeare-hero h1{
        font-size:3rem;
        line-height:1.15;
        margin:20px 0;
        font-weight:500;
        }
        .embhardeare-hero p{
            font-size: 1.2rem;
            color: #ccc;
            margin-bottom: 20px;
        }
        .embhardeare-hero h1 span{
        color:#22d3ee;
        }

        /* DESCRIPTION */
        .hero p{
        color:#ccc;
        font-size:1.2rem;
        line-height:1.6;
        max-width:640px;
        margin:0 auto 32px;
        }

        /* BUTTON */
        .embhardeare-hero-btn{
        display:inline-block;
        background:linear-gradient(135deg,#0ea5e9,#22d3ee);
        padding:16px 38px;
        border-radius:10px;
        color:white;
        text-decoration:none;
        font-weight:600;
        transition:.3s;
        }

        .embhardeare-hero-btn:hover{
        transform:translateY(-3px);
        box-shadow:0 15px 35px rgba(34,211,238,.35);
        }

/* MOBILE */
@media (max-width:1024px){

    .embhardeare-hero{
        min-height:90vh;
        background-position:center top;
    }

    .embhardeare-hero-content{
        margin-bottom:200px;
        max-width:720px;
    }

    .embhardeare-hero h1{
        font-size:2.5rem;
    }

    .embhardeare-hero p{
        font-size:1.05rem;
    }
}
@media (max-width:768px){

    .embhardeare-hero{
        min-height:85vh;
        padding-top:100px;
        padding-bottom:80px;
        align-items:flex-end;
    }

    .embhardeare-hero-content{
        margin-bottom:0;
        max-width:600px;
    }

    .embhardeare-hero h1{
        font-size:2rem;
        line-height:1.25;
    }

    .embhardeare-hero p{
        font-size:1rem;
        line-height:1.6;
    }

    .embhardeare-hero-btn{
        padding:14px 28px;
        font-size:14px;
    }
}
@media (max-width:640px){

    .embhardeare-hero{
        min-height:calc(100svh - 70px);
        padding:120px 16px 70px;
        text-align:center;
        background-position:center;
    }

    .embhardeare-hero-content{
        margin:0 auto;
        padding:0;
    }

    .embhardeare-hero-label{
        font-size:11px;
        letter-spacing:1.5px;
    }

    .embhardeare-hero h1{
        font-size:1.6rem;
        line-height:1.3;
        margin:14px 0;
    }

    .embhardeare-hero p{
        font-size:0.95rem;
        margin-bottom:24px;
    }

    .embhardeare-hero-btn{
        width:100%;
        max-width:260px;
        padding:13px 20px;
        font-size:14px;
        border-radius:8px;
    }
}

.ehw-section{
    position: relative;
    z-index: 20;
  width:100%;
  padding:100px 20px;
}


.ehw-wrapper{
    max-width: 1550px;
    margin: auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 60px;
    align-items: flex-start;
}

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

.ehw-intro{
 
    margin-top: 70px;
    position: relative;
    /* position: sticky; */
    top: 120px;
}

.ehw-small{
  color:#4da3ff;
    font-size:13px;
  /* font-weight:600; */
  letter-spacing:2px;
  margin-bottom:15px;
}

.ehw-title{
  font-size:3rem;
  line-height:1.2;
  margin-bottom:20px;
  color:#fff;
}

.ehw-sub{
  color:#ccc;
  line-height:1.8;
  font-size:1.2rem;
}
.ehw-container{
  max-width:1500px;
  margin:auto;
  position:relative;
}

/* vertical spine line */

.ehw-spine{
  /* position:absolute; */
  left:260px;
  top:0;
  bottom:0;
  width:8px;
  background:linear-gradient(180deg,#3a86ff,#00d4ff);
  border-radius:10px;
  opacity:.35;
}

/* ===== STEP ===== */

.ehw-step{
     position: relative;
    /* min-height: 124px; */
    margin: 20px 0;
    display: flex;
    align-items: center;
}

/* diamond */

.ehw-diamond{
background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                                    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                                    backdrop-filter: blur(15px);
  width:130px;
  height:130px;
  transform:rotate(45deg);
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:700;
  color:white;
  position:absolute;
  /* box-shadow:0 30px 60px rgba(0,0,0,.6); */
}

.ehw-diamond span{
    font-weight: 500;
  transform:rotate(-45deg);
}

/* connector bar */

.ehw-bar{
  position:absolute;
  height:4px;
  background:#94a3b8;
 width: 290px;
  top:50%;
  transform:translateY(-50%);
  opacity:.5;
}

.ehw-dot{
  position:absolute;
  width:15px;
  height:15px;
  background:#cbd5e1;
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
  box-shadow:0 0 0 6px rgba(203,213,225,.15);
}

/* text */

.ehw-content{
margin-left: 650px;
}

.ehw-content h3{
  font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #f8fafc;
}

.ehw-content p{
  color:#ccc;
  line-height:1.7;
  max-width:520px;
}

/* ===== ZIGZAG POSITIONS ===== */

.ehw-left .ehw-diamond{ left:0; }
.ehw-left .ehw-bar{ left: 144px;}
.ehw-left .ehw-dot{ left: 428px;}
.ehw-left .ehw-content{ margin-left: 503px;}

.ehw-right .ehw-diamond{ left:120px; }
.ehw-right .ehw-bar{  left: 267px;}
.ehw-right .ehw-dot{ left: 553px;}

/* ===== COLORS ===== */

/* .c1{ background:linear-gradient(135deg,#3a86ff,#4361ee); }
.c2{ background:linear-gradient(135deg,#06d6a0,#1abc9c); }
.c3{ background:linear-gradient(135deg,#00b4d8,#0096c7); }
.c4{ background:linear-gradient(135deg,#2b2d42,#1a1c2c); }
.c5{ background:linear-gradient(135deg,#ef476f,#c1121f); }
.c6{ background:linear-gradient(135deg,#fca311,#ff7b00); } */

/* ===== CONNECTOR STAIR ===== */

.ehw-connector{
  position:absolute;
  width:70px;
  height:70px;
  transform:rotate(45deg);
  z-index:1;
  opacity:.9;
}

/* connectors placement */

.ehw-step:nth-of-type(1) .ehw-connector{ left:95px; top:110px; }
.ehw-step:nth-of-type(2) .ehw-connector{ left:95px; top:110px; }
.ehw-step:nth-of-type(3) .ehw-connector{ left:95px; top:110px; }
.ehw-step:nth-of-type(4) .ehw-connector{ left:95px; top:110px; }
.ehw-step:nth-of-type(5) .ehw-connector{ left:95px; top:110px; }

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

@media (max-width:1024px){

    .ehw-wrapper{
        grid-template-columns:380px 1fr;
        gap:40px;
    }

    .ehw-title{
        font-size:2.3rem;
    }

    .ehw-sub{
        font-size:1.05rem;
    }

    .ehw-content{
        margin-left:420px;
    }

    .ehw-left .ehw-content{
        margin-left:420px;
    }

    .ehw-left .ehw-dot{
        left:350px;
    }

    .ehw-right .ehw-dot{
        left:450px;
    }

    .ehw-bar{
        width:220px;
    }
}
@media (max-width:768px){

    /* stack intro + timeline */
    .ehw-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .ehw-intro{
        position:relative;
        top:auto;
        margin-top:0;
        text-align:center;
    }

    /* remove spine position */
    .ehw-spine{
        display:none;
    }

    /* each step vertical */
    .ehw-step{
        padding-left:80px;
        margin:40px 0;
        align-items:flex-start;
    }

    /* diamond becomes circle node */
    .ehw-diamond{
        position:absolute;
        left:0;
        width:70px;
        height:70px;
        border-radius:50%;
        transform:none;
        font-size:26px;
    }

    .ehw-diamond span{
        transform:none;
    }

    /* remove connector bars */
    .ehw-bar,
    .ehw-dot,
    .ehw-connector{
        display:none;
    }

    
    .ehw-right .ehw-diamond {
        left: 0px;
    }

    /* content normal */
    .ehw-content{
        margin-left:0 !important;
    }

    /* vertical timeline line */
    .ehw-container{
        position:relative;
    }

    .ehw-container::before{
        content:"";
        position:absolute;
        left:34px;
        top:0;
        bottom:0;
        width:3px;
        background:linear-gradient(180deg,#3a86ff,#00d4ff);
        opacity:.4;
    }
}
@media (max-width:640px){

    .ehw-section{
        padding:80px 16px;
    }

    .ehw-title{
        font-size:1.7rem;
        line-height:1.3;
    }

    .ehw-sub{
        font-size:0.95rem;
    }

    .ehw-step{
        padding-left:70px;
        margin:30px 0;
    }

    .ehw-diamond{
        width:58px;
        height:58px;
        font-size:20px;
    }

    .ehw-container::before{
        left:28px;
        top: 50px;
    }

    .ehw-content h3{
        font-size:1.2rem;
    }

    .ehw-content p{
        font-size:0.92rem;
        line-height:1.6;
    }
}




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

.sceh-section{
       position: relative;
    z-index: 20;
    padding:90px 0;
    color:white;
}

.sceh-wrapper{
    max-width:1500px;
    margin:auto;
    padding:0 20px;
    display:grid;
    grid-template-columns: 1.8fr 1fr;
    gap:70px;
    align-items:center;
}

.second-section{
     grid-template-columns: 1fr 1.8fr;
}

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

.sceh-visual{
    position:relative;
    width:100%;
}

.sceh-visual::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:18px;

    /* blue light gradient */
  background: rgba(0, 0, 0, 0.25);

    z-index:1;
    pointer-events:none;
}

.sceh-visual img{
    object-fit: cover;
    width: 100%;
    height: 500px;
    border-radius:18px;
    display:block;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* ===== markers ===== */

.sceh-marker{
    z-index: 2;
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    color:#fff;
    pointer-events:none;
}

.sceh-dot{
    width:10px;
    height:10px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 10px #fff,0 0 20px #fff;
    position:relative;
    animation:scehPulse 2s infinite;
}

@keyframes scehPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.6);}
    100%{transform:scale(1);}
}

/* marker positions (adjust later based on your image) */

/* Image Sensor */
.m1{ top: 24%;
    left: 26%; }

/* Main Processor (SoC) */
.m2{     top: 42%;
    left: 59%; }

/* DDR Memory */
.m3{    top: 29%;
    left: 75%;}

/* Power IC section */
.m4{top: 60%;
    left: 79%;}

/* ================= RIGHT CARDS ================= */

/* RIGHT SIDE WRAP */
.sceh-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* heading block */
.sceh-head{
    margin-bottom:28px;
}


/* main heading */
.sceh-head h2{
    font-size:3rem;
    line-height:1.25;
    font-weight:500;
    color:#fff;
    margin-bottom:14px;
}

/* subtitle */
.sceh-head p{
    font-size:1.2rem;
    color:#ccc;
    line-height:1.7;
    /* max-width:520px; */
}

.sceh-cards{
    display:flex;
    gap:18px;
    height:340px;
 
}
.sceh-card{
    min-width:0;
}

/* card */

/* default size (all equal) */
.sceh-card{
    position:relative;
    flex:0 0 33.33%;
    background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
                                    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
                                    backdrop-filter: blur(15px);
    /* background:linear-gradient(180deg,#0f1b2d,#0a1422); */
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:all .5s cubic-bezier(.77,0,.18,1);
}

/* when mouse enters cards area → shrink all */
.sceh-cards:hover .sceh-card{
    flex:0 0 22%;
}

/* hovered card expands */
.sceh-cards .sceh-card:hover{
    flex:0 0 56%;

}

.sceh-card:hover{
    flex:1.7;
  
}

/* inner */

.sceh-inner{
    z-index: 2;
    position:absolute;
    inset:0;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.sceh-card h3{
    color:#fff;
    font-size:1.5rem;
    font-weight:500;
    line-height:1.3;
}

/* hidden description */
.sceh-desc{
    color:#ccc;
    font-size:1.2rem;
    line-height:1.6;
    opacity:0;
    transform:translateY(30px);
    transition:opacity .35s ease, transform .35s ease;
}

.sceh-card:hover .sceh-desc{
    opacity:1;
    transform:translateY(0);
    transition-delay:.15s;
}

/* read more */

.sceh-read{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:14px;
}

/* arrow */

.sceh-arrow{
    width:26px;
    height:26px;
    border:1px solid #00c3ff;
    border-radius:50%;
    position:relative;
    transform:rotate(45deg);
    transition:.4s;
}

.sceh-arrow::before{
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border-top:2px solid #00c3ff;
    border-right:2px solid #00c3ff;
    top:8px;
    left:8px;
}

.sceh-card:hover .sceh-arrow{
    transform:rotate(315deg);
    background:rgba(0,195,255,.12);
}

/* hover glow sweep */

.sceh-card::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(145deg, #0c1b34, #091326);
    opacity:0;
    transition:.5s;
}

.sceh-card:hover::after{
    opacity:1;
}

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

@media (max-width:1024px){

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

    .sceh-right{
        order:2;
    }

    .sceh-visual{
        order:1;
    }

    .sceh-visual img{
        height:420px;
    }

    .sceh-head h2{
        font-size:2.4rem;
    }

    .sceh-head p{
        font-size:1.05rem;
    }
}
@media (max-width:768px){

    /* layout stack */
    .sceh-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .sceh-visual img{
        height:320px;
    }

    /* CARDS COLUMN */
    .sceh-cards{
        flex-direction:column;
        height:auto;
        gap:16px;
    }

    /* remove hover shrink behaviour */
    .sceh-cards:hover .sceh-card{
        flex:1;
    }

    .sceh-card{
        flex:unset;
        width:100%;
        height:auto;
        min-height:180px;
    }

    /* make content normal (not overlay) */
    .sceh-inner{
        position:relative;
        padding:22px;
    }

    /* description always visible */
    .sceh-desc{
        /* opacity:1; */
        transform:none;
        margin-top:10px;
        margin-bottom:20px;
    }

    /* disable glow overlay */
    .sceh-card::after{
        display:none;
    }

    .sceh-dot{
        width: 5px;
        height: 5px;
    }
    .sceh-marker {
        font-size: 13px;
    }
}
@media (max-width:640px){

    .sceh-section{
        padding:70px 0;
    }

    .sceh-wrapper{
        padding:0 16px;
    }

    .sceh-head h2{
        font-size:1.7rem;
        line-height:1.3;
    }

    .sceh-head p{
        font-size:0.95rem;
    }

    .sceh-card h3{
        font-size:1.25rem;
    }

    /* .sceh-desc{
        font-size:0.92rem;
        line-height:1.6;
    } */

        }
        .eh-portfolio{
        position: relative;
    z-index: 20;
        background:#020617;
        padding:100px 0;
        }

        .container{
        /* width:92%; */
        max-width:1350px;
        margin:auto;
        }

        .eh-heading{
        text-align:center;
        color:#fff;
        margin-bottom:50px;
        }
        .eh-heading h2{
        font-size:3rem;
        }
        .eh-heading p{
            font-size: 1.2rem;
        color:#ccc;
        }

        /* SLIDER */
        .eh-slider{
        position:relative;
        }

        /* visible window */
        .eh-viewport{
        overflow:hidden;
        }

        /* moving track */
        .eh-track{
        display:flex;
        gap:22px;
        transition:transform .5s ease;
        }

        /* CARD (3 visible) */
        .eh-card{
            height: 500px;
        min-width:calc((100% + 200px)/3);
        background:#0f172a;
        border-radius:18px;
        overflow:hidden;
        position:relative;
        }

        /* IMAGE */
        .eh-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        }

        /* bottom gradient */
        .eh-card::after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        height:60%;
        background:linear-gradient(to top, rgb(0 0 0 / 27%), #00000000);
        }

        /* overlay box */
        .eh-info{
        position:absolute;
        bottom:18px;
        left:18px;
        right:18px;
        background:rgba(15,23,42,.75);
        backdrop-filter:blur(8px);
        padding:14px 16px;
        border-radius:10px;
        color:white;
        }

        .eh-info h3{ font-size:1.2rem; }
        .eh-info p{ font-size:1rem; color:#cbd5e1; }

        /* ARROWS */
        .eh-arrow{
        display: flex;
        align-items: center; 
        position:absolute;
        top:45%;
        transform:translateY(-50%);
        width:48px;
        height:48px;
        border-radius:50%;
        border:none;
        background:#0f172a;
        color:#fff;
        font-size:22px;
        cursor:pointer;
        z-index:5;
        }

        .ehleft{ left:-18px; display:none; }
        .ehright{ right:-18px; }

        /* LEFT SMOKE */
        .eh-slider::before{
        content:"";
        position:absolute;
        top:0;
        left:-62px;
        width:160px;
        height:100%;
        z-index:4;
        pointer-events:none;
        background:linear-gradient(to right,
            #020617 10%,
            rgba(2,6,23,0.85) 35%,
            rgba(2,6,23,0.4) 65%,
            transparent 100%);
        }

        /* RIGHT SMOKE */
        .eh-slider::after{
        content:"";
        position:absolute;
        top:0;
        right:0;
        width:160px;
        height:100%;
        z-index:4;
        pointer-events:none;
        background:linear-gradient(to left,
            #020617 10%,
            rgba(2,6,23,0.85) 35%,
            rgba(2,6,23,0.4) 65%,
            transparent 100%);
        }

        @media (max-width:1024px){

            .eh-heading h2{
                font-size:2.4rem;
            }

            .eh-heading p{
                font-size:1.05rem;
            }

            /* 3 → 2 cards */
            .eh-card{
                min-width:calc((100% - 22px)/2);
                height:360px;
            }

            /* arrows inside */
            .ehleft{ left:0; }
            .ehright{ right:0; }
        }
        @media (max-width:768px){

            .eh-card{
                min-width:70%;
                height:340px;
            }

            .eh-viewport{
                padding:0 10px;
            }

            /* smoke reduce */
            .eh-slider::before,
            .eh-slider::after{
                width:90px;
            }

            .eh-arrow{
                width:42px;
                height:42px;
                font-size:20px;
            }
        }
        @media (max-width:640px){

            .eh-portfolio{
                padding:80px 0;
            }

            .eh-heading h2{
                font-size:1.7rem;
                line-height:1.3;
            }

            .eh-heading p{
                font-size:0.95rem;
            }

            /* single card slider */
            .eh-card{
                min-width:100%;
                height:300px;
            }

            /* hide smoke (mobile problem) */
            .eh-slider::before,
            .eh-slider::after{
                display:none;
            }

            /* arrows bottom */
            .eh-arrow{
                top:auto;
                bottom:-55px;
                transform:none;
            }

            .ehleft{ left:35%; }
            .ehright{ right:35%; }

            .eh-info h3{
                font-size:16px;
            }

            .eh-info p{
                font-size:12px;
            }
        }


        /*****************************embedded software ************************************/
        .esw-capabilities{
            position: relative;
            z-index: 2;
        /* background:#020617; */
        padding:100px 0;
        color:#fff;
        }

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

        /* heading */
        .esw-cap-head{
        text-align:center;
        margin-bottom:60px;
        }
        .esw-cap-head h2{
        font-size:3rem;
        margin-bottom:10px;
        }
        .esw-cap-head p{
            font-size: 1.2rem;
        color:#ccc;
        }

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

        /* card */
        .esw-cap-card{
            height: 300px;
        position:relative;
            background: linear-gradient(145deg, rgb(12, 27, 52), rgb(9, 19, 38));
        padding:32px 28px 70px;
        border-radius:14px;
        overflow:hidden;
        transition:.35s;
        /* border:1px solid rgba(255,255,255,0.05); */
        }

        /* circle background */
        .esw-cap-card::after{
            content: "";
            position: absolute;
            width: 195px;
            height: 190px;
            background: #040813;
            border-radius: 50%;
            right: -50px;
            bottom: -50px;
            transition: .4s;
            border: 1px solid #fff;
        }

        /* icon */
        .esw-cap-icon{
        position:absolute;
        right:28px;
        bottom:28px;
        width:60px;
        height:60px;
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:2;
        }
        .esw-cap-icon img{
            width: 162px;
        /* filter: drop-shadow(0px 10px 8px rgba(0,0,0,.6)); */
        }

        /* text */
        .esw-cap-card h3{
        font-size:1.5rem;
        margin-bottom:10px;
        }
        .esw-cap-card p{
        font-size:1.2rem;
        color:#ccc;
        line-height:1.6;
        }

        /* button */
        .esw-read-btn{
        display:inline-block;
        margin-top:18px;
        font-size:14px;
        color:#0EA5E9;
        text-decoration:none;
        position:relative;
        }
        .esw-read-btn::after{
        content:"→";
        margin-left:6px;
        transition:.3s;
        }

        /* hover */
        .esw-cap-card:hover{
        transform:translateY(-8px);
        border-color:#040813;
        }
        .esw-cap-card:hover::after{
        transform:scale(1.25);
        background:#040813;
        /* opacity:.08; */
        }
        .esw-cap-card:hover .esw-read-btn::after{
        margin-left:12px;
        }

        /* responsive */
        @media (max-width:1024px){

            .esw-cap-head h2{
                font-size:2.4rem;
            }

            .esw-cap-head p{
                font-size:1.05rem;
            }

            /* 3 → 2 columns */
            .esw-cap-grid{
                grid-template-columns:repeat(2,1fr);
                gap:24px;
            }

            .esw-cap-card{
                height:280px;
                padding:28px 24px 60px;
            }

            .esw-cap-icon img{
                width:130px;
            }
        }
        @media (max-width:768px){

            .esw-capabilities{
                padding:80px 0;
            }

            .esw-cap-head{
                margin-bottom:40px;
            }

            .esw-cap-head h2{
                font-size:2rem;
                line-height:1.3;
            }

            .esw-cap-head p{
                font-size:1rem;
            }

            .esw-cap-grid{
                grid-template-columns:repeat(2,1fr);
                gap:20px;
            }

            .esw-cap-card{
                height:auto;
                min-height:240px;
            }

            .esw-cap-card h3{
                font-size:1.3rem;
            }

            .esw-cap-card p{
                font-size:1rem;
            }

            .esw-cap-icon{
                right:18px;
                bottom:18px;
            }

            .esw-cap-icon img{
                width:110px;
            }
        }
        @media (max-width:640px){

            .esw-container{
                width:92%;
            }

            /* single column cards */
            .esw-cap-grid{
                grid-template-columns:1fr;
                gap:18px;
            }

            .esw-cap-card{
                padding:24px 20px 70px;
                min-height:220px;
            }

            .esw-cap-head h2{
                font-size:1.7rem;
            }

            .esw-cap-head p{
                font-size:0.95rem;
            }

            .esw-cap-card h3{
                font-size:1.2rem;
            }

            .esw-cap-card p{
                font-size:0.92rem;
                line-height:1.6;
            }

            /* icon control */
            .esw-cap-icon img{
                width:90px;
            }

            .esw-cap-icon{
                right:14px;
                bottom:14px;
            }

            /* background circle adjust */
            .esw-cap-card::after{
                width:140px;
                height:140px;
                right:-40px;
                bottom:-40px;
            }
        }


        /****************************************ai-development**********************************/
        .ai-services{
        background: #020617;
        padding: 110px 0;
        position: relative;
                    z-index: 2;
        overflow: hidden;
        }

        /* subtle glow background */
        .ai-services::before{
        content:'';
        position:absolute;
        width:600px;
        height:600px;
        background: radial-gradient(circle, rgb(0 140 255 / 5%), #00000000 70%);
        top:-200px;
        left:-150px;
        }

        .aicontainer{
        width:92%;
        max-width:1300px;
        margin:auto;
        }

        /* heading */
        .ai-heading{
        text-align:center;
        margin-bottom:70px;
        }

        .ai-heading h2{
        font-size:3rem;
        color:#fff;
        margin-bottom:15px;
        }

        .ai-heading p{
        color:#ccc;
        font-size:1.2rem;
        }

        /* grid */
        .ai-grid{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:60px;
        }

        /* card */
        .ai-card{
        position:relative;
        }

        /* corner frame */
        .ai-frame{
        position:absolute;
        width:160px;
        height:160px;
            border-top: 5px solid #1c509c8c;
            border-left: 5px solid #1c509c8c;
        top:-25px;
        left:-25px;
        transition:0.4s;
            border-radius: 20px;
        }

        /* main content box */
        .ai-content{
            background: linear-gradient(rgb(15 51 138 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
        /* background:#0b1220; */
        padding:40px 30px;
        position:relative;
        box-shadow:0 15px 35px rgba(0,0,0,0.6);
        transition:0.4s;
        z-index:2;
            border-radius: 20px;
        }

        /* hover effect 🔥 */
        .ai-card:hover .ai-content{
        transform:translateY(-10px);
        box-shadow: 0 25px 50px rgb(0 140 255 / 14%);
        }

        .ai-card:hover .ai-frame{
        width: 100%;
            height: 100%;
            top: -36px;
            left: -24px;
        border-color: #17315d;
        }

        /* icon */
        .ai-icon{
        width:65px;
        height:65px;
        display:flex;
        align-items:center;
        justify-content:center;
        /* background:linear-gradient(135deg,#0ea5e9,#3b82f6);
        border-radius:12px; */
        font-size:28px;
        color:#fff;
        margin-bottom:20px;
        }
        .ai-icon img{
            width:65px;
        height:65px;
        }

        /* text */
        .ai-content h3{
        color:#fff;
        font-size:1.5rem;
        margin-bottom:15px;
        }

        .ai-content p{
        color:#ccc;
        font-size:1.2rem;
        line-height:1.7;
        margin-bottom:18px;
        }

        /* list */
        .ai-content ul{
        padding-left:18px;
        }

        .ai-content ul li{
        color:#cbd5e1;
        font-size:0.9rem;
        margin-bottom:7px;
        list-style:disc;
        }

        @media (max-width:1024px){

            .ai-heading h2{
                font-size:2.4rem;
            }

            .ai-heading p{
                font-size:1.05rem;
            }

            /* 3 → 2 columns */
            .ai-grid{
                grid-template-columns:repeat(2,1fr);
                gap:40px;
            }

            .ai-content{
                padding:32px 24px;
            }

            .ai-content h3{
                font-size:1.35rem;
            }

            .ai-content p{
                font-size:1.05rem;
            }

            .ai-frame{
                width:140px;
                height:140px;
                top:-20px;
                left:-20px;
            }
        }
        @media (max-width:768px){

            .ai-services{
                padding:90px 0;
            }

            .ai-heading{
                margin-bottom:50px;
            }

            .ai-heading h2{
                font-size:2rem;
                line-height:1.3;
            }

            .ai-heading p{
                font-size:1rem;
            }

            .ai-grid{
                grid-template-columns:1fr 1fr;
                gap:28px;
            }
            .ai-card:hover .ai-content{
        transform:translateY(-10px);
        box-shadow: 0 25px 50px rgb(0 140 255 / 14%);
        }

        .ai-card:hover .ai-frame{
        width: 100%;
            height: 100%;
            top: -36px;
            left: -24px;
        border-color: #17315d;
        }


            .ai-icon img{
                width:55px;
                height:55px;
            }

            .ai-content ul li{
                font-size:0.85rem;
            }
        }
        @media (max-width:640px){

            .ai-services{
                padding:75px 0;
            }

            /* single column */
            .ai-grid{
                grid-template-columns:1fr;
                gap:50px;
            }

            .aicontainer{
                width: 80%;
            }

            .ai-heading h2{
                font-size:1.7rem;
            }

            .ai-heading p{
                font-size:0.95rem;
            }

            .ai-content{
                padding:24px 18px;
            }

            .ai-content h3{
                font-size:1.25rem;
            }

            .ai-content p{
                font-size:0.95rem;
                line-height:1.6;
            }

            .ai-content ul{
                padding-left:16px;
            }

            /* frame adjust (important) */
            .ai-frame{
                width:110px;
                height:110px;
                top:-16px;
                left:-16px;
                border-width:4px;
            }

            .ai-icon img{
                width:48px;
                height:48px;
            }
        }


        .aiwcu-section {
            position: relative;
            z-index: 2;
            background: #020617;
            padding: 110px 0;
            color: #ffffff;
        }

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

        .aiwcu-heading {
            
            text-align: center;
            margin-bottom: 70px;
        }

        .aiwcu-small {
            display: inline-block;
            font-size: 13px;
            letter-spacing: 2px;
            color: #4da3ff;
            margin-bottom: 10px;
        }

        .aiwcu-title {
            font-size: 3rem;
            font-weight: 500;
        }

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

        .aiwcu-card {
            position: relative;
            padding-left: 50px;
            transition: 0.3s ease;
        }

        .aiwcu-top {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .aiwcu-number {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 18px;
            font-weight: 600;
            color: #3b82f6;
        }
        .aiwcu-line {
            height: 1px;
            flex: 1;
            background: linear-gradient(to right, #3b82f6, transparent);
            /* margin-left: 15px; */
        }

        .aiwcu-card h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .aiwcu-card p {
            font-size: 1.1rem;
            color: #ccc;
            line-height: 1.6;
        }

        .aiwcu-card:hover {
            transform: translateY(-5px);
        }

        /* Responsive */
        @media (max-width:1024px){

            .aiwcu-title{
                font-size:2.4rem;
            }

            .aiwcu-grid{
                grid-template-columns:repeat(2,1fr);
                gap:30px;
            }

            .aiwcu-card h3{
                font-size:1.35rem;
            }

            .aiwcu-card p{
                font-size:1.05rem;
            }
        }
        @media (max-width:768px){

            .aiwcu-section{
                padding:90px 0;
            }

            .aiwcu-heading{
                margin-bottom:50px;
            }

            .aiwcu-title{
                font-size:2rem;
                line-height:1.3;
            }

            .aiwcu-grid{
                grid-template-columns:1fr 1fr;
                gap:24px;
            }

            .aiwcu-card{
                padding-left:40px;
            }

            .aiwcu-number{
                font-size:16px;
            }

            .aiwcu-card p{
                font-size:1rem;
            }
        }

        @media (max-width:640px){

            .aiwcu-section{
                padding:75px 0;
            }

            .aiwcu-container{
                width:94%;
            }

            .aiwcu-title{
                font-size:1.7rem;
            }

            /* single column */
            .aiwcu-grid{
                grid-template-columns:1fr;
                gap:22px;
            }

            .aiwcu-card{
                padding-left:38px;
            }

            .aiwcu-card h3{
                font-size:1.25rem;
            }

            .aiwcu-card p{
                font-size:0.95rem;
                line-height:1.6;
            }

            .aiwcu-number{
                font-size:15px;
                top:2px;
            }
        }



        /*************************software-support***********************/


        /* SECTION */
        .nxz-biz-section{
            position: relative;
            z-index: 2;
            padding:100px 0;
            text-align:center;
        }

        .nxz-biz-title{
            font-size:28px;
            letter-spacing:2px;
            margin-bottom:80px;
            color:#333;
        }

        /* LINE */
        .nxz-biz-line{
            width:100%;
            height:3px;
            background:#ddd;
            position:absolute;
            top:90px;
            left:0;
            z-index:1;
        }

        .nxz-biz-wrapper{
            position:relative;
            width:1500px;
            margin:auto;
        }
        /* SECTION heading */
        .nxz-process-heading{
            text-align:center; 
            margin-bottom:60px;
        }
        .nxz-process-tag{
            color:#4da3ff; 
            font-weight:500; 
            letter-spacing:1px; 
            font-size:14px;
        }
        .nxz-process-heading h2{
            color:#ffffff; 
            font-size:38px; 
            margin:15px 0 10px;
        }
        .nxz-process-heading p{
            color:#cbd5e1; 
            max-width:650px; 
            margin:0 auto;
        }

        /* GRID */
        .nxz-biz-grid{
            display:flex;
            justify-content:space-between;
            position:relative;
            z-index:2;
        }

        /* CARD */
        .nxz-biz-card{
            width:19%;
            position:relative;
        }

        /* ICON CIRCLE */
        .nxz-biz-icon{
            width:90px;
            height:90px;
            /* background:#fff; */
            border-radius:50%;
            margin:auto;
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 10px 25px rgba(0,0,0,0.1);
            position:relative;
            z-index:3;
        }

        .nxz-biz-icon img{
            width:80px;
        }

        /* RIBBON SHAPE */
        .nxz-biz-ribbon{
            background: linear-gradient(rgba(15, 15, 15, 0.71) 0%,  rgb(15 51 138 / 52%)100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            margin-top:-45px;
            padding:70px 15px 60px;
            color:#fff;
            clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
        }

        /* STEP */
        .nxz-biz-step{
            font-size:14px;
            letter-spacing:1px;
            opacity:.8;
        }

        .nxz-biz-number{
            font-size:32px;
            font-weight:bold;
            margin-bottom:15px;
        }

        .nxz-biz-heading{
            font-size: 1.5rem;
            font-weight:600;
            margin-bottom:10px;
        }

        .nxz-biz-text{
            font-size:1.2rem;
            line-height:1.5;
        }

        @media (max-width:1024px){

            .nxz-biz-wrapper{
                width:95%;
            }

            .nxz-process-heading h2{
                font-size:32px;
            }

            /* 3 cards per row */
            .nxz-biz-grid{
                flex-wrap:wrap;
                gap:40px 20px;
                justify-content:center;
            }

            .nxz-biz-card{
                width:30%;
            }

            .nxz-biz-text{
                font-size:1.05rem;
            }

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

            .nxz-biz-section{
                padding:80px 0;
            }

            .nxz-biz-wrapper{
                width:92%;
            }

            .nxz-process-heading h2{
                font-size:26px;
            }

            /* 2 cards per row */
            .nxz-biz-card{
                width:45%;
            }

            .nxz-biz-grid{
                flex-wrap:wrap;
                gap:35px 20px;
                justify-content:center;
            }

            .nxz-biz-icon{
                width:80px;
                height:80px;
            }

            .nxz-biz-icon img{
                width:65px;
            }

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

            .nxz-biz-section{
                padding:70px 0;
            }

            .nxz-biz-wrapper{
                width:94%;
            }

            .nxz-process-heading h2{
                font-size:22px;
                line-height:1.3;
            }

            /* single column */
            .nxz-biz-grid{
                flex-direction:column;
                gap:30px;
            }

            .nxz-biz-card{
                width:100%;
            }

            .nxz-biz-ribbon{
                padding:60px 20px 50px;
            }

            .nxz-biz-heading{
                font-size:1.25rem;
            }

            .nxz-biz-text{
                font-size:0.95rem;
            }

            /* hide horizontal line (important) */
            .nxz-biz-line{
                display:none;
            }

        }

        /* COLORS */
        /* .color1{ background:linear-gradient(180deg,#0ea5a4,#0f766e); }
        .color2{ background:linear-gradient(180deg,#22c55e,#15803d); }
        .color3{ background:linear-gradient(180deg,#facc15,#ca8a04); }
        .color4{ background:linear-gradient(180deg,#fb923c,#c2410c); }
        .color5{ background:linear-gradient(180deg,#ef4444,#b91c1c); } */


        /*************************mechanical-design ***********************************/
        .mdt-section {
                z-index: 2;
            position: relative;
            background: #040813;
            background-image:
                radial-gradient(circle at 20% 10%, rgba(37,99,235,0.07) 0%, transparent 50%),
                radial-gradient(circle at 80% 90%, rgba(220,38,38,0.06) 0%, transparent 50%);
            padding: 100px 40px;
            
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            }

            /* ── Section Header ── */
            .mdt-header {
                    z-index: 2;
            text-align: center;
            margin-bottom: 70px;
            }

            .mdt-eyebrow {
                z-index: 2;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #ccc;
            margin-bottom: 12px;
            }

            .mdt-title {
                z-index: 2;
            font-size: clamp(32px, 5vw, 54px);
            font-weight: 800;
            color: #fff;
            line-height: 1.05;
            letter-spacing: -0.5px;
            }

            .mdt-title span {
                    z-index: 2;
            color: #ffff;
            }

            .mdt-subtitle {
                    z-index: 2;
            margin-top: 14px;
            font-size: 15px;
            color: #64748B;
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            }

            /* ── Timeline Wrapper ── */
            .mdt-timeline {
            position: relative;
            width: 100%;
            max-width: 1500px;
            }

            /* ── Horizontal center line ── */
            .mdt-axis {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            height: 3px;
            /* background: linear-gradient(90deg, transparent, #CBD5E1 8%, #CBD5E1 92%, transparent); */

            z-index: 0;
            }

            /* ── Steps row ── */
            .mdt-steps {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 0;
            position: relative;
            z-index: 1;
            }

            /* ── Individual step column ── */
            .mdt-step {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            }

            /* ── Cards above: card → connector → node ── */
            /* ── Cards below: node → connector → card ── */
            .mdt-step--above {
            flex-direction: column;
            }

            .mdt-step--below {
            flex-direction: column-reverse;
            }

            /* ── Pill Card ── */
            .mdt-card {
                    border: 2px solid #ccc;
                background: linear-gradient(rgba(15, 15, 15, 0.71) 0%,  rgb(15 51 138 / 52%)100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
                width: 220px;
            min-height: 310px;

            border-radius: 80px;
            padding: 28px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: center;
            color: #fff;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: default;
            z-index: 2;
            }

            .mdt-card:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 20px 40px rgba(0,0,0,0.18);
            }

            .mdt-step--below .mdt-card:hover {
            transform: translateY(6px) scale(1.03);
            }


            .mdt-card-step {
            
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            opacity: 0.75;
            }

            .mdt-card-title {
            
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: 0.2px;
            }

            .mdt-card-desc {
            font-size: 1.2rem;
            font-weight: 400;
            line-height: 1.5;
            opacity: 0.88;
            color: #ccc;
            }

            /* ── Connector line (card ↔ node) ── */
            .mdt-connector {
                background: #ccc;
            width: 3px;
            height: 40px;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            }

        

            /* ── Timeline Node ── */
            .mdt-node {
            width: 103px;
            height: 103px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            z-index: 3;
            border: 3px solid #ccc;
                background: linear-gradient(rgba(15, 15, 15, 0.71) 0%,  rgb(15 51 138 / 52%)100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
            /* box-shadow: 0 4px 16px rgba(0,0,0,0.18); */
            transition: transform 0.3s ease;
            }

            .mdt-node:hover { transform: scale(1.12); }

            
            .mdt-node img {
            width: 64px;
            height: 64px;
            }

            /* ── Decorative dot above/below node ── */
            .mdt-node::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffff;
            border: 2px solid currentColor;
            opacity: 0.6;
            }

            .mdt-step--above .mdt-node::before { bottom: -22px; display: none; }
            .mdt-step--below .mdt-node::before { top: -22px; display: none; }

            @media (max-width:1024px){

            .mdt-title{
                font-size:42px;
            }

            .mdt-card{
                width:200px;
                min-height:280px;
                padding:24px 16px;
            }

            .mdt-node{
                width:90px;
                height:90px;
            }

            .mdt-node img{
                width:54px;
                height:54px;
            }

        }

        @media (max-width:768px){

            .mdt-section{
                padding:90px 20px;
                min-height:auto;
            }

            .mdt-header{
                margin-bottom:50px;
            }

            /* remove horizontal axis */
            .mdt-axis{
                display:none;
            }

            /* steps vertical */
            .mdt-steps{
                flex-direction:column;
                gap:40px;
                align-items:flex-start;
            }

            .mdt-step{
                flex-direction:row;
                align-items:flex-start;
                gap:20px;
            }

            .mdt-step--above,
            .mdt-step--below{
                flex-direction:row;
            }

            .mdt-node{
                width:80px;
                height:80px;
                flex-shrink:0;
            }

            .mdt-node img{
                width:46px;
                height:46px;
            }

            .mdt-connector{
                display:none;
            }

            .mdt-card{
                width:100%;
                min-height:auto;
                border-radius:20px;
                padding:22px;
            }

            .mdt-card-title{
                font-size:1.25rem;
            }

            .mdt-card-desc{
                font-size:1rem;
            }

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

            .mdt-section{
                padding:70px 16px;
            }

            .mdt-title{
                font-size:1.7rem;
                line-height:1.25;
            }

            .mdt-subtitle{
                font-size:0.9rem;
            }

            .mdt-step{
                gap:16px;
            }

            .mdt-node{
                margin-top: 20px;
                width:64px;
                height:64px;
            }

            .mdt-node img{
                width:34px;
                height:34px;
            }

            .mdt-card{
                padding:18px;
            }

            .mdt-card-title{
                font-size:1.15rem;
            }

            .mdt-card-desc{
                font-size:0.9rem;
            }

        }


/*************************mass-product-engineering*************************************/
.mpe-hero{
height:100vh;
background:url("../img/what-we-do/manufacturinghero.webp");
background-size:cover;
background-position:center right;
display:flex;
align-items:center;
padding-left:80px;
position:relative;
color:white;
overflow:hidden;
}

/* dark gradient overlay for text visibility */
.mpe-hero::before{
content:"";
position:absolute;
left:0;
top:0;
width:60%;
height:100%;
background:linear-gradient(to right, #00000029 70%, transparent);
}

/* content container */
.mpe-hero-content{
position:relative;
max-width:600px;
z-index:2;
    margin-left: 160px;

}

/* title */
.mpe-hero-title{
font-size:3rem;
font-weight:500;
margin-bottom:20px;
}

/* paragraph */
.mpe-hero-text{
color:#ccc;
line-height:1.7;
margin-bottom:30px;
font-size:1.2rem;
}

/* button */
.mpe-hero-btn{
display:inline-block;
background:#2563eb;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
color:white;
font-weight:500;
transition:0.3s;
}

.mpe-hero-btn:hover{
background:#1e4ed8;
}
@media (max-width:1024px){

    .mpe-hero{
        padding-left:40px;
        background-position:center right;
    }

    .mpe-hero-content{
        margin-left:60px;
        max-width:520px;
    }

    .mpe-hero-title{
        font-size:2.5rem;
    }

    .mpe-hero-text{
        font-size:1.05rem;
    }

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

    .mpe-hero{
        height:90vh;
        padding-left:30px;
        background-position:center;
    }

    .mpe-hero-content{
        margin-left:0;
        max-width:500px;
    }

    .mpe-hero::before{
        width:100%;
        background:linear-gradient(to right, rgba(0,0,0,.65), transparent);
    }

    .mpe-hero-title{
        font-size:2rem;
        line-height:1.3;
    }

    .mpe-hero-text{
        font-size:1rem;
    }

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

    .mpe-hero{
        min-height:calc(100svh - 70px);
        padding:100px 20px 60px;
        justify-content:center;
        text-align:center;
        background-position:center;
    }

    .mpe-hero-content{
        margin-left:0;
        max-width:100%;
    }

    .mpe-hero::before{
        width:100%;
        background:linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
    }

    .mpe-hero-title{
        font-size:1.7rem;
    }

    .mpe-hero-text{
        font-size:0.95rem;
        margin-bottom:24px;
    }

    .mpe-hero-btn{
        padding:10px 24px;
        font-size:14px;
    }

}

.mpe-overview{
padding:100px 60px;
background:#040813;
color:white;
}

.mpe-overview-container{
display:flex;
align-items:center;
gap:70px;
max-width:1500px;
margin:auto;
}

/* left image */
.mpe-overview-image{
flex:1;
}

.mpe-overview-image img{
width:100%;
/* max-width:520px; */
display:block;
}

/* right content */
.mpe-overview-content{
flex:1;
}

.mpe-overview-title{
font-size:3rem;
margin-bottom:20px;
}

.mpe-overview-text{
    font-size: 1.2rem;
    color: #cccc;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* points grid */
.mpe-overview-points{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
}
.mpe-overview-item{
display:flex;
gap:15px;
align-items:flex-start;
}

.mpe-overview-icon{
width:45px;
height:45px;
object-fit:contain;
}
.mpe-overview-item h4{
    font-size: 1.3rem;
    margin-bottom: 6px;
    color: #ffff;
}

.mpe-overview-item p{
font-size:1.1rem;
color:#ccc;
line-height:1.6;
}


@media (max-width:1024px){

    .mpe-overview{
        padding:90px 40px;
    }

    .mpe-overview-container{
        gap:50px;
    }

    .mpe-overview-title{
        font-size:2.4rem;
    }

    .mpe-overview-text{
        font-size:1.05rem;
    }

    .mpe-overview-item p{
        font-size:1rem;
    }

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

    .mpe-overview{
        padding:80px 30px;
    }

    .mpe-overview-container{
        flex-direction:column;
        gap:40px;
        text-align:center;
    }

    .mpe-overview-image img{
        max-width:500px;
        margin:auto;
    }

    .mpe-overview-title{
        font-size:2rem;
        line-height:1.3;
    }

    .mpe-overview-text{
        font-size:1rem;
    }

    .mpe-overview-points{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

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

    .mpe-overview{
        padding:70px 20px;
    }

    .mpe-overview-title{
        font-size:1.7rem;
    }

    .mpe-overview-text{
        font-size:0.95rem;
        margin-bottom:25px;
    }

    /* points single column */
    .mpe-overview-points{
        grid-template-columns:1fr;
        gap:18px;
    }

    .mpe-overview-item{
        text-align: left;
        gap:12px;
    }

    .mpe-overview-icon{
        width:36px;
        height:36px;
    }

    .mpe-overview-item h4{
        font-size:1.1rem;
    }

    .mpe-overview-item p{
        font-size:0.9rem;
    }

}

    /* ─── SECTION ─── */
    .mpe-services {
      padding: 96px 24px 112px;
     
      position: relative;
      overflow: hidden;
    }

    /* Decorative background geometry */
    .mpe-services::before {
      content: '';
      position: absolute;
      top: -120px; right: -120px;
      width: 520px; height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .mpe-services::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -80px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ─── HEADER ─── */
    .mpe-header {
      text-align: center;
      max-width: 1200px;
      margin: 0 auto 72px;
      position: relative;
      z-index: 1;
    }

    .mpe-eyebrow {
      display: inline-block;
   
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mpe-blue);
      background: rgba(59,130,246,0.1);
      border: 1px solid rgba(59,130,246,0.2);
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 24px;
    }

    .mpe-title {
      
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--mpe-text-dark);
      margin-bottom: 20px;
    }

    .mpe-title span {
      background: #fff;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .mpe-subtitle {
      font-size: 1.2rem;
     
      line-height: 1.75;
      color: #ccc;
      max-width: 900px;
      margin: 0 auto;
    }

    /* ─── GRID ─── */
    /* .mpe-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 1160px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    } */

    /* ─── CARD ─── */
    .mpe-service-card {
   background: linear-gradient(145deg, #0c1b34, #091326);
      border-radius:20px;
   
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);;
      cursor: default;
      /* border: 1px solid rgba(255,255,255,0.9); */
      position: relative;
    }

    .mpe-service-card:hover {
      transform: translateY(-8px) scale(1.01);
      box-shadow:  0 16px 48px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.06);
    }

    /* ─── CARD TOP BAND ─── */
    .mpe-card-top {
      position: relative;
      height: 90px;
      flex-shrink: 0;
    }

    /* Colored band fill */
    .mpe-card-band {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Wave SVG at bottom of band */
    .mpe-card-wave {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 32px;
    }

    /* ─── ICON CIRCLE ─── */
    .mpe-service-icon {
      position: absolute;
      left: 24px;
      bottom: -22px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      border: 2.5px solid;
      z-index: 2;
      transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1);
    }

    .mpe-service-card:hover .mpe-service-icon {
      transform: scale(1.12) rotate(-6deg);
    }

    .mpe-service-icon img{
    width:51px;
    height:51px;
    object-fit:contain;
    }

    /* ─── NUMBER ─── */
    .mpe-service-number {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      
      font-size: 2.6rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: rgba(255,255,255,0.35);
      line-height: 1;
      user-select: none;
    }

    /* ─── CARD BODY ─── */
    .mpe-card-body {
      padding: 40px 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .mpe-service-title {
    
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.3;
      color: #fff;
      letter-spacing: -0.01em;
    }

    .mpe-service-desc {
      font-size: 1.2rem;
      font-weight: 300;
      line-height: 1.7;
      color: #ccc;
    }

    /* ─── CARD FOOTER LINE ─── */
    .mpe-card-line {
      height: 3px;
      border-radius: 0 0 20px 20px;
      margin-top: auto;
      transition: height 0.3s ease;
    }

    .mpe-service-card:hover .mpe-card-line {
      height: 5px;
    }

    /* ─── COLOR VARIANTS ─── */
    /* Red */
    .mpe-card--red .mpe-card-band {background: linear-gradient(rgb(4 4 37 / 71%) 0%, rgb(15 51 138 / 52%) 100%);
    /* box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px; */
    backdrop-filter: blur(15px); }
    .mpe-card--red .mpe-card-wave path { fill: #12162e; }
    .mpe-card--red .mpe-service-icon {    border-color: #18248f; }
    .mpe-card--red .mpe-service-icon svg { color: #000000; }
    .mpe-card--red .mpe-card-line { background: linear-gradient(90deg, #1e299f, #2c2f44); }

    

    /* ─── ENTRY ANIMATIONS ─── */
    @keyframes mpe-fade-up {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .mpe-header { animation: mpe-fade-up 0.7s ease both; }

   

    .mpe-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 184px 220px 184px;
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
    }

    /* Card 1 — Large rectangle (2col × 2row) — top-left */
    .mpe-card-1 {
      grid-column: 1 / 3;
      grid-row:    1 / 3;
      animation-delay: .10s;
      /* padding: 48px 44px; */
    
    }

    /* Card 2 — Tall square (1col × 2row) — rows 1-2, col 3 */
    .mpe-card-2 {
      grid-column: 3 / 4;
      grid-row:    1 / 3;
      animation-delay: .18s;
    
    }

    /* Card 3 — Square (1col × 1row) — row 1, col 4 */
    .mpe-card-3 {
          grid-column: 4 / 5;
    grid-row: 1 / 3;
      animation-delay: .26s;
    
    }

    /* Card 4 — Square (1col × 1row) — row 2, col 4 */
    .mpe-card-4 {
      grid-column: 4 / 5;
         grid-row: 3 / 5;
      animation-delay: .34s;
     
    }

    /* Card 5 — Tall square (1col × 2row) — rows 3-4, col 1 */
    .mpe-card-5 {
      grid-column: 1 / 2;
      grid-row:    3 / 5;
      animation-delay: .42s;
     
    }

    /* Card 6 — Large rectangle (2col × 2row) — rows 3-4, cols 2-3 */
    .mpe-card-6 {
      grid-column: 2 / 4;
      grid-row:    3 / 5;
      animation-delay: .50s;
      /* padding: 48px 44px; */
      
    }

    @media (max-width:1024px){

    .mpe-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap:20px;
    }

    /* reset spans */
    .mpe-card-1,
    .mpe-card-2,
    .mpe-card-3,
    .mpe-card-4,
    .mpe-card-5,
    .mpe-card-6{
        grid-column:auto;
        grid-row:auto;
    }

    .mpe-title{
        font-size:2.4rem;
    }

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

    .mpe-services{
        padding:80px 20px;
    }

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

    .mpe-card-body{
        padding:34px 20px 24px;
    }

    .mpe-service-title{
        font-size:1.3rem;
    }

    .mpe-service-desc{
        font-size:1rem;
    }

    .mpe-service-icon{
        width:64px;
        height:64px;
    }

    .mpe-service-icon img{
        width:44px;
        height:44px;
    }

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

    .mpe-services{
        padding:70px 16px;
    }

    .mpe-header{
        margin-bottom:50px;
    }

    .mpe-title{
        font-size:1.7rem;
        line-height:1.3;
    }

    .mpe-subtitle{
        font-size:0.95rem;
    }

    /* single column */
    .mpe-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .mpe-card-body{
        padding:30px 18px 24px;
    }

    .mpe-service-title{
        font-size:1.2rem;
    }

    .mpe-service-desc{
        font-size:0.9rem;
        line-height:1.6;
    }

    .mpe-service-number{
        font-size:2rem;
    }

    .mpe-service-icon{
        width:56px;
        height:56px;
    }

    .mpe-service-icon img{
        width:38px;
        height:38px;
    }

}

    /* ── Section header ─────────────────────────────────────── */
    .masspro-section{
    margin: auto;
       padding: 50px 40px 170px 40px;

    }
    .masspro-section-header {
      text-align: center;
      margin-bottom: 72px;
    }
    .masspro-section-header .eyebrow {
      display: inline-block;

      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #7C3AED;
      background: rgba(124,58,237,.08);
      padding: 5px 16px;
      border-radius: 100px;
      margin-bottom: 16px;
    }
    .masspro-section-header h2 {
      
        
          font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.15;
     
    }
    .masspro-section-header h2 span {
      background: #FFFF;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .masspro-section-header p {
      margin-top: 14px;
      font-size: 1.2rem;
      color: #cccc;
      font-weight: 300;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }

    /* ── Process track wrapper ───────────────────────────────── */
    .masspro-process-track {
        margin: auto;
      position: relative;
      width: 100%;
      max-width: 1360px;
      /* Row height: card(120) + gap(32) + connector_area(88) + gap(32) + card(120) = 392px */
      --row-h: 392px;
      --half: calc(var(--row-h) / 2);        /* 196px — vertical centre */
      height: var(--row-h);
      display: flex;
      align-items: center;
    }

    /* ── Continuous SVG connector line ──────────────────────── */
    .masspro-connector-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
    }
    .masspro-conn-path {
      fill: none;
      stroke: #CBD5E1;
      stroke-width: 1.8;
      stroke-dasharray: 6 5;
    }
    .masspro-conn-dot {
      fill: #94A3B8;
    }

    /* ── Steps row ───────────────────────────────────────────── */
    .masspro-steps {
      position: relative;
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content:center;
      gap:20px;
    }

    /* ── Individual step ─────────────────────────────────────── */
    .masspro-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      /* Each step is tall enough to hold both icon + card */
      height: var(--row-h);
    }

    .how-line-mass {
   position: absolute;
    width: 100%;
    height: 431px;
    top: 65%;
    right: 58px;
    transform: translateY(-50%);
    z-index: 0;
}

    /* up  = icon top, card bottom  (steps 1,3,5) */
    /* down= card top, icon bottom  (steps 2,4)   */

    .masspro-step.masspro-up   { justify-content: flex-start; }
    .masspro-step.masspro-down { justify-content: flex-start; }

    /* ── Icon circle ─────────────────────────────────────────── */
    .masspro-icon-wrap {
            background: linear-gradient(rgb(4 4 37 / 71%) 0%, rgb(15 51 138 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 3.5px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      transition: transform .3s ease, box-shadow .3s ease;
    }masspro-
    .masspro-step:hover .masspro-icon-wrap {
      transform: scale(1.08);
    }
    .masspro-step.masspro-up   .masspro-icon-wrap { margin-top: calc(var(--half) - 88px/2); }
    .masspro-step.masspro-down .masspro-icon-wrap { margin-top: 40px;}

    /* .masspro-step-1 .masspro-icon-wrap { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 12px 40px rgba(124,58,237,.38); }
    .masspro-step-2 .masspro-icon-wrap { background: linear-gradient(135deg, #22D3EE, #06B6D4); box-shadow: 0 12px 40px rgba(6,182,212,.38); }
    .masspro-step-3 .masspro-icon-wrap { background: linear-gradient(135deg, #F472B6, #EC4899); box-shadow: 0 12px 40px rgba(236,72,153,.38); }
    .masspro-step-4 .masspro-icon-wrap { background: linear-gradient(135deg, #60A5FA, #2563EB); box-shadow: 0 12px 40px rgba(37,99,235,.38); }
    .masspro-step-5 .masspro-icon-wrap { background: linear-gradient(135deg, #FB923C, #F97316); box-shadow: 0 12px 40px rgba(249,115,22,.38); } */

    .masspro-icon-wrap img {
      width: 53px;
      height: 53px;
      stroke: #fff;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Step number badge */
    .masspro-step-num {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: .65rem;
      font-weight: 800;
      border: 2px solid currentColor;
    }


    /* ── Content card ────────────────────────────────────────── */
    .masspro-card {
            border-top: 1px solid #fff;
      width: 280px;
           background: linear-gradient(145deg, #0c1b34, #091326);
      border-radius: 18px;
      padding: 18px 16px;
     
      transition: transform .3s ease, box-shadow .3s ease;
      position: relative;
     
    }
    .masspro-step:hover .masspro-card {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(30,27,75,.13), 0 2px 6px rgba(30,27,75,.06);
    }
   

    /* up: card sits below the center line */
    .masspro-step.masspro-up   .masspro-card { margin-top: 32px; }
    /* down: card sits above the center line */
    .masspro-step.masspro-down .masspro-card {
      margin-top: 32px;
      /* push card to top then leave gap for the icon */
      order: -1;
      margin-bottom: 0;
      /* position: absolute so it doesn't push icon */
    }

    /* For down steps, put card at top and icon at bottom */
    .masspro-step.masspro-down {
      flex-direction: column;
    }
  

    .masspro-card-title {
     
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .masspro-card-body {
      font-size: 1.1rem;
      color: #ccc;
      line-height: 1.6;
      font-weight: 300;
    }

    /* ── Floating accent dots on cards ──────────────────────── */
    .masspro-card::before {
      content: '';
      position: absolute;
      top: 12px;
      right: 12px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      opacity: .5;
    }
  
    /* ── Responsive ──────────────────────────────────────────── */
   @media (max-width:1024px){

    .masspro-section{
        padding:50px 30px 120px;
    }

    .masspro-section-header h2{
        font-size:2.4rem;
    }

    .masspro-card{
        width:240px;
    }

    .masspro-icon-wrap{
        width:76px;
        height:76px;
    }

    .masspro-icon-wrap img{
        width:46px;
        height:46px;
    }

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

    .masspro-process-track{
        height:auto;
    }

    /* hide connector line */
    .masspro-connector-svg,
    .how-line-mass{
        display:none;
    }

    .masspro-steps{
        flex-direction:column;
        gap:40px;
        align-items:flex-start;
    }

    .masspro-step{
        flex-direction:row;
        align-items:flex-start;
        gap:20px;
        height:auto;
    }

    .masspro-step.masspro-up,
    .masspro-step.masspro-down{
        flex-direction:row;
    }

    .masspro-icon-wrap{
        width:70px;
        height:70px;
        margin-top:0 !important;
    }

    .masspro-icon-wrap img{
        width:42px;
        height:42px;
    }

    .masspro-card{
        width:100%;
        max-width:520px;
        margin-top:0 !important;
    }

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

    .masspro-section{
        padding:60px 16px 100px;
    }

    .masspro-section-header{
        margin-bottom:50px;
    }

    .masspro-section-header h2{
        font-size:1.7rem;
        line-height:1.3;
    }

    .masspro-section-header p{
        font-size:0.95rem;
    }

    .masspro-step{
        gap:16px;
    }

    .masspro-icon-wrap{
        width:58px;
        height:58px;
        border-width:2px;
    }

    .masspro-icon-wrap img{
        width:34px;
        height:34px;
    }

    .masspro-card{
        padding:16px;
        border-radius:14px;
    }

    .masspro-card-title{
        font-size:1.1rem;
    }

    .masspro-card-body{
        font-size:0.9rem;
    }

}

    /* ── Entrance animations ─────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .masspro-section-header { animation: fadeUp .7s ease both; }
    /* .masspro-step { animation: fadeUp .7s ease both; } */
    .masspro-step:nth-child(1) { animation-delay: .1s; }
    .masspro-step:nth-child(2) { animation-delay: .2s; }
    .masspro-step:nth-child(3) { animation-delay: .3s; }
    .masspro-step:nth-child(4) { animation-delay: .4s; }
    .masspro-step:nth-child(5) { animation-delay: .5s; }
 


  .engtech-section {
    
    padding: 80px 40px;
    position: relative;
    overflow: hidden;
  }

  /* Subtle background grid texture */
  .engtech-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(107,107,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107,107,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
  }



  .engtech-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* === HEADER === */
  .engtech-header {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
  }

  .engtech-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6b6bff;
    margin-bottom: 16px;
  }

  .engtech-header-eyebrow::before,
  .engtech-header-eyebrow::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #6b6bff;
  }

  .engtech-heading {
   
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 1px;
    
    line-height: 1.1;
  }

  .engtech-heading span {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .engtech-header-underline {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #6b6bff, #a855f7);
    margin: 20px auto 0;
  }

  /* === GRID === */
  .engtech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
  }

  /* === ITEM === */
  .engtech-item {
    opacity: 1;
    position: relative;
    padding-left: 28px;
    cursor: default;
  }

  /* Large faded background number */
  .engtech-number {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 86px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255,255,255,0.04);
    letter-spacing: -4px;
    pointer-events: none;
    z-index: 0;
    transition: color 0.4s ease;
    user-select: none;
  }

  .engtech-item:hover .engtech-number {
    color: rgba(107, 107, 255, 0.08);
  }

  /* L-shaped border content box */
  .engtech-box {
    border-radius: 25px;
    position: relative;
    z-index: 1;
    padding: 22px 20px 22px 65px;
    background: linear-gradient(135deg, rgba(107,107,255,0.04) 0%, rgba(8,12,30,0.6) 100%);
    /* L-shape: top, right, bottom — NO left border */
    border-top: 1px solid #ffff;
    border-right: 1px solid #ffff;
    border-bottom: 1px solid #ffff;
    border-left: 1px solid #ffff;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .engtech-item:hover .engtech-box {
    background: linear-gradient(135deg, rgba(107, 107, 255, 0.10) 0%, rgba(12, 18, 40, 0.8) 100%);
    border-top-color: #0e155f;
    border-right-color: #0e155f;
    border-left-color: #0e155f;
    border-bottom-color: #0e155f;
    transform: translateX(4px);
    box-shadow: 4px 4px 24px rgba(107, 107, 255, 0.12), inset 0 0 30px rgba(107, 107, 255, 0.03);
  }

 
  .engtech-item:hover .engtech-box::after {
      background: #0e155f;
    box-shadow: 0 0 8px #0e155f;
  }

  /* === ICON CIRCLE === */
  .engtech-icon-circle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, #0d0f2a, #0a0c1e);
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    box-shadow: 0 0 0 rgba(107,107,255,0);
  }

  .engtech-item:hover .engtech-icon-circle {
    border-color: #100e84;
    background: linear-gradient(145deg, #13163a, #0e1030);
    box-shadow: 0 0 14px rgba(107, 107, 255, 0.5), 0 0 28px rgba(107, 107, 255, 0.2), inset 0 0 12px rgba(107, 107, 255, 0.08);
  }

  .engtech-icon-circle img {
   width: 45px;
    height: 45px;
    stroke: #6b6bff;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s ease;
  }

  .engtech-item:hover .engtech-icon-circle svg {
    stroke: #a855f7;
  }

  /* === TITLE === */
  .engtech-title {
  
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffff;
    letter-spacing: 0.5px;
  
    line-height: 1.35;
    transition: color 0.3s ease;
  }

  .engtech-item:hover .engtech-title {
    color: #ffffff;
  }

  .engtech-subtitle {
    padding-left: 10px ;
    font-size: 1.1rem;
    font-weight: 300;
    color: #ccc;
    letter-spacing: 1.5px;

    margin-top: 4px;

  }

  .engtech-subtitle li{
    font-size:14px;
    opacity:0.8;
    margin-bottom:4px;
}

  /* === RESPONSIVE === */
 @media (max-width:1024px){

    .engtech-section{
        padding:70px 30px;
    }

    .engtech-grid{
        gap:28px 22px;
    }

    .engtech-title{
        font-size:1.3rem;
    }

    .engtech-subtitle{
        font-size:1rem;
    }

    .engtech-icon-circle{
        width:60px;
        height:60px;
    }

    .engtech-icon-circle img{
        width:38px;
        height:38px;
    }

    .engtech-number{
        font-size:70px;
    }

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

    .engtech-section{
        padding:60px 24px;
    }

    .engtech-header{
        margin-bottom:50px;
    }

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

    .engtech-box{
        padding:20px 18px 20px 60px;
    }

    .engtech-icon-circle{
        width:58px;
        height:58px;
    }

    .engtech-icon-circle img{
        width:34px;
        height:34px;
    }

    .engtech-number{
        font-size:60px;
        right:10px;
    }

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

    .engtech-section{
        padding:55px 16px;
    }

    .engtech-heading{
        font-size:1.7rem;
        line-height:1.25;
    }

    .engtech-header{
        margin-bottom:40px;
    }

    .engtech-box{
        padding:18px 16px 18px 54px;
    }

    .engtech-icon-circle{
        width:50px;
        height:50px;
    }

    .engtech-icon-circle img{
        width:28px;
        height:28px;
    }

    .engtech-title{
        font-size:1.15rem;
    }

    .engtech-subtitle{
        font-size:0.9rem;
    }

    .engtech-number{
        font-size:48px;
        right:8px;
        top:8px;
    }

}


/*******************************ai-nvr*****************************/
/* HERO SECTION */
.ainvr-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 8%;
  overflow: hidden;
  background: #020617;
}

.ainvr-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ainvr-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* DARK OVERLAY */
.ainvr-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(rgb(5 9 12 / 56%), rgb(5 9 12 / 56%))
}

/* CONTAINER */
.ainvr-hero-container {
    margin-bottom: 215px;
    position: relative;
    max-width: 950px;
    z-index: 2;
}

/* TITLE */
.ainvr-hero-title {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 15px;
}

/* SUBTITLE */
.ainvr-hero-subtitle {
  font-size: 1.1rem;
  color: #cccc;
  margin-bottom: 15px;
}

/* BUTTON GROUP */
.ainvr-hero-btn-group {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {

  .ainvr-hero-section {
    padding: 100px 6%;
  }

  .ainvr-hero-container {
    margin-bottom: 150px;
    max-width: 800px;
  }

  .ainvr-hero-title {
    font-size: 2.5rem;
  }

  .ainvr-hero-subtitle {
    font-size: 1rem;
  }

  .ainvr-hero-btn-group {
    gap: 15px;
  }
}

@media (max-width: 768px) {

  .ainvr-hero-section {
    padding: 80px 5%;
    min-height: 100vh;
  }

  .ainvr-hero-container {
    margin-bottom: 100px;
    max-width: 100%;
  }

  .ainvr-hero-title {
    font-size: 2rem;
    line-height: 1.3;
  }

  .ainvr-hero-subtitle {
    font-size: 0.95rem;
    padding: 0 10px;
  }

  .ainvr-hero-btn-group {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

@media (max-width: 640px) {

  .ainvr-hero-section {
    padding: 70px 4%;
    min-height: 100vh;
  }

  .ainvr-hero-container {
    margin-bottom: 60px;
  }

  .ainvr-hero-title {
    font-size: 1.6rem;
    line-height: 1.35;
  }

  .ainvr-hero-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .ainvr-hero-btn-group {
    flex-direction: column;
    gap: 10px;
  }

  /* Optional: buttons full width */
  .ainvr-hero-btn-group a {
    width: 100%;
    text-align: center;
  }
}

/* SECTION */
.ainvr-what-section {
  padding: 110px 8%;
  background: #05090c;
}

/* CONTAINER */
.ainvr-what-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 58px;
    max-width: 1300px;
    margin: auto;
}

/* LEFT TEXT */
/* .ainvr-what-text {
  max-width: 560px;
} */

.ainvr-what-title {
  font-size: 42px;
  margin-bottom: 20px;
}

.ainvr-what-desc {
  font-size: 18px;
  line-height: 1.7;
  color: #b7c2cc;
  margin-bottom: 30px;
}

/* FEATURES */
.ainvr-what-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ainvr-feature-item {
  font-size: 16px;
  color: #e0e8ef;
}

/* RIGHT VISUAL */
.ainvr-what-visual {
  display: flex;
  justify-content: center;
}

.ainvr-visual-box {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
     border: 1px solid #132b3f;
    box-shadow: 0 0 40px rgb(0 20 255 / 15%);
}

.ainvr-visual-gif {
  /* width: 562px;
  max-width: 100%; */
  height: 400px;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .ainvr-what-section {
    padding: 90px 6%;
  }

  .ainvr-what-container {
    gap: 40px;
  }

  .ainvr-what-title {
    font-size: 34px;
  }

  .ainvr-what-desc {
    font-size: 16px;
  }

  .ainvr-visual-gif {
    height: 320px;
  }
}

@media (max-width: 768px) {

  .ainvr-what-section {
    padding: 80px 5%;
  }

  .ainvr-what-container {
    flex-direction: column;
    text-align: center;
    gap: 35px;
  }

  .ainvr-what-text {
    max-width: 100%;
  }

  .ainvr-what-title {
    font-size: 28px;
  }

  .ainvr-what-desc {
    font-size: 15px;
    line-height: 1.6;
  }

  .ainvr-what-features {
    align-items: center;
  }

  .ainvr-feature-item {
    font-size: 14px;
  }

  .ainvr-visual-gif {
    width: 100%;
    height: 280px;
  }
}

@media (max-width: 640px) {

  .ainvr-what-section {
    padding: 70px 4%;
  }

  .ainvr-what-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .ainvr-what-desc {
    font-size: 14px;
  }

  .ainvr-feature-item {
    font-size: 13px;
  }

  .ainvr-what-container {
    gap: 25px;
  }

  .ainvr-visual-gif {
    height: 220px;
  }

  .ainvr-visual-box {
    border-radius: 10px;
  }
}


/* ── SECTION ── */
.nxon-timeline-section { padding: 100px 0 140px; }
 
/* ── HEADER ── */
.nxon-timeline-header { text-align: center; padding: 0 20px; margin-bottom: 70px; }
 
.nxon-timeline-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: #84cc16; margin-bottom: 18px;
}

 
.nxon-timeline-heading {
 
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 400; 
  line-height: 1.13; 
  letter-spacing: -.025em;
  max-width: 680px; 
  margin: 0 auto;
}
/* .nxon-timeline-heading em {
  font-style: normal;
  -webkit-text-stroke: 1px rgba(132,204,22,.4);
  color: transparent;
} */
 
/* ── WRAPPER (SVG canvas + absolutely-placed cards) ── */
.nxon-timeline-wrapper {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  /* aspect ratio 900:1000 — maintained by the padding trick */
  padding-bottom: 111.1%;  /* 1000/900 * 100 */
  height: 0;
}
 
/* SVG fills the wrapper */
.nxon-timeline-svg {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  overflow: visible;
}
 
/* ── NODES ── */
.nxon-timeline-node {
  position: absolute;
  width: 38%;
  transition: opacity .5s ease, transform .5s ease;
  opacity: .2;
  transform: translateY(6px);
}
.nxon-timeline-node[data-side="left"]  { right: 53%; text-align: right; }
.nxon-timeline-node[data-side="right"] { left:  53%; text-align: left;  }
 
.nxon-timeline-node.nxon-timeline-active {
  opacity: 1;
  transform: translateY(0);
}
 




 
.nxon-timeline-num {
  display: inline-block;

  font-size: .6rem; 
  font-weight: 700; 
  letter-spacing: .16em;
  color: #fff; 
  border: 1px solid #142a40; 
  border-radius: 12px;
  padding: 2px 8px; margin-bottom: 9px;
  transition: color .4s, border-color .4s, background .4s;
}

.nxon-timeline-year {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: #1e3a55; margin-bottom: 11px;
  transition: color .4s, text-shadow .4s;
}
.nxon-timeline-node.nxon-timeline-active .nxon-timeline-year {
  color: #f0f7ff;
  text-shadow: 0 0 50px #84cc1620;
}
 
.nxon-timeline-desc {
  font-size: .83rem; font-weight: 300; line-height: 1.72;
  color: #2a4a6a; max-width: 260px;
  transition: color .4s;
}
.nxon-timeline-node[data-side="left"] .nxon-timeline-desc { margin-left: auto; }
.nxon-timeline-node.nxon-timeline-active .nxon-timeline-desc { color: #7aaac8; }

/* AI NVR timeline overrides */
.nxon-timeline-section {
  padding: 100px 20px 140px;
 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
 
  background:
    radial-gradient(circle at top, rgb(19 31 156 / 22%), transparent 35%), linear-gradient(180deg, #05090c 0%, #071019 100%)
}

.nxon-timeline-header {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 24px;
}

.nxon-timeline-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #4da3ff;
  margin-bottom: 18px;
}


.nxon-timeline-heading em {
  font-style: normal;
  -webkit-text-stroke: 1px rgba(132, 204, 22, 0.4);
  color: transparent;
}

.nxon-timeline-wrapper {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  flex: 1;
  height: calc(100vh - 240px);
  min-height: 680px;
  max-height: 900px;
  padding-bottom: 0;
}

.nxon-timeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nxon-timeline-node {
  position: absolute;
  width: 37%;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.22;
  transform: translateY(10px);
}

.nxon-timeline-node[data-side="left"] {
  right: 61%;
}

.nxon-timeline-node[data-side="right"] {
  left: 59%;
}

.nxon-timeline-node.nxon-timeline-active {
  opacity: 1;
  transform: translateY(0);
}



.nxon-timeline-node[data-side="left"]::after {
  right: -34px;
}

.nxon-timeline-node[data-side="right"]::after {
  left: -34px;
}


.nxon-timeline-card {
  position: relative;
  padding: 22px 24px 22px 96px;
  /* border: 1px solid rgba(73, 104, 132, 0.5);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(10, 20, 31, 0.95), rgba(6, 12, 20, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); */
  backdrop-filter: blur(8px);
}

.nxon-timeline-node[data-side="left"] .nxon-timeline-card {
  padding: 22px 96px 22px 24px;
  text-align: right;
}

.nxon-timeline-icon {
      position: absolute;
    top: 20px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
   
    display: flex;
    align-items: center;
    justify-content: center;
}

.nxon-timeline-node[data-side="left"] .nxon-timeline-icon {
  left: auto;
  right: 24px;
}

.nxon-timeline-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}


.nxon-timeline-title {
 
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.28;
  color: #dfeeff;
  margin-bottom: 10px;
}

.nxon-timeline-desc {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.72;
  color: #8fb1cb;
  max-width: none;
}

.nxon-timeline-node.nxon-timeline-active .nxon-timeline-card {
  border-color: rgba(132, 204, 22, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 0 30px rgba(132, 204, 22, 0.08);
}

.nxon-timeline-node.nxon-timeline-active .nxon-timeline-icon {
 
    box-shadow: 0 0 18px rgb(22 51 204 / 18%), inset 0 0 18px rgba(132, 204, 22, 0.1);
}



#nxon-section .nxon-timeline-header {
  margin-bottom: 48px;
}



#nxon-section .nxon-timeline-wrapper {
  position: relative;
  flex: 1;
  
  max-width: 1300px;
  height: clamp(680px, calc(100vh - 250px), 860px);
  min-height: 680px;
  max-height: 860px;
  margin: 0 auto;
  padding-bottom: 0;
}

#nxon-section .nxon-timeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#nxon-section .nxon-timeline-node {
  width: 34%;
  opacity: 0.32;
  transform: translateY(18px) scale(0.98);
}




#nxon-section .nxon-timeline-card {
  min-height: 144px;
  padding: 22px 22px 22px 118px;
  /* border: 1px solid rgba(71, 93, 116, 0.55);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(9, 18, 28, 0.9), rgba(7, 14, 24, 0.98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18); */
  backdrop-filter: blur(10px);
}

#nxon-section .nxon-timeline-node[data-side="left"] .nxon-timeline-card {
  padding: 22px 92px 22px 22px;
}

#nxon-section .nxon-timeline-icon {
  top: 62px;

  width: 54px;
  height: 54px;
  border-radius: 16px;
}

#nxon-section .nxon-timeline-node[data-side="left"] .nxon-timeline-icon {
 left: 400px;
}

#nxon-section .nxon-timeline-title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin-bottom: 8px;
}

#nxon-section .nxon-timeline-desc {
  font-size: 0.92rem;
  line-height: 1.65;
}

#nxon-section .nxon-timeline-node.nxon-timeline-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}



#nxon-section .nxon-timeline-node.nxon-timeline-active .nxon-timeline-title {
  color: #f1f7ff;
}

#nxon-section .nxon-timeline-node.nxon-timeline-active .nxon-timeline-desc {
  color: #a8c8df;
}


@media (max-width: 1024px) {

  .nxon-timeline-section {
    padding: 80px 20px 100px;
  }

  .nxon-timeline-wrapper {
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .nxon-timeline-node {
    width: 42%;
  }

  .nxon-timeline-node[data-side="left"] {
    right: 55%;
  }

  .nxon-timeline-node[data-side="right"] {
    left: 55%;
  }

  .nxon-timeline-title {
    font-size: 1.2rem;
  }

  .nxon-timeline-desc {
    font-size: 0.9rem;
  }
}


@media (max-width: 768px) {

  .nxon-timeline-section {
    padding: 70px 16px;
  }

  .nxon-timeline-wrapper {
    height: auto;
    position: relative;
  }

  /* REMOVE SVG complex layout */
  .nxon-timeline-svg {
    display: none;
  }

  /* STACK ALL NODES */
  .nxon-timeline-node {
    position: relative;
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 30px;
    opacity: 1;
    transform: none;
    text-align: left !important;
  }
    #nxon-section .nxon-timeline-node{
        width: fit-content;
    }
  /* CARD FIX */
  .nxon-timeline-card {
    padding: 18px 18px 18px 80px !important;
    min-height: auto;
  }

  /* ICON POSITION FIX */
  .nxon-timeline-icon {
    left: 18px !important;
    right: auto !important;
    top: 18px;
    width: 48px;
    height: 48px;
  }

  .nxon-timeline-icon img {
    width: 40px;
    height: 40px;
  }

  .nxon-timeline-title {
    font-size: 1.05rem;
  }

  .nxon-timeline-desc {
    font-size: 0.85rem;
  }
}


@media (max-width: 640px) {

  .nxon-timeline-section {
    padding: 60px 14px;
  }

  .nxon-timeline-header {
    margin-bottom: 30px;
  }

    #nxon-section .nxon-timeline-node{
        width: fit-content;
    }

  .nxon-timeline-heading {
    font-size: 1.6rem;
  }

  .nxon-timeline-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  .nxon-timeline-card {
    padding: 16px 16px 16px 70px !important;
    border-radius: 16px;
  }

  .nxon-timeline-icon {
    width: 42px;
    height: 42px;
  }

  .nxon-timeline-icon img {
    width: 34px;
    height: 34px;
  }

  .nxon-timeline-title {
    font-size: 0.95rem;
  }

  .nxon-timeline-desc {
    font-size: 0.8rem;
    line-height: 1.6;
  }
}

/* ===== SECTION ===== */
.nxsvc-section {
  padding: 100px 40px;
  text-align: center;
}

/* Title */
.nxsvc-header {
  max-width: 700px;
  margin: 0 auto 60px;
}

.nxsvc-title {
  font-size: 3rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
}

.nxsvc-subtitle {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.6;
}

/* ===== GRID ===== */
.nxsvc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1300px;
  margin: auto;
  padding: 50px;
}

/* ===== CARD ===== */
.nxsvc-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nxsvc-icon-box {
         background: linear-gradient(rgba(15, 15, 15, 0.71) 0%,  rgb(15 51 138 / 52%)100%);
            box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
            backdrop-filter: blur(15px);
  width: 90px;
  height: 90px;
  /* background: #1a1a2e; */
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -18px;
  z-index: 2;
  position: relative;
  transition: 0.4s ease;
  overflow: visible;
  /* border: 1px solid rgba(130, 80, 255, 0.15); */
}
.nxsvc-icon-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.35) 0%,
    rgba(59, 130, 246, 0.15) 20%,
    transparent 40%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.nxsvc-icon-box::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 120%;
  height: 120%;

   background: radial-gradient(
    circle at top left,
    rgba(59, 130, 246, 0.5),
    transparent 60%
  );

  filter: blur(25px);
  opacity: 0;
  transition: 0.4s ease;
}
.nxsvc-card-wrapper:hover .nxsvc-icon-box::before {
  opacity: 1;
}

.nxsvc-icon-box img {
  width: 90px;
  height: 90px;
  color: #a066ff;
  filter: drop-shadow(0 0 6px rgba(160, 102, 255, 0.5));
}

.nxsvc-card {
        background: linear-gradient(rgba(15, 15, 15, 0.71) 0%, rgb(31 31 31 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
  /* background: #14141f;
  border: 1px solid rgba(100, 70, 180, 0.2); */
  border-radius: 16px;
  padding: 44px 28px 30px;
  width: 100%;
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}

.nxsvc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;

  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.25) 0%,
    rgba(59, 130, 246, 0.1) 25%,
    transparent 50%
  );

  opacity: 0;
  transition: 0.4s ease;
}

.nxsvc-card::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 140%;
  height: 140%;

  background: radial-gradient(
    circle at top left,
    rgba(37, 99, 235, 0.4),
    transparent 60%
  );

  filter: blur(30px);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
}

.nxsvc-card-wrapper:hover .nxsvc-card::before {
  opacity: 1;
}

.nxsvc-card-wrapper:hover .nxsvc-card::after {
  opacity: 1;
}

.nxsvc-card-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.1) 50%,
    transparent 60%
  );

  transform: rotate(25deg);
  opacity: 0;
}

.nxsvc-card-wrapper:hover .nxsvc-card-shine {
  animation: nxsvc-shineMove 1s ease forwards;
  opacity: 1;
}
/* .nxsvc-card::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 100px;
  background: radial-gradient(ellipse, rgba(140, 80, 255, 0.35), transparent 70%);
  opacity: 0;
  transition: 0.4s;
} */

.nxsvc-card h3 {
    font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
}

.nxsvc-card p {
  color: #cccc;
  font-size: 1rem;
}

/* Hover */
.nxsvc-card-wrapper:hover .nxsvc-icon-box {
  /* box-shadow: 0 0 24px rgba(150,80,255,0.6); */
  transform: translateY(-5px);
}
/* 
.nxsvc-card-wrapper:hover .nxsvc-card {
  border-color: rgba(140, 80, 255, 0.5);
  box-shadow: 0 0 30px rgba(120, 60, 220, 0.25);
  background: #16162a;
} */

.nxsvc-card-wrapper:hover .nxsvc-card::before {
  opacity: 1;
}



/* Responsive */

@media (max-width: 1024px) {

  .nxsvc-section {
    padding: 80px 30px;
  }

  .nxsvc-title {
    font-size: 2.4rem;
  }

  .nxsvc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 30px;
  }

  .nxsvc-card {
    padding: 36px 22px 26px;
  }

  .nxsvc-icon-box {
    width: 80px;
    height: 80px;
  }

  .nxsvc-icon-box img {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 768px) {

  .nxsvc-section {
    padding: 70px 20px;
  }

  .nxsvc-header {
    margin-bottom: 40px;
  }

  .nxsvc-title {
    font-size: 2rem;
  }

  .nxsvc-subtitle {
    font-size: 0.95rem;
  }

  .nxsvc-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 0;
  }

  .nxsvc-card {
    padding: 32px 20px 24px;
  }

  .nxsvc-card h3 {
    font-size: 1.3rem;
  }

  .nxsvc-card p {
    font-size: 0.95rem;
  }

  .nxsvc-icon-box {
    width: 70px;
    height: 70px;
    margin-bottom: -14px;
  }

  .nxsvc-icon-box img {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 640px) {

  .nxsvc-section {
    padding: 160px 16px;
  }

  .nxsvc-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .nxsvc-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .nxsvc-grid {
    gap: 18px;
  }

  .nxsvc-card {
    padding: 28px 16px 22px;
    border-radius: 12px;
  }

  .nxsvc-card h3 {
    font-size: 1.1rem;
  }

  .nxsvc-card p {
    font-size: 0.85rem;
  }

  .nxsvc-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .nxsvc-icon-box img {
    width: 63px;
    height: 63px;
  }
}



/* SECTION */
.nxind-section {
  padding: 80px 10%;
}
.nxind-header {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.nxind-subtitle {
  color: #cccc;
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.nxind-main-title {
  font-size: 3rem;
  margin-bottom: 15px;
}

.nxind-description {
  color: #cccc;
  line-height: 1.7;
}
/* DESKTOP */
.nxind-container {
  display: flex;
  gap: 50px;
}

/* LEFT */
.nxind-left {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nxind-item {
  padding: 18px 20px;
  border-radius: 14px;
  background: #111827;
  cursor: pointer;
  transition: 0.4s;
}

.nxind-item span {
  color: #cbd5e1;
}

.nxind-item.active {
  height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 15px;
  position: relative;
 
}

.nxind-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  border-radius: 14px;
}

.nxind-item.active span {
  color: #fff;
  z-index: 2;
  font-weight: 600;
}

/* RIGHT */
.nxind-right {
  width: 80%;
  background: #111827;
  padding: 45px;
  border-radius: 18px;
}

.nxind-right h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.nxind-right p {
    font-size: 1.2rem;
  color: #cccc;
  line-height: 1.9;
  margin-bottom: 15px;
}

/* MOBILE */
.nxind-mobile {
  display: none;
}

.nxind-card {
    border-radius: 25px;
    padding: 20px;
    background: #111827;
  margin-bottom: 40px;
}

.nxind-card h3 {
  font-size: 22px;
}

.nxind-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
  margin: 12px 0;
}

.nxind-card p {
  color: #9ca3af;
  line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .nxind-section {
    padding: 70px 6%;
  }

  .nxind-main-title {
    font-size: 2.4rem;
  }

  .nxind-description {
    font-size: 1rem;
  }

  .nxind-container {
    gap: 30px;
  }

  .nxind-left {
    width: 40%;
  }

  .nxind-right {
    width: 60%;
    padding: 30px;
  }

  .nxind-right h1 {
    font-size: 1.6rem;
  }

  .nxind-right p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  .nxind-section {
    padding: 60px 5%;
  }

  .nxind-header {
    margin-bottom: 40px;
  }

  .nxind-main-title {
    font-size: 2rem;
  }

  .nxind-subtitle {
    font-size: 1rem;
  }

  .nxind-description {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Hide desktop layout */
  .nxind-container {
    display: none;
  }

  /* Show mobile layout */
  .nxind-mobile {
    display: block;
  }

  .nxind-card h4 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .nxind-card img {
    height: 200px;
  }

  .nxind-card p {
    margin-bottom: 10px;
    align-items: center;
    text-align: left;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {

  .nxind-section {
    padding: 50px 16px;
  }

  .nxind-main-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .nxind-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
  }

  .nxind-description {
    font-size: 0.85rem;
  }

  .nxind-card {
            border-radius: 25px;
        padding: 20px;
        background: #111827;
    margin-bottom: 30px;
  }

  .nxind-card h4 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .nxind-card img {
    height: 180px;
    border-radius: 10px;
  }

  .nxind-card p {
    align-items: center;
        text-align: left;
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
  }
}


/***********************wifi-camera***********************/
/* SECTION */
.core-tech-section {
  padding: 120px 8%;
}

.core-container {
  display: flex;
  gap: 80px;
}

/* LEFT */
.core-left {
  width: 40%;
  position: sticky;
  top: 100px;
  height: fit-content;
}

.core-left .eyebrow{
     font-size: 13px;
    letter-spacing: 2px;
    color: #4fa3ff; 
}
  
.core-left p {
 color: #cccc;
 font-size: 1.2rem;
}
.core-subtitle {
    font-size: 12px;
    color: #4fa3ff;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.core-title {
  font-size: 3rem;
  font-weight: 500;
}

/* RIGHT */
.core-right {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* CARD */
.wificore-card {
   background: linear-gradient(180deg, rgb(10 26 94 / 67%), rgb(6 17 32 / 98%));
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;

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

  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ICON */
.core-icon {
  width: 60px;
  height: 60px;
  /* background: #f0f0f0; */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-icon img {
  width: 70px;
}

/* CONTENT */
.core-content h3 {
  margin: 0 0 4px;
  font-size: 1.5rem;
}

.core-content p {
  margin: 0;
  color: #cccc;
}

/* NUMBER */
.card-number {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
    color: rgb(86 86 86 / 49%);
  font-weight: bold;
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .core-tech-section {
    padding: 90px 6%;
  }

  .core-container {
    gap: 50px;
  }

  .core-left {
    width: 45%;
    top: 80px;
  }

  .core-right {
    width: 55%;
    gap: 80px;
  }

  .core-title {
    font-size: 2.4rem;
  }

  .core-left p {
    font-size: 1rem;
  }

  .core-card {
    padding: 30px;
  }

  .core-content h3 {
    font-size: 1.3rem;
  }

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

@media (max-width: 768px) {

  .core-tech-section {
    padding: 70px 5%;
  }

  .core-container {
    flex-direction: column;
    gap: 40px;
  }

  /* REMOVE sticky */
  .core-left {
    width: 100%;
    position: relative;
    top: 0;
  }

  .core-right {
    width: 100%;
    gap: 40px;
  }

  .core-title {
    font-size: 2rem;
  }

  .core-left p {
    font-size: 0.95rem;
  }

  .core-card {
    padding: 26px;
    transform: none;
    opacity: 1;
  }

  .core-icon {
    width: 50px;
    height: 50px;
  }

  .core-icon img {
    width: 55px;
  }

  .card-number {
    font-size: 26px;
    top: 15px;
    right: 20px;
  }
}

@media (max-width: 640px) {

  .core-tech-section {
    padding: 60px 16px;
  }

  .core-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .core-left .eyebrow {
            display: flex;
        /* align-items: center; */
        justify-content: center;
    font-size: 11px;
    /* letter-spacing: 1px; */
  }

  .core-left p {
        display: flex;
        font-size: 0.85rem;
         text-align: center;
  
  }

  .core-card {
    padding: 22px 18px;
    border-radius: 14px;
    gap: 14px;
  }

  .core-content h3 {
    font-size: 1.1rem;
  }

  .core-content p {
    font-size: 0.85rem;
  }

  .core-icon {
    width: 42px;
    height: 42px;
  }

  .core-icon img {
    width: 45px;
  }

  .card-number {
    font-size: 20px;
    top: 12px;
    right: 14px;
  }
  

  .core-left, .core-right {
    width: 100%;
    position: relative;
    top: 0;
  }

}

.perf-section {
  padding: 100px 8%;
  background: #0b0b0b;
  color: #fff;
}

.perf-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.perf-title {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 15px;
}

.perf-subtitle {
  font-size: 1.2rem;
  color: #cccc;
  line-height: 1.6;
}


/* GRID */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 25px;
}

/* CARD BASE */
.perf-card {
    background: linear-gradient(rgb(14 15 57 / 71%) 0%, rgb(31 31 31 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
  padding: 25px;
  border-radius: 18px;
  display: flex;    
  flex-direction: column;
  justify-content: flex-start;
}
/* ICON */
.icon {
  width: 40px;
  margin-bottom: 15px;
}

.perf-card:hover {
     transition: all 0.35s ease;
    transform: translateY(-6px);
}

/* BIG CARD */
.perf-card.big {
  grid-row: span 2;
}

/* IMAGE (BOTTOM) */
.card-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: auto; 
}

/* ICON CARD */
.perf-card.minimal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.icon {
  width: 40px;
  margin-bottom: 10px;
}


/* SMALL CARD */
.perf-card.small {
  justify-content: center;
}

/* TEXT */
.perf-card h3 {
    font-size: 1.5rem;
  margin: 5px 0 10px;
}

.perf-card p {
  color: #cccc;
  font-size: 1.1rem;
}


@media (max-width: 1024px) {

  .perf-section {
    padding: 80px 6%;
  }

  .perf-title {
    font-size: 2.4rem;
  }

  .perf-subtitle {
    font-size: 1rem;
  }

  .perf-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
  }

  .perf-card.big {
    grid-row: span 1; /* IMPORTANT → remove tall layout */
  }

  .card-img {
    height: 200px;
  }

  .perf-card h3 {
    font-size: 1.3rem;
  }

  .perf-card p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  .perf-section {
    padding: 70px 5%;
  }

  .perf-header {
    margin-bottom: 40px;
  }

  .perf-title {
    font-size: 2rem;
  }

  .perf-subtitle {
    font-size: 0.95rem;
  }

  .perf-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 18px;
  }

  .perf-card {
    padding: 22px;
  }

  .perf-card.big {
    grid-row: span 1;
  }

  .card-img {
      margin-top: 10px;
    height: 180px;
  }

  .perf-card h3 {
    font-size: 1.2rem;
  }

  .perf-card p {
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {

  .perf-section {
    padding: 60px 16px;
  }

  .perf-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .perf-subtitle {
    font-size: 0.85rem;
  }

  .perf-card {
    padding: 18px;
    border-radius: 14px;
  }

  .card-img {
    margin-top: 10px;
    height: 150px;
    border-radius: 10px;
  }

  .perf-card h3 {
    font-size: 1.05rem;
  }

  .perf-card p {
    font-size: 0.85rem;
  }

  .icon {
    width: 32px;
  }
}
/* SECTION */
.zzsec-wrapper {
  padding: 100px 7%;
}

/* HEADER */
.zzsec-header {
  text-align: center;
  margin-bottom: 80px;
}

.zzsec-title {
  font-size: 3rem;
  color: #fff;
}

.zzsec-subtitle {
  color: #cccc;
}

/* GRID */
.zzsec-gridbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* gap: 60px; */
}

/* ITEM */
.zzsec-itemcard {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

/* IMAGE */
.zzsec-imgbox {
  height: 220px;
  /* border-radius: 15px; */
 
}

.zzsec-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 15px; */
}

/* CONTENT */
.zzsec-contentbox {
     background: linear-gradient(rgb(14 15 57 / 71%) 0%, rgb(31 31 31 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
  padding: 25px;
  /* border-radius: 15px; */
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.08); */
}

.zzsec-contentbox h3 {
  margin-bottom: 10px;
}

.zzsec-contentbox p {
  color: #cccc;
  font-size: 1rem;
}

/* HOVER */
/* .zzsec-imgbox:hover,
.zzsec-contentbox:hover {
  transform: translateY(-8px);
  transition: 0.3s;
} */

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

  .zzsec-wrapper {
    padding: 80px 6%;
  }

  .zzsec-title {
    font-size: 2.4rem;
  }

  .zzsec-gridbox {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .zzsec-imgbox {
    height: 200px;
  }

  .zzsec-contentbox {
    padding: 22px;
  }

  .zzsec-contentbox h3 {
    font-size: 1.3rem;
  }

  .zzsec-contentbox p {
    font-size: 0.95rem;
  }
}
/* ===============================
   768px (Tablet Portrait)
================================= */
@media (max-width: 768px) {
    .wificamera-hero-pro {
        background: url(../img/solutions/wificam/wifihero.webp) right center / cover no-repeat;
    }
/* .drone-hero-overlay {
      background: rgb(0 0 0 / 38%);
} */
  .zzsec-wrapper {
    padding: 70px 5%;
  }

  .zzsec-header {
    margin-bottom: 50px;
  }

    .zzsec-itemcard {
    display: flex;
    flex-direction: column;
  }
  .zzsec-imgbox img {
        border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .zzsec-imgbox {
    order: 1;
    width: 100%;
  }

  .zzsec-contentbox {
    order: 2;
    width: 100%;
  }

  .zzsec-title {
    font-size: 2rem;
  }

  .zzsec-subtitle {
    font-size: 0.95rem;
  }

  .zzsec-gridbox {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .zzsec-imgbox {
    height: 180px;
  }

  .zzsec-contentbox {
    padding: 20px;
  }

  .zzsec-contentbox h3 {
    font-size: 1.2rem;
  }

  .zzsec-contentbox p {
    font-size: 0.9rem;
  }
}
/* ===============================
   640px (Mobile)
================================= */
@media (max-width: 640px) {

  .zzsec-wrapper {
    padding: 60px 16px;
  }

  .zzsec-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .zzsec-subtitle {
    font-size: 0.85rem;
  }

  .zzsec-imgbox {
    height: 160px;
  }

  .zzsec-contentbox {
    border-bottom-left-radius: 12px;
        padding: 18px;
        border-bottom-right-radius: 12px;
  }

  .zzsec-contentbox h3 {
    font-size: 1.05rem;
  }

  .zzsec-contentbox p {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}


/*******************************door-camera*******************************/
/* HERO WRAP */
.doorx-hero-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* BACKGROUND IMAGE */
.doorx-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/solutions/doorcam/doorcamehero.webp') top/cover no-repeat;
  z-index: 1;
}

/* RIGHT SIDE DARK BLUE SHADE */
.doorx-hero-shade {
  position: absolute;
  inset: 0;
    background: linear-gradient(to left, rgb(2 15 34 / 95%) 25%, rgb(2 18 42 / 75%) 45%, rgb(3 15 34 / 64%) 65%, transparent 85%);
  z-index: 2;
}

/* CONTENT */
.doorx-hero-content {
  position: relative;
  z-index: 3;
  max-width: 550px;
  margin-right: 8%;
  color: #fff;
  text-align: left;
}

/* BADGE */
.doorx-badge {
  display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.6rem;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* HEADING */
.doorx-hero-content h1 {
    font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* PARAGRAPH */
.doorx-hero-content p {
  font-size: 1rem;
  color: #cccc;
  margin-bottom: 30px;
}

/* BUTTONS */
.doorx-cta {
  display: flex;
  gap: 15px;
}

.doorx-btn {
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s ease;
}

/* PRIMARY BUTTON */
.doorx-btn.primary {
  background: #00aaff;
  color: #fff;
}

.doorx-btn.primary:hover {
  background: #0088cc;
}

/* OUTLINE BUTTON */
.doorx-btn.outline {
  border: 1px solid #00aaff;
  color: #00aaff;
}

.doorx-btn.outline:hover {
  background: #00aaff;
  color: #fff;
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .doorx-hero-content {
    max-width: 480px;
    margin-right: 6%;
  }

  .doorx-hero-content h1 {
    font-size: 2.4rem;
  }

  .doorx-hero-content p {
    font-size: 0.95rem;
  }

  .doorx-cta {
    gap: 12px;
  }
}


@media (max-width: 768px) {

  .doorx-hero-wrap {
    justify-content: center;
    text-align: center;
  }

  /* overlay adjust */
  .doorx-hero-shade {
    background: linear-gradient(
      to top,
      rgba(2, 15, 34, 0.95) 30%,
      rgba(2, 18, 42, 0.7) 60%,
      transparent 100%
    );
  }

  .doorx-hero-content {
    margin: 0 20px;
    max-width: 100%;
    text-align: center;
  }

  .doorx-hero-content h1 {
    font-size: 2rem;
  }

  .doorx-hero-content p {
    font-size: 0.9rem;
  }

  .doorx-cta {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
.doorx-hero-bg{
        background: url(../img/solutions/doorcam/doorcamehero.webp) left / cover no-repeat;
}
  .doorx-hero-wrap {
    height: 100vh;
  }

  .doorx-hero-content {
    margin: 0 16px;
  }

  .doorx-hero-content h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .doorx-hero-content p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .doorx-badge {
    font-size: 0.55rem;
    padding: 5px 12px;
  }

  .doorx-cta {
    /* flex-direction: column; */
    gap: 10px;
  }

  .doorx-btn {
    width: 100%;
    text-align: center;
    padding: 10px 18px;
    font-size: 13px;
  }
}

/* HERO */
.usecase-hero {
  height: 100px;
  background: url('your-bg.jpg') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.usecase-hero::after {
    height: 169px;
    max-width: 1500px;
    border-radius: 25px;
    margin: auto;
    content: "";
    position: absolute;
    inset: 0;
        background: linear-gradient(145deg, #0c1b34, #091326);
    /* background: linear-gradient(rgb(14 15 57 / 71%) 0%, rgb(31 31 31 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px); */
}
.usecase-hero-content {
  position: relative;
  z-index: 2;
}

.usecase-hero h1 {
  font-size: 42px;
  margin: 0;
}

.usecase-hero p {
font-size: 1.1rem;
    color: #cccc;
}

/* LIST */
.usecase-accordion {
  padding: 60px 7%;
}

.usecase-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.usecase-header {
  display: flex;
  justify-content: space-between;
  padding: 25px 0;
  font-size: 1.5rem;
}

.usecase-header span {
  margin-right: 10px;
    font-size: 40px;
    color: rgb(86 86 86 / 49%);
    font-weight: bold;
}

/* CONTENT */
.usecase-content {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
}

.usecase-content-inner {
  display: flex;
  gap: 110px;
  padding: 20px 0 40px;
}

/* LEFT IMAGE */
.usecase-image {
  width: 40%;
  height: 250px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
}

/* RIGHT TEXT */
.usecase-text {
  width: 60%;
}

.usecase-text p {
    font-size: 1.4rem;
  color: #cccccc;
}

.usecase-text ul {
    margin-left: 20px;
    margin-top: 10px;
}

.usecase-text li {
     font-size: 1.2rem;
  margin-bottom: 8px;
}

/* ACTIVE */
.usecase-item.active .usecase-content {
  max-height: 500px;
}

.usecase-image.doorcase1{
    background-image:url('../img/solutions/doorcam/doorcase1.webp')
}
.usecase-image.doorcase2{
    background-image:url('../img/solutions/doorcam/doorcase2.webp')
}
.usecase-image.doorcase3{
    background-image:url('../img/solutions/doorcam/doorcase3.webp')
}
.usecase-image.doorcase4{
    background-image:url('../img/solutions/doorcam/doorcase4.webp')
}
/* MOBILE */

@media (max-width: 1024px) {

  .usecase-hero {
    height: 120px;
  }

  .usecase-hero h1 {
    font-size: 32px;
  }

  .usecase-hero p {
    font-size: 1rem;
  }

  .usecase-content-inner {
    gap: 50px;
  }

  .usecase-image {
    width: 45%;
    height: 220px;
  }

  .usecase-text {
    width: 55%;
  }

  .usecase-text p {
    font-size: 1.1rem;
  }

  .usecase-text li {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  .usecase-hero {
    height: 110px;
    padding: 0 16px;
  }

  .usecase-hero h1 {
    font-size: 24px;
  }

  .usecase-hero p {
    font-size: 0.9rem;
  }

  .usecase-accordion {
    padding: 50px 5%;
  }

  .usecase-header {
    font-size: 1.2rem;
    padding: 20px 0;
  }

  .usecase-header span {
    font-size: 26px;
  }

  /* STACK CONTENT */
  .usecase-content-inner {
    flex-direction: column;
    gap: 20px;
  }

  .usecase-image {
    width: 100%;
    height: 200px;
  }

  .usecase-text {
    width: 100%;
  }

  .usecase-text p {
    font-size: 0.95rem;
  }

  .usecase-text li {
    font-size: 0.9rem;
  }

  /* smoother expand */
  .usecase-item.active .usecase-content {
    max-height: 800px;
  }
}

@media (max-width: 640px) {

  .usecase-hero {
    margin-top: 100px;
    height: 100px;
  }

  .usecase-hero h1 {
    font-size: 18px;
    line-height: 1.3;
  }

  .usecase-hero p {
    font-size: 0.8rem;
  }

  .usecase-header {
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .usecase-header span {
    font-size: 20px;
  }

  .usecase-image {
    height: 170px;
    border-radius: 10px;
  }

  .usecase-text p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .usecase-text li {
    font-size: 0.85rem;
  }

  .usecase-content-inner {
    padding: 15px 0 30px;
  }
}
/* SECTION */
.dc-flow-wrapper {
  padding: 180px 7%;
  text-align: center;
}

.dc-flow-title {
  font-size: 3rem;
  margin-bottom: 80px;
}

/* ROW */
.dc-flow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* LINE */
.dc-flow-row::before {
  content: "";
  position: absolute;
  top: 35px;
  left: 8%;
  right: 9%;
  height: 2px;
  background:linear-gradient(to right, #ffffff, #959090);
  opacity: 0.3;
}

/* STEP */
.dc-flow-step {
      opacity: 0;
  transform: translateY(50px);
  width: 23%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ARROW */
.dc-flow-arrow {
        margin-right: 10px;
    font-size: 40px;
    color: rgb(122 120 120 / 58%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
 width: 115px;
    height: 78px;
    background: linear-gradient(rgb(4 32 91) 0%, rgb(31 31 31 / 52%) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);

  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
  margin-bottom: 20px;
  font-weight: bold;
}

/* TITLE */
.dc-flow-step-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* DESC */
.dc-flow-step-desc {
  font-size: 1.2rem;
  color: #cccccc;
  line-height: 1.6;
}

/* HOVER */
.dc-flow-step:hover .dc-flow-arrow {
  transform: scale(1.1);
  transition: 0.3s;
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .dc-flow-wrapper {
    padding: 120px 6%;
  }

  .dc-flow-title {
    font-size: 2.4rem;
    margin-bottom: 60px;
  }

  .dc-flow-step {
    width: 22%;
  }

  .dc-flow-arrow {
    width: 90px;
    height: 65px;
    font-size: 28px;
  }

  .dc-flow-step-title {
    font-size: 1.3rem;
  }

  .dc-flow-step-desc {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  .dc-flow-wrapper {
    padding: 80px 5%;
  }

  .dc-flow-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .dc-flow-row {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }

  /* REMOVE horizontal line */
  .dc-flow-row::before {
    display: none;
  }

  /* ADD vertical line */
  .dc-flow-row::after {
    content: "";
    position: absolute;
    left: 35px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(#ffffff, #959090);
    opacity: 0.3;
  }

  .dc-flow-step {
    width: 100%;
    /* display: flex; */
    align-items: flex-start;
    gap: 15px;
    text-align: left;
    opacity: 1;
    transform: none;
  }

  .dc-flow-arrow {
    width: 70px;
    height: 50px;
    font-size: 20px;
    
    border-radius: 10px;
    flex-shrink: 0;
  }

  .dc-flow-step-title {
            margin-left: 70px;
    font-size: 1.1rem;
  }

  .dc-flow-step-desc {
            margin-left: 70px;
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {

  .dc-flow-wrapper {
    padding: 60px 16px;
  }

  .dc-flow-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .dc-flow-row {
    gap: 30px;
  }

  .dc-flow-row::after {
    left: 27px;
  }

  .dc-flow-arrow {
    width: 70px;
    height: 50px;
    font-size: 18px;
  }

  .dc-flow-step-title {
    font-size: 1rem;
  }

  .dc-flow-step-desc {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

.trust-section {
  padding: 180px 8%;
  background: #050816;
  text-align: center;
  color: #fff;
}

.trust-title {
  font-size: 3rem;
  margin-bottom: 10px;
}

.trust-subtitle {
    font-size: 1.1rem;
  color: #cccc;
  margin-bottom: 60px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* CARD */
.trust-card {
  position: relative;
  height: 335px;
  /* background: #0b0f2a; */
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;
}

/* BIG NUMBER */
.trust-bg-number {
  position: absolute;
  top: 88px;
  left: 20px;
  font-size: 80px;
  font-weight: bold;
  color: rgba(255,255,255,0.05);
  transition: 0.4s;
}

/* ICON */
.trust-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.4s;
}

.trust-icon img {
  width: 100px;
}

/* CONTENT BOX */
.trust-content {
  position: absolute;
    bottom: 32px;
  width: 100%;
  padding: 25px;
     background: linear-gradient(rgb(31 31 31 / 52%) 0%,  rgb(4 32 91) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
  transform: translateY(40px);
  transition: 0.4s;
}

.trust-content h3 {
    font-size: 1.5rem;
  margin-bottom: 10px;
}

.trust-content p {
  font-size: 1.2rem;
  color: #cccccc;
}

/* 🔥 HOVER EFFECT */
.trust-card:hover .trust-content {
    border-radius: 12px;
  transform: translateY(0);
}

.trust-card:hover .trust-bg-number {
  transform: translateY(40px);
  opacity: 0;
}

.trust-card:hover .trust-icon {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1024px) {

  .trust-section {
    padding: 120px 6%;
  }

  .trust-title {
    font-size: 2.4rem;
  }

  .trust-subtitle {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .trust-card {
    height: 300px;
  }

  .trust-content h3 {
    font-size: 1.3rem;
  }

  .trust-content p {
    font-size: 1rem;
  }

  .trust-icon img {
    width: 80px;
  }

  .trust-bg-number {
    font-size: 60px;
  }
}

@media (max-width: 768px) {

  .trust-section {
    padding: 90px 5%;
  }

  .trust-title {
    font-size: 2rem;
  }

  .trust-subtitle {
    font-size: 0.95rem;
  }

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

  .trust-card {
 
    height: auto;
    min-height: 260px;
  }

  /* ALWAYS SHOW CONTENT */
  .trust-content {
    position: relative;
    transform: none;
    bottom: auto;
    padding: 20px;
  }

  /* SHOW ICON ALWAYS */
  .trust-icon {
    opacity: 1;
            margin-right: 26px;
   display: flex;
        /* align-items: center; */
        justify-content: space-around;
    position: relative;
    margin-bottom: 25px;
  }

  /* .trust-bg-number {
    display: none;
  } */

  .trust-icon img {
    width: 60px;
  }

  .trust-content h3 {
    font-size: 1.2rem;
  }

  .trust-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {

  .trust-section {
    padding: 70px 16px;
  }

  .trust-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .trust-subtitle {
    font-size: 0.85rem;
    margin-bottom: 30px;
  }

  .trust-card {
    border-radius: 10px;
  }

  .trust-content {
       border-radius: 12px;
    padding: 18px;
  }

  .trust-content h3 {
    font-size: 1.05rem;
  }

  .trust-content p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .trust-icon img {
    width: 60px;
  }
}




/*********************************access-control-camera***********************************/
.accessx-hero-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* BACKGROUND IMAGE */
.accessx-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/solutions/accesscamera/heroaccess.webp') top/cover no-repeat;
  z-index: 1;
}

/* RIGHT SIDE DARK BLUE SHADE */
.accessx-hero-shade {
  position: absolute;
  inset: 0;
    background: linear-gradient(to right, rgb(2 15 34 / 95%) 25%, rgb(8 18 25 / 18%) 45%, rgb(3 15 34 / 67%) 65%, transparent 85%);
  z-index: 2;
}

/* CONTENT */
.accessx-hero-content {
  position: relative;
  z-index: 3;
  max-width: 550px;
  margin-right: 51%;
  color: #fff;
  text-align: left;
}

/* BADGE */
.accessx-badge {
  display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.6rem;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* HEADING */
.accessx-hero-content h1 {
    font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* PARAGRAPH */
.accessx-hero-content p {
  font-size: 1rem;
  color: #cccc;
  margin-bottom: 30px;
}

/* BUTTONS */
.accessx-cta {
  display: flex;
  gap: 15px;
}


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

/* ----------- 1024px ----------- */
@media (max-width: 1024px) {

  .accessx-hero-content {
    max-width: 500px;
    margin-right: 40%;
  }

  .accessx-hero-content h1 {
    font-size: 2.5rem;
  }

  .accessx-hero-content p {
    font-size: 0.95rem;
  }
}

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

  .accessx-hero-wrap {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .accessx-hero-shade {
    background: linear-gradient(
      to bottom,
      rgb(2 15 34 / 90%) 20%,
      rgb(3 15 34 / 70%) 50%,
      transparent 100%
    );
  }

  .accessx-hero-content {
    margin-top: 45px;
    margin-right: 0;
    max-width: 90%;
    text-align: center;
  }

  .accessx-hero-content h1 {
    font-size: 2.2rem;
  }

  .accessx-hero-content p {
    font-size: 0.9rem;
  }

  .accessx-cta {
            flex-wrap: wrap;
    justify-content: center;
  }
}

/* ----------- 640px ----------- */
@media (max-width: 640px) {

    .accessx-hero-bg {
            background: url(../img/solutions/accesscamera/heroaccess.webp) right center / cover no-repeat;
    }


  .accessx-hero-wrap {
    height: 100vh;
  }

  .accessx-badge {
    font-size: 0.55rem;
    padding: 5px 12px;
  }

  .accessx-hero-content h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .accessx-hero-content p {
    font-size: 0.85rem;
  }

  .accessx-cta {
    /* flex-direction: column; */
    gap: 10px;
  }
}
    

  .sf-wrapper {
    margin: auto;
  
 
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1500px;
    padding: 6px 40px 180px;
  }

  .sf-header {
    text-align: center;
    margin-bottom: 150px;
  }

  .sf-eyebrow {
    font-size: 13px;
    letter-spacing: 2px;
    color: #4fa3ff;
  }

  .sf-eyebrow .sf-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--sf-accent);
    box-shadow: 0 0 8px var(--sf-accent);
    animation: sf-pulse-dot 2s ease-in-out infinite;
  }

  @keyframes sf-pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }

  .sf-title {
  
    font-size: 3rem;
    font-weight: 500;
    color: var(#e8f4f0);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
.sf-subtitle{
    color: #cccccc;
    font-size: 1.2rem;

}
  .sf-title .sf-accent {
    background: linear-gradient(90deg, #4fa3ff, var(--sf-accent));
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
  }

  .sf-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
  }

  .sf-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .sf-col:nth-child(odd)  { padding-top: 0; }
  .sf-col:nth-child(even) { padding-top: 90px; }

  .sf-connector {
    flex: 0 0 var(80px);
    height: var(160px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .sf-connector::before {
           content: '';
    position: absolute;
    left: 36%;
    width: calc(100% + 150px);
    height: 78px;
    transform: translateX(-50%);
    border: 2px dashed rgba(79, 163, 255, 0.75);
    border-left: 0;
    border-right: 0;
    pointer-events: none;
  }

  .sf-connector::after {
        content: '';
    position: absolute;
    right: -81px;
    width: 13px;
    height: 12px;
    border-top: 2px solid #4fa3ff;
    border-right: 2px solid #4fa3ff;
    border-radius: 2px;
    transform: rotate(-37deg);
    box-shadow: 0 0 10px var(rgba(41, 98, 255, 0.28));
    pointer-events: none;
  }

  .sf-connector-up::before {
           top: -74px;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

  .sf-connector-up::after {
    top: -16px;
    transform: rotate(130deg);
  }

  .sf-connector-down::before {
             top: 280px;
    border-top: 0;
    border-radius: 0 0 999px 999px;
  }

  .sf-connector-down::after {
          top: 296px;
    transform: rotate(-45deg);
  }

  .sf-card {
    position: relative;
    width: 100%;
    max-width: 260px;
       background: linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 28px 22px 24px;
    border: 1px solid transparent;
    background-clip: padding-box;

    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
    animation: sf-fadeUp 0.7s ease both;
  }

  .sf-col:nth-child(1) .sf-card  { animation-delay: 0.1s; }
  .sf-col:nth-child(3) .sf-card  { animation-delay: 0.25s; }
  .sf-col:nth-child(5) .sf-card  { animation-delay: 0.4s; }
  .sf-col:nth-child(7) .sf-card  { animation-delay: 0.55s; }
  .sf-col:nth-child(9) .sf-card  { animation-delay: 0.7s; }

  @keyframes sf-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 0%, rgba(79,163,255,0.12) 0%, transparent 65%);
    pointer-events: none;
  }

  .sf-card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 0 0 1px rgba(79,163,255,0.5),
      0 0 28px rgba(79,163,255,0.18),
      0 16px 48px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  
  .sf-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    
  }

  .sf-icon img { width: 60px; height: 60px; }

  .sf-card-title {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    z-index: 1;
  }

  .sf-card-title::before {
  content: "";
    position: absolute;
    left: 71px;
    right: -146px;
    top: 50%;
    height: 1px;
    background: #134ea4;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.95;
  }

  
  .sf-card-subtittle{
      font-size: 1.2rem;
   
    color: #cccccc;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }

  .sf-line { height: 3px; border-radius: 4px; background: rgba(200,220,210,0.1); margin-bottom: 6px; }
  .sf-line.sf-w-full { width: 100%; }
  .sf-line.sf-w-75   { width: 75%; }
  .sf-line.sf-w-50   { width: 50%; }

  .sf-card-num {
    position: absolute;
    bottom: 14px; right: 16px;
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: rgba(79,163,255,0.08);
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
  }

  .sf-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 52px;
  }

  .sf-dot-item {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(79,163,255,0.25);
    transition: background 0.3s;
  }

  .sf-dot-item.sf-active {
    background: var(--sf-accent);
    box-shadow: 0 0 8px var(--sf-accent);
  }

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

  .sf-wrapper {
    padding: 6px 20px 140px;
  }

  .sf-title {
    font-size: 2.5rem;
  }

  .sf-subtitle {
    font-size: 1.05rem;
  }

  .sf-track {
    gap: 20px;
  }

  .sf-card {
    max-width: 230px;
    padding: 24px 18px;
  }

  .sf-card-title {
    font-size: 1.3rem;
  }

  .sf-card-subtittle {
    font-size: 1.05rem;
  }
}

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

  .sf-header {
    margin-bottom: 80px;
  }

  .sf-title {
    font-size: 2rem;
  }

  .sf-subtitle {
    font-size: 1rem;
  }

  .sf-track {
    flex-direction: column;
    align-items: center;
  }

  .sf-col {
    width: 100%;
    padding-top: 0 !important;
  }

  .sf-connector {
    display: none;
  }

  .sf-card {
    max-width: 90%;
    margin-bottom: 25px;
  }

  .sf-card-title::before {
    display: none;
  }

  .sf-icon img {
    width: 50px;
    height: 50px;
  }
}

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

  .sf-wrapper {
    padding: 6px 15px 100px;
  }

  .sf-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .sf-subtitle {
    font-size: 0.9rem;
  }

  .sf-card {
    padding: 20px 15px;
    border-radius: 16px;
  }

  .sf-card-title {
    font-size: 1.2rem;
  }

  .sf-card-subtittle {
    font-size: 0.95rem;
  }

  .sf-icon img {
    width: 42px;
    height: 42px;
  }

  .sf-dots {
    margin-top: 30px;
  }
}

     /* Section */
    .ac-section {
      padding: 150px 10%;
      min-height: 100vh;
    }

    /* Top */
    .ac-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 80px;
      flex-wrap: wrap;
      gap: 20px;
    }

    .ac-title {
      font-size: 3rem;
      line-height: 1.2;
    }

    .ac-tag {
         font-size: 13px;
    letter-spacing: 2px;
    color: #4fa3ff;
    }
    .ac-left{
        max-width: 1000px;
    }

    .ac-right {
      max-width: 400px;
      color: #cccccc;
      font-size: 1.1rem;
      line-height: 1.6;
    }

    /* Cards */
    .ac-cards {
      position: relative;
      height: 350px;
    }

    .ac-card {
          background: linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
       width: 340px;
    height: 420px;
    /* background: linear-gradient(145deg, #0b1220, #020617); */
    border-radius: 20px;
    padding: 30px;
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); */
    transition: 0.3s;
    }

    .ac-card:hover {
      transform: translateX(-50%) scale(0.9);
    }

    .ac-icon {
      width: 60px;
      height: 110px;
      
      border-radius: 50%;
      margin-bottom: 30px;
    }

    .ac-icon img {
        width: 150px;
    }

    .ac-line {
      height: 3px;
      width: 100%;
      background: rgb(20 37 68);
      margin: 20px 0;
    }

    .ac-card h3 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

    .ac-card p {
      font-size: 1.1rem;
      color: #cccccc;
    }

    /* Responsive */
   /* ===============================
   1024px
================================= */
@media (max-width: 1024px) {

  .ac-section {
    padding: 120px 6%;
  }

  .ac-title {
    font-size: 2.5rem;
  }

  .ac-left {
    max-width: 700px;
  }

  .ac-right {
    max-width: 320px;
    font-size: 1rem;
  }

  .ac-card {
    width: 300px;
    height: 380px;
    padding: 25px;
  }

  .ac-icon img {
    width: 120px;
  }
}

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

  .ac-section {
    padding: 100px 5%;
  }

  .ac-top {
    text-align: center;
    flex-direction: column;
    align-items: flex-start;
  }

  .ac-title {
    font-size: 2.2rem;
  }

  .ac-right {
    max-width: 100%;
    font-size: 0.95rem;
  }

  .ac-cards {
    height: auto;
  }

  .ac-card {
     margin-left: -45%;
    transition: none !important;
    transform: none !important;
    position: relative;
    left: 0;
    transform: none;
    margin: 0 -300px 25px;
    width: 90%;
    height: auto;
  }

  .ac-card:hover {
    transform: scale(1.03);
  }

  .ac-icon img {
    width: 140px;
  }
}

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

  .ac-section {
    padding: 80px 4%;
  }

  .ac-title {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .ac-tag {
    font-size: 14px;
  }

  .ac-right {
    font-size: 0.9rem;
  }

  .ac-card {
            margin-left: -45%;
    transition: none !important;
    transform: none !important;
    padding: 20px;
    border-radius: 16px;
  }

  .ac-card h3 {
    font-size: 1.3rem;
  }

  .ac-card p {
    font-size: 0.95rem;
  }

  .ac-icon img {
    width: 145px;
  }
}




/* SECTION */
.sec-industries {
    padding: 120px 6%;
    text-align: center;
}

/* TITLE */
.sec-head-tag {
   font-size: 13px;
    letter-spacing: 2px;
    color: #4fa3ff;
}

.sec-main-title {
    font-size: 3rem;
    max-width: 1210px;
    margin: auto;
    line-height: 1.3;
}

.sec-sub-text {
    font-size: 1.1rem;
    margin-top: 20px;
    color: #cccccc;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* GRID */
.industry-flex-wrap {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

/* CARD */
.industry-card-pro {
    transform-origin: center;
    transform-style: preserve-3d;
        background: linear-gradient(rgb(17 33 71 / 52%) 0%, rgba(15, 15, 15, 0.71) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 29px -18px inset, rgba(0, 0, 0, 0.55) 0px 30px 70px 41px;
    backdrop-filter: blur(15px);
    /* background: #0d0e11; */
    border: 1px solid #ffffff14;
    border-radius: 16px;

   width: 370px;
    height: 455px;

    margin-right: -120px;
    position: relative;
    overflow: hidden;

    transition: all 0.5s ease;

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

    transform: perspective(1200px) rotateY(45deg);
}

/* STACK ORDER */
.industry-card-pro:nth-child(1){ z-index:1; }
.industry-card-pro:nth-child(2){ z-index:2; }
.industry-card-pro:nth-child(3){ z-index:5; }
.industry-card-pro:nth-child(4){ z-index:6; }
.industry-card-pro:nth-child(5){ z-index:7; }

/* HOVER */
.industry-card-pro:hover {
    transform: perspective(1200px) rotate(0deg) scale(1.08);
    z-index: 10;
}

/* DEFAULT CONTENT */
.industry-basic-view {
    text-align: center;
    transition: 0.4s;
}

.industry-basic-view img {
    width: 75px;
    margin-bottom: 12px;
}

.industry-basic-view h3 {
    font-weight: 400;
}

/* BG IMAGE */
.industry-card-pro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: 0.5s;
}

/* OVERLAY */
.industry-card-pro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    opacity: 0;
    transition: 0.5s;
}

/* HOVER CONTENT */
.industry-hover-view {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 20px;
    opacity: 0;
    text-align: left;
    transition: 0.5s;
}

.industry-hover-view h3 {
    margin: 0;
}

.industry-hover-view p {
    font-size: 0.85rem;
    color: #ccc;
    margin-top: 5px;
}

/* HOVER EFFECT */
.industry-card-pro:hover::before,
.industry-card-pro:hover::after {
    opacity: 1;
}

.industry-card-pro:hover .industry-basic-view {
    opacity: 0;
}

.industry-card-pro:hover .industry-hover-view {
    z-index: 2;
    opacity: 1;
}

/* BACKGROUND IMAGES */
.ind-bg-1::before { background-image: url('../img/solutions/accesscamera/ind1.webp'); }
.ind-bg-2::before { background-image: url('../img/solutions/accesscamera/ind2.webp'); }
.ind-bg-3::before { background-image: url('../img/solutions/accesscamera/ind3.webp'); }
.ind-bg-4::before { background-image: url('../img/solutions/accesscamera/ind5.webp'); }
.ind-bg-5::before { background-image: url('../img/solutions/accesscamera/ind4.webp'); }

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

  .sec-main-title {
    font-size: 2.5rem;
  }

  .sec-sub-text {
    font-size: 1rem;
  }

  .industry-card-pro {
    width: 300px;
    height: 400px;
    margin-right: -80px;
    transform: perspective(1200px) rotateY(35deg);
  }
}

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

  .sec-industries {
    padding: 90px 5%;
  }

  .sec-main-title {
    font-size: 2rem;
  }

  .sec-sub-text {
    font-size: 0.95rem;
  }

  .industry-flex-wrap {
    flex-wrap: wrap;
    gap: 20px;
  }

  .industry-card-pro {
    width: 90%;
    height: 350px;
    margin-right: 0;
    transform: none;
    transition: none;
  }

  .industry-card-pro:hover {
    transform: none;
  }

  /* ALWAYS SHOW CONTENT (no hover dependency) */
  .industry-basic-view {
    opacity: 1 !important;
  }

  .industry-hover-view {
    z-index: 2;
    opacity: 1;
    position: absolute;
    bottom: 20px;
  }

  .industry-card-pro::before,
  .industry-card-pro::after {
    opacity: 1;
  }
}

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

  .sec-industries {
    padding: 70px 4%;
  }

  .sec-head-tag {
    font-size: 0.7rem;
  }

  .sec-main-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .sec-sub-text {
    font-size: 0.9rem;
  }

  .industry-card-pro {
    height: 320px;
    border-radius: 12px;
    padding: 10px;
  }

  .industry-basic-view img {
    width: 60px;
  }

  .industry-hover-view h3 {
    font-size: 1.1rem;
  }

  .industry-hover-view p {
    font-size: 0.8rem;
  }
}



/***********************************vision-SDK*************************************/

/* HERO */
.vsdk-hero-sec{
  height:100vh;
  display:flex;
  flex-direction:column;
      /* justify-content: flex-end; */
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(1200px 480px at 50% 0%, rgba(16, 66, 138, 0.38) 0%, rgba(4, 8, 19, 0) 70%),
    #040813;
}

.vsdk-hero-sec > :not(.vsdk-hero-bg){
  position:relative;
  z-index:2;
}

.vsdk-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.vsdk-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
     background-image: linear-gradient(rgb(158 158 158 / 15%) 1px, transparent 1px), linear-gradient(90deg, rgb(243 243 243 / 15%) 1px, transparent 1px), linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(220 220 220 / 8%) 1px, #00000000 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position: center center;
  opacity:0.55;
  mask-image: radial-gradient(circle at 50% 44%, #000 20%, transparent 82%);
}



/* TEXT */
.vsdk-tag-text{
    font-size: 12px;
    letter-spacing: 2px;
    color: #4fa3ff;
}

.vsdk-main-title{
  font-size:3rem;
  color: #fff;
  margin-bottom: 10px;
}

.vsdk-sub-text{
  opacity:0.6;
 
}

/* VIDEO */
.vsdk-video-box{
  width:min(1000px, 62vw);
  margin:20px auto 0;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  will-change:width, transform;
}
.vsdk-video-el{
  width:100%;
  border-radius:20px;
  display:block;
  transform-origin:center center;
  will-change:transform, border-radius;
}


/* =========================
   1024px (Tablet Landscape)
========================= */
@media (max-width:1024px){
    .vsdk-hero-sec{
        justify-content: center;
    }

  .vsdk-main-title{
    font-size:2.4rem;
  }

  .vsdk-video-box{
    width:min(720px, 80vw);
  }

  .vsdk-problem-sec{
    padding:80px 5%;
  }

}


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

  .vsdk-hero-sec{
    height:auto;
    min-height:auto;
    padding:100px 20px 48px;
    justify-content:center;
  }

  .vsdk-hero-sec > :not(.vsdk-hero-bg){
    width:100%;
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
  }

  .vsdk-tag-text{
    font-size:11px;
    letter-spacing:1.5px;
  }

  .vsdk-main-title{
    font-size:2rem;
  }

  .vsdk-sub-text{
    font-size:14px;
  }

  .vsdk-video-box{
    width:min(100%, 680px);
    margin-top:20px;
    border-radius:16px;
  }

  .vsdk-video-el{
    border-radius:16px;
  }

  .vsdk-next-sec{
    height:auto;
    padding:80px 20px;
  }

  .vsdk-problem-sec{
    padding:70px 20px;
  }

}


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

  .vsdk-hero-sec{
    padding:90px 16px 32px;
  }

  .vsdk-main-title{
    font-size:1.6rem;
    line-height:1.3;
  }

  .vsdk-sub-text{
    font-size:13px;
    opacity:0.7;
  }

  .vsdk-tag-text{
    font-size:10px;
    letter-spacing:1px;
  }

  .vsdk-video-box{
    width:100%;
    margin-top:15px;
    border-radius:12px;
  }

  .vsdk-video-el{
    border-radius:12px;
  }

  .vsdk-problem-sec{
    padding:60px 15px;
  }

}

/* SECTION */

.vsdk-problem-sec{
    margin-top: 0;
  background:#0b1220;
  padding:100px 6%;
  border-bottom:1px solid rgba(255,255,255,0.1); /* bottom line */
}
/* TOP */
.vsdk-problem-top{
  max-width:1000px;
  margin-bottom:60px;
}

.vsdk-problem-title{
  font-size:2.8rem;
  line-height:1.3;
}

/* GRID */
.vsdk-problem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.1);
}

/* CARD */
.vsdk-problem-card{
  padding:40px 30px;
  border-right:1px solid rgba(255,255,255,0.1);
}

.vsdk-problem-card:last-child{
  border-right:none;
}

/* ICON */
.vsdk-icon{
  width:50px;
  margin-bottom:20px;
}

/* TEXT */
.vsdk-problem-card h3{
  font-size:1.3rem;
  margin-bottom:10px;
}

.vsdk-problem-card p{
  opacity:0.7;
  line-height:1.6;
  font-size:1rem;
  color: #ccc;
}

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

  .vsdk-problem-sec{
    padding:80px 5%;
  }

  .vsdk-problem-title{
    font-size:2.2rem;
  }

  .vsdk-problem-grid{
    grid-template-columns:repeat(2,1fr); /* 4 → 2 */
  }

  .vsdk-problem-card{
    padding:30px 25px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }

  .vsdk-problem-card:nth-child(2n){
    border-right:none;
  }

}


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

  .vsdk-problem-sec{
    padding:70px 20px;
  }

  .vsdk-problem-top{
    margin-bottom:40px;
  }

  .vsdk-problem-title{
    font-size:1.9rem;
  }

  .vsdk-problem-grid{
    grid-template-columns:1fr; /* single column */
  }

  .vsdk-problem-card{
    padding:25px 20px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }

  .vsdk-icon{
    width:40px;
  }

  .vsdk-problem-card h3{
    font-size:1.1rem;
  }

  .vsdk-problem-card p{
    font-size:0.95rem;
  }

}


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

  .vsdk-problem-sec{
    padding:60px 15px;
  }

  .vsdk-problem-top{
    margin-bottom:30px;
  }

  .vsdk-problem-title{
    font-size:1.6rem;
    line-height:1.4;
  }

  .vsdk-problem-card{
    padding:20px 15px;
  }

  .vsdk-icon{
    width:34px;
    margin-bottom:15px;
  }

  .vsdk-problem-card h3{
    font-size:1rem;
  }

  .vsdk-problem-card p{
    font-size:0.9rem;
    line-height:1.5;
  }

}
/* SECTION */
.vsdk-solution-sec{
  background:#050810;
  padding:120px 6%;
  color:#fff;
}

.vsdk-sol-top{
  display:flex;
  flex-direction: column;
  justify-content:space-between;
  margin-bottom:290px;
  align-items:flex-start;
  gap:40px;
}

.vsdk-sol-tag{
      width:30%;
 font-size: 12px;
    letter-spacing: 2px;
    color: #4fa3ff;
}

.vsdk-sol-sub{
      width:50%;
color: #ccc;
  max-width:400px;
}

/* MAIN */
.vsdk-sol-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* LEFT */
.vsdk-sol-left{
  width:35%;
}

.vsdk-step{
  font-size:4rem;
  opacity:0.2;
}

.vsdk-step-title{
  font-size:2rem;
  margin-top:10px;
}

/* RIGHT */
.vsdk-sol-right{
  width:60%;
}

/* LINES */
.vsdk-lines{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.vsdk-line{
  height:6px;
  flex:1;
  background:#333;
  border-radius:10px;
  overflow:hidden;
  position:relative;
}

.vsdk-line::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:linear-gradient(135deg, #0072ff, #0d2145);
  transform:scaleX(0);        /* start empty */
  transform-origin:left;      /* left thi fill */
}

.fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:linear-gradient(135deg, #0072ff, #0d2145);
  transform:scaleX(0);
  transform-origin:left;
}

.vsdk-line.active{
  background:linear-gradient(135deg, #0072ff, #0d2145);
}

/* IMAGE */
.vsdk-sol-img{
  width:100%;
  border-radius:15px;
  margin-bottom:15px;
}

/* TEXT */
.vsdk-sol-desc{
  opacity:0.7;
  line-height:1.6;
}

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

  .vsdk-solution-sec{
    padding:100px 5%;
  }

  .vsdk-sol-top{
    margin-bottom:120px; /* 290 → control */
  }

  .vsdk-sol-tag{
    width:35%;
  }

  .vsdk-sol-sub{
    width:55%;
  }

  .vsdk-sol-left{
    width:40%;
  }

  .vsdk-sol-right{
    width:55%;
  }

  .vsdk-step{
    font-size:3rem;
  }

  .vsdk-step-title{
    font-size:1.6rem;
  }

}


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

  .vsdk-solution-sec{
    padding:80px 20px;
  }

  /* TOP STACK */
  .vsdk-sol-top{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
    margin-bottom:60px;
  }

  .vsdk-sol-tag,
  .vsdk-sol-sub{
    width:100%;
    max-width:680px;
  }

  /* MAIN STACK */
  .vsdk-sol-main{
    flex-direction:column;
    align-items:center;
    gap:0px;
  }

  .vsdk-sol-left,
  .vsdk-sol-right{
    width:100%;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .vsdk-step{
    font-size:2.5rem;
  }

  .vsdk-step-title{
    font-size:1.4rem;
  }

  .vsdk-sol-desc{
    font-size:0.95rem;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
  }

  .vsdk-lines{
    justify-content:center;
  }

  .vsdk-line{
    max-width:140px;
  }

}


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

  .vsdk-solution-sec{
    padding:70px 16px;
  }

  .vsdk-sol-top{
    margin-bottom:-18px;
  }

  .vsdk-step{
    font-size:2rem;
  }

  .vsdk-step-title{
    font-size:1.2rem;
  }

  .vsdk-sol-desc{
    font-size:0.9rem;
    line-height:1.5;
  }

  .vsdk-lines{
    gap:6px;
    flex-wrap:wrap;
  }

  .vsdk-line{
    height:5px;
    max-width:72px;
  }

  .vsdk-sol-img{
    border-radius:10px;
  }

}

/* SECTION */
.vx-section {
  padding:100px 6%;
  /* background:#f5f5f5; */
}

/* TAG */
.vx-tag {
    text-align: center;
  font-size: 12px;
    letter-spacing: 2px;
    color: #4fa3ff;
}

/* TITLE */
.vx-title {
  margin: auto;
    text-align: center;
    font-size: 3rem;
    max-width: 897px;
    margin-bottom: 30px;
}

/* GRID */
.vx-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  gap:25px;
}

/* CARD */
.vx-card {
  cursor:pointer;
  display:flex;
  flex-direction:column;
  height:100%;
  gap:0;
  min-height:0;
}
.vx-img-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.27);
    z-index: 1;
    pointer-events: none;
}

/* IMAGE BOX */
.vx-img-box {
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  border-radius:16px;
  overflow:hidden;
}

/* IMAGE */
.vx-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.2);
  transition:0.6s ease;
}

/* HOVER ZOOM OUT */
.vx-card:hover img{
  transform:scale(1);
}

/* OVERLAY */
.vx-overlay{
    z-index: 2;
  position:absolute;
  bottom:0;
  width:100%;
  padding:18px;
  background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.16) 70%, transparent);
  transition:background 0.35s ease, box-shadow 0.35s ease;
}

.vx-overlay h3{
  color:#fff;
  font-size:1.35rem;
  line-height:1.2;
  margin:0;
}

/* DESCRIPTION */
.vx-desc{
  margin-top:0;
  font-size:0.95rem;
  line-height:1.45;
  color:#dce9ff;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease, margin-top 0.35s ease;
}

.vx-card:hover .vx-overlay{
  background:linear-gradient(to top, rgb(3 5 11 / 92%), rgb(19 19 20) 62%, rgba(0, 0, 0, 0.08) 100%);

}

.vx-card:hover .vx-desc{
    color: #ccc;
  margin-top:10px;
  max-height:90px;
  opacity:1;
  transform:translateY(0);
}

/* SIZE VARIATIONS */
.vx-square {
  grid-row: span 2;
}

.vx-rectangle {
  grid-row: span 3;
}

/* RESPONSIVE */
/* =========================
   1024px (Tablet Landscape)
========================= */
@media (max-width:1024px){

  .vx-section{
    padding:80px 5%;
  }

  .vx-title{
    font-size:2.4rem;
  }

  .vx-grid{
    grid-template-columns:repeat(2, 1fr); /* 3 → 2 */
    grid-auto-rows:140px;
    gap:20px;
  }

}


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

  .vx-section{
    padding:70px 20px;
  }

  .vx-title{
    font-size:2rem;
    margin-bottom:25px;
  }

  .vx-grid{
    grid-template-columns:1fr; /* single column */
    grid-auto-rows:auto; /* important */
  }

  /* remove span for clean stacking */
  .vx-square,
  .vx-rectangle{
    grid-row: span 1;
  }

  .vx-img-box{
    height:220px; /* fixed height for mobile */
  }

  .vx-overlay h3{
    font-size:1.2rem;
  }

  .vx-desc{
    font-size:0.9rem;
  }

}


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

  .vx-section{
    padding:60px 15px;
  }

  .vx-tag{
    font-size:10px;
    letter-spacing:1px;
  }

  .vx-title{
    font-size:1.6rem;
    line-height:1.3;
  }

  .vx-img-box{
    height:200px;
    border-radius:12px;
  }

  .vx-overlay{
    padding:14px;
  }

  .vx-overlay h3{
    font-size:1.05rem;
  }

  .vx-desc{
    font-size:0.85rem;
    line-height:1.4;
  }

}


/* SECTION */
.why-section{
  background:#0b1120;
  color:#fff;
  padding:140px 8%;
  text-align:center;
}

/* TAG */
.why-tag{
   text-align: center;
  font-size: 12px;
    letter-spacing: 2px;
    color: #4fa3ff;
}

/* TITLE */
.why-title{
  font-size:3rem;
  margin-bottom:70px;
  font-weight:500;
}

/* GRID */
.why-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:35px;
}

/* ITEM */
.why-item{
  text-align:center;
  padding:10px;
  transition:0.3s;
}

/* ICON */

 .vsdkwhy-icon img {
            width: 100px;
            height: 100px;
} 

/* TITLE */
.why-item-title{
  font-size:1.3rem;
  margin-bottom:12px;
  font-weight:600;
}

/* LINE */
.why-line{
  width:60px;
  height:3px;
  margin:10px auto 15px;
  background:linear-gradient(135deg, #0072ff, #0d2145);
  transition:0.3s;
}

/* TEXT */
.why-text{
  font-size:1rem;
  color:#cccccc;
  line-height:1.6;
}

/* HOVER EFFECT */
.why-item:hover .why-line{
  width:100px;
}

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

/* RESPONSIVE */
/* =========================
   1024px (Tablet Landscape)
========================= */
@media (max-width:1024px){

  .why-section{
    padding:110px 6%;
  }

  .why-title{
    font-size:2.4rem;
    margin-bottom:50px;
  }

  .why-grid{
    gap:25px;
  }

  .why-item-title{
    font-size:1.2rem;
  }

}


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

  .why-section{
    padding:90px 20px;
  }

  .why-title{
    font-size:2rem;
    margin-bottom:40px;
  }

  .why-grid{
    gap:20px;
  }

  .why-item{
    padding:5px;
  }

  .why-text{
    font-size:0.95rem;
  }

}


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

  .why-section{
    padding:70px 15px;
  }

  .why-tag{
    font-size:10px;
    letter-spacing:1px;
  }

  .why-title{
    font-size:1.6rem;
    line-height:1.3;
    margin-bottom:30px;
  }

  .why-grid{
    gap:18px;
  }

  .why-item-title{
    font-size:1.05rem;
  }

  .why-text{
    font-size:0.9rem;
    line-height:1.5;
  }

  .why-line{
    width:50px;
  }

}

@media (max-width:1024px){

  .vsdk-problem-top,
  .vsdk-problem-grid,
  .vsdk-sol-top,
  .vsdk-sol-main,
  .vx-grid,
  .why-grid{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }
}