@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: Lato, sans-serif;
    color: #54575a;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f3f8f7 49.91%,
        #fff9f5 94.19%
    );
}

.wrapper {
    position: relative;
    width: 1440px;
    height: 1379px;
    margin: auto;
}

.brand-img {
    position: absolute;
    width: 193px;
    height: 47.64px;
    left: 221px;
    top: 50.25px;
}

.title {
    position: absolute;
    width: 458px;
    height: 135px;
    left: 221px;
    top: 236px;
    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 67px;
}

.text {
    position: absolute;
    width: 394px;
    height: 96px;
    left: 221px;
    top: 403px;

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
}

.app-store-btn {
    position: absolute;
    width: 136.42px;
    height: 44.26px;
    left: 222.01px;
    top: 532.01px;
}

.app-store-btn img {
    width: 136.42px;
    height: 44.26px;
}

.google-play-btn {
    position: absolute;
    width: 156.19px;
    height: 46.28px;
    left: 381.81px;
    top: 531px;
}

.google-play-btn img {
    width: 156.19px;
    height: 46.28px;
}

.main-image-container {
    position: absolute;
    width: 535.72px;
    height: 309.27px;
    left: 683.28px;
    top: 229.73px;
}

.main-image-container img {
    height: 411.15px;
}

.profile-img {
    position: absolute;
    height: 444px;
    left: 737px;
    right: 479px;
    top: 686px;
}

.product-img {
    position: absolute;
    height: 222px;
    left: 737px;
    right: 479px;
    top: 1157px;
}

.orders-img {
    position: absolute;
    height: 470px;
    left: 479px;
    right: 737px;
    top: 913px;
}

.cart-img {
    position: absolute;
    height: 222px;
    left: 221px;
    right: 995px;
    top: 1157px;
}

.home-img {
    position: absolute;
    height: 470px;
    left: 995px;
    right: 221px;
    top: 908px;
}

/* Background Toggles */
.background-toggles {
    position: absolute;
    right: 150px;
    top: 70px;
    display: flex;
}

.background-toggles > div {
    height: 25px;
    width: 25px;
    border-radius: 5px;
    margin-right: 10px;
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Backgrounds */
.background-1 {
    background-color: #bbbbbb;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%23d2d2d2' fill-opacity='0.26' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.background-2 {
    background: #8e9eab;

    background: linear-gradient(to top, #8e9eab, #eef2f3);
}

.background-3 {
    background-color: #bab8be;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23cfcdd1' fill-opacity='0.28' fill-rule='evenodd'/%3E%3C/svg%3E");
}