.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;
        }

        .btn-dark-bg:hover{
            background: rgb(255, 255, 255) !important;
        }

        .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;
        }

        /* Form validation error styles */
        .form-control.is-invalid,
        .form-select.is-invalid {
            border-color: #dc3545 !important;
            border-width: 2px !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }

        .form-control.is-invalid:focus,
        .form-select.is-invalid:focus {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }

        .invalid-feedback {
            display: block;
            margin-top: 0.25rem;
            font-size: 0.875rem;
            color: #dc3545;
            animation: fadeInError 0.3s ease-in;
        }

        @keyframes fadeInError {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-control.is-valid,
        .form-select.is-valid {
            border-color: #198754 !important;
            border-width: 1px !important;
        }

        .form-control.is-valid:focus,
        .form-select.is-valid:focus {
            border-color: #198754 !important;
            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
        }