/* ====== header ====== */
header {
  /* ======= top header ====== */
  /* ======== bottom header ===== */
}

header .top-header {
  background-color: var(--black);
  padding         : 10px 0px;
  color           : #fff;
}

header .top-header .container-more {
  display        : flex;
  justify-content: space-between;
}

header .top-header .loge-details {
  display: flex;
  gap    : 20px;
}

header .top-header i {
  margin-right: 10px;
}

header .top-header a {
  color    : #fff;
  font-size: 14px;
}

header .top-header .social-media i {
  font-size: 20px;
}

header .bottom-header {
  padding: 15px 0px;
}

header .bottom-header .menu-icon {
  /* width: 0; */
  display: none;
}

header .bottom-header .container-more {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

header .bottom-header .logo a {
  display: flex;
}

header .bottom-header .logo img {
  width: 175px;
}

header .bottom-header .primary-menu {
  display    : flex;
  align-items: center;
  gap        : 30px;
}

header .bottom-header nav a {
  padding       : 0px 15px;
  text-transform: uppercase;
  font-weight   : 600;
  color         : var(--black);
}

header .bottom-header nav a:hover {
  color: var(--red);
}

header .bottom-header .active {
  color: var(--red);
}

header .bottom-header .book-btn a {
  display         : inline-block;
  background-color: #ed1c1c;
  padding         : 15px 30px;
  color           : var(--white);
  text-transform  : uppercase;
  /* font-weight  : 600; */
}

header .book-btn {
  display: none;
}

header .booknow-header {
  display: block;
}

/* ======== banner ======== */
.banner .banner-slider {
  display: flex;
}

.banner .banner-content {
  width         : 100%;
  position      : absolute;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%);
  z-index       : 1;
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
}

@media (max-width: 768px) {
  .banner .banner-content {
    position  : static;
    transform : none;
    padding   : 20px 0;
    background: #474747;
  }

  .banner .banner-content .main-heading {
    font-size: 40px;
  }
}

.banner p {
  color: var(--white);
}

/* ========== About us ====== */
.about {
  padding: 70px 0px 0px;
}

.about .room-amenities ul {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

.about .about-title {
  display       : flex;
  gap           : 50px;
  align-items   : center;
  flex-direction: column-reverse;
}

.about .about-title .title-img img {
  width: 100%;
}

.about .about-title .title {
  /* width: 50%; */
  margin-left: 100px;
}

.about .about-title .title h3 {
  position  : relative;
  transition: all 0.2s ease-in-out;
  cursor    : pointer;
}

.about .about-title .title h3:hover {
  color: var(--yellow);
}

.about .about-title .title h3:before {
  content         : "";
  position        : absolute;
  top             : 30px;
  right           : calc(100% + 15px);
  width           : 10%;
  height          : 1px;
  background-color: #1c1c1c;
}

.about .about-content {
  margin-top     : 20px;
  display        : block;
  justify-content: space-between;
  gap            : 60px;
  /* align-items : center; */
}

.about .about-content .main-content {
  width         : 100%;
  display       : none;
  gap           : 20px;
  flex-direction: column;
}

.about .about-content .amenities {
  width   : 100%;
  position: relative;
}

.about .about-content .top-amenities {
  display        : flex;
  justify-content: space-around;
}

@media (max-width: 768px) {
  .about .about-content .top-amenities {
    flex-direction: column;
  }
}

.about .about-content .bottom-amenities {
  /* position: absolute; */
  bottom: -95px;
  left  : 75px;
}

/* ======== room type ======= */
.room {
  margin-top: 60px;
  /* padding: 80px 0px; */
}

.room .title {
  text-align   : center;
  margin-bottom: 60px;
}

.room .room-types {
  display: flex;
  gap    : 5px;
}

.room .room-box {
  width    : 100%;
  max-width: 33.33%;
  cursor   : pointer;
  position : relative;
}

.room .room-box p {
  color: var(--white);
}

.room img {
  display      : flex;
  width        : 100%;
  height       : 600px;
  -o-object-fit: cover;
  object-fit   : cover;
}

.room .room-name {
  height     : 40%;
  width      : 100%;
  padding    : 45px;
  position   : absolute;
  left       : 0;
  bottom     : 0;
  background : linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, rgba(45, 63, 75, 0.79) 100%);
  display    : flex;
  align-items: end;
  transition : all 0.3s ease 0.15s;
  color      : var(--white);
}

.room h5 {
  font-size     : 30px;
  font-family   : Arapey;
  font-weight   : 600;
  letter-spacing: 2px;
  color         : var(--white);
}

.room .room-details {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  height    : 100%;
  width     : 100%;
  padding   : 40px;
  text-align: center;
  opacity   : 0;
  position  : absolute;
  left      : 0;
  top       : 0;
  transition: all 0.3s ease 0.15s;
  transform : translateX(-100%);
  z-index   : -1;
  color     : var(--white);
}

.room .room-box:hover .room-details {
  opacity  : 1;
  transform: translateX(0);
  z-index  : 0;
}

.room .room-box:hover .room-name {
  opacity: 0;
}

.room .room-inner {
  display       : inline-block;
  text-align    : left;
  vertical-align: middle;
  width         : 97%;
}

.room .room-detail:before {
  content       : "";
  display       : inline-block;
  height        : 100%;
  vertical-align: middle;
}

.room .room-inner {
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

.room .room-inner ul {
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

.room .room-inner ul li {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

/* ========= choose img ====== */
.choose {
  padding: 80px 0px;
}

.choose .container {
  display    : flex;
  gap        : 60px;
  align-items: center;
}

.choose .container .choose-img {
  width   : 50%;
  position: relative;
}

.choose .container .choose-content {
  width: 50%;
}

.choose .container .choose-img-row {
  display : flex;
  gap     : 15px;
  position: relative;
}

.choose .container img {
  display: flex;
  width  : 100%;
}

.choose .container .choose-number {
  padding         : 70px 30px;
  background-color: var(--yellow);
  color           : #fff;
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-direction  : column;
  margin-bottom   : 15px;
  gap             : 15px;
}

.choose .container .choose-number .number-img img {
  max-width: 70px;
}

.choose .container .choose-number a {
  font-size  : 22px;
  color      : var(--white);
  font-weight: 500;
}

.choose .container .choose-number span {
  display       : block;
  font-family   : Arapey;
  font-size     : 20px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.choose .container .email {
  padding   : 70px 10px;
  margin    : 15px 0px 0px 0px;
  background: var(--black);
}

.choose .container .email a {
  word-break: break-all;
  text-align: center;
  font-size : 14px;
}

.choose .container .img-col-2 {
  margin-top: 30px;
}

.choose .round-img {
  position        : absolute;
  top             : 50%;
  left            : 50%;
  transform       : translate(-50%, -50%);
  background-color: var(--white);
  padding         : 20px;
  border-radius   : 100px;
  z-index         : 1;
  display         : none;
}

.choose .round-img img {
  width    : 100%;
  animation: rotate-infinite 15s linear infinite;
}

.choose .choose-content {
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ======== testimonial ============ */
.testimonial {
  display         : flex;
  background-color: #f8f5f0;
  gap             : 50px;
  align-items     : center;
  /* margin       : 100px 0; */
}

.testimonial .testimonial-img {
  width: 50%;
}

.testimonial .testimonial-content {
  padding            : 80px 0px;
  background         : url(../upload/shape.png);
  background-repeat  : no-repeat;
  background-position: right;
  /* background-size : contain; */
  width              : 50%;
}

.testimonial .testimonial-img img {
  width  : 100%;
  display: flex;
}

.testimonial .testi-content-box {
  width         : 70%;
  display       : flex;
  flex-direction: column;
  gap           : 20px;
}

.testimonial .testimonial-items {
  margin-top: 20px;
  overflow-x: hidden;
}

.testimonial .testimonial-items p {
  font-style: italic;
}

.testimonial .testimonial-items .author-content {
  position   : relative;
  font-size  : 20px;
  font-weight: 500;
  color      : var(--yellow);
  margin-top : 20px;
  display    : inline-block;
}

/* ============ cta =========== */
.cta {
  padding: 80px 0px;
}

.cta .container {
  max-width: 1200px;
}

.cta .main-cta {
  display            : flex;
  align-items        : center;
  gap                : 50px;
  background         : linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../upload/image08.png);
  background-position: center center;
  background-repeat  : no-repeat;
  background-size    : cover;
  padding            : 40px;
  box-shadow         : 0px 10px 30px -10px rgba(0, 0, 0, 0.25);
  border-radius      : 20px;
}

.cta img {
  width: 100%;
}

.cta .cta-img img {
  width  : 100%;
  display: flex;
}

.cta h3 {
  padding-left: 30px;
  border-left : 4px solid var(--yellow);
  font-size   : 40px;
}

.cta .cta-content {
  display       : flex;
  flex-direction: column;
  gap           : 30px;
}

.cta .group-btn {
  display    : flex;
  gap        : 30px;
  align-items: center;
}

.cta .cta-call {
  display    : flex;
  gap        : 20px;
  align-items: center;
}

.cta .call-icon img {
  width: 40px;
}

.cta .call-content span {
  display: block;
}

.cta .call-content a {
  font-size  : 20px;
  color      : var(--black);
  font-weight: bold;
}

.cta .call-content a:hover {
  color: var(--yellow);
}

/* ========= footer ======== */
footer {
  padding         : 60px 0px 0px;
  background-color: var(--black);
  color           : var(--white);
}

footer .footer-logo img {
  width: 150px;
}

footer p {
  color       : var(--white);
  /* font-size: 14px; */
}

footer a {
  color     : var(--white);
  word-break: break-all;
}

footer h4 {
  margin-bottom: 15px;
  font-size    : 22px;
}

footer .top-footer .container {
  display       : flex;
  gap           : 20px;
  padding-bottom: 40px;
}

footer .footer-about {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  width         : 30%;
}

footer .social-media i {
  font-size: 20px;
}

footer .useful-link {
  width     : 15%;
  margin-top: 20px;
}

footer .useful-link nav {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

footer .contact-info {
  margin-top: 20px;
  width     : 30%;
}

footer .contact-info .contact-box {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  margin-bottom: 8px;
}

footer .footer-gallery {
  width     : 25%;
  margin-top: 20px;
}

footer .footer-gallery .gallery-item {
  /* margin-top: 15px; */
  display  : flex;
  gap      : 10px;
  flex-wrap: wrap;
}

footer .footer-gallery img {
  width        : 25%;
  border-radius: 5px;
}

footer .copy-right .container {
  padding   : 30px 20px 15px;
  text-align: center;
  border-top: 1px solid rgba(204, 204, 204, 0.4705882353);
  font-size : 14px;
}

/* ============ Contact Us page ======== */
#contact-page .inner-banner {
  background         : url(../upload/contact-bg.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#contact-page .lodge-contact {
  padding: 80px 0px;
}

#contact-page .lodge-contact .container {
  display: flex;
  gap    : 40px;
}

#contact-page .contact-text {
  width         : 100%;
  max-width     : 50%;
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

#contact-page .contact-form {
  width    : 100%;
  max-width: 50%;
}

#contact-page .lodge-contact-details {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
  margin-top    : 15px;
}

#contact-page .lodge-contact-details .box {
  display  : flex;
  gap      : 15px;
  width    : 100%;
  max-width: 70%;
}

#contact-page .lodge-contact-details .box-icon i {
  padding   : 20px;
  background: var(--yellow);
  color     : var(--white);
  font-size : 20px;
}

#contact-page .lodge-contact-details .box-text span {
  font-weight: bold;
}

#contact-page .lodge-contact-details .box-text p a {
  color    : #706e6e;
  font-size: 16px;
}

#contact-page .lodge-contact-details .box-text p a:hover {
  color: var(--yellow);
}

#contact-page .contact-form form {
  padding         : 48px 32px;
  background-color: #F8F5F0;
  display         : flex;
  flex-direction  : column;
  gap             : 15px;
  /* align-items  : self-start; */
}

#contact-page .contact-form input,
#contact-page .contact-form textarea {
  padding           : 10px 15px;
  background-color  : #fff;
  /* padding-inline : 1.5rem; */
  border            : 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance   : none;
  appearance        : none;
  border-radius     : 0.25rem;
  transition        : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#contact-page .contact-form .name,
#contact-page .contact-form .tel-mail {
  display: flex;
  gap    : 20px;
}

#contact-page .contact-form .name input,
#contact-page .contact-form .tel-mail input {
  width    : 100%;
  max-width: 50%;
}

#contact-page .contact-form .name input {
  width    : 100%;
  max-width: 100%;
}

#contact-page .contact-form .subject input {
  width    : 100%;
  max-width: 100%;
}

#contact-page .contact-form .message textarea {
  width    : 100%;
  max-width: 100%;
}

#contact-page .contact-form .form-submit {
  width           : 160px;
  display         : inline-block;
  padding         : 12px 30px;
  color           : var(--white);
  background-color: var(--red);
  transition      : all 0.2s ease-in-out;
  font-size       : 16px;
}

#contact-page .contact-form .form-submit:hover {
  background-color: var(--yellow);
}

#contact-page input:focus {
  box-shadow  : none;
  border-color: #E8A41D;
}

#contact-page .map {
  display: flex;
}

#contact-page .map iframe {
  width: 100%;
}

/* ========== About us page ========= */
#about-page .inner-banner {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/banner03.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#about-page .about-main {
  padding: 80px 0px;
}

#about-page .about-data {
  display: flex;
  gap    : 40px;
}

#about-page .about-data img {
  width: 100%;
}

#about-page .about-data .about-content {
  width    : 100%;
  max-width: 60%;
}

#about-page .about-data .about-content {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
}

#about-page .about-data .about-img {
  width    : 100%;
  max-width: 40%;
  position : relative;
}

#about-page .about-data .about-img img {
  max-width    : 450px;
  border-radius: 10px;
}

#about-page .about-data:nth-child(2) {
  margin-top    : 30px;
  flex-direction: row-reverse;
}

#about-page .about-data:nth-child(3) {
  margin-top       : 30px;
  /* flex-direction: row-reverse; */
}

/* ============= Blog page ========== */
#blog-page .inner-banner {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/banner04.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#blog-page .main-blog .container {
  display: flex;
  gap    : 40px;
}

#blog-page .main-blog {
  padding: 80px 0px;
}

#blog-page .main-blog img {
  width        : 100%;
  border-radius: 6px;
}

#blog-page .latest-post-section {
  width    : 100%;
  max-width: 30%;
}

#blog-page .blog-section {
  display        : flex;
  /* gap         : 20px; */
  flex-wrap      : wrap;
  justify-content: space-between;
  width          : 100%;
  max-width      : 70%;
}

#blog-page .blog-section .blog-items {
  width        : 100%;
  max-width    : 31%;
  padding      : 15px;
  box-shadow   : 0px 0px 20px 0px rgba(204, 204, 204, 0.6117647059);
  border-radius: 10px;
}

#blog-page .blog-content {
  margin-top: 15px;
}

#blog-page .blog-details {
  display      : flex;
  align-items  : center;
  gap          : 20px;
  margin-bottom: 10px;
}

#blog-page .date {
  display    : flex;
  gap        : 10px;
  align-items: center;
}

#blog-page .date i {
  color: var(--yellow);
}

#blog-page .blog-btn a {
  color: var(--red);
}

/* ============== latest post ========= */
.latest-post .latest-post-title {
  padding      : 0px 0px 25px;
  border-bottom: 1px solid #ccc;
}

.latest-post .latest-post-items {
  margin-top: 30px;
}

.latest-post .recent-post a {
  display: flex;
  gap    : 20px;
}

.latest-post .media-img img {
  max-width: 110px;
}

.latest-post .post-title p {
  font-size    : 14px;
  margin-bottom: 10px;
}

.latest-post .date {
  color      : var(--yellow);
  display    : flex;
  gap        : 10px;
  align-items: center;
}

/* ============ single post =========== */
#single-post .inner-banner {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/contact-bg.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#single-post .main-post {
  padding: 80px 0px;
}

#single-post .main-post .container {
  display: flex;
  gap    : 40px;
}

#single-post .post-data {
  width    : 100%;
  max-width: 70%;
}

#single-post .post-content {
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

#single-post .latest-post-section {
  width    : 100%;
  max-width: 30%;
}

.leave-comment {
  padding: 40px 0px 0;
}

.leave-comment form {
  margin-top    : 20px;
  width         : 100%;
  max-width     : 80%;
  display       : flex;
  flex-direction: column;
  gap           : 15px;
}

.leave-comment .name-mail {
  display: flex;
  gap    : 20px;
}

.leave-comment .name-mail input {
  padding: 10px;
  width  : 50%;
}

.leave-comment textarea {
  width    : 100%;
  padding  : 15px;
  font-size: 16px;
}

.leave-comment .form-btn input {
  width           : 160px;
  background-color: var(--red);
  padding         : 12px 30px;
  border          : none;
  color           : var(--white);
  font-size       : 16px;
}

/* ========== gallery page ======== */
#gallery-page .inner-banner {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/gallery-bg.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#gallery-page .gallery {
  padding: 80px 0px;
}

#gallery-page .gallery .grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap             : 20px;
  align-items          : stretch;
}

#gallery-page .gallery .grid .gallery-img img {
  border    : 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width : 100%;
}

#gallery-page .gallery .gallery-img {
  overflow  : hidden;
  transition: all 0.4s linear;
  display   : flex;
}

#gallery-page .gallery .gallery-img:hover img {
  transform : scale(1.05);
  transition: all 0.4s linear;
}

/* ============= room page =========== */
#room-page .inner-banner {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/banner06.jpg);
  text-align         : center;
  background-position: center;
  background-size    : cover;
}

#room-page .main-room {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/flag.jpeg);
  background-position: center;
  background-size    : cover;
}

#room-page img {
  width: 100%;
}

#room-page .video-room {
  position: relative;
}

#room-page .video-room .video-icon {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  cursor   : pointer;
}

#room-page .video-room .video-icon img {
  box-shadow: none;
  width     : 80px;
}

#room-page .room-item {
  display   : flex;
  gap       : 40px;
  padding   : 80px 40px;
  background: rgba(255, 245, 245, 0.2);
  color     : #fff;
}

@media (max-width: 600px) {
  #room-page .room-item {
    padding: 20px 20px;
  }
}

#room-page .room-item-content {
  display       : flex;
  flex-direction: column;
  gap           : 15px;
  width         : 60%;
}

#room-page .room-item-content h4 {
  font-size: 40px;
}

#room-page .room-item-content p {
  color: #fff;
}

#room-page .room-item-img {
  text-align: center;
  width     : 40%;
}

#room-page .room-item-img img {
  width        : 100%;
  max-width    : 350px;
  border-radius: 15px;
  box-shadow   : 0px 0px 12px rgba(204, 204, 204, 0.8);
}

#room-page .amenities ul {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

#room-page .amenities ul li {
  display: flex;
  gap    : 15px;
}

#room-page .price {
  font-size: 20px;
}

#room-page .price b {
  margin-right: 10px;
}

#room-page .room-item:nth-child(2) {
  flex-direction: row-reverse;
  margin        : 60px 0px;
}

#room-page .room-item:nth-child(2) .room-item-img {
  text-align: center;
}

#room-page .room-item:nth-child(4) {
  flex-direction: row-reverse;
  margin        : 60px 0px;
}

#room-page .room-item:nth-child(4) .room-item-img {
  text-align: start;
}

.meta-heading {
  display: none;
}

/* =========== book now ================ */
.main-book {
  padding: 80px 0px;
}

.main-book .box {
  display: flex;
  gap    : 20px;
}

.main-book form {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.main-book label {
  display      : block;
  margin-bottom: 10px;
}

.main-book input {
  width    : 100%;
  padding  : 10px 15px;
  font-size: 16px;
}

.main-book select {
  width  : 100%;
  padding: 10px 15px;
}

.main-book .box-item {
  width: 100%;
}

.main-book .book-now {
  width : 80%;
  margin: 0px auto;
}

.main-book h4 {
  margin: 20px 0px;
}

.main-book input[type=submit] {
  width     : 170px;
  background: #ed1c1c;
  color     : #fff;
  border    : none;
  cursor    : pointer;
  padding   : 14px 0px;
  transition: all 0.2s linear;
}

.main-book input[type=submit]:hover {
  background-color: var(--yellow);
}

.main-testimonial img {
  width: 150px;
}

.banner {
  position: relative;
}

.banner #playButton {
  position     : absolute;
  top          : 10px;
  right        : 10px;
  padding      : 10px 20px;
  background   : var(--red);
  border       : none;
  color        : #fff;
  border-radius: 5px;
}

#call-page .call-now {
  padding   : 80px 0;
  text-align: center;
}

#call-page .call-now .call-number {
  font-size: 60px;
  color    : #1c1c1c;
}

.gallery-audio #playButton {
  position     : absolute;
  top          : 140px;
  right        : 10px;
  padding      : 10px 20px;
  background   : var(--red);
  border       : none;
  color        : #fff;
  border-radius: 5px;
}

.room-video {
  position        : fixed;
  top             : 0;
  width           : 100%;
  height          : 100vh;
  background-color: rgba(46, 46, 46, 0.5294117647);
  z-index         : 999;
  overflow        : hidden;
  display         : flex;
  justify-content : center;
  align-items     : center;
  padding         : 20px;
  display         : none;
}

.main-room-video {
  position  : relative;
  width     : 80%;
  max-width : 1200px;
  height    : auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.main-room-video video {
  width  : 100%;
  height : auto;
  display: flex;
}

.close-icon {
  position        : absolute;
  top             : -10px;
  right           : -10px;
  width           : 50px;
  height          : 50px;
  border-radius   : 50%;
  background-color: #fff;
  font-size       : 20px;
  display         : grid;
  place-items     : center;
  cursor          : pointer;
}

@media (max-width: 1024px) {
  .main-room-video {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .main-room-video {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .room-video {
    padding: 10px;
  }

  .main-room-video {
    width: 100%;
  }

  .main-room-video video {
    border-radius: 5px;
  }
}

.single-room-video .main-room-video video {
  width     : 100%;
  height    : 80vh;
  background: gray;
}

/*# sourceMappingURL=style.css.map */


/* blog start here  */
/* Container Layout */
.blog-section {
  padding   : 60px 20px;
  background: #fafafa;
}

.blog-container {
  display  : flex;
  flex-wrap: wrap;
  gap      : 30px;

  margin: 0 auto;
}

/* Left Column (Blog) */
.blog-left {
  flex                 : 1 1 65%;
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 25px;
}

.blog-card {
  background   : #fff;
  border-radius: 10px;
  overflow     : hidden;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.05);
  transition   : all 0.3s ease;
}

.blog-card:hover {
  transform : translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.blog-img img {
  width     : 100%;
  height    : 230px;
  object-fit: cover;
}

.blog-inner-img img {
  width     : 100%;
  object-fit: cover;
}

.blog-content {
  padding: 15px;
}

.blog-content h3 {
  font-size    : 18px;
  margin-bottom: 10px;
  line-height  : 1.4;
}

.blog-content h1 {
  font-size: 30px;
}
.blog-card h4{
  padding: 7px 15px;
  font-size: 20px;
}
.blog-card p{
  padding: 7px 15px;
  
}
.blog-content h3 a {
  text-decoration: none;
  color          : #222;
}

.blog-content h3 a:hover {
  color: #d32f2f;
}

.blog-meta {
  font-size      : 14px;
  color          : #777;
  display        : flex;
  justify-content: space-between;
  border-top     : 1px solid #eee;
  padding-top    : 8px;
}

.blog-meta i {
  color       : #d32f2f;
  margin-right: 5px;
}

/* Sidebar */
.blog-sidebar {
  flex         : 1 1 30%;
  background   : #fff;
  border-radius: 10px;
  padding      : 20px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  font-size     : 20px;
  margin-bottom : 20px;
  border-bottom : 2px solid #d32f2f;
  display       : inline-block;
  padding-bottom: 5px;
}

.recent-post {
  display      : flex;
  align-items  : center;
  gap          : 15px;
  margin-bottom: 15px;
}

.recent-post img {
  width        : 80px;
  height       : 80px;
  object-fit   : cover;
  border-radius: 5px;
}

.recent-info a {
  text-decoration: none;
  color          : #222;
  font-size      : 15px;
}

.recent-info a:hover {
  color: #d32f2f;
}

.recent-info small {
  display   : block;
  color     : #777;
  font-size : 13px;
  margin-top: 4px;
}

.recent-info i {
  color       : #d32f2f;
  margin-right: 5px;
}

.blog-para {
  padding  : 10px 15px;
  font-size: 16px;
  color    : #1c1c1c;
}

.blog-para a {
  color: #d32f2f;
}

.blog-para a:hover {
  color: #000000;
}

.blog-inner-heading {
  color              : #000 !important;
  font-size          : 25px !important;
  padding            : 0px 15px !important;
  font-family        : Arapey;
  display            : block;
  font-size          : 1.5em;
  margin-block-start : 0.33em;
  margin-block-end   : 0.33em;
  margin-inline-start: 0px;
  margin-inline-end  : 0px;
  font-weight        : bold;
  unicode-bidi       : isolate;


}
.blog-share-btn{
  padding: 20px 0px;
}

/* Responsive */
@media (max-width: 992px) {
  .container {
    flex-direction: column;
  }

  .blog-sidebar {
    margin-top: 30px;
  }

  .blog-content h1 {
    font-size: 23px;
  }
}

@media(max-width:767px) {
  .blog-inner-heading {

    font-size: 20px;

  }
}