:root{
      --brand:#ff7a00;
      --text:#0f172a;
      --muted:#64748b;
      --card:#ffffff;
      --border: rgba(15, 23, 42, .12);
    }

    body{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(900px 450px at 15% 15%, rgba(255,122,0,.16), transparent 60%),
        radial-gradient(900px 450px at 85% 20%, rgba(111,66,193,.14), transparent 60%),
        linear-gradient(180deg, #f8fafc, #ffffff);
      color: var(--text);
      overflow-x: hidden;
    }
    header {
    background: #fff;

    .header-wrapper {
        gap: 24px;
    }

    .header-group {
        display: flex;
        gap: 24px;
        align-items: center;
    }

    .header-item {
        text-align: center;
        padding: 0px 14px;
        min-width: 170px;
    }

    /* Default image style (circle) */
    .header-item img {
        height: 95px;                 /* 🔥 same height */
        width: 95px;
        object-fit: cover;
        border-radius: 50%;           /* 🔥 circle */
        margin-bottom: 10px;
        border: 3px solid #f1f1f1;
    }

    /* Logo stays rectangular */
    .logo-rect img {
        width: auto;
        height: 70px;
        border-radius: 0;
        border: none;
        object-fit: contain;
    }

    /* Center block logo */
    .header-center img {
        height: 85px;
        width: auto;
        border-radius: 0;
        border: none;
    }

    /* Text sizing */
    .header-item h6 {
        font-size: 18px;              
        font-weight: 700;
        margin-bottom: 4px;
        line-height: 1.35;
    }

    .header-item small {
        display: block;
        font-size: 16px; 
        line-height: 1.3;
        color: #444;
    }

    /* Center title more prominent */
    .header-center h6 {
        font-size: 18px;
        font-weight: 800;
    }

    /* Responsive */
    


}

    header, footer{
      background: rgba(255,255,255,.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    footer{
      border-top: 1px solid var(--border);
      border-bottom: none;
      margin-top: auto;
    }

    .muted{ color: var(--muted); }

    /* Main: exact remaining height + center */
    main{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
    }

    /* Card */
    .hero-card{
      width: 100%;
      max-width: 920px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(15,23,42,.12);
      overflow: hidden;
      position: relative;
      animation: fadeUp .75s ease both;
    }

    .hero-card::before{
      content:"";
      position:absolute;
      inset: -2px;
      background: linear-gradient(120deg,
        rgba(255,122,0,.14),
        rgba(111,66,193,.12),
        rgba(13,110,253,.10)
      );
      filter: blur(26px);
      opacity: .9;
      z-index: 0;
    }

    /* Hero-inner centered */
    .hero-inner{
      position: relative;
      z-index: 1;
      padding: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    @keyframes fadeUp{
      from{ transform: translateY(16px); opacity: 0; }
      to{ transform: translateY(0); opacity: 1; }
    }

    /* Logo */
    .logo-wrap{
      width: 96px;
      height: 96px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 10px 24px rgba(15,23,42,.10);
      animation: popIn .9s ease both;
    }
    .logo-wrap img{
      width: 62px;
      height: 62px;
      object-fit: contain;
    }
    @keyframes popIn{
      from{ transform: scale(.96); opacity: 0; }
      to{ transform: scale(1); opacity: 1; }
    }

    /* ====== BUTTONS (WHITE TEXT + MOVING) ====== */
    .action-btn{
      border: 0;
      border-radius: 16px;
      padding: 20px 16px;
      font-weight: 800;
      font-size: 1.05rem;
      color: #fff !important;               /* ✅ all buttons white text */
      letter-spacing: .2px;

      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      box-shadow: 0 14px 28px rgba(15,23,42,.12);
      position: relative;
      overflow: hidden;
    }

    /* Subtle shine sweep */
    .action-btn::after{
      content:"";
      position:absolute;
      top: -30%;
      left: -60%;
      width: 50%;
      height: 160%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      transform: rotate(18deg);
      transition: left .7s ease;
    }
    .action-btn:hover::after{
      left: 130%;
    }

    /* Hover lift */
    .action-btn:hover{
      transform: translateY(-4px) scale(1.01);
      filter: brightness(1.03);
      box-shadow: 0 20px 44px rgba(15,23,42,.18);
    }

    /* Floating/moving animation */
    @keyframes floatBtn{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-6px); }
    }

    /* Add different delays so all 3 don't move same time */
    .float-1{ animation: floatBtn 2.6s ease-in-out infinite; }
    .float-2{ animation: floatBtn 2.9s ease-in-out infinite; animation-delay: .2s; }
    .float-3{ animation: floatBtn 3.2s ease-in-out infinite; animation-delay: .35s; }

    /* Button gradients (all keep white text) */
    .btn-one{ background: linear-gradient(135deg, #ff8a00, #ff3d77); }
    .btn-two{ background: linear-gradient(135deg, #6f42c1, #00b4d8); }
    .btn-three{ background: linear-gradient(135deg, #0d6efd, #20c997); }

    /* Modal styling */
    .modal-content{
      border-radius: 16px;
      border: 1px solid rgba(15,23,42,.12);
    }

    @media (max-width: 575.98px){
      .hero-inner{ padding: 18px; }
      .logo-wrap{ width: 82px; height: 82px; border-radius: 16px; }
      .logo-wrap img{ width: 54px; height: 54px; }
      .action-btn{ padding: 18px 14px; font-size: 1rem; }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; }
    }


/*@media (min-width: 350px) and (max-width: 1199px) {
    header {
        .header-item{
            img {
                height: 70px;
                width: 70px;
                
            }
            h6{
                font-size: 14px;
            }
            small{
                font-size: 12px;
            }
        }
        .header-wrapper{
            gap:0px;
        }
        .logo-rect{
            img{
                width: 120px;
                height:100px;
            }
        }

    }
}*/

/*@media (max-width: 992.98px) {

    header {
        .header-wrapper {
            flex-direction: column;
            gap: 16px;
            align-items: center;
        }

        .header-group {
            flex-direction: column;
            gap: 16px;
            align-items: center;
        }

        .header-item {
            min-width: auto;      
            padding: 0;
            width: 100%;
        }

        .header-item img {
            height: 75px;
            width: 75px;
        }

        .logo-rect img {
            height: 60px;
            width: auto;
        }

        .header-center img {
            height: 70px;
        }

        .header-item h6 {
            font-size: 16px;
        }

        .header-item small {
            font-size: 14px;
        }
    }
}*/
/*

@media screen
  and (min-width: 1000px)
  and (max-width: 1200px)
  and (min-height: 1700px)
  and (orientation: portrait) {

  header {
    padding: 10px 0;
  }

  .header-wrapper {
    flex-wrap: nowrap !important;
    text-align: center;
  }

  .header-group {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .header-item {
    text-align: center;
    max-width: 180px;
  }

  .header-item img {
    width: 90px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px; 
    margin-bottom: 6px;
  }

  .logo-rect img {
    width: 120px;
    height: auto;
    object-fit: contain;
  }

  .main-logo img {
    width: 90px;
    height: 110px;
  }

  .header-center {
    max-width: 260px;
  }

  .header-center img {
    width: 110px;
    height: auto;
    margin-bottom: 6px;
  }

  h6 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
  }

  small {
    font-size: 13px;
    display: block;
    line-height: 1.2;
  }
}
*/

/* =========================
   DEFAULT (DESKTOP / KIOSK BASE)
========================= */
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-item {
  text-align: center;
}

.header-item img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.logo-rect img {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.header-center img {
  width: 110px;
  height: auto;
}

/* =========================
   KIOSK – FULL HD PORTRAIT
========================= */

/* =========================
   MOBILE ONLY
========================= */


@media (min-width: 576px) and (max-width: 1365px) {

    header {

        /* container ko thoda zyada usable width */
        .container {
            max-width: 100%;
            padding-left: 4px;
            padding-right: 4px;
        }

        .header-wrapper {
            gap: 8px;
            flex-wrap: nowrap !important;
        }

        .header-group {
            gap: 8px;
            flex-wrap: nowrap;
        }

        .header-item {
            min-width: 95px;        /* 🔥 aur compact */
            padding: 0 4px;
            flex-shrink: 0;
        }

        /* Default image (circle) */
        .header-item img {
            height: 40px;           /* 🔥 image aur chhoti */
            width: 40px;
            margin-bottom: 3px;
            border-width: 1px;
        }

        /* Rectangular logo */
        .logo-rect img {
            height: 32px;
        }

        /* Center block logo */
        .header-center img {
            height: 38px;
        }

        /* Text */
        .header-item h6 {
            font-size: 11px;
            line-height: 1.15;
            white-space: nowrap;
        }

        .header-item small {
            font-size: 10px;
            line-height: 1.15;
            white-space: nowrap;
        }

        .header-center h6 {
            font-size: 12px;
        }
    }
}