/* ---------- Easy customization ---------- */
  :root{
    --banner-height: 360px;          /* change this for taller/shorter banner */
    --bg-start: #1b0a2a;             /* dark purple */
    --bg-end: #5a0b2e;               /* deep magenta */
    --accent: #ffbf00;               /* gold */
    --accent-2: #ff6b6b;             /* warm red */
    --card-bg: rgba(255,255,255,0.06);
    --text-color: #fff;
    --brand-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  /* Overlay */
  .modalo-overlay {
    position: fixed; inset:0;

    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    visibility:hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index:1000;
  }
  .modalo-overlay.active {
    opacity:1;
    visibility:visible;
  }

  /* Modal content */
  .modalo-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(120deg,#1b0a2a,#5a0b2e 70%);
    transform: translateY(40px);
    opacity:0;
    transition: all 0.4s ease;
  }
  .modalo-overlay.active .modalo-content {
    transform: translateY(0);
    opacity:1;
  }

  /* Close button */
  .close-btn {

    top:12px; right:16px;
    font-size:22px;
    background: rgba(0,0,0,0.5);
    color:#fff;
    border:none; border-radius:50%;
    width:34px; height:34px;
    cursor:pointer;
  }

  /* Banner content */
 .bannero {
    width:100%;
    min-height:var(--banner-height);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position:relative;
    overflow:hidden;
    border-radius:14px;
    background: radial-gradient(1200px 400px at 10% 10%, rgba(255,191,0,0.06), transparent 10%),
                linear-gradient(120deg,var(--bg-start), var(--bg-end) 70%);
    box-shadow: 0 12px 30px rgba(20,8,30,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
  }

  /* decorative soft glow shapes */
  .bannero::before, .bannero::after {
    content:"";
    position:absolute;
    pointer-events:none;
    filter: blur(40px);
    opacity:0.35;
  }
  .bannero::before {
    width:500px;height:500px;
    background: radial-gradient(circle at 30% 30%, rgba(255,191,0,0.18), transparent 20%);
    left:-120px; top:-80px;
  }
  .bannero::after {
    width:420px;height:420px;
    background: radial-gradient(circle at 70% 70%, rgba(255,107,107,0.12), transparent 18%);
    right:-120px; bottom:-60px;
  }

  /* Content container */
  .containero {
    max-width:1200px;
    width:100%;
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:24px;
    align-items:center;
    padding:24px;
    z-index:2;
  }

  /* Left: text details */
  .lefto {
    color:var(--text-color);
  }
  .kickero {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(90deg, rgba(255,191,0,0.12), rgba(255,107,107,0.06));
    padding:8px 12px;
    border-radius:999px;
    font-weight:600;
    letter-spacing:0.3px;
    font-size:14px;
    width:max-content;
    margin-bottom:16px;
  }
  .kickero svg {width:18px;height:18px;display:block}

  h1o {
    margin:0 0 12px 0;
    font-size: clamp(24px, 4.2vw, 40px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-0.02em;
    text-shadow: 0 6px 20px rgba(0,0,0,0.45);
  }
  .offero {
    font-size: clamp(28px, 6.2vw, 52px);
    font-weight:900;
    color:var(--accent);
    margin:0 0 12px 0;
    letter-spacing:-0.02em;
    display:flex;
    gap:12px;
    align-items:baseline;
  }
  .offero small {
    font-size:16px;color:rgba(255,255,255,0.9);font-weight:700;
    background: linear-gradient(90deg, rgba(255,191,0,0.06), transparent);
    padding:6px 10px;border-radius:8px;
  }
  p.leado {
    margin:0 0 16px 0;
    color:rgba(255,255,255,0.9);
    font-size:16px;
    max-width:620px;
  }

  .ctao-row {display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .btno {
    border:0;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.3);backdrop-filter: blur(4px);
  }
  .btno-primary {
    background:linear-gradient(90deg,var(--accent), #ffd24d);
    color:#1b0a2a;
  }
  .btno-ghost {
    background:transparent;color:var(--text-color);border:1px solid rgba(255,255,255,0.08)
  }

  /* Right: diya card */
  .cardo {
    background:var(--card-bg);
    padding:18px;
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:14px;
    justify-content:center;
    flex-direction:column;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    transform: translateY(0);
    transition: transform 300ms ease;
  }
  .cardo:hover { transform: translateY(-6px) }

  /* diya artwork */
  .diyao {
    width:220px;height:160px;display:block;
  }

  /* animated sparkles behind diya */
  .sparkleso {
    position:absolute; left:50%; transform:translateX(-50%); top:18px;
    width:100%; height:100%; pointer-events:none;
    z-index:1;
  }
  .sparkleo {
    position:absolute; width:8px;height:8px;border-radius:50%;
    background:var(--accent); opacity:0; transform:scale(0.7);
    box-shadow: 0 0 8px rgba(255,191,0,0.9);
    animation: sparkleo 2.8s linear infinite;
  }
  @keyframes sparkleo {
    0% {opacity:0; transform: translateY(20px) scale(0.2)}
    10% {opacity:1}
    50% {opacity:0.9; transform: translateY(-40px) scale(1.05)}
    100% {opacity:0; transform: translateY(-120px) scale(0.2)}
  }

  /* subtle glowing flame animation in svg */
  @keyframes flickero {
    0% { transform: translateY(0) scaleY(1); opacity:1 }
    50% { transform: translateY(-2px) scaleY(0.98); opacity:0.95 }
    100% { transform: translateY(0) scaleY(1); opacity:1 }
  }
  .flameo { transform-origin:center; animation: flickero 1s ease-in-out infinite }

  /* responsive */
  @media (max-width:980px) {
    .containero {grid-template-columns:1fr; text-align:center;}
    .cardo {margin:0 auto;}
    .sparkleso {top:0}
  }

  /* small tag */
  .termso { font-size:12px; color:rgba(255,255,255,0.65); margin-top:10px }


/* Extra small screens (phones < 480px) */
@media (max-width: 480px) {
  .modalo-content {
    width: 95%;
  }

  .containero {
    padding: 12px;
    gap: 12px;
  }
   p.leado {
   
   display: none;
   
   }
  .cardo {
    width: 90%;
  }

  .offero {
    font-size: clamp(18px, 4.5vw, 32px);
  }

  h1o {
    font-size: clamp(18px, 4.5vw, 28px);
  }

  .btno {
    padding: 8px 12px;
    font-size: 13px;
  }

  .kickero {
    font-size: 11px;
    padding: 4px 8px;
  }
}