body {
  font-family: sans-serif;
}

.navbar {
  background-color: #1e202b;
}
.navbar h1 {
  color: white !important;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.navbar span {
  font-size: 11px;
}
.nav-item a {
  color: white !important;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-right: 25px;
  transition: all 0.5s;
  border: 3px solid transparent;
  width: 88%;
  text-wrap: nowrap;
  padding: 3px;
  display: flex;
  justify-content: center;
  border-radius: 17px;
}
.nav-item .active {
  padding: 3px;
  display: flex;
  justify-content: center;
  width: 88%;
  color: #009ad8 !important ;
  border: 3px solid #009ad8;
  border-radius: 17px;
}

.nav-item a:hover {
  color: #009ad8 !important ;
  border: 3px solid #009ad8;
  border-radius: 17px;
}
/* ------------1-------------------- */
.city {
    background-image: url(./imgs/banner.png);
}
.location input[type="text"] {
  width: 100%;
  padding: 15px 50px 15px 20px;
  background: #1e202b;
  color: white;
  border: none;
  border-radius: 45px;
}
.location input[type="button"] {
  position: absolute;
  right: 5px;
  bottom: 52.5px;
  border: none;
  background: #009ad8;
  padding: 10px 35px;
  border-radius: 30px;
  color: white;
}
.location input[type="text"]:focus  {
border: none;
outline: none;
}
.cards {
    background-color: #1E202B !important;
   
}


.card {

  background-color: #323544;
  color: white !important;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  height: 450px;
}
.num {
  font-size: 90px;
  font-weight: 700;
}
.card-head  {
  background-color: #2D303D !important;
  width: 100%;
  padding: 2px 5px;
  
Color:rgb(191, 193, 200);
}


.mood {
  color: #009ad8 !important ;
}
.items img {
  width: 20px;
}
.two p,
.three p {
font-size: 24px;
font-weight: 700;
}

.cards .row {
  bottom: 140px;
}
 
footer {
  background-color: #262936;
}


.sub input[type="text"] {
  width: 100%;
  padding: 15px 50px 15px 20px;
  background: #1e202b;
  color: white;
  border: none;
  border-radius: 45px;
}
.sub input[type="button"] {
  position: absolute;
  right: 5px;
  bottom: 30px;
  border: none;
  background: #009ad8;
  padding: 10px 35px;
  border-radius: 30px;
  color: white;
}
.sub input[type="text"]:focus  {
border: none;
outline: none;
}
.subscribe p {
  font-size: 13px;
  letter-spacing: 1px;
}
.icons i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 5px;
  color: #009ad8;
  border-radius: 50%;
  background-color: #1E202B;
  transition: all .3s;
}

.icons i:hover {
  background-color: #009ad8;
  color: white;
}