/* Custom styles */
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease-in-out;
        }

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

        .card-img-top {
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .progress-bar {
            background-color: #2ecc71;
        }

        .project-details {
            margin-top: 10px;
        }

        .donation-progress {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        .donation-progress span {
            font-weight: bold;
        }

        .donation-progress .amount {
            font-size: 14px;
            color: #777;
        }

        .btn-donate {
            background-color: #2ecc71;
            border-color: #2ecc71;
            color: white;
        }

        .btn-donate:hover {
            background-color: #27ae60;
            border-color: #27ae60;
        }

        .btn-view-details {
            color: #333;
        }

        .btn-view-details:hover {
            text-decoration: underline;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            background-color: #e0e0e0;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

        .icon-circle i {
            font-size: 20px;
            color: #2ecc71;
        }

        .percentage-badge {
            position: absolute;
            top: -10px;
            right: 10px;
            background-color: #e74c3c;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }

        /* Carousel Styles for Small Screens */
        @media (max-width: 767.98px) {
            .row {
                display: none;
            }

            #carouselExampleControls {
                display: block !important;
            }

            .carousel-item {
                padding: 0 5px;
            }

            .carousel-inner .card {
                width: 100% !important;
                margin: 0 auto;
            }

            .card-title {
                font-size: 1.1rem;
            }

            .d-flex.align-items-center.mb-3 span {
                font-size: 0.9rem;
            }

            .donation-progress {
                flex-direction: column;
                gap: 8px;
            }

            .d-flex.justify-content-between.align-items-center.mt-3 {
                flex-direction: column;
                gap: 10px;
            }

            .btn-donate {
                width: 100%;
            }

            .input-group {
                width: 100% !important;
            }

            .percentage-badge {
                top: 5px;
                right: 5px;
                padding: 3px 8px;
                font-size: 0.8rem;
            }

            .icon-circle {
                width: 35px;
                height: 35px;
                margin-right: 8px;
            }

            .icon-circle i {
                font-size: 16px;
            }
        }

        /* Larger screens */
        @media (min-width: 768px) {
            #carouselExampleControls {
                display: none !important;
            }
        }

        /* Carousel Controls */
        .carousel-control-prev,
        .carousel-control-next {
            width: auto;
            padding: 10px;
            opacity: 1;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 15px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            color: white;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .carousel-control-prev {
            left: 10px;
        }

        .carousel-control-next {
            right: 10px;
        }

        @media (max-width: 767.98px) {

            .carousel-control-prev,
            .carousel-control-next {
                width: 30px;
                height: 30px;
            }

            .carousel-control-prev-icon,
            .carousel-control-next-icon {
                width: 20px;
                height: 20px;
                padding: 10px;
            }
        }