.page-layout-offer-listing-page-layout .column.main,
.page-layout-offer-listing-page-layout .sections.nav-sections {
    display: none;
}
  

.page-layout-offer-listing-page-layout .category-description{
  margin-bottom: 0;
}

.offer-listings-container hr{
  background-color: #cecece;
  margin: 10px 0;
}

.page-layout-offer-listing-page-layout .offer-listings-container , .page-layout-offer-detail-page-layout .offer-listings-container{
  width: 70%;
  margin: 0 auto;
}

.offer-listings-container {

  padding-left: 25px;
  padding-right: 25px;

}

  .box-content-room-breakdown {
  
    display: flex;
    flex-direction: column;
  }
  
  hr {
    border: none;
    height: 1px;
    background-color: #333; /* Divider color */
  }
  
  .content-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns items at the start of the container */
    gap: 40px; /* Adjust the space between the image and the text content */
    margin-top: 40px;
  }
  
  .image-container img {
    width: 100%; /* Makes the image responsive */
    max-width: 454px; /* Adjust based on your preference */
    height: auto; /* Maintains the aspect ratio of the image */
  }
  .offer-listing-container   .image-container img{
    height: 290px; 
    object-fit: cover;
    width:450px;


  }
  
  .text-container {
    flex: 1; /* Allows the text container to fill the remaining space */
    display: flex;
    flex-direction: column; /* Stacks the items vertically */
    justify-content: space-between; /* Distributes space around items */
  }

  .offer-listings-container .text-container ul{
    list-style-position: inside;
  }

  .offer-listing-container .text-container h2{
    font-weight: 500;
    font-size: 24px;
    font-family: garamond-premier-pro, serif;
  }
  
  .text-container h2 {
    margin: 0 0 10px; /* Adds spacing between the text elements */
    width: 60%;
  }
  .page-layout-offer-listing-page-layout .offer-listings-container .offer-listing-container .text-container p ,.page-layout-offer-detail-page-layout .offer-listings-container .offer-listing-container .text-container p{
    margin: 0 0 10px; /* Adds spacing between the text elements */
  }
  .align-right {
    margin-left: auto; /* Pushes the button to the right */
    padding: 10px 20px; /* Adjust padding to suit your design */
    cursor: pointer; /* Adds the pointer cursor on hover */
    background-color: #007bff; /* Example button color */
    color: white; /* Text color */
    border: none; /* Removes the default border */
    border-radius: 5px; /* Optional: adds rounded corners to the button */
  }
  
  .button-text-wrapper {
    display: flex;
    align-items: center; /* Ensures vertical alignment is centered */
    justify-content: flex-start; /* Aligns content to the start */
    gap: 30px; /* Adjusts the space between the button and the additional info */
    padding-top: 2%;
  }
  
  .action-button {
    padding: 10px 20px; /* Adjust padding to suit your design */
    cursor: pointer; /* Adds the pointer cursor on hover */
    background-color: #007bff; /* Example button color */
    color: white; /* Text color */
    border: none; /* Removes the default border */
    border-radius: 5px; /* Optional: adds rounded corners to the button */
  }
  
  .roomtyperates-rate {
    text-align: bottom; /* Aligns all content to the center */
  }
  
  .startfrom {
    display: block; /* Makes this span behave like a block, placing it above the price */
    font-size: 0.8em; /* Smaller than the price */
    color: #666; /* Dim color for the supplementary text */
    text-transform: uppercase;
  }
  
  .price-section {
    display: flex;
    align-items: baseline; /* Aligns the price and the details at their baseline for a nice effect */
    justify-content: center; /* Center align the items */
    gap: 5px; /* Adds a small space between the price and the details */
    text-transform: uppercase;
  }
  
  .rate.price {
    font-size: 2.5em; /* Larger font size for emphasis */
    font-weight: bold; /* Makes the price bold */
    color: #000; /* Example color for price */
  }
  
  .rate-small {
    font-size: 0.8em; /* Smaller text for the details */
    color: #666; /* Dim color to not overpower the main price */
  }
  
  .cents,
  .pernight {
    font-size: 1em; /* Keeps these elements in line with the 'rate-small' size but allows for individual styling */
  }
  
  .offer-listing-button {
    font-family: garamond-premier-pro, serif;
    display: block;
    letter-spacing: 0.063rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    background-color: #aa9471;
    border-radius: 0.188rem;
    border: none;
    cursor: pointer;
    padding: 0.625rem 1.25rem;
  }
  .offer-listing-button:hover{
    color: #fff;
    background-color: #97805f;
    border: none;
  }
  .offer-listing-button:focus {
    color: #fff;
    background-color: #aa9471;
    border: none;
  }
  .offer-listing-button:focus:hover {
    background-color: #97805f;
    border: none;
  }
  .offer-listing-page-banner-position {
    position: relative;
  }
  .offers-listing-page-banner-text{
    z-index: 2;
  }

  


.top-cal-container {
  background-color: #3a3a3a99;
  padding: 20px;
  display: flex;
  align-items: center; /* Aligns items vertically center */
  justify-content: flex-start; /* Aligns items to the start of the container */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 710px;
}


.top-cal-input-group {
  margin-right: 20px; /* Adds space between the input groups */
}

.top-cal-input-group label {
  display: block; /* Ensures the label is on its own line */
  margin-bottom: 5px; /* Adds a small space between the label and the input */
  color: white; /* Sets the text color of the label to white */
  font-size: 0.8rem;
}

.top-cal-input-group input {
  border: 2px solid #ccc; /* Sets the border color of the input */
  border-radius: 5px; /* Rounds the borders of the input */
  padding: 10px; /* Adds some padding inside the input box for better text visibility */
  outline: none; /* Removes the outline to use only the border styling */
}

/* Enhances the input focus state */
.top-cal-input-group input:focus {
  border-color: #4A90E2; /* Changes the border color to indicate focus */
}

@media (max-width: 992px) {
 .button-text-wrapper{
  flex-direction: column;
 }
 .offer-listing-button{
  width: 100%;
 }

  .align-right {
      margin-left: 0; /* Aligns the button normally on smaller screens */
  }
  .offer-listing-container .text-container h2,
  .offer-listing-container .text-container p{
    width: 100%;
  }
  
  .offer-listing-container .image-container img{
    max-width: 100%;
  }

  .offer-cal-form .offerPicker{
    margin: 0 auto;
    overflow: scroll;
  }

  .offer-listing-container .button-text-wrapper{
    justify-content: center;
  }
}
@media (max-width: 830px) {
  .content-wrapper {
    flex-direction: column;
    /* Stacks the image above the text on smaller screens */
  }

  .image-container {
    width: 100%;
  }

  .offer-listing-container .button-text-wrapper {
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .offer-listing-button {
    width: max-content;
  }

  .offer-listing-container .image-container img {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .offer-listings-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .offer-listing-container .button-text-wrapper{
    flex-direction: column;
    align-items: unset;
    margin-top: 20px;
  }

  .offer-listing-container .roomtyperates-rate {
    text-align: center;
  }

  .offer-listing-container .offer-listing-button{
    width: 80%;
    margin: 0 auto;
  }
  .offer-listing-container .image-container img{
    height: 270px; 
    object-fit: cover;
  }
}