body{
    font-family: "Noto Serif Devanagari", serif;
    margin:0;
    background:#f6f2ea;
    text-align:center;
}

header{
   
    padding:40px 20px;
    color:white;
}

header h1{
    font-size:48px;
    margin:10px 0;
}

header h2{
    font-size:28px;
    margin:0;
}
.header p{
    font-size:18px;
}

/* Main Container */

.container{
    max-width:900px;
    margin:auto;
    padding:40px 20px;
}

/* Event Card */

.event-card{
    background:white;
    border-radius:15px;
    border:3px solid #d4a000;
    padding:35px;
    box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

.event-title{
    font-size:34px;
    color:#8b0000;
    margin-bottom:15px;
}

.event-meta{
    font-size:18px;
    margin:10px 0;
}

.event-description{
    margin-top:20px;
    line-height:1.6;
    font-size:17px;
}

/* Button */

.button{
    margin-top:30px;
}

.button a{
    text-decoration:none;
    background:#2c67b1;
    color:white;
    padding:12px 28px;
    border-radius:6px;
    font-size:18px;
}

/* Back link */

.back{
    margin-top:30px;
}

.back a{
    text-decoration:none;
    color:#8b0000;
}

.venue{
    font-size:20px;
    color:#c30000;
    font-weight:bold;
    margin:20px 0;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.card{
    background:white;
    border-radius:15px;
    padding:25px;
    border:3px solid #d4a000;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.date{
    background:#1c4e8e;
    color:white;
    padding:8px;
    border-radius:8px;
    font-size:14px;
    margin-bottom:15px;
}

.title{
    font-size:26px;
    color:#8b0000;
    margin:10px 0;
    font-weight:bold;
}

.info{
    font-size:16px;
    margin:5px 0;
}

.button{
    margin-top:15px;
}

.button a{
    text-decoration:none;
    background:#2c67b1;
    color:white;
    padding:10px 20px;
    border-radius:6px;
    display:inline-block;
}

footer{
    margin:40px 0;
    font-size:14px;
    color:#444;
}
.col-md-12.logo_wrapper{padding-top:80px;}



```css
/* Tablet View */
@media (max-width: 1024px){

header h1{
    font-size:40px;
}

header h2{
    font-size:24px;
}

.venue{
    font-size:20px;
}

.grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* Mobile View */
@media (max-width: 768px){

header{
    padding:25px 15px;
}

header h1{
    font-size:32px;
}

header h2{
    font-size:20px;
}

.venue{
    font-size:18px;
    margin:20px 10px;
}

.container{
    /*width:95%;*/
}

.grid{
    grid-template-columns:1fr;
    gap:18px;
}

.card{
    padding:18px;
}

.title{
    font-size:22px;
}

.info{
    font-size:15px;
}

.date{
    font-size:13px;
}

.button a{
    display:block;
    /*width:100%;*/
    padding:12px;
    font-size:16px;
}

}

/* Small Mobile Devices */
@media (max-width: 480px){

header h1{
    font-size:26px;
}

header h2{
    font-size:18px;
}

.title{
    font-size:20px;
}

.info{
    font-size:14px;
}

}

.title h1{
      margin:0;
      font-size: 22px;
      letter-spacing:.2px;
    }
    .title p{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .pill{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(15,26,48,.55);
      border-radius: 14px;
      color: #fff;
      font-size: 13px;
      backdrop-filter: blur(8px);
      margin-bottom: 10px;
    }
    .gridnew{
      display:grid;
      grid-template-columns: 1.6fr .9fr;
      gap:16px;
    }
    .grid{
      display:grid;
      
      gap:16px;
    }
    @media (max-width: 900px){
      .grid{grid-template-columns:1fr}
    }
    .cardnew{
      background: rgba(15,26,48,.75);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      padding:16px;
      box-shadow: 0 20px 50px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
    }

    /* Screen */
    .screenWrap{
      margin: 6px 0 14px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
    }
    .screen{
      width: 70%;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(104,160,255,.0), rgba(104,160,255,.75), rgba(104,160,255,.0));
      box-shadow: 0 10px 35px rgba(104,160,255,.22);
    }
    .screenLabel{
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .7px;
      text-transform: uppercase;
    }

    /* Seat map */
    .seatMap{
      display:flex;
      flex-direction:column;
      gap: 14px;
      padding: 8px 4px 2px;
      overflow-x:auto;
    }
    .row{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 720px; /* helps feel like BMS; scrolls on small screens */
    }
    .rowLabel{
      width: 26px;
      color: var(--muted);
      font-weight: 600;
      text-align:center;
      flex: 0 0 auto;
    }
    .rowSeats{
      display:flex;
      gap: 8px;
      flex-wrap:nowrap;
      flex: 1 1 auto;
    }
    .aisle{
      width: 22px;
      flex: 0 0 auto;
    }

    .seat{
      position:relative;
      width: 30px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--seatBorder);
      background: var(--seat);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
      font-size: 11px;
      color: rgba(233,240,255,.85);
    }
    .seat.available{
      background: rgba(21,58,42,.35);
      border-color: rgba(44,194,107,.65);
    }
    .seat.selected{
      background: rgba(31,63,140,.65);
      border-color: rgba(104,160,255,.9);
      box-shadow: 0 10px 20px rgba(104,160,255,.18);
      transform: translateY(-2px);
    }
    .seat.booked{
      background: rgba(58,27,27,.55);
      border-color: rgba(255,107,107,.9);
      cursor:not-allowed;
      opacity:.75;
    }
    .seat:focus{
      outline: 2px solid var(--focus);
      outline-offset: 2px;
    }
    .seat:hover:not(.booked){
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      transform: translateY(-1px);
    }
    .seat small{
      position:absolute;
      bottom:-16px;
      font-size: 10px;
      color: var(--muted);
      display:none;
    }

    /* Legend */
    .legend{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top: 14px;
      padding-top: 10px;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .legendItem{
      display:flex;
      gap:8px;
      align-items:center;
      color: var(--muted);
      font-size: 12px;
    }
    .dot{
      width: 16px;
      height: 16px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,.18);
      background: var(--seat);
    }
    .dot.available{ background: rgba(21,58,42,.35); border-color: rgba(44,194,107,.65); }
    .dot.selected{ background: rgba(31,63,140,.65); border-color: rgba(104,160,255,.9); }
    .dot.booked{ background: rgba(58,27,27,.55); border-color: rgba(255,107,107,.9); }

    /* Right panel */
    .summary h2{
      margin:0 0 12px;
      font-size: 16px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom: 12px;
    }
    .field label{
      font-size: 12px;
      color: var(--muted);
    }
    .field input, .field select{
      padding: 11px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(11,18,32,.55);
      color: #fff!important;
      outline:none;
    }
    .field input::placeholder{color: #fff!important;}
    .kv{
      display:flex;
      justify-content:space-between;
      gap:10px;
      padding: 10px 0;
      border-bottom: 1px dashed rgba(255,255,255,.12);
      color: var(--muted);
      font-size: 13px;
    }
    .kv strong{color: var(--text); font-weight: 650;}
    .seatsList{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top: 8px;
    }
    .chip{
      border:1px solid rgba(104,160,255,.45);
      background: rgba(31,63,140,.35);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
    }
    .actions{
      margin-top: 14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    button{
      border:0;
      border-radius: 14px;
      padding: 12px 14px;
      cursor:pointer;
      font-weight: 650;
      letter-spacing:.2px;
    }
    .btnPrimary{
      background: linear-gradient(135deg, rgba(104,160,255,.95), rgba(44,194,107,.85));
      color: #061022;
      flex: 1 1 auto;
    }
    .btnGhost{
      background: transparent;
      color: var(--muted);
      border: 1px solid rgba(255,255,255,.16);
    }
    .note{
      margin-top: 10px;
      color: #222;
      font-size: 12px;
      line-height: 1.35;
    }
    .priceTag{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.14);
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }
    .cardnew.seeting {
  background: #f8b31b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.cardnew.summary {
  background: #f8b31b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.field input {
  color: #fff;
}
@media (max-width: 768px){

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

.logo_wrapper{
    text-align:center;
    padding-top:10px!important;
}

.logo_wrapper img{
    width:200px;
}

.auth-buttons{
    justify-content:center;
    padding-top: 20px!important;
}

.auth-buttons a{
    margin:5px;
    font-size:14px;
}

.venue{
    font-size:14px;
}

.title{
    font-size:18px;
}

.info{
    font-size:14px;
}
.btn-booking{
    padding:8px 15px;
    font-size:14px;
}

.container{
    padding-left:15px;
    padding-right:15px;
}

.row {
display: inherit !important;
    gap: 10px;
    min-width: 260px !important;
    background-size: contain !important;
}

.px20{
    margin-left :0 !important ;
}

}