.hero {
    width: 100%;
    background: #f7f7f7;
}

.hero-wrap {
    width: 100%;
    max-width: 1000px;
    height: 14rem;
    margin: auto;
    position: relative;
}

.hero-left {
    width: 85%;
    padding: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.hero-right {
    width: 55%;
    max-width: 400px;
    height: 25svh;
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-icons {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0.3;
}

.hero-icon {
    position: absolute;
    filter: grayscale(0.7);
}

.icon1 {
    top: 0;
    left: 0;
    transform: rotate(-25deg);
    font-size: 100px;
}

.icon2 {
    top: 10%;
    left: 40%;
    transform: rotate(25deg);
    font-size: 60px;
}

.icon3 {
    bottom: 5%;
    right: 0;
    transform: rotate(25deg);
    font-size: 90px;
}

.icon4 {
    bottom: 5%;
    left: 19%;
    transform: rotate(-35deg);
    font-size: 60px;
}

.icon5 {
    top: 29%;
    left: 30%;
    transform: rotate(25deg);
    font-size: 80px;
}

.icon6 {
    top: 0;
    left: 69%;
    transform: rotate(-25deg);
    font-size: 55px;
}

.icon7 {
    bottom: 0;
    right: 21%;
    transform: rotate(-25deg);
    font-size: 70px;
}