:root {
            --green: #075c4f;
            --green-dark: #043f37;
            --green-light: #0c7766;

            --yellow: #ffd329;
            --yellow-dark: #f5bd00;

            --red: #ef4444;
            --pink: #ec4899;
            --orange: #ff8a00;

            --dark: #111827;
            --gray: #667085;
            --light: #f7f8f5;
            --white: #ffffff;
        }

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

        body {
            font-family: 'Inter', sans-serif;
            color: var(--dark);
            background: #fff;
        }

        a {
            text-decoration: none;
        }

        /* =========================
           NAVBAR
        ========================= */

        .navbar {
            padding: 0px;
            margin: 0px;
            /*padding-top: 0px;*/
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid #eeeeee;
            z-index: 1000;
            position:sticky;
            top: 0px;
        }

        .navbar-brand {
            
            
            color: #181818;
            display: flex;
            align-items: center;
            
            padding-left: 12px;
    
    
            gap:5px;
            
            font-size:20px;
            font-weight:800;
        }

        .logo-box {
            width: 45px;
            height: 45px;
            border-radius: 14px;
            background: linear-gradient(135deg, #f83c73, #ec4899);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 22px;
            box-shadow: 0 8px 25px rgba(236,72,153,.25);
        }

        .logo-text span {
            color: #FF0066;
        }

        .navbar-nav {
            gap: 18px;
        }

        .navbar .navbar-nav .nav-link {
            font-size: 18px !important;
        }

        .navbar-nav .nav-link {
            color: #555;
            font-weight: 600;
            font-size: 15px;
            transition: .3s;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: #ec4899;
        }

        .nav-btn {
            background: #ef4444;
            color: white;
            padding: 15px 27px;
            border-radius: 40px;
            font-weight: 700;
            transition: .3s;
        }

        .nav-btn:hover {
            background: #dc2626;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(239,68,68,.25);
        }

        .navbar .container {
            margin-left: 0px !important;
        }


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

        .hero {
            height: auto;
            min-height: 0;
            position: relative;
            overflow: hidden;

            background:
                linear-gradient(
                    90deg,
                    rgba(3,67,58,.96) 0%,
                    rgba(5,91,78,.88) 42%,
                    rgba(6,88,72,.60) 70%,
                    rgba(255,179,0,.32) 100%
                ),
                url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2000&q=85");

            background-size: cover;
            background-position: center;
        }

        .hero:before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            background: rgba(34,197,94,.22);
            border-radius: 50%;
            left: -300px;
            bottom: -300px;
            filter: blur(10px);
        }

        .hero:after {
            content: "";
            position: absolute;
            width: 350px;
            height: 350px;
            background: rgba(255,210,41,.18);
            border-radius: 50%;
            right: -150px;
            bottom: -150px;
        }

        .hero-content {
            position: relative;
            z-index: 5;
            padding-top: 17px;
            padding-bottom: 10px;
        }

        /* =========================
           BADGE
        ========================= */

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            border: 1px solid rgba(255,255,255,.35);
            background: rgba(255,255,255,.12);
            backdrop-filter: blur(8px);

            color: white;
            padding: 11px 20px;
            border-radius: 40px;

            font-size: 13px;
            font-weight: 800;
            letter-spacing: .8px;
            margin-bottom: 30px;
        }

        .hero-badge i {
            width: 9px;
            height: 9px;
            background: var(--yellow);
            border-radius: 50%;
            display: inline-block;
        }

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

        .hero-title {
            color: white;
            font-size: clamp(55px, 6vw, 92px);
            line-height: .98;
            letter-spacing: -4px;
            font-weight: 900;
            margin-bottom: 0px;
        }

        .hero-title .highlight {
            color: var(--yellow);
            display: block;
        }

        .hero-description {
            max-width: 720px;
            color: rgba(255,255,255,.9);
            margin-bottom: 3px;
            font-size: 17px;
            line-height: 1.65;
        }

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

        .hero-buttons {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        .btn-yellow {
            background: var(--yellow);
            color: #111;
            border: 0;
            padding: 18px 29px;
            border-radius: 40px;
            font-size: 16px;
            font-weight: 800;
            transition: .3s;
        }

        .btn-yellow:hover {
            background: #ffe263;
            color: #111;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255,211,41,.25);
        }

        .btn-outline-white {
            border: 1px solid rgba(255,255,255,.55);
            color: white;
            background: rgba(255,255,255,.08);
            padding: 18px 29px;
            border-radius: 40px;
            font-size: 16px;
            font-weight: 700;
            transition: .3s;
        }

        .btn-outline-white:hover {
            background: white;
            color: var(--green);
        }

        /* =========================
           CUSTOMERS
        ========================= */

        .customers {
            display: flex;
            align-items: center;
            gap: 17px;
            margin-top: 48px;
        }

        .avatar-group {
            display: flex;
        }

        .avatar {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            border: 3px solid white;

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

            margin-left: -8px;

            color: white;
            font-size: 12px;
            font-weight: 800;
        }

        .avatar:first-child {
            margin-left: 0;
        }

        .avatar-1 {
            background: #f59e0b;
        }

        .avatar-2 {
            background: #ec4899;
        }

        .avatar-3 {
            background: #ef4444;
        }

        .avatar-4 {
            background: white;
            color: #555;
        }

        .customer-number {
            color: white;
            font-weight: 800;
            font-size: 16px;
        }

        .customer-number small {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255,255,255,.7);
            margin-top: 3px;
        }

        /* =========================
           ANALYTICS CARD
        ========================= */

        .analytics-wrapper {
            position: relative;
            z-index: 10;
            padding-top: 0px;
        }

        .analytics-card {
            background: rgba(255,255,255,.97);
            border-radius: 30px;
            padding: 34px;
            box-shadow: 0 30px 80px rgba(0,0,0,.20);
            min-height: 455px;
        }

        .analytics-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .analytics-label {
            font-size: 11px;
            color: #777;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .analytics-title {
            font-size: 20px;
            font-weight: 800;
            margin-top: 8px;
        }

        .analytics-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: #20c86a;
            color: white;

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

            font-size: 23px;
        }

        .growth-number {
            color: #16a34a;
            font-size: 43px;
            font-weight: 900;
            margin: 32px 0;
        }

        /* =========================
           GRAPH
        ========================= */

        .graph-box {
            height: 185px;
            background: #fff8ee;
            border-radius: 20px;

            padding: 25px 18px;

            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 9px;
        }

        .bar {
            flex: 1;
            max-width: 43px;

            border-radius: 9px 9px 4px 4px;

            background: linear-gradient(
                to top,
                #f04444,
                #ff9515
            );

            animation: barGrow 1.2s ease both;
            transform-origin: bottom;
        }

        .bar:nth-child(1) { height: 30%; animation-delay: .1s; }
        .bar:nth-child(2) { height: 45%; animation-delay: .15s; }
        .bar:nth-child(3) { height: 38%; animation-delay: .2s; }
        .bar:nth-child(4) { height: 62%; animation-delay: .25s; }
        .bar:nth-child(5) { height: 53%; animation-delay: .3s; }
        .bar:nth-child(6) { height: 74%; animation-delay: .35s; }
        .bar:nth-child(7) { height: 65%; animation-delay: .4s; }
        .bar:nth-child(8) { height: 86%; animation-delay: .45s; }
        .bar:nth-child(9) { height: 79%; animation-delay: .5s; }
        .bar:nth-child(10) { height: 100%; animation-delay: .55s; }

        @keyframes barGrow {
            from {
                transform: scaleY(0);
            }

            to {
                transform: scaleY(1);
            }
        }

        .graph-footer {
            margin-top: 18px;
            color: #16a34a;
            font-size: 12px;
            font-weight: 700;
        }

        /* =========================================================
           TECHNOLOGY STRIP
           ========================================================= */
        .technology-strip {
            background: white;
            padding: 25px 0;
            border-bottom: 1px solid #eee;
        }

        .tech-title {
            color: #777;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 18px;
            text-align: center;
        }

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

        .section {
            padding: 31px 0;
        }

        .section-light {
            background: #f8f9f6;
        }

        .section-label {
            color: #ec4899;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-title {
            font-size: clamp(38px, 4vw, 58px);
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -2px;
        }

        .section-description {
            color: #667085;
            font-size: 17px;
            line-height: 1.4;
            padding-bottom: 10px;
        }

        /* =========================
           FEATURE CARDS
        ========================= */

        .feature-card {
            height: 100%;
            padding: 35px;
            border-radius: 25px;
            background: white;
            border: 1px solid #eeeeee;
            transition: .35s;
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 55px rgba(0,0,0,.08);
        }

        .feature-card:before {
            content: "";
            position: absolute;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            right: -35px;
            top: -35px;
            opacity: .15;
        }

        .feature-green:before {
            background: #16a34a;
        }

        .feature-yellow:before {
            background: #facc15;
        }

        .feature-pink:before {
            background: #ec4899;
        }

        .feature-red:before {
            background: #ef4444;
        }

        .feature-icon {
            width: 62px;
            height: 62px;
            border-radius: 18px;

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

            font-size: 25px;
            margin-bottom: 25px;
        }

        .icon-green {
            background: #dcfce7;
            color: #16a34a;
        }

        .icon-yellow {
            background: #fef3c7;
            color: #d97706;
        }

        .icon-pink {
            background: #fce7f3;
            color: #db2777;
        }

        .icon-red {
            background: #fee2e2;
            color: #dc2626;
        }

        .feature-card h4 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .feature-card p {
            color: #667085;
            line-height: 1.7;
            margin: 0;
        }

        /* =========================
           COST SECTION
        ========================= */

        .cost-section {
            background: var(--green);
            color: white;
            position: relative;
            overflow: hidden;
        }

        .cost-section:before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            background: rgba(255,211,41,.10);
            border-radius: 50%;
            right: -200px;
            top: -200px;
        }

        .cost-card {
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 25px;
            padding: 35px;
            backdrop-filter: blur(10px);
        }

        .cost-row {
            margin-bottom: 28px;
        }

        .cost-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
        }

        .cost-bar {
            height: 12px;
            background: rgba(255,255,255,.15);
            border-radius: 20px;
            overflow: hidden;
        }

        .cost-progress {
            height: 100%;
            border-radius: 20px;
        }

        .progress-high {
            width: 90%;
            background: #ef4444;
        }

        .progress-normal {
            width: 65%;
            background: #facc15;
        }

        .progress-tss {
            width: 42%;
            background: #20c86a;
        }

        .saving-box {
            margin-top: 35px;
            background: var(--yellow);
            color: #111;
            padding: 22px;
            border-radius: 18px;
            font-weight: 800;
        }

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

        .service-card {
            background: white;
            border-radius: 25px;
            padding: 35px;
            height: 100%;
            border: 1px solid #eee;
            transition: .35s;
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 60px rgba(0,0,0,.09);
        }

        .service-number {
            font-size: 13px;
            font-weight: 800;
            color: #ec4899;
            margin-bottom: 22px;
        }

        .service-card h4 {
            font-size: 23px;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .service-card p {
            color: #667085;
            line-height: 1.7;
        }

        .service-link {
            color: var(--green);
            font-weight: 800;
            display: inline-flex;
            gap: 8px;
            align-items: center;
            margin-top: 15px;
        }

        /* =========================
           STATS
        ========================= */

        .stats {
            background: #f8f9f6;
        }

        .stat-box {
            text-align: center;
            padding: 30px;
        }

        .stat-number {
            font-size: 52px;
            font-weight: 900;
            color: var(--green);
        }

        .stat-label {
            color: #667085;
            margin-top: 5px;
        }

        /* =========================
           SUPPORT
        ========================= */

        .support-card {
            background: #fff4f7;
            border-radius: 35px;
            padding: 65px;
            overflow: hidden;
            position: relative;
        }

        .support-icon {
            width: 85px;
            height: 85px;
            border-radius: 25px;
            background: #ec4899;
            color: white;

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

            font-size: 37px;
            margin-bottom: 25px;
        }

        .support-card h2 {
            font-size: 45px;
            font-weight: 900;
            letter-spacing: -2px;
        }

        .support-card p {
            color: #667085;
            line-height: 1.8;
            max-width: 600px;
        }

        .support-circle {
            position: absolute;
            right: -120px;
            top: -120px;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            background: rgba(236,72,153,.12);
        }

        /* =========================
           CTA
        ========================= */

        .cta {
            padding: 30px 0;
            background:
                linear-gradient(
                    120deg,
                    #063f37,
                    #08705f
                );
            color: white;
            position: relative;
            overflow: hidden;
        }

        .cta:before {
            content: "";
            position: absolute;
            width: 350px;
            height: 350px;
            background: rgba(255,211,41,.13);
            border-radius: 50%;
            left: -120px;
            bottom: -150px;
        }

        .cta h2 {
            font-size: clamp(40px, 5vw, 65px);
            font-weight: 900;
            letter-spacing: -2px;
        }

        .cta p {
            color: rgba(255,255,255,.75);
            font-size: 18px;
            max-width: 650px;
            margin: 20px auto 30px;
            line-height: 1.8;
        }

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

        footer {
            background: #101817;
            color: white;
            padding: 43px 0 25px;
        }

        .footer-brand {
            font-size: 25px;
            font-weight: 800;
        }

        .footer-brand span {
            color: #ec4899;
        }

        .footer-description {
            color: #9ca3af;
            line-height: 1.8;
            max-width: 400px;
            margin-top: 18px;
        }

        .footer-title {
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #9ca3af;
            transition: .3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .copyright {
            border-top: 1px solid rgba(255,255,255,.08);
            margin-top: 5px;
            padding-top: 22px;
            color: #737b7a;
            font-size: 13px;
        }

        /* =========================
           ANIMATION
        ========================= */

        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: .8s ease;
        }

        .fade-up.show {
            opacity: 1;
            transform: translateY(0);
        }

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

        .contact-box {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 28px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            text-decoration: none;
            color: #101828;
            transition: all .3s ease;
            position: relative;
            overflow: hidden;
        }

        .contact-box::before {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            right: -45px;
            bottom: -45px;
            border-radius: 50%;
            background: rgba(22, 163, 74, .08);
            transition: .3s;
        }

        .contact-box:hover {
            transform: translateY(-6px);
            border-color: #16a34a;
            box-shadow: 0 18px 45px rgba(16, 24, 40, .10);
            color: #101828;
        }

        .contact-box:hover::before {
            transform: scale(2);
        }

        .contact-icon {
            width: 46px;
            height: 46px;
            min-width: 46px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            border: 1px solid #e4e7ff;
            background: #f1f2ff;
            color: #6366f1;
        }

        .contact-green {
            background: #dcfce7;
            color: #16a34a;
        }

        .contact-pink {
            background: #fce7f3;
            color: #ec4899;
        }

        .contact-box span {
            display: block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.5px;
            color: #64748b;
            margin-bottom: 5px;
        }

        .contact-box h4 {
            margin: 0;
            font-size: 20px;
            font-weight: 800;
        }

        .contact-box p {
            margin: 5px 0 0;
            color: #64748b;
            font-size: 14px;
        }

        .contact-arrow {
            margin-left: auto;
            font-size: 20px;
            color: #94a3b8;
            transition: .3s;
        }

        .contact-box:hover .contact-arrow {
            color: #16a34a;
            transform: translate(3px, -3px);
        }

        .btn-outline-dark {
            display: inline-flex;
            align-items: center;
            padding: 14px 24px;
            border: 2px solid #101828;
            border-radius: 10px;
            color: #101828;
            text-decoration: none;
            font-weight: 700;
            transition: .3s;
        }

        .btn-outline-dark:hover {
            background: #101828;
            color: #fff;
        }

        .customer-images {
            overflow: hidden;
        }

        .customer-images .row {
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
        }

        .customer-images .row::-webkit-scrollbar {
            display: none;
        }

        .customer-images .col-2 {
            flex: 0 0 16.666667%;
            max-width: 16.666667%;
        }

        .customer-images img {
            cursor: pointer;
            transition: transform .2s ease;
        }

        .customer-images img:hover {
            transform: scale(1.03);
        }

        .image-preview-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(0, 0, 0, .8);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .image-preview-box {
            position: relative;
            width: 100%;
            max-width: 900px;
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }

        .image-preview-box > img {
            max-width: 100%;
            max-height: 70vh;
            width: auto;
            height: auto;
            display: block;
            margin: auto;
        }

        .image-preview-close {
            position: absolute;
            top: 8px;
            right: 12px;
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 50%;
            background: #fff;
            font-size: 28px;
            line-height: 30px;
            cursor: pointer;
            z-index: 5;
        }

        .image-preview-prev,
        .image-preview-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            border: 0;
            border-radius: 50%;
            background: rgba(0, 0, 0, .65);
            color: #fff;
            font-size: 25px;
            cursor: pointer;
            z-index: 5;
        }

        .image-preview-prev {
            left: 15px;
        }

        .image-preview-next {
            right: 15px;
        }

        .image-preview-prev:hover,
        .image-preview-next:hover {
            background: rgba(0, 0, 0, .9);
        }

        .image-preview-info {
            margin-top: 15px;
        }

        .image-preview-info h4 {
            margin: 0 0 5px;
        }

        .image-preview-info p {
            margin: 0;
            font-size: 13px;
            color: #777;
            word-break: break-all;
        }

        .contact-section {
            background: #f8fafc;
            padding-top: 20px !important;
            padding-bottom: 20px !important;
        }

        .contact-subtitle {
            display: inline-block;
            margin-bottom: 10px;
            color: #6366f1;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.8px;
        }

        .contact-title {
            margin: 0 0 16px;
            color: #111827;
            font-size: 38px;
            line-height: 1.2;
            font-weight: 700;
        }

        .contact-title span {
            color: #6366f1;
        }

        .contact-text {
            max-width: 500px;
            margin: 0 0 30px;
            color: #64748b;
            font-size: 14px;
            line-height: 1.8;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

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

        .contact-info-item strong {
            display: block;
            margin-bottom: 3px;
            color: #1e293b;
            font-size: 14px;
            font-weight: 600;
        }

        .contact-info-item p {
            margin: 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.5;
        }

        /* Form Card */

        .contact-form-card {
            padding: 8px 10px 3px 22px;
            border: 1px solid #e7eaf0;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 12px 40px rgba(15, 23, 42, .06);
        }

        .contact-form-heading {
            margin-bottom: 12px;
        }

        .contact-form-heading h3 {
            margin: 0 0 6px;
            color: #111827;
            font-size: 24px;
            font-weight: 700;
        }

        .contact-form-heading p {
            margin: 0;
            color: #64748b;
            font-size: 13px;
        }

        /* Labels */

        .form-field label {
            display: block;
            margin-bottom: 7px;
            color: #334155;
            font-size: 13px;
            font-weight: 600;
        }

        .form-field label span {
            color: #ef4444;
        }

        /* Inputs */

        .input-wrapper {
            position: relative;
        }

        .input-wrapper > i {
            position: absolute;
            top: 50%;
            left: 15px;
            z-index: 2;
            color: #94a3b8;
            font-size: 16px;
            transform: translateY(-50%);
            pointer-events: none;
            transition: .2s ease;
        }

        .input-wrapper input,
        .input-wrapper textarea {
            width: 100%;
            border: 1px solid #dfe3ea;
            border-radius: 9px;
            outline: none;
            background: #ffffff;
            color: #1e293b;
            font-family: inherit;
            font-size: 13px;
            transition: .2s ease;
        }

        .input-wrapper input {
            height: 48px;
            padding: 0 14px 0 43px;
        }

        .input-wrapper textarea {
            min-height: 125px;
            padding: 13px 14px 13px 43px;
            resize: vertical;
        }

        .input-wrapper input::placeholder,
        .input-wrapper textarea::placeholder {
            color: #a1aab8;
        }

        .input-wrapper input:focus,
        .input-wrapper textarea:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, .08);
        }

        .input-wrapper:focus-within > i {
            color: #6366f1;
        }

        .textarea-wrapper > i {
            top: 18px;
            transform: none;
        }

        /* Bottom */

        .contact-submit-area {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .contact-security {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #64748b;
            font-size: 11px;
        }

        .contact-security i {
            color: #22c55e;
            font-size: 16px;
        }

        .contact-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-width: 150px;
            height: 46px;
            padding: 0 20px;
            border: 0;
            border-radius: 9px;
            background: #6366f1;
            color: #ffffff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .2s ease;
        }

        .contact-submit:hover {
            background: #4f46e5;
            box-shadow: 0 8px 20px rgba(99, 102, 241, .22);
            transform: translateY(-1px);
        }

        .contact-submit i {
            transition: transform .2s ease;
        }

        .contact-submit:hover i {
            transform: translateX(3px);
        }

        .technologies {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 16px;
        }

        .tech {
            font-size: 15px;
            font-weight: 700;
            color: #475467;
            white-space: nowrap;
            transition: .25s ease;
        }

        .tech:hover {
            transform: translateY(-2px);
        }

        /* Technology Colors */
        .tech.php { color: #777bb4; }
        .tech.java { color: #e76f00; }
        .tech.python { color: #3776ab; }
        .tech.codeigniter { color: #ee4623; }
        .tech.laravel { color: #ff2d20; }
        .tech.magento { color: #ee672f; }
        .tech.oops { color: #6366f1; }
        .tech.ajax { color: #2563eb; }
        .tech.jquery { color: #0769ad; }
        .tech.bootstrap { color: #7952b3; }
        .tech.html5 { color: #e34f26; }
        .tech.css3 { color: #1572b6; }
        .tech.javascript { color: #d6a900; }
        .tech.vue { color: #42b883; }
        .tech.react { color: #61dafb; }
        .tech.flutter { color: #02569b; }

        .sec-col {
            background-color: #EAEAEA !important;
        }

        .contact-error {
            color: #dc3545;
            font-size: 13px;
            margin-top: 6px;
        }

        .is-invalid {
            border-color: #dc3545 !important;
        }

        .contact-form-alert {
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 18px;
            font-size: 14px;
        }

        .contact-form-success {
            color: #146c43;
            background: #d1e7dd;
            border: 1px solid #a3cfbb;
        }

        .contact-form-error {
            color: #b02a37;
            background: #f8d7da;
            border: 1px solid #f1aeb5;
        }

        .contact-submit:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .tss-logo {
            width: 88px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tss-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .logo-divider {
            width: 2px;
            height: 29px;
            background: #000000;
            flex-shrink: 0;
        }

        .navbar-brand .logo-text {
            font-size: 24px;
            line-height: 1;
            font-weight: 800;
            color: #111827;
            white-space: nowrap;
        }

        .navbar-brand .logo-text span {
            color: #FF0066;
        }

        .hero .hero-tech-line {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin: 10px 0 14px;
        }

        .hero .hero-tech-line span {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            border: 1px solid rgba(255,255,255,.30);
            border-radius: 20px;
            background: rgba(255,255,255,.08);
            color: #ffffff !important;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .hero .row {
            align-items: center !important;
        }

        .hero .analytics-wrapper {
            position: relative;
            z-index: 10;
            padding: 0 !important;
            margin: 0 !important;
        }

        .hero .analytics-card {
            padding: 0 !important;
            min-height: 0 !important;
            height: 530px;
            margin: 0 !important;
            background: #ffffff;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
        }

        .hero .hero-visual {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .hero .hero-mobile-image {
            display: block;
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            object-fit: cover;
            object-position: center;
        }

        /* =========================
           MOBILE SHOWCASE GALLERY
        ========================= */
        .tss-mobile-showcase {
            background: #f8f9fa;
            padding: 20px 0;
            width: 100%;
        }

        .tss-showcase-container {
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
        }

        .tss-showcase-grid {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: 0 !important;
            padding: 0 !important;
        }

        .tss-showcase-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 !important;
            width: 100% !important;
            flex-wrap: nowrap;
            margin: 0 !important;
            padding: 0 !important;
        }

        .tss-app-card {
            flex: 1 1 25% !important;
            width: 25% !important;
            max-width: 25% !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 1px !important;
            box-sizing: border-box;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .tss-app-card img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: contain !important;
            margin: 0 !important;
            padding: 0 !important;
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.10));
            cursor: pointer;
        }

        .tss-app-card:hover {
            transform: translateY(-4px);
            z-index: 10;
        }

        /* =========================
           POPUP / LIGHTBOX
        ========================= */

        .dashboard-popup {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.82);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999999;
            padding: 20px;
            box-sizing: border-box;
        }

        .dashboard-popup.active {
            display: flex;
        }

        .dashboard-popup-card {
            position: relative;
            width: min(92vw, 820px);
            max-height: 92vh;
            background: #ffffff;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.40);
            display: flex;
            flex-direction: column;
        }

        .dashboard-popup-image-wrap {
            position: relative;
            width: 100%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .dashboard-popup-image {
            display: block;
            width: 100%;
            height: auto;
            max-height: 72vh;
            object-fit: contain;
            padding-top: 10px;
        }

        .dashboard-popup-title {
            padding: 15px 55px 16px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: #222;
            background: #fff;
        }

        .dashboard-popup-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 38px;
            height: 38px;
            border: none;
            border-radius: 50%;
            background: #ffffff;
            color: #222;
            font-size: 24px;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
        }

        .dashboard-popup-close:hover {
            transform: scale(1.05);
        }

        .dashboard-popup-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.72);
            color: #ffffff;
            font-size: 25px;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
            z-index: 5;
        }

        .dashboard-popup-arrow:hover {
            background: rgba(0, 0, 0, 0.90);
        }

        .dashboard-popup-prev {
            left: 12px;
        }

        .dashboard-popup-next {
            right: 12px;
        }

        /* =========================
           RESPONSIVE MEDIA QUERIES
        ========================= */

        @media(max-width: 1200px) {
            .tss-app-card {
                flex: 1 1 25% !important;
                width: 25% !important;
                max-width: 25% !important;
                padding: 0 1px !important;
            }
        }

        @media(max-width: 991px) {
            .navbar {
                height: auto;
                padding: 15px 0;
            }

            .navbar-nav {
                gap: 10px;
                padding: 20px 0;
            }

            .hero {
                min-height: auto;
            }

            .hero-content {
                padding-top: 55px;
            }

            .hero-title {
                font-size: 58px;
                letter-spacing: -3px;
            }

            .analytics-wrapper {
                padding-top: 30px;
                padding-bottom: 60px;
            }

            .analytics-card {
                max-width: 600px;
                margin: auto;
            }

            .support-card {
                padding: 40px 30px;
            }

            .support-card h2 {
                font-size: 38px;
            }

            .hero .row {
                align-items: flex-start !important;
            }

            .hero .analytics-card {
                width: 100%;
                height: auto !important;
                min-height: 0 !important;
                margin-top: 30px !important;
                border-radius: 24px;
            }

            .hero .hero-visual {
                width: 100%;
                height: auto;
            }

            .hero .hero-mobile-image {
                width: 100% !important;
                height: auto !important;
                max-width: 100% !important;
                object-fit: contain;
            }
        }

        @media(max-width: 991.98px) {
            .navbar {
                width: 100%;
                max-width: 100%;
                height: auto !important;
                min-height: 59px;
                padding: 8px 0 !important;
                overflow: visible !important;
            }

            .navbar > .container {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                padding-left: 12px !important;
                padding-right: 12px !important;
                display: flex !important;
                align-items: center !important;
                flex-wrap: wrap !important;
                box-sizing: border-box;
            }

            .navbar-brand {
                display: flex !important;
                align-items: center !important;
                width: auto;
                max-width: calc(100% - 58px);
                min-width: 0;
                flex: 1 1 auto !important;
                margin: 0 !important;
                padding: 0 !important;
                gap: 6px;
                overflow: hidden;
            }

            .tss-logo {
                width: 78px !important;
                height: 42px !important;
                min-width: 78px !important;
                max-width: 78px !important;
                flex: 0 0 78px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .tss-logo img {
                display: block;
                width: 100% !important;
                height: 100% !important;
                object-fit: contain;
            }

            .logo-divider {
                width: 2px !important;
                min-width: 2px !important;
                height: 34px !important;
                flex: 0 0 2px !important;
                background: #000 !important;
            }

            .navbar-brand .logo-text {
                min-width: 0;
                font-size: 18px !important;
                line-height: 1.05;
                font-weight: 800;
                white-space: nowrap;
                overflow: hidden;
                color: #111827;
            }

            .navbar-brand .logo-text span {
                color: #FF0066;
            }

            .navbar-toggler {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 48px !important;
                height: 46px !important;
                min-width: 48px !important;
                flex: 0 0 48px !important;
                margin: 0 0 0 8px !important;
                padding: 6px !important;
                border: 1px solid #d6d6d6 !important;
                border-radius: 8px !important;
                background: #fff !important;
                box-shadow: none !important;
                flex-shrink: 0 !important;
            }

            .navbar-toggler:focus {
                box-shadow: none !important;
            }

            .navbar-toggler-icon {
                width: 25px !important;
                height: 25px !important;
            }

            .navbar-collapse {
                width: 100% !important;
                max-width: 100% !important;
                flex-basis: 100% !important;
                flex-grow: 1 !important;
                flex-shrink: 0 !important;
                margin-top: 12px !important;
                box-sizing: border-box !important;
            }

            .navbar-nav {
                width: 100% !important;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
                padding: 8px 0 12px;
                margin: 0 !important;
            }

            .navbar-nav .nav-item {
                width: 100%;
                text-align: center;
            }

            .navbar-nav .nav-link {
                display: block;
                width: 100%;
                padding: 9px 0;
                font-size: 16px;
                font-weight: 600;
            }

            .nav-btn {
                display: flex !important;
                width: fit-content;
                margin: 8px auto 12px !important;
                align-items: center;
                justify-content: center;
            }
        }

        @media(max-width: 767px) {
            html,
            body {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .hero {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }

            .hero .container,
            .hero .container-fluid {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }

            .hero .row {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 9px !important;
                padding-right: 3px !important;
                --bs-gutter-x: 0 !important;
                --bs-gutter-y: 0 !important;
                box-sizing: border-box !important;
            }

            .hero .col,
            .hero [class*="col-"] {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }

            .hero-content {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 30px 18px 25px 18px !important;
                box-sizing: border-box !important;
            }

            .hero img {
                max-width: 100% !important;
                height: auto !important;
            }

            .hero-title {
                max-width: 100% !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
            }

            .hero-description {
                max-width: 100% !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                font-size: 20px !important;
                line-height: 1.5 !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }

            .cost-section {
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }

            .cost-section .container {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding-left: 18px !important;
                padding-right: 18px !important;
                box-sizing: border-box !important;
            }

            .cost-section .row {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                --bs-gutter-x: 0 !important;
                --bs-gutter-y: 0 !important;
                box-sizing: border-box !important;
            }

            .cost-section .col-lg-6 {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                box-sizing: border-box !important;
            }

            .cost-section .section-label,
            .cost-section .section-title,
            .cost-section .section-description {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .cost-section .section-title {
                font-size: clamp(38px, 10vw, 52px) !important;
                line-height: 1.02 !important;
                margin-bottom: 0 !important;
            }

            .cost-section .section-description {
                font-size: 20px !important;
                line-height: 1.5 !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }

            .cost-section .btn-yellow {
                display: inline-flex !important;
                align-items: center !important;
                max-width: 100% !important;
                margin-top: 20px !important;
                padding: 14px 20px !important;
                box-sizing: border-box !important;
                white-space: normal !important;
                word-break: normal !important;
            }

            .cost-section .cost-card {
                width: 100% !important;
                max-width: 100% !important;
                margin-top: 30px !important;
                box-sizing: border-box !important;
            }

            .cost-section .cost-row {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .cost-section .cost-info {
                width: 100% !important;
                max-width: 100% !important;
                display: flex !important;
                justify-content: space-between !important;
                gap: 10px !important;
                box-sizing: border-box !important;
            }

            .cost-section .cost-bar {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .cost-section .saving-box {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            .tss-mobile-showcase {
                background: transparent !important;
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
            }

            .tss-showcase-container {
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .tss-showcase-grid {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .tss-showcase-row {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 0 !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 0 7px 0 !important;
                overflow: hidden !important;
            }

            .tss-app-card {
                flex: 0 0 25% !important;
                width: 25% !important;
                max-width: 25% !important;
                margin: 0 !important;
                padding: 0 1px !important;
                box-sizing: border-box !important;
            }

            .tss-app-card img {
                width: 100% !important;
                height: auto !important;
                object-fit: contain !important;
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                filter: none !important;
            }

            .contact-section {
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }

            .contact-section > .container {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                padding-left: 18px !important;
                padding-right: 18px !important;
                box-sizing: border-box !important;
            }

            #contact-info {
                padding-top: 35px !important;
                padding-bottom: 35px !important;
            }

            #contact-info .section-title {
                font-size: 27px !important;
                line-height: 1.2 !important;
            }

            #contact-info .section-description {
                font-size: 15px !important;
                line-height: 1.55 !important;
            }

            #contact-info .row {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                --bs-gutter-x: 0 !important;
                --bs-gutter-y: 16px !important;
                box-sizing: border-box !important;
            }

            #contact-info .row > [class*="col-"] {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }

            #contact-info .contact-box {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
                padding: 18px !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }

            #contact-info .contact-box > div:not(.contact-icon) {
                min-width: 0 !important;
                max-width: calc(100% - 70px) !important;
                flex: 1 1 auto !important;
            }

            #contact-info .contact-box h4,
            #contact-info .contact-box p,
            #contact-info .contact-box span {
                max-width: 100% !important;
                overflow-wrap: anywhere !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
            }

            #contact-info .contact-box span {
                font-size: 11px !important;
                line-height: 1.3 !important;
                letter-spacing: 1px !important;
            }

            #contact-info .contact-box h4 {
                font-size: 17px !important;
                line-height: 1.3 !important;
                margin-bottom: 3px !important;
            }

            #contact-info .contact-box p {
                font-size: 13px !important;
                line-height: 1.45 !important;
                margin-bottom: 0 !important;
            }

            #contact-info .contact-icon,
            #contact-info .contact-arrow {
                flex: 0 0 auto !important;
            }

            #contact-info > .container > .text-center.mt-5 {
                width: 100% !important;
                max-width: 100% !important;
                margin-top: 25px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 10px !important;
                box-sizing: border-box !important;
            }

            #contact-info .btn-yellow,
            #contact-info .btn-outline-dark {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: auto !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 11px 18px !important;
                font-size: 15px !important;
                line-height: 1.3 !important;
                box-sizing: border-box !important;
                white-space: nowrap !important;
            }

            #contact-info .btn-yellow {
                min-width: 185px !important;
            }

            #contact-info .btn-outline-dark {
                min-width: 195px !important;
            }

            #contact {
                padding-top: 35px !important;
                padding-bottom: 35px !important;
            }

            #contact > .container {
                padding-left: 18px !important;
                padding-right: 18px !important;
            }

            #contact > .container > .row {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                --bs-gutter-x: 0 !important;
                --bs-gutter-y: 22px !important;
                box-sizing: border-box !important;
            }

            #contact > .container > .row > [class*="col-"] {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }

            #contact .contact-subtitle {
                font-size: 12px !important;
                letter-spacing: 1.5px !important;
            }

            #contact .contact-title {
                width: 100% !important;
                max-width: 100% !important;
                font-size: 27px !important;
                line-height: 1.2 !important;
                margin-bottom: 12px !important;
                overflow-wrap: break-word !important;
                word-wrap: break-word !important;
            }

            #contact .contact-text {
                width: 100% !important;
                max-width: 100% !important;
                font-size: 15px !important;
                line-height: 1.55 !important;
                overflow-wrap: break-word !important;
            }

            #contact .contact-info {
                width: 100% !important;
                max-width: 100% !important;
            }

            #contact .contact-info-item {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            #contact .contact-info-item > div:last-child {
                min-width: 0 !important;
                max-width: calc(100% - 60px) !important;
            }

            #contact .contact-info-item p,
            #contact .contact-info-item strong {
                max-width: 100% !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
            }

            #contact .contact-info-item strong {
                font-size: 15px !important;
            }

            #contact .contact-info-item p {
                font-size: 13px !important;
                line-height: 1.45 !important;
            }

            #contact .contact-icon {
                flex: 0 0 auto !important;
            }

            #contact .contact-form-card {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 20px 16px !important;
                margin-top: 5px !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }

            #contact .contact-form-heading h3 {
                font-size: 21px !important;
                line-height: 1.3 !important;
            }

            #contact .contact-form-heading p {
                font-size: 13px !important;
                line-height: 1.5 !important;
            }

            #contact form {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
            }

            #contact .form-field,
            #contact .input-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            #contact .form-field label {
                font-size: 13px !important;
            }

            #contact input,
            #contact textarea {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                font-size: 14px !important;
                box-sizing: border-box !important;
            }

            #contact textarea {
                min-height: 105px !important;
            }

            #contact form > .row {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                --bs-gutter-x: 0 !important;
            }

            #contact form > .row > [class*="col-"] {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-bottom: 12px !important;
            }

            #contact .contact-submit-area {
                width: 100% !important;
                max-width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 12px !important;
                box-sizing: border-box !important;
            }

            #contact .contact-security {
                width: 100% !important;
                max-width: 100% !important;
                justify-content: center !important;
                text-align: center !important;
                font-size: 12px !important;
            }

            #contact .contact-submit {
                width: 100% !important;
                max-width: 100% !important;
                justify-content: center !important;
                font-size: 15px !important;
                box-sizing: border-box !important;
            }
        }

        @media(max-width: 575px) {
            .hero-title {
                font-size: 34px;
            }

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

            .hero-buttons {
                flex-direction: column;
                align-items: stretch;
                padding-top: 10px;
            }

            .hero-buttons a {
                text-align: center;
            }

            .customers {
                margin-top: 35px;
            }

            .analytics-card {
                padding: 25px;
            }

            .growth-number {
                font-size: 38px;
            }

            .section {
                padding: 10px 0;
            }

            .section-title {
                font-size: 40px;
            }

            .stat-number {
                font-size: 42px;
            }

            .technologies {
                gap: 15px 22px;
            }

            .tech {
                font-size: 14px;
            }

            .hero .analytics-card {
                margin-top: 25px !important;
                border-radius: 20px;
            }

            .hero .hero-mobile-image {
                width: 100% !important;
                height: auto !important;
            }

            .dashboard-popup {
                z-index: 99999;
                background: rgba(0, 0, 0, .8);
                align-items: center;
                justify-content: center;
                padding: 20px;
            }

            .dashboard-popup-card {
                width: 96vw;
                border-radius: 14px;
            }

            .dashboard-popup-image {
                max-height: 75vh;
                padding-top: 6px;
            }

            .dashboard-popup-title {
                padding: 12px 48px 13px;
                font-size: 14px;
            }

            .dashboard-popup-arrow {
                width: 36px;
                height: 36px;
                line-height: 36px;
                font-size: 21px;
            }

            .dashboard-popup-close {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 30px;
                height: 30px;
                padding: 0;
                line-height: 30px;
                font-size: 25px;
            }

            .dashboard-popup-prev {
                left: 8px;
            }

            .dashboard-popup-next {
                right: 8px;
            }

            .mb-5 {
                margin-bottom: 0rem !important;
            }
        }

        @media(max-width: 480px) {
            .navbar > .container {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .navbar-brand {
                gap: 5px;
            }

            .tss-logo {
                width: 70px !important;
                height: 40px !important;
                min-width: 70px !important;
                max-width: 70px !important;
                flex-basis: 70px !important;
            }

            .logo-divider {
                width: 2px !important;
                min-width: 2px !important;
                height: 32px !important;
            }

            .navbar-brand .logo-text {
                font-size: 20px !important;
                letter-spacing: -0.2px;
            }

            .navbar-toggler {
                width: 46px !important;
                height: 44px !important;
                min-width: 46px !important;
                flex-basis: 46px !important;
                margin-left: 6px !important;
            }
        }

        @media(max-width: 360px) {
            .navbar > .container {
                padding-left: 5px !important;
                padding-right: 3px !important;
            }

            .tss-logo {
                width: 64px !important;
                height: 38px !important;
                min-width: 64px !important;
                max-width: 64px !important;
                flex-basis: 64px !important;
            }

            .logo-divider {
                height: 30px !important;
            }

            .navbar-brand .logo-text {
                font-size: 18px !important;
            }

            .navbar-toggler {
                width: 44px !important;
                height: 42px !important;
                min-width: 44px !important;
                flex-basis: 44px !important;
                margin-left: 5px !important;
            }
        }

        .hero .container 
        {
            max-width: 1407px !important;
            width: 100% !important;
        }

       .hero .container  .col-lg-5
       {
            display: flex;
            justify-content: flex-end;
       }
.navbar .container-fluid {
    padding-left: 0px !important;
    padding-top: 0px !important;
}