.custom-card {
            border: none;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            position: relative; /* Essential for overlay positioning */
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* For hover lift/shadow */
        }

        .custom-card:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift on hover */
        }

        .card-img-container {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem 0.5rem 0 0;
            line-height: 0; /* Important to remove any extra space below the image */
            /* Removed bottom border, the .card-diamond-section will act as the visual divider */
        }

        .card-img-container img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }
        
        /* Full Card Hover Overlay */
        .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(174, 198, 207, 0.95); /* Light pastel blue with opacity */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.3s ease;
            text-align: center;
            padding: 1.5rem;
            box-sizing: border-box; /* Include padding in dimensions */
            z-index: 10; /* Below the diamond */
        }

        .custom-card:hover .card-overlay {
            opacity: 1; /* Visible on hover */
        }

        .card-overlay h4 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .card-overlay p {
            font-size: 1rem;
            line-height: 1.5;
            margin-bottom: 0;
        }

        /* --- Diamond Icon Section --- */
        .card-diamond-section {
            position: relative;
            height: 50px; /* This height acts as the visual divider between image and content */
            background-color: transparent; /* Makes this section itself invisible */
            z-index: 20; /* Ensures it is above the image but below the main card-overlay */
            margin-top: -25px; /* Pull it up to visually overlap the image by half its height */
            margin-bottom: -25px; /* Pull it down to visually overlap the content by half its height */
            /* The image's bottom and card-body's top meet in the middle of this 50px section */
        }

        /* Icon Container (diamond itself) */
        .icon-container {
            position: absolute;
            top: 50%; /* Center vertically within .card-diamond-section */
            left: 50%;
            transform: translate(-50%, -50%); /* Perfect centering */
            z-index: 30; /* Ensure it's above everything else */
            opacity: 1; /* Visible by default */
            transition: opacity 0.3s ease; /* Smooth fade in/out */
        }
        
        /* HIDE DIAMOND ON CARD HOVER */
        .custom-card:hover .icon-container {
            opacity: 0;
        }

        .diamond-shape {
            width: 60px; 
            height: 60px; 
            background-color: white;
            transform: rotate(45deg);
            overflow: hidden;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            border-radius: 0.5rem; 
            display: flex; 
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .diamond-content {
            transform: rotate(-45deg); /* Rotate back to keep content upright */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .diamond-content .bi {
            font-size: 1.8rem; 
        }
        
        /* Custom colors for icons */
        .color-orange-pink { color: #ff8c69; } 
        .color-blue-purple { color: #8a2be2; }


        .card-body {
            /* Adjust padding-top to give adequate space below the diamond section */
            padding-top: 3.5rem; /* This creates the space below the diamond */
            text-align: center; 
            background-color: white;
            padding-left: 1rem; 
            padding-right: 1rem;
            padding-bottom: 3rem; 
            /* Added padding-bottom to ensure the overall card box size increases with the image */
            border-radius: 0 0 0.5rem 0.5rem; /* Round bottom corners */
        }

        .card-body h5 {
            font-weight: 500; 
            color: #333;
            font-size: 1.1rem; 
        }