/*Availability*/

.availability-bar {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
padding-top:10px;
padding-bottom: 10px;
padding-left: 20px;
color: #212121;
position: sticky;
top:0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
}

.availability-bar input[type="date"] {
padding: 10px;
margin: 0 5px;
font-size: 14px;
border: 1px solid #ccc;
border-radius:5px;
color:#757575;
}

.availability-bar input[type="text"]{
padding: 11px;
margin: 0 5px;
font-size: 14px;
border: 1px solid #ccc;
border-radius:5px;
color:#757575;
}

.availability-bar .rooms-guests {
display: flex;
align-items: center;
margin-right: 10px;
}
/* Circular Call Button Styling */
.float-call {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 120px; /* Reduced value to bring the button lower */
    right: 40px;
    background-color: #e74c3c; /* Red color for the call button */
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.my-float-call {
    margin-top: 16px;
}

/* Media query for mobile devices */
@media (max-width: 787px) {
    .float-call {
        right: 20px;
        bottom: 150px; /* Adjusted value for mobile view */
    }
}

.availability-bar .rooms-guests input[type="number"] {
width: 40px;
text-align: center;
margin: 0 5px;
padding:10px;
border: 1px solid #ccc;
border-radius:5px;
color:#757575;
}
/* Floating Text Styling */
.floating-text {
    position: fixed;
    bottom: 230px; /* Adjust this value to position above the buttons */
    right: 40px; /* Align with the buttons */
    background-color: #ffffff; /* White background */
    color: #333;
    padding: 5px 15px; /* Padding around the text */
    border-radius: 20px; /* Rounded corners for cloud shape */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 99;
    animation: float 3s ease-in-out infinite; /* Floating effect */
    font-size: 12px; /* Smaller font size for floating text */
}

/* Close Button Styling */
.close-text-button {
    background: none;
    border: none;
    color: #e74c3c; /* Color for the close button */
    font-size: 14px; /* Adjusted size for close button */
    cursor: pointer;
    margin-left: 10px; /* Space between text and close button */
}

/* Chat Box Styling */
.chat-box {
    position: fixed;
    bottom: 200px; /* Position above the buttons */
    right: 40px; /* Align with the buttons */
    background-color: #ffffff; /* White background */
    color: #333;
    padding: 5px 10px; /* Reduced padding for a smaller look */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 99;
    width: 180px; /* Reduced width for a smaller chat box */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: space-between; /* Space between text and close button */
    font-size: 12px; /* Smaller font size for chat box text */
}

/* Floating Animation for Text */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px); /* Adjust to how much you want it to float */
    }
}


.availability-bar .search-button {
padding: 20px 50px;
background-color: #5291fa;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}

.availability-bar .search-button:hover {
background-color: #034fa1;
}

.availability-bar img {
width: 25px; 
height: auto; 
margin-right: 5px; 
}

.availability-bar a {
color: #333;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}

.availability-bar a:hover b,

.availability-bar ul {
list-style-type: none;
}

.availability-bar li {
display: inline-flex; 
align-items: center;
}

.availability-vertical-line {
border-left: 1px solid #ccc;
height: 80px; 
margin-left:30px;
margin-right:-20px;
}

/*End*/

.gallery {
background: #EEE;
margin-bottom: 30px;
}

.gallery-cell {
    width: 66%; /* Keep or adjust based on your layout */
    height: 450px; /* Maintain a consistent height */
    margin-right: 10px;
    background: #CCC; /* Default background color */
    background-image: url('./Islamabad_Hotel_images/1.webp'); /* Add this if not dynamically added */
    background-size: cover; /* Change to cover to fill the cell */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevents repeating of the image */
    position: relative; /* Ensure pseudo-elements can be positioned correctly */
}


.gallery-cell:before {
    display: block;
    text-align: center; /* Center the text */
    line-height: 200px; /* Adjust this value if you want the text to appear lower/higher */
    font-size: 80px; /* Size of the text */
    color: white; /* Color of the text */
    position: absolute; /* Positioning to overlay */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust to center */
    opacity: 0.8; /* Optional: make it slightly transparent */
    z-index: 1; /* Make sure it appears above the background */
}

.container {
display: grid;
grid-template-columns: 70% 30%;
}

.column-a h1,h2{
color:#212121;
}

.column-a p{
color:#474747;
}

.column-a {
padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;
margin-left:50px;
margin-top:50px;
}

.column-b {
padding: 20px;
box-sizing: border-box;
margin-right:50px;
margin-top:50px;
}

.AC, .TV, .Heater, .wifi, .parking, .restaurant {
width: 2%;
height: 2%;
}

.amenities-a img, 
.amenities-b img {
display: inline-block;
vertical-align: middle;
margin-right: 10px; 
}

.amenities-a p, 
.amenities-b p {
display: inline-block;
vertical-align: middle;
}

.amenities-a p {
margin-right: 52px;
}

.amenities-b p {
margin-right: 60px;
}

.details img, .details p{
display: inline-block;
vertical-align: middle;
width: 5%;
height: 5%;
}

.deluxe-double-room, .family-suite-1, .deluxe-twin-room, .family-suite-2, .economy-room-with-balcony, .deluxe-twin-bed-with-balcony, .deluxe-double-bed-with-balcony, .executive-family-room-1, .executive-family-room-2, .standard, .deluxe, .superior{
border:1px solid #ccc;
margin-bottom: 20px;
margin-right: 50px;
border-radius:5px;
display: flex;
align-items: flex-start;
}

.dbr-a{
margin-left:20px;
flex-basis: 60%;
}

.dbr-b {
flex-basis: 40%; 
}

.dbr-a {
margin-right: 20px;
}

.dbr-a h3,p {
display: inline-block;
vertical-align: baseline;
margin-top: 10px;
}

.description {
max-height: 910px;
overflow: hidden;
}

.description h4{
color:#474747;
}

.hidden-text {
display: none;
}

.showmore, .showless{
border: none;
color:#084862;
background-color: #fff;
font-weight: bolder;
font-size: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius:20px;
margin-left:5px;
margin-bottom:20px;
padding:10px;
transition: transform 0.3s ease-in-out;
}

.showmore:hover,
.showless:hover {
transform: translateY(3px);
}

.policy1, .policy2 {
display: inline-block;
width: 15%; 
}

.policy1 p, .policy2 p {
font-size: 16px;
color: #333;
padding: 5px;
}

.policy1{
padding-right: 50px;
border-right:1px solid #ccc;
}

.policy2{
margin-left:40px;
}

.bubble {
margin-top: 15px;
position: relative;
background: #ccc;
color: #000000;
font-size: 16px;
line-height: 53px;
text-align: center;
width: 134px;
height: 54px;
border-radius: 3px;
}

.bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
border-style: solid;
border-color: #ccc transparent;
border-width: 0 14px 13px;
top: -13px;
left: 21%;
margin-left: -14px;
}

.row > .column {
padding: 0 8px;
}

.row:after {
content: "";
display: table;
clear: both;
}

.column {
float: left;
width: 25%;
}

.modal,
.modal1,
.modal2,
.modal3,
.modal4  {
display: none;
position: fixed;
z-index: 3;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.678);
}

.modal-content,
.modal-content1,
.modal-content2,
.modal-content3 ,
.modal-content4 {
position: relative;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}

.close,
.close1,
.close2,
.close3 ,
.close4 {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
margin-top: 80px;
cursor: pointer;
}

.prev,
.next,
.prev1,
.next1,
.prev2,
.next2,
.prev3,
.next3,
.prev4,
.next4 {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

.next,
.next1,
.next2,
.next3,
.next4{
right: 300px;
border-radius: 3px 0 0 3px;
}

.prev,
.prev1,
.prev2,
.prev3,
.prev4 {
left: 300px;
}

.prev:hover,
.next:hover,
.prev1:hover,
.next1:hover,
.prev2:hover,
.next2:hover,
.prev3:hover,
.next3:hover,
.prev4:hover,
.next4:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.numbertext, .numbertext1, .numbertext2, .numbertext3, .numbertext4 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 310px;
position: absolute;
top: 0;
}

img.hover-shadow {
transition: 0.3s;
border-radius: 5px;
width:60%;
margin-top: 20px;
margin-left: 100px;
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.image2{
display: block;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
width: 47.8%;
height:400px;
}

.image-container {
position: relative;
display: inline-block;
}

.image-icon {
position: absolute;
top: 28%;
left: 85%;
transform: translate(-50%, -50%);
width: 30px; 
height: 30px;
cursor: pointer;
}

.select {
background-color: #ffffff;
color: #000000;
padding: 15px 30px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
margin-left:125px;
margin-top:10px;
margin-bottom:10px;
}

.select.selected  {
background-color: #e8e8e9;
position: relative;
margin-left:125px;
width:140px;
}

.select.selected::after {
content: "";
position: absolute;
top: 50%;
margin-left:5px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url("./Islamabad_Hotel_images/21.webp");
background-repeat: no-repeat;
background-size: cover;
}

.booking-bar {
position: sticky;
top: 5rem;
border:1px solid #ccc;
border-radius:5px;
}

.hidden-fields{
display:none;
}

.number-fields {
display: flex;
align-items: center;
gap: 10px;
}

.text-1, .text-2{
font-size:13px;
margin-left:5px;
font-weight:bold;
}

.number-button {
font-size: 20px;
padding: 1px 5px;
border-radius:5px;
border: none;
background-color: #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}

.number-display {
font-size: 13px;
margin: 5px 0;
}

.booking-bar .check-in-date, .check-out-date{
padding:10px 15px;
margin-bottom: 10px;
margin-left:5px;
border:1px solid #ccc;
border-radius:5px;
color:#757575;
}

.booking-bar .check-in-date[type="date"], .check-out-date[type="date"]{
font-size:12px;
border: 1px solid #ccc;
border-radius:5px;
color:#757575;
}

.booking-bar .a {
margin-right: 75px; 
margin-left: 10px;
}

.booking-bar .a, .b {
font-weight:bold;
font-size:14px;
}

.label-container {
margin-bottom:-10px;
}

.room-type-field {
display: flex;
align-items: center;
border:1px solid #ccc;
border-radius: 2px;
padding: 8px;
font-size: 13px;
margin-left:5px;
margin-right:5px;
border-radius:5px;
color:#757575;
}

.door-icon {
width: 20px;
height: 20px;
}

.room-type-field a {
flex: 1; 
text-decoration: none;
color: #333;
padding: 4px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.pencil-icon {
width: 20px;
height: 20px;
margin-right:5px;
}

.price-section p{
font-weight: bold;
margin-left: 6px;
}

.center-container {
display: flex;
justify-content: center;
}

.booking-button {
padding: 10px 20px;
background-color: #5291fa;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
margin-bottom:10px;
width:100%;
}

.booking-button:hover {
background-color: #034fa1;
}

.additional-fields {
display: flex;
flex-direction: column;
}

.fullname, .email, .phonenumber{
margin-bottom: 5px;
padding:8px 10px;
width:90%;
margin-left:3px;
border: 1px solid #ccc;
border-radius:5px;
color:#757575;
}

.payment-method {
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom:20px;
font-size:12px;
}

.payment-method label {
margin-left: 5px;
}

.payment-method input[type="radio"] {
margin: 5px;
}

img {
height: auto;
}

.hotel-policy1{
display: none;
}

.amenities{
display:none;
}

.important{
display: none;
}

.c,.d{
display:none;
}

.slideshow-container {
display: none;
}

.barr{
display:none;
}

.complimentary{
margin:40px 0;
}

.food {
display: flex;
align-items: center;
}

.food-details {
flex: 1;
}

.checkbox-label{
font-size:13px;
}

.complimentary-btn {
margin-top:10px;
background-color: white;
border-radius: 4px;
border: 1px solid #ccc;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s;
position: relative;
width:100%;
font-weight: bold;
color:#000;
}

.complimentary-btn.selected {
width:100%;
background-color: #e8e8e9;
}

.tick-icon {
position: absolute;
display: none;
width: 20px;
height: 20px;
top: 50%; 
right: 10px;
transform: translateY(-50%);
background-image: url("./Islamabad_Hotel_images/21.webp");
background-size: contain;
background-repeat: no-repeat;
}

.complimentary-btn.selected .tick-icon {
display: block;
}

.outer{
border: 1px solid #ccc;
border-radius:5px;
padding: 10px;
width:50%;
}

.complimentary-image{
width:30%;
border: 5px solid #f6f6f6;
border-radius:5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin-right: 15px;
}

.guest-details{
margin:10px 9px;
font-size:17px;
}

.price-section p{
font-size:13px;
}

.reviews{
margin:40px;
}

.heading {
font-size: 25px;
margin-right: 25px;
}

.checked {
color: orange;
}

.side {
float: left;
width: 15%;
}

.middle {
margin-top:10px;
float: left;
width: 70%;
}

.right {
text-align: right;
}

.row:after {
content: "";
display: table;
clear: both;
}

.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}

.bar-5 {width: 60%; height: 5px; background-color: #04AA6D;}
.bar-4 {width: 30%; height: 5px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 5px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 5px; background-color: #ff9800;}
.bar-1 {width: 0; height: 5px;}


@media (max-width: 787px) {

body{
overflow-x:hidden;
}

.mobile-view {
width: 100%;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0,0,0.1);
}

.slideshow-container {
position: relative;
display:block;
}

.side, .middle {
width: 100%;
}
.right {
display: none;
}

.reviews{
margin:0;
}

.thumbnail-container {
display: flex;
justify-content: center;
margin-top: 10px;
}

.thumbnail {
width: 80px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.thumbnail.active {
border: 3px solid #5291FA;
}

.swiper-container{
overflow-x: hidden;
}

.swipe-image{
width:100%;
height:200px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.back-button {
position: absolute;
top: 10px;
left: 10px;
z-index: 2; 
padding: 8px 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.share-button {
position: absolute;
top: 10px;
right: 10px;
z-index: 2; 
padding: 8px 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.a,.b{
display: none;
}

.c,.d{
display: block;
font-weight: bold;
margin-bottom: 10px;
}

.column-b{
padding: 0;
margin-left:-20px;
}

.booking-bar{
border:1px solid #ccc;
padding:10px;
border-radius:5px;
margin-top:40px;
}

.booking-bar .number-fields {
margin: 0;
margin-top: 18px;
margin-bottom: 12px;
}

.booking-bar .check-in-date, .check-out-date{
margin: 0;
margin-bottom: 5px;
width:90%;
}

.booking-bar .a {
margin:0;
}

.label-container {
margin: 0;
}

.room-type-field {
margin: 0;
width: 90%;
padding:13px;
padding-right:19px;
margin-bottom: 5px;
}

.pencil-icon {
margin: 0;
}

.price-section {
margin:0;
margin-bottom: 10px;
}

.price-section p{
font-size:15px;
margin: 0;
}

.guest-details{
margin:0;
}

.booking-button {
margin:0;
}

.fullname, .email, .phonenumber{
margin: 0;
margin-top: 15px;
}

.payment-method {
display: flex;
align-items: center;
margin:10px 0;
padding: 10px 0;
}

.payment-method label {
margin: 0;
}

.payment-method input[type="radio"] {
margin: 0;
}

.availability-bar {
display: none;
}

footer{
display: none;
}

.gallery {
display: none;
}

.container {
grid-template-columns: 1fr;
margin:20px;
}

.description {
max-height: 1500px;
overflow: hidden;
}

.column-a, .column-b{
margin:0;
}

.column-a .hotel-policy{
display: none;
}

.hotel-policy1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.hotel-policy1 h2 {
width: 100%;
margin-bottom: 10px;
}

.hotel-policy1 .policy-section {
flex-basis: 48%; 
}

.hotel-policy h5,
.hotel-policy p {
margin: 0;
}

.deluxe-double-room, .family-suite-1, .deluxe-twin-room, .family-suite-2, .economy-room-with-balcony, .deluxe-twin-bed-with-balcony, .deluxe-double-bed-with-balcony, .executive-family-room-1, .executive-family-room-2, .standard, .deluxe, .superior{
border:none;
margin:0;
}

.column-a h1{
font-size: 25px;
}

.description h2{
font-size: 20px;
}

.dbr-a{
margin-left:0;
flex-basis: 50%;
}

.dbr-b{
margin-left:0;
flex-basis: 50%;
}

.image2{
display: block;
margin-top: 100px;
margin-left:auto;
margin-right:auto;
width: 85%;
height:200px;
}

.prev,
.next,
.prev1,
.next1,
.prev2,
.next2,
.prev3,
.next3,
.prev4,
.next4 {
top:56%;
}

.next,
.next1,
.next2,
.next3,
.next4{
right: 24px;
border-radius: 3px 0 0 3px;
}

.prev,
.prev1,
.prev2,
.prev3,
.prev4 {
left: 24px;
}

.prev:hover,
.next:hover,
.prev1:hover,
.next1:hover,
.prev2:hover,
.next2:hover,
.prev3:hover,
.next3:hover,
.prev4:hover,
.next4:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.numbertext, .numbertext1, .numbertext2, .numbertext3, .numbertext4 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 40px;
position: absolute;
top: 0;
}

.image-icon {
left: 95%;
}

.select {
padding: 10px 25px;
margin-left:105px;
margin-top:10px;
margin-bottom:10px;
white-space: nowrap;
}

.select.selected  {
background-color: #e8e8e9;
position: relative;
margin-left:105px;
padding: 10px 38px;
}

.select.selected::after {
content: "";
position: absolute;
top: 50%;
margin-left:3px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url("./Islamabad_Hotel_images/21.webp");
background-repeat: no-repeat;
background-size: cover;
}

.amenities-a {
display: none;
}

.amenities-b {
display:none;
}

.amenities {
display: flex;
flex-wrap: wrap;
}

.amenities .amenity {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px; 
}

.amenities img {
width: 7%;
margin-bottom: 10px;
margin-right: 5px;
}

.amenities p {
font-size: 18px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 15px;
}

.heat{
padding-right:10px;
}

.wifi{
padding-right:10px;
}

.amenities h2 {
margin-bottom: 10px;
}

.amenities .amenities-heading {
width: 100%;
}

.abc{
display: none;
}

.important{
display: block;
margin-bottom:50px;
}

.important h2{
font-size:16px;
}

.dbr-a h4{
white-space: nowrap;
}

.dbr-b{
margin-left: -105px;
}

.details img, .details p{
display: inline-block;
vertical-align: middle;
width: 12%;
height: 12%;
}

.important a {
text-decoration: none; 
color: blue;
}

.important ul{
margin-left: -20px;
font-size: .7em;
}

.important h2{
font-size:1em;
}

.m{
display: flex;
flex-direction: column;
white-space: normal;
}

.barr{
display:flex;
position: fixed;
width:100%;
right: 0;
z-index: 999;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
color: #000;
padding: 10px 20px;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
transition: opacity 0.3s;
overflow-x: hidden;
justify-content: space-between;
}

.price-section1 {
display: inline;
align-items: center;
margin-left:25px;
}

.price-section1 p{
margin-right:5px;
font-weight:bold;
font-size:12px;
}

#price-container {
display: inline-block; 
}

.swipe {
position: fixed;
margin-left: 20px;
cursor: pointer;
color:#fff;
background-color: #5291fa;
padding: 15px 35px;
border:none;
border-radius:5px;
display: inline-block;
font-size:10px;
}

.swipe:hover{
background-color: #034fa1;
}

.column-a h1{
font-size:18px;
}
.column-a h2, .hotel-policy1 h2{
font-size:16px;
}

.column-a h3{
font-size:15px;
}
.column-a h4{
font-size:13px;
}

.hotel-policy1 h5{
font-size:13px;
}
.column-a p, .hotel-policy1 p{
font-size:12px;
}

.rooms h3{
font-size:11px;
}

.rooms p{
font-size:9px;
}

.complimentary{
margin:0;
margin-top:40px;
margin-right:20px;
}

.complimentary-image{
width:33%;
}

.complimentary h2{
font-size:1em;
}

.outer{
width:100%;
}

.showmore, .showless{
padding:7px;
font-size: 12px;
}

.checkbox-label, .rooms-guests{
font-size:13px;
}

.c, .d{
font-size:14px;
}

.payment-label {
margin-left: 10px;
}

.reviews{
margin:40px 0;
}

#selected-room-price{
font-size: 14px;
}

.heading {
font-size: 16px;
font-weight:bold;
}
  
}