#for_sale {
   width: 100%;
   height: fit-content;
   display: flex;
   flex-direction: column;
   padding: 30px;
   row-gap: 30px;
   padding-top: 80px;
   padding-bottom: 80px;
   position: relative;
}

#for_sale .category {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   gap: 30px;
   margin-top: 30px;
}



#for_sale .category h2 {
   color: #f2f2f2;
   font-size: 26px;

   width: fit-content;
   height: fit-content;

}

#for_sale .category .remove_category_btn {
   background-color: #bc3131;
   color: rgb(239, 239, 239);
   padding: 10px 20px;

   border: none;
   outline: none;
   border-radius: 1000px;
   -webkit-border-radius: 1000px;
   -moz-border-radius: 1000px;
   -ms-border-radius: 1000px;
   -o-border-radius: 1000px;

   cursor: pointer;
}

#for_sale .category .remove_category_btn:hover {
   background-color: #9d1f1f;
}

#for_sale .properties {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-shrink: 0;
   flex-wrap: nowrap;
   width: 100%;
   height: fit-content;
   column-gap: 20px;
   overflow-x: auto;
   padding: 15px 0;
   padding-top: 0;
   padding-bottom: 30px;
   position: relative;
   margin-bottom: 30px;

}

/* Custom scrollbar for WebKit browsers */
#for_sale ::-webkit-scrollbar {
   height: 14px;
}


#for_sale ::-webkit-scrollbar-track {
   background: #282828;
   border-radius: 10px;
}

#for_sale ::-webkit-scrollbar-thumb {
   background-color: #ffcc00;
   /* Scrollbar color */
   border-radius: 10px;
   border: 2px solid #282828;
   /* Optional border to match background */
}


#for_sale .properties .property {
   width: 400px;
   height: fit-content;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   flex-shrink: 0;
   gap: 10px;
   text-decoration: none;
   padding: 8px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   position: relative;
}

#for_sale .properties .property:hover {
   background-color: #ffffff23;
}

#for_sale .properties .property div {
   width: 100%;
   height: 100%;
   text-decoration: none;
   margin: 0;
   padding: 0;
}


#for_sale .properties img {
   width: 100%;
   height: auto;

   aspect-ratio: 16/9;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

#for_sale .properties div span {
   color: white;
   line-height: 1.6;
}



#for_sale .properties .property.add_new {
   height: auto;
   aspect-ratio: 16/10;
   background-color: #212121;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

#for_sale .properties .property.add_new button {
   width: fit-content;
   height: fit-content;
   padding: 12px 20px;
   border: none;
   outline: none;
   background-color: #00a035;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border-radius: 100px;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   -ms-border-radius: 100px;
   -o-border-radius: 100px;
   color: white;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   cursor: pointer;
}

#for_sale .properties .property.add_new:hover {
   background-color: #3d3d3d;
}

#for_sale .properties .property.add_new:hover button {
   background-color: #006d26;
}



.slider-container {
   width: 100%;
   max-width: 1000px;
   margin-inline: auto;

   height: fit-content;
   display: flex;
   flex-direction: column;

}

.move_btns {
   width: fit-content;
   height: fit-content;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 15px;
   position: absolute;
   top: -50px;
   left: 0;
}

.category .move_btns {
   position: relative;
   inset: 0;
}

.move_btns button {
   width: 45px;
   height: 45px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border: none;

   outline: none;
   background: none;
   cursor: pointer;
}

.move_btns button svg {
   width: 45px;
   height: 45px;
   pointer-events: none;
}

.move_btns button:hover svg rect {
   stroke: rgb(10, 246, 10);
}

/* General Styling */
.house-showcase {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}



.dots-container {
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   gap: 15px;
   width: 100%;
   height: 100px;
}

.dots-container:hover {
   gap: 45px;
}

.dots-container:hover .dot {
   width: 25px;
   height: 25px;
}

.dot {
   width: 8px;
   height: 8px;
   background-color: #5d5d5d;
   border-radius: 100px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   -ms-border-radius: 100px;
   -o-border-radius: 100px;
}

.dot:hover {
   background-color: #fff;
}

.dot.active {
   width: 30px;
   background-color: #ce8507;
   /* Highlighted dot */
}


/* Slider Images Styling */
.slider-image {
   position: absolute;
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
   top: 0;
   left: 100%;

}

.slider-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}


.current-image-content {
   padding-left: 45px;
   color: #fff;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 15px;
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   background: linear-gradient(89.91deg, rgba(0, 0, 0, 0.54) -6.17%, rgba(153, 153, 153, 0) 111.52%);
}

.current-image-content h1 {
   font-size: 28px;
   margin-bottom: 10px;
}

.current-image-content p {
   font-size: 1.2rem;
   margin-bottom: 20px;
}

.current-image-content .btn-details {
   padding: 10px 20px;
   font-size: 17px;
   color: #fff;
   background-color: #ff7a59;
   border: none;
   border-radius: 100px;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.3s;
}

.current-image-content .btn-details:hover {
   background-color: #ad3017;
}





.slider-image.add_new {
   background-color: #212121;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.slider-image.add_new button {
   width: fit-content;
   height: fit-content;
   padding: 12px 20px;
   border: none;
   outline: none;
   background-color: #00a035;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border-radius: 100px;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   -ms-border-radius: 100px;
   -o-border-radius: 100px;
   color: white;
   cursor: pointer;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

.slider-image.add_new button:hover {
   background-color: #006b24;

}



.nav-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 60px;
   height: 60px;
   border: none;
   background-color: transparent;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color 0.3s;
   background-color: #ffffff17;
}

.nav-button:hover {
   background-color: rgba(255, 255, 255, 0.3);
}

.nav-button.left {
   left:0;
}

.nav-button.right {

 right:0;
}

.nav-button svg {
   display: block;
   width: 25px;
   height: 25px;
}




@media (max-width: 600px) {
   .house-showcase .current-image-content h1 {
      font-size: 22px;
   }

   .house-showcase .current-image-content p {
      font-size: 12px;
   }

}



@media (max-width: 500px) {
   #for_sale {
      padding-inline: 5px;
   }

   #for_sale .house-showcase {
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      -ms-border-radius: 15px;
      -o-border-radius: 15px;
      aspect-ratio: 16/10;
   }

   #for_sale .house-showcase .slider-image {
      aspect-ratio: 16/10;

   }

   #for_sale .properties .property {
      width: calc(100vw - 40px - 40px);
   }
}