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

    body{
        font-family:'Poppins',sans-serif;
        overflow-x:hidden;
        background:#fff;
    }

    a{
        text-decoration:none;
    }


    /* ==============================================================
                                TOPBAR 
    ================================================================ */ 

    .topbar{
        background: transparent;
        color: #fff;
        font-size: 13px;
        padding: 10px 0;
        position: absolute;
        width: 100%;
        z-index: 999;
    }

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

    .navbar{
        background: rgba(245, 245, 245, 0.55); /*rgba(231, 236, 240, 0.539);*/
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: none;
        position: absolute;
        width: 100%;
        top: 45px;
        z-index: 999;
    }
    
    
    /* LOGO */
    
    .logo{
        height:70px;
        width:auto;
    }
    .navbar-brand{
        color: #fff;
    }

    /* NAV LINKS */

    .nav-link{
        color:#fff !important;
        font-weight:600;
        margin:0 15px;
        position:relative;
        transition:0.3s;
    }
    
    .nav-link:hover{
        color:#1d59c2 !important; 
    }
    
    .nav-link::after{
        content:'';
        position:absolute;
        left:0;
        bottom:-5px;
        width:0%;
        height:2px;
        background:#1d59c2;
        transition:0.3s;
    }
    
    .nav-link:hover::after{
        width:100%;
    }
    
    /* CONTACT BUTTON */
    
    .contact-btn{
        display:flex;
        align-items:center;
        background:#088ec1;
        border-radius:8px;
        overflow:hidden;
        color:#fff;
        text-decoration:none;
        font-weight:600;
        transition:0.3s;
        width: fit-content;
    }
    
    .contact-btn span{
        padding:14px 22px;
    }
    
    .contact-btn .divider{
        width:1px;
        height:30px;
        background:rgba(255,255,255,0.4);
    }
    
    .arrow-box{
        width:65px;
        height:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
    }
    
    .contact-btn:hover{
        background:#1d59c2;
        color:#fff;
    }

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

    .hero{
        min-height:100vh;
        background:
            linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
            url('../image/hero-background-image.jpg');
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        display:flex;
        align-items:center;
        color:#fff;
        padding:160px 0 100px;
        position:relative;
        overflow:hidden;
    }
    
    /* HERO CONTENT */
    
    .hero-content h1{
        font-size:25px;
        font-weight:500;
        line-height:1.5;
    }
    .hero-title{
        font-style:italic;
    }
    
    .hero-content p{
        font-size:18px;
        line-height:1.8;
        color:#fff;
        margin:30px 0;
    }
    
    .highlight-text{
        color:#0ba4e0;
        font-weight:700;
    }
    
    /* SIMPLE TEXT */
    
    .hero-quote-text{
        font-size:18px;
        font-weight:400;
        margin-bottom:30px;
        color:#fff;
    }
    
    /* FORM */
    
    .hero-form{
        max-width:520px;
    }
    
    /* ================================================================
       HERO FORM 
    ================================================================ */
    
    .hero-form-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    /* Email field */
    .hero-field {
        flex: 1;
        position: relative;
    }
    .hero-field .hf-icon {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255,255,255,0.55);
        font-size: 12px;
        pointer-events: none;
    }
    .hero-field input {
        width: 100%;
        padding: 11px 10px 11px 32px;
        border: 1px solid rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.10);
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        color: #fff;
        transition: border-color 0.25s;
        outline: none;
        border-radius: 0;
    }
    .hero-field input::placeholder { color: rgba(255,255,255,0.55); }
    .hero-field input:focus { border-color: #12baf5; }
    
    /* Dropdown */
    .hero-select-wrap {
        flex: 1;
        position: relative;
    }
    .hero-select-wrap select {
        width: 100%;
        padding: 11px 28px 11px 10px;
        border: 1px solid rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.10);
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        color: rgba(255,255,255,0.70);
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        outline: none;
        transition: border-color 0.25s;
    }
    .hero-select-wrap select:focus { border-color: #12baf5; }
    .hero-select-wrap select option { background: #1a1a2e; color: #fff; }
    .hero-select-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255,255,255,0.55);
        pointer-events: none;
        font-size: 11px;
    }
    
    /* Feedback message */
    .hero-form-msg {
        font-size: 12px;
        min-height: 18px;
        margin-bottom: 6px;
        color: #12baf5;
    }
    .hero-form-msg.error { color: #ff6b6b; }
    
    /* BUTTON */
    
    .consult-btn{
        background:#000;
        color:#fff;
        border:none;
        padding:9px 23px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:2px;
        transition:0.3s;
    }
    
    .consult-btn:hover{
        background:#0ba4e0;
    }
    
    /* RIGHT IMAGE */
    
    .hero-right-image{
        width:100%;
        max-width:650px;
        object-fit:contain;
    }


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

    .services{
        position:relative;
        padding:45px 0 65px;

        background-image:
            linear-gradient(
                to bottom,
                rgba(75,75,75,0.78) 0%,
                rgba(75,75,75,0.78) 50%,
                transparent 10%,
                transparent 100%
            ),
            url('../image/services-background-img.png');
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        overflow:visible;
    }

    /* TITLE */

    .section-title-main-service{
        margin-bottom:60px;
        position:relative;
        z-index:5;
    }

    .section-title-main-service h2{
        font-size:32px;
        font-weight:400;
        color:#fff;
    }

    .highlight-text-services{
        color:#0ba4e0;
        font-weight:400;
    }

    /* =========================
       SLIDER
    ========================= */

    .services-slider-wrapper{
        position:relative;
        padding:0 60px;
    }

    .services-slider{
        overflow-x:hidden;
        overflow-y:visible;
        margin:0 -15px;
        padding-top:20px;
        padding-bottom:80px;
    }


    .services-track{
        display:flex;
        transition:transform 0.65s ease;
        will-change:transform;
    }

    .service-slide{
        min-width:33.333333%;
        flex:0 0 33.333333%;
        padding:0 15px;
    }


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

    .service-card{
        position:relative;
        border-radius:28px;
        min-height:420px;
        padding:40px 38px 95px;
        overflow:visible;
        transition:0.4s ease;
        /*box-shadow:0 12px 30px rgba(0,0,0,0.42);*/
        background-size:cover !important;
        background-position:center !important;
        background-repeat:no-repeat !important;
    }

    .service-card:hover{
        transform:translateY(-10px);
    }

    /* HEADINGS */
    .service-card h4{
        font-size:20px;
        line-height:1.3;
        font-weight:600;
        color:#fff;
        text-align: center;
        margin-bottom:28px;
        text-transform:uppercase;
    }

    /* LIST */
    .service-card ul{
        padding-left:22px;
        margin:0;
    }

    .service-card ul li{
        font-size:16px;
        margin-bottom:14px;
        color:#fff;
        font-weight:500;
    }

    /* CIRCLE */
    .service-circle{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        bottom:-52px;
        width:130px;
        height:130px;
        border-radius:50%;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        border:8px solid #edf4f8;
        /*box-shadow:0 10px 25px rgba(0,0,0,0.12);*/
    }

    .service-circle img{
        width:105px;
        height:105px;
        border-radius:50%;
        object-fit:cover;
    }

    /* =============================
        SERVICE SECTION BACKGROUNDS
    ================================ */

    .mobile-bg{
        background:
            linear-gradient(
                rgba(20,185,246,0.88),
                rgba(23,158,216,0.88)
            );
            /*linear-gradient(*/
            /*    rgba(20,185,246,0.88),*/
            /*    rgba(23,158,216,0.88)*/
            /*),*/
            /*url('image/mobile-bg.jpg');*/
    }

    .website-bg{
        background:
            linear-gradient(
                rgba(0,0,0,0.88),
                rgba(0,0,0,0.88)
            );
            /*linear-gradient(*/
            /*    rgba(0,0,0,0.88),*/
            /*    rgba(0,0,0,0.88)*/
            /*),*/
            /*url('image/website-bg.jpg');*/
    }

    .software-bg{
        background:
            linear-gradient(
                rgba(0,0,0,0.88),
                rgba(0,0,0,0.88)
            );
            /*linear-gradient(*/
            /*    rgba(0,0,0,0.88),*/
            /*    rgba(0,0,0,0.88)*/
            /*),*/
            /*url('image/software-bg.jpg');*/
    }

    .ecommerce-bg{
        background:
            linear-gradient(
                rgba(0,0,0,0.88),
                rgba(0,0,0,0.88)
            );
            /*linear-gradient(*/
            /*    rgba(0,0,0,0.88),*/
            /*    rgba(0,0,0,0.88)*/
            /*),*/
            /*url('image/mobile-bg.jpg');*/
    }

    .marketing-bg{
        background:
            linear-gradient(
                rgba(0,0,0,0.88),
                rgba(0,0,0,0.88)
            );
            /*linear-gradient(*/
            /*    rgba(0,0,0,0.88),*/
            /*    rgba(0,0,0,0.88)*/
            /*),*/
            /*url('image/website-bg.jpg');*/
    }

    /* ============================
        SERVICE SECTION NAVIGATION
    =============================== */

    .service-nav{
        position:absolute;
        top:42%;
        transform:translateY(-50%);

        width:45px;
        height:45px;

        border:none;
        border-radius:50%;

        background:#000;
        color:#fff;

        z-index:50;

        font-size:18px;
        cursor:pointer;

        transition:0.3s ease;
    }

    .service-nav:hover{
        background:#10b9f5;
    }

    .prev-btn{
        left:0;
    }

    .next-btn{
        right:0;
    }



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

    .about{
        padding:40px 0;
        background:#fff;
    }
    
    /* LEFT SIDE */
    .about-images-wrapper{
        position:relative;
    }

    /* LEFT TOP IMAGE */
    .about-top-image{
        position:relative;
        width:100%;
        height:300px;
        object-fit:contain;
        display: block;
        padding-bottom:20px;
        overflow:hidden;
    }
    .about-top-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    /* LEFT BOTTOM IMAGE */
    .about-bottom-image{
        width:100%;
        height:300px;
        padding-bottom:20px;
        overflow:hidden;
    }

    .about-bottom-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }


    /* RIGHT SIDE */
    .about-content{
        padding-left:15px;
    }

    /* TITLE ROW */
    .about-title-row{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:25px;
    }

    /* BLUE DOT */
    .about-dot{
        width:12px;
        height:12px;
        border-radius:50%;
        background:#12baf5;
        flex-shrink:0;
    }

    /* TITLE */
    .about-content h5{
        margin:0;
        color:#12baf5;
        font-size:30px;
        font-weight:600;
        letter-spacing:2px;
    }

    /* TEXT */
    .about-content p{
        font-size:16px;
        line-height:1.8;
        color:#444;

        margin-bottom:10px;
    }

    /* BUTTON AREA */
    .about-btn-wrapper{
        margin-bottom:5px;
    }

    /* BUTTON */
    .about-btn{
        display:inline-block;
        background:#12baf5;
        color:#fff;
        padding:12px 28px;
        border-radius:30px;
        font-size:14px;
        font-weight:700;
        transition:0.3s ease;
    }

    .about-btn:hover{
        background:#0b95c9;
        color:#fff;
    }

    /* STATS IMAGE */
    .about-stats-image {
        overflow: hidden;
        height: calc(100% - 80px);
    }
    
    .about-stats-image img {
        width: 100%;
        margin-top: -40px;
        margin-bottom: -40px;
    }

 

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

    .products{
        background:#efefef;
        padding:90px 0;
    }

    /* TITLE */

    .products-heading{
        text-align:center;
        margin-bottom:60px;
    }

    .products-heading h2{
        font-size:34px;
        font-weight:300;
        letter-spacing:3px;
        line-height:1.7;
        color:#111;
    }

    .products-heading span{
        color:#12baf5;
        font-weight:800;
    }

    /* =========================
       PRODUCTS SLIDER
    ========================= */


    .products-slider{
        overflow:hidden;
        width: 100%;
    }

    .products-track{
        display:flex;
        will-change: transform;
        transition:transform 0.7s ease;
    }

    /* SLIDE */
    /*.product-slide {*/
    /*    flex: 0 0 100%;*/
    /*    scroll-snap-align: start;*/
    /*}*/
    .product-slide{
        min-width:33.333333%;
        flex:0 0 33.333333%;
        scroll-snap-align: start;
        padding:20px 15px 0px;
    }

    /* CARD */

    .product-card{
        background:#fff;
        border-radius:18px;
        overflow:hidden;
        transition:0.4s ease;
        box-shadow:0 8px 25px rgba(0,0,0,0.08);
    }

    .product-card:hover{
        transform:translateY(-10px);
    }

    /* =========================
       IMAGE AREA
    ========================= */

    .product-image-area{
        background:#12baf5;
        height:250px;
        display:flex;
        align-items:center;
        justify-content:center;
        /*padding:20px;*/
    }

    /* IMAGE */

    .product-image-area img{
        width:90%;
        height:90%;
        object-fit:contain;
        display:block;
    }

    /* =========================
       CONTENT AREA
    ========================= */

    .product-content{
        background:#fff;
        text-align:center;
        padding:28px 20px;
    }

    /* TITLE */

    .product-content h3{
        font-size:20px;
        font-weight:600;
        color:#12baf5;
        margin-bottom:10px;
    }

    /* SUBTITLE */

    .product-content h4{
        font-size:15px;
        font-weight:500;
        color:#222;
        margin:0;
    }


    
    /* =========================
       BOTTOM ROW
    ========================= */

    .products-bottom-row{
        display:flex;
        justify-content:space-between;
        align-items:center;

        margin-top:28px;
    }

    /* LEFT TEXT */

    .products-bottom-text{
        font-size:15px;
        font-weight:500;
        font-style:italic;

        color:#6f6f6f;

        letter-spacing:0.5px;
    }

    /* DOTS */

    .product-dots{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .product-dots span{
        width:12px;
        height:12px;

        border-radius:50%;

        background:#cfd8df;

        transition:0.3s ease;
    }

    .product-dots span.active{
        background:#12baf5;
    }



/* ==========================================================================
                                WHY CHOOSE US
============================================================================= */

    .why{
        padding:57px 0;
        background:url("../image/why_us.png");
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;
    }

    /* SMALL TITLE */
    .why-small-title{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:22px;
    }

    /* BLUE DOT */
    .why-dot{
        width:12px;
        height:12px;
        border-radius:50%;
        background:#12baf5;
        flex-shrink:0;
    }

    
    /* MAIN TITLE */
    .why-main-title h1{
        margin:0;
        color:#12baf5;
        font-size:32px;
        font-weight:700;
        letter-spacing:2px;
    }

    
    /* SMALL TEXT */
    .why-small-title{
        font-size:18px;
        line-height:1.5;
        font-weight:300;
        color:#111;
        padding-top: 40px;
        margin-bottom:45px;
    }

    /* FEATURE BOX */

    .why-box{
        margin-bottom:35px;
    }

    /* FEATURE TITLE */

    .why-box h4{
        font-size:22px;
        font-weight:500;
        color:#111;
        margin-bottom:12px;
    }

    /* FEATURE TEXT */

    .why-box p{
        font-size:16px;
        color:#666;
        margin:0;
    }
    /* ========================= WHY BOX ========================= */ 
    .why-box{ 
        display:flex; 
        align-items:flex-start; 
        gap:22px; 
        margin-bottom:35px; 
    } /* ICON */ 
    .why-icon{ 
        width:55px; 
        height:55px; 
        min-width:55px; 
        border-radius:14px; 
        background:#fff; 
        display:flex; 
        align-items:center; 
        justify-content:center; 
        box-shadow:0 5px 20px rgba(0,0,0,0.06); 
    } 
    .why-icon img{ 
        width:28px; 
        height:28px; 
        object-fit:contain; 
    } 
    /* CONTENT */ 
    .why-box-content{ 
        flex:1; 
    } 



/* ================================================================
           PROJECTS SECTION
        ================================================================ */
        .projects {
            padding: 80px 0 60px;
            background: #f5f7fa;
        }

        .projects-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .projects-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #12baf5;
            flex-shrink: 0;
        }
        .projects-label span {
            color: #12baf5;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2px;
        }
        .projects-main-title {
            text-align: center;
            font-size: 32px;
            font-weight: 300;
            color: #111;
            margin-bottom: 45px;
            line-height: 1.4;
        }
        .projects-main-title strong {
            color: #12baf5;
            font-weight: 700;
        }


        .projects-slider-wrap {
            overflow: hidden;
            width: 100%;
        }
        .projects-track {
            display: flex;
            gap: 20px;
            transition: transform 0.55s ease;
        }

        .project-slide {
            flex: 0 0 calc((100% - 40px - 2px) / 3);
            min-width: 0;
        }

        .project-card {
            position: relative;
            width: 100%;
            height:280px;
            aspect-ratio: 4 / 3;
            border-radius: 16px;
            overflow: hidden;
            background: #e9eef3;
        }
        
        /* image wrapper behavior */
        .project-card img {
            width: 100%;
            height: 100%;
            object-fit: contain;  
            object-position: center;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .project-card:hover img {
            transform: scale(1.04);
        }

        /* Teal diagonal cut banner at bottom-left */
        .project-card .project-label {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #12baf5;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 14px 28px 14px 18px;
            clip-path: polygon(0 0, 88% 0, 100% 100%, 0% 100%);
            min-width: 55%;
            line-height: 1.4;
            text-transform: uppercase;
        }

        /* Dot navigation */
        .projects-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 32px;
        }
        .projects-dots span {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid #aaa;
            background: transparent;
        }
        .projects-dots span.active {
            background: #12baf5;
            border-color: #12baf5;
        }

        /* ================================================================
           CTA SECTION
        ================================================================ */
        .cta {
            position: relative;
            padding: 70px 0 85px;
        
            background:
                linear-gradient(
                    rgba(8,16,30,0.55),
                    rgba(8,16,30,0.55)
                ),
                url("../image/cta_bg.png");
        
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        
            overflow: hidden;
            text-align: center;
        }

        /* Dot pattern */
        .cta-dots-pattern {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: 0;
        }

        /* Play button */
        .cta-play {
            position: relative;
            z-index: 1;
            width: 60px;
            height: 60px;
            background: #12baf5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
            font-size: 20px;
            color: #fff;
            box-shadow: 0 0 0 14px rgba(18,186,245,0.15), 0 0 0 28px rgba(18,186,245,0.07);
        }

        .cta-sub {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
        }
        .cta-sub-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #12baf5;
        }
        .cta-sub span {
            color: #12baf5;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 3px;
        }

        .cta-content {
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .cta-content h2 {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 30px;
        }
        .cta-content p {
            font-size: 20px;
            margin-bottom: 32px;
        }

        /* Outlined button */
        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 2px solid rgba(255,255,255,0.7);
            color: #fff;
            background: transparent;
            padding: 12px 28px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 14px;
            transition: 0.3s;
        }
        .cta-btn:hover {
            background: #12baf5;
            border-color: #12baf5;
            color: #fff;
        }

        /* ================================================================
           CLIENTS — overlapping pill from CTA bottom
        ================================================================ */
        .clients-wrapper {
            background: #fff;
            padding-bottom: 70px;
        }

        .clients-banner {
            display: flex;
            justify-content: center;
            position: relative;
            z-index: 10;
            margin-bottom: 45px;
        }
        .clients-banner-pill {
            background: #12baf5;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2px;
            padding: 14px 38px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: -24px;
        }
        .clients-banner-pill .bdot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.7);
        }

        /* ================================================================
           CLIENTS SLIDER
        ================================================================ */
        
        .clients-slider-wrap{
            overflow:hidden;
        }
        
        .clients-track{
            display:flex;
            gap:12px;
            transition:transform 0.6s ease;
        }
        
        .client-slide{
            min-width:25%; /*only 4 logos visible */
            flex-shrink:0;
        
            display:flex;
            justify-content:center;
            align-items:center;
        }
        
        .client-logo{
            width:100%;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        
        .client-logo img{
            max-width:85px;
            max-height:85px;
            object-fit:contain;
        }

        .clients-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 32px;
        }
        .clients-dots span {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #aaa;
            background: transparent;
        }
        .clients-dots span.active {
            background: #12baf5;
            border-color: #12baf5;
        }

        /* ================================================================
           CONTACT SECTION
        ================================================================ */
        .contact {
            background: #f5f5f5;
            padding: 70px 0;
        }

        /* Blue "Contact Us" button-style label */
        .contact-btn-label {
            display: inline-block;
            background: #12baf5;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            padding: 10px 26px;
            border-radius: 5px;
            margin-bottom: 16px;
        }

        .contact-sub {
            font-size: 14px;
            color: #555;
            margin-bottom: 20px;
        }

        /* Two inputs side-by-side */
        .contact-row {
            display: flex;
            gap: 10px;
            margin-bottom: 0;
        }
        .contact-field {
            flex: 1;
            position: relative;
        }
        .contact-field .ficon {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: #bbb;
            font-size: 12px;
        }
        .contact-field input {
            width: 100%;
            padding: 11px 10px 11px 32px;
            border: 1px solid #ddd;
            background: #f9f9f9;
            font-family: 'Poppins', sans-serif;
            font-size: 12px;
            color: #333;
        }
        .contact-field input::placeholder { color: #bbb; }
        .contact-field input:focus { outline: none; border-color: #12baf5; }

        /* Dropdown */
        .contact-select {
            flex: 1;
            position: relative;
        }
        .contact-select select {
            width: 100%;
            padding: 11px 28px 11px 10px;
            border: 1px solid #ddd;
            background: #f9f9f9;
            font-family: 'Poppins', sans-serif;
            font-size: 12px;
            color: #bbb;
            appearance: none;
        }
        .contact-select::after {
            content: '▾';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            pointer-events: none;
            font-size: 11px;
        }

        .contact-submit-btn {
            width: 100%;
            background: #111;
            color: #fff;
            border: none;
            padding: 12px;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            cursor: pointer;
            margin-top: 10px;
            transition: background 0.3s;
        }
        .contact-submit-btn:hover { background: #12baf5; }
        
        /* Contact form feedback message */
        .contact-form-msg {
            font-size: 12px;
            min-height: 18px;
            margin: 6px 0 4px;
            color: #12baf5;
        }
        .contact-form-msg.error { color: #e63946; }

        /* ================================================================
           CONTACT MAP OVERLAY LAYOUT
        ================================================================ */
        
        .contact-right-col{
            position:relative;
            height:450px;
            overflow:hidden;
        }
        
        /* MAP */
        
        .contact-map{
            width:100%;
            height:100%;
        }
        
        .contact-map iframe{
            width:100%;
            height:100%;
            border:0;
            display:block;
        }
        
        /* INFO BOX OVERLAY */
        
        .contact-info-box{
            position:absolute;
            top:53%;
            left:0;
            transform:translateY(-50%);
            width:35%;
            height:69%;
            background:rgba(0,0,0,0.65);
            backdrop-filter:blur(1px);
            padding:20px 8px;
            color:#fff;
            border-radius:10px;
            box-shadow:0 10px 30px rgba(0,0,0,0.3);
            z-index:2;
        }
        
        /* INFO ROW */
        
        .info-row{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:12px 0;
            border-bottom:1px solid rgba(255,255,255,0.15);
        }
        
        .info-row:last-child{
            border-bottom:none;
        }
        
        /* ICON */
        
        .info-icon{
            width:32px;
            height:32px;
            min-width:32px;
            background:rgba(255,255,255,0.15);
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#12baf5;
            font-size:12px;
        }
        
        /* TEXT */
        
        .info-text{
            font-size:10px;
            color:#fff;
            line-height:1.4;
        }
        

        

        /* ================================================================
           FOOTER
        ================================================================ */
        footer {
            background:
                linear-gradient(rgba(7,20,38,0.52), rgba(7,20,38,0.52)),
                url("../image/footer_img.png"); 
        
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        
            color: #fff;
            padding: 60px 0 0;
            position: relative;
            overflow: hidden;
        }

        /* Faint text watermark top */
        /*footer::before {*/
        /*    content: 'NETWORKMASTER SOFTWARE SOLUTIONS PVT. LTD.';*/
        /*    position: absolute;*/
        /*    top: 14px;*/
        /*    left: 50%;*/
        /*    transform: translateX(-50%);*/
        /*    font-size: 10px;*/
        /*    letter-spacing: 8px;*/
        /*    color: rgba(255,255,255,0.04);*/
        /*    font-weight: 700;*/
        /*    white-space: nowrap;*/
        /*    text-transform: uppercase;*/
        /*}*/

        /* Logo col */
        .footer-logo-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-right: 20px;
        }
        .footer-logo-circle {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, #12baf5 0%, #0763a0 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        .footer-logo-circle i { color: #fff; font-size: 26px; }

        footer h4 {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 18px;
            color: #fff;
        }
 
        footer p {
            font-size: 14px;
            color: #999;
            line-height: 1.9;
            margin-bottom: 6px;
        }

        .footer-bottom {
            background: transparent;
            border-top: 1px solid rgba(255,255,255,0.07);
            margin-top: 40px;
            padding: 16px 0;
            text-align: center;
            color: #555;
            font-size: 13px;
            position: relative;
        }
        .footer-bottom a { color: #12baf5; font-size: small;}

        .scroll-top-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
        
            width: 45px;
            height: 45px;
        
            background: #12baf5;
            border-radius: 50%;
        
            display: flex;
            align-items: center;
            justify-content: center;
        
            color: #fff;
            font-size: 14px;
        
            cursor: pointer;
        
            z-index: 9999;
        
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
        
            transition: 0.3s;
        }
        
        .scroll-top-btn:hover {
            background: #0e9bd0;
            transform: translateY(-3px);
        }