:root {
            --sidebar: 21.7%;
            --r: 39px;
            --s: 37px;
            --x: 129.1px;
            --y: 10px;
            --padding-x: 40px;
            --padding-y: 6px;

            --sidebar-sm: 14.7%;
            --r-sm: 23px;
            --s-sm: 23px;
            --x-sm: 179.1px;
            --y-sm: 1px;
            --padding-x-sm: 10px;
            --padding-y-sm: 7px;

            --red: #E8313F;
        }


        @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

        body,
        html {
            margin: 0;
            height: 100%;
            font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
        }

.modal {
    display: none; /* hidden by default */
    position: fixed;
    inset: 0; /* shorthand: top/right/bottom/left = 0 */
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* space around modal */
    overflow-y: auto; /* allow scroll if form is taller */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

/* === Modal Box === */
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 420px; /* default max width */
    margin: auto;
    position: relative;
    text-align: center;
    animation: fadeInUp 0.4s ease;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .modal-content {
        max-width:!important; /* almost full width */
        border-radius: 12px; /* smaller radius on mobile */
        padding: 20px;
    }
}

@media (max-width: 360px) {
    .modal-content {
        max-width: 100%; /* edge-to-edge on tiny screens */
        padding: 16px;
    }
}

        /* === Close Button === */
        .close-btn {
            position: absolute;
            right: 20px; 
            top: 15px;
            font-size: 1.8rem;
            color: #333;
            cursor: pointer;
            transition: color 0.2s;
        }
        .close-btn:hover {
            color: #b40000;
        }

        /* === Logo === */
        .modal-logo {
            height: 70px;
            margin-bottom: 12px;
        }

        /* === Header === */
        .modal-header h2 {
            font-size: 1.5rem;
            margin-bottom: 6px;
            color: #111;
        }
        .modal-header p {
            font-size: 0.8rem;
            max-width: 320px;
            margin: 0 auto 18px;
            color: #444;
            line-height: 1.4;
        }

        /* === Form === */
        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .form-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap; /* ✅ allow wrapping on small screens */
        }

        .form-row input {
            flex: 1;
            min-width: 0; /* ✅ prevents stretching issues */
        }

        /* Inputs + textarea */
        .modal-form input,
        .modal-form textarea {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95rem;
            outline: none;
            transition: border 0.2s;
            width: 100%; /* ✅ full width by default */
            box-sizing: border-box;
        }

        .modal-form input:focus,
        .modal-form textarea:focus {
            border-color: #b40000;
        }

        .modal-form textarea {
            resize: vertical;
            min-height: 80px;
        }

        /* === Submit Button === */
        .submit-btn {
            background: #b40000;
            color: #fff;
            border: none;
            padding: 14px;
            font-size: 1rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%; /* ✅ button always full width */
        }
        .submit-btn:hover {
            background: #900000;
        }

        /* === Animation === */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* === Responsive === */
        @media(max-width: 500px) {
            .form-row {
                flex-direction: column; /* ✅ stack inputs vertically */
            }
            .modal-content {
                width: 100%;
                max-width: 95%;   /* take almost full screen width */
                border-radius: 12px; /* smaller radius looks better on mobile */
                padding: 20px;
            }
            .modal-header h2 {
                font-size: 1.3rem;
            }
        }


        .container {
            display: flex;
            position: relative;
            margin: 22px auto;
            padding: var(--padding-y) var(--padding-x) 0 var(--padding-x);
            height: 785px;
        }

        .sidebar {
            width: var(--sidebar);
            background: #fff;
            color: #000;
            position: relative;
            padding: 0px 10px;
            height: calc(100% - var(--padding-y) - 25px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .vbrand {
            display: flex;
            flex-direction: row;
            align-items: end;
            gap: 0px;
            margin-top: 0px;
        }
        
        .vbrand .name {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-weight: 600;
            font-size: 3.75em;
            letter-spacing: -2px;
            color:var(--red);
        }

        .vbrand .role {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 1.5em;
            font-weight: 600;
            color: #595959f2;
            margin:0px 2px;
        }
        
        .sec-role{
            color:#000 !important;
        }
        
        .side-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 9.5vw;
            margin-bottom: calc(1.8 * var(--btn-height, 2.6em));
        }

        .sidebar .copy {
            font-size: 1.2vw;
            line-height: 1.40;
            max-width: 32vw;
            margin-top: 6px;
            font-weight: 500;
        }

        .sidebar .social {
            margin-top: 16px;
            display: flex;
            gap: 3vw;
        }

        .sidebar .social a {
            color: #111;
            font-size: 2.188vw;
            text-decoration: none;
        }

        .social a:hover {
            color: #b40000;
            /* hover red */
        }

        .main {
            flex: 1;
            background: #fff;
            position: relative;
            height: 100%;

            border-radius: 0px;
            --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
            --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
            --_d: (var(--s) + var(--r));
            -webkit-mask:
                calc(var(--_d) + var(--x)) 100% var(--_m),
                0 calc(100% - var(--_d) - var(--y)) var(--_m),
                radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)),
                var(--_g) calc(var(--_d) + var(--x)) 0,
                var(--_g) 0 calc(-1*var(--_d) - var(--y));
            -webkit-mask-repeat: no-repeat;
            mask:
                calc(var(--_d) + var(--x)) 100% var(--_m),
                0 calc(100% - var(--_d) - var(--y)) var(--_m),
                radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)),
                var(--_g) calc(var(--_d) + var(--x)) 0,
                var(--_g) 0 calc(-1*var(--_d) - var(--y));
            mask-repeat: no-repeat;

        }

        .cta {
            position: absolute;
            bottom: var(--padding-y);
            left: var(--padding-x);
            height: auto;
            width: calc(var(--sidebar) + var(--s) + var(--r) + var(--x) - 7px);
            background: #fff;
            text-align: center;
            cursor: pointer;
            border: 2px solid #000;
            border-radius: 99px;
            padding: 8px;
            font-weight: 600;
            font-size: 1.188em;
            text-decoration: none;
            color: #111;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .cta h7 {
            margin: 0;
            flex: 1;
        }

        .cta .go {
            margin-left: auto;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--red);
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 1.438em;
            box-shadow: 0 6px 16px rgba(226, 59, 56, 0.3);
        }

        .go svg {
            width: 26px;
            height: 26px;
            font-weight: 900;
        }

        .contact-wrap {
            position: absolute;
            background-color: white;
            top: -0.1px;
            right: -0.1px;
            width: 182px;
            height: 60px;
            border-radius: 0 0 0 21px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 212;
            overflow: visible;
        }

        .contact-wrap::after {
            content: "";
            position: absolute;
            top: 0px;
            left: -38px;
            width: 38px;
            height: 25px;
            background-color: transparent;
            border-top-right-radius: 20px;
            box-shadow: 17px -2px 0px white;
            z-index: 1;
        }

        .contact-wrap::before {
            content: "";
            position: absolute;
            right: 0px;
            bottom: -25px;
            width: 38px;
            height: 25px;
            background-color: transparent;
            border-top-right-radius: 20px;
            box-shadow: 17px -2px 0px white;
            z-index: 1;
        }

        .contact-btn {
            position: absolute;
            z-index: 111;
            border: 2.3px solid #000;
            color: #000;
            background: #fff;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.063em;
            cursor: pointer;
            white-space: nowrap;
            padding: 15px 40.7px;
            top: 0px;
            right: 0px;
        }

        .hero {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            z-index: 1;
            border-radius: 43px;
        }

        .hero video,
        .hero img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) contrast(105%);
            z-index: 0;
            border-radius: 23px;
        }

        .hero .shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55));
            z-index: 1;
            border-radius: 23px;
        }

        .hero .content {
            position: relative;
            z-index: 2;
            height: 85%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            padding: 61px 61px;
        }

        .tabs {
            display: flex;
            gap: 28px;
            align-items: center;
        }

        .tab {
            color: #e9e9e9;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.25em;
        }

        .tab.active {
            background: #fff;
            color: #000;
            padding: 12px 30px;
            border-radius: 42px;
            font-weight: 600;
        }

        .headline {
            max-width: 660px;
            color: #fff;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.4px;
            font-size: 3.7vw;
            font-family: "Public Sans", sans-serif;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .char-wrap {
            display: inline-block;
            overflow: hidden;
            height: 1.1em;
        }

        .char {
            display: inline-block;
            transform: translateY(110%);
            opacity: 0;
            white-space: pre;
        }

        .subline {
            color: #e8e8e8;
            margin-top: 0px;
            max-width: 520px;
            font-size: 1.188em;
            line-height: 1.55;
            padding: 12px 18px;
        }

        .explore-badge {
            position: absolute;
            left: 68px;
            bottom: 128px;
            width: 105px;
            height: 105px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.25);
            cursor: pointer;
        }

        .explore-badge svg {
            width: 103px;
            height: 104px;
        }

        .down-arrow {
            width: 34px !important;
            height: 34px !important;
        }

        .explore-badge .arrow {
            position: absolute;
            font-size: 1.125em;
            color: #fff;
        }

        .stats {
            display: flex;
            justify-content: end;
            align-items: flex-end;
            gap: 25px;
            color: #fff;
        }

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stat .num {
            font-size: 2.813em;
            font-weight: 600;
        }

        .stat .label {
            font-size: 0.813em;
            letter-spacing: 0.1em;
            opacity: 0.9;
            margin-top: 6px;
        }

        .divider {
            width: 1.5px;
            height: 35px;
            background: rgba(255, 255, 255, 0.6);
            align-self: center;
        }

        .ribbon {
            position: relative;
            width:100%;
            background:var(--red);
            padding: 6px 0;
            overflow: hidden;
            margin-top: 28px;
        }

        .items {
            animation: scroll-left-ri 20s linear infinite;
            display: flex;
            gap: 60px;
            white-space: nowrap;
            font-size: 1.188em;
            font-weight: 500;
            color: #fff;
            letter-spacing: 0.5px;
        }
        
        @keyframes scroll-left-ri {
            from {
                transform: translateX(0);
            }

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

        .items h7 {
            display: inline-block;
        }

        /*============================ Section Container ========================================*/

        .services-section {
            max-width: 1600px;
            margin: 29px auto;
            padding: 0;
        }

        .services-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 86px;
            border-top: 2px solid #000;
            border-bottom: 2px solid #000;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(40px);
        }

        .services-header h2 {
            font-size: 2.4rem;
            font-weight: bold;
            margin: 0;
        }

        .services-header h2 span {
            color: var(--red);
        }

        .services-header p {
            font-size: 1.8rem;
            color: #111;
            position: relative;
            display: inline-block;
            cursor: pointer;
            text-align: end;

            background: linear-gradient(90deg, #111 0%, #000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background 0.3s;
            font-weight: 600;
        }

        .services-header p.hover-glow {
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
                    #ff2a2a 0%,
                    #000 35%,
                    #5a5a5a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-bottom: 2px solid #000;
            padding: 0px var(--padding-x);
            transform: translateY(40px);
            overflow: hidden;
        }

        .service-card {
            border-left: 2px solid #000;
            padding: 10px 35px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            transform: translateY(60px);
        }

        .service-card:first-child {
            border-left: none;
        }

        .service-card:last-child {
            border-right: none;
        }

        .service-card img {
            width: 100%;
            height: auto;
            border-radius: 13px;
            margin: 15px 0;
        }

        .service-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .service-card p {
            font-size: 17px;
            line-height: 1.6;
            max-width: 100%;
            color: #333;
        }

        .highlight-red {
            color: var(--red);
            font-weight: bold;
        }

        /*================================= portfolio section ================================= */

        .portfolio-section {
            max-width: 1600px;
            margin: 29px auto;
            margin-top: 0px !important;
            padding: 0;
        }

        .portfolio-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 86px;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(40px);
        }

        .portfolio-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
        }

        .portfolio-header h2 span {
            color: var(--red)
                /* red */
        }

        .portfolio-header p {
            font-size: 1.8rem;
            color: #111;
            position: relative;
            display: inline-block;
            cursor: pointer;
            text-align: end;

            background: linear-gradient(90deg, #111 0%, #000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background 0.3s;
            font-weight: 600;
        }

        .portfolio-header-right p.hover-glow {
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
                    #ff2a2a 0%,
                    #000 35%,
                    #5a5a5a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .portfolio-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #e63946;
            color: #fff;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            text-decoration: none;
            transition: 0.3s;
            box-shadow: 0 6px 16px rgba(226, 59, 56, 0.3);

        }

        .portfolio-arrow:hover {
            background: #b22234;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
            padding: 29px calc(var(--padding-x) + 35px);
        }

        .portfolio-item {
            width: 100%;
            height: 260px;
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            display: block;
            transition: transform 0.4s ease;
        }

        .portfolio-item video {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            display: block;
            transition: transform 0.4s ease;
        }

        .portfolio-header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .pagination {
            display: flex;
            align-items: center;
            gap: 3px;
            justify-content: end;
            margin-top: 20px;
            font-family: sans-serif;
            padding: 0px 86px 0px calc(var(--padding-x) + 35px);
            height: auto;
        }

        .page-box {
            background: #e63946;
            /* red rectangle */
            color: #fff;
            padding: 10px 10px;
            border-radius: 6px;
            font-size: 18px;
            font-weight: bold;
            min-width: 60px;
            text-align: center;
            transition: all 0.3s ease;
        }

        button.prev,
        button.next {
            background-color: transparent;
            color: #000;
            border: none;
            padding: 10px 10px;
            font-size: 18px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: none;
        }

        button.prev:disabled,
        button.next:disabled {
            color: #ccc;
        }

        button.prev:hover:not(:disabled),
        button.next:hover:not(:disabled) {
            color: var(--red);
        }

        /* ====================================== Why Choose =============================== */


        .why-choose-section {
            max-width: 1600px;
            margin: 29px auto;
            margin-top: 0px !important;
            padding: 0;
        }

        .why-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 86px;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(40px);
        }

        .why-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
        }

        .why-header h2 span {
            color: var(--red);
        }

        .why-header p {
            font-size: 1.8rem;
            color: #111;
            position: relative;
            display: inline-block;
            cursor: pointer;
            text-align: end;

            background: linear-gradient(90deg, #111 0%, #000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background 0.3s;
            font-weight: 600;
        }

        .why-header p.hover-glow {
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
                    #ff2a2a 0%,
                    #000 35%,
                    #5a5a5a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .why-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 29px calc(var(--padding-x) + 35px);
            gap: 40px;
            align-items: center;
        }

        .why-card {
            border: 2px solid #000;
            padding: 10px 27px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }

        .why-card:nth-child(odd) {
            border-right: 0px;
        }

        .why-card:nth-child(-n+2) {
            border-bottom: 0px;
        }

        .why-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .why-card p {
            font-size: 17px;
            line-height: 1.6;
            max-width: 100%;
            color: #333;
        }

        .why-image img {
            width: 100%;
            object-fit: cover;
            height: 100%;
            border-radius: 40px;
        }

        /* ================================ pan india ======================================== */

        .pre-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            padding: 40px 86px;
        }

        .pre-map {
            position: relative;
            width: 100%;
            max-width: 900px;
        }

        .india-map {
            width: 100%;
            border-radius: 12px;
        }

        .pin {
            position: absolute;
            width: 18px;
            height: 18px;
            background: var(--red);
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
            transform: translate(-50%, -50%);
        }

        .pre-form {
            background: #f9f9f9;
            padding: 30px;
            border: 1px solid black;
            border-radius: 12px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);
            max-width: 62%;
            margin: 0px auto;
        }

        .pre-form h3 {
            margin: 0px;
            font-size: 1.7rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .pre-form p {
            font-size: 0.95rem;
            margin-bottom: 33px;
            color: #737373;
        }

        .pre-form input,
        .pre-form textarea {
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 0.95rem;
            box-sizing: border-box;
            /* ✅ prevents overflow */
        }

        .pre-form button {
            width: 100%;
            padding: 14px;
            background: var(--red);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s ease;
        }

        .pre-form button:hover {
            background: #d51a1a;
        }


        /* -============================= client ========================================== */

        .clients-logo-grid {
            padding: 10px 0px;
            margin: 29px 0 69px 0;
        }

        .clients-logo-slider {
            overflow: hidden;
            background: white;
            padding: 20px 0;
            position: relative;
        }

        .clients-track {
            display: flex;
            width: max-content;
            animation: scroll-left 20s linear infinite;
        }

        .clients-track img {
            max-height: 100px;
            margin: 0 40px;
            object-fit: contain;
            
        }


        /* Infinite scrolling animation */
        @keyframes scroll-left {
            from {
                transform: translateX(0);
            }

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


        /* ==============================  Review box =============================== */

    .reviews-section {
        text-align: center;
        border-bottom: 2px solid black;
    }

    .swiper {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 0px;
    }

    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .card {
        width: 100%;
        border: 1px solid #111;
        border-radius: 20px;
        overflow: hidden;
        background: #fff;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .video-wrap {
        width: 100%;
    }

    video.review-video {
        width: 100%;
        height: 250px;
        border-radius: 20px;
        display: block;
        background: #000;
    }

    .company-name {
        width: 100%;
        text-align: center;
        font-weight: 600;
        padding-top: 6px;
        font-size: 16px;
    }

    .swiper-pagination-bullet-active { background: #e74c3c; }

        /* ======================================== Footer Section ============================================ */

        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 86px;
            background: #fff;
            border-top: 1px solid #eee;
            font-family: Arial, sans-serif;
            margin-top: 79px;
            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.08);
        }

        .footer-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .footer-logo {
            height: 60px;
            width: auto;
        }

        .footer-center p {
            margin: 0;
            font-size: 1rem;
            color: #111;
            font-weight: 500;
        }

        .footer-right{
            display: flex;
            gap:26px;
        }

        .footer-right a {
            font-size: 1.8rem;
            color: #000;
            transition: color 0.3s;
        }

        .footer-right a:hover {
            color: #b40000;
            /* hover red */
        }


        /*===================================================================================================================================
    responsive code
 ===============================================================================================================  */

        @media only screen and (max-width: 767px) {
            .container {
                margin: 12px auto;
                width: auto;
                padding: var(--padding-y-sm) var(--padding-x-sm) 0 var(--padding-x-sm);
                flex-direction: column;
                height: 140vw;
                overflow: hidden;
            }

            .sidebar {
                width: 100%;
                padding: 0px 0px;
                flex-direction: row;
                height: auto;
                margin-bottom: 7px;
            }

            .vbrand {
                display: flex;
                flex-direction: column;
                align-items: start;
            }
    
            .sec-role{
                margin-left:0px;
            }
        
            .vbrand .name {
                writing-mode: horizontal-tb;
                transform: rotate(0deg);
                font-size: 2em;
            }

            .vbrand .role {
                writing-mode: horizontal-tb;
                transform: rotate(0deg);
                font-size: 0.9em;
            }
            

            .side-content {
                display: flex;
                flex-direction: column;
                justify-content: start;
                height: auto;
                margin-bottom: calc(0.2 * var(--btn-height, 50px));
            }

            .sidebar .copy {
                font-size: 3.5vw;
                line-height: 1.40;
                max-width: 240px;
                margin-top: 3px;
                padding: 0px 3px;
            }

            .sidebar .social {
                margin-top: 10px;
                gap: 30px;
            }

            .sidebar .social a {
                font-size: 1.8em;
            }

            .main {
                border-radius: 0px;
                --_m: /calc(2*var(--r-sm)) calc(2*var(--r-sm)) radial-gradient(#000 70%, #0000 72%);
                --_g: conic-gradient(from 180deg at var(--r-sm) calc(100% - var(--r-sm)), #0000 25%, #000 0);
                --_d: (var(--s-sm) + var(--r-sm));
                -webkit-mask:
                    calc(var(--_d) + var(--x-sm)) 100% var(--_m),
                    0 calc(100% - var(--_d) - var(--y-sm)) var(--_m),
                    radial-gradient(var(--s-sm) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r-sm) + var(--x-sm)) calc(-1*var(--r-sm) - var(--y-sm)),
                    var(--_g) calc(var(--_d) + var(--x-sm)) 0,
                    var(--_g) 0 calc(-1*var(--_d) - var(--y-sm));
                -webkit-mask-repeat: no-repeat;
                mask:
                    calc(var(--_d) + var(--x-sm)) 100% var(--_m),
                    0 calc(100% - var(--_d) - var(--y-sm)) var(--_m),
                    radial-gradient(var(--s-sm) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r-sm) + var(--x-sm)) calc(-1*var(--r-sm) - var(--y-sm)),
                    var(--_g) calc(var(--_d) + var(--x-sm)) 0,
                    var(--_g) 0 calc(-1*var(--_d) - var(--y-sm));
                mask-repeat: no-repeat;
            }


            .cta {
                bottom: 0px;
                left: var(--padding-x-sm);
                width: calc(var(--s-sm) + var(--r-sm) + var(--x-sm) - 4px);
                padding: 3px;
                font-size: 3.4vw;
            }

            .btn-txt {
                display: none;
            }

            .cta .go {
                width: 32px;
                height: 32px;
            }

            .go svg {
                width: 16px;
                height: 16px;
            }

            .contact-wrap {
                width: 7.8rem;
                height: 2.6rem;
            }

            .contact-wrap::after {
                left: -38px;
                width: 38px;
            }

            .contact-wrap::before {
                right: 0px;
                bottom: -25px;
            }

            .contact-btn {
                font-size: 0.82rem;
                padding: 0.5rem 1.42rem;
            }

            .hero {
                height: 100%;
                border-radius: 33px;
            }

            .hero .content {
                padding: 24px 24px;
            }

            .tabs {
                gap: 3vw;
            }

            .tab {
                font-size: 0.9rem;
            }

            .tab.active {
                padding: 7px 17px;
            }

            .headline {
                max-width: 100%;
                font-size: 6vw;
                letter-spacing: 2.4px;
            }

            .subline {
                max-width: 100%;
                font-size: 3vw;
                line-height: 1.55;
                padding: 10px 10px;
            }

            .explore-badge {
                left: 25px;
                bottom: 81px;
                width: 18vw;
                height: 18vw;
            }

            .explore-badge svg {
                width: 18vw;
                height: 18vw;
            }

            .down-arrow {
                width: 5vw !important;
                height: 5vw !important;
            }

            .stats {
                gap: 10px;
                margin-bottom: 12px;
            }

            .stat .num {
                font-size: 6vw;
            }

            .stat .label {
                font-size: 0.6em;
                margin-top: 5px;
            }

            /* ====== Services Section ======*/

            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                border-bottom: 1px solid #000;
                padding: 0px 0px;
            }

            .services-header {
                flex-direction: column;
                text-align: center;
                padding: 25px 6px;
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
            }

            .services-header h2 {
                font-size: 1.8rem;
            }

            .services-header p {
                text-align: center;
                margin-top: 14px;
                font-size: 1rem;
            }

            .service-card {
                border: none;
                border-bottom: 0px solid #000;
                padding: 20px 13px;
            }

            .service-card h3 {
                font-size: 13px;
            }

            .service-card p {
                font-size: 14px;
            }

            .service-card:nth-child(1) {
                border-bottom: 1px solid #000;
            }

            .service-card:nth-child(2) {
                border-bottom: 1px solid #000;
            }

            .service-card:nth-child(odd) {
                border-right: 1px solid #000;
            }

            /* ====== Project Section ====== */

            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
                padding: 0px 11px;
            }

            .portfolio-header {
                flex-direction: column;
                text-align: center;
                padding: 25px 6px;
            }

            .portfolio-header h2 {
                font-size: 1.8rem;
            }

            .portfolio-header-right p {
                text-align: start;
                margin-top: 14px;
                font-size: 1rem;
            }

            .portfolio-header-right .portfolio-arrow {
                width: 32px;
                height: 32px;
            }

            .portfolio-arrow svg {
                width: 16px;
                height: 16px;
            }

            .portfolio-item {
                width: 100%;
                height: 169px;
            }

            .pagination {
                padding: 0px 8px 20px 11px;
            }

            .page-box {
                padding: 4px 1px;
            }

            .why-header {
                flex-direction: column;
                text-align: center;
                padding: 25px 6px;
            }

            .why-header h2 {
                font-size: 1.8rem;
            }

            .why-header p {
                text-align: center;
                margin-top: 14px;
                font-size: 1rem;
            }

            .why-grid {
                grid-template-columns: repeat(1, 1fr);
                padding: 0px 11px;
                gap: 25px;
            }

            .why-card {
                padding: 20px 13px;
                border: 1px solid black;
            }

            .why-card h3 {
                font-size: 13px;
            }

            .why-card p {
                font-size: 14px;
            }

            .why-image img {
                height: 40vh;
                border-radius: 25px;
            }

            /* =====  pan india ===== */

            .pre-grid {
                grid-template-columns: 1fr;
                padding: 0px 11px;
            }

            .pre-map {
                max-width: 100%;
                max-height: 100vh;
            }

            #india-map {
                height: 400px !important;
                width: 100% !important;
                /* smaller on mobile */
            }

            .pre-form {
                padding: 25px;
                border: 1px solid black;
                max-width: 100%;
                margin: 0px auto;
            }

            /* ======= Our client ======== */

            .clients-logo-grid {
                margin: 0px 0 49px 0;
            }

            .clients-track img {
                max-height: 70px;
                margin: 0 20px;
            }

            video.review-video {
                width: 100%;
                height: 210px;
            }

            .footer {
                padding: 18px 11px;
                margin-top: 49px;
                flex-direction: column;
                gap:15px;
            }

            .footer-left {
                gap: 6px;
            }

            .footer-logo {
                height: 60px;
                width: 60px;
            }

            .footer-center p {
                font-size: 1rem;
                color: #111;
                font-weight: 500;
            }

            .footer-right a {
                font-size: 1.8rem;
                color: #000;
                transition: color 0.3s;
            }

            .footer-right a:hover {
                color: #b40000;
                /* hover red */
            }

            .reviews-section{
                border-bottom:1px solid black;
            }
        }

        /* Tablets (768px to 1024px) */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .stat .num {
                font-size: 2.113em;
            }

            .stat .label {
                font-size: 0.73em;
                letter-spacing: 0.1em;
                opacity: 0.9;
                margin-top: 6px;
            }

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

            .services-header {
                flex-direction: column;
                text-align: center;
            }

            .services-header p {
                text-align: center;
                margin-top: 14px;
                font-size: 1.3rem;
            }

            .service-card {
                border: none;
                border-bottom: 0px solid #000;
                padding: 20px 29px;
            }

            .service-card:nth-child(1) {
                border-bottom: 1px solid #000;
            }

            .service-card:nth-child(2) {
                border-bottom: 1px solid #000;
            }

            .service-card:nth-child(odd) {
                border-right: 1px solid #000;
            }

            .portfolio-header {
                flex-direction: column;
                text-align: center;
            }

            .portfolio-header-right p {
                text-align: center;
                margin-top: 14px;
                font-size: 1.3rem;
            }
            .swiper-slide{
                max-width: 100%;
                width: 100%;
            }




                        .why-header {
                flex-direction: column;
                text-align: center;
            }

            .why-header p {
                text-align: center;
                margin-top: 14px;
                font-size: 1.3rem;
            }

            .why-grid {
                grid-template-columns: repeat(1, 1fr);
                gap: 25px;
            }

            .why-card {
                padding: 20px 13px;
                border: 1px solid black;
            }

            .why-card p {
                font-size: 17px;
            }

            .why-image img {
                height: 40vh;
                border-radius: 25px;
            }

            /* =====  pan india ===== */

            .pre-grid {
                grid-template-columns: 1fr;
                padding: 0px 11px;
            }

            .pre-map {
                max-width: 100%;
                max-height: 100vh;
            }

            #india-map {
                height: 400px !important;
                width: 100% !important;
                /* smaller on mobile */
            }

            .pre-form {
                padding: 25px;
                border: 1px solid black;
                max-width: 60%;
                margin: 0px auto;
            }

            /* ======= Our client ======== */

            .clients-section{
                margin-top:69px !important;
            }

            .clients-logo-grid {
                margin: 0px 0 69px 0;
            }

            .clients-track img {
                max-height: 70px;
                margin: 0 20px;
            }

            video.review-video {
                width: 100%;
                height: 210px;
            }

            .footer {
                padding: 18px 27px;
                margin-top: 49px;
                flex-direction: row;
                gap:15px;
            }

            .footer-left {
                gap: 6px;
            }

            .footer-logo {
                height: 60px;
                width: 60px;
            }

            .footer-center p {
                font-size: 1.3rem;
                color: #111;
                font-weight: 500;
            }

            .footer-right a {
                font-size: 1.8rem;
                color: #000;
                transition: color 0.3s;
            }

        }

        .phone-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #E8313F;
  color: #fff;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* Modal Background */
.modal-c {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}

/* Modal-c Content */
.modal-c-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  position: fixed;      /* stays fixed */
  bottom: 20px;         /* distance from bottom */
  right: 20px;          /* distance from right */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  font-family: Arial, sans-serif;
  z-index: 10000;       /* make sure it’s above everything */
}

/* Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.modal-c-content h3 {
  margin: 0 0 12px;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
}

.modal-c-content p {
  margin: 6px 0;
}

.modal-c-content a {
  color: #E8313F !important;
  text-decoration: none;
}

.modal-c-content a:hover {
  text-decoration: underline;
}