/*#region Banner */
nav > div > div > div > div > a,
nav > div > div > div > a,
nav > div > div > div > div > p,
nav .fa-bars {
    color: var(--white);
}



header {
    z-index: 1;
    position: relative;
}
/*#endregion*/


/*#region Content*/

.product-container img {
    width: 30px;
}

.product-container {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 3rem;
    margin-bottom: 100px;
}

.products > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

    .products > div > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

        .products > div > div > a {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

            .products > div > div > a > img {
                /*height: 165px;*/
                height: 70%;
                width: 100%;
                object-fit: cover;
                margin-bottom: 10px;
                border-radius: 5px;
            }

            .products > div > div > a > button {
                width: max-content;
                padding: 7px 15px;
                font-size: 11px;
                cursor: pointer;
            }

            .products > div > div > a > h4 {
                font-size: 15px;
                transition: 200ms;
                border-top: var(--border);
                padding-top: 10px;
            }

            .products > div > div > a > p {
                color: var(--gray);
                font-size: 11px;
            }

            .products > div > div > a:hover h4 {
                color: var(--red);
            }




.product-container > div:last-of-type {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

    .product-container > div:last-of-type > div {
        padding: 20px;
        box-shadow: 0 0 3px #80808069;
        border-radius: 5px;
    }

    .product-container > div:last-of-type div h2 {
        font-size: 16px;
        position: relative;
    }

        .product-container > div:last-of-type div h2::before {
            content: "";
            position: absolute;
            left: -10px;
            background: var(--red);
            width: 2px;
            height: 20px;
            transform: translateY(-50%);
            top: 50%;
        }

    .product-container > div:last-of-type div:first-of-type {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0px 4px 21px 0px rgba(33, 49, 182, 0.09);
    }

        .product-container > div:last-of-type div:first-of-type form {
            display: flex;
            position: relative;
            width: 100%;
            align-items: center;
        }

            .product-container > div:last-of-type div:first-of-type form input {
                position: relative;
                width: 100%;
                border: 1px solid #00000008;
                padding: 5px;
                border-radius: 5px;
                font-size: 13px;
                background: #fafafa;
                height: 40px;
                transition: 200ms;
                padding-right: 40px;
            }

                .product-container > div:last-of-type div:first-of-type form input:focus {
                    background-color: rgb(255 94 20 / 6%);
                }

            .product-container > div:last-of-type div:first-of-type form i {
                position: absolute;
                right: 9px;
                cursor: pointer;
                color: var(--red);
                font-size: 16px;
                top: 11px;
            }

    .product-container > div:last-of-type div:nth-of-type(2) {
        box-shadow: 0px 4px 21px 0px rgba(33, 49, 182, 0.09);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 12px;
    }

        .product-container > div:last-of-type div:nth-of-type(2) a {
            padding: 10px 0;
            border-bottom: var(--border);
            color: var(--gray);
            transition: 300ms;
            font-size: 13px;
        }

            .product-container > div:last-of-type div:nth-of-type(2) a:hover {
                color: var(--red);
            }

        .product-container > div:last-of-type div:nth-of-type(2) h2 {
            margin-bottom: 0.5rem;
        }

    .product-container > div:last-of-type div:last-of-type {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0px 4px 21px 0px rgba(33, 49, 182, 0.09);
    }

        .product-container > div:last-of-type div:last-of-type div {
            display: flex;
            gap: 10px;
            flex-direction: row;
            flex-wrap: wrap;
            box-shadow: none;
        }

            .product-container > div:last-of-type div:last-of-type div a {
                font-size: 12px;
                padding: 7px 12px;
                background: var(--bg-gray);
                border-radius: 20px;
                transition: 300ms;
                cursor: pointer;
                user-select: none;
                color: #687187;
                border: 2px solid #f0f6fd;
            }

                .product-container > div:last-of-type div:last-of-type div a:hover {
                    background: var(--red);
                    color: var(--white);
                }
/*#endregion*/


@media(max-width:1400px) {
}

@media(max-width:1200px) {
}

@media(max-width:992px) {
    .product-container {
        grid-template-columns: 1fr 212px;
        gap: 2rem;
    }
}

@media(max-width:768px) {
    .product-container {
        grid-template-columns: 1fr ;
        gap:4rem;
    }

    .products > div > div > a > h4 {
        font-size: 21px;
    }
    nav > div > div > div > div > a,
    nav > div > div > div > a,
    nav > div > div > div > div > p {
        color: var(--black);
    }
}

@media(max-width:576px) {


    .products > div > div {
        grid-template-columns: 1fr;
    }
}