* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     list-style-type: none;
     text-decoration: none;
}
.container {
     width: 1500px;
     margin: 0 auto;
     padding: 20px;
}

.hero-section {
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(3, 1fr);
}
.hero-section img {
     width: 100%;
}
.banner-left {
     grid-column: 1 / 2;
     grid-row: 1/ 4;
}
.banner-top {
     grid-column: 2/ 3;
}
.banner-middle {
     grid-column: 2/ 3;
}
.banner-bottom {
     grid-column: 2/ 3;
}
.banner-right {
     grid-column: 3/ 4;
     grid-row: 1/ 4;
}
.arrival {
     padding: 30px 0;
}
.arrival h1 {
     text-align: center;
     font-size: 46px;
     color: #484848;
}
.arrival p {
     text-align: center;
     font-size: 16px;
     margin-top: 20px;
     color: #8a8a8a;
}

.collection ul {
     display: grid;
     grid-template-columns: repeat(5, 200px);
     text-align: center;
     justify-content: center;
     margin: 20px 0;
}

.collection ul li a {
     background-color: #fafafa;
     color: #8a8a8a;
     font-size: 16px;
     font-family: sans-serif;
     padding: 10px 20px;
     border-radius: 10px;
     transition: all 0.2s;
}
.collection ul li a:hover {
     background-color: black;
     color: white;
     box-shadow: 0px 20px 35px 0px #00000026;
}

.products {
     display: grid;
     gap: 50px;
     justify-content: center;
     padding: 20px;
     margin: 50px 0;
     grid-template-columns: repeat(3, 386px);
     grid-template-rows: repeat(2, 438px);
}
.product-card {
     position: relative;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 40px 90px 0px #0000000f;
}
.product-image {
     width: 100%;
     height: 259px;
     border-radius: 10px;
}
.product-image img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
     object-fit: cover;
}

.name-star {
     display: flex;
     padding: 12px 0;
     align-items: center;
     justify-content: space-between;
}

.name-star h1 {
     color: #484848;
     font-size: 20px;
     font-weight: bold;
     font-family: sans-serif;
}
.review {
     display: flex;
     padding: 0 0;
     flex-direction: column;
     gap: 10px;
}
.review span {
     color: #8a8a8a;
}

.pricing {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 20px;
}
.pricing h1 {
     color: #484848;
     font-size: 24px;
     font-family: sans-serif;
}

.almost {
     color: #ff4646;
     font-size: 12px;
}
.stock {
     color: #228b22;
     font-size: 12px;
}

.see-more-btn {
     text-align: center;
}
.see-more-btn button {
     padding: 20px 40px;
     border: none;
     font-size: 16px;
     color: white;
     cursor: pointer;
     border-radius: 10px;
     background-color: black;
     box-shadow: 0px 20px 35px 0px #00000026;
}

.service {
     display: grid;
     box-shadow: 0px 20px 52.29px 0px #4444440a;

     justify-content: center;
     margin-top: 40px;
     gap: 50px;
     grid-template-columns: repeat(4, 250px);
}
.service-items {
     display: flex;
     align-items: center;
     gap: 10px;
}
.service-text h1 {
     color: #484848;
     font-size: 20px;
}
.service-text p {
     color: #484848;
     font-size: 16px;
}