/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 3, 2024, 11:35:39 PM
    Author     : admin
*/

.breadcrumb li:not(:last-child), .breadcrumb li:not(:last-child) a {
    color: #02bea8 !important;
}

.navbar-nav .nav-link {
    color: #0b0b0b !important;
}

.product-detail-banner {
    margin-top: 84px;
}

.product-detail-banner .main-banner-content {
    flex-basis: min-content;
    margin-right: 20px;
    text-align: left;
}

.product-detail-banner .main-banner-image {
    height: 436px;
    width: 436px;
}

.product-detail-banner .main-banner-content .btn {
    border-radius: 6px;
    height: 56px;
    display: inline-flex;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .product-detail-banner .main-banner-image {
        height: min(436px, 100vw);
        width: 100%;
    }
}

.main-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item > p {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}

.truncate {
    text-overflow: ellipsis;
    /* Needed to make it work */
    overflow: hidden;
    white-space: nowrap;
}

.product-img, .product-img img {
    /* aspect-ratio: 373.33 / 230; */
    object-fit: cover;
    width: 100%;
    height: auto;
}

.product-video, .product-video img{
    position: relative;
    aspect-ratio: 373.33 / 188;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.product-video .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(0,0,0, 0.3);
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1E1E1E;
}
.product-detail-banner .main-banner-content h1 {
    line-height: 1.2;
}