Untitled

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.navbar {
  background: linear-gradient(90deg, rgba(36, 17, 174, 0.97) 0%, rgba(80, 234, 157, 0.97) 100%);
  height: 10vh;
  z-index: 1000;
}

.navbar-brand {
  position: relative;
  left: 70px;
  color: white;
}

.Mystic {
  position: absolute;
  left: 80px;
}

.Userico img {
    width: 2vw;
    height: 4vh; 
  object-fit: cover;
}

.sea {
  padding: 10px;
  width: 6vw;
  height: 6vh;
  object-fit: contain;
  position: relative;
  left: 36vw;
}

.form-control {
  position: relative;
  left: 36vw;
  width: 100%; /* Make the form control take the full width */
  max-width: 250px; /* Optionally, set a max-width to avoid it being too large */
  border: 2px solid rgb(0, 0, 0);
  border-radius: 23px;
}

.Mystic {
  position: absolute;
  left: 80px;
}

/* Navbar */

/* Add some transition for sliding effect */
/* Sidenav Styles */
#mySidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

#mySidenav li {
  list-style: none;
}

#mySidenav li a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  list-style: none;
  padding-left: 8px;
  margin-top: 1px;
}

#mySidenav a:hover {
  color: #f1f1f1;
}

/* The 'close' button style */
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style for the page content */
/* .content {
  margin-left: 50px;
  transition: margin-left 0.5s;
}
.home {
  position: absolute;
  top: 70px;
  left: 30px;
}
.dest {
  position: absolute;
  top: 16vh;
  left: 19px;
}
.attraction {
  position: absolute;
  top: 23vh;
  left: 29px ;
}
.festival {
  position: absolute;
  height: 32px; ;
  width:32px ;
  top: 30vh;
  left: 29px ;
}
.about{
  position: absolute;
height: 32px;
width: 32px;
top: 36.5vh;
}
.about a{
padding-left: 34px;
}
.contact{
  position: absolute;
  height: 48px;
  width: 44px;
  left: 24px;
  top: 42vh;
} */

.lists{
  display: inline-flex;
  flex-direction: column;
}
.list-item li{
  display: inline-flex;
}
.list-item li img{
  height: 53px;
  width: 32px;
}
.nav-foot{
      display: inline-flex;
      flex-direction: column;
      /* border: 2px solid black; */
      width: -webkit-fill-available;
      position: relative;
      top: 13rem;
}
.dark-light,.logout{
  display: inline-flex !important;
}
.nav-foot i{
  font-size: 2rem;
  padding-right: 20px;
  padding-left: 2rem;
  color: white;
  padding-bottom: 15px;
}
.nav-foot h5{
  color: aliceblue;
}
.nav-foot:hover{
  color: white;

}
.dark-mood{
  background-color: black;
  color: white;
}

/* video */
video{
  position: absolute; 
  top: 6rem;
  width: 100vw;
  height: 80vh;
}