body {
    background-color: #f2f4ea !important;

}

/** NAVIGATION **/

.navbar {
    opacity: 1;
    background-color: #f4f2e900; 
    z-index:10;
}

nav ul {
    list-style: none;
    text-align: center;

 }


  
 
 .second-nav ul li {
    display: inline-block;
min-width: 250px;
font-family: 'vollkorn', serif;
font-size: 1.2em;
 }

 .custom-mr-auto {
    margin-left: auto;
}

.dt-logo {
    text-align: center;
    padding: 0 2em;
  }

.navbar .navbar-brand {
    margin-right: auto;
}

.amenities ul {
    list-style-type: none;
}

.room {
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

/** second navication **/

.active {
    background-color: #6e8256 !important;
    padding: .4em .8em !important;
    color: #fffff3 !important;
    font-family: "vollkorn", serif !important;
}
.active:hover {
    background-color: #829c64 !important;
    padding: .4em .8em !important;
    text-shadow: none !important;
}
.non-active{
    background-color: transparent !important;
    padding: .4em .8em !important;
}
.non-active:hover{
    background-color: #829c64 !important;
    padding: .4em .8em !important;
    color: #fffff3 !important;
    text-shadow: none !important;
}





.second-nav {
    padding: 0 !important;
    margin-top: 3em !important;
}

img {

    object-fit: cover;
    display: grid;
    margin-right: auto;
    margin-left: auto;
}

.text {
    display: grid;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 7em;
    margin-top: 2em;
}


.d-flex > div {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
  }
  
  /* To make sure both divs are the same height, we'll use a padding-top trick */
  .room-image, .bathroom-image {
    width: 25% !important; /* Adjust width if necessary */
    padding-top: 33%; /* This percentage determines the aspect ratio of the images */
  }
      .room-image, .bed-image{
        width: 50% !important; /* Adjust width if necessary */
        padding-top: 33%; /* This percentage determines the aspect ratio of the images */
      }


      .custom-img-wrapper > div {
        width: 40%; /* Adjusted to make image containers narrower */
        background-size: contain; /* Ensures the full image is visible */
        background-repeat: no-repeat;
        background-position: center center; /* Centers the image within the container */
        margin: 0 1%; /* Maintains spacing between the images */
        position: relative; /* Required for positioning the pseudo-element */
    }
    
    .custom-img-wrapper > div:before {
        content: "";
        display: block;
        padding-top: 100%; /* This controls the aspect ratio */
    }
    .custom-img-wrapper > div img {
        width: 100%;
        height: auto;
        padding-top: 5px; /* Add or reduce as needed */
        padding-bottom: 5px; /* Add or reduce as needed */
    }
    
    
    .custom-img-wrapper > div:first-child {
        margin-right: 0.5%;
        margin-left: 2%; /* Outer left margin for additional spacing */
    }
    
    .custom-img-wrapper > div:last-child {
        margin-left: 0.5%;
        margin-right: 2%; /* Outer right margin for additional spacing */
    }
    


.btn-custom {
    background-color: #829c64 !important; /* Example button color */
    color: white;
    border: none ;
    padding: 10px 20px;
    border-radius: 0 !important; /* Remove border radius for a sharp edge look */
    border: none !important; /* Remove border */
    margin: 2em 0 3em 0;
  }
  
  .btn-custom:hover {
    background-color: #6e8256 !important; /* Darken button on hover */
  }
      

/** Amenities **/
/* Directly targeting the accordion container */
#accordionPanelsStayOpenExample {
    background-color: #f2f4ea !important; /* Set your desired background color */
  }
  
  /* Styling for accordion buttons when they are not in a collapsed state */
  #accordionPanelsStayOpenExample .accordion-button:not(.collapsed) {
    background-color: #335772 ; /* Green background for expanded items */
    color: #f2f4ea !important; /* White text color for readability */
  }
  
  /* Optional: Ensuring no border is shown on accordion items */
  #accordionPanelsStayOpenExample .accordion-item {
    border: none !important;
  }
  
  /* Removing the box shadow (focus outline) when an accordion button is clicked */
  #accordionPanelsStayOpenExample .accordion-button:focus {
    box-shadow: none !important;
  }

#accordionPanelsStayOpenExample {
    display: grid;
    margin-right: auto;
    margin-left: auto;
  }
  .post-accordion {
    font-family: 'vollkorn', serif;
    color: #335772 !important;
    font-weight: 300 !important;
    font-size: 1.4em !important;
    padding-top: 1em;
  }
  
  ul {
      list-style-type: none;
  }
  i {
      margin-right: 1em;
  }


  .text h2 {
    font-family: "vollkorn", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.5em !important;
    color: #335772 !important;
  }

  .text h3 {
    font-family: "vollkorn", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2em;
    color: #335772 !important;
    padding-top: 1em;
  }

.amenities h2 button {
    font-family: "vollkorn", serif;
    font-weight: 200;
    font-style: normal;
    font-size: 1em !important;
    color: #335772 !important;
  
  }

  .amenities li strong {
    font-family: "vollkorn", serif;
    font-style: normal;
    font-size: 1.1em;
  }
  
.overview-icons {
    padding-left: 0 !important;
    color: #6c6d6e;
}
.amenities {
    padding: 0 !important;
    margin-top: 2em;

}

/** Ownerrez **/
.availability > div:nth-child(1) {
    display: grid;
    margin-right: auto;
    margin-left: auto;

    }

    .content-center {
        display: flex;
        justify-content: center;
        align-items: center;
    
    }



.ownerrez-widget {
    width: 100%; /* Adjust as necessary */
    max-width: 100%; /* Prevent it from growing larger than its container */
}
.modal img {
    max-width: 100%;
    height: auto;

}

.col-8 {
    display: flex;
    justify-content: center;
    align-items: center; /* if you also want vertical centering */
}

.col-8, .ownerrez-widget {
    margin: 0;
    padding: 0;
}


.modal-header {
    background-color: #6e8256;
    color: white;
}

.modal-content {
    border-radius: 5px;
}

.list {
    padding: 0 !important;
}

p {
    max-width: 80vw !important; /* vw units are a percentage of the viewport width */
  }
  

  .overview-icons li {
    display: inline-block;
    padding-right: 1em;
  }


  .overview-icons {
    padding-left: 0 !important;
    }

/* Desktop styles - your existing styles should already handle this */


@media (max-width: 767px) { /* Adjust for devices smaller than 768px wide */
    .text {
      padding: 0 1em !important;
      margin-bottom: 0 !important;
    }

.amenities h2 button {
    font-size: .8em !important;      

    
  }
  
}