@font-face {
    font-family: bootstrap-icons;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"), url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff")
}

:root {
    --color-gold: #8f5f0f;
    --color-gold-hover: #784f0b;
    --color-green-primary: #0b6b4b;
    --color-green-dark: #064232;
    --color-green-hover: #042d22;
    --color-cream: #fbf7ee;
    --color-sand: #f3ebda;
    --color-white: #ffffff;
    --color-text-dark: #1f2a25;
    --color-text-muted: #1f2a25;
    --color-border-light: #e7decc;
    --color-border-gold: #d4a853;
    --section-space: 55px;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --shadow-sm: 0 2px 8px rgba(11, 107, 75, 0.06);
    --shadow-md: 0 8px 24px rgba(11, 107, 75, 0.08);
    --shadow-lg: 0 16px 36px rgba(11, 107, 75, 0.12);
    --shadow-gold: 0 8px 24px rgba(168, 116, 26, 0.16);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.35s ease;
    --transition-slow: 0.6s ease
}

@media (max-width:991.98px) {
    :root {
        --section-space: 45px
    }
}

@media (max-width:575.98px) {
    :root {
        --section-space: 35px
    }
}

*,
::after,
::before {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: clip
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.h1,
h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    line-height: 1.2;
    color: var(--color-green-primary);
    margin-bottom: .75rem
}

.h2,
h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw + .5rem, 2.6rem);
    line-height: 1.25;
    color: var(--color-green-primary);
    margin-bottom: .5rem
}

.h3,
h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.35rem, 2vw + .3rem, 1.85rem);
    line-height: 1.3;
    color: var(--color-green-primary)
}

.h4,
h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw + .2rem, 1.4rem);
    line-height: 1.35;
    color: var(--color-green-primary)
}

.h5,
.h6,
h5,
h6 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-dark)
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-muted)
}

a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color var(--transition-fast)
}

a:focus,
a:hover {
    color: var(--color-gold-hover);
    text-decoration: none
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px
}

.section-padded,
section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    position: relative
}

.bg-cream {
    background-color: var(--color-cream)
}

.bg-sand {
    background-color: var(--color-sand)
}

.bg-white-pure {
    background-color: var(--color-white)
}

.bg-green-dark {
    background-color: var(--color-green-dark);
    color: var(--color-white)
}

.bg-green-primary {
    background-color: var(--color-green-primary);
    color: var(--color-white)
}

.bg-gold {
    background-color: var(--color-gold);
    color: var(--color-white)
}

.islamic-pattern-cream {
    background-color: var(--color-cream);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l5 15 15 5-15 5-5 15-5-15-15-5 15-5z M0 30l5 5 5-5-5-5z M60 30l-5 5-5-5 5-5z' fill='%23A8741A' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E")
}

.islamic-pattern-sand {
    background-color: var(--color-sand);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l5 15 15 5-15 5-5 15-5-15-15-5 15-5z M0 30l5 5 5-5-5-5z M60 30l-5 5-5-5 5-5z' fill='%230B6B4B' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E")
}

.islamic-pattern-green {
    background-color: var(--color-green-dark);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l5 15 15 5-15 5-5 15-5-15-15-5 15-5z M0 30l5 5 5-5-5-5z M60 30l-5 5-5-5 5-5z' fill='%23A8741A' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E")
}

.section-header {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem)
}

.section-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-gold);
    margin-bottom: .35rem
}

.section-title {
    margin-bottom: .4rem
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: .5rem auto 0;
    width: 100%;
    max-width: 220px
}

.section-divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-gold)
}

.section-divider-motif {
    color: var(--color-gold);
    font-size: .95rem;
    line-height: 1
}

.bg-green-dark .section-title,
.bg-green-primary .section-title {
    color: var(--color-white)
}

.bg-green-dark .section-tag,
.bg-green-primary .section-tag {
    color: #e2b666
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
    border: 1px solid var(--color-gold);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.65rem;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px
}

.btn-gold:focus,
.btn-gold:hover {
    background-color: var(--color-gold-hover);
    border: 1px solid var(--color-gold-hover);
    color: var(--color-white);
    transform: translateY(-2px)
}

.btn-gold:active {
    transform: translateY(0)
}

.btn-outline-gold {
    background-color: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.65rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px
}

.btn-outline-gold:focus,
.btn-outline-gold:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px)
}

.btn-emerald {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    border: 1px solid var(--color-green-primary);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.65rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px
}

.btn-emerald:focus,
.btn-emerald:hover {
    background-color: var(--color-green-hover);
    border: 1px solid var(--color-green-hover);
    color: var(--color-white);
    transform: translateY(-2px)
}

.btn-outline-emerald {
    background-color: transparent;
    color: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.65rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px
}

.btn-outline-emerald:focus,
.btn-outline-emerald:hover {
    background-color: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
    color: var(--color-white);
    transform: translateY(-2px)
}

.btn-white-gold {
    background-color: var(--color-white);
    color: var(--color-green-dark);
    border: 1px solid var(--color-white);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.65rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px
}

.btn-white-gold:focus,
.btn-white-gold:hover {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light);
    color: var(--color-gold-hover);
    transform: translateY(-2px)
}

.top-info-bar {
    background-color: var(--color-green-dark);
    color: #e2ece8;
    font-size: .82rem;
    padding: 8px 0;
    z-index: 1040
}

.top-info-bar a {
    color: #e2ece8;
    transition: color var(--transition-fast)
}

.top-info-bar a:hover {
    color: #e2b666
}

.top-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.top-info-item i {
    color: var(--color-gold);
    font-size: .88rem
}

.top-info-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    margin-left: 6px;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast)
}

.top-info-social a:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: var(--color-white)
}

@media (max-width:767.98px) {
    .top-info-bar {
        padding: 6px 0;
        font-size: .78rem
    }
}

.main-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background-color: var(--color-cream);
    padding: .85rem 0;
    transition: all var(--transition-normal);
    z-index: 1030;
    box-shadow: 0 2px 14px rgba(6, 66, 50, .08);
    border: 0 solid var(--color-border-light)
}

.main-navbar.navbar-scrolled,
.main-navbar.scrolled {
    background-color: var(--color-cream);
    padding: .55rem 0;
    box-shadow: 0 4px 20px rgba(6, 66, 50, .14)
}

.main-navbar.navbar-scrolled .navbar-brand-logo,
.main-navbar.scrolled .navbar-brand-logo {
    height: clamp(52px, 5vw, 70px)
}

.navbar-brand-logo {
    height: clamp(68px, 6.5vw, 92px);
    width: auto;
    max-width: 360px;
    object-fit: contain;
    display: block;
    transition: transform var(--transition-fast), height var(--transition-normal)
}

.navbar-brand:hover .navbar-brand-logo {
    transform: scale(1.02)
}

.main-navbar .nav-link {
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .95rem;
    color: var(--color-text-dark);
    padding: .5rem .85rem !important;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    position: relative
}

.main-navbar .nav-link:hover {
    color: var(--color-green-primary);
    background-color: rgba(11, 107, 75, .08)
}

.main-navbar .nav-link.active {
    color: var(--color-green-primary) !important;
    font-weight: 600;
    background-color: rgba(11, 107, 75, .1);
    border: 1px solid var(--color-green-primary)
}

.main-navbar .navbar-toggler {
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-dark);
    padding: .45rem .75rem;
    font-size: 1.25rem;
    background-color: transparent
}

.main-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(11, 107, 75, .15);
    outline: 0
}

.offcanvas {
    background-color: var(--color-green-dark);
    color: var(--color-cream);
    width: min(320px, 100vw) !important;
    max-width: 100vw
}

.offcanvas:not(.show) {
    visibility: hidden !important
}

.offcanvas-header {
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 1.25rem 1.5rem
}

.offcanvas-body {
    padding: 1.5rem
}

.offcanvas .nav-link {
    color: var(--color-cream);
    font-size: 1.05rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: .25rem;
    transition: all var(--transition-fast)
}

.offcanvas .nav-link.active,
.offcanvas .nav-link:hover {
    color: var(--color-white) !important;
    background-color: rgba(255, 255, 255, .15);
    padding-left: 1.25rem
}

.hero-slider-section {
    padding: 0 !important;
    position: relative;
    overflow: visible;
    background-color: transparent
}

.hero-carousel {
    width: 100%;
    position: relative
}

.hero-slide-item {
    height: clamp(500px, 56vw, 680px);
    min-height: 440px;
    max-height: 720px;
    background-color: #121815
}

.hero-slide-img,
.hero-slide-item picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block
}

.hero-carousel .carousel-indicators {
    margin-bottom: 115px;
    z-index: 15
}

.hero-carousel .carousel-indicators [data-bs-target] {
    width: 14px;
    height: 14px;
    padding: 10px;
    box-sizing: content-box;
    border-radius: 50%;
    background-color: var(--color-white);
    background-clip: content-box;
    border: 2px solid var(--color-gold);
    opacity: .65;
    margin: 0 4px;
    transition: all var(--transition-fast)
}

.hero-carousel .carousel-indicators .active {
    background-color: var(--color-gold);
    border: 2px solid var(--color-gold);
    opacity: 1;
    transform: scale(1.25)
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .8s;
    transition-property: opacity
}

.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end,
.carousel-fade .carousel-item.active {
    opacity: 1
}

.hero-carousel .carousel-control-next,
.hero-carousel .carousel-control-prev {
    width: 52px;
    height: 52px;
    top: 45%;
    transform: translateY(-50%);
    background-color: rgba(6, 66, 50, .7);
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    opacity: .85;
    transition: all var(--transition-fast);
    margin: 0 16px;
    z-index: 12
}

.hero-carousel .carousel-control-next:hover,
.hero-carousel .carousel-control-prev:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    opacity: 1;
    transform: translateY(-50%) scale(1.06)
}

.hero-carousel .carousel-control-next-icon,
.hero-carousel .carousel-control-prev-icon {
    width: 20px;
    height: 20px
}

.hero-search-overlay {
    position: relative;
    z-index: 25;
    margin-top: -95px;
    padding-bottom: 25px
}

@media (max-width:991.98px) {
    .hero-slide-item {
        height: clamp(440px, 50vw, 560px)
    }

    .hero-search-overlay {
        margin-top: -65px;
        padding-bottom: 20px
    }

    .hero-carousel .carousel-indicators {
        margin-bottom: 85px
    }
}

@media (max-width:767.98px) {
    .hero-slide-item {
        height: auto;
        min-height: unset;
        max-height: unset;
        aspect-ratio: 1600/534
    }

    .hero-slide-img,
    .hero-slide-item picture {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center
    }

    .hero-search-overlay {
        margin-top: 0;
        padding-top: 12px;
        padding-bottom: 15px
    }

    .hero-carousel .carousel-indicators {
        margin-bottom: 8px
    }

    .hero-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        padding: 12px 6px;
        box-sizing: content-box;
        background-clip: content-box;
        margin: 0 3px
    }

    .hero-carousel .carousel-control-next,
    .hero-carousel .carousel-control-prev {
        display: none
    }
}

.quick-search-card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(6, 66, 50, .12);
    border: 2px solid var(--color-border-gold);
    padding: clamp(1.25rem, 2.5vw, 1.85rem);
    transition: box-shadow .35s ease, border-color .35s ease
}

.quick-search-card:hover {
    border: 2px solid var(--color-gold)
}

.quick-search-header {
    padding-bottom: .75rem;
    margin-bottom: 1.25rem
}

.quick-search-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px
}

.quick-search-title i {
    color: var(--color-gold)
}

.quick-search-badge {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--color-gold);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-gold);
    padding: 4px 12px;
    border-radius: var(--radius-pill)
}

.search-field-label {
    display: block;
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: .35rem
}

.looking-toggle-group {
    display: flex;
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 3px
}

.looking-toggle-btn {
    flex: 1;
    border: 1px solid transparent;
    background: 0 0;
    color: var(--color-text-dark);
    padding: .52rem .5rem;
    font-size: .92rem;
    font-weight: 500;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap
}

.looking-toggle-btn:hover {
    color: var(--color-green-primary)
}

.looking-toggle-btn.active {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    border: 1px solid var(--color-green-primary);
    font-weight: 600
}

.looking-toggle-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none
}

.search-input,
.search-select {
    font-family: var(--font-body);
    font-size: .9rem;
    padding: .65rem .85rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-height: 44px
}

.search-input:focus,
.search-select:focus {
    border: 1px solid var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(168, 116, 26, .2);
    outline: 0
}

.form-select.is-invalid,
.search-select.is-invalid {
    border-color: #d97706 !important;
    background-color: #fffdf5 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, .25) !important
}

.btn-search-profiles {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid var(--color-gold)
}

.trust-badge-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 18px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    height: 100%;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast)
}

.trust-badge-card:hover {
    transform: translateY(-3px);
    border: 1px solid var(--color-gold)
}

.trust-badge-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: var(--color-sand);
    color: var(--color-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 1px solid var(--color-border-gold)
}

.trust-badge-title {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-green-primary);
    margin: 0;
    line-height: 1.3
}

.about-frame-wrapper {
    position: relative;
    padding: 14px
}

.about-frame-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    border: 3px solid var(--color-gold);
    border-radius: var(--radius-md);
    z-index: 1;
    pointer-events: none
}

.about-image-card {
    position: relative;
    z-index: 2;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold)
}

.about-image-card img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block
}

.estd-badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border: 2px solid var(--color-gold);
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    text-align: center;
    z-index: 3;
    box-shadow: var(--shadow-md)
}

.estd-badge-year {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #e2b666;
    line-height: 1;
    display: block
}

.estd-badge-text {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-white)
}

.about-highlight-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0
}

.about-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem
}

.about-highlight-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: var(--color-cream);
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    margin-top: 2px
}

.about-highlight-text {
    font-size: .92rem;
    color: var(--color-text-dark);
    margin: 0
}

.step-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 2rem 1.4rem;
    text-align: center;
    height: 100%;
    position: relative;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease
}

.step-card:hover {
    transform: translateY(-7px);
    border: 1px solid var(--color-gold)
}

.step-card:hover .step-icon-wrap {
    transform: scale(1.08)
}

.step-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background-color: var(--color-gold);
    color: var(--color-white);
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-sm)
}

.step-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-cream);
    color: var(--color-green-primary);
    border: 1px solid var(--color-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    margin: .5rem auto 1.25rem;
    transition: background-color var(--transition-fast), color var(--transition-fast)
}

.step-card:hover .step-icon-wrap {
    background-color: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
    color: var(--color-white)
}

.step-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .6rem
}

.step-desc {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5
}

.package-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.35rem;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease
}

.package-card:hover {
    transform: translateY(-6px);
    border: 1px solid var(--color-border-gold)
}

.package-card.premium-highlight {
    border: 2px solid var(--color-gold);
    box-shadow: 0 8px 24px rgba(168, 116, 26, .14)
}

.package-card.premium-highlight:hover {
    transform: translateY(-6px);
    border: 2px solid var(--color-gold-hover)
}

.package-card.gold-highlight {
    border: 2px solid var(--color-green-primary);
    box-shadow: 0 8px 24px rgba(6, 66, 50, .14)
}

.package-card.gold-highlight:hover {
    transform: translateY(-6px);
    border: 2px solid var(--color-green-dark)
}

.package-ribbon {
    position: absolute;
    top: 10px;
    right: 12px;
    background-color: var(--color-gold);
    color: var(--color-white);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill)
}

.package-ribbon-gold {
    background-color: var(--color-green-primary)
}

.package-plan-tier {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: inline-block;
    margin-bottom: .4rem
}

.package-plan-tier.tier-premium {
    color: var(--color-gold)
}

.package-plan-tier.tier-gold {
    color: var(--color-green-primary)
}

.package-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-green-primary)
}

.package-card.gold-highlight .package-name {
    color: var(--color-green-dark)
}

.package-tagline {
    font-size: .92rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    margin-bottom: .65rem;
    min-height: 2.25em
}

.package-price-wrap {
    margin-bottom: .85rem;
    padding: .5rem .75rem;
    border: 1px solid rgba(168, 116, 26, .18);
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    text-align: center
}

.package-price {
    font-family: var(--font-heading);
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--color-green-dark);
    display: inline-block;
    line-height: 1
}

.package-card.premium-highlight .package-price {
    color: var(--color-gold)
}

.package-price-sub {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 10px
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.15rem;
    flex: 1
}

.package-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .92rem;
    line-height: 1.35;
    margin-bottom: .5rem;
    color: var(--color-text-dark)
}

.package-feature-item i {
    color: var(--color-gold);
    font-size: .95rem;
    margin-top: 1px;
    flex-shrink: 0
}

.package-card.gold-highlight .package-feature-item i {
    color: var(--color-green-primary)
}

.package-card .btn {
    padding: .62rem 1rem;
    font-size: .92rem;
    font-weight: 600
}

.profile-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem
}

.profile-filter-btn {
    background-color: var(--color-cream);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    padding: 6px 18px;
    font-size: .85rem;
    font-weight: 600;
    transition: all var(--transition-fast)
}

.profile-filter-btn:hover {
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold)
}

.profile-filter-btn.active {
    background-color: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm)
}

.profile-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease
}

.profile-card:hover {
    border: 1px solid var(--color-gold)
}

.profile-card:hover .profile-img {
    transform: scale(1.05)
}

.profile-img-wrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: #ece5d5
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: none;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.profile-confidential-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(6, 66, 50, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center
}

.confidential-pill {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border: 1px solid var(--color-gold);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.profile-id-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--color-white);
    color: var(--color-green-primary);
    border: 1px solid var(--color-border-gold);
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    z-index: 2
}

.profile-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column
}

.profile-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .25rem
}

.profile-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: .85rem;
    flex-wrap: wrap
}

.profile-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex: 1
}

.profile-detail-item {
    font-size: .92rem;
    color: var(--color-text-dark);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.profile-detail-item i {
    color: var(--color-green-primary);
    font-size: .9rem;
    width: 16px
}

@media (max-width:767.98px) {
    .profiles-row-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: none !important;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .profiles-row-scroll::-webkit-scrollbar {
        display: none
    }

    .profiles-row-scroll>[class*=col-] {
        flex: 0 0 78%;
        max-width: 78%
    }
}

@media (min-width:768px) {
    .profile-clone {
        display: none !important
    }
}

.why-box {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.85rem 1.4rem;
    height: 100%;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast)
}

.why-box:hover {
    transform: translateY(-6px);
    border: 1px solid var(--color-gold)
}

.why-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    background-color: var(--color-sand);
    color: var(--color-green-primary);
    border: 1px solid var(--color-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    transition: background-color var(--transition-fast), color var(--transition-fast)
}

.why-box:hover .why-icon-wrap {
    background-color: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
    color: var(--color-white)
}

.why-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .5rem
}

.why-desc {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55
}

.parallax-stats-section {
    position: relative;
    background-image: url("../images/banner.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--color-white);
    overflow: hidden
}

.parallax-stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(6, 66, 50, .45);
    z-index: 1
}

.parallax-stats-content {
    position: relative;
    z-index: 2
}

@media (max-width:767.98px) {
    .parallax-stats-section {
        background-attachment: scroll
    }
}

.stat-box {
    background-color: rgba(4, 45, 34, .85);
    border: 1px solid rgba(168, 116, 26, .45);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.2rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: transform var(--transition-fast), border-color var(--transition-fast)
}

.stat-box:hover {
    transform: translateY(-5px);
    border: 1px solid var(--color-gold)
}

.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    color: #e2b666;
    line-height: 1.1;
    margin-bottom: .35rem
}

.stat-label {
    font-size: .95rem;
    font-weight: 500;
    color: #e2ece8;
    text-transform: uppercase;
    letter-spacing: 1px
}

.parallax-quran-quote {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    text-align: center
}

.quran-ayah {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    margin-bottom: .5rem
}

.quran-ref {
    font-family: var(--font-body);
    font-size: .82rem;
    color: #e2b666;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600
}

.testimonial-card-premium {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast)
}

.testimonial-card-premium:hover {
    transform: translateY(-6px);
    border: 1px solid var(--color-gold)
}

.testimonial-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.25rem
}

.testimonial-avatar {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-gold);
    box-shadow: var(--shadow-sm)
}

.testimonial-couple-names {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 2px;
    line-height: 1.2
}

.testimonial-nikah-badge {
    background-color: var(--color-cream);
    color: var(--color-gold);
    border: 1px solid var(--color-border-gold);
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.testimonial-rating-stars {
    color: var(--color-gold);
    font-size: .92rem;
    margin-bottom: .85rem
}

.testimonial-body-quote {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--color-text-dark);
    font-style: normal;
    margin-bottom: 1.25rem;
    flex: 1
}

.testimonial-meta-footer {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--color-text-muted)
}

.zaid-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden
}

.zaid-slider-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 10px 4px 18px 4px
}

.zaid-slider-viewport.is-dragging,
.zaid-slider-viewport:active {
    cursor: grabbing
}

.zaid-slider-track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.25, 1, .5, 1);
    will-change: transform
}

.zaid-slider-viewport.is-dragging .zaid-slider-track {
    transition: none
}

.zaid-slider-slide {
    flex: 0 0 calc((100% - 48px)/ 3);
    max-width: calc((100% - 48px)/ 3);
    box-sizing: border-box;
    display: flex
}

.zaid-slider-slide>* {
    width: 100%
}

@media (max-width:991.98px) {
    .zaid-slider-slide {
        flex: 0 0 calc((100% - 24px)/ 2);
        max-width: calc((100% - 24px)/ 2)
    }
}

@media (max-width:767.98px) {
    .zaid-slider-slide {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.zaid-slider--four .zaid-slider-slide {
    flex: 0 0 calc((100% - 72px)/ 4);
    max-width: calc((100% - 72px)/ 4)
}

@media (max-width:1199.98px) {
    .zaid-slider--four .zaid-slider-slide {
        flex: 0 0 calc((100% - 48px)/ 3);
        max-width: calc((100% - 48px)/ 3)
    }
}

@media (max-width:991.98px) {
    .zaid-slider--four .zaid-slider-slide {
        flex: 0 0 calc((100% - 24px)/ 2);
        max-width: calc((100% - 24px)/ 2)
    }
}

@media (max-width:767.98px) {
    .zaid-slider--four .zaid-slider-slide {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.zaid-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 1.25rem
}

.zaid-slider-arrow {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast)
}

.zaid-slider-arrow:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px)
}

.zaid-slider-arrow:active {
    transform: translateY(0)
}

.zaid-slider-dots {
    display: flex;
    align-items: center;
    gap: 4px
}

.zaid-slider-dot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.zaid-slider-dot::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border-light);
    transition: all var(--transition-fast)
}

.zaid-slider-dot:hover::before {
    background-color: var(--color-gold)
}

.zaid-slider-dot.active {
    width: 36px;
    min-width: 36px;
    background-color: transparent;
    border: none
}

.zaid-slider-dot.active::before {
    width: 26px;
    border-radius: 12px;
    background-color: var(--color-green-primary)
}

.faq-accordion .accordion-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm) !important;
    margin-bottom: .85rem;
    overflow: hidden
}

.faq-accordion .accordion-button {
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 600;
    color: var(--color-green-primary);
    background-color: var(--color-white);
    padding: 1.1rem 1.25rem;
    box-shadow: none;
    transition: all var(--transition-fast)
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-cream);
    color: var(--color-gold-hover)
}

.faq-accordion .accordion-button:focus {
    outline: 2px solid var(--color-gold);
    box-shadow: none
}

.faq-accordion .accordion-body {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    padding: 1.25rem;
    background-color: var(--color-white)
}

.final-cta-band {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    padding: clamp(28px, 3.5vw, 42px) 0
}

.final-cta-title {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25
}

.final-cta-sub {
    color: #d7ece3;
    font-size: .95rem;
    line-height: 1.5;
    max-width: 620px
}

.main-footer {
    background-color: var(--color-green-dark);
    color: #dbe7e2;
    font-size: .95rem;
    padding: 55px 0
}

.footer-logo-wrap {
    display: inline-block;
    background-color: var(--color-white);
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.35rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    border: 1px solid var(--color-border-gold)
}

.footer-logo {
    height: clamp(68px, 6vw, 84px);
    width: auto;
    max-width: 320px;
    object-fit: contain;
    display: block
}

.footer-desc {
    font-size: .92rem;
    line-height: 1.65;
    color: #dbe7e2;
    margin-bottom: 1.15rem
}

.footer-tagline-note {
    color: #e2b666;
    font-weight: 600;
    letter-spacing: .5px;
    font-size: .92rem
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #e2b666;
    margin-bottom: 1.15rem
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links li {
    margin-bottom: .65rem
}

.footer-links a {
    color: #dbe7e2;
    font-size: .92rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none
}

.footer-links a:hover {
    color: #e2b666;
    padding-left: 4px
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: .85rem;
    font-size: .92rem;
    color: #dbe7e2;
    line-height: 1.5
}

.footer-contact-item a {
    color: #dbe7e2;
    text-decoration: none;
    transition: color var(--transition-fast)
}

.footer-contact-item a:hover {
    color: #e2b666
}

.footer-contact-item i {
    color: #e2b666;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0
}

.footer-social-links {
    display: flex;
    gap: 12px;
    margin-top: 1rem
}

.footer-social-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .08);
    color: #e2ece8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(168, 116, 26, .35);
    transition: all var(--transition-fast)
}

.footer-social-btn:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px)
}

.footer-bottom {
    background-color: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
    padding: 1rem 1.4rem;
    margin-top: 2rem;
    font-size: .9rem;
    color: #dbe7e2
}

.footer-bottom a {
    color: #dbe7e2
}

.footer-bottom a:hover {
    color: #e2b666
}

.floating-whatsapp-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #25d366;
    border: 1px solid #1ebe5d;
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
    z-index: 1050;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
    animation: pulse-green 2.5s infinite
}

.floating-whatsapp-btn:hover {
    transform: scale(1.1);
    color: var(--color-white);
    background-color: #1ebe5d;
    border: 1px solid #1ebe5d
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .6)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
    }
}

.back-to-top-btn {
    position: fixed;
    bottom: 90px;
    right: 28px;
    width: 46px;
    height: 46px;
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-normal);
    z-index: 1040;
    box-shadow: var(--shadow-md)
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.back-to-top-btn:hover {
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: var(--color-white);
    transform: translateY(-3px)
}

.fade-up-init {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease-out, transform .65s ease-out;
    will-change: opacity, transform
}

.fade-up-init.in-view {
    opacity: 1;
    transform: translateY(0)
}

.stagger-1 {
    transition-delay: 0.1s
}

.stagger-2 {
    transition-delay: 0.2s
}

.stagger-3 {
    transition-delay: 0.3s
}

.stagger-4 {
    transition-delay: 0.4s
}

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

    *,
    ::after,
    ::before {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important
    }

    .fade-up-init {
        opacity: 1 !important;
        transform: none !important
    }
}

.twitter-verified-badge {
    color: #1da1f2 !important;
    font-size: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0
}

.profile-id-badge .twitter-verified-badge {
    font-size: .95rem
}

.btn-outline-gold.disabled,
.btn-profile-nonclickable {
    pointer-events: none !important;
    cursor: default !important;
    opacity: .9 !important;
    user-select: none !important
}

.mobile-slider {
    position: relative;
    width: 100%
}

.mobile-slider .carousel-inner {
    overflow: hidden;
    padding: 4px 2px
}

#mobileTrustBadgesCarousel .carousel-inner {
    padding: 8px 4px 6px 4px
}

#mobileTrustBadgesCarousel .trust-badge-card {
    max-width: 320px;
    margin: 0 auto;
    min-height: 62px;
    box-shadow: var(--shadow-sm)
}

#mobileHowItWorksCarousel .carousel-inner {
    padding-top: 26px;
    padding-bottom: 12px
}

#mobileHowItWorksCarousel .step-card {
    max-width: 330px;
    margin: 0 auto;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-sm)
}

.mobile-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 1rem
}

.mobile-slider-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    text-decoration: none
}

.mobile-slider-btn:active,
.mobile-slider-btn:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white)
}

.mobile-slider-dots {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: 1 !important
}

.mobile-slider-dots button {
    position: relative !important;
    width: 9px !important;
    height: 9px !important;
    min-height: 9px !important;
    border-radius: 50% !important;
    background-color: var(--color-border-light) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    opacity: .7 !important;
    transition: all var(--transition-fast) !important;
    padding: 0 !important;
    margin: 0 8px !important;
    box-sizing: border-box !important
}

.mobile-slider-dots button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 44px !important;
    min-height: 44px !important
}

.mobile-slider-dots button:hover {
    background-color: var(--color-gold) !important;
    opacity: 1 !important
}

.mobile-slider-dots button.active {
    width: 24px !important;
    border-radius: 10px !important;
    background-color: var(--color-green-primary) !important;
    border: 1px solid var(--color-green-primary) !important;
    opacity: 1 !important
}

.offcanvas-brand-logo {
    object-fit: contain
}

.login-page-banner {
    position: relative;
    text-align: center;
    color: var(--color-white);
    background: url('../images/bredcum.webp') center center/cover no-repeat;
    padding: clamp(4.5rem, 7vw, 6.5rem) 0
}

.login-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 66, 50, .22);
    z-index: 1
}

.login-banner-content {
    position: relative;
    z-index: 2
}

.login-banner-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-white);
    margin-bottom: 1rem
}

.login-breadcrumb-pill {
    padding: .25rem 1rem;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(212, 168, 83, .4);
    font-size: .92rem
}

.login-banner-divider-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: var(--color-border-gold)
}

@media (max-width:767.98px) {
    .login-page-banner {
        background: url('../images/bredcum.webp') center bottom/cover no-repeat !important;
        padding: clamp(1.2rem, 3.5vw, 1.65rem) 0 !important
    }

    .login-banner-title {
        font-size: clamp(1.25rem, 4.5vw, 1.55rem) !important;
        margin-bottom: .2rem !important
    }

    .login-breadcrumb-pill {
        padding: .12rem .65rem !important;
        font-size: .72rem !important
    }

    .login-banner-content .d-flex.mt-3 {
        margin-top: .25rem !important
    }

    .login-banner-divider-line {
        width: 22px !important
    }
}

.login-main-section {
    min-height: 55vh
}

.login-header-wrap {
    text-align: center;
    margin-bottom: 2rem
}

.login-form-title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    font-weight: 700;
    color: var(--color-green-dark);
    line-height: 1.25;
    margin-bottom: .35rem
}

.login-form-subtitle {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin-bottom: .75rem
}

.login-form-direct {
    width: 100%
}

.login-input-group-text {
    border-color: var(--color-border-light) !important;
    padding: .625rem .85rem;
    background-color: #fff !important
}

.login-field-icon {
    color: var(--color-green-primary)
}

.login-input-control {
    border-color: var(--color-border-light) !important;
    font-size: .95rem;
    padding: .625rem .85rem;
    background-color: #fff !important
}

.login-input-control:focus {
    border-color: var(--color-green-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(11, 107, 75, .15) !important
}

.login-forgot-link {
    color: var(--color-gold);
    font-size: .82rem
}

.login-forgot-link:hover {
    color: var(--color-gold-dark, #a37f1c);
    text-decoration: underline !important
}

.login-toggle-pw-btn {
    border-color: var(--color-border-light) !important;
    padding: .625rem .85rem;
    background-color: #fff !important
}

.login-toggle-pw-btn:hover {
    background-color: var(--color-sand) !important;
    color: var(--color-green-primary) !important
}

.login-submit-btn {
    font-size: 1rem;
    letter-spacing: .3px;
    padding: .7rem 1.5rem;
    box-shadow: 0 4px 12px rgba(197, 155, 39, .25)
}

.login-register-footer {
    border-color: var(--color-border-light) !important
}

.login-register-link {
    color: var(--color-green-primary)
}

.login-register-link:hover {
    color: var(--color-green-dark);
    text-decoration: underline !important
}

.contact-info-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: all var(--transition-fast)
}

.contact-info-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 107, 75, .08)
}

.contact-info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem
}

.contact-info-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-green-dark);
    margin-bottom: .25rem;
    font-weight: 700
}

.contact-info-text {
    font-size: .92rem;
    color: #0b6b4b;
    margin-bottom: 0;
    line-height: 1.5
}

.contact-info-link {
    color: var(--color-green-primary);
    font-weight: 500;
    text-decoration: none
}

.contact-info-link:hover {
    color: var(--color-gold);
    text-decoration: underline
}

.contact-form-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04)
}

.contact-form-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    color: var(--color-green-dark);
    font-weight: 700;
    margin-bottom: .35rem
}

.contact-form-subtitle {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem
}

.contact-input-control {
    border-color: var(--color-border-light) !important;
    font-size: .95rem;
    padding: .65rem .9rem;
    background-color: var(--color-white) !important
}

.contact-input-control:focus {
    border-color: var(--color-green-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(11, 107, 75, .15) !important
}

.contact-map-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    background-color: var(--color-white)
}

.contact-map-iframe {
    width: 100%;
    height: 420px;
    display: block;
    border: 0
}

.contact-trust-pill {
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem
}

.packages-cta-band {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border-top: 1px solid var(--color-border-gold);
    border-bottom: 1px solid var(--color-border-gold)
}

.packages-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25
}

.packages-cta-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: #dbe7e2;
    max-width: 680px
}

.profiles-cta-band {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border-top: 1px solid var(--color-border-gold);
    border-bottom: 1px solid var(--color-border-gold)
}

.profiles-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25
}

.profiles-cta-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: #dbe7e2;
    max-width: 680px
}

.profiles-search-overlay {
    position: relative;
    z-index: 25;
    margin-top: -45px;
    padding-bottom: 25px
}

@media (max-width:991.98px) {
    .profiles-search-overlay {
        margin-top: -35px;
        padding-bottom: 20px
    }
}

@media (max-width:767.98px) {
    .profiles-search-overlay {
        margin-top: -15px;
        padding-bottom: 15px
    }
}

.search-toast-container {
    z-index: 1090
}

.about-divider {
    max-width: 140px
}

.mission-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    height: 100%;
    transition: all var(--transition-fast);
    text-align: center
}

.mission-card:hover {
    border-color: var(--color-border-gold);
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(6, 66, 50, .08)
}

.mission-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem
}

.mission-card-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    color: var(--color-green-dark);
    font-weight: 700;
    margin-bottom: .75rem
}

.mission-card-desc {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.history-milestone-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    height: 100%;
    position: relative;
    transition: all var(--transition-fast)
}

.history-milestone-card:hover {
    border-color: var(--color-border-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 107, 75, .07)
}

.history-year-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: .5rem;
    letter-spacing: .5px
}

.history-milestone-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-green-dark);
    font-weight: 700;
    margin-bottom: .5rem
}

.history-milestone-desc {
    text-align: justify;
    text-justify: inter-word;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.about-cta-band {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border-top: 1px solid var(--color-border-gold);
    border-bottom: 1px solid var(--color-border-gold)
}

.about-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25
}

.about-cta-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: #dbe7e2;
    max-width: 680px
}

.about-divider {
    max-width: 140px
}

.mission-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    height: 100%;
    transition: all var(--transition-fast);
    text-align: center
}

.mission-card:hover {
    border-color: var(--color-border-gold);
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(6, 66, 50, .08)
}

.mission-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem
}

.mission-card-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--color-green-dark);
    font-weight: 700;
    margin-bottom: .75rem
}

.mission-card-desc {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.history-milestone-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    height: 100%;
    position: relative;
    transition: all var(--transition-fast)
}

.history-milestone-card:hover {
    border-color: var(--color-border-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 107, 75, .07)
}

.history-year-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: .5rem;
    letter-spacing: .5px
}

.history-milestone-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--color-green-dark);
    font-weight: 700;
    margin-bottom: .5rem
}

.history-milestone-desc {
    text-align: justify;
    text-justify: inter-word;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.about-cta-band {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    border-top: 1px solid var(--color-border-gold);
    border-bottom: 1px solid var(--color-border-gold)
}

.about-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25
}

.about-cta-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: #dbe7e2;
    max-width: 680px
}

#mobileMissionCarousel .carousel-inner {
    padding: 8px 4px 6px 4px
}

#mobileMissionCarousel .mission-card {
    max-width: 340px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm)
}

.invalid-feedback {
    font-size: .82rem;
    font-weight: 500;
    margin-top: .35rem
}

.wizard-card {
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: 2px solid var(--color-border-gold) !important
}

.wizard-steps-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 2.5rem
}

.wizard-steps-nav::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 5%;
    right: 5%;
    height: 3px;
    background-color: var(--color-sand);
    z-index: 1
}

.wizard-step-item {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
    cursor: default
}

.wizard-step-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-border-light);
    color: var(--color-text-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all var(--transition-fast);
    margin-bottom: .5rem
}

.wizard-step-item.active .wizard-step-circle {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
    transform: scale(1.08)
}

.wizard-step-item.completed .wizard-step-circle {
    background-color: var(--color-green-primary);
    border-color: var(--color-green-primary);
    color: var(--color-white)
}

.wizard-step-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-dark);
    display: block
}

.wizard-step-item.active .wizard-step-label {
    color: var(--color-gold)
}

.wizard-step-item.completed .wizard-step-label {
    color: var(--color-green-primary)
}

.step-container {
    display: none;
    animation: fadeInStep .35s ease-in-out forwards
}

.step-container.active {
    display: block
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.wizard-step-num-badge {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-green-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: .95rem
}

.wizard-step-heading {
    font-family: var(--font-heading);
    color: var(--color-green-dark);
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0
}

.wizard-form-label {
    color: var(--color-text-dark);
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: .35rem
}

.wizard-success-card {
    border: 2px solid var(--color-border-gold);
    border-radius: var(--radius-md);
    background-color: var(--color-white)
}

.wizard-success-icon {
    font-size: 3.5rem;
    color: var(--color-green-primary)
}

.wizard-success-title {
    font-family: var(--font-heading);
    color: var(--color-green-dark)
}

.wizard-success-box {
    max-width: 600px;
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-gold);
    text-align: left
}

.photo-upload-dropzone {
    border: 2px dashed var(--color-border-gold);
    border-radius: var(--radius-md);
    background-color: var(--color-sand);
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast)
}

.photo-upload-dropzone.dragover,
.photo-upload-dropzone:hover {
    border-color: var(--color-green-primary);
    background-color: rgba(11, 107, 75, .05)
}

.photo-upload-icon {
    font-size: 2.2rem;
    color: var(--color-gold);
    margin-bottom: .35rem
}

.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-top: 1rem
}

.photo-preview-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-gold);
    background-color: var(--color-sand);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08)
}

.photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.photo-watermark-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(6, 66, 50, .85);
    color: var(--color-sand);
    font-size: .62rem;
    font-weight: 700;
    text-align: center;
    padding: 3px 2px;
    letter-spacing: .4px;
    text-transform: uppercase;
    pointer-events: none;
    border-top: 1px solid var(--color-border-gold)
}

.photo-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220, 53, 69, .9);
    color: #fff;
    border: none;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 3
}

.privacy-security-box {
    background-color: rgba(11, 107, 75, .05);
    border: 1px solid var(--color-green-primary);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem
}

.privacy-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-green-dark);
    color: var(--color-white);
    padding: .35rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .75rem
}

.privacy-security-box ul li {
    line-height: 1.6;
    margin-bottom: .35rem
}

.privacy-security-box ul li:last-child {
    margin-bottom: 0
}

.privacy-declaration-box {
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem
}

.privacy-declaration-box .form-check {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 0;
    padding-left: 0
}

.privacy-declaration-box .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer
}

.privacy-declaration-box .form-check-label {
    cursor: pointer;
    line-height: 1.4;
    margin-bottom: 0
}

@media (max-width:575.98px) {
    .wizard-step-label {
        font-size: .55rem
    }

    .wizard-step-circle {
        width: 32px;
        height: 32px;
        font-size: .85rem
    }

    .wizard-steps-nav::before {
        top: 16px
    }
}

.policy-trust-banner {
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.75rem;
    margin-bottom: 2rem
}

.policy-highlight-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    height: 100%;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column
}

.policy-highlight-card:hover {
    border-color: var(--color-border-gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.policy-highlight-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem
}

.policy-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    transition: border-color var(--transition-fast)
}

.policy-card:hover {
    border-color: var(--color-border-gold)
}

.policy-card-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-green-primary);
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem
}

.policy-card-title i {
    color: var(--color-gold);
    font-size: 1.25rem
}

.policy-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem
}

.policy-matrix-col {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    font-size: .88rem
}

.policy-matrix-col.public-col {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light)
}

.policy-matrix-col.private-col {
    background-color: #f0f7f3;
    border: 1px solid #b7dfca
}

.policy-matrix-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .3rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .76rem;
    font-weight: 600;
    margin-bottom: .75rem
}

.policy-matrix-badge.badge-public {
    background-color: var(--color-sand);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-gold)
}

.policy-matrix-badge.badge-private {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    border: 1px solid var(--color-green-dark)
}

.policy-sidebar-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem
}

.policy-sidebar-card.gold-accent {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-gold)
}

.policy-sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.policy-checklist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}

.policy-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .88rem;
    color: var(--color-text-dark);
    margin-bottom: .75rem;
    line-height: 1.45
}

.policy-checklist li:last-child {
    margin-bottom: 0
}

.policy-checklist li i {
    color: var(--color-green-primary);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0
}

.policy-quicknav-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}

.policy-quicknav-list li {
    margin-bottom: .5rem
}

.policy-quicknav-list li:last-child {
    margin-bottom: 0
}

.policy-quicknav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .85rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: all var(--transition-fast)
}

.policy-quicknav-link:hover {
    background-color: var(--color-sand);
    border-color: var(--color-border-gold);
    color: var(--color-gold-hover);
    padding-left: 1.1rem
}

.policy-cta-box {
    background-color: var(--color-green-dark);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-md);
    padding: clamp(2rem, 4vw, 3rem);
    color: var(--color-white);
    text-align: center
}

@media (max-width:767.98px) {
    .policy-matrix-grid {
        grid-template-columns: 1fr
    }
}

.policy-cta-desc {
    max-width: 650px
}

.policy-simple-container {
    max-width: 960px;
    margin: 0 auto
}

.policy-simple-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text-dark);
    text-align: justify;
    margin-bottom: 1.75rem
}

.policy-text-highlight {
    color: #c02b2b;
    font-weight: 700
}

.policy-notice-bold {
    color: #c02b2b;
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    margin: 2.25rem 0 1rem
}

.policy-footer-disclaimer {
    color: #c02b2b;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.6
}

@media (min-width:992px) and (max-width:1399.98px) {
    .main-navbar {
        padding: .6rem 0 !important
    }

    .main-navbar .container {
        max-width: 100% !important;
        padding-left: clamp(1rem, 2.5vw, 2.5rem) !important;
        padding-right: clamp(1rem, 2.5vw, 2.5rem) !important
    }

    .navbar-brand {
        margin-right: .75rem !important
    }

    .navbar-brand-logo {
        height: 52px !important;
        max-width: 220px !important
    }

    .main-navbar .navbar-nav {
        gap: .2rem !important
    }

    .main-navbar .nav-link {
        font-size: .86rem !important;
        padding: .4rem .55rem !important;
        white-space: nowrap !important
    }

    .main-navbar .btn-gold,
    .main-navbar .btn-outline-emerald {
        font-size: .84rem !important;
        padding: .38rem .7rem !important;
        white-space: nowrap !important
    }

    .hero-slide-item {
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        aspect-ratio: 1600/534 !important
    }

    .hero-slide-img,
    .hero-slide-item picture {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important
    }

    .hero-search-overlay {
        margin-top: -45px !important;
        padding-bottom: 20px !important
    }

    .hero-carousel .carousel-indicators {
        margin-bottom: 60px !important
    }

    .hero-carousel .carousel-indicators [data-bs-target] {
        width: 12px !important;
        height: 12px !important;
        padding: 10px 6px !important;
        box-sizing: content-box !important;
        background-clip: content-box !important;
        margin: 0 4px !important
    }

    .hero-carousel .carousel-control-next,
    .hero-carousel .carousel-control-prev {
        width: 44px !important;
        height: 44px !important
    }

    .profile-item-col {
        flex: 0 0 auto !important;
        width: 33.33333333% !important
    }

    .quick-search-card .row.g-3 {
        --bs-gutter-x: 0.65rem !important
    }

    .search-select {
        font-size: .82rem !important;
        padding-left: .55rem !important;
        padding-right: 1.65rem !important;
        padding-top: .55rem !important;
        padding-bottom: .55rem !important;
        background-position: right .45rem center !important;
        background-size: 13px 9px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important
    }

    .search-field-label {
        font-size: .78rem !important;
        margin-bottom: .25rem !important
    }

    .btn-search-profiles {
        font-size: .84rem !important;
        padding: .55rem .5rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important
    }

    .btn-search-profiles-word {
        display: none !important
    }
}

.payment-page-main {
    position: relative
}

.payment-plan-selector-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem
}

.payment-plan-selector-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .25rem
}

.payment-plan-selector-desc {
    font-size: .9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem
}

.plan-toggle-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.plan-toggle-btn {
    flex: 1 1 280px;
    background: var(--color-cream-light);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    position: relative;
    text-decoration: none !important;
    display: block
}

.plan-toggle-btn:hover {
    border-color: var(--color-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm)
}

.plan-toggle-btn.active {
    border-color: var(--color-gold);
    background: #fffdf9;
    box-shadow: 0 6px 20px rgba(168, 116, 26, .16)
}

.plan-toggle-btn .plan-radio-indicator {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast)
}

.plan-toggle-btn.active .plan-radio-indicator {
    border-color: var(--color-gold);
    background-color: var(--color-gold)
}

.plan-toggle-btn.active .plan-radio-indicator::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff
}

.plan-toggle-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.plan-toggle-price {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1.2
}

.plan-toggle-sub {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin-top: .35rem
}

.payment-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast)
}

.payment-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.payment-card-header {
    padding: 1.25rem 1.5rem;
    background: var(--color-green-dark);
    color: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem
}

.payment-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-cream);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem
}

.payment-card-badge {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: rgba(255, 255, 255, .15);
    color: #ebd9c0;
    padding: .3rem .75rem;
    border-radius: 50rem;
    border: 1px solid rgba(235, 217, 192, .3)
}

.payment-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column
}

.qr-container-box {
    background: var(--color-cream-light);
    border: 2px dashed var(--color-champagne-gold);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem
}

.qr-image-wrapper {
    width: 220px;
    height: 220px;
    margin: 0 auto 1.15rem;
    background: #fff;
    padding: 4px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light)
}

.qr-image-wrapper img,
.qr-image-wrapper svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.qr-payable-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--color-green-primary);
    color: var(--color-white);
    padding: .45rem 1.25rem;
    border-radius: 50rem;
    font-size: .65rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(11, 107, 75, .25)
}

.upi-id-box {
    background: var(--color-cream-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem
}

.upi-id-text {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-green-dark);
    word-break: break-all
}

.btn-copy-action {
    font-size: .62rem;
    font-weight: 600;
    padding: .42rem .9rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    color: #fff;
    white-space: nowrap;
    transition: all var(--transition-fast);
    cursor: pointer
}

.btn-copy-action:hover {
    background-color: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    color: #fff
}

.upi-apps-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem
}

.upi-app-pill {
    font-size: .76rem;
    font-weight: 600;
    color: var(--color-text-dark);
    background: var(--color-cream);
    border: 1px solid var(--color-border-light);
    padding: .25rem .65rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.bank-details-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem
}

.bank-row-item {
    background: var(--color-cream-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.bank-row-meta {
    flex: 1
}

.bank-row-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    margin-bottom: .15rem;
    font-weight: 600
}

.bank-row-value {
    font-size: .96rem;
    font-weight: 600;
    color: var(--color-green-dark)
}

.bank-row-value.mono {
    font-family: monospace;
    font-size: 1.05rem;
    letter-spacing: .5px
}

.btn-copy-icon {
    background: #fff;
    border: 1px solid var(--color-border-light);
    color: var(--color-gold);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast)
}

.btn-copy-icon:hover {
    background: var(--color-gold);
    color: #fff;
    border-color: var(--color-gold)
}

.payment-trust-badge-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border-light)
}

.trust-badge-item {
    flex: 1 1 calc(50% - 0.75rem);
    font-size: .8rem;
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    gap: .4rem
}

.trust-badge-item i {
    color: var(--color-green-primary);
    font-size: 1rem
}

.post-payment-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-sm);
    margin-top: 2rem
}

.post-payment-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .35rem
}

.post-payment-subtitle {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem
}

.confirmation-card-action {
    background: var(--color-cream-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    height: 100%
}

.confirmation-card-action h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: .4rem
}

.payment-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-green-dark);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    z-index: 9999;
    display: none;
    animation: fadeIn .25s ease
}

.payment-toast.show {
    display: flex;
    align-items: center;
    gap: 8px
}

.reg-toggle-pw-btn {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-left: none !important;
    color: var(--color-text-muted);
    padding: .65rem .85rem;
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast)
}

.reg-toggle-pw-btn:hover {
    background-color: var(--color-sand);
    color: var(--color-green-primary)
}

.profile-details-section {
    padding: 48px 0 70px;
    background-color: var(--color-cream)
}

.profile-details-section .candidate-biodata-column,
.profile-details-section section {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.candidate-spotlight-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast)
}

.candidate-photo-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3.2;
    max-height: 290px;
    overflow: hidden;
    background-color: var(--color-sand)
}

.candidate-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block
}

.candidate-photo-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 66, 50, .9);
    color: #fff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(4px);
    z-index: 2
}

.candidate-verified-ribbon {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: var(--color-green-primary);
    color: #fff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .74rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: var(--shadow-sm);
    z-index: 2
}

.candidate-spotlight-body {
    padding: 24px 22px
}

.candidate-spotlight-name {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px
}

.candidate-id-badge {
    display: inline-block;
    background: var(--color-cream);
    color: var(--color-gold);
    border: 1px solid var(--color-border-gold);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: .76rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: .5px
}

.candidate-vitals-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px
}

.candidate-vital-pill {
    background: var(--color-cream);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
    font-size: .8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 50px
}

.candidate-quick-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-top: 1px dashed var(--color-border-light);
    border-bottom: 1px dashed var(--color-border-light);
    padding-top: 14px;
    padding-bottom: 14px
}

.candidate-quick-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .86rem;
    color: var(--color-text-dark);
    margin-bottom: 9px;
    line-height: 1.4
}

.candidate-quick-item:last-child {
    margin-bottom: 0
}

.candidate-quick-item i {
    color: var(--color-gold);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0
}

.candidate-privacy-seal {
    background: #fbf9f4;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 16px;
    font-size: .78rem;
    color: var(--color-text-muted);
    line-height: 1.45
}

.biodata-hero-card {
    background: var(--color-green-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 116, 26, .35);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md)
}

.biodata-bismillah-text {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: #e5b958;
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: 1px
}

.biodata-hero-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px
}

.biodata-hero-subtitle {
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 14px
}

.biodata-about-text {
    font-size: .92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.biodata-section-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast)
}

.biodata-section-card:hover {
    box-shadow: var(--shadow-md)
}

.biodata-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light)
}

.biodata-section-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px
}

.biodata-step-badge {
    font-size: .72rem;
    font-weight: 600;
    background: var(--color-cream);
    color: var(--color-green-primary);
    border: 1px solid var(--color-border-gold);
    padding: 3px 10px;
    border-radius: 50px
}

.biodata-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px
}

@media (max-width:767.98px) {
    .biodata-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .biodata-hero-card {
        padding: 20px 18px
    }

    .biodata-section-card {
        padding: 18px 16px
    }
}

.biodata-field-item {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm)
}

.biodata-field-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-gold);
    font-weight: 600;
    margin-bottom: 3px
}

.biodata-field-value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-text-dark)
}

.biodata-expectations-box {
    background: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-top: 14px
}

.expectations-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.expectation-chip {
    background: var(--color-white);
    border: 1px solid var(--color-border-gold);
    color: var(--color-green-dark);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.expectation-chip i {
    color: var(--color-green-primary)
}

.bureau-verification-card {
    background: #f7faf8;
    border: 1.5px solid var(--color-green-primary);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px
}

.bureau-verification-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

.verification-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.verification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .86rem;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    line-height: 1.45
}

.verification-item:last-child {
    margin-bottom: 0
}

.verification-item i {
    color: var(--color-green-primary);
    font-size: 1.05rem;
    margin-top: 1px;
    flex-shrink: 0
}

.alliance-cta-card {
    background: var(--color-sand);
    border: 1.5px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    text-align: center;
    margin-top: 24px
}

.alliance-cta-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-green-dark);
    margin-bottom: 8px
}

.similar-profiles-section {
    margin-top: 45px
}

.similar-profiles-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px
}

@media print {
    body * {
        visibility: hidden
    }

    #pdfTemplateWrapper,
    #pdfTemplateWrapper * {
        visibility: visible
    }

    #pdfTemplateWrapper {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        pointer-events: auto !important
    }

    .pdf-page-sheet {
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        box-shadow: none !important
    }

    .alliance-cta-card,
    .back-to-top-btn,
    .floating-whatsapp-btn,
    .login-page-banner,
    .main-navbar,
    .profile-details-section,
    .similar-profiles-section,
    .top-info-bar,
    footer {
        display: none !important
    }
}

.similar-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block
}

.payment-utr-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.5rem;
    box-shadow: var(--shadow-md);
    margin-top: 2.75rem;
    position: relative
}

@media (max-width:767.98px) {
    .payment-utr-card {
        padding: 1.5rem 1.25rem
    }
}

.payment-utr-header {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem
}

.payment-utr-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin: 0 0 .35rem 0;
    display: flex;
    align-items: center;
    gap: .5rem
}

.payment-utr-subtitle {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 680px
}

.payment-utr-badge {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--color-cream);
    color: var(--color-gold);
    border: 1px solid var(--color-border-gold);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.utr-upload-dropzone {
    border: 2px dashed var(--color-border-gold);
    border-radius: var(--radius-md);
    background-color: var(--color-cream);
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: .75rem
}

.utr-upload-dropzone.dragover,
.utr-upload-dropzone:hover {
    border-color: var(--color-green-primary);
    background-color: rgba(11, 107, 75, .05)
}

.utr-upload-icon {
    font-size: 2.2rem;
    color: var(--color-gold);
    margin-bottom: .35rem;
    display: inline-block
}

.utr-preview-box {
    background: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    margin-bottom: .75rem
}

.utr-preview-box.has-file {
    display: flex
}

.utr-preview-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    overflow: hidden
}

.utr-preview-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-gold);
    background: #fff;
    flex-shrink: 0
}

.utr-preview-meta {
    overflow: hidden
}

.utr-preview-filename {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px
}

.utr-preview-filesize {
    font-size: .78rem;
    color: var(--color-text-muted)
}

.utr-mono-input {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 1px;
    font-weight: 600
}

.gallery-fancybox-item {
    position: relative;
    overflow: hidden;
    display: block
}

.gallery-fancybox-item img {
    transition: transform var(--transition-normal)
}

.gallery-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 66, 50, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    z-index: 2
}

.gallery-fancybox-item:hover .gallery-zoom-overlay {
    opacity: 1
}

.input-group-lg>.btn {
    font-size: 14px !important
}

#step1OtpInput {
    font-size: 14px !important
}

.gallery-fancybox-item {
    position: relative;
    overflow: hidden;
    display: block
}

.gallery-fancybox-item img {
    transition: transform var(--transition-normal)
}

.gallery-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 66, 50, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    z-index: 2
}

.gallery-fancybox-item:hover .gallery-zoom-overlay {
    opacity: 1
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: #ffffff !important;
    background-color: #C99A3E !important;
    border-color: #C99A3E !important;
}

.page-link {
    color: #C99A3E !important;
}