.productDetailsPopup {
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    /* width: fit-content; */
    height: 99.8vh;
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark semi-transparent background */
    color: white;
    display: none;
    z-index: 1050;
    /* Ensure it appears on top */
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* margin-bottom: ; */
    /* background-color: red; */
}
.modalContainer {
    background-color: white;
    /* background-color: green; */
    color: black;
    border-radius: 8px;
    padding: 20px;
    /* width: 80%; */
    /* height: 85%; */
    height: fit-content;
    width: fit-content;
    max-width: 70%;
    margin-bottom: 2%;
}
.modalHeader{
/* background-color:red; */
text-align: right;
font-size:10px;
}

.modalHeader button{
    font-size: 12px;
    outline: none;
}

.product-popup-box{
    display: flex;
    /* background-color: aqua; */
}

.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #004e9d; */
    border-radius: 8px;
    overflow: hidden;
    width: 60%;
    /* height: 100%; */

}
.carousel-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.product-details {
    /* padding: 20px; */
    color: rgb(101, 100, 100);
    /* background-color: red; */
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    column-gap: 25px;
    row-gap: 10px;
    margin-left: 2%;
}
.product-details span{
    /* color: red; */
    color: black;
}
.product-details h2 {
    margin-top: 0;
    color: black;
    font-size: 20px;
}
.product-popup-close-btn{
    background-color: transparent;
    border-style: none;
    cursor: pointer;
}



 /* Extra Small Devices (Phones, less than 576px) */
 @media (max-width: 575.98px) {
    .product-popup-box{
        display: block;
    }
    .modalContainer{
        max-width: 95%;
    }
    .product-details{
        margin-top: 5%;
    }
  
}

/* Small Devices (Tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-popup-box{
        display: block;
    }
    .modalContainer{
        max-width: 90%;
    }
    .product-details{
        margin-top: 5%;
    }
   
}

/* Medium Devices (Desktops, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
   
}

/* Large Devices (Large Desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

/* Extra Large Devices (Extra Large Desktops, 1200px and up) */
@media (min-width: 1200px) {
    
}