.longCardBlock {
    margin: 3rem 0 0 0;
}
/*
 * Styles for each individual card
 */
.training-card {
    border-radius: 12px; /* Set a specific radius from style prop */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Equivalent to shadow-md */
    background-color: #fff; /* Equivalent to bg-white */
    border: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
}

.training-card.group:hover { /* Targeting with group class for hover effects */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Equivalent to hover:shadow-xl */
    transform: translateY(-0.25rem); /* Equivalent to hover:-translate-y-1 */
}

.card-header {
    padding: 1.5rem; /* Common padding for card headers */
}

.card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Equivalent to font-semibold */
    font-size: 1.125rem; /* Equivalent to text-lg */
    line-height: 1.75rem;
    color: #001f3f; /* Representative value for dark-navy */
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-colors duration-300 */
}

/* Group hover effect for card title */
.training-card.group:hover .card-title {
    color: var(--daikin-blue); /* Equivalent to group-hover:text-daikin-blue */
}

.card-content {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Adjust padding as needed for CardContent */
}

.card-description {
    font-family: 'Poppins', sans-serif;
    color: #4b5563; /* Equivalent to text-gray-600 */
    line-height: 1.75rem; /* Equivalent to leading-relaxed */
    text-align: left;
}

.card-header-split {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.card-header-icon {
    width: 1.5rem;
    height: auto;
    position: relative;
    top: 3px;
}


/* GRADIENT CARDS */
/*
 * Base styles for the training card container (re-evaluated from previous version)
 */
.gradient-long-cards .training-card { /* Adding .group class here for consistency with React */
    border-radius: 0.5rem; /* From original inline style={{ borderRadius: '8px' }} */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Equivalent to border border-white/20 */
    background-color: rgba(255, 255, 255, 0.1); /* Equivalent to bg-white/10 */
    backdrop-filter: blur(4px); /* Equivalent to backdrop-blur-sm */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
}

/* Hover background gradient */
.gradient-long-cards .training-card:hover {
    background: linear-gradient(129deg, rgba(51, 255, 108, 0.70) -5.06%, #0097E0 91.08%); /* Equivalent to hover:[background:linear-gradient(129deg,rgba(51,255,108,0.70)_-5.06%,#0097E0_91.08%)] */
}

/*
 * Header section of the card
 */
.gradient-long-cards .card-header {
    padding: 1rem 1rem 0.25rem 1rem; /* Adjust padding as needed. px-6 py-4 on original CardHeader was 1.5rem 1rem. Adjusting for space from content. */
}

/*
 * Flex container for icon and title within the header
 */
.gradient-long-cards .card-header-split {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/*
 * Container for the icon image (span.iconBox)
 */
.gradient-long-cards .iconBox {
    display: flex; /* To center the image inside */
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* A common size for the wrapper, adjust as needed */
    height: 2.5rem; /* A common size for the wrapper, adjust as needed */
    background-color: rgb(0 151 211 / 20%); /* Assuming a default color if not specified for iconBox directly */
    border-radius: .5rem; /* Rounded-full, if desired for the icon background */
    flex-shrink: 0; /* Prevents icon from shrinking in flex container */
}

.gradient-long-cards .training-card:hover .iconBox {
    background-color: #fff3
}

/*
* The icon image itself (img.card-header-icon)
*/
.gradient-long-cards .card-header-icon {
    width: 1.5rem; /* Equivalent to h-4 w-4 */
    height: 1.5rem; /* Equivalent to h-4 w-4 */
    object-fit: contain; /* Ensures the image scales properly within its container */
}

.gradient-long-cards .training-card:hover .card-header-icon {
    filter: brightness(0) invert(1);
}

/*
* Title within the card header
*/
.gradient-long-cards .card-title {
    font-weight: 600; /* Equivalent to font-semibold */
    font-size: .875rem; /* Equivalent to text-lg */
    line-height: 1.25rem; /* Default line-height for text-lg */
    color: var(--white); /* Representative value for dark-navy, adjust as needed */
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-colors duration-300 */
}

/* Group hover effect for card title */
.gradient-long-cards .training-card.group:hover .card-title {
    color: var(--white); /* Equivalent to group-hover:text-daikin-blue */
}

/*
 * Content section of the card
 */
.gradient-long-cards .card-content {
    padding: 0 1rem 1rem 1rem; /* Equivalent to px-6 pb-6 pt-2 (adjusted to pt-0 here if header has bottom padding) */
}

/*
 * Description text within the card content
 */
.gradient-long-cards .card-description {
    color: var(--gray-300); /* Equivalent to text-gray-600, adjust as needed */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    font-size: .75rem; /* Equivalent to text-base (default if text-sm not specific) */
}

/* Hover effect for the card description*/
.gradient-long-cards .training-card:hover .card-description {
    color: rgb(255 255 255, 1); /* Representative value for daikin-blue; change to your specific color */
}

/* GRADIENT CARDS END */