.products-page {
    /* background:  url('../images/products-hero.webp'), linear-gradient(to bottom, #E7EDED, #fff, #E7EDED); */
    background: linear-gradient(to right, #E7EDED, #fff, #E7EDED);
    padding-top: 5rem;
    padding-bottom: 1rem;
    height: calc(100vh - 6rem);
    min-height: 800px;
    width: 100%;
    position: relative;
    /* background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important; */
}

.products-page-container {
    width: 80%;
    /* position: relative; */
}

.products-page-container h1 {
    color: var(--secondary-color);
    font-size: var(--font-size-x-medium);
    margin-bottom: 2rem;
}

.products-page-container p {
    color: var(--gray-color);
    font-size: var(--font-size-small);
    margin-bottom: 2rem;
}


.products-title-h2 {
    color: var(--primary-color);
    text-align: center;
    padding-top: 3rem;
}

.products-title-h2 h2 {
    font-size: var(--font-size-regular);
}

.hero-images {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    /* top: 0; */
    right: 0;
    /* animation: bounce 2s ease-in-out infinite alternate; */
}

.hero-product-image {
    animation: bounce 2s ease-in-out infinite alternate;
}

[dir='rtl'] .hero-images {
    right: auto;
    left: 0;
}

.hero-images img {
    width: 100%;
    height: auto;
}

.product-hero-img {
    width: 65%;
    height: auto;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 
[dir='rtl'] .product-hero-img {
    left: auto;
    right: 60%;
} */

.product-hero-img img {
    width: 100%;
    height: auto;
}

/* .hero-images .butterfly-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
} */

/* .hero-images .butterfly-img img {
    width: 100%;
    height: auto;
}

.hero-images .main-img {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
}

.hero-images .main-img img {
    width: 100%;
    height: auto;
    cursor: pointer;
} */

.product-page {
    width: 100%;
}

.hero-text-div {
    padding-top: 0
}

.product-options-container {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin-top: 1rem;
}

.product-detail-container {
    width: 80%;
    margin: 0 auto;
    padding-top: 3rem;
    /* padding-bottom: 3rem; */
}

.product-detail-container-two-tabs {
    width: 100%;
}

.product-detail-container-two-tabs .product-description {
    width: 80%;
}

.product-detail-container h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 1.6rem;
}

.product-detail-container .details-container {
    padding-bottom: 3rem;
}

.product-detail-container p {
    color: var(--gray-color);
}

.product-detail-container table tr:first-child td p, .product-detail-container table tr:first-child td p span strong {
    color: var(--white-color);
}

.product-detail-container table tr:nth-child(2) td p {
    color: var(--secondary-color);
}

.product-detail-container p span, .product-detail-container ul li{
    color: var(--gray-color) !important;
}

.product-detail-container strong {
    color: var(--primary-color);
    font-weight: var(--font-weight-light);
}

.insurance-word {
    color: var(--primary-color);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-x-medium);
}

[dir='rtl'] .insurance-word {
    margin-bottom: 2rem;
}

.single-product-title {
    margin-bottom: 0 !important;
}

.details-container .details-row {
    display: flex;
    flex-direction: column;
}

.details-container .details-row .detail {
    width: 100%;
    margin-bottom: 0.5rem;
}

.details-container .details-row .detail ul li {
    color: var(--gray-color);
}

.details-container .extra-details {
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

/* .table-container {
    border-radius: 15px;
    border: 1px solid black; 
} */

.details-container .details-row .detail table {
    color: var(--gray-color);
    text-align: center;
    width: 100%;
    table-layout: fixed;
}

.details-container .details-row .detail table tr td p span {
    color: var(--gray-color) !important;
}

.details-container .details-row .detail td,
.details-container .details-row .detail th {
    text-wrap: wrap;
    font-size: 0.6rem;
}

.details-container .details-row .detail table,
.details-container .details-row .detail th,
.details-container .details-row .detail td {
    border: 1px solid var(--secondary-color);
    border-collapse: collapse;
}

.details-container .details-row .detail table tr:first-child {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.details-container .details-row .detail table tr:first-child th p,
.details-container .details-row .detail table tr:first-child th {
    font-weight: var(--font-weight-light);
}

.details-container .details-row .detail table th p,
.details-container .details-row .detail table th {
    color: var(--white-color) !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}

.details-container .details-row .detail table td:first-child {
    width: 10%;
}

table th,
table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

table th:nth-child(1),
table td:nth-child(1) {
    width: 20%;
    /* Width of the first column */
}

table th:nth-child(2),
table td:nth-child(2) {
    width: 35%;
    /* Width of the second column */
}

table th:nth-child(3),
table td:nth-child(3) {
    width: 45%;
}

table td:nth-child(3) {
    text-align: left;
}

.details-container .extra-details .pdf-link-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
}

/* [dir='rtl'] .details-container .extra-details .pdf-link-div {
    margin-left: auto;
    margin-right: 0;
} */

.details-container .extra-details .pdf-link-div:hover .download {
    color: var(--primary-color);
}

.details-container .extra-details .pdf-link-div:hover .pdf-icon img {
    content: url("../images/pdf_click.svg");
}

.details-container .extra-details .pdf-link-div .download {
    color: var(--secondary-color);
    font-weight: var(--font-weight-regular);
}

.pdf-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.pdf-icon img {
    width: 100%;
    height: auto;
}

.read-faqs {
    /* flex-direction: column; */
    padding-bottom: 2rem;
    cursor: pointer;
}

.read-faqs .read-div:hover .plus-img-div img {
    content: url('../images/plus_hover_1.svg');
}

.read-faqs .read-div:active .plus-img-div img {
    content: url('../images/plus_click.svg');
}

.read-faqs .read-div:hover span {
    font-weight: var(--font-weight-regular);
}

.read-faqs .read-div:active span {
    color: var(--secondary-color);
}

.read-faqs h5 {
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

.read-faqs h3 {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-x-medium);
}

.read-faqs .read span {
    color: var(--primary-color);
}

.read-faqs .read-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.close-modal {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.close-modal img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.modal-body img {
    width: 50%;
    height: auto;
}

/* #myModal .modal-content{
    background: linear-gradient(to bottom, #E7EDED, #fff, #E7EDED);
} */

#myModal .modal-content {
    background: linear-gradient(to bottom,
            rgba(231, 237, 237, 0.95),
            rgba(255, 255, 255, 0.95),
            rgba(231, 237, 237, 0.95));
}

#myModal .modal-content .modal-body h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 1.6rem;
}

#myModal .modal-content .modal-body p {
    color: var(--gray-color);
}

#myModal .modal-content .modal-body .details-container .details-row a {
    text-decoration: none;
    color: var(--secondary-color);
}

#quoteModal #quoteModalLabel, .quoteModal #quoteModalLabel {
    color: var(--secondary-color);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
}

#quoteModal .quote-form-container, .quoteModal .quote-form-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.choose-insurance {
    color: var(--secondary-color);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.select-insurance {
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
    padding: 10px;
}

.select-insurance-div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background-color: #F9F9F9;
    padding: 1rem;
    border: 1px solid var(--gray-color);
}

.select-insurance-div #selectedInsurance {
    margin-left: 0;
    margin-right: 0;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    color: var(--primary-color);
    width: 90%;
}

.select-insurance-img {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    width: 10%;
}

.select-insurance-img img {
    width: 100%;
    height: 100%;
}

.select-insurance-img:hover img {
    content: url('../images/select-hover.svg');
}

.select-insurance-img.open:hover img {
    content: url('../images/select-up-hover.svg'); 
}

.select-insurance-img:active img {
    content: url('../images/select-click.svg');
}

.select-insurance-list {
    width: 100%;
    list-style: none;
    color: var(--primary-color);
    margin-left: 0;
    margin-right: 0;
    text-transform: uppercase;
    padding: 0;
    font-size: 1rem;
    background-color: #F9F9F9;
    display: none;
}

.select-insurance-list li {
    border: 1px solid var(--gray-color);
    padding: 1rem;
    cursor: pointer;
}

.select-insurance-list li:hover {
    background-color: var(--white-color);
}

@media screen and (min-width: 768px) {
    .products-page {
        height: calc(100vh - 9rem);
        padding-top: 7rem;
    }

    .products-page-container h1 {
        font-size: var(--font-size-xx-medium);
    }

    .product-detail-container h3 {
        font-size: 2rem;
    }

    .products-page-container p {
        font-size: var(--font-size-medium);
    }

    .products-title-h2 h2 {
        font-size: var(--font-size-x-medium);
    }

    .insurance-word {
        font-size: var(--font-size-xx-medium);
    }

    .details-container .extra-details {
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-options-container {
        margin-top: 2rem;
    }

    .read-faqs h5 {
        font-size: 1.8rem;
    }

    .read-faqs h3 {
        font-size: var(--font-size-xx-medium);
    }

    .details-container .details-row .detail td,
    .details-container .details-row .detail th {
        font-size: 0.8rem;
    }

    #quoteModal #quoteModalLabel, .quoteModal #quoteModalLabel {
        font-size: var(--font-size-x-medium);
    }

    .select-insurance-div {
        width: 70%;
    }

    .select-insurance-list {
        width: 70%;
        font-size: 1.3rem;
    }

    .select-insurance-div #selectedInsurance {
        font-size: 1.3rem;
    }

}

@media screen and (min-width: 991px) {
    .products-page {
        padding-top: 3rem;
    }

    .hero-images {
        width: 60%;
    }

    .product-hero-img {
        width: 30%;
        top: 50%;
        left: 70%;
    }

    [dir='rtl'] .product-hero-img {
        left: auto;
        right: 40%;
    }

    .hero-text-div {
        width: 40%;
        margin-left: 0;
        margin-right: 0;
        padding-top: 7rem;
    }

    /* .hero-images .main-img {
        width: 35%;
    }

    .hero-images .butterfly-img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    } */

    .products-page-container h1 {
        font-weight: 500;
        font-size: 6rem;
        position: sticky;
        z-index: 3;
    }
    
    [dir='rtl'] .products-page-container h1 {
        font-size: 5rem;
    }

    .products-title-h2 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .products-title-h2 h2 {
        font-size: var(--font-size-xx-medium);
    }

    .insurance-word {
        font-size: 5rem;
    }

    .product-detail-container h3 {
        font-size: 2.4rem;
    }

    .product-detail-container p {
        font-size: 1.1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .product-detail-container ol li {
        color: var(--gray-color);
    }

    .details-container .details-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 6rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #myModal .modal-content .modal-body .details-container .details-row {
        gap: 1rem;
    }

    #myModal .modal-content .modal-body .details-container .details-row {
        align-items: flex-start;
    }

    .details-container .details-row .detail.half-width {
        width: 50%;
    }

    .product-options-container {
        margin-top: 4rem;
    }

    .read-faqs h5 {
        font-size: var(--font-size-x-medium);
    }

    .read-faqs h3 {
        font-size: var(--font-size-x-large);
    }

    .read-faqs {
        gap: 4rem;
    }

    .read-faqs .read span {
        font-size: var(--font-size-medium);
    }

    .details-container .details-row .detail td,
    .details-container .details-row .detail th {
        font-size: 1rem;
    }

    #quoteModal .quote-form .form-group:first-child .form-control-div, .quoteModal .quote-form .form-group:first-child .form-control-div {
        margin-right: 5rem;
    }

    [dir='rtl'] #quoteModal .quote-form .form-group:first-child .form-control-div, [dir='rtl'] .quoteModal .quote-form .form-group:first-child .form-control-div {
        margin-right: 0;
        margin-left: 5rem;
    }

    #quoteModal .quote-form .form-group:last-child label, .quoteModal .quote-form .form-group:last-child label{
        margin-left: 5rem;
    }

    [dir='rtl'] #quoteModal .quote-form .form-group:last-child label, [dir='rtl'] .quoteModal .quote-form .form-group:last-child label{
        margin-left: 0;
        margin-right: 5rem;
    }

    #quoteModal .quote-form-container, .quoteModal .quote-form-container{
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .choose-insurance {
        font-size: var(--font-size-x-medium);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .select-insurance {
        margin-bottom: 2rem;
        font-size: 1.5rem;
    }

    .select-insurance-div {
        width: 50%;
    }

    .select-insurance-list {
        width: 50%;
        font-size: 1.3rem;
    }

    .select-insurance-div #selectedInsurance {
        font-size: 1.4rem;
    }
}

/* adjustments */
.products-page-container .products-title{
    width: fit-content;
}
.products-page-container .products-title h1.text-uppercase{
    width: 14ch;
}