@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');

$main-color: #002733;
$dark-color: #001925;
$light-color: #87A4B6;
$medium-light-color: #013747;




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



.product {
    // padding: 50px 0px;

    .product-flex-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        @media(max-width:700px) {
            gap: 30px;
        }

        .product-box {
            background: $dark-color;
            border: 1px solid #ccc;
            border-radius: 7px;
            padding: 5px;
            text-align: center;
            border: 10px solid $medium-light-color;
            transition: all 0.3s ease-in;

            .image {
                transition: all 0.3s ease-in-out 0.1s;

                img {
                    max-width: 80%;
                    object-fit: contain;
                }
            }


            &:hover {
                box-shadow: rgba(0, 0, 0, 0.5) 4px 4px 15px;
                transform: scale(1.01);

                .image {
                    transform: scale(1.2) translateY(-20px);

                    img {
                        animation: bouncing 0.5s .3s;
                    }
                }

                .title {
                    letter-spacing: 2px;
                }
            }

            @media(max-width:1100px) {
                flex: 1 0 25%;
            }

            @media(max-width:630px) {
                flex: 1 0 35%;
                padding: 15px;

                .image {

                    img {
                        max-width: 50px;
                    }
                }
            }
        }

        .product-box:hover {
            border: 1px solid var(--color-primary);

        }
    }
}

@keyframes bouncing {

    from,
    to {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}