:root{
  --bg:#070a12; --bg2:#0b1222; --fg:#eaf0ff; --muted:#9aa7bd;
  --royal:#214bff; --royal2:#2a68ff; --gold:#f7d048;
  --card:#0e192b; --radius:18px; --shadow:0 24px 80px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--fg);
  font-family:'Poppins','Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1000px 700px at -10% -20%, rgba(33,75,255,.18), transparent),
    radial-gradient(1100px 700px at 110% 10%, rgba(247,208,72,.10), transparent),
    linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100%;
}
a{color:#e9f2ff;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Loader */
#loader{position:fixed;inset:0;background:linear-gradient(180deg,#060a12,#0a1324);display:flex;align-items:center;justify-content:center;z-index:100}
.spinner{width:94px;height:94px;border-radius:50%;border:3px solid rgba(247,208,72,.25);border-top-color:var(--gold);animation:spin 1.1s linear infinite;box-shadow:0 0 40px rgba(247,208,72,.25)}
@keyframes spin{to{transform:rotate(360deg)}}
#loader .word{position:absolute;font-family:'Space Grotesk',sans-serif;letter-spacing:.3em;color:#fff;opacity:.7}

/* Header */
.header{position:sticky;top:0;z-index:60;background:rgba(7,12,20,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:14px;position:relative}
.user-pill{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:8px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:.95rem;
  font-weight:600;
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#2a68ff,#22c1ff);color:#001122;font-weight:800}
.logo-text{font-family:'Space Grotesk',sans-serif}

/* Top center nav */
.nav-links{display:flex;gap:12px;align-items:center}
.nav-links a{
  padding:.55rem .85rem;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);transition:transform .25s, box-shadow .25s, background .25s;
}
.nav-links a:hover{transform:translateY(-2px) scale(1.03); background:rgba(255,255,255,.06); box-shadow:0 8px 30px rgba(0,0,0,.25)}
.actions-right .btn{margin-left:8px}

/* Buttons — WATER + GOLD SHINE */
.btn{
  position:relative;display:inline-block;padding:.78rem 1.05rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow); overflow:hidden; transform:translateZ(0);
  transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s;
}
.btn.sm{padding:.48rem .8rem;font-size:.92rem}
.btn.outline{background:transparent}
.btn.cta{
  color:#1a1200; font-weight:800;
  background:linear-gradient(90deg,#ffd86a,#ffeb99);
  border-color:rgba(255,217,106,.55);
  box-shadow:0 10px 40px rgba(255,217,106,.28), inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn::before{
  /* watery sheen strip */
  content:""; position:absolute; inset:-40% -60% -40% -60%;
  background:
    radial-gradient(120px 60px at var(--x,120%) 10%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.18), transparent 40%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn::after{
  /* golden glow behind */
  content:""; position:absolute; inset:-20%; border-radius:20px;
  background:radial-gradient(600px 120px at 50% 120%, rgba(247,208,72,.18), transparent 60%);
  opacity:.0; transition:opacity .26s ease;
}
.btn:hover{
  transform:scale(1.08); border-color:rgba(255,255,255,.35);
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 80px rgba(247,208,72,.22);
}
.btn:hover::before{ transform:translateX(120%) }
.btn:hover::after{ opacity:1 }
/* --- DUBAI ROYAL LUXURY MODE --- */

/* Drawer luxury open effect */
.drawer {
  transform: translateX(40px) scale(.96);
  opacity: 0;
  transition: all .35s cubic-bezier(.25, .8, .25, 1);
}
.drawer.open {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Golden shimmering border glow inside drawer */
.drawer::before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,215,100,.18);
  border-radius:14px;
  pointer-events:none;
  animation:borderGlow 3s infinite;
}
@keyframes borderGlow {
  0%{opacity:.3}
  50%{opacity:.7}
  100%{opacity:.3}
}

/* Gold dust floating background */
.gold-dust {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,215,100,.8), transparent 60%),
    radial-gradient(2px 2px at 80% 70%, rgba(255,215,100,.65), transparent 60%),
    radial-gradient(2px 2px at 60% 10%, rgba(255,215,100,.45), transparent 60%),
    radial-gradient(2px 2px at 40% 90%, rgba(255,215,100,.5), transparent 60%);
  opacity: .25;
  animation: dustMove 9s linear infinite;
}
@keyframes dustMove {
  0%{transform:translateY(0)}
  100%{transform:translateY(-80px)}
}

/* Hero title gold aura pulse */
.title-glow {
  animation: goldpulse 4s infinite;
}
@keyframes goldpulse {
  0% { filter: drop-shadow(0 0 0px gold); }
  50% { filter: drop-shadow(0 0 15px gold); }
  100% { filter: drop-shadow(0 0 0px gold); }
}

/* Magnetic button hover for royal feel */
.btn:hover {
  transform: scale(1.12) translateY(-2px);
}

/* Premium blur backdrop */
.backdrop.show {
  backdrop-filter: blur(12px) brightness(.8);
  background: rgba(0,0,0,.35);
}

/* Burger & Drawer */
.burger{background:transparent;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:.25s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger { margin-left: 8px; }

.drawer{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100%;
  background:rgba(12,18,32,.96);
  backdrop-filter:blur(12px);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  transition:right .3s ease;
  z-index:70;
}
.drawer.open{right:0;}

.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);display:none;z-index:65}
.backdrop.show{display:block}
.close{background:transparent;border:0;color:#fff;font-size:26px;margin-left:auto;cursor:pointer}
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-links{display:flex;flex-direction:column;padding:8px}
.drawer-links a{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.06);margin:6px 0;background:rgba(255,255,255,.02);transition:transform .25s, background .25s}
.drawer-links a:hover{transform:scale(1.03); background:rgba(255,255,255,.06)}
.drawer-links a span{margin-right:8px}
.drawer-sub{margin:12px 4px 6px;color:var(--muted);font-weight:700}

/* Hero */
.hero{position:relative;padding:96px 0 40px;overflow:hidden}
.title{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,7vw,64px);line-height:1.06;margin:0 0 10px;background:linear-gradient(90deg,#fff,#cde4ff 35%,#ffd98a 75%,#fff);-webkit-background-clip:text;color:transparent}
.title-glow{background:linear-gradient(90deg,#ffd976,#fff);-webkit-background-clip:text;color:transparent}
.kicker{display:inline-block;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);color:#9fb0cc;margin-bottom:10px}
.sub{font-size:1.08rem;color:#c9d6ea;max-width:820px;margin:8px 0 16px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Sections & Cards */
.sec{padding:46px 0}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:32px;margin:0 0 12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* Base card */
.card{
  background:rgba(14,25,43,.72); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:18px; position:relative; overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
  background:linear-gradient(135deg,rgba(42,104,255,.28),rgba(247,208,72,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.45); border-color:rgba(255,255,255,.18)}
.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.thumb{height:180px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0b1220}
.thumb img{width:100%;height:100%;object-fit:cover;opacity:.92;transform:scale(1.02);transition:.35s}
.card:hover .thumb img{transform:scale(1.06);opacity:1}
.card .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* PILLARS — super alignment */
.pillars .card{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-height:190px;
}
.pillar-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.pillar-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(42,104,255,.25), rgba(247,208,72,.25));
  border:1px solid rgba(255,255,255,.16); filter:drop-shadow(0 10px 30px rgba(0,0,0,.25));
}
.pillar-icon span{font-size:26px}

/* Footer */
.footer{margin-top:48px;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,10,15,.55);backdrop-filter:blur(8px)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:22px 0}
.foot-title{font-weight:700;font-size:1.1rem}
.foot-sub{font-weight:700;color:#e8edf7;margin-bottom:8px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:6px 0}

/* Watermark background */
body::before{
  content:"";position:fixed;top:45%;left:50%;width:760px;height:760px;transform:translate(-50%,-50%);
  background:url('/assets/img/logo-watermark.png') no-repeat center/contain;opacity:.08;pointer-events:none;z-index:0
}
header,main,footer{position:relative;z-index:1}

/* Forms */
.form label{display:block;margin:.5rem 0 .35rem;font-weight:600}
.form input,.form textarea{width:100%;padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(16,22,36,.6);color:#fff}

/* Floating WhatsApp — premium */
.float-wa{
  position:fixed;bottom:18px;right:18px;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6cff9b, #1bd741);
  display:grid;place-items:center;color:#04120a;font-weight:800;
  box-shadow:0 18px 40px rgba(27,215,65,.35);z-index:65;
  transition:transform .25s ease, box-shadow .25s ease;
}
.float-wa:hover{transform:translateY(-2px) scale(1.05); box-shadow:0 26px 60px rgba(27,215,65,.45)}
.float-wa::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(27,215,65,.35); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{from{transform:scale(.9);opacity:.8} to{transform:scale(1.2);opacity:0}}

/* Reveal on scroll */
.reveal{transform:translateY(12px);opacity:0}
.revealed{transform:none;opacity:1;transition:all .6s cubic-bezier(.2,.7,.2,1)}

/* Responsive */
@media (max-width:1200px){ .nav{gap:8px} .nav-links{display:none} } /* mobile pe center nav hide, drawer use */
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:768px){
  .grid-3,.cards,.grid-2{grid-template-columns:1fr}
  body::before{width:360px;height:360px;opacity:.12}
}
/* Footer */
.footer {
  padding: 35px 8%;
  background: #050b14;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-col {
  width: 28%;
  min-width: 220px;
}

.footer-col h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: gold;
}

.footer-col p {
  margin-bottom: 8px;
  font-size: 14px;
  opacity: 0.85;
}

.footer-col a {
  display: inline-block;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: .3s ease-in-out;
}

/* Hover Glass + Gold + Zoom Effect */
.footer-col a:hover {
  color: gold;
  background: rgba(255, 215, 0, 0.08);
  backdrop-filter: blur(6px);
  transform: scale(1.12);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.45), 
              inset 0 0 6px rgba(255, 215, 0, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.35);
}

/* Icons before Insta/FB links */
.social-icon {
  font-weight: 600;
  margin-top: 5px;
}

.ig::before {
  content: "📸 ";
}

.fb::before {
  content: "📘 ";
}

/* Mobile Responsive */
@media(max-width: 768px) {
  .footer {
    padding: 25px 5%;
  }

  .footer-col {
    width: 100%;
  }
}
/* --- GLOBAL HEADER FIX --- */

/* Make the nav container relative so center positioning works */
.nav {
  position: relative;
}

/* Center user pill globally (desktop) */
.user-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
}

/* By default mobile label hide rahe */
.user-label-mobile {
  display: none;
}

/* Netflix-style header for mobile */
@media (max-width: 768px) {

  /* Header thora compact row ban jayega */
  .nav {
    height: auto;
    padding: 8px 0;
    gap: 8px;
  }

  /* Center pill sirf desktop ka hai, mobile par hide */
  .user-pill {
    display: none;
  }

  /* New mobile label (For Ibrahim) show */
  .user-label-mobile {
    display: flex;
    align-items: center;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }

  .user-label-mobile .label-prefix {
    opacity: 0.7;
    font-size: 13px;
    margin-right: 4px;
  }

  .user-label-mobile .label-name {
    font-weight: 600;
  }

  /* Left side: logo + “For Ibrahim” ek line me */
  .logo {
    display: flex;
    align-items: center;
  }

  /* Right side buttons Netflix jaisi tight row */
  .mini-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mini-actions .btn.sm,
  .mini-actions .btn.outline.sm {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* === DZ Glass Calendar – Flatpickr override (desktop + mobile dono) === */

.flatpickr-calendar {
  background: radial-gradient(circle at top left, #1f2937 0%, #020617 60%, #000 100%);
  border-radius: 18px;
  border: 1px solid rgba(248, 250, 252, 0.14);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* arrow wali side ko bhi glass border */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border: none;
}

/* Month heading bar */
.flatpickr-months {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(15, 23, 42, 0.95));
  color: #f9fafb;
}

.flatpickr-current-month {
  font-weight: 600;
  font-size: 14px;
}

.flatpickr-current-month .numInput.cur-year {
  color: #facc15;
}

/* Weekdays row */
.flatpickr-weekdaycontainer {
  background: transparent;
}

span.flatpickr-weekday {
  color: #9ca3af;
  font-weight: 500;
  font-size: 11px;
}

/* Normal days */
.flatpickr-day {
  color: #e5e7eb;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
}

/* Hover effect */
.flatpickr-day:hover {
  background: radial-gradient(circle at top, rgba(250, 204, 21, 0.12), rgba(15, 23, 42, 0.9));
  border-color: rgba(250, 204, 21, 0.5);
  color: #fefce8;
}

/* Today */
.flatpickr-day.today {
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.75);
  color: #facc15;
  font-weight: 600;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: radial-gradient(circle at top, #facc15, #eab308);
  color: #111827;
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow:
    0 0 25px rgba(250, 204, 21, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

/* Disabled / other month */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #4b5563;
  opacity: 0.5;
}

/* Input khud ka neon glass look */
.dob-wrapper input {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.95));
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.9);
}

.dob-wrapper input:focus {
  outline: none;
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.7),
    0 16px 40px rgba(15, 23, 42, 0.95);
}


  /* New mobile label (For Ibrahim) show */
  .user-label-mobile{
    display:flex;
    align-items:center;
    margin-left:12px;
    font-size:16px;
    font-weight:600;
    color:#fff;
  }

  .user-label-mobile .label-prefix{
    opacity:0.7;
    font-size:13px;
    margin-right:4px;
  }

  .user-label-mobile .label-name{
    font-weight:600;
  }

  /* Left side: logo + “For Ibrahim” ek line me */
  .logo{
    display:flex;
    align-items:center;
  }

  /* Right side buttons Netflix jaisi tight row */
  .mini-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .mini-actions .btn.sm,
  .mini-actions .btn.outline.sm{
    padding:6px 10px;
    font-size:13px;
  }
  /* === DZ Glass Calendar – Flatpickr override === */

.flatpickr-calendar {
  background: radial-gradient(circle at top left, #1f2937 0%, #020617 60%, #000 100%);
  border-radius: 18px;
  border: 1px solid rgba(248, 250, 252, 0.14);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* arrow wali side ko bhi glass border */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border: none;
}

/* Month heading bar */
.flatpickr-months {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(15, 23, 42, 0.95));
  color: #f9fafb;
}

.flatpickr-current-month {
  font-weight: 600;
  font-size: 14px;
}

.flatpickr-current-month .numInput.cur-year {
  color: #facc15;
}

/* Weekdays row */
.flatpickr-weekdaycontainer {
  background: transparent;
}

span.flatpickr-weekday {
  color: #9ca3af;
  font-weight: 500;
  font-size: 11px;
}

/* Normal days */
.flatpickr-day {
  color: #e5e7eb;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
}

/* Hover effect */
.flatpickr-day:hover {
  background: radial-gradient(circle at top, rgba(250, 204, 21, 0.12), rgba(15, 23, 42, 0.9));
  border-color: rgba(250, 204, 21, 0.5);
  color: #fefce8;
}

/* Today */
.flatpickr-day.today {
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.75);
  color: #facc15;
  font-weight: 600;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: radial-gradient(circle at top, #facc15, #eab308);
  color: #111827;
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow:
    0 0 25px rgba(250, 204, 21, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

/* Disabled / other month */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #4b5563;
  opacity: 0.5;
}
.dob-wrapper input {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.95));
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.9);
}
.dob-wrapper input:focus {
  outline: none;
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.7),
    0 16px 40px rgba(15, 23, 42, 0.95);
}
}