.community{
  width: 100%;
  /* position: relative; */
  /* float: left; */
  /* height: 100vh; */
}

.community .card {
position: absolute;
left: 0;
top: 0;
background-position: center;
background-size: cover;
border: 0;
border-radius: 2px !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.3s ease; /* Smooth transition when images change */
}



.community #btn {
 position: absolute;
 top: 690px;
 left: 16px;
 z-index: 99;
}


.community .card-content {
 position: absolute;
 left: 0;
 top: 0;
 color: #fff;
 padding-left: 16px;
 display: none;
   
}
.content-place {
 margin-top: 6px;
 font-size: 13px;
 font-weight: 500;
}
.content-place {
 font-weight: 500;
}
.content-title-1, .content-title-2 {
 font-weight: 600;
 font-size: 20px;
}
.content-start {
 width: 30px;
 height: 5px;
 border-radius: 99px;
 background-color: #fff;
}
.details {
 z-index: 22;
 position: absolute;
 top: 240px;
 left: 60px;
   width: 93%;
}
.details .place-box {
 height: 46px;
 overflow: hidden;
}
.details .place-box .text {
 padding-top: 16px;
 font-size: 20px;
   color: #fff;
}
.details .place-box .text:before {
 top: 0;
 left: 0;
 position: absolute;
 content: "";
 width: 30px;
 height: 4px;
 border-radius: 99px;
 background-color: white;
   display: none;
}
.details .title-1, .details .title-2 {
 font-weight: 600;
 font-size: 72px;
   color: #fff;
}
.details .title-box-1{
 margin-top: 2px;
 height: 100px;
 overflow: hidden;
   color: #fff;
}
.details .title-box-2 {
  margin-top: 2px;
  height: 100px;
  overflow: hidden;
  display: none;
  color: #fff;
}
.details > .desc {
 margin-top: 16px;
 width: 500px;
   color: #fff;
}
.details > .cta {
 width: 500px;
 margin-top: 24px;
 display: flex;
 align-items: center;
}
.details > .cta > .bookmark {
 border: none;
 background-color: #ecad29;
 width: 36px;
 height: 36px;
 border-radius: 99px;
 color: white;
 display: grid;
 place-items: center;
}
.details > .cta > .bookmark svg {
 width: 20px;
 height: 20px;
}
.details > .cta > .discover {
 border: 1px solid #fff;
 background-color: transparent;
 height: 36px;
 border-radius: 99px;
 color: #fff;
 padding: 4px 24px;
 font-size: 12px;
 margin-left: 16px;
 text-transform: uppercase;
}
nav {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 36px;
 font-weight: 500;
}
nav svg {
 width: 20px;
 height: 20px;
}
nav .svg-container {
 width: 20px;
 height: 20px;
}
nav > div {
 display: inline-flex;
 align-items: center;
 text-transform: uppercase;
 font-size: 14px;
}
nav > div:first-child {
 gap: 10px;
}
nav > div:last-child {
 gap: 24px;
}
nav > div:last-child > .active {
 position: relative;
}
nav > div:last-child > .active:after {
 bottom: -8px;
 left: 0;
 right: 0;
 position: absolute;
 content: "";
 height: 3px;
 border-radius: 99px;
 background-color: #ecad29;
}
.indicator {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 height: 5px;
 z-index: 60;
 background-color: #ecad29;
}
.pagination {
 position: absolute;
 left: 0px;
 top: 0px;
 display: inline-flex;
   width: 36%;
}
.pagination > .arrow {
 z-index: 60;
 width: 50px;
 height: 50px;
 border-radius: 999px;
 border: 2px solid #fff 55;
 display: grid;
 place-items: center;
}
.pagination > .arrow:nth-child(4) {
 margin-left: 20px;
 transform: translate(0%, -50%);
}
.pagination > .arrow svg {
 width: 24px;
 height: 24px;
 stroke-width: 2;
 color: #fff 99;
}
.pagination .progress-sub-container {
  margin-left: 2px;
  z-index: 60;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.pagination .progress-sub-container .progress-sub-background {
  width: 100%;
  height: 3px;
  background-color: #fff;
  margin-top: 45px;
}
.pagination .progress-sub-container .progress-sub-background .progress-sub-foreground {
 height: 3px;
 background-color: #ecad29;
}
.pagination .slide-numbers {
  width: 54px;
  height: 75px;
  overflow: hidden;
  z-index: 60;
  position: absolute;
  right: 0;
  top: -20px;
}
.pagination .slide-numbers .item {
  width: 50px;
  height: 58px;
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-size: 60px;
  font-weight: bold;
  line-height: 0;
}
.cover {
 position: relative;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 background-color: #fff;
 z-index: 100;
}
.slider-nav {
 position: fixed;
 bottom: 20px;
 left: 8%;
 transform: translateX(-50%);
 z-index: 100;
 display: flex;
 gap: 10px;
}
.slider-nav button {
 padding: 10px 20px;
 border: 1px solid #aa8a39;
 color: #000;
 border-radius: 100px;
 cursor: pointer;
 transition: all 0.3s ease;
 width: 50px;
 height: 50px;
}
.slider-nav button:hover {
 background: rgba(255, 255, 255, 0.4);
}
button#next-btn {
 background: url(../images/icon/rgt-arrow.svg) no-repeat center;
 background-color: #aa8a39;
 border-radius: 100%;
 background-size: 28px;
}
button#prev-btn {
 background: url(../images/icon/lft-arrow.svg) no-repeat center;
 background-color: #aa8a39;
 border-radius: 100%;
 background-size: 28px;
}

.communitylogo{
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.communitylogo img{
  width: 170px;
  margin: 0 auto;
  padding: 0 !important;
}

.rotate{
  transform: scaleX(-1);
  display: inline-block;
  font-size: 20px;
}

.dtl-txt{
  width: 40%;
  float: left;
  background: #0000009c;
  padding: 30px;
  box-shadow: 0 0 69px 76px #0000009c;
}
.overlay{
  width: 100%;
  height: 100vh;
  background-color: #0000005e;
  z-index: 21;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
} 

.card.active-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
  z-index: 990;
  border-radius: 0 !important;
}

.card:not(.active-card)::after {
  display: none;
}




/* .card.active-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}


.card:not(.active-card)::after {
  display: none;
}


div#card::after {
  display: none;
} */