:root{
      --brand:#2563eb;          /* Blue 600 */
      --brand-2:#06b6d4;        /* Cyan 500 */
      --ink:#0b1020;            /* Deep navy */
      --text:#0f172a;           /* Slate 900 */
      --muted:#6b7280;          /* Gray 500 */
      --card:#0e1326;           /* Glass bg on hero */
      --ring: rgba(37,99,235,.3);
    }
    html,body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; color:var(--text);}
    .fw-extrabold{font-weight:800}

    /* ====== Navbar ====== */
    .navbar{backdrop-filter:saturate(180%) blur(12px);}
    .nav-link{font-weight:600}
    .btn-brand{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; border:none}
    .btn-brand:hover{opacity:.95; color:#fff}

    /* ====== Hero ====== */
    .hero{
      position:relative; color:#fff;
      background: radial-gradient(1200px 500px at 15% 20%, rgba(14,19,38,.9), rgba(14,19,38,.6) 60%, rgba(14,19,38,0) 70%),
                  linear-gradient(135deg, #0b1020 0%, #0e1326 40%, #0b1020 100%);
      overflow:hidden;
    }
    .hero::before{
      content:""; position:absolute; inset:-20%; filter: blur(60px); z-index:0;
      background: radial-gradient(600px 300px at 85% 15%, rgba(6,182,212,.25), transparent 60%),
                  radial-gradient(600px 300px at 10% 90%, rgba(37,99,235,.25), transparent 60%);
    }
    
    .form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: red;
  box-shadow: none;
}


/* Error text */
.invalid-feedback {
  display: none;
  color: red;
  font-size: 12px;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}
    .hero-grid{
      background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 28px 28px; border-radius: 1.25rem; border:1px solid rgba(255,255,255,.08);
    }
    /* Error borders */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: red;
  box-shadow: none;
}

/* Error text */
.invalid-feedback {
  display: none;
  color: red;
  font-size: 12px;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}
    .tag-badge{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2)}

    .search-wrap{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); border-radius:1rem}
    .search-wrap .form-control, .search-wrap .form-select{background:transparent; border:none; color:#fff}
    .search-wrap .form-control::placeholder{color:#d1d5db}
    .search-wrap .form-select{color:#e5e7eb}
    .search-wrap .form-select option{color:#0b1020}

    /* ====== Sections ====== */
    .section-title{font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:-.5px}
    .subtitle{color:var(--muted)}

    .card-job{border:1px solid #e5e7eb; transition:.25s ease; border-radius:1rem}
    .card-job:hover{transform: translateY(-4px); box-shadow:0 10px 30px rgba(37,99,235,.08)}
    .badge-soft{background: rgba(37,99,235,.08); color:#1d4ed8; border:1px solid rgba(37,99,235,.15)}
    .badge-ghost{background: rgba(6,182,212,.08); color:#0e7490; border:1px solid rgba(6,182,212,.18)}

    .icon-pill{width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background: linear-gradient(180deg,#f8fafc,#eef2ff); border:1px solid #e5e7eb}

    a.logo {
    color: white !important;
    text-decoration: none;
    font-weight: bold;
}
a.logo spa{
   font-weight: bold; 
}

    .how-card{border:1px dashed #e5e7eb; border-radius:1rem; transition:.2s}
    .how-card:hover{border-style:solid; transform:translateY(-3px)}

    /* ====== CTA Ribbon ====== */
    .cta{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; border-radius:1.25rem}

    /* ====== Footer ====== */
    .footer{background:#0b1020; color:#cbd5e1}
    .footer a{color:#e2e8f0}
    .newsletter{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}

    /* ====== Utilities ====== */
    .shadow-soft{box-shadow:0 8px 26px rgba(2,8,23,.08)}

    /* Back to top */
    .backTop{position: fixed; right:16px; bottom:16px; z-index:999; display:none}

    /* Simple fade-up animation */
    [data-animate]{opacity:0; transform: translateY(12px); transition: all .6s ease}
    [data-animate].in{opacity:1; transform:none}
    /* Minimal styling for modal + buttons */
.shadow-soft { box-shadow: 0 10px 30px rgba(2, 8, 23, 0.08); }
.btn-brand {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: #fff; border: none;
}
.btn-brand:hover { opacity: .95; color: #fff; }
 /* === DREAMBANKINGJOB – About Page (Scoped) === */
  .about-page{
    --brand:#2563eb;          /* blue */
    --brand-2:#06b6d4;        /* cyan */
    --ink:#0b1020;
    --muted:#64748b;
    --ring:rgba(37,99,235,.15);
    color:#0f172a;
  }
  .about-hero{
    position:relative;
    background:
      radial-gradient(900px 400px at 10% 10%, rgba(37,99,235,.18), transparent 60%),
      radial-gradient(900px 400px at 90% 20%, rgba(6,182,212,.18), transparent 60%),
      linear-gradient(135deg, #0b1020 0%, #0e1326 60%, #0b1020 100%);
    border-radius:1.25rem;
    overflow:hidden;
  }
  .about-hero .overlay-grid{
    position:absolute; inset:0; opacity:.15; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.2) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.2) 1px, transparent 1px);
    background-size:28px 28px;
  }
  .about-hero .title{ color:#fff; font-weight:800; letter-spacing:-.4px }
  .about-hero .lead{ color:#d1d5db }
  .chip{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem .75rem; font-weight:600; font-size:.85rem;
    color:#fff; border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.1); border-radius:999px;
  }

  /* Stats */
  .about-stats .stat{
    border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem;
    background:#fff; transition:.2s ease; height:100%;
  }
  .about-stats .stat:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(2,8,23,.06) }
  .stat .num{ font-size:1.75rem; font-weight:800; color:var(--ink) }
  .stat .lbl{ color:var(--muted) }

  /* Cards */
  .card-soft{
    border:1px solid #e5e7eb; border-radius:1rem; background:#fff;
    box-shadow:0 8px 26px rgba(2,8,23,.04);
  }
  .icon-pill{
    width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
    background:linear-gradient(180deg,#f8fafc,#eef2ff); border:1px solid #e5e7eb;
  }
  .accent{ color:#0ea5e9 }

  /* Timeline */
  .timeline{ position:relative; padding-left:1.75rem }
  .timeline::before{
    content:''; position:absolute; left:.6rem; top:.3rem; bottom:.3rem;
    width:2px; background:linear-gradient(var(--brand), var(--brand-2));
    border-radius:2px; opacity:.4;
  }
  .tl-item{ position:relative; margin-bottom:1.25rem }
  .tl-item::before{
    content:''; position:absolute; left:-23px; top:.35rem;
    width:10px; height:10px; border-radius:999px; background:var(--brand);
    box-shadow:0 0 0 4px var(--ring);
  }
  .tl-year{ font-weight:700; color:var(--ink) }
  .tl-text{ color:#334155 }

  /* Values */
  .value{
    border:1px dashed #e5e7eb; border-radius:1rem; padding:1.1rem; height:100%;
    transition:.2s;
  }
  .value:hover{ border-style:solid; transform:translateY(-3px) }

  /* CTA */
  .ribbon{
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff; border-radius:1rem; border:1px solid rgba(255,255,255,.15);
  }
  .btn-brand{
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff; border:none;
  }
  .btn-brand:hover{ color:#fff; opacity:.95 }

  /* Small utilities */
  .soft-muted{ color:#64748b }
  .about-page h2{ font-weight:800; letter-spacing:-.3px }
  /* ==== Contact – Minimal Modern (Scoped to .contact-section) ==== */
  .contact-section{
    --brand:#2563eb;          /* primary */
    --brand-2:#06b6d4;        /* accent */
    --ink:#0b1020;            /* headings */
    --muted:#64748b;          /* body text */
    --line:#e5e7eb;           /* border */
    color:#0f172a;
  }

  /* Header */
  .contact-header{
    border:1px solid var(--line);
    border-radius:20px;
    padding:1.5rem;
    background:linear-gradient(180deg,#ffffff, #f8fafc);
  }
  .contact-kicker{
    display:inline-block; font-weight:600; font-size:.85rem;
    padding:.35rem .7rem; border-radius:999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff;
  }
  .contact-title{ font-weight:800; letter-spacing:-.3px; margin: .5rem 0 0 }
  .contact-sub{ color:var(--muted); margin: .25rem 0 0 }

  /* Cards */
  .contact-card{
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(2,8,23,.04);
  }

  /* Gradient outline style */
  .gradient-outline{
    position:relative; border:1px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg, var(--brand), var(--brand-2)) border-box;
    border-radius:18px;
  }

  /* Form */
  .contact-form .form-label{ font-weight:600; color:var(--ink) }
  .contact-form .form-control,
  .contact-form .form-select{
    border-radius:12px; border:1px solid var(--line);
    background:#fff;
  }
  .contact-form .form-control:focus,
  .contact-form .form-select:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
  }
  .hint{ font-size:.85rem; color:var(--muted) }

  /* Buttons */
  .btn-brand{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff; border:none; border-radius:12px;
  }
  .btn-brand:hover{ color:#fff; opacity:.95 }

  /* Info list */
  .info-item{
    display:flex; gap:.75rem; align-items:flex-start;
    padding:.9rem 1rem; border-radius:12px; border:1px dashed var(--line);
  }
  .info-item strong{ color:var(--ink) }
  .info-item small, .info-item span{ color:var(--muted) }

  /* Map */
  .map-wrap{ border:1px solid var(--line); border-radius:16px; overflow:hidden }

  /* Chips */
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .65rem; font-weight:600; font-size:.8rem;
    border-radius:999px; color:#075985;
    background:linear-gradient(180deg,#ecfeff,#e0f2fe); border:1px solid #bae6fd;
  }
  .contact-header.mb-4 {
    position: relative;
    background: radial-gradient(900px 400px at 10% 10%, rgba(37, 99, 235, .18), transparent 60%), radial-gradient(900px 400px at 90% 20%, rgba(6, 182, 212, .18), transparent 60%), linear-gradient(135deg, #0b1020 0%, #0e1326 60%, #0b1020 100%);
    border-radius: 1.25rem;
    overflow: hidden;
        color: white;
}
    .rounded-circle {
    border-radius: 50%; 
    object-fit: cover;! important;
}