.custom-text-white{
            color: #ffffff !important;
        }

        .square-box {
            aspect-ratio: 1 / 1; /* always a square */
            width: 60px;         /* controls overall size */
        }

        .card-style{
            /* background-color: #17171d; */
            background: #17171D;
            /* background: linear-gradient(343deg, rgba(23, 23, 29, 1) 36%, rgba(61, 61, 79, 1) 100%); */
            border: 1px solid #30303f;
        }

        .a-link{
            color: rgba(255, 255, 255, 0.50) !important;
        }

        .a-link:hover{
            color: rgb(255, 255, 255) !important;
        }

        .btn-dark-bg{
            background: rgba(255, 255, 255, 0.70) !important;
            color: #131317 !important;
            border: none !important;
            transition: all 0.3s ease !important;
        }

        .btn-dark-bg:hover{
            background: rgb(255, 255, 255) !important;
            color: #131317 !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
        }

        .border-top{
            border-top: 1px solid #30303f !important;
        }

        /* Plans Grid Layout */
        .plan-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .plan-card:hover {
            transform: translateY(-5px);
        }

        /* Ensure consistent card heights */
        .plan-card .card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .plan-card .card-body {
            flex: 1;
        }

        /* Date Range Picker Dark Theme */
        .daterangepicker {
            background-color: #17171d !important;
            border: 1px solid #30303f !important;
            color: #ffffff !important;
        }

        .daterangepicker .calendar-table {
            background-color: #17171d !important;
        }

        .daterangepicker .calendar-table th,
        .daterangepicker .calendar-table td {
            color: #ffffff !important;
        }

        .daterangepicker .calendar-table td.active,
        .daterangepicker .calendar-table td.active:hover {
            background-color: #6366f1 !important;
            color: #ffffff !important;
        }

        .daterangepicker .calendar-table td.today {
            background-color: #30303f !important;
        }

        .daterangepicker .calendar-table td:hover {
            background-color: #30303f !important;
        }

        .daterangepicker .drp-buttons .btn {
            background-color: #6366f1 !important;
            border-color: #6366f1 !important;
            color: #ffffff !important;
        }

        .light-style .daterangepicker select {
            color: #ffffff !important;
        }

        #project_type {
            color: #ffffff;
            /* background-color: transparent; */
        }

        #project_type option {
            /* background-color: #1a1a1a; */
            color: #ffffff; /* text color inside dropdown */
        }

        #project_description {
            color: #ffffff; /* white text */
            /* background-color: transparent; */
            border: 1px solid #ffffff;
            border-radius: 8px;
        }

        #project_description::placeholder {
            color: #ffffff; /* white placeholder */
        }

        #project_description:focus {
            border-color: #ffffff;
            /* box-shadow: 0 0 5px #ffffff; */
        }

        /* Form input styling */
        .form-control {
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .form-control:focus {
            border-color: #ffffff !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
            color: #ffffff !important;
        }

        .form-select {
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .form-select:focus {
            border-color: #ffffff !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
        }

        .input-group-text {
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }


         .text-dark{
            color: #000000 !important;
        }
        .card-square{
            aspect-ratio: 1 / 1;
            border-radius: 2rem;
        }

        .p-onboarding {
            font-size: 0.7rem;
        }
        .i-icon{
            font-size: 3rem;
        }

        /* Plans Grid Layout */
        .onboarding-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .onboarding-card:hover {
            transform: translateY(-5px);
        }

        /* Ensure consistent card heights */
        .onboarding-card .card {
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #17171D;
            background: linear-gradient(0deg, rgba(23, 23, 29, 1) 36%, rgb(52, 52, 62) 100%);
            border: 1px solid #30303f;
        }

        .onboarding-card .card-body {
            flex: 1;
        }

        /* Hero header responsive styles */
        @media (max-width: 576px) {
            .h1-header {
                margin-top: 3rem;
                font-size: 1.75rem !important;
                font-weight: 900 !important;
                line-height: 1.3 !important;
            }
            
            .montserrat {
                font-weight: 600 !important;
            }
        }

        @media (min-width: 577px) and (max-width: 768px) {
            .h1-header {
                font-size: 2.5rem !important;
                font-weight: 900 !important;
                line-height: 1.25 !important;
            }
        }

        @media (min-width: 769px) and (max-width: 992px) {
            .h1-header {
                font-size: 3.2rem !important;
                font-weight: 900 !important;
            }
        }
        
        /* Ensure text doesn't overflow on very small screens */
        @media (max-width: 400px) {
            .h1-header {
                font-size: 1.5rem !important;
            }
        }

        /* Mobile responsiveness for onboarding cards */
        @media (max-width: 576px) {
            .card-square {
                aspect-ratio: auto !important;
                min-height: 200px;
            }
            
            .onboarding-card .card {
                max-width: 80%;
                margin: 0 auto;
                padding: 0.5rem;
            }
            
            .onboarding-card .card-body {
                padding: 0.5rem 0.25rem;
            }
            
            .onboarding-card .footer {
                padding: 0.25rem 0.5rem 0.5rem 0.5rem;
            }
            
            .i-icon {
                font-size: 3rem !important;
                margin-bottom: 0.5rem !important;
            }
            
            .onboarding-card .footer .fw-bold {
                font-size: 0.8rem !important;
                margin-bottom: 0.25rem !important;
            }

            .onboarding-title{
                font-size: 5rem !important;
                margin-bottom: 0.25rem !important;
            }
            
            .p-onboarding {
                font-size: 0.7rem !important;
                line-height: 1.2 !important;
                margin: 0 !important;
            }
        }

        @media (min-width: 577px) and (max-width: 768px) {
            .card-square {
                aspect-ratio: auto !important;
                min-height: 200px;
            }
            
            .onboarding-card .card {
                max-width: 180px;
                margin: 0 auto;
                padding: 0.75rem;
            }
            
            .onboarding-card .card-body {
                padding: 0.75rem 0.5rem;
            }
            
            .onboarding-card .footer {
                padding: 0.25rem 0.75rem 0.75rem 0.75rem;
            }
            
            .i-icon {
                font-size: 2.2rem !important;
                margin-bottom: 0.5rem !important;
            }
            
            .onboarding-card .footer .fw-bold {
                font-size: 0.9rem !important;
                margin-bottom: 0.5rem !important;
            }
            
            .p-onboarding {
                font-size: 0.6rem !important;
                line-height: 1.3 !important;
            }
        }

        @media (min-width: 769px) and (max-width: 992px) {
            .onboarding-card .card {
                max-width: 200px;
                margin: 0 auto;
            }
            
            .i-icon {
                font-size: 2.7rem !important;
            }
        }

        @media (min-width: 993px) {
            .onboarding-card .card {
                max-width: 220px;
                margin: 0 auto;
            }
        }

        .card-plain-dark {
            position: relative;
            border-radius: 2rem;
            overflow: hidden;
            z-index: 1;
            transition: transform 0.3s ease;
            background-color: #EDF0F6;
        }

        /* Default state — subtle border */
        .card-plain-dark::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 2px;
            border-radius: inherit;
            border: 1px solid #141618;
            /* background: linear-gradient(120deg, #ffffff, #0a0a0a, #001f3f, #ffffff); */
            background-size: 400% 400%;
            mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: xor;
            opacity: 0.2;
            transition: opacity 0.4s ease;
            z-index: 0;
        }

        /* Animate only on hover */
        .card-plain-dark:hover::before {
            opacity: 1;
            animation: borderFlow 5s linear infinite;
        }

        .card-plain-dark:hover {
            background:#AAF530;
            transform: translateY(-6px);
        }

        @keyframes borderFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


        .container-padding{
            padding-top: 6rem; 
            padding-bottom: 6rem;
        }

        /* Service card image styling */
        .service-card-image {
            width: 80%;
            /* height: 100%; */
            object-fit: cover;
            border-radius: 0.5rem;
            transition: transform 0.3s ease;
        }

        .card-plain-dark:hover .service-card-image {
            transform: scale(1.02);
        }

        .card-plain-dark .card-body {
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            overflow: hidden;
        }

        .small-p {
            font-size: 0.8rem;
        }

        /* Plan card with animated border - combines card-style layout with card-plain-dark styling */
        .plan-card-animated {
            position: relative;
            background: #17171D;
            border: 1px solid #30303f;
            border-radius: 2rem;
            overflow: hidden;
            z-index: 1;
        }

        /* Default state — subtle border */
        .plan-card-animated::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 2px;
            border-radius: inherit;
            background: linear-gradient(120deg, #ffffff, #0a0a0a, #001f3f, #ffffff);
            background-size: 400% 400%;
            mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: xor;
            opacity: 0.2;
            transition: opacity 0.4s ease;
            z-index: 0;
        }

        /* Animate only on hover */
        .plan-card-animated:hover::before {
            opacity: 1;
            animation: borderFlow 5s linear infinite;
        }

        .plan-card:hover .plan-card-animated {
            background: #24242d;
        }

        .p-line-height {
            line-height: 2;
        }

        .card-gradient{
            background: linear-gradient(0deg, rgba(23, 23, 29, 1) 36%, rgb(52, 52, 62) 100%);
            border-radius: 1rem; 
            border: 1px solid #30303f;
            /* backdrop-filter: blur(10px);  */
            /* -webkit-backdrop-filter: blur(10px); */
        }