.professionTitle {
    font-size: clamp(3rem, 2vw, 4rem);
    line-height: 4rem;
    letter-spacing: 8px;
    margin-top: 0;
    margin-bottom: 30px;
    color: white;
    text-transform: uppercase;
}

h1.profession {
    letter-spacing: clamp(2px, 1vw, 8px);
    font-size: clamp(2.5rem, 8vw, 6em);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: clamp(20px, 4vw, 30px);
    text-transform: uppercase;
}

h2.profession {
    font-weight: bold;
    margin-bottom: clamp(15px, 3vw, 20px);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
}

.profession-card {
    border-radius: 1.5rem !important;
    overflow: hidden;
    margin: 5px;
    display: flex;
    /*align-items: center;*/
}

.btn-lg {
    text-transform: uppercase;
    font-weight: 600;
}

.card-img-top {
    object-fit: cover;
    height: 200px; /* Adjust as needed */
}

/* Optional hover effect for the button */
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.profession-card-title {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
    /*Make the title 6 lines high*/
    display: -webkit-box;
    -webkit-line-clamp: 5;
    height: calc(1.1em * 5);
    -webkit-box-orient: vertical;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
}

.triangle-bottom {
    position: absolute;
    bottom: -50px; /* Adjust this value to control how far down the triangle extends */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #fff; /* This creates the white triangle */
    z-index: 1;
}

.bg-fms {
    background-color: #EB2227;
}

.icon-text {
    color: black; 
    font-weight: bold;  
    font-size: 2rem;
    line-height: 2rem;
    text-transform:uppercase;
}

benefit-header {
    color: black;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.benefit-text {
    font-size: 1.1rem;
}

/* Pricing Section Styles */
.price-large {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.price-subtitle {
    font-size: clamp(1.5rem, 3vw, 3rem);
    text-transform: uppercase;
}

.price-label {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem); 
    font-weight: bold;
}

/* Stats Section Styles */
.stats-icon {
    width: 100px;
    height: 100px;
}

.stats-number {
    font-size: clamp(4rem, 10vw, 10em);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2rem;
}

.stats-label {
    font-size: clamp(1.5rem, 3vw, 3em);
    font-weight: bold;
    color: black;
}

.stats-footnote {
    font-size: clamp(1rem, 1.5vw, 1.2em);
    margin-top: 2rem;
}

.benefit-icon {
    max-width: 80px;
    height: auto;
}

.benefit-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.benefit-text {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: #666;
    max-width: 300px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .benefit-icon {
        max-width: 60px;
    }

    .benefit-title {
        margin-bottom: 0.5rem;
    }

    .col-12 {
        margin-bottom: 2rem !important;
    }
}

/* Optional: Add some hover effects */
.col-12:hover .benefit-icon {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-icon {
        margin-bottom: 2rem;
    }

    .stats-number {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .price-large {
        font-size: 3.5rem;
    }

    .price-subtitle {
        font-size: 1.5rem;
    }

    .stats-number {
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    .stats-label {
        font-size: 1.5rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .benefit-header {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .benefit-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .benefit-header {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .professionTitle,
    .professionContent {
        padding: 0 1rem;
        display: block;
    }
}