/* The Modal (background) */
	.modal {
	  display: block; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999 !important; /* Sit on top */
	  padding-top: 20px; /* Location of the box */
	  padding-bottom: 20px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	  border: 1px;
	}

	/* Modal Content */
	.modal-content {
	  border-radius:12px;
      width: 95%;
	  max-width: 900px;
	  height:100%;
	  position: relative;
	  margin: auto;
	  padding: 0;
	  -webkit-animation-name: animatetop;
	  -webkit-animation-duration: 0.4s;
	  animation-name: animatetop;
	  animation-duration: 0.4s;
	  background:#fff;      /* <-- Add this */
	}

	/* Add Animation */
	@-webkit-keyframes animatetop {
	  from {top:-300px; opacity:0} 
	  to {top:0; opacity:1}
	}

	@keyframes animatetop {
	  from {top:-300px; opacity:0}
	  to {top:0; opacity:1}
	}

	/* The Close Button */
	.close {
	  color: #fff;
	  box-shadow:none;
	  opacity:1;
	  float: right;
	  font-size: 33px;
	  font-weight: bold;
	  z-index: 3000 !important;
	  padding-right: 1px;
	}

	.close:hover,
	.close:focus {
	  color: #EDEDED;
	  box-shadow:none;
	  opacity:1;
	  text-decoration: none;
	  cursor: pointer;
	  z-index: 3000 !important;
	}

	.modal-header {
	  border-top-right-radius:12px;
	  border-top-left-radius:12px;
	  padding: 2px 16px 10px 20px;
	  background-color: #1e1e1e;
	  color: #ffffff;
	}
	.modal-header h2 {
	  font-size:20px;
	  font-weight:700;
      color: #ffffff;
	  margin:0px;
	}
	.modal-body {
	  margin:0px;
	  padding: 0px 0px;
	  background-color:#fff !important;
	  background:#fff !important;
	}
	.modal-body .col-md-12{
		padding:0 !important;
		margin:0 !important;
	}
	/* ---------- Header ---------- */

.room-header-info{
    margin:25px 10px 15px;
}

.room-dtl-title{
    margin:0;
    font-size:25px;
    font-weight:700;
    color:#222;
    line-height:42px; /* vertically aligns with button */
}

.book-btn{
    display:inline-block;
    background:#000;
    color:#fff;
    padding:10px 25px;
	border: 2px solid #000;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
	text-transform: uppercase;
    
}

.book-btn:hover{
	border: 2px solid #000;
    background:#fff;
    color:#000;
    text-decoration:none;
}

/* ---------- Description ---------- */

.room-description{
	padding-left:25px;
    font-size:16px;
    line-height:1.8;
    color:#222;
    margin-bottom:20px;
}

/* ---------- Divider ---------- */

.room-divider{
    margin:10px 0 10px 10px auto;
	padding-left:25px;
    border:0;
    border-top:2px solid #ddd;
}

/* ---------- Features ---------- */

.room-features{
	/*list-style:disc;
    padding-left:20px;
    margin:20px;*/
	list-style:none;
    padding:0;
    margin:0;
}
.room-features li{
    /*margin-bottom:20px;*/
	position:relative;
	padding-top:12px;
    padding-left:50px;
    margin-bottom:0px;
    color:#555;
    font-size:14px;
}
.room-features li::before{
    content:"";
    width:10px;
    height:10px;
    background:#b8872b;
    border-radius:50%;
    position:absolute;
    margin:8px 0 0 0px;
	left:24px;
}

.room-features strong{
    display:block;
    font-size:17px;
    color:#222;
    margin-bottom:5px;
}

.room-features p{
    margin:0;
    font-size:14px;
    color:#222;
    line-height:1.7;
}
	.modal-footer {
	  border-bottom-right-radius:12px;
	  border-bottom-left-radius:12px;
	  padding: 2px 16px;
	  background-color: #fff;
	  color: white;
	}

	.textBox {
		padding-left:3px;
		height:18px; background: #EBEBE4; border: 1px solid #a9a9a9;	
	}
	
	.slider-container {
		margin:0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.slider-btn {
	padding:0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: transparent; /*rgba(0,0,0,.6);*/
    color: #fff;
    font-size: 30px;
	font-weight:bold;
    cursor: pointer;
    z-index: 999;
}

.slider-btn:hover {
    /*background: rgba(0,0,0,.8);*/
	color: rgba(255,255,255,.8);
}

.slider-btn,
.slider-btn:hover,
.slider-btn:focus {
	padding:0px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1000;
}

.slider-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: .3s;
}

.slider-dots span.active {
    background: #fff;
    transform: scale(1.2);
}
	
	@media (max-width:768px){
	.slider-btn{
        width:40px;
        height:40px;
        font-size:25px;
    }

    .prev{
        left:8px;
    }

    .next{
        right:8px;
    }
}
@media (max-width:767px){

    .room-header-info{
        display:block;
    }

    .room-dtl-title{
        line-height:normal;
        margin-bottom:15px;
    }

    .text-right{
        text-align:left !important;
    }

    .book-btn{
        display:inline-block;
    }
	
    .room-description{
        font-size:15px;
    }

    .room-features strong{
        font-size:16px;
    }

    .room-features p{
        font-size:14px;
    }

}