/*
Template Name: Hotells
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************rooms****************/
.logo-img {
  height: 120px;
  width: auto;
  max-height: 120px;
  object-fit: contain;
}
.main_room{
background-image: url(../img/Dbl_001.jpg);
background-position: center; 
 }
.main_room_dt{
background-image: url(../img/Dbl_001.jpg);
background-position: center; 
 }
/*********************rooms_end****************/


@media screen and (max-width : 767px){
.room_1l1r{
margin-top:15px; 
 }
.room_1r{
margin-top:15px;  
 }
.room_1r1 .bg_dark{
text-align:center; 
 }
.room_dt1ir{
margin-top:15px;  
 }
.room_dt1iril {
margin-top:8px;
margin-bottom:8px; 
 }
.room_dt2  h4{
text-align:center;  
 }
.room_dt3  h2{
text-align:center;  
 }
 }

@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {
.room_1l1r .button{
padding-left:10px;
padding-right:10px; 
 }
.room_dt1il .button_2{
padding-left:10px;
padding-right:10px;  
 }
.room_dt1iril  span{
font-size:18px!important; 
 }
.room_dt1iril  h6{
font-size:8px; 
 }
.room_dt1irit {
padding:5px!important; 
 }
 }

@media (min-width:992px) and (max-width:1200px) {

 }
@media (min-width:1201px) and (max-width:1360px) {

 }

 * Card hover effect */
  .transition-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .transition-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  /* Support dark mode using prefers-color-scheme */
  @media (prefers-color-scheme: dark) {
    .dark-mode-card {
      background-color: #1e1e2f !important;
      color: #f1f1f1 !important;
    }

    .dark-mode-card .card-text,
    .dark-mode-card .list-inline-item {
      color: #ccc !important;
    }

    .dark-mode-card .badge {
      background-color: #facc15 !important;
      color: #1e1e2f !important;
    }
  }

  /* Object-fit helper */
  .object-fit-cover {
    object-fit: cover;
    width: 100%;
  }


/* Whatsapp logo */
 /* for desktop */
 .whatsapp_float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.whatsapp-icon {
  margin-top: 16px;
}

/* for mobile */
@media screen and (max-width: 767px) {
  .whatsapp-icon {
      margin-top: 10px;
  }

  .whatsapp_float {
      width: 40px;
      height: 40px;
      bottom: 20px;
      right: 10px;
      font-size: 22px;
  }
}