@import 'global.css';

/* Home page */
.hero {
    position: relative;
    height: 460px;
    background-image: url("../images/home/hero-backgrond.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.hero__content {
    position: absolute;
    top: 176px;
    left: calc(50% - var(--container-width) / 2 - 64px);
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 32px;
    padding: 48px 64px;
    max-width: 796px;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray600);
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1);
}

.hero__headline {
    line-height: 1.2;
    font-size: 56px;
    font-weight: 600;
}

.hero__headline span {
    font-weight: 700;
    color: var(--color-orange500);
}

.hero__button {
    justify-self: start;
    max-width: 300px;
    width: 100%;
}

/* About us section */
.about-us {
    padding-top: 148px;
    padding-bottom: 40px;
}

.about-us__list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 106px;
    justify-content: space-between;
}

.about-us__item {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 4px;
    align-content: start;
    padding-top: 32px;
    padding-right: 76px;
    padding-left: 90px;
    max-width: 426px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray500);
}

.about-us__item.about-us__item_third {
    padding-right: 0;
    max-width: 350px;
}

.about-us__item_third .about-us__decor {
    display: none;
}

.about-us__item_fourth {
    margin-right: 40px;
    margin-left: auto;
}

.about-us__item_fifth {
    margin-right: auto;
    margin-left: 40px;
}

.about-us__image {
    width: 64px;
    height: 64px;
}

.about-us__headline {
    line-height: 1.5;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-red400);
}

.about-us__description {
    max-width: 256px;
}

.about-us__number {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    line-height: 1;
    font-size: 220px;
    font-weight: 600;
    color: var(--color-gray50);
    z-index: -1;
}

.about-us__decor {
    position: absolute;
    right: 0;
    top: 50%;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    transform: translateY(-50%);
}

.about-us__circle {
    width: 12px;
    height: 12px;
    background-color: var(--color-red400);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-red400);
}

.about-us__line {
    width: 64px;
    height: 2px;
    background-color: var(--color-red400);
}

.about-us__line_vertical {
    width: 2px;
    height: 32px;
}

.about-us__arrow {
    margin-left: -8px;
    width: 14px;
    height: 14px;
    fill: var(--color-red400);
}

.decor {
    position: absolute;
    top: 240px;
    right: 300px;
    display: grid;
    grid-auto-flow: row;
    max-width: 740px;
}

.about-us__item_second .decor {
    display: none;
}

.about-us__item_fourth .decor {
    display: none;
}

.decor__line {
    width: 736px;
    height: 2px;
    background-color: var(--color-red400);
}

.decor__circle-group {
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    justify-self: end;
    margin-right: -5px;
}

.decor__circle {
    width: 12px;
    height: 12px;
    background-color: var(--color-red400);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-red400);
}

.decor__circle-line {
    width: 2px;
    height: 24px;
    background-color: var(--color-red400);
}

.decor__arrow-group {
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    justify-self: start;
    margin-left: -6px;
}

.decor__arrow-line {
    width: 2px;
    height: 30px;
    background-color: var(--color-red400);
}

.decor__arrow {
    margin-top: -8px;
    width: 14px;
    height: 14px;
    fill: var(--color-red400);
    transform: rotate(90deg);
}

/* Advantage section */
.advantage {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

.advantage__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 32px;
    justify-content: start;
}

.advantage__item {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 16px;
    align-items: start;
    align-content: start;
    padding: 16px;
    font-size: 16px;
    color: var(--color-gray600);
    background-color: var(--color-white);
    box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.02), 8px 8px 16px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-large);
}

.advantage__icon {
    width: 48px;
    height: 48px;
    fill: var(--color-orange500);
}

.advantage__item-headline {
    font-size: 20px;
    font-weight: 600;
}

/* Checkout section */
.checkout {
    position: relative;
    padding-top: 60px;
    padding-bottom: 80px;
    line-height: 1.5;
    background: linear-gradient(89.97deg, #FFFFFF 47.73%, rgba(255, 255, 255, 0) 78.71%);
    overflow: hidden;
}

.checkout__headline {
    margin-bottom: 16px;
    font-size: 48px;
    font-weight: 700;
}

.checkout__description {
    margin-bottom: 32px;
    max-width: 626px;
    font-size: 18px;
}

.checkout__button {
    max-width: 300px;
    width: 100%;
}

.checkout__image {
    position: absolute;
    top: 63%;
    right: calc(50% - var(--container-width) / 2 - 280px);
    max-width: 1200px;
    transform: translateY(-50%);
    z-index: -1;
}

@media (max-width: 1800px) {
    .hero__content {
        left: 130px;
    }

    .about-us__list {
        grid-column-gap: 4px;
        justify-content: center;
    }

    .about-us__item {
        padding-top: 0;
        padding-right: 60px;
        padding-left: 112px;
        max-width: 410px;
    }

    .about-us__description {
        max-width: 242px;
    }

    .about-us__number {
        top: 50%;
        bottom: unset;
        font-size: 180px;
        transform: translateY(-50%);
    }

    .about-us__line {
        width: 40px;
    }

    .decor {
        top: 210px;
    }

    .decor__line {
        width: 670px;
    }

    .advantage__logo {
        top: unset;
        bottom: -70px;
    }

    .checkout__image {
        right: -50px;
        max-width: 1100px;
    }
}

@media (max-width: 1440px) {
    .hero {
        height: 374px;
    }

    .hero__headline {
        font-size: 48px;
    }

    .hero__content {
        left: 40px;
        padding: 32px 48px;
        font-size: 16px;
    }

    .about-us {
        padding-top: 160px;
    }

    .about-us__item {
        padding-left: 86px;
        max-width: 350px;
    }

    .about-us__image {
        width: 32px;
        height: 32px;
    }

    .about-us__headline {
        font-size: 18px;
    }

    .about-us__description {
        max-width: 190px;
        font-size: 16px;
    }

    .about-us__number {
        font-size: 150px;
    }

    .decor {
        top: 160px;
    }

    .decor__line {
        width: 560px;
    }

    .advantage {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .advantage__logo {
        bottom: -14px;
    }

    .checkout {
        padding-top: 50px;
        padding-bottom: 62px;
    }

    .checkout__headline {
        font-size: 32px;
    }

    .checkout__description {
        font-size: 20px;
    }

    .checkout__image {
        right: -120px;
        max-width: 1000px;
    }
}

@media (max-width: 1200px) {
    .hero__headline {
        font-size: 32px;
    }

    .hero__content {
        left: 24px;
        padding: 32px;
        max-width: 558px;
    }

    .about-us {
        padding-top: 100px;
    }

    .about-us__list {
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 92px;
        justify-content: center;
    }

    .about-us__item {
        padding-right: 0;
    }

    .about-us__decor {
        right: -80px;
    }

    .about-us__item_second {
        padding-right: 0;
    }

    .about-us__item_second .about-us__decor {
        display: none;
    }

    .about-us__item_third .about-us__decor {
        display: grid;
    }

    .decor {
        top: 140px;
        right: 100px;
    }

    .about-us__item_third .decor {
        display: none;
    }

    .about-us__item_second .decor {
        display: grid;
    }

    .about-us__item_fourth .decor {
        display: grid;
    }

    .decor__line {
        width: 510px;
    }

    .about-us__item_fourth {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
    }

    .about-us__item_fourth .about-us__decor {
        display: none;
    }

    .about-us__item_fifth {
        margin-right: 0;
        margin-left: 0;
    }

    .about-us__description {
        max-width: 224px;
    }

    .about-us__number {
        font-size: 120px;
    }

    .advantage {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .advantage__list {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 32px;
    }

    .checkout {
        padding-top: 40px;
    }

    .checkout__headline {
        font-size: 24px;
    }

    .checkout__description {
        max-width: 390px;
        font-size: 16px;
    }

    .checkout__image {
        top: 83%;
        right: -270px;
        max-width: 1100px;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 300px;
    }

    .hero__headline {
        font-size: 24px;
    }

    .hero__content {
        top: 114px;
        left: 16px;
        grid-row-gap: 16px;
        padding: 24px 16px;
        max-width: 500px;
    }

    .hero__button {
        margin-top: 8px;
    }

    .about-us {
        padding-top: 80px;
        padding-bottom: 0;
    }

    .about-us__list {
        grid-template-columns: 1fr;
        grid-row-gap: 58px;
        justify-items: center;
    }

    .about-us__decor {
        top: unset;
        right: unset;
        bottom: -70px;
        left: 32px;
        grid-auto-flow: row;
        justify-items: center;
        transform: unset;
    }

    .about-us__item_second .about-us__decor {
        display: grid;
    }

    .about-us__item_fourth .about-us__decor {
        display: grid;
    }

    .about-us__item_second .decor {
        display: none;
    }

    .about-us__item_fourth .decor {
        display: none;
    }

    .about-us__line {
        width: 2px;
        height: 40px;
    }

    .about-us__arrow {
        margin-top: -8px;
        margin-left: 1px;
        transform: rotate(90deg);
    }

    .advantage__list {
        grid-template-columns: 1fr;
    }

    .advantage__logo {
        bottom: unset;
        top: 50%;
        transform: translateY(-50%);
    }

    .checkout {
        padding-top: 48px;
        padding-bottom: 48px;
        background: linear-gradient(89.97deg, #FFFFFF 0.02%, #FFFFFF 46.51%, rgba(255, 255, 255, 0.7) 68.62%, rgba(255, 255, 255, 0.6) 77.07%, rgba(255, 255, 255, 0) 97.45%);
    }
}

@media (max-width: 568px) {
    .hero__content {
        max-width: 280px;
    }

    .about-us {
        padding-top: 170px;
    }

    .checkout__description {
        max-width: 220px;
    }

    .checkout__button {
        max-width: unset;
        width: 100%;
    }

    .checkout__image {
        top: 40%;
        right: -230px;
        max-width: 700px;
    }
}

/* Agreement page */
.agreement {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    padding-top: 96px;
    padding-bottom: 150px;
}

.agreement__headline {
    margin-bottom: 32px;
    text-align: center;
}

.agreement__box {
    justify-self: center;
    max-width: 996px;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.05), 8px 8px 16px rgba(0, 0, 0, 0.1)
}

.agreement__description {
    margin-bottom: 24px;
    line-height: 1.2;
    font-size: 18px;
}

.agreement__check {
    margin-bottom: 24px;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 600;
}

.agreement__decor {
    top: unset;
    right: unset;
    bottom: 96px;
    left: calc(50% - var(--container-width) / 2 - 410px);
}

@media (max-width: 1800px) {
    .agreement {
        padding-top: 76px;
        padding-bottom: 100px;
    }

    .agreement__decor {
        bottom: 156px;
        left: -150px;
    }
}

@media (max-width: 1440px) {
    .agreement {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .agreement__decor {
        bottom: 242px;
    }
}

@media (max-width: 1200px) {
    .agreement {
        padding-bottom: 60px;
    }

    .agreement__description {
        font-size: 16px;
    }

    .agreement__check {
        font-size: 16px;
    }

    .agreement__decor {
        bottom: 194px;
    }
}

@media (max-width: 768px) {
    .agreement {
        padding-top: 50px;
        padding-bottom: 40px;
    }

    .agreement__headline {
        margin-bottom: 24px;
        font-size: 24px;
    }

    .agreement__decor {
        top: 50%;
        bottom: unset;
        transform: translateY(-50%);
    }
}

@media (max-width: 568px) {
    .agreement__button {
        width: 100%;
    }
}

/* Order page */
.order {
    position: relative;
    padding-top: 50px;
    padding-bottom: 150px;
}

.order__headline {
    margin-bottom: 64px;
    text-align: center;
}

.order__headline-background {
    top: 0;
}

.order__stages {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 32px auto;
    max-width: 696px;
    line-height: 1;
    font-weight: 600;
    color: var(--color-gray500);
}

.order__stage {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 12px;
    justify-items: center;
    transition: color .2s;
}

.active.order__stage {
    color: var(--color-orange500);
}

.previous.order__stage {
    color: var(--color-gray700);
}

.order__stage-icon {
    fill: var(--color-gray500);
}

.active .order__stage-icon {
    fill: var(--color-orange500);
}

.previous .order__stage-icon {
    fill: var(--color-gray700);
}

.order__icon {
    position: absolute;
    top: 50%;
    right: -48px;
    width: 26px;
    height: 26px;
    fill: var(--color-gray400);
    transform: translateY(-50%);
}

.order__box {
    display: grid;
    grid-auto-flow: row;
    margin: 0 auto;
    max-width: 996px;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.05), 8px 8px 16px rgba(0, 0, 0, 0.1);
}

.order__form-sender {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.order__form-recipient {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    margin-top: 24px;
}

.order__form-stage {
    display: none;
}

.active.order__form-stage {
    display: grid;
}

.order__recipient {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 16px;
    justify-content: start;
    align-items: end;
    margin-bottom: 24px;
}

.order__line-decor {
    height: 2px;
    width: 100%;
    background-color: var(--color-gray100);
    border-radius: var(--border-radius-medium);
}

.order__line-decor_indent {
    margin-bottom: 24px;
}

.order__line-decor_vertical {
    height: 100%;
    width: 2px;
}

.order__group {
    display: grid;
    grid-auto-flow: row;
    margin: 16px 0;
}

.order__group-confirm {
    display: grid;
    grid-auto-flow: row;
    margin-bottom: 24px;
}

.order__group-label {
    margin-left: 16px;
    margin-bottom: 8px;
    line-height: 1.5;
    font-weight: 600;
}

.order__group-key {
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--color-gray600);
}

.order__group-value {
    line-height: 1;
    font-size: 18px;
    font-weight: 600;
}

.order__add-button {
    margin-top: 8px;
    margin-left: 16px;
    width: calc(100% - 32px);
    font-weight: 400;
    border-style: dashed;
}

.order__mail {
    color: var(--color-blue600);
}

.order__mail:hover {
    text-decoration: underline;
}

.order__select {
    margin-left: 16px;
    max-width: 286px;
}

.order__textarea {
    margin-left: 16px;
    max-width: 866px;
    max-height: 300px;
    min-height: 105px;
    width: calc(100% - 32px);
    resize: vertical;
}

.order__file {
   /* margin-left: 16px;
    width: calc(100% - 32px);*/
}

.order__link {
    color: var(--color-red400);
    transition: .2s;
}

.order__link:hover {
    color: var(--color-red500);
    text-decoration: underline;
}

.order__list {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 12px;
    margin-left: 16px;
    width: calc(100% - 32px);
}

.order__headlines {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 110px 110px;
    grid-column-gap: 8px;
}

.order__item {
    position: relative;
    display: inline;
    grid-template-columns: 1fr 110px 110px;
    grid-column-gap: 8px;
    background-color: #eff3f6;
    padding: 20px 20px 5px 20px;
    border: 1px solid #cccccc;
    margin-top: 20px;
}

.order__key {
    padding: 12px 16px;
    line-height: 1;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--color-gray50);
    border: 1px solid var(--color-gray200);
    border-radius: var(--border-radius-small);
}

.order__key-mobile {
    display: none;
}

.order__input-quantity {
    text-align: left;
}

.order__item-delete {
    justify-content: center;
    align-items: center;
    float: right;
}

.order__item-icon {
    fill: var(--color-gray400);
}

.order__item-delete:hover .order__item-icon {
    fill: var(--color-red400);
}

.order__total {
    display: grid;
    grid-template-columns: 1fr 110px 100px;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    margin-left: 16px;
    width: calc(100% - 32px);
}

.order__total-value {
    width: 78px;
    text-align: center;
}

.order__action {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 24px;
    justify-content: center;
    margin-top: 48px;
}

.order__form-prev {
    width: 200px;
}
.order__form-prev svg {
    transform: rotate(180deg);
}

.order__form-next {
    justify-self: center;
    width: 200px;
}

.order__address {
    grid-column: 1 / 3;
}
.first_name {
    grid-column: 1 / 5;
}

.order__label-recipient {
    grid-column: 1 / 4;
}

.order__decor {
    top: 190px;
}

.order__form-headline {
    margin-bottom: 24px;
    line-height: 1;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-orange500);
}

.order__check {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-column-gap: 20px;
    margin-bottom: 24px;
}

.order__check-list {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 16px;
}

.order__check-item {
    display: grid;
    grid-template-columns: 162px 1fr;
    grid-column-gap: 12px;
    align-items: start;
    line-height: 1.3;
    font-size: 16px;
    color: var(--color-gray600);
}

.order__check-value {
    line-height: 1;
    font-weight: 600;
    color: var(--color-gray800);
}

.order__confirm {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 8px;
    margin-top: 24px;
}

.order__confirm-description {
    margin-left: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.order__confirm-description span {
    color: var(--color-red400);
}
.order__detail {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 12px;
}

.order__detail-item {
    display: grid;
    grid-template-columns: auto 200px 40px auto;
    grid-column-gap: 6px;
    justify-content: start;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray800);
}

.order__detail-item * {
    word-break: break-word;
}

.order__detail-price {
    color: var(--color-orange500);
}
@media (max-width: 1800px) {
    .order {
        padding-top: 28px;
        padding-bottom: 100px;
    }

    .order__headline {
        margin-bottom: 32px;
        line-height: 1.5;
    }
}

@media (max-width: 1440px) {
    .order {
        padding-bottom: 80px;
    }
}

@media (max-width: 1200px) {
    .order {
        padding-top: 20px;
        padding-bottom: 68px;
    }

    .order__headline {
        margin-bottom: 24px;
        line-height: 1.5;
    }

    .order__action {
        margin-top: 32px;
    }

    .order__check {
        grid-template-columns: 1fr;
        grid-row-gap: 24px;
    }

    .order__line-decor_vertical {
        width: 100%;
        height: 2px;
    }

    .order__confirm-description {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
        .first_name {
            grid-column: unset;
        }
    #login_div {
        display: grid;
        max-width: 300px !important;}
    .select {
        padding: 12px 9px !important;}
    .order {
        padding-top: 16px;
        padding-bottom: 42px;
    }

    .order__stages {
        grid-column-gap: 58px;
        justify-content: center;
        margin-bottom: 24px;
    }

    .order__icon {
        right: -42px;
    }

    .order__stage span {
        display: none;
    }

    .order__form-sender {
        grid-template-columns: 1fr;
        grid-row-gap: 24px;
    }

    .order__address {
        grid-column: unset;
    }

    .order__recipient {
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
    }

    .order__form-recipient {
        grid-template-columns: 1fr;
    }

    .order__label-recipient {
        grid-column: unset;
    }

    .order__form-prev {
        width: 80px;
    }

    .order__form-prev span {
        display: none;
    }

    .order__action {
        grid-auto-flow: unset;
        grid-template-columns: auto 1fr;
        grid-column-gap: 16px;
    }

    .order__form-next {
        width: 100%;
    }

    .order__headlines {
        grid-template-columns: 1fr 50px 90px;
    }

    .order__key_quantity {
        display: none;
    }

    .order__key-mobile {
        display: block;
    }

    .order__item {
        grid-template-columns: 1fr 50px 90px;
    }

    .order__total-value {
        margin-right: -16px;
        width: 66px;
    }

    .order__check-item {
        grid-template-columns: 1fr;
        grid-row-gap: 6px;
    }
    .order__total {
        grid-template-columns: 1fr 50px 86px;
        grid-column-gap: 8px;
    }
}
.item-header{
    margin: 0 0 10px -10px;
}.item-title{
    font-size: 21px;
    font-weight: 700;
}
.order__group-label-new{
    padding:10px;
    background:#fff7ed ;
    font-size: 14px;
}