:root {
            --primary-blue: #0046d5;
            --dark-blue: #001f5b;
            --light-bg: #f8f9fa;
            --footer-bg: #040D43;
            --text-muted: #6c757d;
        }

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

        /* Navbar */
        .navbar {
            padding: 15px 0;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .navbar-brand img { height: 40px; }
        .nav-link { color: #333 !important; font-weight: 500; margin: 0 10px; }
        .btn-navy { background: var(--dark-blue); color: white; border-radius: 5px; padding: 10px 35px; }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #001f5b 0%, #0046d5 100%);
            padding: 100px 0 180px 0;
            color: white;
            /* position: relative; */
            overflow: hidden;
        }
        .hero::before {
            content: '';
            /* position: absolute; */
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        .hero h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; }
        .hero p { opacity: 0.9; font-size: 1.1rem; }
        .hero-img-container { position: relative; }
        .hero-img { border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);     width: 75%;
    display: block;
    margin: auto;}

        /* Feature Cards (Overlap) */
        .features-bar { margin-top: -80px; position: relative; z-index: 10; }
        .f-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            height: 100%;
            transition: 0.3s;
        }
        .f-card:hover { transform: translateY(-5px); }
        .f-icon { width: 50px; height: 50px; background: #eef3ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); margin-bottom: 20px; font-size: 20px; }

        /* Content Sections */
        .section-padding { padding: 100px 0; }
        .tagline { color: var(--primary-blue); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }
        .section-title { font-weight: 700; color: var(--dark-blue); margin-bottom: 20px; }
        
        /* .img-stack { position: relative; padding: 40px; } */
        .img-main { width: 100%; }
        .img-sub { 
            position: absolute; bottom: 0; right: 0; width: 50%; 
            border: 8px solid white; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
        }
        .img-sub-square {
            position: absolute; bottom: -20px; left: 20px; width: 45%; 
            border: 8px solid white; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
        }

        /* Grid Cards */
        .grid-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            height: 100%;
            transition: 0.3s;
        }
        .grid-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-color: transparent; }
        .grid-card img { width: 80px; margin-bottom: 20px; }
        .grid-card h6 { font-weight: 700; font-size: 1rem; }
        .grid-card p { font-size: 0.85rem; color: var(--text-muted); }

        /* Focus Banner */
        .focus-banner {
            background: linear-gradient(90deg, #001f5b 0%, #0046d5 100%);
            padding: 80px 0;
            color: white;
            text-align: center;
        }

        /* Expertise Grid */
        .expertise-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 250px;
            margin-bottom: 24px;
        }
        .expertise-card img { width: 100%; height: 100%; object-fit: cover; }
        .expertise-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgb(0 15 45 / 47%);
            display: flex; flex-direction: column; justify-content: flex-end;
            padding: 30px; color: white;
        }
        .expertise-overlay h5 { font-weight: 700; margin-bottom: 10px; }
        .expertise-overlay p { font-size: 0.85rem; opacity: 0.8; margin: 0; }

        /* Footer */
        footer { background: var(--footer-bg); color: white; padding: 80px 0 20px 0; }
        .footer-logo { height: 40px; margin-bottom: 20px; }
        .footer-links { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: #aaa; text-decoration: none; transition: 0.3s; }
        .footer-links a:hover { color: white; }
        .social-icons a { 
            width: 35px; height: 35px; background: #0e46ce; display: inline-flex; 
            align-items: center; justify-content: center; border-radius: 5px; 
            color: white; margin-right: 10px; text-decoration: none;
        }
        .contact-item { display: flex; margin-bottom: 20px; }
        .contact-item i { margin-right: 15px; margin-top: 5px; color: var(--primary-blue); }

        /* Helpers */
        .btn-outline-white { border: 1px solid white; color: white; padding: 10px 25px; border-radius: 5px; }
        .btn-white { background: white; color: var(--primary-blue); font-weight: 600; padding: 10px 35px; border-radius: 5px; border: none; }

        .custom-dots {
            position: relative;
            margin-top: 40px;
            bottom: 0;
        }
        
        .custom-dots button {
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;
            background-color: #ccc !important; /* Inactive color */
            border: none !important;
            margin: 0 5px !important;
            opacity: 0.5;
            transition: 0.3s;
        }
    
        .custom-dots button.active {
            background-color: #0046d5 !important; /* Primary blue color */
            opacity: 1;
            transform: scale(1.2);
        }
    
        /* Consistent Icon Styling inside Carousel */
        .f-icon {
            width: 50px;
            height: 50px;
            background: #eef3ff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0046d5;
            font-size: 20px;
        }
        
        .grid-card {
            transition: transform 0.3s ease;
            border-radius: 15px;
        }
        
        .grid-card:hover {
            transform: translateY(-5px);
        }

         /* Page Hero */
         .page-hero {
            background: linear-gradient(135deg, #001f5b 0%, #0046d5 100%);
            padding: 120px 0;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1.5px, transparent 1.5px);
            background-size: 30px 30px;
        }
        .page-hero h1 { font-size: 3.5rem; font-weight: 700; position: relative; z-index: 1; }

        /* Contact Content Section */
        .contact-section { padding: 100px 0; }
        .contact-title { font-weight: 700; color: var(--dark-blue); margin-bottom: 20px; }
        
        /* Location Info Styling */
        .info-block { margin-bottom: 40px; }
        .info-icon-box {
            width: 45px;
            height: 45px;
            background: var(--dark-blue);
            color: white;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        .info-label { font-weight: 700; color: var(--dark-blue); margin-bottom: 10px; display: block; }
        .info-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

        /* Contact Form Card */
        .contact-card {
            background: #F9FAFB;
            padding: 40px;
            border-radius: 10px;
            border: 1px solid #eee;
        }
        .contact-card h4 { font-weight: 700; color: var(--dark-blue); }
        .contact-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 30px; }

        /* Custom Underlined Inputs */
        .form-control-custom {
            border: none;
            border-bottom: 1px solid #ccc;
            border-radius: 0;
            padding: 12px 0;
            background-color: transparent;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }
        .form-control-custom:focus {
            box-shadow: none;
            border-bottom-color: var(--primary-blue);
            background-color: transparent;
        }
        textarea.form-control-custom { height: 100px; resize: none; }

        /* Map Section */
        .map-container { line-height: 0; }
        .map-container iframe { width: 100%; height: 450px; border: 0; }
        .btn:hover {
            background-color: #2f82b3;
            color: #eee !important;
        }
        .section-padding { padding: 90px 0; }
        .section-header { margin-bottom: 60px; }
        .section-header h2 { font-weight: 700; color: var(--dark-blue); font-size: 2.5rem; }
        .navy-bg { background-color: var(--dark-blue); color: white; }

        /* 1. Microservices Architecture Section */
        .arch-card {
            background: #fff; padding: 40px; border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            height: 100%; transition: 0.3s;
        }
        .arch-card:hover { transform: translateY(-10px); }
        .arch-icon { font-size: 40px; color: var(--primary-blue); margin-bottom: 20px; }

        /* 2. API & Integration Hub */
        .integration-box {
            background: #f0f4ff; border-radius: 20px; padding: 50px;
            border: 1px dashed var(--primary-blue);
        }
        .logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .logo-item { 
            background: white; padding: 20px; border-radius: 10px; 
            display: flex; align-items: center; justify-content: center;
            font-weight: 600; color: var(--dark-blue); box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        }

        /* 3. Mobile Cloud Section */
        .device-mockup { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
        .device-mockup img { width: 100%; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }

        /* 4. Security Compliance */
        .security-badge {
            background: rgba(255,255,255,0.1); padding: 30px;
            border-radius: 15px; border: 1px solid rgba(255,255,255,0.2);
            text-align: center; height: 100%;
        }
        .security-badge i { font-size: 45px; margin-bottom: 20px; color: #4fc3f7; }

        /* 5. Agile Lifecycle */
        .step-box { position: relative; padding-left: 60px; margin-bottom: 40px; }
        .step-number {
            position: absolute; left: 0; top: 0;
            width: 45px; height: 45px; background: var(--primary-blue);
            color: white; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; font-weight: 700;
        }