/* =========================================================
   Homepage — Pro Redesign (Pink + Dark Blue blend)
   Scope: everything inside .home-pro.
   Does NOT touch the logged-out hero / registration card.
   ========================================================= */

.home-pro {
    --hp-dark:        #053951;
    --hp-dark-2:      #0a4b6c;
    --hp-dark-soft:   rgba(5, 57, 81, .08);
    --hp-dark-line:   rgba(5, 57, 81, .14);

    --hp-pink:        #e6356b;
    --hp-pink-2:      #ff5c8a;
    --hp-pink-soft:   rgba(230, 53, 107, .10);
    --hp-pink-line:   rgba(230, 53, 107, .22);

    --hp-cream:       #faf6f0;
    --hp-cream-2:     #fbf8f4;
    --hp-surface:     #ffffff;

    --hp-gold:        #b8893c;
    --hp-gold-soft:   rgba(184, 137, 60, .14);

    --hp-text:        #16212a;
    --hp-muted:       #6b7785;
    --hp-line:        #ece5db;

    --hp-radius:      14px;
    --hp-radius-sm:   8px;
    --hp-shadow-sm:   0 1px 2px rgba(5, 57, 81, .05), 0 1px 1px rgba(5, 57, 81, .04);
    --hp-shadow:      0 6px 22px rgba(5, 57, 81, .08), 0 2px 4px rgba(5, 57, 81, .04);
    --hp-shadow-lg:   0 18px 40px rgba(5, 57, 81, .14);

    color: var(--hp-text);
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

/* =========================================================
   Section title helper (used by .hp-section-title wrapper)
   ========================================================= */
.home-pro .section-title h2 {
    color: var(--hp-dark);
    font-weight: 700;
    letter-spacing: -.015em;
    font-size: 28px;
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}
.home-pro .section-title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--hp-dark) 0%, var(--hp-pink) 100%);
    border-radius: 999px;
    transform: translateX(-50%);
}
.home-pro .section-title p {
    color: var(--hp-muted);
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 640px;
    margin: 12px auto 0;
}

/* Eyebrow text helper */
.home-pro .hp-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--hp-pink);
    margin-bottom: 8px;
    padding: 4px 12px;
    background: var(--hp-pink-soft);
    border-radius: 999px;
}

/* =========================================================
   LOGGED-IN SLIDER + SEARCH FILTER
   ========================================================= */
.home-pro .home-slider-area {
    position: relative;
}
.home-pro .home-slider-area::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 57, 81, .55) 100%);
    pointer-events: none;
}

.home-pro .home-slider-area > .container { z-index: 2; }

.home-pro .home-slider-area .p-4.bg-white.rounded-top {
    background: #fff !important;
    border-radius: var(--hp-radius) var(--hp-radius) 0 0 !important;
    border: 1px solid var(--hp-line);
    border-bottom: none;
    box-shadow: 0 -25px 50px -12px rgba(5, 57, 81, .25) !important;
    padding: 22px 24px !important;
    position: relative;
    overflow: hidden;
}
.home-pro .home-slider-area .p-4.bg-white.rounded-top::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-dark) 0%, var(--hp-pink) 50%, var(--hp-gold) 100%);
}

.home-pro .home-slider-area .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hp-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

/* Equalise input + selectpicker heights in search filter */
.home-pro .home-slider-area .form-group { margin-bottom: 14px !important; }

.home-pro .home-slider-area .form-control,
.home-pro .home-slider-area .bootstrap-select > .dropdown-toggle.btn,
.home-pro .home-slider-area .bootstrap-select > .dropdown-toggle.btn.btn-light {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 22px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    border: 1px solid var(--hp-line) !important;
    border-radius: var(--hp-radius-sm) !important;
    background: var(--hp-cream-2) !important;
    color: var(--hp-text) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    display: flex;
    align-items: center;
    width: 100%;
}
.home-pro .home-slider-area .bootstrap-select {
    width: 100% !important;
    height: 44px !important;
}
.home-pro .home-slider-area .bootstrap-select > .dropdown-toggle .filter-option {
    line-height: 22px;
    display: flex;
    align-items: center;
}
.home-pro .home-slider-area input[type="number"].form-control {
    -moz-appearance: textfield;
}
.home-pro .home-slider-area input[type="number"].form-control::-webkit-outer-spin-button,
.home-pro .home-slider-area input[type="number"].form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.home-pro .home-slider-area .form-control:focus,
.home-pro .home-slider-area .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--hp-dark) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(5, 57, 81, .12) !important;
}

/* Search button — same 44px height aligned with inputs */
.home-pro .home-slider-area .btn.btn-primary {
    background: linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-dark-2) 100%) !important;
    border: none !important;
    border-radius: var(--hp-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    height: 44px !important;
    padding: 0 18px !important;
    line-height: 44px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(5, 57, 81, .25);
    transition: transform .15s ease, box-shadow .15s ease;
    width: 100%;
    /* mt-4 in markup keeps button aligned with input columns (label + label margin = ~26px) */
    margin-top: 26px !important;
}
.home-pro .home-slider-area .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(5, 57, 81, .3), 0 0 0 2px var(--hp-pink-soft);
}

/* =========================================================
   PREMIUM / NEW MEMBER SECTIONS
   ========================================================= */
.home-pro .premium-members-section,
.home-pro .hp-new-members {
    background: var(--hp-cream-2) !important;
    padding-top: 70px !important;
    padding-bottom: 80px !important;
    position: relative;
    overflow: hidden;
}
.home-pro .premium-members-section::before,
.home-pro .hp-new-members::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--hp-pink-soft) 0%, transparent 70%);
    pointer-events: none;
}
.home-pro .premium-members-section::after,
.home-pro .hp-new-members::after {
    content: "";
    position: absolute;
    bottom: -100px; left: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--hp-dark-soft) 0%, transparent 70%);
    pointer-events: none;
}
.home-pro .premium-members-section .container,
.home-pro .hp-new-members .container { position: relative; z-index: 1; }

.home-pro .premium-members-section .premium-member-card {
    border: 1px solid var(--hp-line) !important;
    border-radius: var(--hp-radius) !important;
    box-shadow: var(--hp-shadow-sm) !important;
    padding: 8px !important;
    max-width: 240px !important;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-pro .premium-members-section .premium-member-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg) !important;
    border-color: var(--hp-dark-line) !important;
}
.home-pro .premium-members-section .premium-member-card-image {
    border-radius: var(--hp-radius-sm) !important;
    border: 1px solid var(--hp-line);
}
.home-pro .premium-members-section .premium-member-card .h6 {
    color: var(--hp-dark);
    font-weight: 600;
}
.home-pro .premium-members-section .premium-member-card .btn-primary {
    background: linear-gradient(135deg, var(--hp-pink) 0%, var(--hp-pink-2) 100%) !important;
    border-color: var(--hp-pink) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(230, 53, 107, .25) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600 !important;
}
.home-pro .premium-members-section .premium-member-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(230, 53, 107, .35) !important;
}

/* New member carousel cards (uses member_box_1 partial) */
.home-pro .hp-new-members .carousel-box {
    padding: 6px;
}
.home-pro .hp-new-members .carousel-box .card,
.home-pro .hp-new-members .carousel-box > div {
    border-radius: var(--hp-radius) !important;
    border: 1px solid var(--hp-line) !important;
    overflow: hidden;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: var(--hp-shadow-sm);
}
.home-pro .hp-new-members .carousel-box .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hp-shadow);
}

/* =========================================================
   BANNER ROW
   ========================================================= */
.home-pro .hp-banner {
    background: var(--hp-cream-2);
    padding: 24px 0 12px;
}
.home-pro .hp-banner .mb-3 {
    border-radius: var(--hp-radius);
    overflow: hidden;
    box-shadow: var(--hp-shadow-sm);
    border: 1px solid var(--hp-line);
    transition: transform .2s ease, box-shadow .2s ease;
}
.home-pro .hp-banner .mb-3:hover {
    transform: translateY(-2px);
    box-shadow: var(--hp-shadow);
}
.home-pro .hp-banner img {
    transition: transform .4s ease;
    display: block;
    width: 100%;
}
.home-pro .hp-banner a:hover img { transform: scale(1.04); }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.home-pro .hp-how-it-works {
    background: linear-gradient(180deg, var(--hp-cream-2) 0%, #fff 100%);
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}
.home-pro .hp-how-it-works .border.p-3 {
    border: 1px solid var(--hp-line) !important;
    border-radius: var(--hp-radius) !important;
    padding: 22px !important;
    background: #fff;
    box-shadow: var(--hp-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.home-pro .hp-how-it-works .border.p-3::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--hp-dark) 0%, var(--hp-pink) 100%);
}
.home-pro .hp-how-it-works .border.p-3:hover {
    transform: translateY(-4px);
    border-color: var(--hp-dark-line) !important;
    box-shadow: var(--hp-shadow);
}
.home-pro .hp-how-it-works .text-primary.h1 {
    color: var(--hp-pink) !important;
    background: linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    margin-bottom: 10px;
}
.home-pro .hp-how-it-works .text-secondary {
    color: var(--hp-dark) !important;
    font-weight: 600;
    font-size: 16px !important;
}
.home-pro .hp-how-it-works .fs-15 {
    color: var(--hp-muted);
    font-size: 13.5px !important;
    line-height: 1.6;
}
.home-pro .hp-how-it-works img.h-80px {
    filter: drop-shadow(0 4px 8px rgba(5, 57, 81, .15));
}

/* =========================================================
   TRUSTED BY MILLIONS
   ========================================================= */
.home-pro .hp-trusted {
    position: relative;
}
.home-pro .hp-trusted::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(5, 57, 81, .82) 0%, rgba(5, 57, 81, .72) 50%, rgba(230, 53, 107, .55) 100%);
    pointer-events: none;
}
.home-pro .hp-trusted > .container { position: relative; z-index: 1; }
.home-pro .hp-trusted h2 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    font-size: 32px;
}
.home-pro .hp-trusted .fs-16 {
    color: rgba(255, 255, 255, .82);
    font-size: 15px !important;
}
.home-pro .hp-trusted .border.rounded.border-gray-600 {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--hp-radius) !important;
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
    position: relative;
}
.home-pro .hp-trusted .border.rounded.border-gray-600::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: var(--hp-gold);
    border-radius: 0 3px 3px 0;
}
.home-pro .hp-trusted .border.rounded.border-gray-600:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .28) !important;
}
.home-pro .hp-trusted .border.rounded .absolute-full.bg-dark {
    display: none;
}
.home-pro .hp-trusted .border.rounded .fs-17 {
    color: #fff !important;
    font-weight: 500;
    font-size: 14.5px !important;
    margin-left: 12px !important;
}
.home-pro .hp-trusted .border.rounded img.h-20px {
    filter: brightness(0) invert(1);
}

/* =========================================================
   HAPPY STORIES
   ========================================================= */
.home-pro .hp-happy-stories {
    background: linear-gradient(135deg, #061d2b 0%, var(--hp-dark) 60%, #062a3d 100%) !important;
    padding-top: 80px !important;
    padding-bottom: 90px !important;
    position: relative;
    overflow: hidden;
}
.home-pro .hp-happy-stories::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(184, 137, 60, .18) 0%, transparent 70%);
    pointer-events: none;
}
.home-pro .hp-happy-stories::after {
    content: "";
    position: absolute;
    bottom: -100px; left: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(230, 53, 107, .14) 0%, transparent 70%);
    pointer-events: none;
}
.home-pro .hp-happy-stories .container { position: relative; z-index: 1; }
.home-pro .hp-happy-stories .section-title h2 {
    color: #fff;
}
.home-pro .hp-happy-stories .section-title h2::after {
    background: linear-gradient(90deg, var(--hp-gold) 0%, var(--hp-pink) 100%);
}
.home-pro .hp-happy-stories .card {
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: var(--hp-radius) !important;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.home-pro .hp-happy-stories .card:hover {
    transform: translateY(-4px);
    border-color: var(--hp-gold) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
.home-pro .hp-happy-stories .card img {
    transition: transform .5s ease;
}
.home-pro .hp-happy-stories .card:hover img { transform: scale(1.05); }
.home-pro .hp-happy-stories .card .text-primary {
    color: var(--hp-gold) !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.home-pro .hp-happy-stories .card .absolute-bottom-left .absolute-full.bg-dark {
    background: linear-gradient(180deg, transparent 0%, rgba(5, 25, 35, .92) 100%) !important;
    opacity: 1 !important;
}
.home-pro .hp-happy-stories .btn.btn-primary {
    background: linear-gradient(135deg, var(--hp-pink) 0%, var(--hp-pink-2) 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 6px 18px rgba(230, 53, 107, .35) !important;
}
.home-pro .hp-happy-stories .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(230, 53, 107, .45) !important;
}

/* =========================================================
   PACKAGES
   ========================================================= */
.home-pro .hp-packages {
    background: var(--hp-cream-2) !important;
    padding-top: 80px !important;
    padding-bottom: 90px !important;
    position: relative;
    overflow: hidden;
}
.home-pro .hp-packages::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 320px;
    background: radial-gradient(ellipse at center, var(--hp-pink-soft) 0%, transparent 70%);
    pointer-events: none;
}
.home-pro .hp-packages .container { position: relative; z-index: 1; }

.home-pro .hp-packages .carousel-box {
    padding: 14px 10px;
}
.home-pro .hp-packages .overflow-hidden.shadow-none.mb-3 {
    border: 1px solid var(--hp-line) !important;
    border-radius: var(--hp-radius) !important;
    background: #fff;
    box-shadow: var(--hp-shadow-sm) !important;
    overflow: hidden !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
}
.home-pro .hp-packages .overflow-hidden.shadow-none.mb-3::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--hp-dark) 0%, var(--hp-pink) 100%);
}
.home-pro .hp-packages .overflow-hidden.shadow-none.mb-3:hover {
    transform: translateY(-6px);
    box-shadow: var(--hp-shadow-lg) !important;
    border-color: var(--hp-pink-line) !important;
}
.home-pro .hp-packages .card-body {
    padding: 28px 22px !important;
}
.home-pro .hp-packages .card-body img {
    height: 110px !important;
    margin-bottom: 16px !important;
}
.home-pro .hp-packages .card-body h5.h5.fw-600 {
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-dark);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.home-pro .hp-packages .list-group-raw .list-group-item {
    border: none;
    background: transparent;
    border-bottom: 1px dashed var(--hp-line);
    padding: 10px 0 !important;
    font-size: 13.5px;
}
.home-pro .hp-packages .list-group-raw .list-group-item:last-child {
    border-bottom: none;
}
.home-pro .hp-packages .list-group-raw .text-success { color: var(--hp-dark) !important; }
.home-pro .hp-packages .list-group-raw .text-danger { color: var(--hp-pink) !important; }
.home-pro .hp-packages .display-4 {
    font-size: 34px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.home-pro .hp-packages .text-secondary {
    color: var(--hp-muted) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}
.home-pro .hp-packages .btn.btn-primary {
    background: linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-dark-2) 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(5, 57, 81, .25) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.home-pro .hp-packages .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(5, 57, 81, .3), 0 0 0 2px var(--hp-pink-soft) !important;
}
.home-pro .hp-packages .btn.btn-light {
    background: var(--hp-cream-2) !important;
    border: 1px dashed var(--hp-line) !important;
    color: var(--hp-muted) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 500;
}

/* =========================================================
   REVIEWS
   ========================================================= */
.home-pro .hp-reviews {
    position: relative;
}
.home-pro .hp-reviews::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(5, 57, 81, .9) 0%, rgba(5, 57, 81, .72) 100%);
    pointer-events: none;
}
.home-pro .hp-reviews > .container { position: relative; z-index: 1; }
.home-pro .hp-reviews h2 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -.015em;
    font-size: 30px;
}
.home-pro .hp-reviews .section-title h2::after {
    background: linear-gradient(90deg, var(--hp-gold) 0%, var(--hp-pink) 100%);
}
.home-pro .hp-reviews .size-180px {
    width: 130px !important;
    height: 130px !important;
    border: 3px solid var(--hp-gold) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
}
.home-pro .hp-reviews .fs-18 {
    color: rgba(255, 255, 255, .92);
    font-size: 16px !important;
    line-height: 1.8;
    max-width: 760px;
    margin: 22px auto 18px;
    font-weight: 300;
}
.home-pro .hp-reviews .la-quote-right {
    color: var(--hp-gold) !important;
    opacity: .3 !important;
    font-size: 5em !important;
}

/* =========================================================
   Carousel arrow & dot polish
   ========================================================= */
.home-pro .slick-dots li button:before {
    color: var(--hp-dark) !important;
    opacity: .25 !important;
}
.home-pro .slick-dots li.slick-active button:before {
    color: var(--hp-pink) !important;
    opacity: 1 !important;
}
.home-pro .slick-prev:before,
.home-pro .slick-next:before {
    color: var(--hp-dark) !important;
}
.home-pro .hp-happy-stories .slick-prev:before,
.home-pro .hp-happy-stories .slick-next:before,
.home-pro .hp-reviews .slick-prev:before,
.home-pro .hp-reviews .slick-next:before {
    color: #fff !important;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 991.98px) {
    .home-pro .section-title h2 { font-size: 22px; }
    .home-pro .hp-trusted h2 { font-size: 24px; }
    .home-pro .hp-packages .display-4 { font-size: 28px; }
    .home-pro .premium-members-section,
    .home-pro .hp-new-members,
    .home-pro .hp-how-it-works,
    .home-pro .hp-packages {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}