@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400&family=Open+Sans:wght@400&display=swap');

h7, h8, h9, h10, h11, h12, h13, h14 {
    font-family: 'Crimson Pro', serif;
    font-weight: 400;
}

/* Color definitions */
h7 {
    color: #D14124;
}
/* emotional */
h8 {
    color: #535486;
}
/* environmental */
h9 {
    color: #00482B;
}
/* financial */
h10 {
    color: #E9CDD0;
}
/* intellectual */
h11 {
    color: #007DBA;
}
/* physical */
h12 {
    color: #C8B8F1;
}
/* professional */
h13 {
    color: #778921;
}
/* relational */
h14 {
    color: #ECDD31;
}
/* spiritual */

body {
    background-color: #FFFFFF !important;
}

/* Simple spacing fix */
.grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Bottom spacer to prevent footer clipping */
.bottom-spacer {
    height: 80px; /* Adjust this value as needed */
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
}

/* Responsive grid - 3 columns on large screens */
@media (min-width: 992px) {
    .cards-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .cards-grid .card {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

/* 2 columns on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 column on small screens */
@media (max-width: 767px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

.card {
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: 1px solid #D3D3D3;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FFFFFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 4px 12px 16px 0 rgba(22, 22, 26, 0.25);
}

/* Updated card title colors using specific class names */
.card-emotional .card-title {
    font-family: 'Crimson Pro', serif;
    color: #D14124;
    font-size: 1.5em;
}

.card-environmental .card-title {
    font-family: 'Crimson Pro', serif;
    color: #535486;
    font-size: 1.5em;
}

.card-financial .card-title {
    font-family: 'Crimson Pro', serif;
    color: #00482B;
    font-size: 1.5em;
}

.card-intellectual .card-title {
    font-family: 'Crimson Pro', serif;
    color: #E9CDD0;
    font-size: 1.5em;
}

.card-physical .card-title {
    font-family: 'Crimson Pro', serif;
    color: #007DBA;
    font-size: 1.5em;
}

.card-professional .card-title {
    font-family: 'Crimson Pro', serif;
    color: #C8B8F1;
    font-size: 1.5em;
}

.card-relational .card-title {
    font-family: 'Crimson Pro', serif;
    color: #778921;
    font-size: 1.5em;
}

.card-spiritual .card-title {
    font-family: 'Crimson Pro', serif;
    color: #ECDD31;
    font-size: 1.5em;
}

/* Card body font */
.card .card-body, .card .card-body * {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
}

/* Updated button colors using specific class names - matching element hex codes exactly */
.card-emotional .btn {
    background-color: #D14124; /* Emotional red */
    color: white;
    border: 2px solid #A5331C; /* Darker red outline */
}

.card-environmental .btn {
    background-color: #535486; /* Environmental purple */
    color: white;
    border: 2px solid #434368; /* Darker purple outline */
}

.card-financial .btn {
    background-color: #00482B; /* Financial dark green */
    color: white;
    border: 2px solid #003A22; /* Even darker green outline */
}

.card-intellectual .btn {
    background-color: #E9CDD0; /* Intellectual light pink */
    color: #333333; /* Dark text for better contrast */
    border: 2px solid #D4A8AD; /* Darker pink outline */
}

.card-physical .btn {
    background-color: #007DBA; /* Physical blue */
    color: white;
    border: 2px solid #006395; /* Darker blue outline */
}

.card-professional .btn {
    background-color: #C8B8F1; /* Professional light purple */
    color: #333333; /* Dark text for better contrast */
    border: 2px solid #A599E3; /* Darker light purple outline */
}

.card-relational .btn {
    background-color: #778921; /* Relational olive green */
    color: white;
    border: 2px solid #5F6E1A; /* Darker olive outline */
}

.card-spiritual .btn {
    background-color: #ECDD31; /* Spiritual yellow */
    color: #333333; /* Dark text for better contrast */
    border: 2px solid #D4C428; /* Darker yellow outline */
}

/* Remove all carousel-related styles and replace with grid-friendly styles */

/* Image wrapper - perfectly centered */
.card .img-wrapper {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.card .img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .card .img-wrapper {
        height: 180px;
    }
}

.header-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 8px;
}

/* Button styling */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}