/* Improved Light Theme */
            :root.light-theme {
                --bg-dark: #ffffff;
                --bg-light: #f5f7fa;
                --bg-darker: #eef1f5;
                --card-bg: #ffffffa1;
                --card-border:  rgba(97, 192, 255, 0.712);
                --primary: #003366;
                --primary-light: #0066cc;
                --accent: #0099cc;
                --text: #1a1a1a;
                --text-muted: #4d4d4d;
                --success: #008f6a;
                --dark-card: #ffffff;
                --toggle-btn: #3d3d3d;
                --toggle-bg: #c0c0c0;
                --bg-footer: #ffffff;
                --ol-btn:#b4daff;
                --wf:#00c6e9;
                --wp_modal:#eef1f5;
                --badge-bg: rgba(0,180,216,0.12);
                --eco-card-bg:rgb(0 62 80 / 27%);
                --eco-card-border:1px solid rgb(2 91 149 / 50%);
            }

            /* Ensure body background changes with theme */
            :root.light-theme body {
                background-color: var(--bg-dark) !important;
                color: var(--text) !important;
                background-image: 
                    radial-gradient(circle at 15% 50%, rgba(100, 108, 255, 0.05) 0%, transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(0, 209, 178, 0.05) 0%, transparent 25%) !important;
            }

            /* Light theme specific adjustments */
            
            :root.light-theme .navbar {
                background: rgba(255, 255, 255, 0.95) !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            }

            :root.light-theme .nav-link {
                color: #666666;
            }

            :root.light-theme .nav-link:hover,
            :root.light-theme .nav-link.active {
                color: var(--primary) !important;
                background: rgba(0, 102, 204, 0.1);
            }

            :root.light-theme .navbar-brand {
                color: var(--text) !important;
            }

            :root.light-theme .text-muted {
                color: #2b2b2b !important;
            }
            :root.light-theme .text-desc {
                color: #2b2b2b !important;
                font-weight:400;
            }

            :root.light-theme .card {
                color: var(--text) !important;

            }
            

            :root.light-theme .card li {
                color: #2b2b2b !important;
            }

            :root.light-theme .hero-title {
                background: linear-gradient(to right, var(--primary), var(--primary-light)) !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
            }

            :root.light-theme .hero-subtitle {
                color: var(--text-muted) !important;
            }

            :root.light-theme .footer {
                background: var(--bg-footer) !important;
                border-top: 1px solid rgba(0, 0, 0, 0.08);
            }

            :root.light-theme .copyright {
                border-top: 1px solid rgba(0, 0, 0, 0.08);
            }

            :root.light-theme .btn-outline {
                color: var(--text) !important;
                border: 2px solid var(--ol-btn);
            }

            :root.light-theme .btn-outline:hover {
                background: rgba(0, 102, 204, 0.1) !important;
                color: var(--text) !important;
            }
            .light-theme body {
                background-color: var(--bg-dark);
                color: var(--text);
            }

            /* Smooth transitions for all theme-able elements */
            body,
            .navbar,
            .card,
            .btn,
            .footer,
            .hero-title,
            .hero-subtitle,
            .text-muted {
                transition: all 0.3s ease;
            }
        :root {
            --bg-dark: #001021;
            --bg-light: #d0e7ff;
            --bg-darker: #05060d;
            --card-bg: rgba(17, 22, 44, 0.274);
            --card-border:  rgba(97, 192, 255, 0.712);
            --primary: #c0e6ff;
            --primary-light: #0dcaf0;
            --accent: #00c6e9;
            --text: #ffffff;
            --text-muted: #b3bacf;
            --success: #00c9a7;
            --dark-card: #1e293b;
            --toggle-btn: #60676d;
            --toggle-bg: #000000;
            --card-bg-light: rgba(255, 255, 255, 0.274);
             --ol-btn:#7ebfff;
             --wf:#00c6e9;
             --wp_modal:#353750;
             --badge-bg: rgba(0,180,216,0.12);
             --eco-card-bg:rgb(0 62 80 / 27%);
             --eco-card-border:1px solid rgb(2 91 149 / 50%);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
		
        
        body {
            font-family: "Ubuntu", sans-serif;
            background-color: var(--bg-dark);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.6;
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(100, 108, 255, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(0, 209, 178, 0.1) 0%, transparent 25%);
            background-attachment: fixed;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: "Ubuntu", sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        p{
            font-weight: 100;

        }
        .desc-txt {
            color: var(--text);
            margin-bottom: 0px;
        }
        .text-nav {
            color: var(--accent) !important;
            }

        .bg-dark{
            -background-color: var(--bg-dark) !important;
        }
        .text-justify{
            text-align: justify;
        }
        .text-gradient {
            background: linear-gradient(to right, var(--primary-light), var(--primary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
		.ubuntu-light {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 300;
		  font-style: normal;
		}

		.ubuntu-regular {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 400;
		  font-style: normal;
		}

		.ubuntu-medium {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 500;
		  font-style: normal;
		}

		.ubuntu-bold {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 700;
		  font-style: normal;
		}

		.ubuntu-light-italic {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 300;
		  font-style: italic;
		}

		.ubuntu-regular-italic {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 400;
		  font-style: italic;
		}

		.ubuntu-medium-italic {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 500;
		  font-style: italic;
		}

		.ubuntu-bold-italic {
		  font-family: "Ubuntu", sans-serif;
		  font-weight: 700;
		  font-style: italic;
		}

       
        .navbar {
            background: rgba(10, 12, 23, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 2px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: all 0.4s ease;
            top:0px;
        }
        
        .navbar-brand {
            color: var(--text) !important;
            font-weight: 700;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .navbar-brand span {
            color: var(--primary);
        }
        .light-theme .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }
        .light-theme .navbar-toggler {   
                border: 2px solid var(--toggle-btn) !important;
                border-radius: 8px;
            }    
        
        .nav-link {
            color:var(--primary);
            font-weight: 400;
            margin: 0 2px;
            position: relative;
            transition: all 0.3s ease;
            padding: 0px 12px !important;
            border-radius: 50px;
        }
           .light-theme.nav-link {
            color:var(--primary);
            font-weight: 400;
            margin: 0 2px;
            position: relative;
            transition: all 0.3s ease;
            padding: 0px 12px !important;
            border-radius: 50px;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--text) !important;
            background: rgba(100, 108, 255, 0.1);
        }
        
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: var(--primary);
            border-radius: 50%;
        }
        
        .btn-primary {
            background: var(--primary);
            border: none;
            border-radius: 50px;
            padding: 12px 28px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary:hover {
            background: var(--primary-light);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(100, 108, 255, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--text);
            border: 2px solid var(--ol-btn) !important;
            border-radius: 50px;
            padding: 12px 28px;
            font-weight: 400;
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background: rgba(0, 183, 255, 0.637);
            box-shadow: 0 5px 10px rgba(0, 183, 255, 0.637);
            border: 2px solid var(--primary);
             transform: translateY(-1px);
        }
        .cta-button {
            background: var(--primary);
            color: #121925;
            padding: 0.8rem 1.8rem;
            border-radius: 30px;
            font-weight: 400;
            text-decoration: none;            
            border: 2px solid var(--primary);
        }
        
        .cta-button:hover {
            background: transparent;
            transform: translateY(-1px);
            box-shadow: 0 5px 10px rgba(0, 183, 255, 0.637);
            border: 2px solid var(--primary);
        }
        .light-theme .cta-button {
            background: var(--primary);
            color: #eef4ff;
            padding: 0.8rem 1.8rem;
            border-radius: 30px;
            font-weight: 400;
            text-decoration: none;            
            border: 2px solid var(--primary);
        }
        
        .light-theme .cta-button:hover {
            background: transparent;
            transform: translateY(-1px);
            box-shadow: 0 5px 10px rgba(0, 183, 255, 0.637);
            border: 2px solid var(--ol-btn) !important;
        }
        .section {
            padding: 60px 0;
            -position: relative;
            background: radial-gradient(
            63% 100% at 50% 0%,
            rgba(0, 2, 15, 0) 0%,
            rgba(0, 0, 0, 1) 75%
            );
        }
        /* Light Theme Version */
        .light-theme .section {
            background: radial-gradient(63% 100% at 50% 0%, #ffffff00 0%, #dcf0ffcc 75%);
        }   
        .hero-section {
            padding-top: 180px;
            padding-bottom: 100px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        .hero-section-sm {
            padding-top: 54px;
            padding-bottom: 50px;
            min-height: 30vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(to right, #fff 0%, var(--text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            align-items: center;
        }
        .hero-title-sm {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 30px;
            background: linear-gradient(to right, #fff 30%, var(--text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        .light-theme .hero-title-sm {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 30px;
            background: linear-gradient(to right, #0d6efd 30%, var(--text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        
        .hero-subtitle {
            color: var(--text-muted);
            font-size: 1.3rem;
            max-width: 600px;
            margin-bottom: 40px;
        }
        .hero-subtitle-sm {
            color: var(--text-muted);
            font-size: 1.5rem;
            font-weight: 800;
            max-width: 600px;
            margin-bottom: 40px;
            text-align: center;
        }
        
        .hero-highlight {
            color: #00d1b2 !important;
        }
        
        .hero-highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: rgba(0, 209, 178, 0.2);
            z-index: -1;
            border-radius: 4px;
        }

        /* ---------------------------------- */
        /* DARK THEME CARD (DEFAULT)          */
        /* ---------------------------------- */

        .card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 15px 15px;
            height: 100%;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            color: #48e0fe !important; /* Dark theme card text */
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(100, 108, 255, 0.3);
        }

        /* Dark overlay effect */
        .card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: rgba(5, 27, 44, 0.8);
            z-index: -1;
            border-radius: 22px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .card:hover::before {
            opacity: 1;
        }
        /* ---------------------------------- */
        /* LIGHT THEME CARD                   */
        /* ---------------------------------- */

        .light-theme .card {
            background: var(--card-bg-light) !important;
            border: 1px solid rgba(0, 0, 0, 0.15);
            color: #1a1a1a !important; /* Normal dark text */
            backdrop-filter: none;
            backdrop-filter: blur(10px) !important;
        }

        /* Remove dark overlay in light theme */
        .light-theme .card::before {
            background: transparent !important;
            opacity: 0 !important;
        }

        /* Lighter hover effect */
        .light-theme .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
            border-color: rgba(0, 0, 0, 0.25);
        }
        
        .card-icon {
            width: 70px;
            height: 70px;
            background: rgba(100, 108, 255, 0.1);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            font-size: 28px;
            color: var(--primary);
        }
        .card-icon-sm {
            width: 20px;
            height: 20px;
            background: rgba(100, 108, 255, 0.1);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px;
            font-size: 12px;
            color: var(--primary);
        }
        .card-img{
            margin-bottom: 20px;
            justify-content: center;
            align-items: center;
            display: flex;
            background: #f8f8f9;
            border-radius: 14px;
            padding:8px 0px;
        }
        .card-link {
            text-decoration: none;
            color: inherit;
            display: block;
         }
        
        .card-link:hover {
            text-decoration: none;
        }
        .benefit-card {
            background: rgb(49 62 123 / 24%);
            backdrop-filter: blur(6px);
            border-radius: 15px;
            padding: 0.1rem 1rem;
            height: 100%;
            border: 1px solid #334155;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .light-theme .benefit-card {
            background: rgba(255, 255, 255, 0.24);
            backdrop-filter: blur(6px);
            border-radius: 15px;
            padding: 0.1rem 1rem;
            height: 100%;
            border: 1px solid #334155;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .benefit-card h4 {
           font-size: 1rem;
           font-weight: 500;
           color: var(--primary);
        }
        .benefit-card h2 {
           font-weight: 500;
           color: var(--primary);
        }
        
        
        .benefit-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            border-color: var(--primary);
        }
        .benefit-card-inner {
            background: var(--dark-card);
            border-radius: 13px;
            padding: 1rem;
            height: 100%;
            border: 1px solid #334155;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .benefit-card-inner:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            border-color: var(--primary);
        }
        .feature-icon {
            display: flex;
            align-items: center;
            justify-content: left;
            font-size: 1.8rem;
            color: var(--primary);
        }
        .feature-icon-center {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--primary);
        }
        .integration-card {
            background: rgb(49 62 123 / 24%);
            backdrop-filter: blur(6px);
            border-radius: 15px;
            padding: 2rem;
            height: 100%;
        }
            .light-theme .integration-card {
            background: rgba(255, 255, 255, 0.253);
            backdrop-filter: blur(6px);
            border-radius: 15px;
            padding: 2rem;
            height: 100%;
        }
        
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 12px;
        }
        @media (max-width: 1080px) {
            .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 8px;
            }
        }

        .section-title {
            margin-bottom: 24px;
            text-align: center;
        }

        .about-img{
            border-radius: 20px;
            width: fit-content;
            align-items: center;
        }
        .section-title h2 {
            font-size: 2.8rem;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        .section-title h2 {
            color:var(--primary-light) !important;
        }
        .section-title h3 {
            color:var(--primary-light) !important;
            font-size: 2rem;
        }
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .section-title p {
            color: var(--text-muted);
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0px auto 0;
        }
        
        .title-left {
            margin-bottom: 24px;
            text-align: left !important;
        }
        .title-left h2 {
            margin-bottom: 24px;
            color:var(--primary-light) !important;
        }
        .title-left p {
            color: var(--text-muted);
            font-size: 1.2rem;
        }

        .expertise-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .exp-li-text{
            color: var(--text);
            }

        .expertise-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(100, 108, 255, 0.3);
        }
        
        .expertise-icon {
            width: 80px;
            height: 80px;
            background: rgba(100, 108, 255, 0.1);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            font-size: 32px;
            color: var(--primary);
        }
        .expertise-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            gap: 20px;
        }
        
        .expertise-badge {
            background: rgba(0, 209, 178, 0.1);
            color: var(--accent);
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .mission-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .mission-card h5{
            color: var(--primary-light) !important;
        }

        .mission-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(100, 108, 255, 0.3);
        }        
        .mission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        .mission-item {
            text-align: left;
            padding: 10px;
            background: var(--card-bg);
            border-radius: 15px;
            border: 1px solid var(--card-border);
        }
        .section-title h2 {
            color: var(--primary-light) !important;
            }
        .mission-head {
            color: var(--text-light);
            font-size: 1.2rem;
            font-weight: 600;
        }
        .mission-label {
            color: var(--text-muted);
            font-size: 1rem;
        } 
        
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 20px;
            background: var(--card-bg);
            border-radius: 15px;
            border: 1px solid var(--card-border);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(to right, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .stat-label {
            color: var(--text-muted);
            font-size: 1rem;
        }        
        .timeline {
            position: relative;
            padding-left: 30px;
            margin: 40px 0;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding-left: 30px;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            z-index: 1;
        }
        
        .timeline-year {
            font-weight: 700;
            color: var(--accent);
            font-size: 1.2rem;
        }
        .stat-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 10px 30px;
            text-align: center;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }
        .stat-card-econcent {
            background: var(--badge-bg);
            border: 1px solid #c0e6ff14;
            border-radius: 20px;
            padding: 10px 30px;
            text-align: center;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            min-height: 120px;
        }
        .stat-card-econcent:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(129, 230, 255, 0.3);
        }
        
        .stat-number {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(to right, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
        }
        
        .stat-label {
            color: var(--text-muted);
            font-size: 1.1rem;
        }
		.solution-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(4px) !important;
        }
        
        .solution-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(100, 108, 255, 0.3);
        }
        .econsent-card {
            background: var(--badge-bg);
            border: 1px solid #c0e6ff14;
            border-radius: 20px;
            padding: 10px 40px;
            margin-bottom: 40px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(4px) !important;
        }
        
        .econsent-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(129, 230, 255, 0.3);
        }
        
        .solution-icon {
            width: 80px;
            height: 80px;
            background: rgba(100, 108, 255, 0.1);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-size: 32px;
            color: var(--primary);
        }
        
        .feature-list {
            list-style: none;
            padding-left: 0;
        }
        
        .feature-list li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
        }
        
        .feature-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
        }
        
        .solution-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 18px;
        }
        
        .solution-badge {
            background: rgba(0, 209, 178, 0.1);
            color: var(--accent);
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .testimonial {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            margin-top: 40px;
        }
        
        .testimonial::before {
            content: '"';
            position: absolute;
            top: -30px;
            left: 30px;
            font-size: 120px;
            color: var(--primary);
            opacity: 0.1;
            font-family: "Ubuntu", sans-serif;
            line-height: 1;
        }
        
        .compliance-grid {
            display: grid;
            grid-template-columns: repeat(5, 200px);
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        .compliance-grid {
            justify-content: center;
        }
        @media (max-width: 768px) {
        .compliance-grid {
            justify-content: left;
        }
        }    
        
        .compliance-item {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 25px 20px;
            text-align: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .compliance-item:hover {
            transform: translateY(-5px);
            border-color: rgba(100, 108, 255, 0.3);
        }
        
        .compliance-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }
        .compliance-icon img {
            width:150px;
            height: auto;
            margin:10px;
        }
        
        .footer {
            background: var(--bg-darker);
            padding: 50px 0 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .footer-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--text);
            font-weight: 600;
            align-items: start;
        }
        .footer-logo{
            width:140px;
        }
        
        
        .footer-links a {
            display: block;
            color: var(--text-muted);
            margin-bottom: 5px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .footer-links li {
            display: block;
            color: var(--text-muted);
            margin-bottom: 5px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        
        .footer-links a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }
        
        .copyright {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 5px;
            margin-top: 0px;
            text-align: center;
            color: var(--text-muted);
        }
        
        .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
            background: radial-gradient(circle at center, var(--primary) 0%, transparent 70%);
            animation: pulse 15s infinite alternate;
        }
         /* Animation for cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-card {
            animation: fadeInUp 0.6s ease forwards;
        }
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.05; }
            100% { transform: scale(1.2); opacity: 0.15; }
        }
        
        .floating {
            animation: floating 8s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .grid-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 93, 121, 0.103) 1px, transparent 2px), linear-gradient(90deg, rgb(0, 92, 121, 0.103) 1px, #00000000 2px);
            background-size: 8px 8px;
            pointer-events: none;
            z-index: -1;
        }
        .light-theme .grid-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(188, 244, 255, 0.137) 1px, transparent 2px), linear-gradient(90deg, rgba(188, 244, 255, 0.137) 1px, #daf5ff09 2px);
            background-size: 8px 8px;
            pointer-events: none;
            z-index: -1;
        }
        .video-container {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: perspective(1000px) scale(100%);
            transition: all 0.4s ease;
            border: 1px solid rgba(0, 195, 255, 0.301);
            max-height: 320px;
        }
        
        .video-container:hover {
            transform: perspective(1000px) scale(105%);
            box-shadow: 0px 0px 20px rgba(0, 195, 255, 0.452);
            border: 1px solid rgba(0, 195, 255, 0.582);
        }
        
        .video-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            background: transparent;
            opacity: 0.2;
            z-index: 1;
        }
        
        .video-container iframe {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            min-height: 320px;
            border: none;
        }
        @media (max-width: 992px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .section {
                padding: 50px 0;
            }
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title h2 {
                font-size: 2.2rem;
            }
        }
		.text-muted{
			color:#ffffff !important;
		}
        .text-desc{
            color:#ffffff;
            font-weight:400;
        }
		.card li{
			color:#d9e2ff;
		}


 /**Team**/
         .section-title-team {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            position: relative;
        }

        .section-title-team::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            border-radius: 2px;
        }

        .subtitle-team {
            font-size: 1.2rem;
            color: #e0e0e0;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

     .team-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }

        /* Team item styles */
        .team-item {
            position: relative;
            width: 240px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            background: #4b70b1;
            transition: .5s;
        }

        .team-img {
            position: relative;
            height: 300px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .5s;
        }

        .team-social {
            position: absolute;
            width: 100%;
            height: 100%;
            padding-top: 5px;
            top: 0;
            left: 0;
            display: flex;
            align-items:flex-start;
            transition: .5s;
        }

        .team-social a.btn {
            position: relative;
            margin:3px;
            opacity: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            text-decoration: none;
            transition: .3s;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);

        }

        .team-social a.btn:hover {
            background: #22d3ee;
            transform: translateY(-3px);
        }

        .team-social a.btn:nth-child(1) { background: #3b5998; }
        .team-social a.btn:nth-child(2) { background: #1da1f2; }
        .team-social a.btn:nth-child(3) { background: #e1306c; }
        .team-social a.btn:nth-child(4) { background: #0077b5; }

        .team-info {
            padding: 22px;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .team-info h3  {
            font-size: 1.2rem;
            margin-bottom: 2px;
            color: #ffffff;
            z-index: 1;
        }
        .position{
            color: #22d3ee;
            font-weight: 500;
            font-size: 1rem;
            margin-bottom: 15px;
        }
        .team-info p {
            color: #ffffff;
            font-weight: 500;
            margin-bottom: 15px;
        }

        .team-info .quote {
            font-size: 0.8rem;
            color: #ffffff;
            margin-top: 10px;
            line-height: 1.5;
        }
        .info-text {
            font-size: 0.95rem;
            color: #d1f9ff;
            line-height: 1.3;
            margin: 5px 0 10px;
            position: relative;
            overflow: hidden;
            max-height: 4.8em; /* 3 lines of text (1.6 line-height * 3) */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .read-more-btn {
            background: rgba(34, 211, 238, 0);
            color: #91f0ff;
            border: 1px solid rgba(34, 211, 238, 0.3);
            padding: 4px 16px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.3s ease;
            margin: 5px auto 0;
            z-index: 1;
        }

        .read-more-btn:hover {
            background: rgba(34, 211, 238, 0.2);
            transform: translateY(-2px);
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            overflow: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-content {
            background: #3b5998;
            margin: 1% auto;
            padding: 40px;
            border-radius: 16px;
            max-width: 1200px;
            width: 90%;
            position: relative;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        .modal.active {
            display: block;
            opacity: 1;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.8rem;
            color: #94a3b8;
            cursor: pointer;
            transition: color 0.3s;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .close-btn:hover {
            color: #22d3ee;
            background: rgba(255, 255, 255, 0.1);
        }

        .modal-body {
            display: flex;
            gap: 30px;
            margin-top: 5px;
        }
        .modal-image-container {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            margin-top: -23px;
            justify-content: center;
        }
        .modal-img {
            flex: 0 0 30%;
            border-radius: 12px;
            overflow: hidden;
            max-height: max-content;
        }

        .modal-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            align-items: center;

        }

        .modal-info {
            flex: 1;
        }

        .modal-info h2 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #f8fafc;
        }

        .modal-position {
            color: #22d3ee;
            font-size: 1.2rem;
            margin-bottom: 20px;
            font-weight: 500;
        }

        .modal-bio {
            color: #e7f2ff;
            line-height: 1.6;
            font-size: 1.05rem;
            text-align: justify;
        }

        .modal-social {
            display: flex;
            gap: 10px;
            margin-top: -25px;
            justify-content: center;
        }

        .modal-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: #ffffff 1px solid;
            
        }

        .modal-social a:hover {
            transform: translateY(-4px);
             background: #22d3ee;
        }

        .modal-social a { 
            background: #3b5998;
         }

         /*youtube modal*/
        .bootstrap-modal.modal {
        all: unset; 
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        }
        .modal-content-yt {
            background: linear-gradient(to bottom, #003e57 30%, #0b9dd6);
            margin: 1% auto;
            padding: 30px 4px 4px 4px;
            border-radius: 1px;
            max-width: 900px;
            width: 85%;
            position: relative;
            box-shadow: 0 20px 50px rgba(0, 217, 255, 0.233);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        .bootstrap-modal.show {
        display: block !important;
        }
        .bootstrap-modal {
        z-index: 1055 !important;
        }
        .bootstrap-modal .modal-dialog {
        z-index: 1060 !important;
        }

        .modal-backdrop {
        z-index: 1040 !important; /* backdrop should stay below modal */
        }
        .video-container {
        max-width: 600px; /* adjust width */
        cursor: pointer;
        }

        .video-container img {
        filter: brightness(0.8);
        transition: 0.3s ease;
        }

        .video-container:hover img {
        filter: brightness(1);
        }

        .play-btn {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.8);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s ease;
        }

        .play-btn:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.1);
        }


        /* Hover effects */
        .team-item:hover {
            transform: translateY(-15px);
            box-shadow: 0 0 30px #DDDDDD;
        }

        .team-item:hover .team-social {
            background: rgba(0, 24, 75, 0.671);
            /* backdrop-filter: blur(2px); */
        }

        .team-item:hover .team-social a.btn:first-child {
            opacity: 1;
            margin-top: 0;
            transition: .3s 0s;
        }

        .team-item:hover .team-social a.btn:nth-child(2) {
            opacity: 1;
            margin-top: 0;
            transition: .3s .05s;
        }

        .team-item:hover .team-social a.btn:nth-child(3) {
            opacity: 1;
            margin-top: 0;
            transition: .3s .1s;
        }

        .team-item:hover .team-social a.btn:nth-child(4) {
            opacity: 1;
            margin-top: 0;
            transition: .3s .15s;
        }

        .team-item:hover .team-img img {
            transform: scale(1.15);
        }

        footer {
            text-align: left;
            margin-top: 60px;
            padding: 20px;
            color: var(--text-muted);
            font-size: 0.9rem;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        /* Responsive design */
        @media (max-width: 900px) {
            .team-container {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 25px;
            }

            .team-img {
                height: 270px;
            }
            
        }

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

            .subtitle {
                font-size: 1.1rem;
                padding: 0 15px;
            }

            .team-container {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 20px;
            }

            .team-img {
                height: 250px;
            }

            .modal-body {
                flex-direction: column;
            }

            .modal-img {
                flex: none;
                height: 480px;
                width: 400px;
                align-items: center;
            }
            .modal-image-container{
                align-self: center;
            }
            .close-btn {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 0px 0px;
            }

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

            .subtitle {
                font-size: 1rem;
            }

            .team-container {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }

            .team-img {
                height: 300px;
            }

            .modal-content {
                padding: 5px;
            }
            .modal-img {
                flex: none;
                height: 240px;
                width: 200px;
                align-items: center;
            }
            .modal-image-container{
                align-self: center;
            }
            .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            }
        }

        @media (max-width: 400px) {
            .team-img {
                height: 260px;
            }

            .modal-img {
                max-height: 250px;
            }
            .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            }
        }


        /*videoplayer*/
.video-box{
    position: relative;
    }
.position-absolute {
    position: absolute !important;
}
.video-box a span i{
    font-size: 4rem;
    color: #00c9fc;
    background-color: #ffffff;
    border-radius: 50%;
} 
/* Video Popup */
  .video-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
  }

  .video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .close-button-video {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffffff00;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .close-button-video .close-icon-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
  }
  .video-thumbnail {
    position: relative;
  }

  .video-thumbnail img {
    width: 100%;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #a0529cc4;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    cursor: pointer;
  }

  .play-button .play-icon {
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 20px;
    border-left: 25px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }


  video {
    width: 100%;
    height: 100%;
  }

.top-100 {
    top: 100% !important;
    }
.top-50 {
    top: 50% !important;
    }
.start-50 {
    left: 50% !important;
    }
.topl-50 {
    top: 100% !important;
    }
.startl-50 {
    left: 50% !important;
    }   
.border-animation--border-2 {
    animation-delay: 1.5s;
}
.translate-middle {
    transform: translate(-50%, -50%) !important;
}
.border-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 4rem;
    border: 0.35rem solid #ffffff;
    border-radius: 50%;
    animation: pulse-border 1.5s linear infinite;
}    

.lead {
    font-weight: 400;
    font-size: 18px;
}
.footer p{
    text-align: left;
}

/* Privacy policy Content Section */

        .content-container {
            max-width: 1000px;
            margin: 0 auto;
            background: var(--bg-card);
            border-radius: 20px;
            padding: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border);
        }

        .content-section {
            margin-bottom: 2rem;
        }

        .content-section h2 {
            font-size: 1.4rem;
            margin-bottom: .5rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .content-section h2 i {
            color: var(--accent);
        }

        .content-section h3 {
            font-size: 1.4rem;
            margin: .5rem 0 1rem;
            color: var(--text);
        }

        .content-section p {
            margin-bottom: .5rem;
            color: var(--text-muted);
        }

        .content-section ul {
            margin-left: .5rem;
            margin-bottom: 1.0rem;
        }

        .content-section li {
            margin-bottom: 0.8rem;
            color: var(--text-muted);
        }

        .highlight-box {
            background: rgba(99, 102, 241, 0.1);
            border-left: 4px solid var(--primary);
            padding: 1.5rem;
            border-radius: 0 8px 8px 0;
            margin: 2rem 0;
        }
        .contact-info {
            background: rgba(14, 165, 233, 0.1);
            border-radius: 12px;
            padding: 2rem;
            margin-top: 1rem;
            border: 1px solid var(--border);
        }

        .contact-info h3 {
            color: var(--accent);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.4rem;
        }

        .contact-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: .5rem;
            margin-top: 1.0rem;
        }

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

        .contact-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

        .contact-text h4 {
            font-size: 1rem;
            margin-bottom: 5px;
            color: var(--text);
        }

        .contact-text p {
            margin: 0;
            color: var(--text-muted);
        }
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes textShine {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }
/* img scroll animation */
.zoom-scroll {
  opacity: 1;
  transform: scale(1);
  transition: all 1s ease-out;
}

.zoom-scroll.show {
  opacity: 1;
  transform: scale(.9);
}


 /* Parallax Background Section */
        #data-viz {
            position: relative;
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        #data-viz-1 {
            position: relative;
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .feature-bg {
            background-image: url(../images/bg_3.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .light-theme .feature-bg {
            background-image: url(../images/bg_3_light.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        
        .feature-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.11) 0%, rgba(30, 41, 59, 0.192) 100%);
            z-index: 1;
        }
        .light-theme .feature-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgb(255 255 255 / 11%) 0%, rgb(158 195 255 / 19%) 100%);
            z-index: 1;
        }
        
        
        .feature-bg .cta-bg .cta-bg-1 .container-fluid {
            position: relative;
            z-index: 1;
        }
        .cta-bg {
            background-image: url(../images/bg_1.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .light-theme .cta-bg {
            background-image: url(../images/bg_1_light.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .cta-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.11) 0%, rgba(30, 41, 59, 0.192) 100%);
            z-index: 1;
        }
        .light-theme .cta-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgb(255 255 255 / 11%) 0%, rgb(158 195 255 / 19%) 100%);
            z-index: 1;
        }
        .cta-bg-1 {
            background-image: url(../images/bg_2.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .light-theme .cta-bg-1 {
            background-image: url(../images/bg_2_light.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .cta-bg-1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(213, 247, 255, 0.11) 0%, rgba(255, 255, 255, 0.192) 100%);
            z-index: 1;
        }
        .integration-card h5{
            text-align: left !important;
        }    
        .integration-card p{
            text-align: left !important;
        }   
        .advantage_cont h2{
            text-align: left !important;
        }    
        .advantage_cont p{
            text-align: left !important;
        }                     
        .text-accent{
            text-align: left !important;
        }
        .abt-bg {
            background-image: url(../images/bg_3.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .kf-bg {
            background-image: url(../images/bg_2.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* .light-theme .kf-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgb(255 255 255 / 11%) 0%, rgb(158 195 255 / 19%) 100%);
            z-index: 1;
        } */
        .light-theme .abt-bg {
            background-image: url(../images/bg_3_light.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .light-theme .kf-bg {
            background-image: url(../images/bg_2_light.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .light-theme .btn-outline {
            background: transparent;
            color: var(--text);
            border: 2px solid var(--primary);
            border-radius: 50px;
            padding: 12px 28px;
            font-weight: 400;
            transition: all 0.3s 
        ease;
        }
        .light-theme .btn-outline:hover {
            background: rgba(0, 183, 255, 0.637);
            box-shadow: 0 5px 10px rgba(0, 183, 255, 0.637);
            border: 2px solid var(--primary);
            transform: translateY(-1px);
        }
        .light-theme .btn:hover {
            color: var(--bs-btn-hover-color);
            background-color: var(--bs-btn-hover-bg);
            border-color: var(--bs-btn-hover-border-color);
        }
        /* Theme Toggle Switch Styles */
        .theme-toggle-wrapper {
            display: flex;
            align-items: center;
        }

        .theme-toggle-checkbox {
            display: none;
        }

        .theme-toggle-label {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 20px;
            background: var(--toggle-bg);
            border-radius: 50px;
            cursor: pointer;
            border: 1px solid var(--toggle-btn);
            transition: all 0.3s ease;
            margin: 4px 0px;
        }

        .theme-toggle-label:hover {
            border-color: var(--primary);
        }

        .theme-toggle-slider {
            position: absolute;
            top: 0x;
            left: 0x;
            width: 18px;
            height: 18px;
            padding:1px;
            background: var(--toggle-btn);
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .theme-toggle-sun,
        .theme-toggle-moon {
            position: absolute;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .theme-toggle-sun {
            left: 5px;
            opacity: 0;
            transform: scale(1);
        }

        .theme-toggle-moon {
            right: 5px;
            opacity: 1;
            transform: scale(1);
        }

        /* Checked state (Light Mode) */
        .theme-toggle-checkbox:checked + .theme-toggle-label {
            background: var(--bg-light);
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
            transform: translateX(30px);
            background: var(--primary-light);
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-sun {
            opacity: 1;
            transform: scale(1);
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-moon {
            opacity: 0;
            transform: scale(0.5);
        }

        /* Light theme adjustments for toggle */
        :root.light-theme .theme-toggle-label {
            background: var(--toggle-bg) !important;
            border-color: var(--toggle-btn);
        }

        :root.light-theme .theme-toggle-label:hover {
            border-color: var(--primary);
        }
        /* Font Awesome icons version */
        .theme-toggle-sun i{
            font-size: 10px;
            color: #ffffff;
        }
        .theme-toggle-moon i {
            font-size: 10px;
            color: white;
        }

/* Hide light versions by default */
.light-version {
    display: none;
}

.dark-version {
    display: block;
}

/* Show light versions in light theme */
:root.light-theme .light-version {
    display: block;
}

:root.light-theme .dark-version {
    display: none;
}
/* === PAGE HERO === */
        .page-hero {
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 8rem 5% 4rem;
            position: relative;
            overflow: hidden;
        }
        
        .page-hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(255, 60, 0, 0.1) 0%, transparent 70%);
            z-index: -1;
        }
        
        .page-hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, #fff, #ff9d7d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .page-hero p {
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 2rem;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .blog-card{
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--card-border);
            border-radius: 10px;
            padding: 15px 15px;
            height: 100%;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            color: #48e0fe !important;
        }
        .blog-card-label{
            position: absolute;
            top: 15px;
            left: 25px;
            background: rgba(255, 60, 0, 0.9);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 0px 0px 10px 10px;
            font-size: 0.8rem;
        }
        .blog-card p{
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        /* =========================
   Custom Cursor Animation 
   ========================= */

/* The center dot */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none; /* Allows clicking through the cursor */
}

/* The trailing circle */
.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    /* transition creates the smooth "lag" effect */
    transition: left 0.15s ease-out, top 0.15s ease-out, width 0.2s, height 0.2s, background-color 0.2s;
}

/* Hover state: When hovering over links/buttons */
body.hovering .cursor-outline {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 198, 233, 0.1); /* Subtle fill */
    border-color: transparent;
}

/* Hide custom cursor on tablets/mobiles where touch is used */
@media (max-width: 992px) {
    .cursor-dot, 
    .cursor-outline {
        display: none;
    }
}
/* =========================
   Custom Cursor Trail 
   ========================= */

.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #00d9ff;
    pointer-events: none;
    z-index: 9999;
    
    /* Default Shape: DOTS */
    border-radius: 50%; 
    
    /* Center the pivot point */
    transform: translate(-50%, -50%);
    transition: width 0.8s, height 0.8s, background-color 0.8s;
}

/* ==================================
   Strict Horizontal Snap Timeline
   ================================== */

.timeline-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* This creates the snap effect */
    scroll-snap-type: x mandatory;
    /* Hide scrollbar for clean look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 20px 0 40px 0;
    cursor: grab;
}

/* Hide scrollbar Webkit */
.timeline-scroll-container::-webkit-scrollbar {
    display: none;
}

.timeline-flex-track {
    display: flex;
    gap: 20px;
    padding: 0 5vw; /* Add padding so first/last items aren't stuck to edge */
    width: max-content; /* Allows track to grow horizontally */
}

/* The Card */
.timeline-snap-card {
    scroll-snap-align: center; /* Locks card to center of screen */
    min-width: 260px;
    max-width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
    user-select: none; /* Prevents text highlighting while dragging */
}

.light-theme .timeline-snap-card {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Hover Effect */
.timeline-snap-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--accent);
}

/* Number Badge */
.t-number {
    background: var(--accent);
    color: #000;
    font-weight: bold;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 0.9rem;
}

/* Icons */
.t-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 15px;
}

/* Typography */
.timeline-snap-card h5 {
    color: var(--primary-light);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.timeline-snap-card p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Progress Bar */
.scroll-progress-bar {
    width: 200px;
    height: 4px;
    background: rgba(128, 128, 128, 0.2);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Active State for Dragging */
.timeline-scroll-container.active {
    cursor: grabbing;
}

/* Color Variants */
.t-number.blue, .t-icon.blue { background-color: transparent; color: #60a5fa; }
.t-number.blue { background: #60a5fa; color: white; }

.t-number.purple, .t-icon.purple { background-color: transparent; color: #c084fc; }
.t-number.purple { background: #c084fc; color: white; }

.t-number.red, .t-icon.red { background-color: transparent; color: #f87171; }
.t-number.red { background: #f87171; color: white; }

.t-number.orange, .t-icon.orange { background-color: transparent; color: #fbbf24; }
.t-number.orange { background: #fbbf24; color: black; }

.t-number.green, .t-icon.green { background-color: transparent; color: #4ade80; }
.t-number.green { background: #4ade80; color: black; }



        .brochure-modal {
            max-width: 100%;
        }

        #brochureModal .modal-content {
            height: 90vh;
        }

        #brochureModal .modal-body {
            height: calc(90vh - 60px);
        }
        .modal-dialog {
            max-width: 100%;
            max-height: fit-content;
        }
        .form-control:focus {
            border-color: #2d62ed;
            box-shadow: 0 0 0 0.25rem rgba(45, 98, 237, 0.25);
        }
        .modal {
            z-index: 2000 !important;
        }

        .modal-backdrop {
            z-index: 1990 !important;
        }
        .modal.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        }
        .modal-download-btn {
            background: #01d6fc;
            border: none;
            transition: all 0.3s ease;
            padding:8px 2px;
            font-size: 12px;
            color: #ffffff;
        }
        .modal-download-btn:hover {
            background: #01d6fc;
            transform: scale(1.02);
            color: #ffffff;
        }
        .modal-cancel-btn {
            background:  #f7faff;
            border: 1px solid #94a3b8;
            transition: all 0.3s ease;
            padding:8px 2px;
            font-size: 12px;
        }
        .modal-cancel-btn:hover {
            background:  #f7faff;
            border: 1px solid #db4f4f;
            transform: scale(1.02);
        }

        .txt-sm{
            font-size: 13px;
        }
        .txt-md{
            font-size: 14px;
            font-family: 600;
        }
        .btn-close {
        color: #000;}
        .hr-bottom {
            border-bottom: 1px solid rgba(107, 220, 255, 0.26);
            padding: 1px;
        }

        .light-theme .hr-bottom {
            border-bottom: 1px solid rgba(68, 68, 68, 0.08);
            padding: 1px;
        }



        .section {
            padding: 90px 20px;
        }

        .title {
            text-align: center;
            margin-bottom: 70px;
        }

        .title h2 {
            font-size: 32px;
            font-weight: 700;
        }

        .workflow {
            position: relative;
            max-width: 950px;
            margin: auto;
        }

        /* vertical line */

        .workflow::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            height: 100%;
            background: #00c6ff;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .progress-line {
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            height: 0;
            background: #00c6ff;
            transform: translateX(-50%);
            border-radius: 2px;
            box-shadow: 0 0 8px #00c6ff;
            transition: height .10s linear;
        }

        /* step card */

        .step {
            position: relative;
            width: 45%;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--wf);
            border-radius: 20px;
            padding: 4px 8px;
            border-radius: 14px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            margin-bottom: -15px;
            opacity: 0;
            transform: translateY(40px);
            transition: all .6s ease;
            min-height: 80px;
            display: flex;
            align-items: center;
        }

        .step.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* alternating */

        .left {
            left: 44px;
        }

        .right {
            left: 50.5%;
        }

        .left {
            text-align: right;
            display: flex;
            justify-content: right;
        }

        /* node */

        .node {
            position: absolute;
            top: 28px;
            width: 18px;
            height: 18px;
            background: #00c6ff;
            border-radius: 50%;
            box-shadow: 0 0 18px rgba(79, 108, 255, 0.8);
            animation: pulse 3s infinite;
        }

        .left .node {
            right: -15px;
        }

        .right .node {
            left: -15px;
        }

        @keyframes pulse {

            0% {
                box-shadow: 0 0 0 0 rgba(79, 108, 255, .7);
            }

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

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

        }

        /* card hover */

        .step:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
        }

        /* content */

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

        .number {
            font-size: 24px;
            font-weight: 400;
            color: var(--wf);
            min-width: 40px;
            padding: 4px;
        }

        .icon {
            font-size: 20px;
            color: var(--wf);
            border: 1px solid var(--wf);
            border-radius: 10px;
            padding: 4px;
            width: 34px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text h5 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }

        .text p {
            margin: 2px 0 0;
            font-size: 14px;
            color: #e4e4e4;
        }

        .text b {
            margin: 2px 0 0;
            font-size: 14px;
            font-weight: 700;
        }

        .text-b {
            color: var(--text);
        }

        .light-theme .text p {
            margin: 2px 0 0;
            font-size: 14px;
            color: #292929;
        }


        /* mobile */

        @media(max-width:768px) {

            .workflow::before {
                left: -5px;
            }

            .progress-line {
                left: -5px;
            }

            .step {
                width: 100%;
                left: 0 !important;
                padding-left: 10px;
                margin-bottom: 8px;
            }

            .node {
                left: -15px !important;
            }

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

            .workflow::before {
                left: -19px;
            }

            .progress-line {
                left: -19px;
            }

            .step {
                width: 100%;
                left: 0 !important;
                padding-left: 5px;
                margin-bottom: 18px;
            }

            .node {
                left: -30px !important;
            }

        }



/*whitepaper*/

        .white-paper-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 10px;
            padding: 10px 30px;
            text-align: left;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .white-paper-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }
        .white-paper-card h4{
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 0px;
             color:var(--text) !important;
        }
        .white-paper-card p{
            font-size: 13px;
            font-weight: 400;
        }
        .modal-title{
           color:var(--text);
        }
        .light-theme .modal-title{
           color:var(--text);
        }
        .modal-content-wp{
            max-width: 600px !important;
        }
        .modal-content-wp{
            background-color: var(--wp_modal) !important;            
        }
        .light-theme .modal-content-wp{
            background-color: var(--wp_modal) !important;           
        }
        .whitepaper-modal a{
            color:#0d6efd !important;
            font-size: 13px;
        }
        .whitepaper-modal a:hover{
            color:#01d7f3 !important;
            font-size: 13px;
        }
        .whitepaper-modal .form-check-label {
            color:#d1d1d1 !important;
            font-size: 13px;
        }
        .light-theme .whitepaper-modal .form-check-label {
            color:#464646 !important;
            font-size: 13px;
        }
        .white-paper-card small{
            font-size: 11px;
            font-weight: 600;
        }
        .white-paper-card .pdf-icon{
            color:#0c6efd !important;
        }
        .whitepaper-modal .form-label{
            color:var(--text) !important;
            font-size: 13px;
        }
        .whitepaper-modal .form-control{
            font-size: 13px;
        }

        .download-btn {
            font-size: 12px;
            font-weight: 600;
        }
        .download-btn:hover {            
            transform: scale(1.05);
        }
    
    .form-control {        
        color: var(--text) !important;
        background-color: var(--card-bg) !important;
    }
    /* Default (Dark Theme) */
    ::placeholder {
        color: rgba(255,255,255,0.6) !important;
        opacity: 1;
    }

    /* Light Theme */
    .light-theme ::placeholder {
        color: rgba(0,0,0,0.5) !important;
    }
    .text-align-left{
        text-align: left !important;
    }
    .text-align-center{
        text-align: center !important;
    }

    @media(max-width:425px) {
    .app_dwn_btn img{
        width:100%;
        height:45px;
        }
    }
     /* @media(max-width:425px) {
    .yt-iframe{
         width:40px;
         height:180px !important; 
        }
    .video-container iframe {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        min-height: 270px;
        border: none;
        }     
    }
     @media(max-width:768px) {
        .yt-iframe{
            width:540px !important;
            height:280px !important; 
            display: flex;
            align-items: center;
            }
        .video-container iframe {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            min-height: 270px !important;
            border: none;
            display: flex;
            align-items: center;
            }     
        }
    @media(min-width:1024px) {
        .yt-iframe{
            width:470px !important;
            height:280px !important; 
            }
        .video-container iframe {            
            min-height: 280px !important;
            border: none;
            }     
        } */

        .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6rem 1.0rem;
    font-size: .9rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    }
@media (prefers-reduced-motion: reduce) {
    .accordion-button {
      transition: none;
    }
    }
.accordion-button:not(.collapsed) {
    color: #8a22d8;
    background-color: #e6f6fb;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
    }
/* .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d122e3'%3e%3cpath fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e  %3cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    }
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239926f0'%3e%3cpath fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e %3cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
    } */
@media (prefers-reduced-motion: reduce) {
    .accordion-button::after {
    transition: none;
    }
    }
.accordion-button:hover {
    z-index: 2;
    }
.accordion-button:focus {
    z-index: 3;
    border-color: #83d1ed !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(70, 39, 248, 0.25);
    }

.accordion-header {
    margin-bottom: 0;
    }

.accordion-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    }
.accordion-item:first-of-type {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    }
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    }
.accordion-item:not(:first-of-type) {
    border-top: 0;
    }
.accordion-item:last-of-type {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    }
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
    }
.accordion-item:last-of-type .accordion-collapse {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    }

.accordion-body {
    padding: 1.0rem 1.0rem;
    font-size: .8rem;
    }

.accordion-flush .accordion-collapse {
    border-width: 0;
    }
.accordion-flush .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    }
.accordion-flush .accordion-item:first-child {
    border-top: 0;
    }
.accordion-flush .accordion-item:last-child {
    border-bottom: 0;
    }
.accordion-flush .accordion-item .accordion-button {
    border-radius: 0;
    }
.text-justify{
    text-align: justify;

}
.object-fit
{
    object-fit: cover;
}


/* Accordion Header (Title) */
.accordion-button {
    background-color: #0b1e3c; /* change this */
    color: #0d6efd; /* text color */
    border: none;
}

/* Active (opened) accordion header */
.accordion-button:not(.collapsed) {
    background-color: var(--card-bg); /* active color */
    color: #ffffff;
}

/* Accordion Body (Content) */
.accordion-body {
    background-color: var(--card-bg); /* content background */
    color: #d1d5db;
    backdrop-filter: blur(10px);
}

/* Accordion Item wrapper */
.accordion-item {
    border: 1px solid rgba(255,255,255,0.1);
    background-color: transparent;
}

/* Light Theme Accordion */
.light-theme .accordion-button {
    background-color: #f1f5f9;
    color:  var(--primary) !important;
}

.light-theme .accordion-button:not(.collapsed) {
    background-color: #cfe8ff;
    color: #003366;
}

.light-theme .accordion-body {
    background-color: #ffffff;
    color: #141414;
    font-weight: 700;
}

.yt-btn{
    background-color: #dc3545;
    color:#ffffff;
    border:0px;
    border-radius: 14px;
    padding: 8px 20px;
    display: flex;
    justify-content: center;

}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300c6e9' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
/* Dark theme */
.accordion-button::after {
    filter: brightness(0) invert(1);
}

/* Light theme */
.light-theme .accordion-button::after {
    filter: none;
}



.ids-workflow-wrapper {
  position: relative;
  margin-top: 80px;
}

.ids-line {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgba(0,198,255,0.2);
}

.ids-progress {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,#00c6ff,#0072ff);
  width: 0%;
  transition: width 0.2s ease;
}

.ids-workflow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ids-step {
  width: 8%;
  text-align: center;
  position: relative;
}

/* ICON */
.ids-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #002841;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: #a1d9fc;
  transition: 0.4s;
}
@keyframes zoomPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.icon-base {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(45deg,#0151b3, #00fff2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  animation: zoomPulse 2.5s ease-in-out infinite;
}

/* CONTENT */
.ids-content {
  position: absolute;
  width: 210px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  opacity: 0.6;
  transition: 0.4s;
}
.ids-content p{
  margin-bottom:2px !important;
}


.ids-content.top { bottom: 80px; }
.ids-content.bottom { top: 80px; }

/* ACTIVE */
.ids-step.active .ids-icon {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,198,255,0.6);
}
/* .ids-step.active .icon-base {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,198,255,0.6);
} */

.ids-step.active .ids-content {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}
.ids-workflow-wrapper {
  padding: 80px 20px;
}
/* Completed steps */
.ids-step.completed .ids-icon {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,198,255,0.4);
}

.ids-step.completed .ids-content {
  opacity: 1;
}
.ids-step.active .ids-icon {
  transform: scale(1.05);
}
.ids-step.active .icon-base {
  transform: scale(1.25);
}

.ids-step.completed .ids-icon {
  opacity: 1.0;
}
@media (max-width: 768px) {

  .ids-workflow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .ids-step {
    width: 30%;
  }

  .ids-icon {
    width: 50px;
    height: 50px;
    font-size: 15px;
  }

  .ids-content {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }

  .ids-content.top,
  .ids-content.bottom {
    top: auto;
    bottom: auto;
  }

  .ids-line,
  .ids-progress {
    display: none;
  }
}

.ids-progress {
  transition: width 0.1s linear;
}
/* Hide mobile version in desktop */
.ids-mobile-workflow {
  display: none;
}

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

  .ids-workflow-wrapper {
    display: none;
  }

  .ids-mobile-workflow {
    display: block;
    position: relative;
    padding-left: 15px;
  }

  .mobile-line {
    position: absolute;
    left: 1px;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(0,198,255,0.2);
  }

  .mobile-progress {
    position: absolute;
    left: 1px;
    top: 0;
    width: 2px;
    height: 0%;
    background: linear-gradient(#00c6ff,#0072ff);
    transition: height 0.2s linear;
  }

  .mobile-step {
  position: relative;
  margin-bottom: 5px;
  padding: 8px 0px 8px 15px
}

/* ICON POSITION */
.mobile-step .ids-icon {
  position: absolute;
  left: 3px;
  top: 6%;
  transform: translateY(-50%); /* 🔥 vertical center fix */
  width: 39px;
  height: 39px;
  background: #002841;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1d9fc;
  font-size: 16px;
  z-index: 2;
  animation: zoomPulse 2.5s ease-in-out infinite; 
}


/* DEFAULT */
.mobile-step .ids-icon {
  background: #143f5a;
  color: #7aaac7;
}

/* ACTIVE */
.mobile-step.active .ids-icon {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0,198,255,0.6);
}

/* COMPLETED */
.mobile-step.completed .ids-icon {
  background: linear-gradient(45deg,#0151b3, #00fff2);
  color: #fff;
  opacity: 1;
}
 .content-wf-mob {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #149af359;
}
 .content-wf-mob h6 {
    width: 35%;
    text-align: left;
}
 .content-wf-mob p {
    width: 65%;
    text-align: left;
}
.content-wf-mob h6,
.content-wf-mob p {
  margin: 0;
}
/* MOBILE ICON BASE (same as desktop but smaller) */
.mobile-step .icon-base {
  position: absolute;
  left: -35px; /* slightly more than icon */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(45deg,#0151b3, #00fff2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zoomPulse 2.5s ease-in-out infinite;
  z-index: 1;
}



/* ACTIVE */
.mobile-step.active .icon-base {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  box-shadow: 0 0 12px rgba(0,198,255,0.6);
  transform: scale(1.15);
}

.mobile-step.active .ids-icon {
  color: #fff;
}

/* COMPLETED */
.mobile-step.completed .icon-base {
  background: linear-gradient(45deg,#00c6ff,#0072ff);
  opacity: 1;
}

.mobile-step.completed .ids-icon {
  color: #fff;
}
}

.problem-rotator {
  font-weight: 500;
  font-size: 16px;
  color: #444;
  height: 24px;
  overflow: hidden;
  position: relative;
}

.problem-rotator span {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.impact-item {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeUp 0.6s ease forwards;
  margin-bottom: 10px;
  font-weight: 500;
}

.impact-item:nth-child(1) { animation-delay: 0.2s; }
.impact-item:nth-child(2) { animation-delay: 0.4s; }
.impact-item:nth-child(3) { animation-delay: 0.6s; }
.impact-item:nth-child(4) { animation-delay: 0.8s; }
.impact-item:nth-child(5) { animation-delay: 1s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── TESTIMONIAL QUOTE ── */
.testimonial-quote {
    background: var(--badge-bg);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 6px 20px;
    font-style: italic;
    color: var(--text-muted);
    margin: 24px 0 16px;
    font-size: 14px;
}