.page__content-wrapper {
    background-color: #0d003f;
}

.dly-mam {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #5a1f7a 49.97%, #130752 100%);
}

.dly-mam__h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "montserrat";
    font-weight: 700;
    font-size: 26px;
    line-height: 110%;
    background: linear-gradient(115.3deg, #ff9dff 4.82%, #fdefff 96.47%), #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 32px;
}

.dly-mam__container {
    width: 100%;
    max-width: calc(1216px + 13px * 2);
    padding: 0 13px;
    margin: 0 auto;
}

.dly-mam__hero-and_need-know {
    background: linear-gradient(180deg, #5A1F7A 49.97%, #130752 100%);
}

.dly-mam__hero {
    width: 100%;
    padding-top: 63px;
    padding-bottom: 10px;
    background: linear-gradient(180deg, rgba(116, 38, 145, 0) 83.75%, #5A1F7A 100%);
}

.dly-mam__hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.dly-mam__hero-title {
    align-self: flex-start;
    font-family: "stem";
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: .04em;
    color: #fff;
}

.dly-mam__hero-figure {
    width: 40%;
    max-width: 314px;
    position: relative;
}

.dly-mam__hero-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.dly-mam__hero-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 12px 12px 20px;
    gap: 12px;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 12px;
    outline: none;
    overflow: hidden;
    transition: all .3s;
    font-family: "montserrat";
    font-weight: 600;
    font-size: 16px;
    line-height: 112%;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;

    &::after {
        content: '';
        display: block;
        width: 24px;
        min-width: 24px;
        height: 24px;
        background-image: url(/assets/images/zodak-kapli-dly-mam/arrow-white.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    &:hover {
        background-color: #f3ff00;
        border-color: #f3ff00;
        color: #5a1f7a;

        &::after {
            background-image: url(/assets/images/zodak-kapli-dly-mam/arrow.svg);
        }
    }

    &.where-to-buy {
        background-color: #f3ff00;
        border-color: #f3ff00;
        color: #5a1f7a;

        &::after {
            background-image: url(/assets/images/zodak-kapli-dly-mam/arrow.svg);
        }

        &:hover {
            background-color: transparent;
            border-color: #fff;
            color: #fff;

            &::after {
                background-image: url(/assets/images/zodak-kapli-dly-mam/arrow-white.svg);
            }
        }
    }
}

.dly-mam__hero-child {
    width: 30%;
}

.dly-mam__hero-disclaimer {
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
    font-family: "stem";
    font-weight: 350;
    font-size: 12.5333px;
    line-height: 20px;
    text-align: center;
    letter-spacing: .04em;
    color: #e05fff;
    position: relative;
}

.dly-mam__hero-disclaimer-text {
    font-weight: 300;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: initial;
    text-transform: uppercase;
}

@media all and (min-width: 768px) {
    .dly-mam__hero-btn {
        max-width: max-content;
        padding: 14px 14px 14px 22px;
    }
}

@media all and (min-width: 1024px) {
    .dly-mam__h2 {
        margin-bottom: 64px;
        font-size: 36px;
    }

    .dly-mam__hero {
        padding-top: 113px;
        background: linear-gradient(180deg, rgba(116, 38, 145, 0) 83.75%, #5A1F7A 100%);
        position: relative;
        overflow: hidden;
        
        &::before {
            content: '';
            width: 100%;
            min-width: 2560px;
            height: 100%;
            background: url(/assets/images/zodak-kapli-dly-mam/hero.jpg) no-repeat center / cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .dly-mam__hero-grid {
        display: grid;
        grid-template-columns: 1fr 300px 470px;
        grid-template-areas:
            "title product child"
            "btns product child"
        ;
        gap: 72px 0;
        padding-bottom: 25px;
        position: relative;
    }

    .dly-mam__hero-title {
        grid-area: title;
        font-size: 48px;
        letter-spacing: .002em;
    }

    .dly-mam__hero-btns {
        flex-wrap: nowrap;
        grid-area: btns;
        padding-bottom: 89px;
    }

    .dly-mam__hero-btn {
        font-size: 20px;
    }

    .dly-mam__hero-figure {
        width: 100%;
        max-width: 470px;
        grid-area: product;
        transform: translateX(26px);
        margin-top: 38px;
    }

    .dly-mam__hero-child {
        width: 100%;
        grid-area: child;
        position: relative;

        &::before {
            content: '';
            width: 60%;
            max-width: 164px;
            aspect-ratio: 1 / 1;
            background: url(/assets/images/zodak-kapli-dly-mam/cleim.svg) no-repeat center / 100%;
            position: absolute;
            top: -38px;
            left: 0;
        }
    }

    .dly-mam__hero-disclaimer {
        line-height: 24px;
    }

    .dly-mam__hero-disclaimer-text {
        font-size: 15.5111px;
    }
}


@media all  and (max-width: 1023px){
    .dly-mam__hero-figure::before {
        content: '';
        width: 60%;
        max-width: 164px;
        aspect-ratio: 1 / 1;
        background: url(/assets/images/zodak-kapli-dly-mam/cleim.svg) no-repeat center / 100%;
        position: absolute;
        bottom: 60%;
        left: calc(90%);
    }
}

 /*Что нужно знать*/
.need-know {
    padding: 60px 0;
}

.need-know__tab {
    display: flex;
    flex-direction: column;
    gap: 24px;

    sup {
        font-size: 70%;
    }
}

.need-know__tab-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: tabTitle;
}

.need-know__tab-btn {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 14px;
    font-family: "montserrat";
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: #fff;
    position: relative;
    z-index: 0;
    cursor: pointer;

    &::before {
        counter-increment: tabTitle;
        content: counter(tabTitle);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        min-width: 34px;
        height: 34px;
        background: linear-gradient(169.42deg, rgba(160, 46, 193, 0.4) 9.47%, rgba(95, 28, 141, 0.4) 92.13%);
        border-radius: 50%;
        overflow: hidden;
        font-weight: 600;
        font-size: 16px;
        line-height: 120%;
        color: #fff;
    }

    &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(90deg, #f179de 60%, #38116D 100%);
        opacity: .45;
        filter: blur(12px);
        border-radius: 999px;
        transition: all .3s;
        z-index: -1;
    }

    &.active {
        pointer-events: none;

        &::after {
            width: 90%;
        }

        &::before {
            background: linear-gradient(147.16deg, #CF1AFF 15.04%, rgba(207, 26, 255, 0.4) 89.48%);
            box-shadow: 0px 0px 56px #ED80E4, inset 0px 0px 12px rgba(255, 255, 255, 0.24);
        }
    }
}

.need-know__tab-body {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
    width: 100%;
    max-width: 714px;
    border-radius: 24px;
    overflow: hidden;

    &.active {
        display: flex;
    }
}

.need-know__tab-figure {
    width: 100%;
}

.need-know__tab-cont {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: 24px;
    margin-top: -24px;
    gap: 18px;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #A830C8 0%, #38116D 100%);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    color: #fff;
    font-family: "montserrat";
}

.need-know__tab-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
}

.need-know__tab-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
}

.need-know__tab-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    width: 100%;
    max-width: max-content;
    border: 1px solid #f3ff00;
    border-radius: 12px;
    overflow: hidden;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    text-transform: uppercase;
    color: #f3ff00;

    &::before {
        content: '';
        display: block;
        width: 30px;
        min-width: 30px;
        height: 30px;
        background: url(/assets/images/zodak-kapli-dly-mam/alert.svg) no-repeat center / 100%;
    }
}

@media all and (min-width: 1024px) {
    .need-know {
        padding: 120px 0;
    }

    .need-know__tab {
        flex-direction: row;
        gap: 32px;
    }

    .need-know__tab-btns {
        gap: 48px;
    }

    .need-know__tab-btn {
        gap: 24px;
        font-size: 20px;

        .nowrap {
            white-space: nowrap;
        }
    }

    .need-know__tab-btn::before {
        width: 48px;
        min-width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .need-know__tab-body {
        margin: 0;
    }

    .need-know__tab-cont {
        gap: 32px;
    }

    .need-know__tab-title {
        font-size: 24px;
    }

    .need-know__tab-text {
        font-size: 18px;
    }

    .need-know__tab-alert {
        padding: 12px 16px 12px 12px;
        font-size: 16px;

        &::before {
            width: 36px;
            min-width: 36px;
            height: 36px;
        }
    }
}

.for-children-and-helps-wrap {
    background: linear-gradient(180deg, #130752 58.91%, #300552 79.26%, #4C0059 100%);
    position: relative;
    padding-bottom: 15%;

    &::after {
        content: '';
        width: 100%;
        padding-bottom: 15%;
        background: url(/assets/images/zodak-kapli-dly-mam/dly-mam-bg-bottom.png) no-repeat center / cover;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* Для детей, потому что */
.for-children {
    padding-bottom: 60px;
    background: url(/assets/images/zodak-kapli-dly-mam/for-children-bg.png) no-repeat bottom center / 100%;
}

.for-children__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.for-children__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 18px;
    width: 100%;
    max-width: 392px;
    background: linear-gradient(142.04deg, rgba(174, 50, 203, 0.7) 5.79%, rgba(88, 30, 119, 0.7) 98.08%);
    backdrop-filter: blur(16px);
    border-radius: 26px;
    overflow: hidden;
}

.for-children__card-icon {
    width: 105px;
    min-width: 105px;
    height: 105px;
}

.for-children__card-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
    font-family: "montserrat";
    text-align: center;
}

.for-children__card-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #f3ff00;
}

.for-children__card-txt {
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    color: #ffddff;
}

@media all and (min-width: 1024px) {
    .for-children {
        padding-bottom: 120px;
    }

    .for-children__card {
        padding: 32px 24px;
        border-radius: 32px;
    }

    .for-children__card-icon {
        width: 145px;
        min-width: 145px;
        height: 145px;
    }

    .for-children__card-cont {
        gap: 12px;
        padding-top: 24px;
    }

    .for-children__card-title {
        font-size: 20px;
    }

    .for-children__card-txt {
        font-size: 18px;
    }
}

/* Помогает при разных проявлениях аллергии */
.helps {
    padding-bottom: 60px;
}

.helps__h2 {
    text-align: center;
}

.helps__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.helps__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 32px;
    gap: 8px;
    width: 100%;
    max-width: 289px;
    border-radius: 12px;
    overflow: hidden;
}

.helps__card-icon {
    width: 100px;
    height: 100px;
}

.helps__card-title {
    font-family: 'montserrat';
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0 18px;
    color: #f3ff00;
}

@media all and (min-width: 1024px) {
    .helps {
        padding-bottom: 120px;
    }

    .helps__card-icon {
        width: 180px;
        height: 180px;
    }

    .helps__card-title {
        padding: 0 24px;
        font-size: 20px;
    }
}