nav{
  position:fixed;
  z-index:1;
  right:0;
  background-color:;
  display:flex;
  flex-direction:row;
  justify-content:right;
  top:2px;
}
   h1{
    font-weight:900;
    font-size:25px;
    margin-right:17vw;
    margin-top:1.5vh;
    text-align:center;
    display:inline-block;
    color:silver;
   }
  .back{
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    background-color:#0A0A0A96;
    background-size:cover;
    background-position:center;
    height:7.5vh;
    padding-left:1vw;
    border-radius:45px;
    border-style:solid;
    border-width:2px;
    border-color:black;
  }
    .icon{
      position: relative;
      margin-top:-5.7vh;
      z-index:1;
    }
    .round{
      position: absolute;
      top:-1.7vh;
      right:0.3vw;
      width:15vw;
      height:6.8vh;
      border-style:solid;
      border-color:black;
      border-radius:60px;
      border-width:3px;
      background-color:#0A0A0AA8;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:5px;
      text-shadow:0 0 5px white;
      z-index:2;
    }
    .line{
      height:7px;
      width:30px;
      border-style:solid;
      border-width:1.5px;
      border-color:white;
      border-radius:8px;
      background-color:white;
      box-shadow: 0 0 1px black;
      z-index:3;
    }
    .menu-items {
      width:220px;
      padding-left:3vw;
      background-color:#0A0A0AA8;
      border-color:black;
      border-style:solid;
      border-width:2px;
      border-radius:30px 30px 30px 30px ;
      display: flex;
      flex-direction:column;
      justify-content:end;
      align-items:start;
      position: absolute;
      font-weight:900;
      right:-0.5vw;
      top:-0.5vh;
      gap:10px;
      z-index:2;
      visibility:hidden;
    }
.empty{
  height:7vh;
}
/* Styling for the menu links */
    .menu-items a {
      /*width:215px;*/
      margin-right:-20px;
      text-decoration: none;
      background-color:;
      text-shadow:1px 1px 2px black;
      color:#F38B26;
      font-size: 18px;
    }

  /* ✅ General bottom nav styling */
.bottom-nav {
  position:sticky;
  bottom:0;
  left:1vw;
  width:100%;
  z-index: 999;
}

/* 🔸 Collapsed booking box */
.book-box {
  position: fixed;
  bottom:0;
  left:1vw;
  width:80vw;
  height:7.5vh;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-radius:30px;
  //background-color:black;
  overflow: hidden;
  text-align: center;
  transition: all 0.4s ease;
  color: #fff;
}

/* 🔸 Expanded mode */
.book-box.active {
  height: 82vh;
  width:98vw;
  background: rgba(0, 0, 0, 0.85);
  border-color:black;
  border-width:3px;
  border-radius:28px 28px 30px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 🔸 Close button */
.x {
  position: absolute;
  right:0.5vw;
  top:0;
  background:#0A0A0A94;
  border: 2px solid black;
  color: red;
  border-radius: 50%;
  width:14vw;
  height:6.5vh;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
}
.bottom{
  width:98vw;
  position:fixed;
  bottom:0;
  display:flex;
  flex-direction:row;
  gap:1vw;
}

/* 🔸 Book Now Button */
.book-now {
  height: 7.5vh;
  position: fixed;
  bottom:0;
  left:1vw;
  border-radius: 40px;
  border: 2px solid black;
  background-color:#0A0A0A94;
  backdrop-filter: blur(6px);
  color:silver;
  font-size:2.4rem;
  font-weight: 900;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}
.insta{
  bottom:0;
  width:16vw;
  height:7.5vh;
  //border:solid 2px black;
  border-radius:50%;
}
.insta{
  margin-left:64%;
}

.instagram{
  width:16vw;
  height:7.5vh;
}


/*facebook up down pngs animation*/
.extra {
  height:7.5vh;
  width:17vw;
  position: fixed;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  //background-color:black;
  border-radius:30px;
  bottom:0;
  right:0;
  transition: all 0.5s ease;
  display:flex;
  flex-direction: column;
  //margin-right:1.8vw;
}
.facebook {
  bottom:0;
  width:17vw;
  height:7.5vh;
  border-radius: 50%;
  transition: all 1s ease;
}
.middle-box{
  display:flex;
  flex-direction: column;
  align-self:center;
  gap:1.4vw;
  border-radius:30px;
}
.pngs{
  width:17vw;
  height:7.5vh;
  object-fit:cover;
  background-color:;
}
.up,.down{
  width:16.5vw;
  height:7.5vh;
  display:flex;
  flex-direction:row;
  gap:2.5vw;
  justify-content:center;
  border:solid 3px silver;
  background-color:#000000D4;
  border-radius:60px;
}
.left-line,.right-line{
  margin-top:1vh;
  width:2vw;
  height:4vh;
  border:solid 2px silver;
  background-color:silver;
  border-radius:18px 18px 0 0;
}
.left-line{
  transform:rotate(45deg);
}
.right-line{
    transform:rotate(-45deg);

}
.call-png{
  width:17vw;
  height:7.5vh;
  border:solid 3px silver;
  border-radius:30px;
}
.youtube-png{
  width:17vw;
  height:7.5vh;
}


/* Middle-box hidden inside */
.middle-box {
  overflow: hidden;
  height:0; /* initially invisible */
  opacity: 0;
  transition:all 0.9s ease;
}

/* When animation triggers */
.extra.active {
  height:40vh; /* increase height container */
  transition:all 0.9s ease;
}

/* show middle-box as height grows */
.extra.active .middle-box {
  height:40vh; /* reveal area */
  opacity: 1;
  transition:all 0.9s ease;
}



/* 🔸 Hide inner content initially */
.x,
label,
h4,
#date,
input,
.booking-desc {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 🔸 When active show form */
.book-box.active .x,
.book-box.active label,
.book-box.active h4,
.book-box.active #date,
.book-box.active input,
.book-box.active .booking-desc {
  visibility: visible;
  opacity: 1;
}
.booking-title {
  color: orange;
  font-size: 1.3rem;
  margin-top: 14%;
}

.car-title {
  color: #00ffe5;
  font-size: 1.1rem;
  margin-top: 15px;
}

.note {
  font-size: 0.95rem;
  color: #ccc;
  margin-top: 10px;
  font-style: italic;
}

.a-call {
  font-size: 20px;
  font-weight: 900;
  text-decoration:none;
}

hr {
  background-color: yellowgreen;
  border: solid 2px yellowgreen;
  border-radius: 8px;
  width: 90vw;
  text-align: center;
}