@media (max-width: 1280px) {
    .hero-title {
        font-size: 46px;
    }

    .hero-left-content {
        padding-left: 5vw;
        max-width: 560px;
    }

    .hero-desc {
        font-size: 13px;
        line-height: 20px;
    }

    .right-circle-badge {
        width: 105px;
        height: 105px;
        top: 6%;
        right: 4%;
    }

    .badge-main {
        font-size: 22px;
    }

    .right-quote-box {
        left: 5%;
        top: 12%;
    }

    .quote-word.italic {
        font-size: 18px;
    }

    .quote-word.bold-today {
        font-size: 20px;
    }
}


/* =========================================================
   2. TABLETS (max-width: 1024px)
========================================================= */
@media (max-width: 1024px) {
    .slg-hero-section {
        background: #002938 !important;
        min-height: auto;
    }

    .hero-slide-bg {
        display: none !important;
    }

    .hero-container {
        min-height: auto;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 50px 24px;
        gap: 0;
    }

    .hero-left-content {
        max-width: 100%;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-desc {
        max-width: 100%;
    }

    .hero-right-overlays {
        display: none !important;
    }
}


/* =========================================================
   3. MOBILE PHONES (max-width: 768px)
   STRICT MOBILE TYPOGRAPHY:
   - H1: 32px, 700 weight, 1.3 line-height
   - H2: 26px, 600 weight, 1.32 line-height
   - H3: 22px, 500 weight, 1.35 line-height
   - P:  16px, 400 weight, 1.35 line-height
========================================================= */
@media (max-width: 768px) {
    .hero-content-wrapper {
        padding: 40px 16px 50px 16px;
        gap: 0;
    }

    .hero-left-content {
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .hero-eyebrow {
        gap: 8px;
        margin-bottom: 10px;
    }

    .eyebrow-text {
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .hero-title {
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        margin-bottom: 10px;
    }

    .hero-desc {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 24px;
    }

    .hero-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 24px;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 14px;
    }

    .hero-feature-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        width: 100%;
        margin-bottom: 20px;
    }

    .feature-v-divider {
        display: none;
    }

    .hero-feature-item {
        gap: 8px;
    }

    .feature-text small {
        font-size: 10px;
    }

    .hero-feature-text strong {
        font-size: 11.5px;
    }

    .hero-slider-wrapper {
        min-height: auto;
    }

    .hero-slide {
        min-height: auto;
    }

    .hero-nav-arrow {
        width: 38px;
        height: 38px;
        top: auto;
        bottom: 18px;
        transform: none;
    }

    .hero-nav-arrow svg {
        width: 18px;
        height: 18px;
    }

    .hero-nav-prev {
        left: 16px;
    }

    .hero-nav-next {
        right: 16px;
    }

    .hero-carousel-dots {
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }

    .hero-right-overlays {
        min-height: 220px;
        padding: 16px;
    }

    .right-circle-badge {
        width: 90px;
        height: 90px;
        right: 14px;
        top: 14px;
        border-width: 2px;
    }

    .badge-sub-top {
        font-size: 7px;
    }

    .badge-main {
        font-size: 18px;
    }

    .badge-sub-bot {
        font-size: 7.5px;
    }

    .right-quote-box {
        left: 14px;
        top: 14px;
    }

    .quote-word {
        font-size: 13px;
    }

    .quote-word.italic {
        font-size: 15px;
    }

    .quote-word.bold-today {
        font-size: 17px;
    }

    .right-bottom-pill {
        bottom: 14px;
        right: 14px;
        left: 14px;
        justify-content: center;
        padding: 8px 14px;
        gap: 10px;
    }

    .pill-left-text {
        font-size: 10.5px;
    }

    .pill-divider-line {
        width: 22px;
    }

    .pill-right-text {
        font-size: 10px;
    }
}


/* =========================================================
   4. SMALL MOBILE (max-width: 480px)
========================================================= */
@media (max-width: 480px) {
    .hero-title {
        font-size: 28px !important;
    }

    .hero-feature-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .hero-right-overlays {
        min-height: 190px;
    }
}

/* =========================================================
   SECTION 2: OUR APPROACH RESPONSIVE RULES
========================================================= */
@media (max-width: 1280px) {
    .approach-title {
        font-size: 38px;
    }

    .approach-grid {
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    .slg-approach-section {
        background-image: none !important;
        background-color: #FAF7ED !important;
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .approach-left-visual {
        align-items: center;
        width: 100%;
    }

    .approach-visual-card {
        max-width: 520px;
        margin: 0 auto;
    }

    .approach-left-subtag {
        justify-content: center;
        padding-left: 0;
    }

    .approach-right-content {
        max-width: 100%;
    }

    .approach-right-subtag {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .slg-approach-section {
        background-image: none !important;
        background-color: #FAF7ED !important;
        padding: 50px 0 40px 0;
    }

    .approach-container {
        width: calc(100% - 32px);
    }

    .approach-title {
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        margin-bottom: 16px;
    }

    .approach-para {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 14px;
    }

    .approach-para:last-of-type {
        margin-bottom: 24px;
    }

    .approach-feature-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 24px;
    }

    .approach-divider-line {
        display: none;
    }

    .approach-icon-circle {
        width: 40px;
        height: 40px;
    }

    .approach-left-subtag,
    .approach-right-subtag {
        justify-content: center;
        width: 100%;
        margin-top: 14px;
    }
}

@media (max-width: 480px) {
    .approach-title {
        font-size: 26px !important;
    }

    .approach-feature-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* =========================================================
   INTERMEDIATE SECTION: VALUE RIBBON RESPONSIVE RULES
========================================================= */
@media (max-width: 1024px) {
    .value-ribbon-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .ribbon-divider {
        display: none;
    }

    .value-ribbon-item {
        padding: 8px 0;
    }
}

@media (max-width: 768px) {
    .slg-value-ribbon {
        padding: 30px 0;
    }

    .value-ribbon-container {
        grid-template-columns: 1fr 1fr;
        gap: 22px 14px;
        width: calc(100% - 32px);
    }

    .value-ribbon-item {
        gap: 12px;
    }

    .ribbon-icon-circle {
        width: 48px;
        height: 48px;
    }

    .ribbon-sub-top {
        font-size: 11.5px;
    }

    .ribbon-main-val {
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .ribbon-main-title {
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .ribbon-sub-bot {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .value-ribbon-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .value-ribbon-item {
        padding: 6px 0;
    }
}

/* =========================================================
   SECTION 3 & 4: WHY SLG GOLD & DARK TRUST RIBBON RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .center-title {
        font-size: 32px;
    }

    .trust-dark-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .trust-dark-divider {
        display: none;
    }

    .trust-dark-item {
        padding: 8px 0;
    }
}

@media (max-width: 768px) {
    .slg-why-section {
        padding: 55px 0 60px 0;
    }

    .why-container {
        width: calc(100% - 32px);
    }

    .center-title {
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        margin-bottom: 12px;
    }

    .center-subtitle {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 35px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-card {
        padding: 22px 20px 18px 20px;
    }

    .why-card-icon {
        width: 46px;
        height: 46px;
    }

    .why-card-title {
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .why-card-desc {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 18px;
    }

    .slg-trust-dark-ribbon {
        padding: 30px 0;
    }

    .trust-dark-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px 14px;
        width: calc(100% - 32px);
    }

    .trust-dark-item {
        justify-content: flex-start;
        gap: 12px;
        padding: 0;
    }

    .trust-dark-icon svg {
        width: 24px;
        height: 24px;
    }

    .trust-dark-text strong {
        font-size: 11px;
    }

    .trust-dark-text small {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .trust-dark-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =========================================================
   SECTION 5: HOW IT WORKS RESPONSIVE RULES
========================================================= */
@media (max-width: 1024px) {
    .how-steps-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 52px 24px;
        margin-top: 45px;
    }

    .step-connector-arrow {
        display: none;
    }

    .how-step-card {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .slg-how-section {
        padding: 55px 0 60px 0;
    }

    .how-container {
        width: calc(100% - 32px);
    }

    .how-steps-wrapper {
        grid-template-columns: 1fr;
        gap: 48px;
        margin-top: 42px;
        margin-bottom: 35px;
    }

    .how-step-card {
        padding: 46px 20px 24px 20px;
    }

    .how-step-title {
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .how-step-desc {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    .how-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .how-subtag .subtag-text {
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .how-subtag .subtag-line {
        width: 20px;
    }
}


/* =========================================================
   SECTION 6: GOLDEN THOUGHT BANNER RESPONSIVE RULES
========================================================= */
@media (max-width: 1280px) {
    .thought-title {
        font-size: 32px;
    }

    .thought-content-wrapper {
        grid-template-columns: 60% 40%;
    }
}

@media (max-width: 1024px) {
    .thought-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 24px;
    }

    .thought-left-content {
        max-width: 100%;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        padding: 30px;
        border-radius: 20px;
        border: 1px solid rgba(212, 175, 55, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .thought-right-overlays {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .slg-thought-section {
        min-height: auto;
    }

    .thought-container {
        min-height: auto;
    }

    .thought-content-wrapper {
        width: calc(100% - 32px);
        padding: 40px 0;
        gap: 24px;
    }

    .thought-left-content {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .thought-title {
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        margin-bottom: 12px;
    }

    .thought-subtitle {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 24px;
    }

    .thought-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .thought-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }

    .thought-v-divider {
        display: none;
    }

    .thought-mini-badges {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
    }

    .thought-badge-item {
        gap: 6px;
    }

    .thought-badge-item .badge-text strong {
        font-size: 10.5px;
    }

    .thought-badge-item .badge-text small {
        font-size: 9.5px;
    }

    .thought-right-overlays {
        width: 100%;
        justify-content: center;
    }

    .arch-quote-block {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .thought-mini-badges {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* =========================================================
   SECTION 7: CALL TO ACTION BANNER RESPONSIVE RULES
========================================================= */
@media (max-width: 1280px) {
    .cta-title {
        font-size: 32px;
    }

    .cta-content-wrapper {
        grid-template-columns: 42% 58%;
    }

    .cta-right-content {
        padding-left: 20px;
    }
}

@media (max-width: 1024px) {
    .cta-content-wrapper {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 45px 24px;
    }

    .cta-left-overlays {
        min-height: 250px;
    }

    .cta-right-content {
        max-width: 100%;
        padding: 30px;
        background: rgba(6, 24, 34, 0.88);
        backdrop-filter: blur(12px);
        border-radius: 20px;
        border: 1px solid rgba(212, 175, 55, 0.3);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    }

    .cta-leaf-decoration {
        display: none;
    }
}

@media (max-width: 768px) {
    .slg-cta-banner-section {
        min-height: auto;
    }

    .cta-banner-container {
        min-height: auto;
    }

    .cta-content-wrapper {
        width: calc(100% - 32px);
        padding: 35px 0;
        gap: 20px;
    }

    .cta-left-overlays {
        min-height: 200px;
    }

    .cta-pillar-tag-block {
        margin-top: 10px;
        margin-left: 6px;
    }

    .cta-pedestal-subtag {
        margin-bottom: 12px;
        margin-left: 10px;
    }

    .cta-pedestal-subtag .pedestal-text {
        font-size: 8.5px;
    }

    .cta-right-content {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .cta-eyebrow {
        gap: 8px;
        margin-bottom: 12px;
    }

    .cta-eyebrow-text {
        font-size: 10px;
        letter-spacing: 0.18em;
    }

    .cta-title {
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        margin-bottom: 12px;
    }

    .cta-desc {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin-bottom: 24px;
    }

    .cta-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 26px;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 14px;
    }

    .cta-features-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
        width: 100%;
    }

    .cta-feature-item {
        gap: 8px;
    }

    .cta-feature-text strong {
        font-size: 10.5px;
    }

    .cta-feature-text small {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .cta-title {
        font-size: 26px !important;
    }

    .cta-features-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}