body {
    background-color: #F9F5F0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


nav {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav li {
    margin: 0;
}

nav a {
    display: block;
    color: #4F4C4C;
    text-decoration: none;
    padding: 15px 20px;
    text-align: center;
    transition: background-color 0.3s;
}


nav a:hover {
    color: #306605;
}

ul.left {
    justify-content: flex-start;
    padding-left: 260px;
}

ul.right {
    justify-content: flex-end;
    padding-right: 120px;
}

ul.right .a {
    margin-top: 5px;

}

ul.right img {
    width: 30px;
    height: 30px;
    margin: 0 5px;
}

.logo {
    position: absolute;
    top: 10px;
    left: 35px;
}

#img1 {
    margin-left: 20rem;
    margin-top: 3rem;
}

.side {
    position: absolute;
    top: 10rem;
    left: 40rem;
}

#leaf {
    padding-left: 27.5rem;
    margin-top: -420px;
}

.container-1 {
    margin-top: 90px;
    width: 100%;
    height: 100%;
    position: relative;
}

.black-background {
    width: 1520px;
    height: 92px;
    left: 0;
    top: 0;
    position: absolute;
    background: black;
}

.box {
    width: 164px;
    height: 70px;
    position: absolute;
    background: rgba(217, 217, 217, 0.20);
    border-radius: 3px;
    margin-top: 12px;
}

.icon {
    width: 42px;
    height: 32px;
    position: absolute;
}

.text {
    left: 48px;
    top: 13.48px;
    position: absolute;
    color: white;
    font-size: 15px;
    font-family: Crimson Pro;
    font-weight: 800;
    word-wrap: break-word;
}

.info {
    position: absolute;
    color: white;
    font-size: 12px;
    font-family: Fira Sans;
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 50px;
}

#top-leaf {
    margin-top: -69px;
    margin-left: 30rem;
    
}

#bottom-leaf {
    position: absolute;
    top: 33rem;
    left: 45%;
    z-index: 1;
}

.container-2 {
    width: auto;
    height: 595.05px;
    position: relative;
    margin-top: 180px;
    background-color: #ffffff;
}

.background {
    width: auto;
    height: 500px;
    left: 0;
    top: 0;
    position: absolute;
    background: white;
}

.products {
    width: 1079px;
    height: 525.05px;
    left: 180px;
    top: 70px;
    position: absolute;

}

.title {
    left: 410px;
    top: 0;
    position: absolute;
    color: black;
    font-size: 30px;
    font-family: Hahmlet;
    font-weight: 600;
    word-wrap: break-word;

}

.product-box {
    width: 238px;
    height: 180px;
    position: absolute;
    background: #D9D9D9;
    top: 10rem;
}

.product-image img {
    width: 60%;
    height: 60%;
    margin-left: 15px;
    margin-top: 50px;
}

.product-category {
    width: 100%;
    left: 65px;
    top: 200px;
    position: absolute;
    color: #6C6C6C;
    font-size: 12px;
    font-family: Inter;
    font-weight: 400;
    word-wrap: break-word;
}

.product-name {
    width: 100%;
    left: 55px;
    top: 220px;
    position: absolute;
    color: black;
    font-size: 12px;
    font-family: Inter;
    font-weight: 400;
    word-wrap: break-word;
}

.product-price {
    width: 100%;
    left: 75px;
    top: 238px;
    position: absolute;
    color: black;
    font-size: 14px;
    font-family: Kaisei Opti;
    font-weight: 700;
    word-wrap: break-word;
}

.product-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.product-card {
    width: 295.81px;
    height: 226px;
    position: absolute;
    background: white;
    border-radius: 9px;
}

.product-img img {
    width: 26.78px;
    height: 22px;
    position: absolute;
}

.product-details {
    position: absolute;
    color: black;
    font-size: 17px;
    font-weight: 700;
    word-wrap: break-word;
}

.product-button {
    width: 138.98px;
    height: 31px;
    position: absolute;
    background: #8BC34A;
    border-radius: 3px;
}

.product-button button {
    width: 73.95px;
    position: absolute;
    color: white;
    font-size: 10px;
    font-weight: 700;
    word-wrap: break-word;
}

.large-product-image {
    width: 204px;
    height: 165px;
    position: absolute;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.watch , .personal-care , .shoes {
    font-family: 'Kaisei Opti';
    width: 250px;
    height: 270px;
    background-color: white;
    border-radius: 9px;
    margin-left: 14rem;
    margin-top: 80px;
}

.btn-shop {
    border-color: #8BC34A;
    border-radius: 3px;
    background-color: #8BC34A;
    color: white;
    display: flex;
    align-items: center;
}

.section-container {
    display: flex;
}
.black-box{
    padding-top: 10px;
    width: auto;
    height: 100px;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container-3 {
    width: auto;
    height: 650px;
    position: relative;
    background-color: #ffffff;
}
.white-background {
    width: auto;
    height: 500px;
    left: 0;
    top: 0;
    position: absolute;
    background: white;
}
.product-box-2 {
    width: 238px;
    height: 320px;
    position: absolute;
    background: #D9D9D9;
    top: 10rem;
}
.product-category-2 {
    width: 100%;
    left: 70px;
    top: 340px;
    position: absolute;
    color: #6C6C6C;
    font-size: 12px;
    font-family: Inter;
    font-weight: 400;
    word-wrap: break-word;
}

.product-name-2 {
    width: 100%;
    left: 73px;
    top: 365px;
    position: absolute;
    color: black;
    font-size: 12px;
    font-family: Inter;
    font-weight: 400;
    word-wrap: break-word;
}

.product-price-2 {
    width: 100%;
    left: 75px;
    top: 388px;
    position: absolute;
    color: black;
    font-size: 14px;
    font-family: Kaisei Opti;
    font-weight: 700;
    word-wrap: break-word;
}
.customer-review{
    margin-top: 50px;
}
.box3{
    width: 500px;
    height: 500px;
}
.customer-review p{
    padding-top: 70px;
    margin-left:20px
}
footer{
    width: auto;
    height: 120px;
    background-color: #000823;
}
#social-links{
    margin-left: 70rem;
    padding-top: -40px;
}
.search-bar {
    display: flex;
    align-items: center;
    background: #ffffff95;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    margin: 0 10px;
}

.search-bar input {
    border: none;
    outline: none;
    flex: 1;
    padding: 5px;
}

.search-bar button {
    background: #30734a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}
#open-cart-button {
    background-color: white;
    color: 4F4C4C;
    border: none;
    margin-top: 10px;
    cursor: pointer;
}