.container {
  display: flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  gap: 20px;
  margin: 0 30px;
}
/* .banner {
  display: flex;
  direction: row;
  margin-top: 75px;
  justify-content: space-evenly;
  align-items: center;
  max-width: 1519px;
  margin-top: 100px;} */

.item {
  margin: 0 10px; 
  width: 300px; 
  height: 600px;
  display: flex;
  align-items: flex-end;
  background: #343434 no-repeat center center / cover;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(56, 53, 53, 0), rgb(19, 14, 14));
}

.item-desc {
  display: none;
}
.item-desc.active {
  display: block;
  bottom: 60px;
}

.item-desc {
  /* padding: 0 24px 12px; */
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
}

.item-desc h3 {
  font-family: 'Cormorant', serif; /* Sertakan fallback font-family */
  color: white;
  font-size: 48px;
  font-weight: 300;
  width: 300px;
  opacity: 0;
}
.item-desc.active h3 {
  font-family: 'Cormorant', serif; /* Sertakan fallback font-family */
  color: white;
  font-size: 48px;
  font-weight: 300;
  width: 300px;
  opacity: 1;
  animation: slideLeft 0.8s ease forwards;
}

.item-desc p {
  color: white;
  font-size: 16px;
  width: 380px;
  opacity: 0;
}

.item-desc.active p {
color: white;
font-size: 14px;
width: 320px;
opacity: 1;
animation: slideUp 0.8s ease forwards;
}

.item-desc .button-container {
  opacity: 0 !important;
}

.item-desc.active .button-container {
opacity: 1 !important;
animation: slideRight 1s ease forwards !important;
}

.titlebanner {
  /* margin-top: 150px; */
  max-width: 25%;
  box-sizing: border-box;
}

.container .titlebanner h1{
  font-family: 'Cormorant', serif; /* Sertakan fallback font-family */
  color: white;
  font-size: 48px;
  font-weight: 300;
  width: 300px;
}
.container .banner p{
  color: white;
  font-size: 16px;
  width: 380px;
}
.container .titlebanner {
  flex-grow: 1; 
  /* flex-basis: 30%;  */
  text-align: left; 
}

.items-wrapper {
  max-width: 75%;
  margin-top: 150px;
  display: flex;
  flex-wrap: wrap;
  transition: transform 0.4s ease-in-out; 
}

.item:hover {
  transform: scale(1.05); 
}

.item.active {
  width: 500px; 
}

.item.small {
  width: 233px; 
}

.item.active .item-desc {
  transform: none;
}

.item.active .item-desc p {
  opacity: 1;
  transform: translateY(0);
}

.item.active .item-desc h3 {
  transform: translateY(0);
}

/* .active {
  border: 2px solid #007BFF; 
} */
@media(max-width: 1868px) {
  .item{
    width: 270px; 
    height: 540px;
  }
  .item.active {
    width: 450px; 
  }
  .item.small {
    width: 209px; 
  }
}
@media(max-width: 1720px) {
  .item{
    width: 218.7px;  
    height: 437.4px;
  }
  .item.active {
    width: 364.5px;
  }
  .item.small {
    width: 169.2px;
  }
}

@media(max-width: 1400px) {
  .item{
    width: 216px;  /* 270px - 20% */
    height: 432px;
  }
  .item.active {
    width: 360px; 
  }
  .item.small {
    width:167px;
  }
  .container{
    flex-direction: column;
  }
  .titlebanner{
    max-width: 100%;
    width: 500px;
  }
  .item-desc.active{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .titlebanner{
    max-width: 100%;
  }
  .item-desc.active h3{
    width: 100%;
    font-size: 45.5px;
  }
  .container .titlebanner {
    text-align: center;
  }
  .container .titlebanner p {
    width: 88%;
    text-align: center;
    font-size: 14px;
  }
  .items-wrapper{
    max-width: 100%;
  }
}
@media (max-width: 1200px) {
  .item {
      width: calc(33.33% - 20px);
  }
}
@media (max-width: 1104px) {
  .items-wrapper{
    margin-top: 100px;
  }
  .item {
    width: 189px;  
    height: 378px; 
  }
  .item.active{
    width: 315px
  }
  .item.small{
    width: 146px;
  }
}
@media (max-width: 996px) {
  .items-wrapper .item:last-child {
    display: none;
  }
}
@media (max-width: 832px) {
.items-wrapper .item:nth-child(3){ 
  display: none;
}
}

@media (max-width: 800px) {
  .item {
      width: calc(50% - 20px); 
  }
}

@media (max-width: 800px) {
  .container{
    padding: 20px 0px;
  }
}
@media (max-width:666px) {
  .item {
    width: 170.1px;
    height: 340.2px;
  }
  .item.active{
    width: 283.5px;
  }
  .item.small{
    width: 131.4px;

  }
}
@media (max-width: 600px) {
  .item {
      width: calc(100% - 20px); 
  }
  .item-desc.active h3 {
    width: 100%;
    font-size: 36px;
    text-align: center;
}
.container .titlebanner p {
  width: 80%;
  text-align: center;
  font-size: 12px;
}

}
@media (max-width:582px) {
  .item{
    width: 153px;
    height: 306px;
  }
  .item.active{
    width: 255.15px;
  }
  .item.small{
    width:118.26px ;
  }
}

@media (max-width:538px){
  .item{
    width: 137.7px;
    height: 275.4px;
  }
  .item.active{
    width: 229.5px;
  }
  .item.small{
    width: 106.2px;
  }
}

@media(max-width:507px){
  .items-wrapper{
    margin-top: 120px;
  }
  .item {
    width: 123.93px;
    height: 247.86px;
  }
  
  .item.active {
    width: 206.55px;
  }
  
  .item.small {
    width: 95.58px;
  }
}

@media(max-width:466px){
  
  
  .item {
    width: 111.54px;    /* 123.93 × 0.9 */
    height: 223.07px;   /* 247.86 × 0.9 */
  }
  
  .item.active {
    width: 185.90px;    /* 206.55 × 0.9 */
  }
  
  .item.small {
    width: 86.02px;     /* 95.58 × 0.9 */
  }
}
@media(max-width:390px){
 .item{
  width: 100.3px;
  height: 200.7px;
}
.item.active{
  width:167.31px ;
}
.item.small{
  width: 77.4px;
}
}