/* Custom Theme Variables */
        :root {
            --accent-blue: #3459e6;
            --accent-blue-darker: #2a48b8;
            --light-grey: #f8f9fa;
            --medium-grey: #e9ecef;
            --dark-grey: #495057;
            --near-black: #212529;
            --bs-primary-rgb: 52, 89, 230;
            --bs-link-color: var(--accent-blue);
            --bs-link-hover-color: var(--accent-blue-darker);
            /* Additional colors for SVGs */
            --svg-green: #28a745;
            --svg-orange: #fd7e14;
            --svg-yellow: #ffc107;
            --svg-purple: #6f42c1;
            --svg-teal: #20c997;
        }

        /* Body and General Styling */
        body {
            padding-top: 60px;
            /* Adjust if navbar height changes significantly */
            font-family: 'Inter', sans-serif;
            color: var(--near-black);
            background-color: #FFFFFF;
        }

        /* Navbar Customization */
        .navbar {
            background-color: #FFFFFF !important;
            border-bottom: 1px solid var(--medium-grey);
        }

        .navbar-brand {
            color: var(--near-black) !important;
            font-weight: 600;
        }

        .navbar .nav-link {
            color: var(--dark-grey) !important;
            transition: color 0.2s ease-in-out;
        }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--accent-blue) !important;
        }

        .navbar .btn-primary {
            background-color: var(--accent-blue);
            border-color: var(--accent-blue);
            color: #FFFFFF;
            padding: 0.3rem 0.8rem;
            font-size: 0.9rem;
        }

        .navbar .btn-primary:hover {
            background-color: var(--accent-blue-darker);
            border-color: var(--accent-blue-darker);
        }

        /* Hero Section */
        .hero-section {
            background-color: var(--light-grey);
            color: var(--near-black);
            padding: 100px 0;
            /* Default padding for larger screens */
            border-bottom: 1px solid var(--medium-grey);
            transition: padding 0.3s ease-out;
            /* Smooth transition for padding changes */
        }

        .hero-section h1 {
            color: var(--near-black);
            transition: font-size 0.3s ease-out;
            /* Smooth transition for font size changes */
        }

        .hero-section p {
            color: var(--dark-grey);
        }

        .hero-section .btn-primary {
            background-color: var(--accent-blue);
            border-color: var(--accent-blue);
            color: #FFFFFF;
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
        }

        .hero-section .btn-primary:hover {
            background-color: var(--accent-blue-darker);
            border-color: var(--accent-blue-darker);
        }

        .hero-section .btn-outline-light {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
        }

        .hero-section .btn-outline-light:hover {
            background-color: var(--accent-blue);
            color: #FFFFFF;
        }

        /* Section Styling */
        .section-padding {
            padding: 80px 0;
            /* Default padding */
            transition: padding 0.3s ease-out;
            /* Smooth transition */
        }

        #features {
            background-color: #FFFFFF;
        }

        .bg-light {
            background-color: var(--light-grey) !important;
        }

        /* Card Customization */
        .card {
            border: 1px solid var(--medium-grey);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        }

        .card-title {
            color: var(--near-black);
            font-weight: 600;
        }

        .card-text {
            color: var(--dark-grey);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--accent-blue);
        }

        /* SVG Styling in Cards */
        .card-svg-top {
            display: block;
            width: 100%;
            height: 150px;
            padding: 1rem;
            box-sizing: border-box;
            background-color: var(--light-grey);
            border-bottom: 1px solid var(--medium-grey);
        }

        .card-svg-top svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Button Customization */
        .btn-primary {
            background-color: var(--accent-blue);
            border-color: var(--accent-blue);
            color: #FFFFFF;
            padding: 0.5rem 1rem;
            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        }

        .btn-primary:hover {
            background-color: var(--accent-blue-darker);
            border-color: var(--accent-blue-darker);
        }

        .btn-outline-light {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
        }

        .btn-outline-light:hover {
            background-color: var(--accent-blue);
            color: #FFFFFF;
        }

        /* "Why Choose" Section */
        .list-unstyled i {
            color: var(--accent-blue);
        }

        .workflow-svg-container {
            background-color: var(--light-grey);
            padding: 2rem;
            /* Default padding */
            border-radius: 0.375rem;
            border: 1px solid var(--medium-grey);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            transition: padding 0.3s ease-out;
            /* Smooth transition */
        }

        .workflow-svg-container svg {
            max-width: 100%;
            height: auto;
        }


        /* Call to Action Section */
        #try-now {
            background-color: var(--accent-blue);
            color: #FFFFFF;
        }

        #try-now h2 {
            color: #FFFFFF;
        }

        #try-now .btn-light {
            background-color: #FFFFFF;
            border-color: #FFFFFF;
            color: var(--accent-blue);
        }

        #try-now .btn-light:hover {
            background-color: var(--medium-grey);
            border-color: var(--medium-grey);
            color: var(--accent-blue);
        }

        #try-now .btn-outline-light {
            border-color: #FFFFFF;
            color: #FFFFFF;
        }

        #try-now .btn-outline-light:hover {
            background-color: #FFFFFF;
            color: var(--accent-blue);
        }

        /* Footer */
        footer.bg-dark {
            background-color: var(--near-black) !important;
        }

        footer a {
            color: var(--medium-grey) !important;
            text-decoration: none;
            transition: color 0.2s ease-in-out;
        }

        footer a:hover {
            color: #FFFFFF !important;
        }

        /* Utility */
        .img-fluid {
            max-width: 100%;
            height: auto;
        }

        .rounded {
            border-radius: 0.375rem !important;
        }

        .shadow-sm {
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
        }

        /* ========= Responsive Design Optimizations START ========= */
        @media (max-width: 991.98px) {

            /* Below Large screens (Tablets) */
            .hero-section {
                padding: 80px 0;
                /* Slightly reduced padding */
            }

            .hero-section h1 {
                font-size: 2.75rem;
                /* Slightly reduced H1 size */
            }

            .section-padding {
                padding: 60px 0;
                /* Slightly reduced section padding */
            }
        }

        @media (max-width: 767.98px) {

            /* Below Medium screens (Landscape Phones / Small Tablets) */
            .hero-section {
                padding: 60px 0;
                /* Reduced padding */
            }

            .hero-section h1 {
                font-size: 2.25rem;
                /* Further reduced H1 size */
                line-height: 1.3;
                /* Adjust line height if needed */
            }

            .hero-section p.lead {
                font-size: 1.1rem;
                /* Adjust lead paragraph size */
            }

            .section-padding {
                padding: 50px 0;
                /* Reduced section padding */
            }

            /* Center align text in the "Why Choose" section text column on mobile */
            .section-padding.bg-light .col-lg-6:last-child {
                text-align: center;
            }

            .section-padding.bg-light .list-unstyled {
                display: inline-block;
                /* Allow centering */
                text-align: left;
                /* Keep list items left-aligned */
                margin: 0 auto;
                /* Center the block */
            }

            .section-padding.bg-light .list-unstyled li {
                justify-content: flex-start;
                /* Ensure checkmarks align left */
            }

            .section-padding.bg-light .col-lg-6:last-child .btn {
                margin-left: auto;
                margin-right: auto;
                display: block;
                width: fit-content;
            }
        }

        @media (max-width: 575.98px) {

            /* Below Small screens (Portrait Phones) */
            body {
                padding-top: 58px;
                /* Adjust if navbar height changes on small screens */
            }

            .hero-section {
                padding: 50px 0;
                /* Further reduced padding */
            }

            .hero-section h1 {
                font-size: 2rem;
                /* Further reduced H1 size */
            }

            .hero-section p.lead {
                font-size: 1rem;
                /* Smaller lead text */
            }

            .hero-section .btn-lg {
                font-size: 1rem;
                /* Slightly smaller large buttons */
                padding: 0.6rem 1.2rem;
                width: 80%;
                /* Make buttons wider for easier tapping */
                margin-bottom: 0.5rem;
                /* Add space between stacked buttons */
            }

            .hero-section .btn-lg.me-2 {
                margin-right: 0 !important;
                /* Remove margin when stacked */
            }

            .section-padding {
                padding: 40px 0;
                /* Further reduced section padding */
            }

            #try-now h2 {
                font-size: 1.75rem;
                /* Reduce CTA heading size */
            }

            #try-now .btn-lg {
                width: 80%;
                margin-bottom: 0.5rem;
            }

            #try-now .btn-lg.me-2 {
                margin-right: 0 !important;
            }

            .workflow-svg-container {
                padding: 1.5rem;
                /* Reduce padding around workflow SVG */
            }

            .card-svg-top {
                height: 120px;
                /* Slightly smaller SVG container height */
            }

            .card-title.h5 {
                font-size: 1.1rem;
                /* Adjust card title size */
            }

            .card-text {
                font-size: 0.9rem;
                /* Adjust card text size */
            }
        }

        /* ========= Responsive Design Optimizations END ========= */