/* =============================================
   Train With Sania — Custom Styles
   ============================================= */

html {
    scroll-behavior: smooth;
}

/* ── Spacing utilities ─────────────────────── */
section.pt-40 { padding-top: 40px !important; }
section.pb-40 { padding-bottom: 40px !important; }

/* ── Problems → Results full-bleed split ───── */
.section-split {
    display: flex;
    flex-wrap: wrap;
}

.container-half-left,
.container-half-right {
    width: 50%;
    padding: 0;
    position: relative;
    background-position: 30% center;
}

@media (max-width: 991px) {
    .container-half-left,
    .container-half-right {
        width: 100%;
        padding: 0;
    }
    .container-half-left {
        background-position: 55% center !important;
    }
    .container-half-right {
        background-position: -5% center !important;
    }
    .jarallax-img {
        object-position: 80% center !important;
    }
    /* About page — pin subject center (~38% from left in original image) */
    #about-hero .jarallax-img,
    #about-philosophy .jarallax-img {
        object-position: 38% center !important;
    }
    /* Contact page — pin subject center (~33% from left in original image) */
    #contact-hero .jarallax-img {
        object-position: 33% center !important;
    }
    /* Programs page — pin subject center (~42% from left in original image) */
    #programs-hero .jarallax-img {
        object-position: 42% center !important;
    }
    /* Remove hero bottom spacer gap */
    section.jarallax .col-xl-6 > .spacer-double:last-child {
        height: 0;
    }
    /* Prevent How It Works overlay image from overlapping text below */
    .mb-min-50 {
        margin-bottom: 0 !important;
    }
}

/* ── Description split — gradient overlays ── */
.gradient-overlay-dark,
.gradient-overlay-pink {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gradient-overlay-dark {
    background: linear-gradient(to right,
        rgba(10,10,15,0)    0%,
        rgba(10,10,15,0)    47%,
        rgba(10,10,15,0.49) 62%,
        rgba(10,10,15,0.58) 72%);
}

.gradient-overlay-pink {
    background: linear-gradient(to right,
        rgba(209,15,120,0)    0%,
        rgba(209,15,120,0)    47%,
        rgba(209,15,120,0.49) 62%,
        rgba(209,15,120,0.58) 72%);
}

.split-content {
    position: relative;
    z-index: 1;
    padding: 70px 5% 70px 62%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 991px) {
    .gradient-overlay-dark {
        background: rgba(10,10,15,0.51);
    }
    .gradient-overlay-pink {
        background: rgba(209,15,120,0.51);
    }
    .split-content {
        padding: 40px 24px;
        min-height: auto;
    }
}

/* ── Split list — icon + text alignment ─────── */
.split-content ul li {
    display: flex;
    align-items: flex-start;
}
.split-content ul li i {
    flex-shrink: 0;
    margin-top: 3px;
}

/* ── X-mark / danger colour ────────────────── */
.text-danger-soft {
    color: #d10f78;
}

/* ── Most Popular badge ─────────────────────── */
.badge-popular {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-1, #d10f78);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-bottom-left-radius: 6px;
    text-transform: uppercase;
}

/* ── Free Value section form contrast ──────── */
#free-value .bg-dark-2 {
    background: rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(255,255,255,0.12);
}

#free-value .form-control {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

#free-value .form-control::placeholder {
    color: rgba(255,255,255,0.5);
}

#free-value select.form-control option {
    background: #1a1a2e;
    color: #fff;
}

/* ── Credentials bar ─────────────────────── */
.credentials-bar {
    background: var(--bg-dark-3, #111);
}

/* ── Testimonials carousel ─────────────── */
.testimonials-section {
    overflow: hidden;
}

.testimonials-swiper {
    padding-bottom: 56px !important;
}

.testimonials-swiper .swiper-slide {
    height: auto;
}

.testimonials-swiper .swiper-slide > div {
    height: 100%;
}

.testimonials-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.4);
    opacity: 1;
}

.testimonials-pagination .swiper-pagination-bullet-active {
    background: var(--color-1, #d10f78);
}

.testimonials-prev,
.testimonials-next {
    color: var(--color-1, #d10f78) !important;
    top: auto;
    bottom: 2px;
}

.testimonials-prev { left: calc(50% - 48px); }
.testimonials-next { right: calc(50% - 48px); left: auto; }

.testimonials-prev::after,
.testimonials-next::after {
    font-size: 18px !important;
}

/* ── Testimonial stars ──────────────────── */
.star-rating i {
    color: var(--color-1, #d10f78);
    font-size: 14px;
}

.star-rating-lg {
    display: block;
}

.star-rating-lg i {
    font-size: 28px;
    margin: 0 2px;
}

/* ── Alert messages (forms) ─────────────── */
.alert-success {
    background: rgba(39,174,96,0.2);
    border: 1px solid rgba(39,174,96,0.5);
    color: #2ecc71;
    padding: 12px 16px;
    border-radius: 6px;
}

.alert-danger {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.5);
    color: #d10f78;
    padding: 12px 16px;
    border-radius: 6px;
}

/* ── Footer logo size ───────────────────── */
footer img.w-250px {
    width: 125px !important;
}

/* ── Plan gate modal ────────────────────── */
#planGateModal .modal-content {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}

/* Allow <button> to carry btn-main styles */
button.btn-main {
    border: none;
    cursor: pointer;
}

/* ── FAQ accordion dark styling ─────────── */
.accordion-item {
    background: transparent;
    border-color: rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.accordion-button {
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background: rgba(255,255,255,0.1);
    color: #fff;
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(1);
}

.accordion-body {
    background: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.8);
}