style.css

@import url("https://fonts.googleapis.com/css2?family=Agbalumo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap");
/* declaring variables and its arguments is kinda tricky */
/* header {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

#welcome-bg video {
  width: 100%;
  height: 700px;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -1;
}

nav {
  background-image: url(./media/images/arabesque.png);
  /* opacity: .5; */
  height: 100px;
  width: 100%;
  margin-top: -5px;
}

.nav-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
}

#logo {
  height: 60px;
  padding-left: 30px;
}

#nav-list {
  display: flex;
  list-style: none;
}
#nav-list ul {
  list-style: none;
  display: flex;
  width: 500px;
  justify-content: space-around;
  margin-top: 20px;
  padding-left: 50px;
}

#nav-list a {
  color: red;
  text-decoration: none;
}

#slogan {
  font-family: "Agbalumo";
  font-weight: 400;
  font-style: normal;
  margin-left: 50px;
  padding-right: 20px;
  color: red;
}

.title {
  font-family: "Dancing Script";
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;

  display: flex;
  justify-content: center;

  margin: 20px 0;
  padding: 30px 0;
}

#search-bar {
  margin: 20px 20px 0;
}

/* styling 1st section (top destinations) */
#top-dest {
  margin-top: 70px;
  margin-bottom: 70px;
  height: 400px;
}
#top-dest .top-dest-bubbles {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#top-dest .top-dest-bubbles .bubbles img {
  border-radius: 50%;
  height: 230px;
  width: 230px;
  transition: 0.5s;
}
#top-dest .top-dest-bubbles .bubbles img:hover {
  width: 250px;
  height: 250px;
}
.bubbles {
  margin: 0 20px;
}
.bubbles h3 {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

/* Styling 2ns section (Hotels) */
#hotels {
  margin: 20px 0;
  padding: 30px 0;
}

.card-org {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card {
  margin: 10px 20px;
}

/* styling the footer */
footer ul{
  list-style: none;
}
footer a{
  color: white;
  text-decoration: none;
}

footer h4, li, svg {
  color: white;
}
.footer-bg {
  padding-top: 40px;
  background-image: url(./media/images/footer-background.png);
  background-size: 100% 100%;
  /* background-repeat: no-repeat; */
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-evenly;
}
.footer-bg::before {
  content: '';
  z-index: -1;
  opacity: 0.5;
}

.block {
  width: 200px;
  height: 250px;
}