/* =============burger============== */
.burger-icon {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    z-index: 11;
    margin: 20px 50px 0 10px;
}

.burger-icon span,
.burger-icon span::before,
.burger-icon span::after {
    display: flex;
    width: 30px;
    height: 3px;
    border-radius: 100px;
    background: #fff;
    transition: all .4s;
}

.burger-icon:hover span,
.burger-icon:hover span::before,
.burger-icon:hover span::after {
    background: var(--accent-color_2);
}

.burger-icon span {
    position: relative;
}

.burger-icon span::before,
.burger-icon span::after {
    content: '';
    position: absolute;
}

.burger-icon span::before {
    top: -10px;
}

.burger-icon span::after {
    bottom: -10px;
}

.body--opened-menu .burger-icon span {
    background: transparent;
}

.body--opened-menu .burger-icon span::before {
    top: 0px;
    transform: rotate(45deg);
}

.body--opened-menu .burger-icon span::after {
    bottom: 0px;
    transform: rotate(-45deg);
}

/* ================================================== */

.header__top {
    background: var(--general-color);
}

.header__top-inner {
    display: flex;
}

.header__logo {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

.nav {
    font-size: 20px;
    line-height: 24px;
    color: #fff;
}

.nav__list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    margin-top: 31px;
    margin-bottom: 35px;
}

.header__basket {
    margin-left: 65px;
    margin-top: 18px;
    width: 48px;
    height: 48px;

    transition: var(--transition);
}

.header__basket path {
    transition: all .2s;
}

.header__basket:hover path {
    stroke: var(--accent-color_2);
}


.header__hero {
    background: #ddd;
}

.hero__inner {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 200px;
}

.hero__info {
    width: 555px;
    margin-left: 10px;
}

.hero__title {
    font-size: 46px;
    line-height: 1.03;
    color: var(--general-text);
    margin-bottom: 40px;
}

.hero__text {
    font-size: 26px;
    line-height: 130%;
    margin-bottom: 90px;
}

.hero__button {
    border-radius: var(--border-radius);
    background: rgb(197, 53, 140);
    max-width: 235px;
    height: 65px;
    color: #fff;

    transition: var(--transition);
}

.hero__button:hover {
    background: var(--general-color);
}

.hero__img {
    display: flex;
    justify-content: end;
}

.hero__img img {
    width: 100%;
}