/* Fancy Title Block Styles */

/* Spacing Classes */
.mt-small {
    margin-top: var(--spacing-small);
}

.mt-medium {
    margin-top: var(--spacing-medium);
}

.mt-large {
    margin-top: var(--spacing-large);
}

.mb-small {
    margin-bottom: var(--spacing-small);
}

.mb-medium {
    margin-bottom: var(--spacing-medium);
}

.mb-large {
    margin-bottom: var(--spacing-large);
}

/* Main Block Styles */
.fancytitle-wrapper {
    position: relative;
    width: 100%;
    padding: 60px 0;
}

/* Title Styles */
.fancytitle-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 800px;
    line-height: 1.2;
    margin: 0 auto 50px;
}

/* Content Row Layout */
.fancytitle-content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* Left Column (40%) */
.fancytitle-left-col {
    flex: 0 0 calc(40% - 20px);
    width: calc(40% - 20px);
    position: relative;
}

/* Right Column (60%) */
.fancytitle-right-col {
    flex: 0 0 calc(60% - 20px);
    width: calc(60% - 20px);
}

/* Secondary Title Styles */
.fancytitle-secondary-title {
    font-weight: bold;
    color: black;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.fancytitle-secondary-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: var(--secondary);
}

/* Copy Styles */
.fancytitle-copy {
    margin-bottom: 30px;
}

/* Button Styles */
.fancytitle-button {
    margin-top: 20px;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .fancytitle-wrapper {
        padding: 50px 0;
    }

    .fancytitle-content-row {
        gap: 30px;
    }

    .fancytitle-left-col,
    .fancytitle-right-col {
        flex: 0 0 100%;
        width: 100%;
    }

    .fancytitle-secondary-title::after {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .fancytitle-wrapper {
        padding: 40px 0;
    }

    .fancytitle-title {
        font-size: 2rem;
    }
}