```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM SECTION HEADING SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/section-heading.css
   Full Path:
   /public_html/assets/css/components/section-heading.css

   Version: 1.0

   Purpose:
   - Section Eyebrows
   - Section Titles
   - Highlight / Gold Text
   - Section Descriptions
   - Center / Left / Right Alignment
   - Dark Section Variants
   - Premium Decorative Lines
   - Section Heading Actions
   - Responsive Typography

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - badges.css
   ============================================================ */


/* ============================================================
   01. SECTION HEADING
   ============================================================ */

.section-heading {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 820px;

    margin-bottom:
        clamp(2rem, 4vw, 3.5rem);
}


/* ============================================================
   02. SECTION HEADING WIDE
   ============================================================ */

.section-heading-wide {
    max-width: 980px;
}


/* ============================================================
   03. SECTION HEADING NARROW
   ============================================================ */

.section-heading-narrow {
    max-width: 680px;
}


/* ============================================================
   04. SECTION EYEBROW
   ============================================================ */

.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-3);

    margin-bottom:
        var(--space-4);

    color: var(--color-secondary-dark);

    font-family: var(--font-ui);

    font-size: 0.56rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* ============================================================
   05. EYEBROW LEFT LINE
   ============================================================ */

.section-eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    flex: 0 0 34px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   06. EYEBROW DOUBLE LINE
   ============================================================ */

.section-eyebrow-double::after {
    content: "";

    width: 34px;
    height: 1px;

    flex: 0 0 34px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   07. EYEBROW DOT
   ============================================================ */

.section-eyebrow-dot::before {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);

    box-shadow:
        0 0 0 6px rgba(183, 138, 61, 0.08);
}


/* ============================================================
   08. EYEBROW NO LINE
   ============================================================ */

.section-eyebrow-none::before,
.section-eyebrow-none::after {
    display: none;
}


/* ============================================================
   09. EYEBROW BADGE
   ============================================================ */

.section-eyebrow-badge {
    min-height: 32px;

    padding:
        0
        var(--space-4);

    gap: var(--space-2);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    background:
        var(--bg-gold-soft);

    letter-spacing:
        0.09em;
}

.section-eyebrow-badge::before,
.section-eyebrow-badge::after {
    display: none;
}


/* ============================================================
   10. EYEBROW ICON
   ============================================================ */

.section-eyebrow-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--color-secondary-dark);

    font-size: 0.56rem;

    line-height: 1;
}


/* ============================================================
   11. SECTION TITLE
   ============================================================ */

.section-title {
    max-width: 820px;

    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size:
        clamp(2.15rem, 4vw, 4rem);

    font-weight: var(--font-semibold);

    line-height: 1.05;

    letter-spacing: -0.038em;

    text-wrap: balance;
}


/* ============================================================
   12. SECTION TITLE SMALL
   ============================================================ */

.section-title-sm {
    font-size:
        clamp(1.75rem, 3vw, 2.8rem);
}


/* ============================================================
   13. SECTION TITLE LARGE
   ============================================================ */

.section-title-lg {
    font-size:
        clamp(2.6rem, 5vw, 4.8rem);
}


/* ============================================================
   14. SECTION TITLE EXTRA LARGE
   ============================================================ */

.section-title-xl {
    font-size:
        clamp(3rem, 6vw, 5.8rem);

    line-height: 0.98;
}


/* ============================================================
   15. GOLD TITLE TEXT
   ============================================================ */

.section-title .text-gold,
.section-title-gold {
    color: var(--color-secondary-dark);
}


/* ============================================================
   16. PRIMARY TITLE TEXT
   ============================================================ */

.section-title .text-primary {
    color: var(--color-primary);
}


/* ============================================================
   17. ITALIC TITLE TEXT
   ============================================================ */

.section-title .text-italic {
    font-style: italic;

    font-weight: var(--font-medium);
}


/* ============================================================
   18. TITLE GRADIENT
   ============================================================ */

.section-title-gradient {
    background:
        linear-gradient(
            120deg,
            var(--color-primary-deep),
            var(--color-primary),
            var(--color-secondary-dark)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


/* ============================================================
   19. TITLE GOLD GRADIENT
   ============================================================ */

.section-title-gold-gradient {
    background:
        linear-gradient(
            120deg,
            var(--color-secondary-dark),
            var(--color-secondary),
            var(--color-secondary-light)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


/* ============================================================
   20. SECTION DESCRIPTION
   ============================================================ */

.section-description {
    max-width: 680px;

    margin:
        var(--space-5)
        0
        0;

    color: var(--text-body);

    font-size:
        clamp(0.68rem, 1vw, 0.76rem);

    line-height: 1.8;
}


/* ============================================================
   21. DESCRIPTION LARGE
   ============================================================ */

.section-description-lg {
    max-width: 760px;

    font-size:
        clamp(0.72rem, 1.1vw, 0.82rem);

    line-height: 1.85;
}


/* ============================================================
   22. DESCRIPTION SMALL
   ============================================================ */

.section-description-sm {
    max-width: 600px;

    font-size: 0.64rem;

    line-height: 1.7;
}


/* ============================================================
   23. DESCRIPTION STRONG
   ============================================================ */

.section-description strong {
    color: var(--color-primary-deep);

    font-weight: var(--font-semibold);
}


/* ============================================================
   24. DESCRIPTION LINK
   ============================================================ */

.section-description a {
    color: var(--color-secondary-dark);

    font-weight: var(--font-semibold);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


/* ============================================================
   25. LEFT ALIGNMENT
   ============================================================ */

.section-heading-left {
    margin-right: auto;

    text-align: left;
}


/* ============================================================
   26. CENTER ALIGNMENT
   ============================================================ */

.section-heading-center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.section-heading-center
.section-title,

.section-heading-center
.section-description {
    margin-right: auto;
    margin-left: auto;
}

.section-heading-center
.section-eyebrow {
    justify-content: center;
}


/* ============================================================
   27. RIGHT ALIGNMENT
   ============================================================ */

.section-heading-right {
    margin-left: auto;

    text-align: right;
}

.section-heading-right
.section-title,

.section-heading-right
.section-description {
    margin-left: auto;
}

.section-heading-right
.section-eyebrow {
    justify-content: flex-end;
}


/* ============================================================
   28. SECTION HEADING ROW
   ============================================================ */

.section-heading-row {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        clamp(1.5rem, 4vw, 4rem);

    width: 100%;

    max-width: none;

    margin-bottom:
        clamp(2rem, 4vw, 3.5rem);
}


/* ============================================================
   29. HEADING ROW CONTENT
   ============================================================ */

.section-heading-row-content {
    max-width: 780px;
}


/* ============================================================
   30. HEADING ROW ACTION
   ============================================================ */

.section-heading-action {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex: 0 0 auto;
}


/* ============================================================
   31. HEADING META
   ============================================================ */

.section-heading-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-3)
        var(--space-5);

    margin-top:
        var(--space-5);
}


/* ============================================================
   32. HEADING META ITEM
   ============================================================ */

.section-heading-meta-item {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.54rem;

    font-weight: var(--font-semibold);

    line-height: 1.4;
}


/* ============================================================
   33. META ICON
   ============================================================ */

.section-heading-meta-item i {
    color: var(--color-secondary-dark);

    font-size: 0.58rem;
}


/* ============================================================
   34. DECORATIVE TITLE LINE
   ============================================================ */

.section-heading-line {
    position: relative;

    padding-bottom:
        var(--space-5);
}


/* ============================================================
   35. DECORATIVE LINE
   ============================================================ */

.section-heading-line::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 70px;
    height: 2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient-gold);
}


/* ============================================================
   36. CENTER DECORATIVE LINE
   ============================================================ */

.section-heading-center.section-heading-line::after {
    left: 50%;

    transform:
        translateX(-50%);
}


/* ============================================================
   37. RIGHT DECORATIVE LINE
   ============================================================ */

.section-heading-right.section-heading-line::after {
    right: 0;
    left: auto;
}


/* ============================================================
   38. PREMIUM HEADING
   ============================================================ */

.section-heading-premium {
    position: relative;

    padding-left:
        var(--space-6);
}


/* ============================================================
   39. PREMIUM SIDE LINE
   ============================================================ */

.section-heading-premium::before {
    content: "";

    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 0;

    width: 2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient-gold);
}


/* ============================================================
   40. CENTER PREMIUM RESET
   ============================================================ */

.section-heading-center.section-heading-premium {
    padding-left: 0;
}

.section-heading-center.section-heading-premium::before {
    display: none;
}


/* ============================================================
   41. DARK SECTION HEADING
   ============================================================ */

.section-heading-dark
.section-title {
    color: var(--text-white);
}


/* ============================================================
   42. DARK EYEBROW
   ============================================================ */

.section-heading-dark
.section-eyebrow {
    color: var(--color-secondary-light);
}


/* ============================================================
   43. DARK DESCRIPTION
   ============================================================ */

.section-heading-dark
.section-description {
    color:
        rgba(255, 255, 255, 0.58);
}


/* ============================================================
   44. DARK DESCRIPTION STRONG
   ============================================================ */

.section-heading-dark
.section-description strong {
    color: var(--text-white);
}


/* ============================================================
   45. DARK DESCRIPTION LINK
   ============================================================ */

.section-heading-dark
.section-description a {
    color: var(--color-secondary-light);
}


/* ============================================================
   46. DARK META
   ============================================================ */

.section-heading-dark
.section-heading-meta-item {
    color:
        rgba(255, 255, 255, 0.46);
}


/* ============================================================
   47. WHITE SECTION HEADING
   ============================================================ */

.section-heading-white
.section-title,
.section-heading-white
.section-eyebrow {
    color: #ffffff;
}

.section-heading-white
.section-description {
    color:
        rgba(255, 255, 255, 0.66);
}


/* ============================================================
   48. NUMBER HEADING
   ============================================================ */

.section-heading-number {
    position: relative;
}


/* ============================================================
   49. BACKGROUND NUMBER
   ============================================================ */

.section-heading-number::before {
    content: attr(data-number);

    position: absolute;

    top: -35px;
    left: -20px;

    z-index: -1;

    color:
        rgba(183, 138, 61, 0.08);

    font-family: var(--font-heading);

    font-size:
        clamp(5rem, 10vw, 9rem);

    font-weight: var(--font-bold);

    line-height: 1;

    pointer-events: none;
}


/* ============================================================
   50. CENTER BACKGROUND NUMBER
   ============================================================ */

.section-heading-center.section-heading-number::before {
    left: 50%;

    transform:
        translateX(-50%);
}


/* ============================================================
   51. SECTION HEADING ICON
   ============================================================ */

.section-heading-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom:
        var(--space-5);

    border:
        1px solid var(--border-gold);

    border-radius: 17px;

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.9rem;

    box-shadow:
        0 10px 28px rgba(183, 138, 61, 0.08);
}


/* ============================================================
   52. GOLD ICON
   ============================================================ */

.section-heading-icon-gold {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}


/* ============================================================
   53. DARK ICON
   ============================================================ */

.section-heading-icon-dark {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.06);
}


/* ============================================================
   54. CIRCLE ICON
   ============================================================ */

.section-heading-icon-circle {
    border-radius:
        var(--radius-circle);
}


/* ============================================================
   55. SECTION HEADING LABEL
   ============================================================ */

.section-heading-label {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-top:
        var(--space-5);

    padding:
        9px
        14px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    color: var(--text-muted);

    background:
        var(--bg-soft);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-semibold);

    line-height: 1.4;
}


/* ============================================================
   56. GOLD LABEL
   ============================================================ */

.section-heading-label-gold {
    color: var(--color-secondary-dark);

    border-color: var(--border-gold);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   57. HEADING DIVIDER
   ============================================================ */

.section-heading-divider {
    display: flex;

    align-items: center;

    gap: var(--space-3);

    width: 100%;

    margin-top:
        var(--space-6);
}


/* ============================================================
   58. DIVIDER LINE
   ============================================================ */

.section-heading-divider::before {
    content: "";

    width: 70px;
    height: 1px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   59. DIVIDER DOT
   ============================================================ */

.section-heading-divider::after {
    content: "";

    width: 6px;
    height: 6px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);
}


/* ============================================================
   60. CENTER DIVIDER
   ============================================================ */

.section-heading-center
.section-heading-divider {
    justify-content: center;
}


/* ============================================================
   61. SECTION INTRO
   ============================================================ */

.section-intro {
    max-width: 780px;

    color: var(--text-body);

    font-family: var(--font-heading);

    font-size:
        clamp(1.05rem, 1.8vw, 1.35rem);

    font-weight: var(--font-medium);

    line-height: 1.6;
}


/* ============================================================
   62. SECTION INTRO GOLD
   ============================================================ */

.section-intro strong {
    color: var(--color-secondary-dark);

    font-weight: var(--font-semibold);
}


/* ============================================================
   63. SECTION KICKER
   ============================================================ */

.section-kicker {
    display: block;

    margin-bottom:
        var(--space-3);

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ============================================================
   64. HEADING WITH COUNTER
   ============================================================ */

.section-heading-counter {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-5);
}


/* ============================================================
   65. COUNTER
   ============================================================ */

.section-heading-counter-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-heading);

    font-size: 0.9rem;

    font-weight: var(--font-semibold);
}


/* ============================================================
   66. COUNTER CONTENT
   ============================================================ */

.section-heading-counter-content {
    min-width: 0;
}


/* ============================================================
   67. NO BOTTOM MARGIN
   ============================================================ */

.section-heading-no-margin {
    margin-bottom: 0;
}


/* ============================================================
   68. SMALL BOTTOM MARGIN
   ============================================================ */

.section-heading-mb-sm {
    margin-bottom:
        var(--space-5);
}


/* ============================================================
   69. LARGE BOTTOM MARGIN
   ============================================================ */

.section-heading-mb-lg {
    margin-bottom:
        clamp(3rem, 6vw, 5rem);
}


/* ============================================================
   70. ANIMATED HEADING
   ============================================================ */

.section-heading-animate
.section-eyebrow,

.section-heading-animate
.section-title,

.section-heading-animate
.section-description,

.section-heading-animate
.section-heading-meta,

.section-heading-animate
.section-heading-action {
    opacity: 0;

    transform:
        translateY(18px);

    animation:
        sectionHeadingReveal 0.75s forwards;
}


/* ============================================================
   71. ANIMATION DELAYS
   ============================================================ */

.section-heading-animate
.section-eyebrow {
    animation-delay: 0.05s;
}

.section-heading-animate
.section-title {
    animation-delay: 0.12s;
}

.section-heading-animate
.section-description {
    animation-delay: 0.19s;
}

.section-heading-animate
.section-heading-meta {
    animation-delay: 0.26s;
}

.section-heading-animate
.section-heading-action {
    animation-delay: 0.33s;
}


/* ============================================================
   72. HEADING REVEAL
   ============================================================ */

@keyframes sectionHeadingReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   73. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .section-heading {
        max-width: 860px;
    }

    .section-heading-wide {
        max-width: 1040px;
    }

}


/* ============================================================
   74. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .section-heading-row {
        align-items: flex-start;

        flex-direction: column;

        gap: var(--space-5);
    }

    .section-heading-action {
        justify-content: flex-start;
    }

    .section-title {
        font-size:
            clamp(2.1rem, 5vw, 3.5rem);
    }

}


/* ============================================================
   75. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .section-heading {
        margin-bottom:
            var(--space-7);
    }

    .section-title {
        font-size:
            clamp(2rem, 9vw, 3rem);

        letter-spacing: -0.032em;
    }

    .section-title-lg {
        font-size:
            clamp(2.25rem, 10vw, 3.4rem);
    }

    .section-title-xl {
        font-size:
            clamp(2.5rem, 11vw, 3.7rem);
    }

    .section-description {
        margin-top:
            var(--space-4);
    }

    .section-heading-premium {
        padding-left:
            var(--space-5);
    }

    .section-heading-number::before {
        top: -25px;
        left: -8px;
    }

}


/* ============================================================
   76. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .section-heading {
        margin-bottom:
            var(--space-6);
    }

    .section-eyebrow {
        gap: var(--space-2);

        margin-bottom:
            var(--space-3);

        font-size: 0.5rem;

        letter-spacing: 0.11em;
    }

    .section-eyebrow::before,
    .section-eyebrow-double::after {
        width: 27px;

        flex-basis: 27px;
    }

    .section-title {
        font-size:
            clamp(1.9rem, 10vw, 2.7rem);

        line-height: 1.08;
    }

    .section-title-sm {
        font-size:
            clamp(1.65rem, 9vw, 2.3rem);
    }

    .section-title-lg {
        font-size:
            clamp(2.1rem, 11vw, 3rem);
    }

    .section-title-xl {
        font-size:
            clamp(2.3rem, 12vw, 3.25rem);
    }

    .section-description {
        font-size: 0.65rem;

        line-height: 1.75;
    }

    .section-heading-row {
        margin-bottom:
            var(--space-6);
    }

    .section-heading-action {
        width: 100%;
    }

    .section-heading-action
    .btn {
        width: 100%;
    }

    .section-heading-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: var(--space-3);
    }

    .section-heading-counter {
        gap: var(--space-4);
    }

    .section-heading-counter-number {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}


/* ============================================================
   77. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .section-title {
        font-size: 1.85rem;
    }

    .section-heading-premium {
        padding-left:
            var(--space-4);
    }

}


/* ============================================================
   78. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .section-heading-animate
    .section-eyebrow,

    .section-heading-animate
    .section-title,

    .section-heading-animate
    .section-description,

    .section-heading-animate
    .section-heading-meta,

    .section-heading-animate
    .section-heading-action {
        opacity: 1;

        transform: none;

        animation: none;
    }

}


/* ============================================================
   END OF SECTION HEADING SYSTEM
   ============================================================ */
```