.showroom_main_container {
    width: 100%; 
    height: 840px; 
    /* padding-left: 16px;
    padding-right: 16px; */
    /* padding-top: 12px;
    padding-bottom: 12px; */
    justify-content:center; 
    align-items: center;
    display: inline-flex;
    transition-duration: 400ms;
}

.showroom_main_container .showroom_section {
    width: 740px;
    height: 740px;
    position: relative;
    transition-duration: 400ms;
}

@media screen and (min-width:768px) {

    .showroom_main_container .showroom_section .category {
        width: 180px;
        height: 180px; 
        position: absolute;
    }

    .category.Laminate {
        left: 82px; top: 82px;
    }
    .category.Carpet {
        left: 0px; top: 280px;
    }
    .category.Stairs{
        left: 82px; top: 478px;
    }
    .category.Transition{
        left: 280px; top: 560px;
    }
    .category.Tile {
        left: 560px; top: 280px; 
    }
    .category.Hardwood {
        left: 280px; top: 0px; 
    }
    .category.SPC {
        left: 478px; top: 82px;
    }

    .category.BaseBoard ,
    .category.Baseboard {
        left: 478px; top: 478px; 
    }

    .Laminate_name {
        left: 29px; top: 76px;
    }
    .Carpet_name {
        left: 45px; top: 76px;
    }

    .Stairs_name{
        left: 50px; top: 76px;
    }
    .Transition_name{
        left: 22px; top: 76px;
    }
    .Tile_name {
        left: 65px; top: 76px; 
    }
    .Hardwood_name {
        left: 53px; top: 76px; 
    }
    .SPC_name {
        left: 63px; top: 76px;
    }

    .BaseBoard_name,
    .Baseboard_name {
        left: 19px; top: 76px;
    }

    .image_div {
        cursor: pointer;
        width: 180px; height: 180px; left: 0px; top: 0px; position: absolute; border-radius: 500px; overflow: hidden; 
        border: 4px solid var(--natural-border);  justify-content: center; align-items: center; display: inline-flex;
    }
    
  
}


.mobile_showroom {
    width: 240px;
    height: 240px;
    left: 250px;
    top: 250px;
    position: absolute;
}

.image_div_mobile {
    cursor: pointer;
    border: 4px solid var(--natural-border) ; border-radius: 500px;
    width: 240px; height: 240px; overflow: hidden; justify-content: center; align-items: center; display: inline-flex;
    left: 200px;
}

.image_div:hover, .image_div.active ,
.image_div_mobile:hover ,.image_div_mobile.active{
    border-color: var(--materialcolororange-300);
    cursor: pointer;
    /* box-shadow: 0px 12px 16px -4px rgba(239, 108, 0, 0.10), 0px 4px 6px -2px rgba(239, 108, 0, 0.05); */
    box-shadow: var(--shadow-orange-lg-orange);

}

.custom-text:hover {
    cursor: pointer;
}

.image_div.category_image {
    /* width: 364.98px; height: 187px */
}

.left-top-0 {
    left: 0px; top: 0px
}

.text-cat {
    text-align: center; font-size: 24px; font-weight: 800; text-transform: capitalize; line-height: 28px; letter-spacing: 1.80px; word-wrap: break-word
}
.text-cat-product {
    text-align: center; font-size: 19px; font-weight: 800; text-transform: capitalize; line-height: 28px; letter-spacing: 1.80px; word-wrap: break-word
}
/* Model  */

.sideNav {
    position: absolute;
    right: -20px;
    /* left: auto; */
    top: 12px;
}

.model_mian_container{
    width: 250px;
    height: 816px;
    background: #FFF8E1;
    border-radius: 16px;
    /* overflow-y: auto; */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
}
.model_container_head{
    align-self: stretch; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 12px; justify-content: space-between; align-items: center; display: inline-flex
}
.model_name{
    color: #48473B; font-size: 20px; font-weight: 500; line-height: 30px; word-wrap: break-word
}
.model_container_body{
    height: 744px; overflow: auto; gap: 12px;width: 100%;
    padding-top: 8px; flex-direction: column; align-items: center; display: flex;padding-bottom: 12px;
}
/* .model_container_card { 
    align-self: stretch; height: 500px; padding-left: 16px; padding-right: 16px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex
} */

.model_container_card { 
    align-self: stretch;  padding-left: 16px; padding-right: 16px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex
}

/*this css for the home page recently view products*/
.card_section{
    width: 208px !important; height: 280px; position: relative; background: white; border-radius: 12px; border: 1px solid var(--natural-border);
}
.card_image_div{
    width: 208px; height: 280px; left: 0px; top: 0px; position: absolute; border-radius: 12px; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex;
}
.card_section:hover{
    border: 1px solid var(--materialcolororange-300);
    cursor: pointer;
    /* box-shadow: 0px 12px 16px -4px rgba(239, 108, 0, 0.10), 0px 4px 6px -2px rgba(239, 108, 0, 0.05); */
    box-shadow: var(--shadow-orange-lg-orange);
}
.card_image{
    width: 208px; height: 208px;
}
.card_description_container{
    align-self: stretch; height: 72px;
    padding: 12px 8px;
    justify-content: flex-start; align-items: center; display: inline-flex;
}
.card_description{
    align-self: stretch; height: 45px; color: #1C1C14; font-size: 16px; font-weight: 500; line-height: 24px; word-wrap: break-word ;overflow: hidden; 
}
    


/* Chrome, Edge, and Safari */
@media screen and (min-width:768px) {
    .model_container_body::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
      
    .model_container_body::-webkit-scrollbar-track {
        background: #eee;
        border-radius: 5px;
    }
    
    .model_container_body::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 14px;
        border: 3px solid #bbb;
    }
}

#backgroundOverlay{
    background-color:transparent;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:none;
    z-index: 11;
}

#modalDialog {
    display:none;
    z-index: 22;
}

.showroom_content {
    display:flex;flex-wrap: wrap; justify-content: center; padding:8px 16px
}

@media (max-width:767px) {
    .showroom_main_container
    .transition-width {
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: 600ms
    }

    .showroom_main_container {
        width: 100%; 
        height: 410px; 
    }

    .showroom_main_container .showroom_section {
        height: 583px;
    }

    .mobile_showroom {
        left: 40% ;
        top: 30%;
        padding: 12px;
        width: 180px !important;
        height: 180px !important;
        /* display: none; */
    }
    .image_div_mobile{
        /* display: none; */
        top: 0% !important; 
        margin-left: 0% !important;      
        width: 180px !important;
        height: 180px !important;
    }
    .mob_view_position {
        top: 25% !important;        /* Keep the top position as is, but feel free to adjust */
        left: 7% !important;       /* Center the element horizontally */
        z-index: 999;                /* Ensure text is above image */
    }
    .mobile_showroom_main_container{
        height: 580px; padding: 0px;margin: 0px;
    }
    
    /* .mobile_view_showroom {
        height: 100%;        align-items: center;
        position: absolute;
        padding: 12px;
        left:200px;
        flex-direction: row;
        column-gap: 16px;
        row-gap: 20px;
        max-height: 580px;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        
    } */

.right-top-200 {
    position: fixed;  
    top: 73%;    
    align-items: center;
    position: absolute;
    max-height: 580px;
    max-width: 100%;
    margin-left: 95%;
    
    z-index: 999;
    
}
    .mobile_view_showroom {
    height: 100%;
    width: 200px; /* Adjust as needed */
    align-items: center;
    position: absolute;
    padding: 12px;
    left: 0px;
    flex-direction: row;
    column-gap: 16px;
    row-gap: 20px;
    max-height: 580px;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* z-index: 999; */
    
    -ms-overflow-style: none;     
    scrollbar-width: none;        
}
.mobile_view_modalDialog{

    /* margin-top: 80px; */
    width: 70;
}
 /* .mobile_view_showroom {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 200px;
      padding: 12px;
      background-color: white;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 16px;

      overflow-y: auto;
      overflow-x: hidden;

      
      -ms-overflow-style: none;     
      scrollbar-width: none;        
  } */

.mobile_view_showroom::-webkit-scrollbar {
    display: none;                /* Chrome, Safari, Opera */
}


    .image_div_mob_view {
        cursor: pointer;
        margin-bottom: 20px;
        border-radius: 500px; 
        border: 2px solid var(--natural-border); 
        justify-content: center;
        align-items: center;
        width: 135px;
        height: 50px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        display: flex;
        background-size: cover;
        background-position: 50% 50%;
    }
    
    .model_mian_container {
        height: calc(570px - 18px);
    }
    
}


.mobile_view_showroom.transition-all a {
    padding-top: 2px;
}

.mobile_view_showroom.transition-all {
    overflow: hidden;
}
 #IntersectionObserver {
    top: 0 !important;
 }

.filter-image{
  position: relative;
}
.filter-badged{
  position: absolute !important;
  right: 1.3rem;
  padding: 1px 5px !important;
}
/* Base Button */
.custom-btn{
    display: inline-flex;
    height: 40px; /* Default value for --10 */
    justify-content: center;
    align-items: center;
    gap: 8px; /* Default value for --2 */
    border-radius: 999px; /* Default value for --full */
    border: 1px solid #767969; /* Default value for --1 and --Schemes-Outline */
    font-weight: bold;
}
.custom-btn-clear {
  color: #805600;
  width: 125px;
}

.custom-btn-clear:hover{
    background-color: rgba(216, 150, 24, 0.08);
}
.custom-btn-clear:active {
  background-color: rgba(216, 150, 24, 0.12); /* light amber */
}
.custom-btn-clear:focus {
  background-color: rgba(216, 150, 24, 0.12); /* light amber */
  border: 1px solid #805600;
  outline: none;
}
.custom-btn-clear:disabled {
    border-radius: 999px;
    border: 2px solid rgba(27, 28, 22, 0.12); /* Border color with transparency */
    color: rgba(27, 28, 22, 0.38) !important; /* Text color like the SVG */
    background-color: transparent; /* Transparent background */
}
/* --- Cancel Button --- */
.custom-btn-cancel {
  color: #BA1A1A;
  width: 115px;
}

.custom-btn-cancel:hover{
      background-color: rgba(186, 26, 26, 0.08);
}
.custom-btn-cancel:active{
      background-color: rgba(186, 26, 26, 0.12); /* light red */
}
.custom-btn-cancel:focus {
  background-color: rgba(186, 26, 26, 0.12); /* light red */
  border: 1px solid #BA1A1A;
   outline: none;
}

/* --- Confirm Button --- */
.custom-btn-confirm {
  color: #536525;
  width: 123px;
}
.custom-btn-confirm:hover{
    background-color:rgba(81, 102, 26, 0.08) ;/* light green */
}
.custom-btn-confirm:active {
  background-color:rgba(81, 102, 26, 0.12) ;/* light green */
}
.custom-btn-confirm:focus {
  background-color:rgba(81, 102, 26, 0.12) ;/* light green */
  border:1px solid #536525;
  outline: none;
}

/* For Mobile - screens less than or equal to 480px */
@media (min-width: 0px) and (max-width: 480px) {
  .custom-btn-clear span,
  .custom-btn-cancel span,
  .custom-btn-confirm span {
    display: none; /* Hide text */
  }

  /* Button styles for mobile */
  .custom-btn-clear,
  .custom-btn-cancel,
  .custom-btn-confirm {
    display: inline-flex; /* Ensure button keeps its structure */
    width: 12vw; /* Fixed width for mobile screens */
    height: 6vh; /* Fixed height for mobile screens */
    margin-bottom: 10px; /* Space between buttons */
    padding: 0; /* Remove padding to fit the icon */
    align-items: center;
    justify-content: center;
    border: none !important;
    background-color: transparent !important;
    gap: 0px !important;
  }

  .custom-btn-icon {
    width: 70%; /* Icon size for mobile */
    height: auto; /* Maintain icon's aspect ratio */
  }
}

/* For Screens Between 480px and 600px (Larger Mobile Devices) */
@media (min-width: 480px) and (max-width: 600px) {
  .custom-btn-clear,
  .custom-btn-cancel,
  .custom-btn-confirm {
    width: 25vw; /* Adjust width for tablets and small screens */
    height: 6vh; /* Button height for these screens */
    margin-bottom: 15px; /* Space between buttons */
    font-size: 14px; /* Slightly smaller font size */
  }
}

/* For Small Tablets/Medium Screens - Between 600px and 768px */
@media (min-width: 600px) and (max-width: 768px) {
  .custom-btn-clear,
  .custom-btn-cancel,
  .custom-btn-confirm {
    width: 20vw; /* Adjust width for tablets */
    height: 7vh; /* Button height for these screens */
    font-size: 15px; /* Adjust font size */
  }
}

/* For Tablets/Medium Screens - Between 768px and 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-btn-clear,
  .custom-btn-cancel,
  .custom-btn-confirm {
    width: 15vw; /* Adjust width for larger tablets */
    height: 7vh; /* Button height */
    font-size: 16px; /* Standard font size */
  }
}