img.ode {
    text-align: center;
    height: 100%;
}
.tj-header-area .logo-box {
    max-width: 200px;
    width: 100%;
    margin-right: 0;
}
.ban-te.text-center {
    z-index: 99;
}
.tj-hero-5-thumb-mobile img {
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 100%;
    top: 0px;
}
.tj-hero-5-thumb-mobile {
    max-width: 100%;
    width: 100%;
    margin: auto;
    margin-top: 40px;
}
/* banner */


.custom-amenity-content img {
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  border-radius: 20px;
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
}

    body {
  height: 100%;
  overflow-y: hidden;
}

.slides-nav {
  z-index: 99;
  position: absolute;
  right: -5%;
  display: flex;
  align-items: center;
  height: 100%;
  color: #ffff;
}
@media (min-width: 54em) {
  .slides-nav {
    right: 2%;
  }
}
.slides-nav__nav {
  position: relative;
  right: 0;
  display: block;
  font-size: 1em;
  transform: rotate(90deg);
  transform-origin: center;
}
.slides-nav button {
  position: relative;
  display: inline-block;
  padding: 0.35em;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  overflow-x: hidden;
  transition: color 0.5s ease;
}
.slides-nav button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 0;
  background: #111;
  transition: width 0.4s ease;
}
.slides-nav button:hover {
  cursor: pointer;
  color: rgba(17, 17, 17, 0.75);
  transition: color 0.5s ease;
}
.slides-nav button:hover:after {
  width: 100%;
  transition: width 0.4s ease;
}
.slides-nav button:focus {
  outline: 0;
}
.is-sliding .slides-nav {
  pointer-events: none;
}

.slides {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background: #fff;
  transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}
.is-sliding .slides {
  background: #ededed;
  transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}

.slide {
  z-index: -1;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100vh;
  transition: z-index 1s ease;
}
.slide.is-active {
  z-index: 19;
  transition: z-index 1s ease;
}
.slide__content {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    top: 0;
}
@media (min-width: 54em) {
    .slide__content {
        height: 100%;
        width: 100%;
        top: 0;
    }
}
.slide__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: hidden;
  transform: translateX(5%);
}
@media (min-width: 54em) {
  .slide__header {
    transform: translateX();
  }
}
.slide__title {
  font-size: 2.5em;
  font-weight: 700;
  color: #111;
  overflow-y: hidden;
}
@media (min-width: 54em) {
  .slide__title {
    font-size: 5em;
  }
}
.slide__title .title-line {
  display: block;
  overflow-y: hidden;
}
.slide__title .title-line span {
  display: inline-block;
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.8s ease;
}
.slide__title .title-line span:nth-child(1) {
  transition-delay: 0.15s;
}
.slide__title .title-line span:nth-child(2) {
  transition-delay: 0.3s;
}
.is-active .slide__title .title-line span {
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
}
.is-active .slide__title .title-line:nth-of-type(2n) span {
  transition-delay: 0.2s;
}
.slide__figure {
  z-index: 7;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-sliding .slide__figure {
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.slide__img {
  position: relative;
  display: block;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50%;
  -webkit-backface-visibility: hidden;
  height: 0%;
  width: 100%;
  filter: grayscale(0%);
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
}
.is-active .slide__img {
  height: 100%;
  opacity: 1;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
}
.is-sliding .slide__img {
  filter: grayscale(100%);
}
/* Banner end */


.tj-project-7-thumb img {
    max-width: 100%;
}

/* tab  */


/* Container for the amenities section */
.amenities-container {
   
    align-items: center;
   
  }
  
  /* Left side (text + amenities) */
  .amenities-left {
    width: 50%;
    padding-right: 20px;
  }
  
  .amenities-left h2 {
    margin: 0 0 10px;
    font-size: 24px;
  }
  
  .amenities-left p {
    font-size: 14px;
    color: #666;
  }
  
  /* Pills styling */
  .amenity-pill {
    display: inline-block;
    padding: 8px 14px;
    margin: 5px;
    border-radius: 20px;
    background-color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .amenity-pill:hover {
    background-color: #d1d1d1;
  }
  
  /* Active amenity */
  .amenity-pill.active {
    background-color: #23224b;
    color: white;
  }
  
  /* Right side (content box) */
  .amenities-right {
    flex-grow: 1;
    text-align: center;
    /* background-color: white; */
    height: 100%;
    border-radius: 10px;
    padding: 20px;
    /* border: 1px solid #ddd; */
  }
  
  .amenity-content {
    display: none;
    font-size: 16px;
  }

  .amenity-content img{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    border-radius: 20px;
    width: 400px;
    height:400px;
    object-fit: cover;
  }

/* tab end  */


.resort-slider-container {
    width: 100%;
    overflow: hidden;
}
.resort-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff00;
    padding: 10px;
    border-radius: 10px;

    text-align: center;
}
.resort-slide img {
    width: 100%;
    max-width: 250px !important;
    border-radius: 10px;
    height: 180px;
}
.resort-details {
padding:5px;
color:#fff;
    margin-top: -92px; 
text-align:start;
}
.resort-details h4 {
 text-align:start;
    margin: 5px 0;
font-weight:600;
    font-size: 18px;
    color: #fff;
}
.resort-details p {
    font-size: 14px;
    color: #fff;
text-align:start;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    position: relative !important;
    padding: 20px;
    margin: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    position: relative !important;
    padding: 20px;
    margin: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 19px !important;
    color: #000 !important;
    font-weight: 600 !important;
}
.swiper-backface-hidden .swiper-slide {
    margin: 1px;
}
.btm{
    border-radius: 20px;
    padding: 20px;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}
h2.slide__title{
    text-align: center;
    padding: 50px 90px;
    font-size: 50px !important;
    background: #00000045;
    color: #fff;
}
header#mainHeader {
    padding: 10px;
    margin-top: 0;
}

.contact-section {
  padding-top: 70px;
  padding-bottom: 70px;
}
a:focus, a:hover {
  text-decoration: none !important;
}
.progress-single.style-5 p {
  color: #000;
  text-align: justify;
}
.amenity-content{
  text-align: center;
}
span.custom-amenity-pill {
    display: inline-block;
    padding: 8px 14px;
    margin: 5px;
    border-radius: 20px;
    background-color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.custom-amenity-content img{
border-radius:20px;
}
.custom-amenity-content {
    text-align: center;
}
  /* Active amenity */
  .custom-amenity-pill.active {
    background-color: #23224b;
    color: white;
  }
@media(min-width:992px){
  .o-resort{
    width: 75%;
  }
.resort-slider-container {
    width: 120%;
    overflow: hidden;
}
.resort-details {
    padding: 5px 10px;
    color: #fff;
    margin-top: -115px; 
}

}
@media(max-width:991px){
.resort-details {
    padding: 5px;
    color: #fff;
    margin-top: -150px;
}
}
.resort-slide img {
    width: 100%;
    max-width: 303px !important;
    border-radius: 0px;
    height: 240px;
}

@media(max-width:546px){

  .slide__header {
    transform: translateX(0%);
}
.desc p {
  text-align: justify;
}
.card-top {
  padding: 5px 15px;
}
.amenities-container p {
  text-align: justify;
}
.section-header p {
  text-align: left;
}
.resort-slide img {
  height: 150px;
}
.section-header p {
  text-align: justify;
}
}