/*  products section Start*/

.product-img a{
    display: block; 
}

.product-img-wrapper{
    height: 250px;  
}
.product-img-wrapper img{
    border-radius: 1rem;
    display: block;
    height: 100%; 
    width: 100%; 
    object-fit: cover;
    object-position: center;
}

.product-content h4{
    text-align: center;
}


.product-content{
    padding: 40px 30px 10px; 
}


.major-product, .additional-product-info{
    padding: 5px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    border:1px solid rgb(27, 193, 223); 
    border-radius: 12px;
    background: none;        
}

.major-product{
    margin: 25px auto 0;
    width: 90%;
    cursor: pointer;
    position: relative;
    min-height: 50px;
}

.fav-wrapper{
    flex-basis: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
}

.fav-wrapper svg{
    display: block;
    width:70%;
    height: 100%;
    object-fit: cover;
}
.fav-wrapper svg path{
   fill: #00c7d2;
}

.product-label{
    font-size: 18px; 
    flex-basis: 150px;
    margin: 0;
    min-height: 25px;
    display: flex;
    align-items: center;
}

.minor-product-label{
    justify-content: center;
}

.product-img{
    width: 90%; 
}

/* Our Product Dialog Start */


.product-additional-info{
    max-width: 50%;
    border: none; 
    padding: 0;  
    height: 40vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    border-radius: 12px;
}

dialog.open-additional-info[open]{
    animation: showProductAdInfoModal 1s ease;
}

dialog.hide-additional-info[open]{
    animation: hideProductAdInfoModal 1s ease; 
    animation-fill-mode: forwards;
}

dialog.hide-additional-info[open]::backdrop{
    opacity: 0;
    animation: hideBackdrop 1s ease; 
}

.product-info-modal-close{
    display: block; 
    width: fit-content; 
    margin-left: auto;
    background: rgba(255, 94, 0); 
    border: none; 
    color: white;
    font-weight: 800;
    width: 50px;
    height: 50px;
    font-size: 20px;
}

.product-additional-info h3{
    width: fit-content; 
    margin: 0 auto; 
    color: rgba(27, 194, 223); 
    text-transform: capitalize;
}

.product-additional-info p{
    width: 90%;
    margin: 30px auto;
}

@keyframes showProductAdInfoModal {
    from{
        transform: translateY(-80vh); 
    }
    to{
        transform: translateY(0%); 
    }
}

@keyframes hideProductAdInfoModal {
    from{
        transform: translateY(0%); 
    }
    to{
        transform: translateY(-80vh); 
    }
}

dialog::backdrop{
    background: linear-gradient(45deg, rgba(255, 94, 0), rgba(27, 194, 223));
}

dialog[open]::backdrop{
    animation: showBackdrop 1s ease; 
    opacity: .5;
}

@keyframes showBackdrop {
    from{
        opacity: 0;
    }
    to{
        opacity: .5;
    }
}
@keyframes hideBackdrop {
    from{
        opacity: .5;
    }
    to{
        opacity: 0;
    }
}

/* Our Product Dialog End */


@media (max-width: 992px) {

    .product-width{
        margin: 20px auto;
    }

}

@media screen and (max-width: 576px) {
    

    .product-additional-info{
        max-width: 90%;
    }
}

/*  products section End*/