@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
   * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: "Quicksand", sans-serif;
}
a {
  text-decoration: none;
  color: #fff;
}
.butonii:hover {
  background: #2A2A2A;
}
.butonii {
 display: inline-block;
  padding: 15px 25px;
 font-weight:600;
  border-radius: 10px;
  border:3px solid #800000;
  cursor: pointer;
}
li{
  padding-top: 15px;
}
ul {
  list-style: none;
}

#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  width: 100%;
  background-color: black;
  font-family: "Quicksand", sans-serif;
}

#navbar img {
  padding-top: 10px;
  width: 80px;
  height: auto;
  margin-left: 80px;
}

nav ul {
  display: flex;
  margin-right: 100px;
}

nav ul li a {
  padding: 15px 20px;
  font-weight: 600;
}

nav ul li a:hover {
  border-bottom: 2px solid #e4b95b;
}

   body {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
      .center {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
      #0F0F0F;
      }
      .tickets {
        width: 550px;
        height: fit-content;
        border: 0.4mm solid rgba(0, 0, 0, 0.08);
        border-radius: 3mm;
        box-sizing: border-box;
        padding: 10px;
        max-height: 96vh;
        overflow: auto;
        background: #000;
        box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
      }
      .ticket-selector {
        background:#2A2A2A ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        box-sizing: border-box;
        padding: 20px;
      }
      .head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
      }
      .title {
        font-size: 25px;
        font-weight: 600;
        color: #C4C4C4


;
      }
      .seats {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 150px;
        position: relative;
      }
      .status {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      .seats::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 220px;
        height: 7px;
        border-radius: 0 0 3mm 3mm;
        border-top: 0.3mm solid rgb(180, 180, 180);
      }
      .item {
        font-size: 15px;
        position: relative;
        color: #C4C4C4
;
      }
      .item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -12px;
        transform: translate(0, -50%);
        width: 10px;
        height: 10px;
        background: rgb(180, 180, 180);
        outline: 0.2mm solid rgb(120, 120, 120);
        border-radius: 0.3mm;
      }
      .item:nth-child(2)::before {
        background: #000;
        outline: none;
      }
      .item:nth-child(3)::before {
        background: #860303;
        outline: none;
      }
      .all-seats {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 15px;
        margin: 60px 0;
        margin-top: 20px;
        position: relative;
      }
      .seat {
        width: 20px;
        height: 20px;
        background: #000;
        border-radius: 0.5mm;
        outline: 0.3mm solid rgb(180, 180, 180);
        cursor: pointer;
      }
      .all-seats input:checked + label {
        background: #860303;
        outline: none;
      }
      .seat.booked {
        background: rgb(180, 180, 180);
        outline: none;
      }
      input {
        display: none;
      }
      .timings {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
      }
      .dates {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .dates-item {
        width: 50px;
        height: 50px;
        background: #000;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 10px 0;
        border-radius: 2mm;
        cursor: pointer;
        color:#C4C4C4;
      }
      .day {
        font-size: 12px;
      }
      .times {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
      }
      .time {
        font-size: 14px;
        width: fit-content;
        padding: 7px 14px;
        background: #C4C4C4;
        border-radius: 2mm;
        cursor: pointer;
      }
      .timings input:checked + label {
        background: #800000
;
        color: white;
      }
      .price {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#C4C4C4;
      }
      .total {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        color:#C4C4C4;
      }
      .total span {
        font-size: 11px;
        font-weight: 400;
      }
      .price button {
        background: rgb(60, 60, 60);
        color: white;
        font-family: poppins;
        font-size: 14px;
        padding: 7px 14px;
        border-radius: 2mm;
        outline: none;
        border: none;
        cursor: pointer;
      }
.footer{
    background-color: #111010;
    padding: 70px 0;
     font-family: "Quicksand", sans-serif;
     border:0.5px solid #000;
}
      .footer1{
   width: 25%;
   padding: 0 15px;
}
.footer1 h4{
    font-size: 18px;
    color: #fff;
    margin-bottom: 35px;
    font-weight: 700;
    position: relative;
}
.footer1 h4::before{
    content: '';
    position: absolute;
    left:0;
    bottom: -10px;
    background-color: #800000;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.footer1 ul li:not(:last-child){
    margin-bottom: 10px;
}
.footer1 ul li {
    font-size: 16px;
    text-decoration: none;
    font-weight: 300;
    color: #bbb;
    display: block;
    transition: all 0.3s ease;
}
.footer1 ul li a:hover{
    color: #fff;
    padding-left: 8px;
    transition: all 0.3s ease;
}
.footer1 .social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: #ffffff20;
    margin:0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.footer1 .social-links a:hover{
    color: #24262b;
    background-color: #fff;
}
.row{
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 768px) {
  #navbar {
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  #navbar img {
    margin-left: 0;
    margin-bottom: 20px;
  }

  nav ul {
    margin-right: 0;
  }

  nav ul li {
    margin: 10px 0;
  }

  nav ul li a {
    padding: 10px 15px;
  }
}