/* ==========================================================================
   Brand theme — gold / charcoal palette pulled from the site logo.
   Loaded after the template's default stylesheets so it wins the cascade
   and replaces the generic blue (#005bea / #2575fc) theme color site-wide.
   ========================================================================== */

:root {
    --brand-gold: #c9a227;
    --brand-gold-light: #e6c65e;
    --brand-gold-dark: #9c7d1a;
    --brand-charcoal: #1c1c1c;
    --brand-charcoal-soft: #2a2a2a;
    --brand-cream: #fbf3ea;
    --brand-gold-gradient: linear-gradient(90deg, var(--brand-gold-dark) 0%, var(--brand-gold) 100%);
    --brand-shadow: 0 10px 30px rgba(28, 28, 28, 0.12);
}

/* ------------------------------------------------------------------------
   Typography - the template's default (Dosis, normal weight, 2px letter-
   spacing on every heading) reads soft/casual rather than authoritative for
   a finance site. Swap headings to Poppins at a bolder weight and tighten
   the letter-spacing; body copy keeps Dosis.
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Dosis', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

.section-title h2, h2.title, h2.subtitle {
    font-weight: 800 !important;
    color: var(--brand-charcoal);
}

/* ------------------------------------------------------------------------
   Global links / buttons / theme accents
   ------------------------------------------------------------------------ */
a { color: var(--brand-gold-dark); }
a:hover { color: var(--brand-gold); }

.btn.btn-theme {
    background: var(--brand-gold-gradient) !important;
    color: #ffffff !important;
}

.btn.btn-theme:hover {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-dark) 100%) !important;
}

.icon-btn:hover {
    background: var(--brand-gold) !important;
    color: #ffffff !important;
}

.featured-item::before {
    background: var(--brand-charcoal) !important;
    background: linear-gradient(180deg, var(--brand-charcoal-soft) 0%, var(--brand-charcoal) 100%) !important;
}

.featured-item .featured-icon i,
.featured-item.style-1 .featured-icon i,
.featured-item.style-2 .featured-icon i,
.featured-item.style-6 .featured-icon i {
    color: var(--brand-gold-dark);
}

.featured-item.style-1:hover .featured-icon i,
.featured-item.style-2:hover .featured-icon i,
.featured-item.style-6:hover .featured-icon i {
    color: var(--brand-gold-light) !important;
}

.tab .nav-tabs .nav-link.active,
.tab .nav-tabs .nav-link:hover,
.tab .nav-tabs.active > a:focus,
.tab .nav-tabs > a:hover {
    background: var(--brand-gold) !important;
    color: #ffffff !important;
}

.tab.style-2 .nav-tabs .nav-link i::after { background: var(--brand-charcoal); }
.tab .nav-tabs .nav-link.active i::after,
.tab .nav-tabs.active > a:focus i::after { background: var(--brand-gold); }
.tab.style-2 .nav-tabs .nav-link:hover h5,
.tab.style-2 .nav-tabs .nav-link.active h5,
.tab.style-2 .nav-tabs.active > a:focus h5 { color: var(--brand-gold-dark); }

/* section title underline used across the site (e.g. Gallery/Testimonials/
   Knowledge Center/Grow Your Investment headings) had no visual before */
.section-title-border {
    display: inline-block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: var(--brand-gold-gradient);
    margin-bottom: 18px;
}

.section-title-border.border-center { margin-left: auto; margin-right: auto; }

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item .nav-link.active,
.header-3 #header-wrap.fixed-header .navbar-nav .nav-link:hover,
.header-3 #header-wrap.fixed-header .navbar-nav .nav-item .nav-link.active {
    color: var(--brand-gold-dark) !important;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before,
.navbar-nav .nav-link:focus::before {
    color: var(--brand-gold-dark) !important;
    text-shadow: 10px 0 var(--brand-charcoal), -10px 0 var(--brand-charcoal) !important;
}

/* ------------------------------------------------------------------------
   Header / logo presentation
   ------------------------------------------------------------------------ */
#site-header#site-header { border-bottom: 3px solid var(--brand-gold); }

/* The source logo file (675x586) has the icon + wordmark filling almost the
   entire canvas already (verified by pixel-sampling it) - the earlier small
   display size, not dead space around the mark, was why it read as tiny.
   Show the full image, just bigger, rather than cropping it. */
.navbar-brand.logo {
    background: var(--brand-charcoal);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: var(--brand-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-brand.logo #logo-img {
    max-width: none;
    height: 100px;
    width: auto;
    border-radius: 4px;
}

@media only screen and (max-width: 767px) {
    .navbar-brand.logo #logo-img { height: 76px; }
}

/* Bootstrap's ml-auto/mr-auto on #main-menu centers it inside the wide
   flex-grow navbar-collapse container, leaving a big dead gap on both
   sides of it. Pull it in close to the logo instead (id beats the .ml-auto
   utility's !important since both sides now carry !important). */
#main-menu.ml-auto {
    margin-left: 30px !important;
}

@media only screen and (max-width: 991px) {
    #main-menu.ml-auto { margin-left: 0 !important; }
}

/* The header row itself has no width cap (unlike every other section on the
   site, which sits inside a 1170px .container), so on wide screens the logo
   sits hard against the left edge and the nav trails off with a large empty
   gap before the right edge. Align it to the same 1170px content column as
   the rest of the page instead - background stays full-bleed white. */
#header-wrap .row {
    max-width: 1170px;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media only screen and (max-width: 1199px) {
    #header-wrap .row { max-width: 100%; padding: 0 15px; }
}

/* ------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
footer.footer {
    background-color: var(--brand-charcoal) !important;
    background-image: none !important;
    padding-top: 10px;
}

footer.footer, footer.footer a, footer.footer p, footer.footer li {
    color: rgba(255, 255, 255, 0.75);
}

footer.footer h4 {
    color: #ffffff;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 20px !important;
}

footer.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--brand-gold-gradient);
}

footer.footer a:hover { color: var(--brand-gold-light) !important; }

footer.footer .footer-logo {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* See the header logo comment above - showing the full image bigger, not a
   crop, since the source has very little real dead space around the mark. */
footer.footer .footer-logo #footer-logo-img {
    max-width: none;
    height: 90px;
    width: auto;
    border-radius: 4px;
}

/* ==========================================================================
   New homepage modules
   ========================================================================== */

/* ---- Market data ticker (live TradingView ticker-tape widget) ----------- */
.market-ticker {
    background: #ffffff;
    border-bottom: 2px solid var(--brand-gold);
    line-height: 0;
}

/* ---- What We Do cards ----------------------------------------------------- */
.whatwedo-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 44px 26px 32px;
    height: 100%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(28, 28, 28, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.whatwedo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gold-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.whatwedo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(28, 28, 28, 0.12);
    border-color: transparent;
}

.whatwedo-card:hover::before { transform: scaleX(1); }

.whatwedo-card .whatwedo-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--brand-cream);
    box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.whatwedo-card:hover .whatwedo-icon {
    background: var(--brand-gold-gradient);
    box-shadow: 0 10px 22px rgba(201, 162, 39, 0.35);
    transform: scale(1.08) rotate(-4deg);
}

.whatwedo-card .whatwedo-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.whatwedo-card:hover .whatwedo-icon img { transform: rotate(4deg); }

.whatwedo-card h5 {
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--brand-charcoal);
    font-size: 18px;
}

.whatwedo-card p {
    color: #6b6b6b;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.7;
}

.whatwedo-card .icon-btn {
    position: static;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-cream);
    color: var(--brand-gold-dark);
    transition: all 0.3s ease;
}

.whatwedo-card:hover .icon-btn {
    background: var(--brand-charcoal);
    color: var(--brand-gold-light);
    transform: translateY(-2px);
}

/* ---- Quick Actions row (Portfolio Login / Download Application / ...) --- */
.quick-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.quick-actions-row a.qa-btn {
    flex: 1 1 170px;
    max-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border: 2px solid var(--brand-charcoal);
    border-radius: 10px;
    background: #ffffff;
    color: var(--brand-charcoal);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-actions-row a.qa-btn i {
    font-size: 22px;
    color: var(--brand-gold-dark);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.quick-actions-row a.qa-btn:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--brand-shadow);
    transform: translateY(-4px);
}

.quick-actions-row a.qa-btn.featured {
    background: var(--brand-gold-gradient);
    border-color: var(--brand-gold-dark);
    color: #ffffff;
}

.quick-actions-row a.qa-btn.featured i { color: #ffffff; }

@media only screen and (max-width: 767px) {
    .quick-actions-row a.qa-btn { flex: 1 1 100%; max-width: 100%; }
}

/* ---- Our Services & Products grid --------------------------------------- */
.services-grid {
    background:
        radial-gradient(circle at 100% 0%, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 45%),
        radial-gradient(circle at 0% 100%, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 45%),
        #fafafa;
}

.services-grid .service-card {
    background: transparent;
    border: 1px solid var(--brand-charcoal);
    border-radius: 10px 30px;
    padding: 26px 28px;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.services-grid .service-card:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--brand-shadow);
}

.services-grid .service-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.services-grid .service-card .service-icon {
    flex: 0 0 auto;
    color: var(--brand-charcoal);
    font-size: 34px;
    line-height: 1;
}

.services-grid .service-card h4 {
    font-weight: 700;
    margin: 0;
    color: var(--brand-charcoal);
    font-size: 20px;
}

.services-grid .service-card p {
    color: #333333;
    margin-bottom: 12px;
}

.services-grid .service-card a.read-more {
    color: var(--brand-gold-dark);
    font-weight: 700;
    text-decoration: none;
}

.services-grid .service-card a.read-more:hover { color: var(--brand-gold); }

/* ---- Quick-link tab bar (Search NAV / Scheme Performance / ...) --------- */
.quicklink-section {
    background: var(--brand-cream);
}

.quicklink-subtitle {
    color: #666666;
    max-width: 520px;
    margin: 0 auto 10px;
}

.quicklink-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 30px;
}

.quicklink-tabs a.quicklink-btn {
    flex: 1 1 220px;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 28px 18px;
    border-radius: 10px;
    color: var(--brand-charcoal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 14px;
    text-decoration: none;
    background: #ffffff;
    box-shadow: var(--brand-shadow);
    transition: all 0.25s ease;
}

.quicklink-tabs a.quicklink-btn i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--brand-cream);
    color: var(--brand-gold-dark);
    transition: all 0.25s ease;
}

.quicklink-tabs a.quicklink-btn:hover,
.quicklink-tabs a.quicklink-btn.active {
    background: var(--brand-charcoal);
    color: #ffffff;
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(28, 28, 28, 0.22);
}

.quicklink-tabs a.quicklink-btn:hover i,
.quicklink-tabs a.quicklink-btn.active i {
    background: var(--brand-gold);
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .quicklink-tabs a.quicklink-btn { flex: 1 1 100%; max-width: 100%; flex-direction: row; padding: 16px 20px; }
    .quicklink-tabs a.quicklink-btn i { width: 44px; height: 44px; font-size: 18px; flex-shrink: 0; }
}

/* ---- One Stop Investment Solutions --------------------------------------- */
.one-stop-solutions .solution-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 60px;
}

.one-stop-solutions .solution-item .solution-icon {
    flex: 0 0 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}

.one-stop-solutions .solution-item .solution-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.one-stop-solutions .solution-item h5 {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--brand-charcoal);
}

.one-stop-solutions .solution-item p {
    color: #666666;
    margin-bottom: 0;
    font-size: 14px;
}

.one-stop-solutions .solution-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.one-stop-solutions .solution-media img {
    border-radius: 16px;
    box-shadow: var(--brand-shadow);
    max-width: 100%;
}

/* ---- Why Choose Us (formerly "Grow Your Investment With Us") ------------ */
.why-choose-us {
    background: var(--brand-cream);
}

.why-choose-us .why-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.why-choose-us .why-point .why-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--brand-charcoal);
    color: var(--brand-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.why-choose-us .why-point h5 {
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--brand-charcoal);
}

.why-choose-us .why-point p {
    margin-bottom: 0;
    color: #666666;
    font-size: 14px;
}

/* ---- About Us -------------------------------------------------------------*/
.about-us-panel {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: var(--brand-shadow);
    padding: 40px;
}

.about-us-panel img {
    border-radius: 12px !important;
    border: 3px solid var(--brand-gold) !important;
}

/* ---- Testimonials ---------------------------------------------------------*/
.testimonial-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: var(--brand-shadow);
    padding: 30px;
    text-align: center;
    margin: 10px;
    height: 100%;
}

.testimonial-card img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--brand-gold);
    margin: 0 auto 16px;
}

.testimonial-card h3,
.testimonial-card h5 {
    color: var(--brand-charcoal) !important;
    font-weight: 700;
}

.testimonial-card p,
.testimonial-card span {
    color: #666666 !important;
}

.testimonial-card .quote-mark {
    color: var(--brand-gold);
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

/* ---- Gallery ---------------------------------------------------------------*/
.gallery-box.box {
    border-radius: 10px;
    box-shadow: var(--brand-shadow);
}

.gallery-box.box:after {
    background-color: rgba(28, 28, 28, 0.55) !important;
}

.gallery-box.box:hover:after {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 30px rgba(28, 28, 28, 0.6) !important;
}

/* ---- Download Application page ------------------------------------------ */
.download-app-subtitle {
    font-size: 18px;
    color: #444444;
}

.app-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0 26px;
}

.app-store-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 220px;
    max-width: 250px;
    gap: 10px;
    padding: 22px 20px;
    border: 2px solid var(--brand-charcoal);
    border-radius: 10px;
    background: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.app-store-card:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--brand-shadow);
    transform: translateY(-3px);
}

.app-store-card i {
    font-size: 26px;
    color: var(--brand-charcoal);
}

.app-store-card > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.app-store-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666666;
}

.app-store-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--brand-charcoal);
}

/* the QR <img> tags are unconstrained in markup (render at native pixel
   size otherwise - hundreds of px) - pin them below the icon/label at a
   size big enough to actually scan comfortably. */
.app-store-card .qr-img,
.app-store-card img.qr-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #ffffff;
    padding: 4px;
    margin: 4px 0 0;
    flex-shrink: 0;
}

/* Right-side "phone mockup" visual - the source <img> is a large square
   illustration (811x811) with no size constraint in markup, so it was
   rendering near full native size and overflowing its column. */
.download-app-visual { display: flex; justify-content: center; }
.phone-mockup { max-width: 100%; }

.phone-app-header img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: var(--brand-shadow);
}

.phone-app-header span {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-weight: 700;
    color: var(--brand-charcoal);
}

@media only screen and (max-width: 991px) {
    .phone-app-header img { max-width: 280px; }
}

.download-app-note {
    font-size: 14px;
    color: #666666;
}

.download-app-visual i {
    font-size: 200px;
    color: var(--brand-cream);
    -webkit-text-stroke: 3px var(--brand-gold);
}

@media only screen and (max-width: 991px) {
    .download-app-visual { margin-top: 30px; }
    .download-app-visual i { font-size: 120px; }
}

@media only screen and (max-width: 767px) {
    .market-ticker .ticker-track { gap: 10px; }
    .about-us-panel { padding: 22px; }
}

/* ---- Risk Profiling questionnaire ---------------------------------------- */
.risk-profiling-title {
    white-space: nowrap;
    font-size: clamp(20px, 3.4vw, 34px) !important;
}

@media only screen and (max-width: 480px) {
    .risk-profiling-title {
        white-space: normal;
        font-size: 22px !important;
    }
}

.risk-question-card {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 22px 26px;
    margin-bottom: 16px;
}

.risk-question-card h5 {
    font-weight: 700;
    color: var(--brand-charcoal);
    margin-bottom: 14px;
}

.risk-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.risk-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    margin-bottom: 0;
}

.risk-option input[type="radio"] {
    accent-color: var(--brand-gold-dark);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.risk-result-panel {
    background: var(--brand-cream);
    border: 2px solid var(--brand-gold);
    border-radius: 10px;
    padding: 28px 30px;
    margin-top: 30px;
    text-align: center;
}

.risk-result-panel h4 {
    color: var(--brand-charcoal);
    margin-bottom: 8px;
}

.risk-result-panel h5 {
    color: var(--brand-gold-dark);
    font-weight: 700;
    margin-bottom: 10px;
}

.risk-result-note {
    font-size: 13px;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 0;
}

.risk-result-warning {
    background: #fdecea;
    border-color: #d9534f;
    color: #d9534f;
}

.risk-pagination-status {
    max-width: 420px;
    margin: 0 auto 26px;
    text-align: center;
}

.risk-pagination-status span {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--brand-charcoal);
    letter-spacing: 0.5px;
}

.risk-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: #e2e2e2;
    overflow: hidden;
}

.risk-progress-fill {
    height: 100%;
    background: var(--brand-gold-dark);
    transition: width 0.3s ease;
}

.risk-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ---- Online Investor Services page --------------------------------------- */
.ois-intro {
    max-width: 680px;
    margin: 0 auto 10px;
    color: #666666;
}

/* Plain CSS Grid instead of the Bootstrap row/col here - this project's
   .row/.col-* are display:block with floats (not flexbox), so they don't
   equalize row height; a taller 3-line card would throw off every card
   after it in the float flow. Grid rows size to their tallest item and
   align items to a shared top edge automatically, so this doesn't. */
.ois-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
}

@media only screen and (max-width: 991px) {
    .ois-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 575px) {
    .ois-grid { grid-template-columns: 1fr; }
}

.ois-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 22px 20px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(28, 28, 28, 0.06);
    text-decoration: none;
    transition: all 0.2s ease;
}

.ois-card:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--brand-shadow);
    transform: translateY(-4px);
}

.ois-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--brand-cream);
    color: var(--brand-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ois-card h5 {
    font-weight: 700;
    color: var(--brand-charcoal);
    margin-bottom: 4px;
}

.ois-provider {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-gold-dark);
}

.ois-external {
    margin-left: auto;
    color: #cccccc;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.ois-card:hover .ois-external { color: var(--brand-gold-dark); }