.text-divider-text {
    font-size: 24px !important;
}

.text-divider-section {
    background: var(--color-text-divider) !important;
}

@media (min-width: 768px) {
    .text-divider-text {
        font-size: 28px !important;
    }
}

@media (min-width: 992px) {
    .text-divider-text {
        font-size: 32px !important;
        margin-block: 2.5rem !important;
    }
}

@media (min-width: 1200px) {
    .text-divider-text {
        font-size: 34px !important;
        margin-block: 3rem !important;
    }
}

/* Text Divider with Button - Larger Text */
.text-divider-section:has(.text-divider-button) .text-divider-text {
    font-size: 28px !important;
}

@media (min-width: 768px) {
    .text-divider-section:has(.text-divider-button) .text-divider-text {
        font-size: 32px !important;
    }
}

@media (min-width: 992px) {
    .text-divider-section:has(.text-divider-button) .text-divider-text {
        font-size: 36px !important;
        margin-block: 2.5rem !important;
    }
}

@media (min-width: 1200px) {
    .text-divider-section:has(.text-divider-button) .text-divider-text {
        font-size: 3.25rem !important;
        margin-block: 3rem !important;
    }
}

/* Text Divider Button Styles */
.text-divider-button .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: transparent !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.text-divider-button .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

.text-divider-button .btn-outline-light:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
}

.text-divider-button .btn-outline-light:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1) !important;
}