/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600&display=swap');

/* === FONTS === */
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'recoleta';
    src: url('../fonts/fonnts.com-recoleta-black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
header { 
    margin-bottom: 500px;
}
body, html {
    background: url('../images/bg.jpg') no-repeat top center;
    background-size: cover;
    background-color: #17191a;
    font-family: 'Noto Kufi Arabic', 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ccc;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: #aaa; text-decoration: none; }
a:hover { color: #fff; }

button {
    background-color: #222;
    border: none;
    color: #eee;
    font-size: 16px;
    font-family: 'Noto Kufi Arabic', 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 12px 28px;
    cursor: pointer;
    border-radius: 30px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
button:hover { background-color: #444; }

.container {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ================================================
   PAGE ANIMATIONS & TRANSITIONS
   ================================================ */

/* Page entry fade-in */
@keyframes pageEntry {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Generic keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Apply page entry to main body */
.prive-page-body,
body > form > header,
body > form > section,
body > form > .welcome-section,
body > form > .tabs-container {
    animation: pageEntry 0.55s ease both;
}

/* ── Scroll-reveal classes (applied via JS IntersectionObserver) ── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children reveal */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0s;    }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 0.1s;  }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 0.2s;  }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 0.3s;  }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 0.4s;  }

/* Page exit overlay */
.page-overlay {
    position: fixed;
    inset: 0;
    background-color: #17191a;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.page-overlay.fade-out {
    opacity: 1;
}

.upper{text-transform: capitalize;}
/* ================================================
   MASTER PAGE — NAVBAR
   ================================================ */
.prive-navbar {
    width: 100%;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2000;
    padding: 0 5%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #17191a;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.prive-navbar.scrolled {
    background-color: rgba(23,25,26,0.97);
    box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

/* Logo */
.navbar-logo { display: flex; align-items: center; }
.navbar-logo img { height: 36px; object-fit: contain; }

/* Desktop nav links */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
}
.navbar-links li a {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    position: relative;
    padding-bottom: 4px;
}
.navbar-links li a:hover,
.navbar-links li a.active { color: #fff; }
.navbar-links li a.active { font-weight: 600; }
.navbar-links li a.active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1.5px;
    background-color: #fff;
    border-radius: 2px;
}

/* Hamburger */
.navbar-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}
.navbar-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background-color: #ccc;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile dropdown */
.navbar-mobile {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background-color: #17191a;
    backdrop-filter: blur(12px);
    padding: 20px 5%;
    z-index: 1999;
    border-bottom: 1px solid #1a1a1a;
    animation: fadeIn 0.2s ease;
}
.navbar-mobile.open { display: block; }
.navbar-mobile ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.navbar-mobile ul li a { font-size: 15px; font-weight: 400; color: #aaa; text-decoration: none; }
.navbar-mobile ul li a:hover { color: #fff; }

/* Page content offset */
.prive-page-body { padding-top: 72px; }

/* Close X button */
.close-x {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid #3a3a3a;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, background-color 0.2s;
    margin-left: 16px;
}
.close-x:hover { border-color: #666; background-color: #1e2126; }

/* ================================================
   MASTER PAGE — BOTTOM BAR
   ================================================ */
.bottom-bar {
    width: 100%;
    background: var(--neutral-950, #0C0D0E);
    border-top: 1px solid #1a1a1a;
    padding: 22px 5% 18px 5%;
}
.bottom-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.bottom-bar-left { display: flex; flex-direction: column; gap: 8px; }
.bottom-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.bottom-nav a {
    color: #888;
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}
.bottom-nav a:hover { color: #fff; }
.bottom-copyright { font-size: 12px; color: #3a3a3a; font-weight: 300; }
.bottom-bar-right { font-size: 13.5px; color: #888; padding-top: 2px; }
.bottom-bar-right strong { color: #fff; font-weight: 700; font-size: 15px; margin-left: 4px; }

/* ================================================
   HOME PAGE (Prive.aspx)
   ================================================ */
header {
    width: 90%;
    max-width: 1080px;
 margin: Auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 0 56px 0;
}

.welcome-section {
    max-width: 720px;
    text-align: center;
    line-height: 1.35;
    margin-bottom: 90px;
 
}
.welcome-section h1 { 
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500; font-size: 60px; margin-bottom: 8px; color: #eee;
 }
.welcome-section h2 { font-weight: 300; font-size: 32px; margin-bottom: 15px; color: #aaa; }
.welcome-section p  { font-size: 20px; line-height: 28px; margin: 6px 0; letter-spacing: 0.02em; color: #9CA3AF; }
.welcome-section .btn-container {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* Support section */
.support-section {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    margin-top: 100px;
    display: flex;
    gap: 38px;
    align-items: center;
    margin-bottom: 75px;
    color: #ddd;
}
.support-section .text-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0 14px;
}
.support-section .text-area h2 { font-weight: 500; font-size: 22px; margin: 0; color: #f9f9f9; }
.support-section .text-area h4 { font-weight: 700; font-size: 18px; margin: 0; }
.support-section .text-area p  { font-weight: 300; font-size: 13.7px; margin: 0; color: #bbb; }
.support-section .text-area a  { font-weight: 600; font-size: 13.5px; color: #0af; margin-top: 8px; }

/* Sticky tabs */
.tabs-container {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 20px;

    scrollbar-width: none;
    -ms-overflow-style: none;

    z-index: 1000;
    transition: background-color 0.3s ease;
    /* background: transparent; */

}

.tabs-container::-webkit-scrollbar {
    display: none;
}

.tabs-container.stuck {
    position: fixed;
    top: 0; left: 0; right: 0;
        /* background: transparent; */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
}
.tabs-spacer { display: none; height: 68px; }
.tabs-spacer.active { display: block; }

.tabs {
   display: inline-flex;
    gap: 10px;
    width: max-content;
    min-width: 100%;
    /* background-color: #0c0d0e; */
    padding: 12px 16px;
    border-radius: 50px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    justify-content: center;
}



.tabs input[type=radio]:checked + .tab {
    color: white;
    background-color: #2e2e2e; /* active stays lighter */
    border-color: #2e2e2e;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs input[type=radio] { display: none; }

.tab {
    text-align: center;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1.5px solid #3a3a3a;
    cursor: pointer;
    color: #aaa;
    background-color:  #101010;
    transition: 0.2s;
    user-select: none;
    white-space: nowrap;
}
.tab:hover { color: white; border-color: #666; }
.tabs input[type=radio]:checked + .tab {
    color: white;
    background-color: #2e2e2e;
    border-color: #2e2e2e;
}

/* Premium cards */
.premium-services {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    text-align: center;
    margin-bottom: 76px;
}
.premium-services h3 {
    font-family: 'recoleta';
    font-weight: 400;
    font-size: 32px;
    color: #f0f0f0;
    margin-bottom: 48px;
    letter-spacing: 0.01em;
}
.premium-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}
.card {
    background-color: #08090A;
    border-radius: 20px;
    width: 290px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    padding-bottom: 28px;
}
.card:hover {
    box-shadow: 0 22px 44px rgba(0,0,0,0.55);
    transform: translateY(-5px);
}
.card .card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
    transition: transform 0.4s ease;
}
.card:hover .card-img { transform: scale(1.04); }
.card .card-img-ph {
    width: 100%;
    height: 240px;
    background: #2a3040;
    border-radius: 16px 16px 0 0;
}
.card .card-body {
    padding: 24px 22px 0 22px;
    text-align: center;
}
.card .card-body h4 {
    font-family: 'recoleta';
    font-weight: 400;
    font-size: 17px;
    color: #f0f0f0;
    margin: 0 0 12px 0;
}
.card .card-body p {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
    margin: 0;
}
.card.card-center {
    width: 310px;
    transform: translateY(-30px);
    background-color: #08090A;
    border-radius: 20px;
    padding-bottom: 32px;
}
.card.card-center:hover { transform: translateY(-35px); }
.card.card-center .card-img,
.card.card-center .card-img-ph { height: 290px; }
.card.card-center .card-body h4 {
    font-size: 20px;
    font-weight: 600;
    font-family: 'recoleta';
}
.card.card-center .card-body p { font-size: 13.5px; }

/* Exclusive icons */
.exclusive-icons {
    width: 100%;
    background-color: transparent;
    padding: 60px 0;
    margin-bottom: 76px;
}
.exclusive-icons-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0;
}
.exclusive-item {
    flex: 1;
    text-align: center;
    padding: 0 40px;
    border-right: none;
    transition: transform 0.3s ease;
}
.exclusive-item:hover { transform: translateY(-5px); }
.exclusive-item:last-child { border-right: none; }
.exclusive-item .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0 auto;
    margin-bottom: 12px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.exclusive-item:hover .icon-circle {
    background-color: #252525;
    box-shadow: 0 0 20px rgba(255,255,255,0.05);
}
.exclusive-item .icon-circle img { width: 80px; height: 80px; }
.exclusive-item .icon-circle svg { width: 36px; height: 36px; fill: white; }
.exclusive-item h5 {
    font-weight: 700;
    font-size: 24px;
    color: #f0f0f0;
    margin: 0 0 14px 0;
    letter-spacing: 0.01em;
}
.exclusive-item p {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
    margin: 0;
}

/* Lifestyle/privileges */
.lifestyle-section {
    width: 90%; max-width: 1080px;
    margin: auto;
    display: flex;
    gap: 60px;
    margin-bottom: 70px;
    align-items: center;
}
.lifestyle-section .image-placeholder {
    flex: 1; height: 330px;
    background: url('../images/v4.png') no-repeat center center;
    background-size: cover;
    border-radius: 12px;
    box-shadow: 0 7px 30px rgb(0 0 0 / 0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.lifestyle-section .image-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 14px 45px rgb(0 0 0 / 0.5);
}
.lifestyle-section .text-box {
    flex: 1; color: #eee;
    display: flex; flex-direction: column; gap: 20px;
    background-color: #111;
    border-radius: 16px;
    padding: 36px 34px;
}
.lifestyle-section .text-box h3 { font-weight: 700; font-size: 24px; margin: 0; }
.lifestyle-section .text-box p  { font-weight: 300; font-size: 14.4px; line-height: 1.45; margin: 0; }

/* Accordion */
.accordion-section { max-width: 600px; width: 90%; margin: auto; margin-bottom: 80px; }
.accordion-section h3 { font-weight: 700; font-size: 24px; color: #eee; margin-bottom: 25px; text-align: center; }
.accordion {
    background-color: #1b1b1b;
    margin-bottom: 12px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 25px rgb(0 0 0 / 0.35);
    transition: box-shadow 0.3s ease;
}
.accordion:hover { box-shadow: 0 18px 35px rgb(0 0 0 / 0.5); }
.accordion-header {
    padding: 18px 30px;
    cursor: pointer;
    font-weight: 700; font-size: 16px; color: #eee;
    display: flex; justify-content: space-between; align-items: center;
    user-select: none;
    transition: background-color 0.2s ease;
}
.accordion-header:hover { background-color: #222; }
.accordion-header span:last-child {
    font-size: 26px;
    line-height: 0;
    transition: transform 0.3s ease;
    display: inline-block;
}
.accordion-header.open-header span:last-child { transform: rotate(45deg); }
.accordion-content {
    max-height: 0; overflow: hidden;
    background-color: #222; color: #bbb;
    font-weight: 300; font-size: 14px;
    padding: 0 30px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-content.open { padding: 16px 30px 22px 30px; }

/* Mobile banking */
.connected-banking {
    width: 100%;
    background-color: transparent;
    padding: 80px 0 100px 0;
    margin-bottom: 0;
}
.connected-banking-inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.connected-text { flex: 0 0 420px; color: #eee; }
.connected-text h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.2;
    margin: 0 0 40px 0;
    color: #fff;
}
.connected-feature { margin-bottom: 28px; }
.connected-feature h5 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #f0f0f0;
    margin: 0 0 6px 0;
}
.connected-feature p {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #9CA3AF;
    margin: 0;
}
.connected-download { margin-top: 36px; }
.connected-download p { font-size: 13px; font-weight: 700; color: #eee; margin: 0 0 6px 0; }
.connected-download span {
    font-size: 13px;
    font-weight: 300;
    color: #666;
    display: block;
    margin-bottom: 16px;
}
.app-store-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.app-store-btns img {
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.app-store-btns img:hover { transform: scale(1.06); opacity: 0.9; }
.connected-images {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 460px;
}
.connected-images img { position: absolute; object-fit: cover; }
.connected-images .phone-front {
    width: 500px;
    right: 0; top: 0;
    z-index: 2;
    transition: transform 0.4s ease;
}
.connected-images .phone-front:hover { transform: scale(1.02); }

/* Footer */
footer {
    width: 100%;
    background-color: #000;
    padding: 80px 0 50px 0;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 300;
}
footer .footer-logo { margin-bottom: 36px; }
footer .footer-logo img { height: 36px; opacity: 0.9; }
footer .footer-headline {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0 auto 16px auto;
    max-width: 640px;
}
footer .footer-headline span {
    color: #888;
    font-weight: 400;
}
footer .footer-sub {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin-bottom: 44px;
    letter-spacing: 0.03em;
}
footer .footer-headline strong {
    color: #fff;
    font-weight: 700;
}
footer .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
    color: #fff;
    border: 2px solid #333;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 60px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
footer .footer-cta:hover {
    border-color: #666;
    background-color: rgba(255,255,255,0.05);
}
footer .footer-cta .cta-icon {
    width: 34px; height: 34px;
    background-color: #222;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
footer .footer-cta .cta-icon svg { width: 15px; height: 15px; fill: white; }
footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 36px;
    border-top: 1px solid #1a1a1a;
    padding-top: 28px;
    margin-top: 10px;
}
footer .footer-links a {
    color: #6093E5;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s;
}
footer .footer-links a:hover { color: #fff; }
@media (max-width: 768px) {
    footer .footer-headline { font-size: 26px; }
}
/* Slider */
.slider-section {
    width: 100%;
    background-color: transparent;
    padding: 70px 0 50px 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 76px;
}
.slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    max-width: 1080px;
    margin: 0 auto;
}
.slider-images-area {
    flex: 0 0 420px;
    height: 360px;
    position: relative;
}
.img-next {
    position: absolute;
    left: 0; top: 40px;
    width: 190px; height: 270px;
    border-radius: 20px;
    overflow: hidden;
    filter: brightness(0.45);
    transition: left   0.65s cubic-bezier(0.4,0,0.2,1),
                top    0.65s cubic-bezier(0.4,0,0.2,1),
                width  0.65s cubic-bezier(0.4,0,0.2,1),
                height 0.65s cubic-bezier(0.4,0,0.2,1),
                filter 0.65s cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
}
.img-current {
    position: absolute;
    left: 155px; top: 0;
    width: 240px; height: 330px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(0,0,0,0.65);
    transition: left   0.65s cubic-bezier(0.4,0,0.2,1),
                top    0.65s cubic-bezier(0.4,0,0.2,1),
                width  0.65s cubic-bezier(0.4,0,0.2,1),
                height 0.65s cubic-bezier(0.4,0,0.2,1),
                filter 0.65s cubic-bezier(0.4,0,0.2,1);
    z-index: 2;
}
.img-next img, .img-current img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.slider-images-area.animating .img-next {
    left: 155px; top: 0;
    width: 240px; height: 330px;
    filter: brightness(1);
    z-index: 3;
}
.slider-images-area.animating .img-current {
    left: -220px; top: 40px;
    width: 190px; height: 270px;
    filter: brightness(0.45);
    z-index: 1;
}
.slider-content {
    flex: 1;
    padding-left: 80px;
    color: #eee;
    position: relative;
}
.slider-content h2 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 36px; font-weight: 700;
    margin: 0 0 18px 0; color: #f5f5f5;
    transition: opacity 0.35s ease;
}
.slider-content p {
    font-size: 14.5px; font-weight: 300;
    line-height: 1.65; color: #aab;
    margin: 0 0 32px 0; max-width: 340px;
    transition: opacity 0.35s ease;
}
.slider-content.fading h2,
.slider-content.fading p { opacity: 0; }
.slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
    color: #fff;
    border: 1.5px solid #555;
    border-radius: 50px;
    padding: 10px 22px 10px 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
.slide-btn:hover {
    border-color: #aaa;
}
.slide-btn .btn-icon {
    width: 32px;
    height: 32px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.slide-btn .btn-icon svg {
    width: 14px;
    height: 14px;
    fill: white;
}
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #a3a3a3;
    cursor: pointer;
    transition: background-color 0.3s, width 0.3s;
}
.dot.active { background-color: #ffffff; width: 24px; border-radius: 4px; }

/* ================================================
   CONTENT PAGES — SHARED HERO HEADER
   ================================================ */
.accounts-hero,
.cards-hero,
.deposits-hero,
.loans-hero {
    text-align: center;
    padding: 90px 5% 60px 5%;
}
.accounts-hero h1,
.cards-hero h1,
.deposits-hero h1,
.loans-hero h1 {
    font-family:'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 42px;
    font-weight: 400;
    color: #f0f0f0;
    margin-bottom: 16px;
    letter-spacing: 0.01em;
}
.accounts-hero p,
.cards-hero p,
.deposits-hero p,
.loans-hero p {
    font-size: 15px;
    font-weight: 300;
    color: #777;
    line-height: 1.65;
    max-width: 100%;
    margin: 0 auto;
}
.cards-hero { padding: 80px 5% 50px; }
.cards-hero h1 { margin: 0 0 14px; }

/* ================================================
   CONTENT PAGES — SHARED CARD GRID
   ================================================ */
.accounts-grid,
.loans-grid {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 100px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Shared horizontal card */
.account-card,
.loan-card {
    background-color: #0F1014;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    border: none;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.account-card:hover,
.loan-card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    transform: translateY(-3px);
}
.account-card .card-image,
.loan-card .card-image {
    flex: 0 0 195px;
    min-height: 220px;
    overflow: hidden;
}
.account-card .card-image img,
.loan-card .card-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.account-card:hover .card-image img,
.loan-card:hover .card-image img { transform: scale(1.06); }

.account-card .card-image-ph,
.loan-card .card-image-ph {
    flex: 0 0 195px;
    min-height: 220px;
    background-color: #1e2329;
}
.account-card .card-content,
.loan-card .card-content {
    flex: 1;
    padding: 28px 28px 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.account-card .card-content h3,
.loan-card .card-content h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 16px 0;
    letter-spacing: 0.01em;
    line-height: 1.35;
}
.account-card .card-content ul,
.loan-card .card-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.account-card .card-content ul li,
.loan-card .card-content ul li {
    font-size: 13px;
    font-weight: 300;
    color: #888;
    line-height: 1.5;
    padding-left: 14px;
    position: relative;
}
.account-card .card-content ul li::before,
.loan-card .card-content ul li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: #555;
}
.account-card .read-more,
.loan-card .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #bbb;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: auto;
}
.account-card .read-more:hover,
.deposit-card .read-more:hover,
.loan-card .read-more:hover { color: #fff; }
.account-card .read-more::before,
.deposit-card .read-more::before,
.loan-card .read-more::before { content: '->'; font-size: 14px; }

/* ================================================
   CARDS PAGE
   ================================================ */
.cards-list {
    width: 90%; max-width: 1080px;
    margin: 0 auto 100px;
    display: flex; flex-direction: column; gap: 20px;
}
a.card-item {
    display: flex;
    background: #141414;
    border: 1px solid #1e1e1e;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color .3s, box-shadow .3s, transform .25s;
}
a.card-item:hover {
    border-color: #2e2e2e;
    box-shadow: 0 16px 44px rgba(0,0,0,.55);
    transform: translateY(-3px);
}
.card-img-wrap {
    flex: 0 0 220px;
    background: #0f0f0f;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; min-height: 200px;
}
.card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
    transition: transform 0.4s ease;
}
a.card-item:hover .card-img-wrap img { transform: scale(1.06); }
.card-img-ph {
    flex: 0 0 220px; min-height: 200px;
    background: linear-gradient(135deg, #111 0%, #1c1e22 100%);
    display: flex; align-items: center; justify-content: center;
}
.card-img-ph svg { width: 60px; height: 60px; opacity: .12; fill: #fff; }
.card-body {
    flex: 1;
    padding: 32px 36px 30px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.card-body-top { display: flex; flex-direction: column; gap: 14px; }
.card-body h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px; font-weight: 700;
    color: #f0f0f0; margin: 0;
    letter-spacing: .01em;
}
.card-body p {
    font-size: 13.5px; font-weight: 300;
    color: #888; line-height: 1.68; margin: 0;
}
.read-more {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500;
    color: #bbb; margin-top: 20px;
    transition: color .2s;
}
a.card-item:hover .read-more { color: #fff; }
.read-more::before { content: '->'; font-size: 14px; }

/* ================================================
   LOANS PAGE — INTRO STRIP
   ================================================ */
.loans-intro {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 70px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 60px;
    border-bottom: 1px solid #1e1e1e;
}
.intro-headline h2 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.25;
    margin: 0 0 16px 0;
}
.intro-headline p { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; }
.intro-feature h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0 0 12px 0;
}
.intro-feature p { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media only screen and (max-width: 960px) {
    .premium-cards { flex-direction: column; gap: 36px; align-items: center; }
    .premium-cards .card { width: 100%; max-width: 400px; transform: none !important; }
    .support-section,
    .lifestyle-section { flex-direction: column; gap: 40px; }
    .connected-banking-inner { flex-direction: column; gap: 40px; }
    .connected-text { flex: none; width: 100%; }
    .connected-images { height: 300px; width: 100%; }
    .exclusive-icons-inner { flex-direction: column; gap: 40px; padding: 0 20px; }
    .exclusive-item { border-right: none; border-bottom: 1px solid #2a2a2a; padding-bottom: 40px; }
    .exclusive-item:last-child { border-bottom: none; }
    .tab { font-size: 0.8rem; padding: 15px 10px; min-width: 110px; }
    .slider-wrapper { flex-direction: column; padding: 0 20px; gap: 40px; }
    .slider-images-area { flex: none; width: 100%; }
    .slider-content { padding-left: 0; padding-right: 0; }
}

@media (max-width: 900px) {
    .loans-intro { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
}

@media (max-width: 800px) {
    .accounts-grid,
    .loans-grid { grid-template-columns: 1fr; }
    .account-card .card-image,
    .account-card .card-image-ph,
    .loan-card .card-image,
    .loan-card .card-image-ph { flex: 0 0 160px; }
}

@media (max-width: 768px) {
    .navbar-links { display: none; }
    .navbar-hamburger { display: flex; }
    .bottom-nav { gap: 16px; }
        header {
        padding: 16px 0 32px 0;
    }
    header img {
        height: 80px;
        max-width: 200px;
        object-fit: contain;
    }
    .welcome-section .btn-container {
        margin-bottom: 40px;
        padding: 0 24px;
        
        flex-wrap: wrap;
        justify-content: center;
    }  
    

    .btn-play {
        padding: 12px 22px;
        font-size: 14px;
    }
}

@media (max-width: 700px) {
    a.card-item { flex-direction: column; }
    .card-img-wrap, .card-img-ph { flex: none; width: 100%; height: 200px; }
    .card-body { padding: 24px 22px 22px; }
}

@media (max-width: 600px) {
    .prive-navbar { padding: 0 4%; height: 64px; }
    .navbar-logo img { height: 28px; max-width: 160px; object-fit: contain; }
    .navbar-hamburger { flex-shrink: 0; margin-left: auto; }
    .close-x { width: 32px; height: 32px; margin-left: 10px; flex-shrink: 0; }
    .navbar-mobile { top: 64px; }
    .prive-page-body { padding-top: 64px; }
    .bottom-bar-inner { flex-direction: column; gap: 16px; }
    .bottom-bar-right { padding-top: 0; }
    .footer-headline { font-size: 28px !important; }
}

@media (max-width: 520px) {
    .account-card,
    .loan-card { flex-direction: column; }
    .account-card .card-image,
    .account-card .card-image-ph,
    .loan-card .card-image,
    .loan-card .card-image-ph { flex: none; width: 100%; height: 200px; }
    .accounts-hero h1,
    .deposits-hero h1,
    .loans-hero h1,
    .cards-hero h1 { font-size: 30px; }
    .intro-headline h2 { font-size: 22px; }
}

@media (max-width: 480px) {
    .cards-hero { padding-top: 60px; }
}

@media (max-width: 360px) {
    .navbar-logo img { height: 24px; max-width: 130px; }
    .prive-navbar { padding: 0 3%; }
}

.btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.btn-play {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-play:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.btn-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}.exclusive-services-section {
    max-width: 900px;
    width: 90%;
    margin: 0 auto 80px auto;
    text-align: center;
}
.exclusive-services-section h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: #f0f0f0;
    margin-bottom: 60px;
}
.exclusive-services-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}
.exc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 200px;
}
.exc-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exc-icon-circle img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.exc-item h5 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #f0f0f0;
    margin: 0;
}
.exc-item p {
    font-weight: 300;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
.exclusive-icons-title {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: #f0f0f0;
    text-align: center;
    margin-bottom: 56px;
}

.lifestyle-section .text-box {
    flex: 1;
    color: #eee;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background-color: #111;
    border-radius: 16px;
    padding: 48px 40px;
}
.lifestyle-section .text-box h3 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 8px 0;
    color: #fff;
}
.priv-feature h5 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #f0f0f0;
    margin: 0 0 8px 0;
}
.priv-feature p {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.65;
    color: #888;
    margin: 0;
}

.lifestyle-section {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    display: flex;
    gap: 0;
    margin-bottom: 70px;
    align-items: flex-end;
    border-radius: 16px;
    overflow: hidden;
}
.lifestyle-section .image-placeholder {
    flex: 0 0 55%;
    min-height: 460px;
    background: url('../images/v4.png') no-repeat center center;
    background-size: cover;
    border-radius: 16px;
}
.lifestyle-section .text-box {
    flex: 0 0 45%;
    color: #eee;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: #111;
    border-radius: 0px 16px 16px 0;
    padding: 48px 40px;
    justify-content: center;
    min-height: 420px;
}

@media (max-width: 768px) {
    .connected-banking {
        padding: 60px 0 80px 0;
        background-color: #000;
    }
    .connected-banking-inner {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0;
    }
    .connected-images {
        width: 100%;
        height: 380px;
        justify-content: center;
        align-items: center;
        position: relative;
        order: 1;
    }
    .connected-images .phone-front {
        width: 85%;
        max-width: 340px;
        position: relative;
        right: auto;
        top: auto;
    }
    .connected-text {
        order: 2;
        width: 100%;
        padding: 40px 24px 0 24px;
        text-align: left;
    }
    .connected-text h3 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 36px;
    }
    .connected-feature {
        margin-bottom: 24px;
        border-bottom: 1px solid #1a1a1a;
        padding-bottom: 24px;
    }
    .connected-feature:last-of-type {
        border-bottom: none;
    }
    .connected-feature h5 {
        font-size: 15px;
        margin-bottom: 6px;
        color: #fff;
    }
    .connected-feature p {
        font-size: 13px;
        color: #888;
    }
    .connected-download {
        margin-top: 28px;
        text-align: left;
    }
    .connected-download p {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
    }
    .connected-download span {
        font-size: 13px;
        color: #666;
    }
    .app-store-btns {
        gap: 12px;
        margin-top: 12px;
    }
    .app-store-btns img {
        height: 48px;
    }
}

.accounts-grid-new {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 100px auto;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.acc-card {
    flex: 0 0 calc(33.333% - 14px);
    border-radius: 16px;
    overflow: hidden;
    background-color: #141414;
    border: 1px solid #1e1e1e;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.acc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.5);
}
.acc-card-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
}
.acc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.acc-card:hover .acc-card-img img {
    transform: scale(1.05);
}
.acc-card h4 {
    font-family: 'recoleta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #f0f0f0;
    text-align: center;
    padding: 20px 16px 24px 16px;
    margin: 0;
}

@media (max-width: 768px) {
    .acc-card {
        flex: 0 0 calc(50% - 10px);
    }
}
@media (max-width: 500px) {
    .acc-card {
        flex: 0 0 100%;
    }
}

footer .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    color: #111;
    border: none;
    border-radius: 50px;
    padding: 10px 28px 10px 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 60px;
    transition: background-color 0.25s ease;
}
footer .footer-cta:hover {
    background-color: #e0e0e0;
}
footer .footer-cta .btn-icon {
    width: 36px;
    height: 36px;
    background-color: #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.consult-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  background: #fff;
  color: #000;

  padding: 10px 20px 10px 10px;
  border-radius: 50px;

  text-decoration: none;
  font-weight: 600;
}

.consult-icon {
  width: 35px;
  height: 35px;
  background: #111;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img {
  width: 16px;
  height: 16px;

  /* 🔥 Make image white */
  filter: brightness(0) invert(1);
}

  .consult-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      background: #eaeaea;   
  color: #000;           
  }


.consult-icon i {
  transform: translateX(1px); /* small tweak */
}





/* Full screen black overlay */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* black background */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}

/* Loader content */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo */
.loader-logo {
  width: 120px; /* adjust size as needed */
  margin-bottom: 20px;
}

/* Spinner */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #333;   /* dark grey border */
  border-top: 6px solid #fff; /* white moving border */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* Stylish Loading Text */
.loading-text {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
  color: #fff;
  letter-spacing: 2px;
  font-weight: bold;
  position: relative;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@media (max-width: 768px) {
    .lifestyle-section {
        flex-direction: column;      /* Stack image and text */
        gap: 20px;
    }
    .lifestyle-section .image-placeholder {
        width: 100%;                 /* Full width */
        height: 220px;               /* Reduce height for mobile */
    }
    .lifestyle-section .text-box {
        width: 100%;
        padding: 24px 20px;
    }
}

/*#####################################*/
/*              Prive.aspx             */
/*#####################################*//*

section {
    padding: 120px 0;
}

.card,
.text-box,
footer,
.slider-content,
.slide-btn,
.tab {
    border: none !important;
    box-shadow: none !important;
}

.card {
    background: #08090A;
    padding: 40px;
    border-radius: 24px;
}

.card p,
.slider-content p,
.connected-feature p,
footer p {
    color: #9CA3AF;
    font-size: 16px;
    line-height: 24px;
}

.welcome-section h1 {
    font-size: 60px;
    line-height: 54px;
    font-weight: 500;
}

.welcome-section h2 {
    font-size: 32px;
    line-height: 28px;
}

.welcome-section p {
    font-size: 20px;
    line-height: 28px;
    color: #9CA3AF;
}

footer {
    padding: 80px 0;
    background: transparent;
}

footer .footer-links a {
    color: #6093E5;
    font-size: 16px;
    font-weight: 600;
}


@media (max-width:768px){

section{
    padding:80px 0;
}

.welcome-section h1{
    font-size:32px;
    line-height:40px;
}

.welcome-section h2,
.welcome-section p{
    font-size:14px;
    line-height:24px;
}

header img{
    width:140px;
}

.tabs{
    gap:8px;
    padding:8px;
}

.tab{
    border-radius:999px;
}
}

/*#####################################*/
/*              PriveDeposits             */
/*#####################################*/

.deposits-hero {
    text-align: center;
    padding: 120px 5% 40px;
}

.deposits-hero h1 {
    font-family: 'recoleta';
    font-size: 48px;
    font-weight: 500;
    line-height: 54px;
    color: #fff;
    margin-bottom: 20px;
}

.deposits-hero p {
    font-family: 'Noto Kufi Arabic';
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
    max-width: 720px;
    margin: 0 auto;
}

.accounts-grid-new {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 120px auto;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.acc-card {
    flex: 0 0 calc(50% - 150px);
    background: #0F1014;
    border: none !important;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease;
    box-shadow: none !important;
}

.acc-card:hover {
    transform: translateY(-4px);
}

.acc-card-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

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

.acc-card h4 {
    font-family: 'recoleta';
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #fff;
    padding: 32px 24px 40px;
    margin: 0;
    text-align: left;
}

@media (max-width:768px){

.deposits-hero{
    padding: 80px 20px 32px;
}

.deposits-hero h1{
    font-size: 32px;
    line-height: 40px;
}

.deposits-hero p{
    font-size: 14px;
    line-height: 24px;
}

.acc-card{
    flex: 0 0 100%;
}

.acc-card h4{
    font-size: 20px;
    line-height: 28px;
    padding: 24px;
}
}

/*#####################################*/
/*              PriveLoans             */
/*#####################################*/

.loans-hero {
    text-align: center;
    padding: 120px 5% 50px;
}

.loans-hero h1 {
    font-family: 'recoleta';
    font-size: 48px;
    line-height: 54px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}

.loans-hero p {
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
    max-width: 760px;
    margin: 0 auto;
}

.loans-intro {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 80px;
    padding: 48px;
    background: #0F1014;
    border-radius: 24px;
    border: none;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
}

.intro-headline h2 {
    font-family: 'recoleta';
    font-size: 36px;
    line-height: 42px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}

.intro-headline p,
.intro-feature p {
    font-size: 15px;
    line-height: 26px;
    color: #9CA3AF;
}

.intro-feature h3 {
    font-family: 'recoleta';
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 16px;
}

.loans-grid {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 120px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.loan-card {
    background: #0F1014;
    border-radius: 24px;
    overflow: hidden;
    border: none !important;
    box-shadow: none !important;
    transition: transform .3s ease;
}

.loan-card:hover {
    transform: translateY(-4px);
}

.loan-card .card-image {
    width: 100%;
    height: 260px;
}

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

.loan-card .card-content {
    padding: 32px;
}

.loan-card .card-content h3 {
    font-family: 'recoleta';
    font-size: 28px;
    line-height: 34px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
}

.card-amount {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}

.loan-card .card-content p {
    font-size: 15px;
    line-height: 26px;
    color: #9CA3AF;
}

.loan-card .card-content p + p {
    margin-top: 6px;
}

@media (max-width: 900px) {

.loans-intro {
    grid-template-columns: 1fr;
    padding: 32px 24px;
}

.loans-grid {
    grid-template-columns: 1fr;
}

.loan-card .card-content h3 {
    font-size: 24px;
    line-height: 30px;
}
}

@media (max-width:768px){

.loans-hero{
    padding: 80px 20px 40px;
}

.loans-hero h1{
    font-size: 32px;
    line-height: 40px;
}

.loans-hero p,
.intro-headline p,
.intro-feature p,
.loan-card .card-content p{
    font-size: 14px;
    line-height: 24px;
}

.intro-headline h2{
    font-size: 28px;
    line-height: 34px;
}

.intro-feature h3{
    font-size: 18px;
    line-height: 26px;
}

.loan-card .card-image{
    height: 220px;
}

.loan-card .card-content{
    padding: 24px;
}
}

/*#####################################*/
/*              PriveCards             */
/*#####################################*/

.cards-hero{
    text-align:center;
    padding:120px 5% 50px;
}

.cards-hero h1{
    font-family:'recoleta';
    font-size:48px;
    line-height:54px;
    font-weight:500;
    color:#fff;
    margin-bottom:20px;
}

.cards-hero p{
    font-size:16px;
    line-height:24px;
    color:#9CA3AF;
    max-width:760px;
    margin:0 auto;
}

.cards-list{
    width:90%;
    max-width:1080px;
    margin:0 auto 120px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

a.card-item{
    display:grid;
    grid-template-columns:340px 1fr;
    background:#0F1014;
    border-radius:24px;
    overflow:hidden;
    border:none !important;
    box-shadow:none !important;
    transition:transform .3s ease;
}

a.card-item:hover{
    transform:translateY(-4px);
}

.card-img-wrap{
    width:100%;
    height:100%;
    min-height:320px;
    overflow:hidden;
    background:#111;
}

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

.card-body{
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.card-body-top{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.card-body h3{
    font-family:'recoleta';
    font-size:32px;
    line-height:38px;
    font-weight:500;
    color:#fff;
    margin:0;
}

.card-body p{
    font-size:15px;
    line-height:26px;
    color:#9CA3AF;
    margin:0;
}

.card-img-ph{
    min-height:320px;
    background:#16181D;
    display:flex;
    align-items:center;
    justify-content:center;
}

.card-img-ph svg{
    width:56px;
    height:56px;
    fill:#fff;
    opacity:.12;
}

@media (max-width:900px){

a.card-item{
    grid-template-columns:1fr;
}

.card-img-wrap,
.card-img-ph{
    min-height:260px;
}

.card-body{
    padding:32px 28px;
}

.card-body h3{
    font-size:28px;
    line-height:34px;
}
}

@media (max-width:768px){

.cards-hero{
    padding:80px 20px 40px;
}

.cards-hero h1{
    font-size:32px;
    line-height:40px;
}

.cards-hero p,
.card-body p{
    font-size:14px;
    line-height:24px;
}

.card-body{
    padding:24px;
}

.card-body h3{
    font-size:24px;
    line-height:30px;
}

.card-img-wrap,
.card-img-ph{
    min-height:220px;
}
}


/*#####################################*/
/*              MobileView             */
/*#####################################*//*


@media (max-width:768px){

.cards-hero{
    padding:72px 20px 32px;
}

.cards-hero h1{
    font-size:32px;
    line-height:38px;
    margin-bottom:12px;
}

.cards-hero p{
    font-size:14px;
    line-height:24px;
    max-width:100%;
}

.cards-list{
    width:100%;
    padding:0 16px;
    gap:18px;
    margin:0 auto 80px;
}

a.card-item{
    grid-template-columns:1fr;
    border-radius:20px;
    overflow:hidden;
    background:#101114;
}

.card-img-wrap,
.card-img-ph{
    min-height:220px;
    max-height:220px;
}

.card-img-wrap img{
    object-fit:cover;
    object-position:center;
}

.card-body{
    padding:24px 20px 22px;
    gap:18px;
}

.card-body-top{
    gap:14px;
}

.card-body h3{
    font-size:22px;
    line-height:28px;
    font-weight:500;
    letter-spacing:-0.01em;
}

.card-body p{
    font-size:14px;
    line-height:24px;
    color:#9CA3AF;
}

.card-body p:last-child{
    padding-top:4px;
    border-top:1px solid rgba(255,255,255,0.06);
}

.read-more{
    margin-top:4px;
    font-size:13px;
}
}

@media (max-width:480px){

.cards-list{
    padding:0 14px;
}

.card-img-wrap,
.card-img-ph{
    min-height:200px;
    max-height:200px;
}

.card-body{
    padding:20px 18px;
}

.card-body h3{
    font-size:20px;
    line-height:26px;
}

.card-body p{
    font-size:13.5px;
    line-height:23px;
}
}

/*#####################################*/
/*        FIGMA MOBILE MENU            */
/*#####################################*/

@media (max-width:768px){

    .fp-section{
        height: auto !important;
    }

/* Top Navbar *//*

.prive-navbar{
    height:72px;
    padding:0 22px;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.navbar-logo img{
    height:28px;
    object-fit:contain;
}

.navbar-links{
    display:none;
}

/* Hamburger *//*

.navbar-hamburger{
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:3001;
}

.navbar-hamburger span{
    width:20px;
    height:2px;
    border-radius:10px;
    background:#fff;
    position:absolute;
    transition:.3s ease;
}

.navbar-hamburger span:nth-child(1){
    transform:translateY(-6px);
}

.navbar-hamburger span:nth-child(2){
    opacity:1;
}

.navbar-hamburger span:nth-child(3){
    transform:translateY(6px);
}

/* Open State *//*

.navbar-hamburger.active span:nth-child(1){
    transform:rotate(45deg);
}

.navbar-hamburger.active span:nth-child(2){
    opacity:0;
}

.navbar-hamburger.active span:nth-child(3){
    transform:rotate(-45deg);
}

/* Fullscreen Menu *//*

.navbar-mobile{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    background:#0B0D10;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:32px 28px 40px;
    z-index:3000;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:all .35s ease;
}

/* OPEN *//*

.navbar-mobile.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* Logo Area *//*

.mobile-menu-top{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:120px;
}

.mobile-menu-logo{
    height:34px;
    margin-left:22px;
}

/* Nav List *//*

.navbar-mobile ul{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    list-style:none;
    padding:0;
    margin:0;
}

.navbar-mobile ul li{
    width:100%;
    text-align:center;
}

.navbar-mobile ul li a{
    font-family:'recoleta';
    font-size:34px;
    line-height:1;
    font-weight:400;
    color:#6F7685;
    background:none !important;
    padding:0;
    height:auto;
    border:none;
    transition:.25s ease;
}

.navbar-mobile ul li a.active{
    color:#fff;
    font-weight:500;
}

.navbar-mobile ul li a:hover{
    color:#fff;
}

/* Hide Tabs *//*

.tabs-container{
    display:none;
}
}
.mobile-menu-top{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:110px;
    position:relative;
}

.mobile-menu-logo{
    height:34px;
    object-fit:contain;
    margin-left:20px;
}

/* Close Button *//*

.close-menu-btn{
    width:34px;
    height:34px;
    border:none;
    background:transparent;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
}

.close-menu-btn span{
    position:absolute;
    top:50%;
    left:50%;
    width:22px;
    height:2px;
    background:#fff;
    border-radius:20px;
}

.close-menu-btn span:first-child{
    transform:translate(-50%, -50%) rotate(45deg);
}

.close-menu-btn span:last-child{
    transform:translate(-50%, -50%) rotate(-45deg);
}*/

}
@media only screen and (max-width: 768px) {
    .welcome-section h1{font-size: 32px; line-height: 40px;}
    .welcome-section h2{font-size: 14px; line-height: 130%; font-weight: bold;}
    .welcome-section p{font-size: 14px; line-height: 24px; font-weight: 400;}
}



/* Desktop overlap (your original styles remain) */
/* ... keep your .img-current, .img-next, .animating etc. ... */

/* Mobile swipe */
/* ===========================
   Mobile Slider
=========================== */
/* ===========================
   Mobile Slider
=========================== */
@media (max-width:768px){

    .slider-section{
        overflow:hidden;
    }

    .slider-wrapper{

        display:flex;
        flex-direction:column;
        align-items:center;

        padding:0 20px;

        gap:24px;

        transition:
            transform .35s ease,
            opacity .35s ease;

    }

    .slider-wrapper.slide-out{

        transform:translateX(-35px);
        opacity:.2;

    }

    .slider-wrapper.slide-in{

        transform:translateX(35px);
        opacity:.2;

    }

    /* ================================================= */

    .slider-images-area{

        position:relative;

        width:380px;          /* أكبر من الصورة */

        max-width:none;

        height:420px;

        margin:auto;

        overflow:hidden;

    }

    .img-current{

        position:absolute;

        left:0;
        top:0;

        width:300px;
        height:420px;

        border-radius:20px;

        overflow:hidden;

        z-index:2;

        box-shadow:0 20px 40px rgba(0,0,0,.35);

    }

    .img-current img{

        width:100%;
        height:100%;

        object-fit:cover;

    }

    /* Preview */

    #imgNext{

        display:block;

        position:absolute;

        left:250px;

        top:18px;

        width:300px;
        height:385px;

        border-radius:20px;

        overflow:hidden;

        filter:brightness(.65);

        z-index:1;

    }

    #imgNext img{

        width:100%;
        height:100%;

        object-fit:cover;

    }

    #imgNext1,
    #imgNext2{

        display:none;

    }

    /* ================================================= */

    .slider-content{

        padding:0;

        text-align:center;

    }

    .slider-content h2{

        font-size:28px;

    }

    .slider-content p{

        max-width:100%;

    }

    .slide-btn{

        margin:auto;

    }

    .slider-dots{

        display:none;

    }

}

.hide{
    display: none !important;
}