* {
    margin: none;
    padding: none;
    text-transform: none;
    text-decoration: none;
}

body {
    background-color: white;
}

body header {
    width: 100%;
    height: 8vh;
    background-color: #F7F7F7;
    display: flex;
    justify-content: space-around;

    border-radius: 10px;

    .Logo {
        width: 25%;
        display: flex;
        align-items: center;

        span {
            font-size: 20px;
            padding: 0 15px;
            transition: all 0.5s;
        }
    }

    .Logo span:hover {
        font-size: 21px;
    }

    .Content {
        width: 30%;
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        align-items: center;

        .box {
            padding: 5px;
            transition: all 0.5s;

            a {
                font-size: 19px;
                color: black;
            }
        }

        .box:hover {
            background-color: #e3e3e3;
            border-radius: 10px;
            font-size: large;
        }
    }
}

body section {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

    .col {
        height: 160vh;
        width: 300px;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border-radius: 10px;

        .box {
            padding-inline-start: 10%;
            font-family: 'Roboto Slab', serif;
            color: black;
        }
    }

    .row {
        display: grid;
        grid-template-columns: repeat(4, auto);
        row-gap: 20px;
        column-gap: 20px;

        .box {
            height: 350px;
            width: 350px;
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            border-radius: 10px;
            text-align: center;

            span {
                height: 0;
                width: 0;
                margin: none;
                padding: none;
            }
        }

        #box {
            align-items: center;
            position: relative;

            img {
                display: block;
                margin: auto;
                height: 175px;
                width: 330px;
                margin-top: 2.5%;
                border-radius: 10px;
                transition: all 0.5s;
            }

            img:hover {
                height: 180px;
                width: 335px;
            }

            .contant {
                font-family: 'Roboto Slab', serif;
                letter-spacing: 1px;

                p {
                    letter-spacing: 1px;
                    font-size: larger;
                }

                #Price {
                    font-size: medium;
                }

                div button {
                    position: absolute;
                    bottom: 8%;
                    left: 29%;
                    right: 40%;
                    height: 25px;
                    width: 45%;
                    background-color: #ecebeb;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
                    border-radius: 5px;
                    border-color: rgb(29, 29, 29);
                    transition: all 0.5s;
                }

                div button:hover {
                    background-color: #dddada;
                    color: rgb(13, 12, 12);
                    font-size: 13px;
                    height: 27px;
                    width: 46%;
                    left: 28%;
                }
            }
        }
    }
}