.title {
  color: #e9ad28;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px !important;
}
.section-title {
  font-size: 30px;
  color: #191919;
}
.text-yellow {
  color: #e9ad28;
}
.bg-yellow {
  background: #e9ad28;
}
button{
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;

}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 600;
}

i {
  color: #e9ad28;
  margin-right: 5px;
}

.bg-background {
  background: url("../images/main/hero.jpg.webp") no-repeat;
  background-size: 100% 100%;
}
p{
    font-size: 13px !important;
    font-family: "DM Sans",sans-serif !important;
    color: #777c81 !important;
}

/* navbar */
nav ul li a {
  color: #fff !important;
  font-size: 18px;
}
nav ul li a:hover {
  color: #e9ad28 !important;
}
#hero {
  padding-bottom: 145px !important;
  text-align: center;
}

/* hero */
#hero h5 {
  letter-spacing: 4px;
}
#hero h2 {
  font-size: 44px;
  font-weight: 600;
}
/* about */
#about-us .about-img {
  width: 100%;
}

.room-card{
    height: 350px;
    border: 2px solid red;
}

.book-now{
    border-bottom: 3px solid yellow;
}
.card a{
    width: 75px;
    color: #fff;
    font-size: 12px;
}
/* our hotel */
.bg1{
    background: url("../images/our-hotel/hr-1.jpg.webp") no-repeat;
}
.bg2{
    background: url("../images/our-hotel/hr-2.jpg.webp") no-repeat;

}
.bg3{
    background: url("../images/our-hotel/hr-3.jpg.webp") no-repeat;

}
.bg4{
    background: url("../images/our-hotel/hr-4.jpg.webp") no-repeat;

}
.bg-choose{
    background: url(../images/main/chooseus-bg.jpg.webp) no-repeat;
    background-size: 100% 100%;
}
.bg-footer{
  background: url("https://preview.colorlib.com/theme/hiroto/img/footer-bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.card{
    height: 350px;
    border: none;
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    background-size: 100% 100%;
}

#testimonials img{
    width: 100%;
}
#our-gallary img{width: 100%;}

.gallary-content div img{
  height: 400px !important;
}

.list-item{
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  #hero h2 {
    font-size: 54px;
  }
}
@media screen and (min-width: 1024px) {
  nav ul li a {
    margin-right: 25px;
  }
  #about-us .about-img {
    position: relative;
    bottom: 70px;
  }
}
@media screen and (min-width: 1200px) {
  nav ul li a {
    margin-right: 50px;
  }
}