* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background: linear-gradient(135deg, #F7F6F4 0%, #EAE7E2 100%);
}

nav {
    height: 80px;
    display: flex;
    padding: 20px 120px;
    border: 1px solid black;
    justify-content: space-between;
    align-items: center;

    .nav-left {
        display: flex;
        justify-content: space-between;
        gap: 50%;

        .logo {
            font-size: 3vw;
        }

        ul {
            align-items: center;
            display: flex;
            gap: 24px;

            li {
                list-style: none;
            }
        }
    }

    .right {
        display: flex;
        gap: 24px;

        .ri-shopping-bag-line {
            font-size: 25px;
        }

        .ri-menu-line {
            font-size: 25px;
        }
    }
}

main {
    height: calc(100vh - 80px);
    padding: 40px 120px;
    position: relative;

    .hero {
        display: flex;
        justify-content: space-between;
        height: 100%;

        .left-content {
            height: 100%;
            min-width: 40%;
            width: 40%;
            display: flex;
            gap: 20px;
            flex-direction: column;
            justify-content: space-between;

            .divider {
                width: 10%;
                height: 2px;
                background-color: black;
            }

            h1 {
                font-size: 6vw;
                font-weight: 500;
                line-height: 90%;
            }

            p {
                width: 60%;
                font-size: 12px;
                line-height: 150%;
            }

            .colors-pallet {
                display: flex;
                align-items: center;
                gap: 24px;

                span {
                    font-size: 16px;
                    font-weight: bold;
                }

                .circle {}

                .circle1 {
                    height: 20px;
                    border-radius: 50%;
                    width: 20px;
                    background-color: black;
                }

                .circle2 {
                    height: 20px;
                    border-radius: 50%;
                    width: 20px;
                    background-color: black;
                }

                .circle3 {
                    height: 20px;
                    border-radius: 50%;
                    width: 20px;
                    border-radius: 50%;
                    background-color: black;
                }
            }

            h5 {
                font-size: 16px;
                font-weight: bold;
            }

            .icons {
                display: flex;
                
                .icon-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 80px;
                    padding: 16px;
                
                    span {
                        font-size: 12px;
                    }
                }

                .icon-box:nth-child(2) {
                    border-right: 1px solid #616E54;
                    border-left: 1px solid #616E54;
                }

                i {
                    color: #616E54;
                    padding: 10px;
                    border-radius: 50%;
                    background-color: #dae0d3;
                }
            }
        }

        .right-content {
            display: flex;
            gap: 24px;
            height: 100%;

            .main-section-right-1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 24px;
                /* height: 90%; */
                width: 100%;

                .hero-image-content {
                    position: relative;
                    height: 100%;
                    width: fit-content;


                    .price-tag {
                        position: absolute;
                        top: 25px;
                        left: 25px;
                        background: white;
                        padding: 8px 16px;
                        border-radius: 16px;
                    }

                    .rating {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        background: rgba(255, 255, 255, 0.8);
                        color: #616E54;
                        padding: 8px 16px;
                        border-radius: 16px;
                        backdrop-filter: blur(12px);
                    }

                    .add-to-bag {
                        position: absolute;
                        bottom: 5%;
                        right: -1%;
                        background: #616E54;
                        height: 100px;
                        width: 100px;
                        border-radius: 50%;
                        padding: 24px;
                        font-size: 12px;
                        color: #F2EFE9;

                        .bag-button-content {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;

                            .ri-shopping-bag-line {
                                font-size: 20px;
                            }

                            span {
                                white-space: nowrap;
                            }
                        }
                    }

                    img {
                        height: 100%;
                        border-radius: 16px;
                    }
                }

                .promise {
                    width: 100%;
                    background-color: #616e541a;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    padding: 16px 24px;
                    border-radius: 24px;

                    .promise-box:nth-child(2) {
                        border-right: 1px solid black;
                        border-left: 1px solid black;
                    }

                    .promise-box {
                        padding: 0px 16px;
                        display: flex;
                        align-items: center;
                        width: 150px;
                        gap: 8px;


                        i {
                            color: #616E54;
                            font-size: 24px;
                        }

                        span {
                            width: auto;
                            white-space: normal;
                            font-size: 14px;
                        }

                    }
                }
            }
        }

        aside {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .img-boxes img {
                width: 95px;
                height: 100px;
                border-radius: 16px;
            }
        }
    }
}